@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(fonts/space-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}

:root{
  --ink:#170e0c;--ink-deep:#0f0908;--surface:#261915;
  --accent-dim:#3b2722;--rule-strong:#8a6054;
  --accent:#f04735;--btn:#b3271e;--btn-hover:#c22f25;
  --text:#f3ebe1;--muted:#ab9a90;--gold:#c8a25c;
  --radius:10px;
}
*{box-sizing:border-box}
html{background:var(--ink);color:var(--text);color-scheme:dark}
body{overflow-x:clip;margin:0;font:400 1.0625rem/1.6 Inter,system-ui,sans-serif;background:var(--ink);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 70% 10%,rgba(179,39,30,.22),transparent 70%)}

#scene{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;display:block;touch-action:pan-y}
.poster{display:none}
.no-gl #scene{display:none}
.no-gl .poster{display:block;position:fixed;top:0;right:0;width:min(60vw,720px);height:auto;max-height:100vh;object-fit:contain}
.no-gl .gl-only{display:none}
.no-gl-only{display:none}
.no-gl .no-gl-only{display:block}

.top{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:.75rem;padding:1rem clamp(1rem,4vw,3rem);pointer-events:none}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--text);text-decoration:none;font:500 1.15rem/1 "Space Grotesk",sans-serif;pointer-events:auto}
.tag{font-size:.8rem;font-weight:500;color:var(--gold);border:1px solid rgba(200,162,92,.45);border-radius:6px;padding:.2rem .5rem}

#story{position:relative;z-index:2;pointer-events:none}
.beat{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:6rem clamp(1rem,6vw,5rem)}
.beat-long{min-height:170vh;align-items:flex-start;padding-top:30vh}
.beat-long .panel{position:sticky;top:30vh}
.panel{max-width:31rem;pointer-events:auto}
.kicker{display:flex;align-items:center;gap:.75rem;margin:0 0 1rem;color:var(--gold);font-weight:500;font-size:.95rem}
.kicker::before{content:"";width:28px;height:1px;background:var(--gold)}
h1,h2{font:500 clamp(2.1rem,4.4vw,3.5rem)/1.06 "Space Grotesk",sans-serif;letter-spacing:-.02em;margin:0 0 1.1rem;text-wrap:balance}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.accent{color:var(--accent)}
.lede{color:var(--muted);margin:0 0 1rem;max-width:28rem}
.lede strong{color:var(--text);font-weight:500}
.hint{color:var(--text);font-size:.92rem;opacity:.75;margin:1.5rem 0 0}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 1.4rem;border-radius:var(--radius);background:var(--btn);color:var(--text);font-weight:500;text-decoration:none;box-shadow:inset 0 1px 0 #ffffff29,0 10px 24px -10px #b3271ea6}
.btn:hover{background:var(--btn-hover)}
.btn.ghost{background:transparent;border:1px solid var(--rule-strong);box-shadow:none}
.btn.ghost:hover{border-color:var(--gold)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.dots{position:fixed;inset:0;z-index:3;pointer-events:none}
.dot{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;padding:0;background:none;cursor:pointer;opacity:0;transition:opacity .3s;pointer-events:none}
.dots-on .dot{opacity:1;pointer-events:auto}
.dot::before{content:"";position:absolute;inset:13px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(240,71,53,.55);animation:ping 1.8s ease-out infinite}
.dot span{position:absolute;left:40px;top:50%;transform:translateY(-50%);font-size:.8rem;font-weight:500;color:var(--text);background:rgba(15,9,8,.78);border:1px solid var(--accent-dim);border-radius:6px;padding:.15rem .45rem;white-space:nowrap}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(240,71,53,.55)}100%{box-shadow:0 0 0 14px rgba(240,71,53,0)}}

#layer-card{position:fixed;z-index:6;left:clamp(1rem,6vw,5rem);bottom:clamp(1rem,8vh,5rem);max-width:24rem;background:rgba(38,25,21,.94);border:1px solid rgba(200,162,92,.35);border-radius:14px;padding:1.1rem 1.25rem 1.2rem;box-shadow:0 18px 40px #0000008c}
#layer-card[hidden]{display:none}
#layer-card h3{margin:0 0 .35rem;font:500 1.35rem/1.2 "Space Grotesk",sans-serif;color:var(--text)}
#layer-card p{margin:0 0 .9rem;color:var(--muted);font-size:.98rem}
#layer-card button{font:inherit;font-size:.92rem;font-weight:500;color:var(--text);background:transparent;border:1px solid var(--rule-strong);border-radius:var(--radius);min-height:44px;padding:0 1rem;cursor:pointer}
.focused #story .panel{opacity:.15;transition:opacity .3s}

.cta-foot{display:none}
.foot{position:relative;z-index:2;padding:2rem clamp(1rem,6vw,5rem) 2.5rem;color:var(--muted);font-size:.85rem}
.foot a{color:var(--text)}

@media (max-width:820px), (max-aspect-ratio:9/10){
  .beat{align-items:flex-end;padding:0 1rem 2.5rem}
  .beat-long{padding-top:0;align-items:flex-end}
  .beat-long .panel{position:sticky;bottom:2.5rem}
  .panel{max-width:none;width:calc(100% + 2rem);background:linear-gradient(to bottom,rgba(23,14,12,0),rgba(23,14,12,.88) 22%);padding-top:2.5rem;margin:0 -1rem;padding-left:1rem;padding-right:1rem}
  
  .cards .beat .panel{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;margin:0;padding:3rem 1rem calc(1.5rem + env(safe-area-inset-bottom));background:linear-gradient(to bottom,rgba(23,14,12,0),rgba(23,14,12,.94) 2.25rem);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s,transform .35s,visibility 0s .35s}
  .cards .beat .panel.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .35s,visibility 0s}
  .cards.focused #story .panel.is-active{opacity:0;visibility:hidden}
  .cards .hint{display:none}
  .cards .foot{display:none}
  .cards .cta-foot{display:block;margin:1.25rem 0 0;color:var(--muted);font-size:.8rem}
  .cards .cta-foot a{color:var(--text)}
  h1,h2{font-size:clamp(1.75rem,7.4vw,2.4rem)}
  .lede{font-size:1rem}
  #layer-card{left:1rem;right:1rem;bottom:1rem;max-width:none}
  .no-gl .poster{width:100%;max-height:60vh}
}
@media (prefers-reduced-motion:reduce){
  .dot::before{animation:none}
  .dot,.focused #story .panel,.cards .beat .panel,.cards .beat .panel.is-active{transition:none;transform:none}
}