/* The foot of the page. Black twill, sewn on with yellow contrast stitching. */
.hem{--hem-pad:clamp(20px,4.2vw,120px);--cream:#ece7dd;--dim:#8e8993;position:relative;z-index:3;margin-top:-1px;padding:clamp(52px,6.4svh,76px) var(--hem-pad) clamp(20px,2.6svh,30px);color:var(--cream);background:#141317 url('media/hem/twill.webp') 0 0/96px 96px;border-radius:clamp(20px,2.4vw,32px) clamp(20px,2.4vw,32px) 0 0;box-shadow:0 -14px 34px #17171724}
.hem-seam{position:absolute;left:0;right:0;top:6px;width:100%;height:32px;pointer-events:none}
.hem-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,3vw,56px);padding-right:calc(146px + clamp(26px,3vw,56px));min-height:208px}
.hem-col h2{margin:0 0 14px;font:400 9px/1.4 'Geist Mono',monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.hem-col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.hem-link{position:relative;display:inline-block;padding:2px 0;font:400 14px/1.35 Persona,PersonaFigures,PersonaSymbols,sans-serif;letter-spacing:-.005em;word-spacing:.06em;color:var(--cream);overflow-wrap:anywhere;transition:color .25s}
.hem-link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.6px;background:repeating-linear-gradient(90deg,var(--yellow) 0 6px,transparent 6px 9.5px);clip-path:inset(0 100% 0 0);transition:clip-path .42s var(--ease)}
.hem-link:hover,.hem-link:focus-visible{color:#fff}
.hem-link:hover::after,.hem-link:focus-visible::after{clip-path:inset(0)}
.hem a:focus-visible,.hem button:focus-visible{outline-color:var(--yellow)}
.hem-mail .hem-link{font-size:13px}
.hem-mail small{display:block;font:400 9px/1.3 'Geist Mono',monospace;color:var(--dim);letter-spacing:.03em}

/* The QR hangs from the seam on its own thread. */
.hem-tag{position:absolute;right:var(--hem-pad);top:17px;width:146px;padding:0;margin:0;background:transparent;transform-origin:50% 0;color:#171717;z-index:1}
.hem-tag::before{content:"";position:absolute;left:50%;top:0;width:1.4px;height:43px;margin-left:-.7px;background:var(--yellow)}
.hem-tag-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:34px;padding:22px 12px 11px;border-radius:4px 4px 3px 3px;background:var(--yellow);box-shadow:0 10px 18px #00000066;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%,0 16px)}
.hem-tag-card::before{content:"";position:absolute;left:50%;top:6px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#141317;box-shadow:inset 0 0 0 1.5px #17171755}
.hem-tag img{width:104px;height:104px;background:#fff;padding:2px}
.hem-tag .qr-heading{justify-content:center}

.hem-base{display:flex;align-items:center;gap:clamp(14px,2vw,28px);margin-top:clamp(28px,4svh,44px);padding-top:clamp(14px,2svh,20px);border-top:1px solid #ffffff17;font:400 10px/1.4 'Geist Mono',monospace;letter-spacing:.02em;color:var(--dim)}
.hem-base>span:nth-child(2){margin-right:auto}
.hem-soon{min-height:32px;margin-block:-9px;padding:0;background:transparent;font:inherit;letter-spacing:inherit;color:var(--cream)}
.hem-soon:hover{color:var(--yellow)}

/* The floating QR steps aside for the tag. */
.fixed-download{transition:transform .4s var(--ease),opacity .3s}
body.hem-open .fixed-download{opacity:0;pointer-events:none;transform:translateY(26px)}

@media(max-width:1180px){
  .hem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .hem-grid{padding-right:0;min-height:0}
  .hem-tag{display:none}
}
@media(max-width:560px){
  .hem-grid{gap:26px 18px}
  .hem-mail{grid-column:1/-1}
  .hem-link{font-size:13.5px}
  .hem-base{flex-wrap:wrap;gap:4px 14px;font-size:9px}
  .hem-base>span:nth-child(2){margin-right:0;flex-basis:100%;order:3}
  .hem-soon{margin-left:auto}
}
@media(max-height:540px) and (orientation:landscape){
  .hem{padding-top:44px}
  .hem-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .hem-mail{grid-column:1/-1}
  .hem-mail ul{display:flex;flex-wrap:wrap;gap:8px 24px}
}
@media(prefers-reduced-motion:reduce){.hem-link::after{transition:none}}