:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;background:#000;color:#fff}
body{font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.skip{position:absolute;left:-9999px;top:.5rem;z-index:10;background:#000;color:#fff;padding:.5rem .8rem}.skip:focus{left:.5rem}
#track{position:relative;height:100svh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#seq{position:absolute;inset:0;width:100%;height:100%;display:block}
#seq{opacity:0;transition:opacity .6s}#seq.on{opacity:1}html[data-route=still] #seq{display:none}
.proxy-tag{position:absolute;top:.6rem;left:.6rem;z-index:3;font:600 .7rem/1 ui-monospace,monospace;letter-spacing:.08em;color:#ff7070;background:rgba(0,0,0,.6);padding:.3rem .45rem;border:1px solid #ff7070;border-radius:4px}
/* Layout fix (Oct 26): text + form sit in their own bands; .subject-slot is the free band left for the subject.
   shell.js fits the measured subject box (scene/frames/subject-box.json) inside the slot, so nothing overlaps at any scroll point. */
.overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:.5rem;padding:max(.75rem,env(safe-area-inset-top)) 1rem max(.75rem,env(safe-area-inset-bottom));pointer-events:none}
.overlay>*{pointer-events:auto}.overlay>.subject-slot{pointer-events:none}
.brand{display:flex;justify-content:center;padding-top:1.6rem;flex:none}.brand h1{margin:0;line-height:0}
.wordmark{display:block;width:min(34vw,150px);height:auto;color:#fff}
.copy{flex:none;text-align:center}
/* headline slot sized for up to ~35 chars: always reserves two lines */
.headlines{display:grid;min-height:2.4em;font-size:clamp(1.3rem,5.6vw,1.7rem);align-items:end}
.headline{grid-area:1/1;margin:0;font-weight:500;font-size:1em;line-height:1.2;letter-spacing:.01em;text-wrap:balance;text-shadow:0 2px 18px #000;opacity:0;transform:translateY(.4em);transition:opacity .6s,transform .6s}
.headline.on{opacity:1;transform:none}
html[data-route=still] .headline:first-child,html:not([data-route]) .headline:first-child{opacity:1;transform:none}
.subline{margin:.35rem 0 0;font-size:clamp(.85rem,3.6vw,1rem);line-height:1.35;opacity:.85;text-wrap:balance}
.subject-slot{flex:1 1 auto;min-height:6rem}
.signup{flex:none;align-self:stretch;width:auto;padding:.7rem .85rem;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.72);border-radius:12px}
@media (min-aspect-ratio:1/1){
 .overlay{display:grid;grid-template-columns:1fr minmax(20rem,26rem);grid-template-rows:auto auto 1fr auto;column-gap:2rem;row-gap:1rem;padding:1.5rem 2rem}
 .brand{grid-column:2;grid-row:1;padding-top:.5rem}.wordmark{width:min(16vw,200px)}
 .copy{grid-column:2;grid-row:2}.headlines{font-size:clamp(1.5rem,2.2vw,2.3rem)}.subline{font-size:1.05rem}
 .subject-slot{grid-column:1;grid-row:1/5;min-height:0}
 .signup{grid-column:2;grid-row:4;padding:.9rem 1rem}
}
.consent a{color:inherit}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.status{min-height:1.2em;margin:0;font-size:.85rem}.status:empty{display:none}
:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #000}
.after{min-height:40vh;display:grid;place-items:center;font-size:.85rem;opacity:.7}

@media (prefers-reduced-motion:reduce){.headline{transition:none}#seq{transition:none}}

/* Spacing pass (Oct 26): 8px scale (8/16/24/32), monochrome. */
.overlay{gap:16px}
.brand{padding-top:24px}
.copy{margin-top:8px}.subline{margin-top:8px}
.brand,.copy,.signup{position:relative;z-index:1}
.signup{padding:16px;border-radius:16px}
.signup h2{font-size:1rem;font-weight:500;line-height:1.5;margin:0 0 16px}
form{display:grid;gap:8px}
.email-label{font-size:.875rem;line-height:1.5}
input[type=email]{font:inherit;min-height:48px;padding:8px 16px;color:#fff;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.6);border-radius:8px;min-width:0}
/* consent: checkbox column (44px tap area), text runs full width beside it, pending tag on its own line under the text */
.consent{display:grid;grid-template-columns:44px 1fr;column-gap:8px;align-items:start;margin-top:8px;font-size:.8125rem;line-height:1.5;color:#c8c8c8}
.consent input{grid-column:1;grid-row:1/3;appearance:none;-webkit-appearance:none;width:44px;height:44px;margin:-10px 0 0;cursor:pointer;border:0;border-radius:8px;
 background:no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='1' y='1' width='20' height='20' rx='4' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E")}
.consent input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='1' y='1' width='20' height='20' rx='4' fill='%23fff'/%3E%3Cpath d='M6 11.5l3.2 3.2L16 8' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")}
.consent label{grid-column:2;grid-row:1}
.consent .draft-mark{grid-column:2;grid-row:2;font-size:.75rem;line-height:1.5;color:#a8a8a8;letter-spacing:.02em}
.consent a{color:#fff;display:inline-block;min-height:24px}
button{font:inherit;min-height:48px;margin-top:16px;padding:8px 16px;color:#000;background:#fff;border:1px solid #fff;border-radius:8px;cursor:pointer}
@media (max-aspect-ratio:1/1) and (max-height:700px){.overlay{gap:8px}.brand{padding-top:16px}.wordmark{width:min(28vw,120px)}.copy{margin-top:0}.signup h2{margin-bottom:8px}input[type=email],button{min-height:44px}button{margin-top:16px}}
@media (min-aspect-ratio:1/1){.overlay{row-gap:16px}.copy{margin-top:16px}.subline{margin-top:16px}.signup{padding:24px}.subject-slot{margin-bottom:-1.5rem}}
/* Still fitted to the slot: its measured subject box (vars from the build) is contained in the slot, centred. */
.subject-slot{position:relative;container-type:size;overflow:visible;z-index:0}
.still{position:absolute;inset:0;display:block;transition:opacity .6s}
.still img{position:absolute;display:block;max-width:none;height:auto;
 width:min(100cqw / var(--sbw), 100cqh * var(--sa) / var(--sbh));
 left:calc(50cqw - min(100cqw / var(--sbw), 100cqh * var(--sa) / var(--sbh)) * (var(--sx0) + var(--sbw) / 2));
 top:calc((1 - var(--spin)) * (50cqh - min(100cqw / var(--sbw), 100cqh * var(--sa) / var(--sbh)) / var(--sa) * (var(--sy0) + var(--sbh) / 2))
  + var(--spin) * (100cqh - min(100cqw / var(--sbw), 100cqh * var(--sa) / var(--sbh)) / var(--sa) * (var(--sy0) + var(--sbh))))}
/* which still: first-paint (f0001) with JS + motion; hold (f1033) for no-JS, reduced motion and the still route */
.still-hold{display:none}
html:not(.js) .still-hold,html[data-route=still] .still-hold{display:block}html:not(.js) .still-first,html[data-route=still] .still-first{display:none}
@media (prefers-reduced-motion:reduce){.still-hold{display:block}.still-first{display:none}}
html[data-route=canvas] .still{opacity:0}
@media (prefers-reduced-motion:reduce){.still{transition:none}}
.status{white-space:pre-line;line-height:1.5;margin-top:8px}
.after p{margin:0}.after a{color:#fff;display:inline-block;padding:12px 4px;min-height:44px}

/* monochrome no-JS link */
.signup a[href^="/api/signup/form"]{color:#f2f2f2;text-decoration:underline;display:inline-block;min-height:44px;line-height:44px}
.signup a[href^="/api/signup/form"]:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---- Play-once (work/play-once): video replaces the scroll canvas; no scroll scrubbing. ---- */
#track{height:100svh}
.still img,.hero-video{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 3%,#000 97%,transparent 100%);
 -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 3%,#000 97%,transparent 100%);mask-composite:intersect}
.hero-video{position:absolute;display:block;max-width:none;aspect-ratio:var(--sa);height:auto;opacity:0;background:transparent;
 width:min(100cqw / var(--sbw), 100cqh * var(--sa) / var(--sbh));
 left:calc(50cqw - min(100cqw / var(--sbw), 100cqh * var(--sa) / var(--sbh)) * (var(--sx0) + var(--sbw) / 2));
 top:calc((1 - var(--spin)) * (50cqh - min(100cqw / var(--sbw), 100cqh * var(--sa) / var(--sbh)) / var(--sa) * (var(--sy0) + var(--sbh) / 2))
  + var(--spin) * (100cqh - min(100cqw / var(--sbw), 100cqh * var(--sa) / var(--sbh)) / var(--sa) * (var(--sy0) + var(--sbh))))}
html:not(.js) .hero-video{display:none}
html[data-route=video] .hero-video{opacity:1}
html[data-route=video] .still{opacity:0;transition:none}
html[data-route=hold] .hero-video,html[data-route=still] .hero-video{display:none}
html[data-route=hold] .still-hold{display:block;opacity:1}html[data-route=hold] .still-first{display:none}
@media (prefers-reduced-motion:reduce){.hero-video{display:none!important}}
.hero-ctl{position:absolute;right:12px;top:calc(40px + env(safe-area-inset-top));z-index:3;display:none;gap:8px}
html[data-route=video] .hero-ctl,html[data-route=hold] .hero-ctl{display:flex}
html[data-route=hold] .hero-ctl .pause{display:none}
.hero-ctl button{margin:0;min-height:44px;min-width:44px;padding:0;font-size:1rem;line-height:1;color:#ddd;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.3);border-radius:22px}
.hero-ctl button:hover{color:#fff;border-color:rgba(255,255,255,.6)}
.hero-ctl button:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #000}

/* ---- Typography pass (Jordan 1:28 PM PDT, pairing A): Cormorant Garamond italic = headline only; Inter = everything else.
   Self-hosted OFL woff2, Latin subset (fonts/, licences alongside). Fallback faces carry metric overrides so the swap barely moves anything. ---- */
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500.woff2) format("woff2")}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Arimo"),local("Liberation Sans"),local("Helvetica");size-adjust:106.55%;ascent-override:90.92%;descent-override:22.64%;line-gap-override:0%}
@font-face{font-family:"Cormorant Fallback";font-style:italic;src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT"),local("Tinos Italic"),local("Liberation Serif Italic"),local("Georgia Italic");size-adjust:88.83%;ascent-override:104.02%;descent-override:32.31%;line-gap-override:0%}
body{font-family:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.headlines{font-size:34px}
.headline{font-family:"Cormorant Garamond","Cormorant Fallback",Georgia,serif;font-style:italic;font-weight:500;line-height:1.05;letter-spacing:-.01em}
.subline{font-size:17px;line-height:1.4;opacity:1;color:#ccc}
.signup h2{font-size:15px;font-weight:500}
.email-label{font-size:13px}
button{font-weight:500;font-size:15px;white-space:nowrap}
.status{font-size:14px}
@media (min-aspect-ratio:1/1){.headlines{font-size:clamp(34px,3.4vw,52px)}.subline{font-size:17px}}
/* Readability on #000 (brand bible: not dark and hard to read). Neutral ivory greys only, all >= AA 4.5:1 at their size. */
.subline{color:#d9d9d9}
.consent{color:#dedede}
.consent .draft-mark{color:#c4c4c4}
.after{opacity:1;color:#cfcfcf}
@media (max-aspect-ratio:1/1) and (max-height:700px){.headlines{font-size:28px}.subline{font-size:15px}}

/* animated-image fallback (autoplay blocked): same box as the video */
.hero-anim{position:absolute;display:block;max-width:none;aspect-ratio:var(--sa);height:auto;
 width:min(100cqw / var(--sbw), 100cqh * var(--sa) / var(--sbh));
 left:calc(50cqw - min(100cqw / var(--sbw), 100cqh * var(--sa) / var(--sbh)) * (var(--sx0) + var(--sbw) / 2));
 top:calc((1 - var(--spin)) * (50cqh - min(100cqw / var(--sbw), 100cqh * var(--sa) / var(--sbh)) / var(--sa) * (var(--sy0) + var(--sbh) / 2))
  + var(--spin) * (100cqh - min(100cqw / var(--sbw), 100cqh * var(--sa) / var(--sbh)) / var(--sa) * (var(--sy0) + var(--sbh))));
 -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 3%,#000 97%,transparent 100%);
 -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 3%,#000 97%,transparent 100%);mask-composite:intersect}
html[data-route=anim] .still{opacity:0;transition:none}
html[data-route=anim] .hero-ctl{display:flex}html[data-route=anim] .hero-ctl .pause{display:none}
@media (prefers-reduced-motion:reduce){.hero-anim{display:none!important}}