:root{--bg:#0b0a09;--amber:#ffa24a;--ink:#f3ece3;--mut:#9c9187;--sh-accent:#ffa24a}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 "Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.sh{--sh-accent:#ffa24a}
.demo-banner{position:fixed;top:0;left:0;right:0;z-index:70;background:#ffa24a;color:#111;font:700 11px/1 ui-monospace,monospace;letter-spacing:.08em;text-align:center;padding:6px 8px}
.hud{position:fixed;top:23px;left:0;right:0;z-index:60;display:flex;align-items:center;gap:24px;padding:12px clamp(14px,3vw,36px);font:500 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(#0b0a09e6,#0b0a0900)}
.logo{color:var(--ink);text-decoration:none;display:grid;gap:3px}.logo b{font:800 15px/1 "Helvetica Neue",Arial;letter-spacing:.2em}.logo i{color:var(--amber);font-style:normal;margin:0 2px}.logo small{color:var(--mut);font-size:8px}
.hud nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.hud nav a{color:var(--mut);text-decoration:none;padding:7px 10px;border:1px solid transparent;white-space:nowrap}
.hud nav a s{text-decoration:none;color:var(--amber);margin-right:6px}
.hud nav a.on,.hud nav a:hover{color:var(--ink);border-color:#ffa24a55;background:#ffa24a10}
.rec{color:var(--mut);display:flex;gap:6px;align-items:center}.rec i{width:7px;height:7px;border-radius:50%;background:#e0402f;animation:bl 1.6s infinite}
@keyframes bl{50%{opacity:.2}}
/* hero: letterbox + camera dolly driven by --p from scrub-hero */
.hero-wrap{position:relative}
.sh-stage::before,.sh-stage::after{content:"";position:absolute;left:0;right:0;height:9vh;background:#000;z-index:3;pointer-events:none}
.sh-stage::before{top:0}.sh-stage::after{bottom:0}
.sh-canvas,.sh-box{width:min(100vw,100vh)}
.sh-canvas{transform:scale(calc(1 + .12*var(--p,0))) translateY(calc(var(--p,0)*-2%));transform-origin:50% 55%;transition:opacity .6s,transform .25s cubic-bezier(.2,.7,.2,1)}
.sh-stage{background:radial-gradient(60% 50% at 50% 55%,#2a1a0e 0,#0b0a09 70%)}
.sh-head{top:clamp(110px,16vh,170px);z-index:4}
.sh-head h1{font:300 clamp(38px,6vw,92px)/.95 Georgia,"Times New Roman",serif;letter-spacing:-.02em}
.sh-head h1 em{color:var(--amber)}
.sh-head p{font:500 11px/1.4 ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.sh-caption{bottom:calc(9vh + 54px);z-index:4;background:#0b0a09b3;border-left:2px solid var(--amber);border-radius:0;font-family:Georgia,serif}
.sh-caption b{font-family:ui-monospace,monospace}
.sh-lbl{border-color:#ffa24a99;border-radius:2px;font-family:ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;font-size:11px}
.sh-progress{display:none}
.sh-cta{background:var(--amber);border-radius:2px;font:700 12px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;bottom:64px;z-index:65}
/* chapter title cards */
.card{min-height:90vh;display:grid;place-content:center;text-align:center;padding:16vh 24px}
.k{font:500 11px/1 ui-monospace,monospace;letter-spacing:.28em;text-transform:uppercase;color:var(--amber);margin:0 0 22px}
h2{font:300 clamp(40px,7vw,112px)/.98 Georgia,serif;letter-spacing:-.025em;margin:0}
h2 em{color:var(--amber)}
.lede{max-width:560px;margin:28px auto 0;color:var(--mut)}
.reveal{opacity:0;transform:translateY(40px) scale(.98);filter:blur(6px);transition:opacity 1.4s cubic-bezier(.2,.7,.2,1),transform 1.4s cubic-bezier(.2,.7,.2,1),filter 1.4s}
.reveal.in{opacity:1;transform:none;filter:none}
.menu,.locs{padding:14vh clamp(18px,6vw,96px);max-width:1200px;margin:auto}
.menu h2,.locs h2{font-size:clamp(36px,5vw,72px)}
.note{color:var(--mut);font-size:13px}
.menu ul{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:#ffffff14}
.menu li{background:var(--bg);padding:28px 24px;display:grid;grid-template-columns:1fr auto;gap:6px 16px}
.menu h3{margin:0;font:400 26px/1.1 Georgia,serif}.menu li p{grid-column:1;margin:0;color:var(--mut);font-size:14px}.menu li b{grid-row:1;grid-column:2;color:var(--amber);font:500 13px ui-monospace,monospace}
.locs .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:40px}
.locs article{border:1px solid #ffffff1f;padding:28px;background:linear-gradient(160deg,#1a120c,#0b0a09)}
.locs h3{margin:0 0 10px;font:400 28px Georgia,serif}.hrs{font:12px ui-monospace,monospace;color:var(--mut);letter-spacing:.08em}
footer{padding:40px 24px 120px;text-align:center;color:var(--mut);font-size:13px}
.wm{color:var(--ink);font:600 12px ui-monospace,monospace;letter-spacing:.1em}
/* timeline HUD */
.timeline{position:fixed;left:0;right:0;bottom:0;z-index:62;display:flex;align-items:center;gap:14px;padding:12px clamp(14px,3vw,36px);font:500 11px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(#0b0a0900,#0b0a09ee)}
#tl-label{color:var(--ink);white-space:nowrap;border:1px solid #ffa24a66;padding:6px 9px}
.ticks{flex:1;height:14px;position:relative;background:repeating-linear-gradient(90deg,#ffffff33 0 1px,transparent 1px 8px)}
.ticks i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--sp,0)*100%);background:repeating-linear-gradient(90deg,var(--amber) 0 1px,transparent 1px 8px);border-right:2px solid var(--amber)}
#tl-pct{color:var(--amber)}
/* film look */
.grain{position:fixed;inset:-50%;z-index:80;pointer-events:none;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:gr .9s steps(6) infinite}
@keyframes gr{0%{transform:translate(0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,1%)}80%{transform:translate(3%,3%)}}
.vignette{position:fixed;inset:0;z-index:79;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 55%,#000c 100%)}
@media (max-width:768px){.hud{gap:10px}.hud nav a{padding:6px 7px}.hud nav a:not(.on){display:none}.rec{display:none}
 .sh-stage::before,.sh-stage::after{height:6vh}.sh-canvas,.sh-box{width:100vw}.sh-head{top:96px}.sh-caption{bottom:calc(6vh + 120px)}
 .sh-cta{bottom:52px}.grain{animation:none;opacity:.06}.timeline{padding:8px 14px}#tl-pct{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.grain,.rec i{animation:none}.reveal{opacity:1;transform:none;filter:none;transition:none}.sh-canvas{transform:none!important}}
@media (min-width:769px){.sh-canvas{-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}}
@media (prefers-reduced-motion:reduce){.sh-lbl,.sh-lines{display:none}}