/* BatHoot — Gotham night patrol (archetype E: immersive scroll world) */
@font-face{font-family:"Bangers";src:url(/assets/fonts/bangers.woff2) format("woff2");font-display:swap;font-weight:400}
@font-face{font-family:"Special Elite";src:url(/assets/fonts/special-elite.woff2) format("woff2");font-display:swap;font-weight:400}
@font-face{font-family:"Libre Franklin";src:url(/assets/fonts/libre-franklin.woff2) format("woff2");font-display:swap;font-weight:100 900}

:root{
  --night:#050705; --night-2:#0b100a; --ink:#efede3; --muted:#a3ab98; --line:rgba(239,237,227,.14);
  --lime:#c6ff3a; --lime-ink:#0b1402; --gold:#e3a83c;
  --f-display:"Bangers",Impact,"Arial Black",sans-serif;
  --f-type:"Special Elite","Courier New",monospace;
  --f-body:"Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hard:5px 5px 0 #000; --glow:0 0 28px rgba(198,255,58,.45);
  --nav-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav-h)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--night);color:var(--ink);font:400 clamp(16px,1.05vw,18px)/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
main,footer{overflow-x:clip}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p,figure,ol,ul{margin:0}
.wrap{padding-inline:clamp(18px,5vw,96px);max-width:1440px;margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--lime);color:var(--lime-ink);padding:.6em 1em;font-weight:700}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* atmosphere: grain + weather canvas */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:45;opacity:.06;mix-blend-mode:overlay;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#weather{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

/* type */
.kicker{font:400 .82rem/1.3 var(--f-type);letter-spacing:.08em;text-transform:uppercase;color:var(--lime);margin-bottom:.9rem}
.kicker span{color:var(--muted)}
.h2{font:400 clamp(2.7rem,7vw,6rem)/.9 var(--f-display);letter-spacing:.01em;text-transform:uppercase;text-shadow:4px 4px 0 #000}
.h2 em{font-style:normal;color:var(--lime)}
.sub{color:var(--muted);max-width:44ch;margin-top:1rem}
.caption-box{display:inline-block;background:var(--ink);color:#0a0c08;font:400 clamp(1.05rem,1.6vw,1.35rem)/1.4 var(--f-type);padding:.8em 1em;border:3px solid #000;box-shadow:var(--hard);max-width:34ch}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:48px;padding:.6em 1.25em;font:400 1.2rem/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:3px solid #000;border-radius:4px;cursor:pointer;transition:transform .1s,box-shadow .1s,background .2s;white-space:nowrap}
.btn small{font:400 .8rem var(--f-type);letter-spacing:0;text-transform:none;opacity:.8}
.btn-lime{background:var(--lime);color:var(--lime-ink);box-shadow:var(--hard)}
.btn-lime:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #000,var(--glow)}
.btn-lime:active{transform:translate(4px,4px);box-shadow:0 0 0 #000}
.btn-ghost{background:rgba(5,7,5,.55);color:var(--ink);border-color:var(--line);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn-signal{background:transparent;color:var(--lime);border:2px dashed rgba(198,255,58,.6)}
.btn-signal:hover{background:rgba(198,255,58,.08);box-shadow:var(--glow)}
.btn-sm{min-height:40px;padding:.4em .9em;font-size:1.05rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem}

/* CA pill */
.ca{display:flex;align-items:center;gap:.6rem;max-width:min(100%,460px);padding:.35rem .35rem .35rem .4rem;background:rgba(5,7,5,.78);border:2px solid var(--line);border-radius:4px;backdrop-filter:blur(8px)}
.ca-tag{font:400 1rem var(--f-display);letter-spacing:.06em;background:var(--lime);color:var(--lime-ink);padding:.25em .55em;border-radius:2px}
.ca code{flex:1;min-width:0;font:400 .95rem var(--f-type);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.ca-copy{border:0;border-radius:2px;background:var(--ink);color:#000;font:400 1rem var(--f-display);letter-spacing:.06em;padding:.45em .8em;cursor:pointer}
.ca-copy:disabled{opacity:.35;cursor:not-allowed}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-inline:clamp(14px,3vw,40px);background:linear-gradient(rgba(5,7,5,.92),rgba(5,7,5,.6));backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:400 1.6rem/1 var(--f-display);letter-spacing:.04em}
.brand img{width:38px;height:38px;border-radius:50%;border:2px solid var(--lime);object-fit:cover}
.nav-links{display:none;gap:1.6rem;font:400 .85rem var(--f-type);text-transform:uppercase;letter-spacing:.06em}
.nav-links a{text-decoration:none;color:var(--muted)}
.nav-links a:hover,.nav-links a.on{color:var(--lime)}
.nav-right{display:flex;align-items:center;gap:.8rem}
.clock{display:flex;align-items:center;gap:.4rem;font:400 .9rem var(--f-type);color:var(--muted)}
.clock i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:blink 2s infinite}
@keyframes blink{50%{opacity:.25}}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.progress i{display:block;height:100%;width:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 8px var(--lime)}
@media (min-width:980px){.nav-links{display:flex}}

/* scenes: sticky stages (pinned chapters) */
.scene{position:relative}
.stage{position:relative;height:100svh;min-height:560px;overflow:hidden}
.js-motion .hero.scene{height:210svh}
.js-motion .signal.scene{height:200svh}
.js-motion .batcave.scene{height:180svh}
.js-motion .scene>.stage{position:sticky;top:0}

/* HERO */
.hero .stage{min-height:640px}
.hero-art{position:absolute;inset:0;background:radial-gradient(120% 80% at 70% 10%,#0d1a07 0%,var(--night) 60%)}
.hero-box{--fx:.5;position:absolute;top:50%;left:50%;width:max(100%,177.78svh);aspect-ratio:16/9;transform:translate(calc(var(--fx)*-100%),-50%)}
.hero-img{width:100%;height:100%;object-fit:cover;filter:brightness(var(--lit,.4)) saturate(var(--sat,.55));transform:scale(var(--zoom,1.08));transform-origin:30% 60%;will-change:transform,filter}
.beam{position:absolute;left:72%;bottom:-4%;width:16%;height:108%;transform-origin:50% 100%;transform:rotate(var(--rot,32deg));opacity:var(--beam,.6);
  clip-path:polygon(46% 100%,54% 100%,100% 0,0 0);background:linear-gradient(to top,rgba(198,255,58,.75),rgba(198,255,58,.18) 70%,rgba(198,255,58,.05));mix-blend-mode:screen;filter:blur(3px);pointer-events:none}
.disc-glow{position:absolute;left:43.5%;top:16.5%;width:20%;aspect-ratio:1;transform:translate(-50%,-50%) scale(var(--disc,.6));border-radius:50%;background:radial-gradient(circle,rgba(198,255,58,.55),rgba(198,255,58,0) 65%);mix-blend-mode:screen;opacity:var(--discO,.3);pointer-events:none}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,5,.15) 0%,rgba(5,7,5,0) 30%,rgba(5,7,5,.55) 62%,var(--night) 100%)}
.hero-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:1.1rem;padding-top:calc(var(--nav-h) + 20px);padding-bottom:clamp(26px,6svh,64px)}
.wordmark{font:400 clamp(5rem,24vw,13rem)/.82 var(--f-display);letter-spacing:.01em;text-transform:none;color:var(--ink);text-shadow:6px 6px 0 #000,0 0 40px rgba(198,255,58,.25)}
.wordmark span{color:var(--lime)}
.lead{font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:38ch;line-height:1.5;text-shadow:0 2px 12px #000}
.scroll-hint{font:400 .8rem var(--f-type);color:var(--muted);letter-spacing:.08em}
@media (min-width:900px){
  .wordmark{font-size:clamp(5rem,10vw,11.5rem)}
  .hero-copy{justify-content:center;padding-left:max(54%,calc(50% + 120px));padding-right:clamp(24px,4vw,64px)}
  .hero-shade{background:linear-gradient(90deg,rgba(5,7,5,0) 35%,rgba(5,7,5,.55) 70%,rgba(5,7,5,.8)),linear-gradient(180deg,rgba(5,7,5,0) 70%,var(--night) 100%)}
}
@media (max-width:899px){
  .hero-box{--fx:.27;top:calc(var(--nav-h) - 6px);width:max(230%,640px);transform:translate(calc(var(--fx)*-100%),0)}
  .hero-shade{background:linear-gradient(180deg,rgba(5,7,5,0) 0%,rgba(5,7,5,0) 38%,rgba(5,7,5,.8) 58%,var(--night) 70%)}
  .hero .cta-row .btn{flex:1 1 auto;min-height:44px;font-size:1.05rem;padding-inline:.9em}
  .hero-copy{gap:.85rem}
}

/* marquee */
.marquee{position:relative;z-index:3;overflow:hidden;background:var(--lime);color:var(--lime-ink);border-block:3px solid #000;transform:rotate(-1.2deg);margin:-12px 0 0}
.track{display:flex;width:max-content;animation:crawl 32s linear infinite}
.track span{padding:.5em 1.2em;font:400 1.5rem/1 var(--f-display);letter-spacing:.06em;white-space:nowrap;text-transform:uppercase}
@keyframes crawl{to{transform:translateX(-50%)}}

/* CHAPTER 01 signal */
.signal-art{position:absolute;inset:0}
.signal-img{width:100%;height:100%;object-fit:cover;object-position:40% 50%;transform:scale(var(--sz,1.15));will-change:transform}
.signal-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--night) 0%,rgba(5,7,5,0) 22%,rgba(5,7,5,0) 55%,rgba(5,7,5,.85) 100%)}
.signal-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:1rem;padding-bottom:clamp(40px,10svh,110px)}
.sig-b{margin-left:clamp(0px,8vw,140px);background:var(--lime);border-color:#000}

/* CHAPTER 02 who */
.who{display:grid;gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(80px,12vw,170px)}
.panel{position:relative;background:#000;border:3px solid var(--ink);box-shadow:8px 8px 0 #000}
.who-art{transform:rotate(-1.5deg);max-width:560px}
.who-art img{width:100%;aspect-ratio:1;object-fit:cover}
.who-art figcaption,.panel figcaption{font:400 .95rem/1.45 var(--f-type);color:var(--muted);padding:.75em 1em;background:var(--night-2);border-top:3px solid var(--ink)}
.who-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
.who-copy .h2{margin-bottom:.4rem}
.who-copy .caption-box:nth-of-type(2){margin-left:clamp(0px,4vw,60px)}
.sfx{font:400 clamp(3rem,8vw,6.5rem)/1 var(--f-display);color:var(--lime);transform:rotate(-4deg);text-shadow:5px 5px 0 #000,var(--glow);margin-top:.4rem}
@media (min-width:860px){.who{grid-template-columns:.9fr 1.1fr}}

/* CHAPTER 03 patrol */
.patrol{position:relative;padding-block:clamp(40px,6vw,80px) clamp(60px,8vw,120px);background:linear-gradient(180deg,var(--night),#081006 50%,var(--night))}
.patrol-head{margin-bottom:clamp(24px,4vw,48px)}
.patrol-track{display:grid;gap:28px;padding-inline:clamp(18px,5vw,96px)}
.frame{margin:0;position:relative}
.frame-img{position:relative;overflow:hidden;border:3px solid var(--ink);box-shadow:8px 8px 0 #000;background:#000}
.frame.tall .frame-img{aspect-ratio:3/4}
.frame.square .frame-img{aspect-ratio:1}
.frame-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame figcaption{font:400 .95rem/1.45 var(--f-type);color:var(--muted);margin-top:.9rem;max-width:36ch}
.frame figcaption b{display:inline-block;font:400 1.3rem/1 var(--f-display);color:var(--lime);letter-spacing:.06em;margin-right:.4rem}
@media (min-width:600px) and (max-width:899px){.patrol-track{grid-template-columns:1fr 1fr}}
@media (min-width:900px){
  .js-motion .patrol{padding:0}
  .js-motion .patrol-pin{height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:var(--nav-h)}
  .js-motion .patrol-track{display:flex;gap:clamp(40px,5vw,90px);width:max-content;align-items:flex-start}
  .js-motion .frame{flex:none}
  .js-motion .frame.tall{width:calc(min(50svh,520px)*.75)}
  .js-motion .frame.square{width:min(50svh,520px)}
  .js-motion .frame:nth-child(even){margin-top:4svh}
  .js-motion .patrol-head{margin-bottom:3svh}
  .js-motion .patrol-head .h2{font-size:clamp(2.6rem,5vw,4.6rem)}
  html:not(.js-motion) .patrol-track{grid-template-columns:repeat(4,1fr)}
}

/* CHAPTER 04 batcave */
.cave-art{position:absolute;inset:0}
.cave-img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;transform:scale(var(--cz,1.12));filter:brightness(.85) saturate(1)}
.cave-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,5,.9) 0%,rgba(5,7,5,.55) 45%,rgba(5,7,5,0) 75%),linear-gradient(180deg,var(--night),transparent 18%,transparent 82%,var(--night))}
.cave-ui{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:var(--nav-h)}
.hud-note{color:var(--muted);font-size:.95rem;margin:.9rem 0 1.4rem;max-width:44ch}
.hud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:720px}
.hud-cell{position:relative;padding:.85rem 1rem;border:1px solid rgba(198,255,58,.35);background:rgba(5,12,4,.72);backdrop-filter:blur(6px);box-shadow:inset 0 0 22px rgba(198,255,58,.08);overflow:hidden}
.hud-cell::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(198,255,58,.05) 0 1px,transparent 1px 4px);pointer-events:none}
.hud-cell span{display:block;font:400 .72rem var(--f-type);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hud-cell b{display:block;font:400 clamp(1.4rem,2.6vw,2.1rem)/1.1 var(--f-display);letter-spacing:.04em;color:var(--lime);text-shadow:0 0 14px rgba(198,255,58,.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-cell.tba b{color:var(--ink);opacity:.8;text-shadow:none}
.hud-cell.wide{grid-column:1/-1}
.hud-log{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:1.2rem;font:400 .8rem var(--f-type);color:var(--lime);opacity:.8}
@media (min-width:700px){.hud{grid-template-columns:repeat(4,minmax(0,1fr))}.hud-cell.wide{grid-column:span 4}}
@media (max-width:640px){.js-motion .batcave.scene{height:auto}.js-motion .batcave .stage{position:relative;height:auto;min-height:100svh}.cave-ui{padding-block:calc(var(--nav-h) + 30px) 50px}}

/* CHAPTER 05 villains */
.villains{padding-block:clamp(80px,12vw,170px)}
.sec-head{margin-bottom:clamp(28px,4vw,56px)}
.comic{display:grid;gap:clamp(18px,2.4vw,30px)}
.panel-img{position:relative;overflow:hidden}
.panel-img.r43{aspect-ratio:4/3}.panel-img.r34{aspect-ratio:3/4}.panel-img.r11{aspect-ratio:1}
.panel-img img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;transform:translateY(var(--py,0));will-change:transform}
.panel figcaption b{display:block;font:400 1.5rem/1.05 var(--f-display);letter-spacing:.05em;color:var(--ink);margin-bottom:.3rem}
.pow{position:absolute;top:14px;right:14px;z-index:2;font:400 clamp(1.4rem,3vw,2.4rem)/1 var(--f-display);color:#000;background:var(--lime);padding:.25em .5em;border:3px solid #000;box-shadow:4px 4px 0 #000;transform:rotate(6deg)}
.pow-2{top:auto;bottom:calc(100% - 70px);left:14px;right:auto;transform:rotate(-6deg);background:var(--gold)}
.p-text{background:var(--night-2);padding:clamp(20px,2.4vw,32px)}
.wanted{list-style:none;padding:0;display:grid;gap:.2rem}
.wanted li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.75rem 0;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.wanted b{font:400 1.5rem/1 var(--f-display);letter-spacing:.04em}
.wanted span{font:400 .85rem var(--f-type);color:var(--lime)}
@media (min-width:860px){
  .comic{grid-template-columns:repeat(12,1fr)}
  .p-wide{grid-column:1/9}
  .p-tall{grid-column:9/13;grid-row:span 2;align-self:start}
  .p-sq{grid-column:1/6;transform:rotate(-.8deg)}
  .p-text{grid-column:6/9;align-self:center}
}

/* CHAPTER 06 buy */
.buy{position:relative;padding-bottom:clamp(80px,12vw,160px)}
.buy-art{position:relative;overflow:hidden;height:clamp(300px,62vw,760px)}
.buy-img{position:absolute;inset:0}
.car-img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;transform:translateX(var(--cx,0)) scale(1.1);will-change:transform}
.buy-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--night) 0%,transparent 25%,transparent 60%,var(--night) 100%)}
.buy-body{position:relative;z-index:2;margin-top:clamp(-140px,-9vw,-40px)}
.steps{list-style:none;padding:0;display:grid;gap:14px;counter-reset:s}
.steps li{position:relative;padding:1.4rem 1.3rem 1.3rem;background:var(--ink);color:#0a0c08;border:3px solid #000;box-shadow:var(--hard)}
.steps .num{position:absolute;top:-16px;right:14px;font:400 1.6rem/1 var(--f-display);background:var(--lime);border:3px solid #000;padding:.15em .4em}
.steps h3{font:400 1.7rem/1 var(--f-display);letter-spacing:.04em;margin-bottom:.4rem}
.steps p{font-size:.98rem}
.steps a{font-weight:700}
.buy-ca{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}
.warn{font:400 .85rem var(--f-type);color:var(--muted)}
.minor-link{color:var(--muted);text-decoration:underline;text-underline-offset:2px;font-size:.8rem}
.minor-link:hover{color:var(--lime)}
.inline-ca{font:400 .9em var(--f-type);color:var(--lime);word-break:break-all}
.chart-box{width:100%;max-width:980px;min-width:0;border:2px solid rgba(198,255,58,.55);border-radius:6px;background:var(--night-2);box-shadow:var(--hard),0 0 36px rgba(198,255,58,.18);overflow:hidden}
.chart-head{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border-bottom:1px solid var(--line);min-width:0}
.chart-tag{font:400 .95rem var(--f-display);letter-spacing:.06em;background:var(--lime);color:var(--lime-ink);padding:.15em .5em;border-radius:2px;flex:none}
.chart-title{font:400 .85rem var(--f-type);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.chart-frame{position:relative;width:100%;aspect-ratio:16/10;background:#050705}
.chart-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:1}
.chart-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 .9rem var(--f-type);color:var(--lime);text-align:center;padding:1rem}
@media (max-width:699px){.chart-frame{aspect-ratio:4/5}}
@media (min-width:700px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}.steps li:nth-child(even){transform:translateY(18px)}}

/* CHAPTER 07 gallery */
.gallery{padding-block:clamp(70px,10vw,140px)}
.vault{columns:2;column-gap:12px}
.tile{break-inside:avoid;margin:0 0 12px;background:#000;border:2px solid var(--line)}
.tile-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden}
.tile-open img{width:100%;height:auto;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s}
.tile-open:hover img{transform:scale(1.04);filter:brightness(1.1)}
.tile figcaption{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem .6rem;font:400 .8rem/1.2 var(--f-type);color:var(--muted)}
.save{flex:none;font:400 .95rem/1 var(--f-display);letter-spacing:.06em;text-decoration:none;color:var(--lime-ink);background:var(--lime);padding:.35em .6em;border:2px solid #000}
@media (min-width:700px){.vault{columns:3;column-gap:16px}.tile{margin-bottom:16px}}
@media (min-width:1100px){.vault{columns:4}}

/* lightbox */
.lightbox{padding:0;border:0;background:transparent;max-width:min(96vw,1100px);max-height:94svh;color:var(--ink)}
.lightbox::backdrop{background:rgba(2,3,2,.9);backdrop-filter:blur(6px)}
.lb-inner{display:flex;flex-direction:column;background:#000;border:3px solid var(--ink)}
.lightbox img{width:auto;height:auto;max-width:100%;max-height:calc(94svh - 120px);object-fit:contain;margin:auto}
.lb-bar{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;align-items:center;padding:.7rem;border-top:3px solid var(--ink)}
.lb-bar p{font:400 1.4rem var(--f-display);letter-spacing:.05em}
.lb-actions{display:flex;gap:.5rem;flex-wrap:wrap}

/* CHAPTER 08 community */
.community{padding-block:clamp(40px,6vw,90px) clamp(70px,9vw,130px);background:radial-gradient(80% 60% at 50% 100%,rgba(198,255,58,.1),transparent 70%)}
.banner{border:3px solid var(--ink);box-shadow:8px 8px 0 #000;overflow:hidden;aspect-ratio:3/1;margin-bottom:clamp(30px,4vw,56px)}
.banner img{width:100%;height:100%;object-fit:cover}
.comm-row{display:grid;gap:2rem;align-items:end}
.socials{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:.5em 1em;border:2px solid var(--ink);border-radius:999px;font:400 1.1rem/1 var(--f-display);letter-spacing:.06em;text-decoration:none;background:var(--night-2)}
a.chip[href]:hover{background:var(--lime);color:var(--lime-ink)}
.chip.is-soon,.chip.ca-chip{opacity:.55;border-style:dashed;cursor:not-allowed;pointer-events:none}
.signal-count{width:100%;font:400 .82rem var(--f-type);color:var(--muted);min-height:1.2em}
@media (min-width:860px){.comm-row{grid-template-columns:1fr auto}.socials{justify-content:flex-end;max-width:440px}}

/* footer */
.footer{padding-block:48px 64px;border-top:1px solid var(--line);display:grid;gap:1rem}
.foot-mark{font:400 clamp(3rem,10vw,7rem)/.9 var(--f-display);color:var(--ink)}
.foot-mark span{color:var(--lime);font-size:.4em;vertical-align:middle;margin-left:.3em}
.disclaimer{max-width:80ch;color:var(--muted);font-size:.9rem}
.foot-small{font:400 .8rem var(--f-type);color:var(--muted)}

/* signal flash toy */
.flash{position:fixed;inset:0;z-index:60;pointer-events:none;display:grid;place-items:center;opacity:0;background:radial-gradient(circle at 50% 45%,rgba(198,255,58,.55),rgba(198,255,58,.12) 35%,rgba(5,7,5,.0) 70%)}
.flash svg{width:min(48vw,340px);height:auto;color:#000;background:var(--lime);border-radius:50%;box-shadow:0 0 120px 30px rgba(198,255,58,.6)}
.flash.go{animation:flash 1.3s ease-out}
@keyframes flash{0%{opacity:0}12%{opacity:1}30%{opacity:.6}42%{opacity:1}100%{opacity:0}}

/* reveal */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.js [data-reveal].in{opacity:1;transform:none}
.js .p-sq[data-reveal].in{transform:rotate(-.8deg)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
  .scene{height:auto!important}
  .scene>.stage{position:relative!important}
  .hero-img{--lit:1;--sat:1;--zoom:1}
  .beam{opacity:.25}
  #weather{display:none}
}