:root{
  --ink:#0b0a09; --paper:#f3eee4; --paper-2:#e9e2d4; --cream:#efe6d3; --rule:rgba(11,10,9,.22);
  --serif:"Newsreader","Iowan Old Style",Georgia,serif; --sans:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --maxw:720px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#000;color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- sound toggle ---------- */
.sound-toggle{position:fixed;top:16px;right:16px;z-index:50;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(0,0,0,.35);color:#f2ede3;font:500 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s,border-color .2s}
.sound-toggle .dot{width:8px;height:8px;border-radius:50%;background:#6b6660;transition:background .2s,box-shadow .2s}
.sound-toggle[aria-pressed="true"] .dot{background:#ffb454;box-shadow:0 0 10px #ffb454}
.sound-toggle:hover{background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.5)}
body.on-paper .sound-toggle{border-color:rgba(11,10,9,.3);background:rgba(243,238,228,.7);color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;height:320vh;background:#000}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000}
#hero-canvas,#grain-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#grain-canvas{mix-blend-mode:overlay;opacity:.38;pointer-events:none}
.hero-html{position:absolute;inset:0;pointer-events:none}
.hero-html .eyebrow{position:absolute;left:0;right:0;margin:0;text-align:center;font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#f2ede3;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.toc{position:absolute;left:50%;transform:translateX(-50%);width:min(340px,80vw);display:flex;flex-direction:column;gap:9px;opacity:0;pointer-events:none;transition:opacity .45s}
.toc.show{opacity:1;pointer-events:auto}
.toc a{display:flex;align-items:baseline;gap:10px;color:#f2ede3;text-decoration:none;font:400 15px/1.2 var(--serif)}
.toc a .n{font-size:12px;opacity:.85}
.toc a .l{flex:1;border-bottom:1px dotted rgba(242,237,227,.55);transform:translateY(-4px)}
.toc a .t{font-weight:500}
.toc a:hover .t{text-decoration:underline;text-underline-offset:3px}
.scroll-hint,.unlock-hint{position:absolute;left:0;right:0;margin:0;text-align:center;font:400 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,237,227,.55);opacity:0;transition:opacity .6s}
.scroll-hint{bottom:28px}.unlock-hint{bottom:52px}
.scroll-hint.show,.unlock-hint.show{opacity:1}
.scroll-hint.show{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- film ---------- */
.film{background:#000;padding:8vh 0 10vh}
.film-frame{max-width:1180px;margin:0 auto;padding:0 20px}
.player{position:relative;aspect-ratio:16/9;background:#050505;border-radius:4px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.player .play{position:absolute;inset:0;width:100%;height:100%;border:0;background:linear-gradient(to top,rgba(0,0,0,.35),rgba(0,0,0,0) 40%);color:#f2ede3;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .35s}
.player .play .ring{width:92px;height:92px;border-radius:50%;border:1px solid rgba(242,237,227,.75);display:grid;place-items:center;position:relative;transition:transform .25s,background .25s}
.player .play .tri{width:0;height:0;border-left:22px solid #f2ede3;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:6px}
.player .play .txt{font:400 20px/1 var(--serif);letter-spacing:.01em}
.player .play:hover .ring{transform:scale(1.06);background:rgba(242,237,227,.08)}
.player.playing .play{opacity:0;pointer-events:none}
.controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:14px 18px;background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0));opacity:0;transition:opacity .3s;font:500 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#f2ede3}
.player.playing:hover .controls,.player.playing:focus-within .controls,.player.paused .controls{opacity:1}
.controls .ctl{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:6px 4px;opacity:.85}
.controls .ctl:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.controls .bar{flex:1;height:14px;display:flex;align-items:center;cursor:pointer}
.controls .bar::before{content:"";display:block;width:100%;height:2px;background:rgba(242,237,227,.25);position:absolute;left:0;right:0}
.controls .fill{height:2px;background:#ffb454;position:relative;z-index:1;width:0;box-shadow:0 0 8px #ffb454}
.controls .bar{position:relative}
.film-caption{max-width:var(--maxw);margin:18px auto 0;color:rgba(242,237,227,.6);font:400 15px/1.5 var(--serif);text-align:center}

/* ---------- article ---------- */
.article{background:var(--paper);color:var(--ink);padding:12vh 20px 14vh;position:relative;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.article::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(11,10,9,.35),transparent)}
.lede{max-width:820px;margin:0 auto 10vh}
.eyebrow.dark{color:#5b5548;font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin:0 0 22px}
.lede h2{margin:0;font:400 clamp(30px,4.2vw,50px)/1.12 var(--serif);letter-spacing:-.012em;font-variation-settings:"opsz" 72}
.sec{max-width:var(--maxw);margin:0 auto;padding:6vh 0 3vh;border-top:1px solid var(--rule);opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.sec.in{opacity:1;transform:none}
.sec .num{margin:0 0 6px;font:500 13px/1 var(--serif);color:#6a6355}
.sec h3{margin:0 0 22px;font:500 clamp(26px,3vw,36px)/1.15 var(--serif);letter-spacing:-.01em}
.sec p{font:400 19px/1.55 var(--serif);margin:0 0 20px}
.sec .sig{font-style:italic;color:#5b5548}
blockquote{margin:30px 0;padding:0 0 0 22px;border-left:2px solid #ffb454}
blockquote p{font:italic 400 24px/1.35 var(--serif);color:#3a352c}
.spec{margin:26px 0 8px;padding:22px 24px;background:var(--paper-2);border:1px solid var(--rule);border-radius:3px}
.spec dl{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 30px}
.spec dt{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#6a6355;margin-bottom:6px}
.spec dd{margin:0;font:400 20px/1.2 var(--serif)}
@media (max-width:560px){.spec dl{grid-template-columns:1fr}.sec p{font-size:17px}.player .play .ring{width:70px;height:70px}.player .play .txt{font-size:16px}.controls .time,.controls #fs{display:none}}
#aifm-footer{background:var(--paper)}