@font-face{font-family:"Archivo";src:url(../assets/fonts/archivo-latin-standard-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
:root{--bg:#4E5634;--fg:#EFEBE3;--word:#59623D;--pad:clamp(18px,3.2vw,48px);--ease:cubic-bezier(.16,1,.3,1);--blaze:#E8541E}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
::selection{background:var(--blaze);color:#EFEBE3}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}

.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--pad) * .8) var(--pad);color:var(--fg)}
.mark{display:flex;align-items:flex-end;gap:clamp(8px,.8vw,12px);height:clamp(18px,2.1vw,26px);color:inherit}
.mark span{display:block;height:100%}.mark .duck{height:132%;margin-bottom:-1%}.mark svg{height:100%;width:auto;display:block}
.drop{font:500 clamp(11px,.9vw,13px)/1 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:.7em}
.drop .sep{opacity:.5}
.eye{width:.8em;height:1.05em;border-radius:50%;background:currentColor;position:relative;display:inline-block}
.eye::before,.eye::after{content:"";position:absolute;left:50%;top:50%;width:.62em;height:.14em;background:var(--bg);transform:translate(-50%,-50%) rotate(45deg)}
.eye::after{transform:translate(-50%,-50%) rotate(-45deg)}

.run{height:900vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg)}
.stage::before{content:"";position:absolute;inset:0;background:var(--wipe,transparent);clip-path:circle(var(--wr,0vmax) at 50% 52%);will-change:clip-path}

/* the giant word behind the jacket */
.words{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.w{grid-area:1/1;font:800 clamp(90px,19.5vw,420px)/.8 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase;letter-spacing:-.02em;color:var(--word);
  white-space:nowrap;opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 6%)) scale(calc(.96 + var(--o,0) * .04));will-change:opacity,transform}

.jacket{position:absolute;left:50%;top:52%;width:min(46vw,calc(64vh / .904));aspect-ratio:1/.904;translate:-50% -50%;perspective:2200px}
.turner{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.28))}
.face.b{transform:rotateY(180deg)}
.shadow{position:absolute;left:12%;right:12%;bottom:-4%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.32),rgba(0,0,0,0));
  transform-origin:50% 50%;will-change:transform,opacity}

.cap{position:absolute;left:var(--pad);bottom:calc(var(--pad) * .9);max-width:min(560px,60vw)}
.side{font:500 clamp(11px,.95vw,13px)/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.name{font:800 clamp(30px,3.4vw,58px)/.9 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase;letter-spacing:-.01em}
.spec{margin-top:10px;font:500 clamp(10.5px,.85vw,12.5px)/1.4 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.hint{position:absolute;right:var(--pad);bottom:calc(var(--pad) * .9);display:flex;align-items:center;gap:10px;font:500 11px/1 "IBM Plex Mono",monospace;
  letter-spacing:.14em;text-transform:uppercase;transition:opacity .5s}
.hint svg{width:10px;height:30px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.end{position:absolute;right:var(--pad);bottom:calc(var(--pad) * .9);text-align:right;opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 16px));pointer-events:none}
.end p{font:800 clamp(30px,3.4vw,58px)/.9 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase}
.end.live{pointer-events:auto}
.end .cta{margin-top:18px}

/* the opening: the jacket rises into place, then the word */
.jacket{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--ease) .15s,transform 1.4s var(--ease) .15s}
.ready .jacket{opacity:1;transform:none}
.words{opacity:0;transition:opacity 1.4s var(--ease) .55s}.ready .words{opacity:1}
.cap,.hint{opacity:0;transition:opacity 1s var(--ease) .9s}.ready .cap,.ready .hint{opacity:1}
.ready .hint.gone{opacity:0;transition-delay:0s}

@media (max-width:760px){
  .w{font-size:clamp(70px,22vw,130px);white-space:normal;text-align:center;line-height:.82}
  .jacket{width:84vw;top:47%}
  .cap{max-width:none;right:var(--pad)}
  .hint{display:none}
  .end{left:var(--pad);text-align:left;bottom:auto;top:calc(var(--pad) * .8 + 56px)}
}
@media (prefers-reduced-motion:reduce){.jacket,.words,.cap,.hint{transition:none}}

/* the × follows the field: blaze on Marsh and black, Bone on blaze */
.mark{--wm-x:var(--mx,#E8541E);--duck-x:var(--mx,#E8541E)}