/* SOLFALL — the site's whole surface.
   Type, palette and panel language are the game's own (holo.ts), so the site
   and the thing it sells look like one world. Three destinations, three
   grounds: the void you fall through, the deck you shop on, the hall a hull
   stands in. */

@font-face{font-family:'VT323';src:url(../assets/fonts/vt323.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Silkscreen';src:url(../assets/fonts/silkscreen.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Silkscreen';src:url(../assets/fonts/silkscreen-bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'PressStart';src:url(../assets/fonts/press-start.woff2) format('woff2');font-display:swap}

:root{
  --void:#01030a; --ink:#dff2fb; --dim:#6d90a3; --cyan:#53f2ff;
  --hum:#ffb27f; --dwarf:#ffce6b; --elf:#7fffd4; --orc:#ff5a3a; --swarm:#8fe36a;
  --deck:#0a1219; --deck2:#0e1a23; --steel:#1d2f3b; --steel2:#2b4553;
  --f-d:'PressStart',monospace; --f-l:'Silkscreen',monospace; --f-b:'VT323',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;height:100%}
body{background:var(--void);color:var(--ink);font-family:var(--f-b);font-size:21px;line-height:1.5;
  -webkit-font-smoothing:none;overflow-x:hidden}
body.deckmode{background:var(--deck)}
body.hallmode{background:#050a10}
[hidden]{display:none!important}

/* ---------------- the void ---------------- */
#void{position:fixed;inset:0;z-index:0;display:block}
/* the wreck plays ABOVE the void but under the words it belongs to */
#wreck{position:fixed;inset:0;z-index:3;display:none;pointer-events:none}
@media(prefers-reduced-motion:reduce){#wreck{display:none!important}}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(1,3,10,.85) 100%)}
.scanlines{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,8,14,.22) 3px 4px)}
body.deckmode .vignette,body.hallmode .vignette{display:none}
body.deckmode .scanlines,body.hallmode .scanlines{opacity:.2}

/* ---------------- chrome ---------------- */
.brand{position:fixed;z-index:11;top:22px;left:30px;height:44px;display:flex;align-items:center;line-height:0}
.brand img{width:224px;height:auto;image-rendering:pixelated;
  filter:drop-shadow(0 0 20px rgba(83,242,255,.4));transition:filter .2s}
.brand:hover img,.brand:focus-visible img{filter:drop-shadow(0 0 34px rgba(83,242,255,.8))}
@media(max-width:1100px){.brand img{width:170px}}
@media(max-width:760px){.brand{top:14px;left:16px;height:40px}.brand img{width:130px}}
.depth{position:fixed;z-index:9;top:26px;right:30px;text-align:right;font-family:var(--f-l);font-size:10px;
  letter-spacing:.2em;color:var(--dim);line-height:1.9}
.depth i{font-style:normal;display:block;font-family:var(--f-b);font-size:19px;letter-spacing:0;color:var(--cyan)}
body.deckmode .depth,body.hallmode .depth{display:none}
/* THE BAR: a hard 3px pixel frame, level with the logo, and a highlight that
   STEPS between tabs — a smooth slide would read as web, not as pixel art. */
.switch{position:fixed;z-index:10;top:22px;left:50%;transform:translateX(-50%);display:flex;height:44px;
  align-items:stretch;background:rgba(2,7,13,.92);backdrop-filter:blur(4px);--pxc:rgba(83,242,255,.55);
  box-shadow:0 -3px 0 0 var(--pxc),0 3px 0 0 var(--pxc),-3px 0 0 0 var(--pxc),3px 0 0 0 var(--pxc)}
.switch .glide{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--cyan);z-index:0;
  transition:transform .34s steps(9,end),width .34s steps(9,end);pointer-events:none;
  box-shadow:0 0 22px rgba(83,242,255,.55)}
.switch a,.switch .soon{position:relative;z-index:1;font-family:var(--f-l);font-size:10px;letter-spacing:.18em;
  text-decoration:none;padding:0 20px;display:flex;align-items:center;transition:color .18s steps(3)}
.switch a{color:var(--dim)}
.switch a:hover,.switch a:focus-visible{color:var(--ink);outline:none}
.switch a.on{color:#02121a}
.switch a.on:hover{color:#02121a}
.switch .soon{color:#3b566380;cursor:not-allowed;display:flex;gap:7px;align-items:center;user-select:none}
.switch .soon i{font-style:normal;font-size:7px;letter-spacing:.14em;color:#02121a;background:#3b5663;padding:2px 5px}
@media(max-width:760px){
  .switch{height:40px}
  .switch a,.switch .soon{padding:0 11px;font-size:8px}
  .switch .soon i{display:none} .depth{display:none}
}

/* ---------------- the dive ---------------- */
main{position:relative;z-index:5;padding:0 40px 130px}
.hold{min-height:100vh;display:flex;flex-direction:column;justify-content:center;max-width:1180px;margin:0 auto;
  padding-top:96px}
.eyebrow{font-family:var(--f-l);font-size:10px;letter-spacing:.3em;color:var(--cyan);margin:0 0 22px}
h1{font-family:var(--f-d);font-size:clamp(22px,3.4vw,40px);line-height:1.45;margin:0;color:#fff;
  text-shadow:0 0 30px rgba(83,242,255,.45);text-wrap:balance}
h1 em{font-style:normal;color:var(--cyan)}
.lede{font-size:22px;color:var(--dim);max-width:52ch;margin:24px 0 0;line-height:1.55}
/* the cue is a PIXEL CHEVRON that falls in steps, then blinks back — a
   gradient hairline was the one piece of the hero speaking CSS, not sprite. */
.scrollcue{margin-top:46px;font-family:var(--f-l);font-size:9px;letter-spacing:.26em;color:var(--dim);
  display:flex;align-items:center;gap:14px}
.scrollcue .chev{color:var(--cyan);image-rendering:pixelated;
  animation:chevfall 1.9s steps(4,end) infinite;filter:drop-shadow(0 0 8px rgba(83,242,255,.6))}
@keyframes chevfall{
  0%{transform:translateY(-6px);opacity:.25}
  40%{opacity:1}
  70%{transform:translateY(6px);opacity:1}
  100%{transform:translateY(6px);opacity:0}
}
.scrollcue .cuetext{animation:cueblink 1.9s steps(2,end) infinite}
@keyframes cueblink{0%,60%{opacity:.55}61%,100%{opacity:1}}
.beat{min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;padding-top:96px}
.beat p{font-family:var(--f-d);font-size:clamp(15px,1.9vw,23px);line-height:1.75;max-width:24ch;margin:0;color:#fff;
  text-shadow:0 0 24px rgba(83,242,255,.32)}
.beat p em{font-style:normal;color:var(--cyan)}
.beat.wide p{max-width:27ch}
/* A PITCH BLOCK: a short headline that earns its size, and the substance
   beside it. One giant sentence alone on a screen was four rows of shouting. */
.pitch{max-width:1180px;margin:0 auto;min-height:96vh;padding:110px 0 0;display:grid;
  grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);gap:60px;align-items:center}
.pitch.solo{grid-template-columns:minmax(0,1fr);min-height:56vh;text-align:center;justify-items:center;gap:20px}
.pitch.solo .say p{margin:0;max-width:46ch;text-align:center}
@media(max-width:940px){.pitch{grid-template-columns:1fr;gap:26px}}
.pitch .tag{font-family:var(--f-l);font-size:10px;letter-spacing:.28em;color:var(--cyan);display:block;margin-bottom:20px}
.pitch h2{font-family:var(--f-d);font-size:clamp(19px,2.5vw,32px);line-height:1.5;margin:0;color:#fff;
  text-shadow:0 0 30px rgba(83,242,255,.34);text-wrap:balance}
.pitch h2 em{font-style:normal;color:var(--cyan)}
.pitch .say p{margin:0 0 28px;font-size:21px;color:var(--dim);max-width:56ch;line-height:1.62}
/* THE CHIPS ARE THE TABS, and they POWER ON like the game's holo panels:
   a CRT snap open in steps, a scanline that sweeps once, corner ticks that
   land after it, and a label that decodes out of block noise. Nothing here
   eases — every stage is stepped, because that is the dialect. */
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:760px){.facts{grid-template-columns:1fr}}
.facts li{position:relative;background:rgba(2,7,13,.9);padding:16px 16px 17px;display:flex;
  flex-direction:column;gap:9px;--pxc:rgba(83,242,255,.4);
  box-shadow:0 -3px 0 0 var(--pxc),0 3px 0 0 var(--pxc),-3px 0 0 0 var(--pxc),3px 0 0 0 var(--pxc);
  opacity:0;transform:scaleY(.04);transform-origin:50% 50%;transition:box-shadow .2s}
.rise.seen .facts li{animation:chipOn .42s steps(7,end) both}
.rise.seen .facts li:nth-child(1){animation-delay:.10s}
.rise.seen .facts li:nth-child(2){animation-delay:.30s}
.rise.seen .facts li:nth-child(3){animation-delay:.50s}
@keyframes chipOn{
  0%{opacity:0;transform:scaleY(.04) scaleX(.86);filter:brightness(5)}
  40%{opacity:1;transform:scaleY(.16) scaleX(1);filter:brightness(3)}
  70%{opacity:1;transform:scaleY(1.06);filter:brightness(1.5)}
  100%{opacity:1;transform:none;filter:none}
}
/* the sweep: one pass of light down the chip as it comes up */
.facts li::before{content:'';position:absolute;left:0;right:0;height:38%;pointer-events:none;opacity:0;
  background:linear-gradient(rgba(83,242,255,.22),rgba(83,242,255,0))}
.rise.seen .facts li::before{animation:chipSweep .8s steps(9,end) both}
.rise.seen .facts li:nth-child(1)::before{animation-delay:.34s}
.rise.seen .facts li:nth-child(2)::before{animation-delay:.54s}
.rise.seen .facts li:nth-child(3)::before{animation-delay:.74s}
@keyframes chipSweep{0%{top:0;opacity:.9}80%{opacity:.5}100%{top:100%;opacity:0}}
/* corner ticks, snapped on after the panel settles */
.facts li::after{content:'';position:absolute;inset:-3px;pointer-events:none;opacity:0;
  background:
    linear-gradient(var(--cyan),var(--cyan)) 0 0/9px 3px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0 0/3px 9px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 0/9px 3px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 0/3px 9px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0 100%/9px 3px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0 100%/3px 9px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 100%/9px 3px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 100%/3px 9px no-repeat}
.rise.seen .facts li::after{animation:tickOn .2s steps(2,end) both}
.rise.seen .facts li:nth-child(1)::after{animation-delay:.44s}
.rise.seen .facts li:nth-child(2)::after{animation-delay:.64s}
.rise.seen .facts li:nth-child(3)::after{animation-delay:.84s}
@keyframes tickOn{0%{opacity:0}100%{opacity:.85}}
.facts li:hover{--pxc:var(--cyan)}
.facts li:hover::after{opacity:1}
.facts b{font-family:var(--f-l);font-weight:700;font-size:10px;letter-spacing:.16em;color:var(--cyan);
  min-height:1em}
.facts span{font-size:18px;color:var(--dim);line-height:1.5}

/* the head column gets a closing whisper, quieter than the headline */
.pitch .whisper{margin:20px 0 0;font-family:var(--f-l);font-size:9px;letter-spacing:.18em;color:var(--dim);
  line-height:2;max-width:34ch}
.pitch .say p em{font-style:normal;color:var(--ink);text-shadow:0 0 20px rgba(83,242,255,.3)}


.power{min-height:92vh;display:grid;grid-template-columns:1fr minmax(280px,440px);gap:56px;
  align-items:center;max-width:1180px;margin:0 auto;padding:96px 0 0;position:relative}
@media(max-width:900px){.power{grid-template-columns:1fr;gap:20px}}
.power .halo{position:absolute;right:6%;top:50%;translate:20% -50%;width:min(560px,62vw);aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--fc) 26%,transparent),transparent 62%);
  filter:blur(26px);opacity:.85}
.power .words{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;
  border-left:2px solid var(--fc);padding-left:34px}
.power .portrait{position:relative;z-index:1;justify-self:center;width:min(360px,60vw);image-rendering:pixelated;
  filter:drop-shadow(0 20px 46px rgba(0,0,0,.72)) drop-shadow(0 0 44px color-mix(in srgb,var(--fc) 52%,transparent));
  animation:float 8s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(-5px)}50%{transform:translateY(-22px)}}
.power .banner{font-family:var(--f-l);font-size:10px;letter-spacing:.26em;color:var(--dim)}

/* THE SWARM is not a people and does not get the people layout: no portrait,
   no rail, centred — and the section is what arrives, not what is shown. */
.power.swarm{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;min-height:112vh}
.power.swarm .words{border-left:0;padding-left:0;align-items:center;gap:22px}
.power.swarm .line{max-width:34ch}
.power.swarm .halo{right:auto;left:50%;translate:-50% -50%;width:min(760px,92vw);opacity:.55}
.power.swarm .name{font-size:clamp(28px,5.6vw,62px)}

#swarmLayer{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity 1.2s ease}
#swarmLayer.on{opacity:1}
#swarmLayer .bug{position:absolute;left:-10vw;image-rendering:pixelated;
  filter:drop-shadow(0 0 7px rgba(143,227,106,.5));
  animation-name:migrate;animation-timing-function:linear;animation-iteration-count:infinite}
/* THE ART POINTS UP — it is a top-down game. Facing travel means +90deg,
   and the sway tilts around that, never away from it. */
@keyframes migrate{
  0%{transform:translate(0,0) rotate(calc(90deg + var(--tilt)))}
  25%{transform:translate(30vw,calc(var(--sway) * -1)) rotate(calc(90deg - var(--tilt)))}
  50%{transform:translate(60vw,var(--sway)) rotate(calc(90deg + var(--tilt)))}
  75%{transform:translate(90vw,calc(var(--sway) * -1)) rotate(calc(90deg - var(--tilt)))}
  100%{transform:translate(124vw,0) rotate(calc(90deg + var(--tilt)))}
}
@media(prefers-reduced-motion:reduce){#swarmLayer{display:none}}
.power .name{font-family:var(--f-d);font-size:clamp(24px,4.6vw,50px);color:var(--fc);margin:0;
  text-shadow:0 0 46px color-mix(in srgb,var(--fc) 55%,transparent)}
.power .line{font-size:24px;color:var(--ink);max-width:32ch;margin:0}

/* ---- hero: the game's own mark, and a door out of the dive ---- */
.hero{align-items:flex-start}
.logo{width:min(430px,64vw);height:auto;image-rendering:pixelated;margin:0 0 30px;
  filter:drop-shadow(0 0 40px rgba(83,242,255,.4))}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}
/* SAME DIALECT AS THE TABS: Silkscreen at 10px, the identical 3px pixel
   frame, the same 44px height — the header and the hero are one system. */
.cta .primary,.cta .ghost{font-family:var(--f-l);font-weight:700;font-size:10px;letter-spacing:.18em;
  height:44px;padding:0 26px;display:inline-flex;align-items:center;cursor:pointer;text-decoration:none;
  border:0;--pxc:var(--cyan);transition:background .18s steps(3),color .18s steps(3),box-shadow .2s;
  box-shadow:0 -3px 0 0 var(--pxc),0 3px 0 0 var(--pxc),-3px 0 0 0 var(--pxc),3px 0 0 0 var(--pxc)}
.cta .primary{background:var(--cyan);color:#02121a}
.cta .primary:hover,.cta .primary:focus-visible{outline:none;
  box-shadow:0 -3px 0 0 var(--pxc),0 3px 0 0 var(--pxc),-3px 0 0 0 var(--pxc),3px 0 0 0 var(--pxc),0 0 28px rgba(83,242,255,.6)}
.cta .ghost{color:var(--cyan);background:rgba(2,7,13,.72);--pxc:rgba(83,242,255,.55)}
.cta .ghost:hover,.cta .ghost:focus-visible{background:rgba(83,242,255,.14);color:#fff;outline:none;--pxc:var(--cyan)}

/* ---- showcase: a room, shown ---- */
.showcase{max-width:1180px;margin:0 auto;padding:64px 0;display:grid;grid-template-columns:1.25fr .95fr;
  gap:46px;align-items:center;min-height:80vh}
.showcase.flip figure{order:2}
@media(max-width:940px){.showcase,.showcase.flip{grid-template-columns:1fr;gap:24px}
  .showcase.flip figure{order:0}}
.showcase figure{margin:0;position:relative;border:1px solid rgba(83,242,255,.22);overflow:hidden;
  background:#040a10;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.showcase figure::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(83,242,255,.09) 50%,transparent 60%)}
.showcase img{display:block;width:100%;height:auto;image-rendering:pixelated}
.caption .tagline{font-family:var(--f-l);font-size:10px;letter-spacing:.26em;color:var(--cyan);display:block;margin-bottom:14px}
.caption h2{font-family:var(--f-d);font-size:clamp(16px,2.1vw,25px);line-height:1.55;margin:0 0 16px;color:#fff;
  text-wrap:balance}
.caption p{margin:0;color:var(--dim);font-size:21px;max-width:46ch}

/* reveal — staggered, so a block assembles rather than appears */
.rise{opacity:0;transform:translateY(30px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.3,1)}
.rise.seen{opacity:1;transform:none}
.rise.d1{transition-delay:.1s}.rise.d2{transition-delay:.22s}.rise.d3{transition-delay:.34s}

/* signup */
.signal{max-width:720px;margin:0 auto;text-align:center}
.signal h1{font-size:clamp(19px,2.6vw,31px);line-height:1.5}
.signal .lede{font-size:21px;max-width:48ch}
.signal .lede{margin-left:auto;margin-right:auto}
form{display:flex;gap:10px;margin-top:34px}
@media(max-width:620px){form{flex-direction:column}}
input[type=email]{flex:1;background:rgba(2,10,16,.85);border:2px solid rgba(83,242,255,.35);color:#fff;
  padding:17px 16px;font-family:var(--f-b);font-size:21px}
input[type=email]:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 26px rgba(83,242,255,.3)}
button{font-family:var(--f-l);font-weight:700;font-size:11px;letter-spacing:.16em;background:var(--cyan);
  color:#02121a;border:0;padding:17px 30px;cursor:pointer;transition:box-shadow .2s,transform .2s}
button:hover,button:focus-visible{box-shadow:0 0 34px rgba(83,242,255,.6);transform:translateY(-2px);outline:none}
.formnote{margin-top:18px;font-family:var(--f-l);font-size:11px;letter-spacing:.14em;min-height:1.2em}
.formnote.ok{color:var(--elf)} .formnote.bad{color:#ff8a7a}

/* ---------------- the deck (showroom) ---------------- */
#hulls{position:relative;z-index:5;min-height:100vh;padding:96px 0 110px;
  background:
    linear-gradient(rgba(10,18,25,.95),rgba(10,18,25,.95)),
    repeating-linear-gradient(90deg,rgba(83,242,255,.055) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(rgba(83,242,255,.055) 0 1px,transparent 1px 64px)}
.shop{max-width:1280px;margin:0 auto;padding:0 34px}
.shophead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--steel)}
.shophead h2{font-family:var(--f-d);font-size:clamp(20px,3vw,34px);margin:0;color:#fff}
.shophead p{margin:9px 0 0;color:var(--dim);max-width:46ch}
.tally{font-family:var(--f-l);font-size:10px;letter-spacing:.18em;color:var(--dim);white-space:nowrap}
.tally b{display:block;font-family:var(--f-b);font-size:26px;letter-spacing:0;color:var(--cyan);font-weight:400}
.filters{position:sticky;top:0;z-index:6;display:flex;gap:22px;flex-wrap:wrap;align-items:center;padding:16px 0;
  background:linear-gradient(rgba(10,18,25,.98),rgba(10,18,25,.92));border-bottom:1px solid var(--steel)}
.fgroup{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.flabel{font-family:var(--f-l);font-size:9px;letter-spacing:.16em;color:#4d6f80;margin-right:3px}
.chip{font-family:var(--f-l);font-size:9px;letter-spacing:.1em;color:var(--dim);background:var(--deck2);
  border:1px solid var(--steel);padding:8px 12px;cursor:pointer;transition:.16s}
.chip:hover{border-color:var(--steel2);color:var(--ink)}
.chip.on{color:#02121a;background:var(--cc,var(--cyan));border-color:var(--cc,var(--cyan))}
select{font-family:var(--f-l);font-size:9px;letter-spacing:.1em;color:var(--ink);background:var(--deck2);
  border:1px solid var(--steel);padding:8px 10px;cursor:pointer}
.stand{margin-top:52px}
.standhead{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;padding-bottom:12px}
.standhead .wordmark{font-family:var(--f-d);font-size:clamp(17px,2.5vw,27px);color:var(--bc);margin:0;
  text-shadow:0 0 26px color-mix(in srgb,var(--bc) 42%,transparent)}
.standhead .org{font-family:var(--f-l);font-size:9px;letter-spacing:.2em;color:var(--dim)}
.standrule{height:3px;background:linear-gradient(90deg,var(--bc),transparent);margin-bottom:22px}
.yardpitch{font-size:21px;color:var(--ink);opacity:.86;margin:0 0 20px;max-width:60ch;font-style:italic}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:16px}
.card{background:linear-gradient(var(--deck2),#0a141b);border:1px solid var(--steel);padding:0;cursor:pointer;
  text-align:left;font:inherit;color:inherit;display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.card:hover,.card:focus-visible{border-color:var(--bc);transform:translateY(-5px);outline:none;
  box-shadow:0 16px 44px rgba(0,0,0,.55)}
.card .shot{height:170px;display:grid;place-items:center;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--bc) 17%,transparent),transparent 68%)}
.card .shot::after{content:'';position:absolute;inset:auto 0 0;height:1px;background:var(--steel)}
.card .shot img{image-rendering:pixelated;max-height:142px;max-width:78%;
  transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.card:hover .shot img{transform:translateY(-7px) scale(1.07)}
.card .body{padding:15px 17px 17px;display:flex;flex-direction:column;gap:9px}
.card .name{font-family:var(--f-l);font-weight:700;font-size:12px;letter-spacing:.1em;color:#fff}
.card .role{font-family:var(--f-l);font-size:9px;letter-spacing:.14em;color:var(--bc)}
.mini{display:flex;gap:16px;border-top:1px solid var(--steel);padding-top:10px}
.mini div{font-family:var(--f-l);font-size:8px;letter-spacing:.1em;color:#4d6f80}
.mini b{display:block;font-family:var(--f-b);font-size:19px;letter-spacing:0;color:var(--ink);font-weight:400;
  font-variant-numeric:tabular-nums}
.provisional{margin-top:60px;border-left:2px solid var(--dwarf);padding:14px 18px;
  background:rgba(255,206,107,.06);font-size:19px;max-width:78ch}
.provisional b{color:var(--dwarf);font-family:var(--f-l);font-size:10px;letter-spacing:.14em;display:block;margin-bottom:6px}
.empty{color:var(--dim);padding:22px 0}

/* ---------------- the hall (one hull) ---------------- */
#hull{position:relative;z-index:5;min-height:100vh;padding:96px 0 90px;pointer-events:none;
  background:radial-gradient(ellipse at 68% 50%,#12222e 0%,#080f16 46%,#050a10 100%)}
.hullpage{position:relative;z-index:1;pointer-events:none;max-width:1280px;margin:0 auto;padding:0 34px;display:grid;
  grid-template-columns:minmax(300px,430px) 1fr;gap:56px;align-items:center;min-height:74vh}
@media(max-width:980px){.hullpage{grid-template-columns:1fr;gap:26px}}
.back{font-family:var(--f-l);font-size:9px;letter-spacing:.16em;color:var(--dim);text-decoration:none;
  display:inline-block;margin-bottom:22px}
.back:hover{color:var(--cyan)}
.hullinfo{position:relative;z-index:2;pointer-events:auto}
.stage{pointer-events:auto}
.hullinfo .yardline{font-family:var(--f-l);font-size:9px;letter-spacing:.2em;color:var(--bc);margin-bottom:10px}
.hullinfo h2{font-family:var(--f-d);font-size:clamp(22px,3.4vw,40px);margin:0 0 8px;color:#fff}
.hullinfo .role{font-family:var(--f-l);font-size:9px;letter-spacing:.16em;color:var(--dim);margin-bottom:18px}
.hullinfo .quote{font-size:20px;font-style:italic;color:var(--ink);opacity:.86;margin:0 0 24px;max-width:44ch}
.bars{display:flex;flex-direction:column;gap:11px;max-width:420px}
.bar{display:grid;grid-template-columns:92px 1fr 66px;align-items:center;gap:12px;
  font-family:var(--f-l);font-size:9px;letter-spacing:.12em;color:var(--dim)}
.bar b{font-family:var(--f-b);font-size:20px;letter-spacing:0;color:#fff;text-align:right;font-weight:400;
  font-variant-numeric:tabular-nums}
.bar .track{height:5px;background:rgba(83,242,255,.12)}
.bar .track i{display:block;height:100%;width:0;background:var(--bc);box-shadow:0 0 10px var(--bc);
  transition:width 1s cubic-bezier(.2,.8,.3,1)}
.sechead{font-family:var(--f-l);font-size:9px;letter-spacing:.2em;color:#4d6f80;margin:24px 0 10px;
  padding-bottom:6px;border-bottom:1px solid var(--steel);max-width:420px}
.raw{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;max-width:420px}
.raw div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--steel);padding-bottom:6px;
  font-family:var(--f-l);font-size:9px;letter-spacing:.1em;color:var(--dim)}
.raw b{font-family:var(--f-b);font-size:19px;letter-spacing:0;color:#fff;font-weight:400;font-variant-numeric:tabular-nums}

/* ============================================================
   HOUSE STYLES. A hull page is dressed by the yard that built it —
   ground, ink, frame and ornament all change, so opening an Antwood
   after a Waterworks feels like walking into a different showroom.
   ============================================================ */
#hull[data-brand]{transition:background .4s steps(6)}

/* ANTWOOD — military contractor. Gunmetal, blood red, stencils, hazard tape. */
#hull[data-brand="antwood"]{background:
  linear-gradient(rgba(9,10,12,.9),rgba(9,10,12,.9)),
  repeating-linear-gradient(45deg,#15171a 0 22px,#121417 22px 44px)}
[data-brand="antwood"] .hullinfo h2{color:#fff;text-shadow:0 0 26px rgba(255,68,56,.5)}
[data-brand="antwood"] .yardline{color:#ff4438}
[data-brand="antwood"] .hullinfo::before{content:'';display:block;height:9px;margin-bottom:20px;
  background:repeating-linear-gradient(45deg,#ff4438 0 12px,#141518 12px 24px)}
[data-brand="antwood"] .quote{font-style:normal;font-family:var(--f-l);font-size:11px;line-height:2.1;
  letter-spacing:.06em;color:#c9ced6}
[data-brand="antwood"] .sechead{color:#8c9299;border-color:#23262b}
[data-brand="antwood"] .raw div{border-color:#23262b}

/* WATERWORKS — general purpose. Beige plate, light blue, soft and legible. */
#hull[data-brand="waterworks"]{background:
  radial-gradient(ellipse at 66% 46%,#1d2733 0%,#121a22 52%,#0b1015 100%)}
[data-brand="waterworks"] .hullinfo h2{color:#f2ead8;text-shadow:0 0 26px rgba(127,211,255,.4)}
[data-brand="waterworks"] .yardline{color:#7fd3ff}
[data-brand="waterworks"] .hullinfo::before{content:'';display:block;height:4px;margin-bottom:20px;
  background:linear-gradient(90deg,#e8dcc0,#7fd3ff 60%,transparent)}
[data-brand="waterworks"] .quote{color:#e8dcc0}
[data-brand="waterworks"] .bar b,[data-brand="waterworks"] .raw b{color:#f2ead8}

/* VENTURA — heavy industrial. Caution yellow, chevrons, painted steel. */
#hull[data-brand="ventura"]{background:
  linear-gradient(rgba(14,13,10,.92),rgba(14,13,10,.92)),
  repeating-linear-gradient(90deg,#1a1811 0 3px,#141209 3px 90px)}
[data-brand="ventura"] .hullinfo h2{color:#fff;text-shadow:0 0 26px rgba(255,180,0,.45)}
[data-brand="ventura"] .yardline{color:#ffb400}
[data-brand="ventura"] .hullinfo::before{content:'';display:block;height:14px;margin-bottom:20px;
  background:repeating-linear-gradient(135deg,#ffb400 0 14px,#191712 14px 28px)}
[data-brand="ventura"] .quote{color:#d8cdb4}
[data-brand="ventura"] .sechead{color:#ffb400;border-color:#2b2618}
[data-brand="ventura"] .raw div{border-color:#2b2618}

/* SAMCO — dwarven luxury military. Near-black, crimson, thin brass rules. */
#hull[data-brand="samco"]{background:
  radial-gradient(ellipse at 68% 48%,#1a1113 0%,#100c0d 55%,#080607 100%)}
[data-brand="samco"] .hullinfo h2{color:#f6e7c8;text-shadow:0 0 30px rgba(224,59,59,.45)}
[data-brand="samco"] .yardline{color:#c9a24a;letter-spacing:.3em}
[data-brand="samco"] .hullinfo::before{content:'';display:block;height:1px;margin-bottom:8px;
  background:linear-gradient(90deg,#c9a24a,transparent)}
[data-brand="samco"] .hullinfo::after{content:'';display:block;height:1px;margin-top:22px;
  background:linear-gradient(90deg,#c9a24a,transparent);opacity:.5}
[data-brand="samco"] .quote{color:#d9c9a8;font-style:italic}
[data-brand="samco"] .bar .track{background:rgba(201,162,74,.14)}
[data-brand="samco"] .sechead{color:#c9a24a;border-color:#2a1e1c}
[data-brand="samco"] .raw div{border-color:#2a1e1c}
[data-brand="samco"] .raw b,[data-brand="samco"] .bar b{color:#f6e7c8}

/* HIROSHI — a small precision house. Paper white, lacquer red, one disc. */
#hull[data-brand="hiroshi"]{background:
  radial-gradient(ellipse at 50% 44%,#1c1a1c 0%,#111011 55%,#0a090a 100%)}
[data-brand="hiroshi"] .hall::before{content:'';position:absolute;left:50%;top:46%;translate:-50% -50%;
  width:min(430px,62vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  border:2px solid rgba(255,95,109,.5);
  box-shadow:0 0 60px rgba(255,95,109,.18),inset 0 0 70px rgba(255,95,109,.1)}
[data-brand="hiroshi"] .hullinfo h2{color:#f6f2ee;letter-spacing:.02em;text-shadow:0 0 26px rgba(255,95,109,.4)}
[data-brand="hiroshi"] .yardline{color:#ff5f6d;letter-spacing:.36em}
[data-brand="hiroshi"] .hullinfo::before{content:'';display:block;width:34px;height:34px;margin-bottom:18px;
  border-radius:50%;background:#ff5f6d;box-shadow:0 0 26px rgba(255,95,109,.55)}
[data-brand="hiroshi"] .quote{color:#ded7d0;font-style:normal;line-height:1.85}
[data-brand="hiroshi"] .sechead{color:#9a938c;border-color:#26232a}
[data-brand="hiroshi"] .raw div{border-color:#26232a}
[data-brand="hiroshi"] .bar .track{background:rgba(255,95,109,.14)}

/* the stands carry the same identity in the marketplace */
.stand[data-brand="antwood"] .standrule{background:repeating-linear-gradient(45deg,#ff4438 0 10px,transparent 10px 20px)}
.stand[data-brand="ventura"] .standrule{background:repeating-linear-gradient(135deg,#ffb400 0 12px,transparent 12px 24px)}
.stand[data-brand="samco"] .standrule{height:1px;background:linear-gradient(90deg,#c9a24a,transparent)}
.stand[data-brand="hiroshi"] .standrule{background:linear-gradient(90deg,#ff5f6d 0 46px,transparent 46px)}
.stand[data-brand="waterworks"] .standrule{background:linear-gradient(90deg,#e8dcc0,#7fd3ff 55%,transparent)}

/* THE STAGE — one canvas: plinth, hull, spin and zoom all drawn, so the
   turntable is pixels rather than CSS gradients and the art is not an <img>
   anyone can drag off the page. */
.hall{position:relative;display:grid;place-items:center;min-height:82vh;pointer-events:none}
/* THE STAGE IS THE WINDOW. A canvas can only draw inside its own bitmap, so a
   stage that lived in the right-hand column WAS the bounding box the hull got
   cut against. It is the whole viewport now: the hull can grow to fill the
   screen before it meets anything. */
.stage{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;
  cursor:grab;touch-action:pan-y}
.stage:active{cursor:grabbing}
.stagehint{position:fixed;bottom:18px;z-index:2;left:50%;transform:translateX(-50%);margin:0;
  font-family:var(--f-l);font-size:9px;letter-spacing:.2em;color:var(--dim);opacity:.75;pointer-events:none}
img,canvas{-webkit-user-drag:none;user-select:none}

@media(prefers-reduced-motion:reduce){#wreck{display:none!important}}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(1,3,10,.85) 100%)}
.scanlines{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,8,14,.22) 3px 4px)}
body.deckmode .vignette,body.hallmode .vignette{display:none}
body.deckmode .scanlines,body.hallmode .scanlines{opacity:.2}

/* ---------------- chrome ---------------- */
.brand{position:fixed;z-index:11;top:22px;left:30px;height:44px;display:flex;align-items:center;line-height:0}
.brand img{width:224px;height:auto;image-rendering:pixelated;
  filter:drop-shadow(0 0 20px rgba(83,242,255,.4));transition:filter .2s}
.brand:hover img,.brand:focus-visible img{filter:drop-shadow(0 0 34px rgba(83,242,255,.8))}
@media(max-width:1100px){.brand img{width:170px}}
@media(max-width:760px){.brand{top:14px;left:16px;height:40px}.brand img{width:130px}}
.depth{position:fixed;z-index:9;top:26px;right:30px;text-align:right;font-family:var(--f-l);font-size:10px;
  letter-spacing:.2em;color:var(--dim);line-height:1.9}
.depth i{font-style:normal;display:block;font-family:var(--f-b);font-size:19px;letter-spacing:0;color:var(--cyan)}
body.deckmode .depth,body.hallmode .depth{display:none}
/* THE BAR: a hard 3px pixel frame, level with the logo, and a highlight that
   STEPS between tabs — a smooth slide would read as web, not as pixel art. */
.switch{position:fixed;z-index:10;top:22px;left:50%;transform:translateX(-50%);display:flex;height:44px;
  align-items:stretch;background:rgba(2,7,13,.92);backdrop-filter:blur(4px);--pxc:rgba(83,242,255,.55);
  box-shadow:0 -3px 0 0 var(--pxc),0 3px 0 0 var(--pxc),-3px 0 0 0 var(--pxc),3px 0 0 0 var(--pxc)}
.switch .glide{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--cyan);z-index:0;
  transition:transform .34s steps(9,end),width .34s steps(9,end);pointer-events:none;
  box-shadow:0 0 22px rgba(83,242,255,.55)}
.switch a,.switch .soon{position:relative;z-index:1;font-family:var(--f-l);font-size:10px;letter-spacing:.18em;
  text-decoration:none;padding:0 20px;display:flex;align-items:center;transition:color .18s steps(3)}
.switch a{color:var(--dim)}
.switch a:hover,.switch a:focus-visible{color:var(--ink);outline:none}
.switch a.on{color:#02121a}
.switch a.on:hover{color:#02121a}
.switch .soon{color:#3b566380;cursor:not-allowed;display:flex;gap:7px;align-items:center;user-select:none}
.switch .soon i{font-style:normal;font-size:7px;letter-spacing:.14em;color:#02121a;background:#3b5663;padding:2px 5px}
@media(max-width:760px){
  .switch{height:40px}
  .switch a,.switch .soon{padding:0 11px;font-size:8px}
  .switch .soon i{display:none} .depth{display:none}
}

/* ---------------- the dive ---------------- */
main{position:relative;z-index:5;padding:0 40px 130px}
.hold{min-height:100vh;display:flex;flex-direction:column;justify-content:center;max-width:1180px;margin:0 auto;
  padding-top:96px}
.eyebrow{font-family:var(--f-l);font-size:10px;letter-spacing:.3em;color:var(--cyan);margin:0 0 22px}
h1{font-family:var(--f-d);font-size:clamp(22px,3.4vw,40px);line-height:1.45;margin:0;color:#fff;
  text-shadow:0 0 30px rgba(83,242,255,.45);text-wrap:balance}
h1 em{font-style:normal;color:var(--cyan)}
.lede{font-size:22px;color:var(--dim);max-width:52ch;margin:24px 0 0;line-height:1.55}
/* the cue is a PIXEL CHEVRON that falls in steps, then blinks back — a
   gradient hairline was the one piece of the hero speaking CSS, not sprite. */
.scrollcue{margin-top:46px;font-family:var(--f-l);font-size:9px;letter-spacing:.26em;color:var(--dim);
  display:flex;align-items:center;gap:14px}
.scrollcue .chev{color:var(--cyan);image-rendering:pixelated;
  animation:chevfall 1.9s steps(4,end) infinite;filter:drop-shadow(0 0 8px rgba(83,242,255,.6))}
@keyframes chevfall{
  0%{transform:translateY(-6px);opacity:.25}
  40%{opacity:1}
  70%{transform:translateY(6px);opacity:1}
  100%{transform:translateY(6px);opacity:0}
}
.scrollcue .cuetext{animation:cueblink 1.9s steps(2,end) infinite}
@keyframes cueblink{0%,60%{opacity:.55}61%,100%{opacity:1}}
.beat{min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;padding-top:96px}
.beat p{font-family:var(--f-d);font-size:clamp(15px,1.9vw,23px);line-height:1.75;max-width:24ch;margin:0;color:#fff;
  text-shadow:0 0 24px rgba(83,242,255,.32)}
.beat p em{font-style:normal;color:var(--cyan)}
.beat.wide p{max-width:27ch}
/* A PITCH BLOCK: a short headline that earns its size, and the substance
   beside it. One giant sentence alone on a screen was four rows of shouting. */
.pitch{max-width:1180px;margin:0 auto;min-height:96vh;padding:110px 0 0;display:grid;
  grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);gap:60px;align-items:center}
.pitch.solo{grid-template-columns:minmax(0,1fr);min-height:56vh;text-align:center;justify-items:center;gap:20px}
.pitch.solo .say p{margin:0;max-width:46ch;text-align:center}
@media(max-width:940px){.pitch{grid-template-columns:1fr;gap:26px}}
.pitch .tag{font-family:var(--f-l);font-size:10px;letter-spacing:.28em;color:var(--cyan);display:block;margin-bottom:20px}
.pitch h2{font-family:var(--f-d);font-size:clamp(19px,2.5vw,32px);line-height:1.5;margin:0;color:#fff;
  text-shadow:0 0 30px rgba(83,242,255,.34);text-wrap:balance}
.pitch h2 em{font-style:normal;color:var(--cyan)}
.pitch .say p{margin:0 0 28px;font-size:21px;color:var(--dim);max-width:56ch;line-height:1.62}
/* THE CHIPS ARE THE TABS, and they POWER ON like the game's holo panels:
   a CRT snap open in steps, a scanline that sweeps once, corner ticks that
   land after it, and a label that decodes out of block noise. Nothing here
   eases — every stage is stepped, because that is the dialect. */
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:760px){.facts{grid-template-columns:1fr}}
.facts li{position:relative;background:rgba(2,7,13,.9);padding:16px 16px 17px;display:flex;
  flex-direction:column;gap:9px;--pxc:rgba(83,242,255,.4);
  box-shadow:0 -3px 0 0 var(--pxc),0 3px 0 0 var(--pxc),-3px 0 0 0 var(--pxc),3px 0 0 0 var(--pxc);
  opacity:0;transform:scaleY(.04);transform-origin:50% 50%;transition:box-shadow .2s}
.rise.seen .facts li{animation:chipOn .42s steps(7,end) both}
.rise.seen .facts li:nth-child(1){animation-delay:.10s}
.rise.seen .facts li:nth-child(2){animation-delay:.30s}
.rise.seen .facts li:nth-child(3){animation-delay:.50s}
@keyframes chipOn{
  0%{opacity:0;transform:scaleY(.04) scaleX(.86);filter:brightness(5)}
  40%{opacity:1;transform:scaleY(.16) scaleX(1);filter:brightness(3)}
  70%{opacity:1;transform:scaleY(1.06);filter:brightness(1.5)}
  100%{opacity:1;transform:none;filter:none}
}
/* the sweep: one pass of light down the chip as it comes up */
.facts li::before{content:'';position:absolute;left:0;right:0;height:38%;pointer-events:none;opacity:0;
  background:linear-gradient(rgba(83,242,255,.22),rgba(83,242,255,0))}
.rise.seen .facts li::before{animation:chipSweep .8s steps(9,end) both}
.rise.seen .facts li:nth-child(1)::before{animation-delay:.34s}
.rise.seen .facts li:nth-child(2)::before{animation-delay:.54s}
.rise.seen .facts li:nth-child(3)::before{animation-delay:.74s}
@keyframes chipSweep{0%{top:0;opacity:.9}80%{opacity:.5}100%{top:100%;opacity:0}}
/* corner ticks, snapped on after the panel settles */
.facts li::after{content:'';position:absolute;inset:-3px;pointer-events:none;opacity:0;
  background:
    linear-gradient(var(--cyan),var(--cyan)) 0 0/9px 3px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0 0/3px 9px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 0/9px 3px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 0/3px 9px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0 100%/9px 3px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0 100%/3px 9px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 100%/9px 3px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 100%/3px 9px no-repeat}
.rise.seen .facts li::after{animation:tickOn .2s steps(2,end) both}
.rise.seen .facts li:nth-child(1)::after{animation-delay:.44s}
.rise.seen .facts li:nth-child(2)::after{animation-delay:.64s}
.rise.seen .facts li:nth-child(3)::after{animation-delay:.84s}
@keyframes tickOn{0%{opacity:0}100%{opacity:.85}}
.facts li:hover{--pxc:var(--cyan)}
.facts li:hover::after{opacity:1}
.facts b{font-family:var(--f-l);font-weight:700;font-size:10px;letter-spacing:.16em;color:var(--cyan);
  min-height:1em}
.facts span{font-size:18px;color:var(--dim);line-height:1.5}

/* the head column gets a closing whisper, quieter than the headline */
.pitch .whisper{margin:20px 0 0;font-family:var(--f-l);font-size:9px;letter-spacing:.18em;color:var(--dim);
  line-height:2;max-width:34ch}
.pitch .say p em{font-style:normal;color:var(--ink);text-shadow:0 0 20px rgba(83,242,255,.3)}


.power{min-height:92vh;display:grid;grid-template-columns:1fr minmax(280px,440px);gap:56px;
  align-items:center;max-width:1180px;margin:0 auto;padding:96px 0 0;position:relative}
@media(max-width:900px){.power{grid-template-columns:1fr;gap:20px}}
.power .halo{position:absolute;right:6%;top:50%;translate:20% -50%;width:min(560px,62vw);aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--fc) 26%,transparent),transparent 62%);
  filter:blur(26px);opacity:.85}
.power .words{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;
  border-left:2px solid var(--fc);padding-left:34px}
.power .portrait{position:relative;z-index:1;justify-self:center;width:min(360px,60vw);image-rendering:pixelated;
  filter:drop-shadow(0 20px 46px rgba(0,0,0,.72)) drop-shadow(0 0 44px color-mix(in srgb,var(--fc) 52%,transparent));
  animation:float 8s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(-5px)}50%{transform:translateY(-22px)}}
.power .banner{font-family:var(--f-l);font-size:10px;letter-spacing:.26em;color:var(--dim)}

/* THE SWARM is not a people and does not get the people layout: no portrait,
   no rail, centred — and the section is what arrives, not what is shown. */
.power.swarm{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;min-height:112vh}
.power.swarm .words{border-left:0;padding-left:0;align-items:center;gap:22px}
.power.swarm .line{max-width:34ch}
.power.swarm .halo{right:auto;left:50%;translate:-50% -50%;width:min(760px,92vw);opacity:.55}
.power.swarm .name{font-size:clamp(28px,5.6vw,62px)}

#swarmLayer{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity 1.2s ease}
#swarmLayer.on{opacity:1}
#swarmLayer .bug{position:absolute;left:-10vw;image-rendering:pixelated;
  filter:drop-shadow(0 0 7px rgba(143,227,106,.5));
  animation-name:migrate;animation-timing-function:linear;animation-iteration-count:infinite}
/* THE ART POINTS UP — it is a top-down game. Facing travel means +90deg,
   and the sway tilts around that, never away from it. */
@keyframes migrate{
  0%{transform:translate(0,0) rotate(calc(90deg + var(--tilt)))}
  25%{transform:translate(30vw,calc(var(--sway) * -1)) rotate(calc(90deg - var(--tilt)))}
  50%{transform:translate(60vw,var(--sway)) rotate(calc(90deg + var(--tilt)))}
  75%{transform:translate(90vw,calc(var(--sway) * -1)) rotate(calc(90deg - var(--tilt)))}
  100%{transform:translate(124vw,0) rotate(calc(90deg + var(--tilt)))}
}
@media(prefers-reduced-motion:reduce){#swarmLayer{display:none}}
.power .name{font-family:var(--f-d);font-size:clamp(24px,4.6vw,50px);color:var(--fc);margin:0;
  text-shadow:0 0 46px color-mix(in srgb,var(--fc) 55%,transparent)}
.power .line{font-size:24px;color:var(--ink);max-width:32ch;margin:0}

/* ---- hero: the game's own mark, and a door out of the dive ---- */
.hero{align-items:flex-start}
.logo{width:min(430px,64vw);height:auto;image-rendering:pixelated;margin:0 0 30px;
  filter:drop-shadow(0 0 40px rgba(83,242,255,.4))}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}
/* SAME DIALECT AS THE TABS: Silkscreen at 10px, the identical 3px pixel
   frame, the same 44px height — the header and the hero are one system. */
.cta .primary,.cta .ghost{font-family:var(--f-l);font-weight:700;font-size:10px;letter-spacing:.18em;
  height:44px;padding:0 26px;display:inline-flex;align-items:center;cursor:pointer;text-decoration:none;
  border:0;--pxc:var(--cyan);transition:background .18s steps(3),color .18s steps(3),box-shadow .2s;
  box-shadow:0 -3px 0 0 var(--pxc),0 3px 0 0 var(--pxc),-3px 0 0 0 var(--pxc),3px 0 0 0 var(--pxc)}
.cta .primary{background:var(--cyan);color:#02121a}
.cta .primary:hover,.cta .primary:focus-visible{outline:none;
  box-shadow:0 -3px 0 0 var(--pxc),0 3px 0 0 var(--pxc),-3px 0 0 0 var(--pxc),3px 0 0 0 var(--pxc),0 0 28px rgba(83,242,255,.6)}
.cta .ghost{color:var(--cyan);background:rgba(2,7,13,.72);--pxc:rgba(83,242,255,.55)}
.cta .ghost:hover,.cta .ghost:focus-visible{background:rgba(83,242,255,.14);color:#fff;outline:none;--pxc:var(--cyan)}

/* ---- showcase: a room, shown ---- */
.showcase{max-width:1180px;margin:0 auto;padding:64px 0;display:grid;grid-template-columns:1.25fr .95fr;
  gap:46px;align-items:center;min-height:80vh}
.showcase.flip figure{order:2}
@media(max-width:940px){.showcase,.showcase.flip{grid-template-columns:1fr;gap:24px}
  .showcase.flip figure{order:0}}
.showcase figure{margin:0;position:relative;border:1px solid rgba(83,242,255,.22);overflow:hidden;
  background:#040a10;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.showcase figure::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(83,242,255,.09) 50%,transparent 60%)}
.showcase img{display:block;width:100%;height:auto;image-rendering:pixelated}
.caption .tagline{font-family:var(--f-l);font-size:10px;letter-spacing:.26em;color:var(--cyan);display:block;margin-bottom:14px}
.caption h2{font-family:var(--f-d);font-size:clamp(16px,2.1vw,25px);line-height:1.55;margin:0 0 16px;color:#fff;
  text-wrap:balance}
.caption p{margin:0;color:var(--dim);font-size:21px;max-width:46ch}

/* reveal — staggered, so a block assembles rather than appears */
.rise{opacity:0;transform:translateY(30px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.3,1)}
.rise.seen{opacity:1;transform:none}
.rise.d1{transition-delay:.1s}.rise.d2{transition-delay:.22s}.rise.d3{transition-delay:.34s}

/* signup */
.signal{max-width:720px;margin:0 auto;text-align:center}
.signal h1{font-size:clamp(19px,2.6vw,31px);line-height:1.5}
.signal .lede{font-size:21px;max-width:48ch}
.signal .lede{margin-left:auto;margin-right:auto}
form{display:flex;gap:10px;margin-top:34px}
@media(max-width:620px){form{flex-direction:column}}
input[type=email]{flex:1;background:rgba(2,10,16,.85);border:2px solid rgba(83,242,255,.35);color:#fff;
  padding:17px 16px;font-family:var(--f-b);font-size:21px}
input[type=email]:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 26px rgba(83,242,255,.3)}
button{font-family:var(--f-l);font-weight:700;font-size:11px;letter-spacing:.16em;background:var(--cyan);
  color:#02121a;border:0;padding:17px 30px;cursor:pointer;transition:box-shadow .2s,transform .2s}
button:hover,button:focus-visible{box-shadow:0 0 34px rgba(83,242,255,.6);transform:translateY(-2px);outline:none}
.formnote{margin-top:18px;font-family:var(--f-l);font-size:11px;letter-spacing:.14em;min-height:1.2em}
.formnote.ok{color:var(--elf)} .formnote.bad{color:#ff8a7a}

/* ---------------- the deck (showroom) ---------------- */
#hulls{position:relative;z-index:5;min-height:100vh;padding:96px 0 110px;
  background:
    linear-gradient(rgba(10,18,25,.95),rgba(10,18,25,.95)),
    repeating-linear-gradient(90deg,rgba(83,242,255,.055) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(rgba(83,242,255,.055) 0 1px,transparent 1px 64px)}
.shop{max-width:1280px;margin:0 auto;padding:0 34px}
.shophead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--steel)}
.shophead h2{font-family:var(--f-d);font-size:clamp(20px,3vw,34px);margin:0;color:#fff}
.shophead p{margin:9px 0 0;color:var(--dim);max-width:46ch}
.tally{font-family:var(--f-l);font-size:10px;letter-spacing:.18em;color:var(--dim);white-space:nowrap}
.tally b{display:block;font-family:var(--f-b);font-size:26px;letter-spacing:0;color:var(--cyan);font-weight:400}
.filters{position:sticky;top:0;z-index:6;display:flex;gap:22px;flex-wrap:wrap;align-items:center;padding:16px 0;
  background:linear-gradient(rgba(10,18,25,.98),rgba(10,18,25,.92));border-bottom:1px solid var(--steel)}
.fgroup{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.flabel{font-family:var(--f-l);font-size:9px;letter-spacing:.16em;color:#4d6f80;margin-right:3px}
.chip{font-family:var(--f-l);font-size:9px;letter-spacing:.1em;color:var(--dim);background:var(--deck2);
  border:1px solid var(--steel);padding:8px 12px;cursor:pointer;transition:.16s}
.chip:hover{border-color:var(--steel2);color:var(--ink)}
.chip.on{color:#02121a;background:var(--cc,var(--cyan));border-color:var(--cc,var(--cyan))}
select{font-family:var(--f-l);font-size:9px;letter-spacing:.1em;color:var(--ink);background:var(--deck2);
  border:1px solid var(--steel);padding:8px 10px;cursor:pointer}
.stand{margin-top:52px}
.standhead{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;padding-bottom:12px}
.standhead .wordmark{font-family:var(--f-d);font-size:clamp(17px,2.5vw,27px);color:var(--bc);margin:0;
  text-shadow:0 0 26px color-mix(in srgb,var(--bc) 42%,transparent)}
.standhead .org{font-family:var(--f-l);font-size:9px;letter-spacing:.2em;color:var(--dim)}
.standrule{height:3px;background:linear-gradient(90deg,var(--bc),transparent);margin-bottom:22px}
.yardpitch{font-size:21px;color:var(--ink);opacity:.86;margin:0 0 20px;max-width:60ch;font-style:italic}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:16px}
.card{background:linear-gradient(var(--deck2),#0a141b);border:1px solid var(--steel);padding:0;cursor:pointer;
  text-align:left;font:inherit;color:inherit;display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.card:hover,.card:focus-visible{border-color:var(--bc);transform:translateY(-5px);outline:none;
  box-shadow:0 16px 44px rgba(0,0,0,.55)}
.card .shot{height:170px;display:grid;place-items:center;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--bc) 17%,transparent),transparent 68%)}
.card .shot::after{content:'';position:absolute;inset:auto 0 0;height:1px;background:var(--steel)}
.card .shot img{image-rendering:pixelated;max-height:142px;max-width:78%;
  transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.card:hover .shot img{transform:translateY(-7px) scale(1.07)}
.card .body{padding:15px 17px 17px;display:flex;flex-direction:column;gap:9px}
.card .name{font-family:var(--f-l);font-weight:700;font-size:12px;letter-spacing:.1em;color:#fff}
.card .role{font-family:var(--f-l);font-size:9px;letter-spacing:.14em;color:var(--bc)}
.mini{display:flex;gap:16px;border-top:1px solid var(--steel);padding-top:10px}
.mini div{font-family:var(--f-l);font-size:8px;letter-spacing:.1em;color:#4d6f80}
.mini b{display:block;font-family:var(--f-b);font-size:19px;letter-spacing:0;color:var(--ink);font-weight:400;
  font-variant-numeric:tabular-nums}
.provisional{margin-top:60px;border-left:2px solid var(--dwarf);padding:14px 18px;
  background:rgba(255,206,107,.06);font-size:19px;max-width:78ch}
.provisional b{color:var(--dwarf);font-family:var(--f-l);font-size:10px;letter-spacing:.14em;display:block;margin-bottom:6px}
.empty{color:var(--dim);padding:22px 0}

/* ---------------- the hall (one hull) ---------------- */
#hull{position:relative;z-index:5;min-height:100vh;padding:96px 0 90px;
  background:radial-gradient(ellipse at 68% 50%,#12222e 0%,#080f16 46%,#050a10 100%)}
.hullpage{max-width:1280px;margin:0 auto;padding:0 34px;display:grid;
  grid-template-columns:minmax(300px,430px) 1fr;gap:56px;align-items:center;min-height:74vh}
@media(max-width:980px){.hullpage{grid-template-columns:1fr;gap:26px}}
.back{font-family:var(--f-l);font-size:9px;letter-spacing:.16em;color:var(--dim);text-decoration:none;
  display:inline-block;margin-bottom:22px}
.back:hover{color:var(--cyan)}
.hullinfo .yardline{font-family:var(--f-l);font-size:9px;letter-spacing:.2em;color:var(--bc);margin-bottom:10px}
.hullinfo h2{font-family:var(--f-d);font-size:clamp(22px,3.4vw,40px);margin:0 0 8px;color:#fff}
.hullinfo .role{font-family:var(--f-l);font-size:9px;letter-spacing:.16em;color:var(--dim);margin-bottom:18px}
.hullinfo .quote{font-size:20px;font-style:italic;color:var(--ink);opacity:.86;margin:0 0 24px;max-width:44ch}
.bars{display:flex;flex-direction:column;gap:11px;max-width:420px}
.bar{display:grid;grid-template-columns:92px 1fr 66px;align-items:center;gap:12px;
  font-family:var(--f-l);font-size:9px;letter-spacing:.12em;color:var(--dim)}
.bar b{font-family:var(--f-b);font-size:20px;letter-spacing:0;color:#fff;text-align:right;font-weight:400;
  font-variant-numeric:tabular-nums}
.bar .track{height:5px;background:rgba(83,242,255,.12)}
.bar .track i{display:block;height:100%;width:0;background:var(--bc);box-shadow:0 0 10px var(--bc);
  transition:width 1s cubic-bezier(.2,.8,.3,1)}
.sechead{font-family:var(--f-l);font-size:9px;letter-spacing:.2em;color:#4d6f80;margin:24px 0 10px;
  padding-bottom:6px;border-bottom:1px solid var(--steel);max-width:420px}
.raw{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;max-width:420px}
.raw div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--steel);padding-bottom:6px;
  font-family:var(--f-l);font-size:9px;letter-spacing:.1em;color:var(--dim)}
.raw b{font-family:var(--f-b);font-size:19px;letter-spacing:0;color:#fff;font-weight:400;font-variant-numeric:tabular-nums}

/* ============================================================
   HOUSE STYLES. A hull page is dressed by the yard that built it —
   ground, ink, frame and ornament all change, so opening an Antwood
   after a Waterworks feels like walking into a different showroom.
   ============================================================ */
#hull[data-brand]{transition:background .4s steps(6)}

/* ANTWOOD — military contractor. Gunmetal, blood red, stencils, hazard tape. */
#hull[data-brand="antwood"]{background:
  linear-gradient(rgba(9,10,12,.9),rgba(9,10,12,.9)),
  repeating-linear-gradient(45deg,#15171a 0 22px,#121417 22px 44px)}
[data-brand="antwood"] .hullinfo h2{color:#fff;text-shadow:0 0 26px rgba(255,68,56,.5)}
[data-brand="antwood"] .yardline{color:#ff4438}
[data-brand="antwood"] .hullinfo::before{content:'';display:block;height:9px;margin-bottom:20px;
  background:repeating-linear-gradient(45deg,#ff4438 0 12px,#141518 12px 24px)}
[data-brand="antwood"] .quote{font-style:normal;font-family:var(--f-l);font-size:11px;line-height:2.1;
  letter-spacing:.06em;color:#c9ced6}
[data-brand="antwood"] .sechead{color:#8c9299;border-color:#23262b}
[data-brand="antwood"] .raw div{border-color:#23262b}

/* WATERWORKS — general purpose. Beige plate, light blue, soft and legible. */
#hull[data-brand="waterworks"]{background:
  radial-gradient(ellipse at 66% 46%,#1d2733 0%,#121a22 52%,#0b1015 100%)}
[data-brand="waterworks"] .hullinfo h2{color:#f2ead8;text-shadow:0 0 26px rgba(127,211,255,.4)}
[data-brand="waterworks"] .yardline{color:#7fd3ff}
[data-brand="waterworks"] .hullinfo::before{content:'';display:block;height:4px;margin-bottom:20px;
  background:linear-gradient(90deg,#e8dcc0,#7fd3ff 60%,transparent)}
[data-brand="waterworks"] .quote{color:#e8dcc0}
[data-brand="waterworks"] .bar b,[data-brand="waterworks"] .raw b{color:#f2ead8}

/* VENTURA — heavy industrial. Caution yellow, chevrons, painted steel. */
#hull[data-brand="ventura"]{background:
  linear-gradient(rgba(14,13,10,.92),rgba(14,13,10,.92)),
  repeating-linear-gradient(90deg,#1a1811 0 3px,#141209 3px 90px)}
[data-brand="ventura"] .hullinfo h2{color:#fff;text-shadow:0 0 26px rgba(255,180,0,.45)}
[data-brand="ventura"] .yardline{color:#ffb400}
[data-brand="ventura"] .hullinfo::before{content:'';display:block;height:14px;margin-bottom:20px;
  background:repeating-linear-gradient(135deg,#ffb400 0 14px,#191712 14px 28px)}
[data-brand="ventura"] .quote{color:#d8cdb4}
[data-brand="ventura"] .sechead{color:#ffb400;border-color:#2b2618}
[data-brand="ventura"] .raw div{border-color:#2b2618}

/* SAMCO — dwarven luxury military. Near-black, crimson, thin brass rules. */
#hull[data-brand="samco"]{background:
  radial-gradient(ellipse at 68% 48%,#1a1113 0%,#100c0d 55%,#080607 100%)}
[data-brand="samco"] .hullinfo h2{color:#f6e7c8;text-shadow:0 0 30px rgba(224,59,59,.45)}
[data-brand="samco"] .yardline{color:#c9a24a;letter-spacing:.3em}
[data-brand="samco"] .hullinfo::before{content:'';display:block;height:1px;margin-bottom:8px;
  background:linear-gradient(90deg,#c9a24a,transparent)}
[data-brand="samco"] .hullinfo::after{content:'';display:block;height:1px;margin-top:22px;
  background:linear-gradient(90deg,#c9a24a,transparent);opacity:.5}
[data-brand="samco"] .quote{color:#d9c9a8;font-style:italic}
[data-brand="samco"] .bar .track{background:rgba(201,162,74,.14)}
[data-brand="samco"] .sechead{color:#c9a24a;border-color:#2a1e1c}
[data-brand="samco"] .raw div{border-color:#2a1e1c}
[data-brand="samco"] .raw b,[data-brand="samco"] .bar b{color:#f6e7c8}

/* HIROSHI — a small precision house. Paper white, lacquer red, one disc. */
#hull[data-brand="hiroshi"]{background:
  radial-gradient(ellipse at 50% 44%,#1c1a1c 0%,#111011 55%,#0a090a 100%)}
[data-brand="hiroshi"] .hall::before{content:'';position:absolute;left:50%;top:46%;translate:-50% -50%;
  width:min(430px,62vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  border:2px solid rgba(255,95,109,.5);
  box-shadow:0 0 60px rgba(255,95,109,.18),inset 0 0 70px rgba(255,95,109,.1)}
[data-brand="hiroshi"] .hullinfo h2{color:#f6f2ee;letter-spacing:.02em;text-shadow:0 0 26px rgba(255,95,109,.4)}
[data-brand="hiroshi"] .yardline{color:#ff5f6d;letter-spacing:.36em}
[data-brand="hiroshi"] .hullinfo::before{content:'';display:block;width:34px;height:34px;margin-bottom:18px;
  border-radius:50%;background:#ff5f6d;box-shadow:0 0 26px rgba(255,95,109,.55)}
[data-brand="hiroshi"] .quote{color:#ded7d0;font-style:normal;line-height:1.85}
[data-brand="hiroshi"] .sechead{color:#9a938c;border-color:#26232a}
[data-brand="hiroshi"] .raw div{border-color:#26232a}
[data-brand="hiroshi"] .bar .track{background:rgba(255,95,109,.14)}

/* the stands carry the same identity in the marketplace */
.stand[data-brand="antwood"] .standrule{background:repeating-linear-gradient(45deg,#ff4438 0 10px,transparent 10px 20px)}
.stand[data-brand="ventura"] .standrule{background:repeating-linear-gradient(135deg,#ffb400 0 12px,transparent 12px 24px)}
.stand[data-brand="samco"] .standrule{height:1px;background:linear-gradient(90deg,#c9a24a,transparent)}
.stand[data-brand="hiroshi"] .standrule{background:linear-gradient(90deg,#ff5f6d 0 46px,transparent 46px)}
.stand[data-brand="waterworks"] .standrule{background:linear-gradient(90deg,#e8dcc0,#7fd3ff 55%,transparent)}

/* THE TURNTABLE — read from DIRECTLY ABOVE, because the hull art is
   top-down. An angled plinth under a top-down sprite is two cameras in one
   picture, which is what the director caught. Flat circle, no rotateX. */
.hall{position:relative;display:grid;place-items:center;min-height:62vh}
.turntable{position:relative;width:min(560px,94%);aspect-ratio:1;display:grid;place-items:center}
.plinth,.sweep,.rings{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%}
.plinth{width:82%;aspect-ratio:1;
  background:
    repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--bc) 55%,transparent) 0 .8deg,transparent .8deg 15deg),
    radial-gradient(circle,transparent 60%,color-mix(in srgb,var(--bc) 12%,transparent) 61% 100%);
  mask:radial-gradient(circle,transparent 44%,#000 46%,#000 99%,transparent 100%);
  animation:plate 26s linear infinite;opacity:.85}
@keyframes plate{to{rotate:360deg}}
.rings{width:82%;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--bc) 40%,transparent)}
.rings::before,.rings::after{content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--bc) 22%,transparent)}
.rings::before{width:66%;aspect-ratio:1}
.rings::after{width:46%;aspect-ratio:1}
.sweep{width:82%;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--bc) 60%,transparent);
  animation:sweep 3.8s ease-out infinite}
@keyframes sweep{0%{opacity:.7;scale:.5}75%{opacity:0;scale:1.02}100%{opacity:0;scale:1.02}}
.floorglow{position:absolute;left:50%;top:50%;translate:-50% -50%;width:62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--bc) 34%,transparent),transparent 68%);filter:blur(14px)}
.onstage{position:relative;z-index:2;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.onstage img{image-rendering:pixelated;max-height:40vh;max-width:100%;display:block;
  filter:drop-shadow(0 0 34px color-mix(in srgb,var(--bc) 45%,transparent));
  animation:turn 30s linear infinite}
@keyframes turn{to{rotate:360deg}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none}
}


/* ===========================================================================
   PHONES. Audited at 390x844: no horizontal overflow anywhere, but filter
   chips were 29px tall, the back link 14px, and the small-caps lines sat at
   9px — under a thumb and under the eye's floor respectively.
   =========================================================================== */
@media (max-width: 980px) {
  /* every control clears the 44px touch minimum */
  .chip{min-height:44px;display:inline-flex;align-items:center;padding:0 14px;font-size:10px}
  select{min-height:44px}
  .back{min-height:44px;display:inline-flex;align-items:center;padding:4px 2px;font-size:10px}
  .facts li{padding:18px 16px}
  .switch a,.switch .soon{min-height:44px}

  /* type comes up off the floor */
  .pitch .whisper{font-size:11px;line-height:1.9;max-width:100%}
  .eyebrow,.pitch .tag,.caption .tagline{font-size:11px;letter-spacing:.2em}
  .facts span{font-size:17px}
  .pitch .say p,.lede{font-size:19px}
  .power .line{font-size:20px}

  /* the dive gets its air back on a narrow column */
  main{padding:0 20px 90px}
  .hold,.beat{padding-top:104px}
  .pitch{padding-top:96px;min-height:auto;padding-bottom:40px}
  .beat{min-height:70vh}
  .power{min-height:auto;padding:80px 0 40px}
  .shop{padding:0 18px}
  .hullpage{padding:0 18px}
  .stagehint{font-size:8px;bottom:10px}
}
/* phones in landscape are short, not narrow: stop the hero eating the screen */
@media (max-height: 520px) {
  .hold{min-height:auto;padding-top:88px;padding-bottom:40px}
  .beat{min-height:auto;padding:88px 0 40px}
}


/* ---------------------------------------------------------------------------
   THE HULL PAGE ON A PHONE.
   Desktop puts the hull in a full-viewport stage and the specs in a column to
   its left. There is no left on a phone: the ship landed dead centre BEHIND
   the spec text and both became unreadable. So the stage becomes a band across
   the top with the specs scrolling beneath it on solid ground.
   --------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .stage{position:fixed;top:0;left:0;width:100vw;height:52vh;z-index:0;touch-action:none}
  .hullpage{padding-top:0}
  .hullinfo{
    margin-top:52vh;
    padding:22px 18px 60px;
    background:linear-gradient(180deg, rgba(3,5,12,0) 0, rgba(3,5,12,.94) 26px, var(--ground, #03050c) 70px);
    border-top:none;
  }
  .hullinfo .back{margin-bottom:10px}
  .hullinfo h2{font-size:40px;line-height:1}
  .stagehint{position:fixed;top:calc(52vh - 20px);bottom:auto;left:0;right:0;width:100%;
    transform:none;                      /* the desktop rule centres by translate; here it overhung the left edge */
    text-align:center;z-index:3;white-space:nowrap;font-size:8px;letter-spacing:.12em;padding:0}
  .hall{position:static}
}


/* ---------------------------------------------------------------------------
   REDUCED MOTION. The wreck and the swarm are already suppressed above. What
   remained were the reveal animations and the chip power-on, which fire on
   every section. The void itself is not hidden — it IS the page — but its
   idle drift is stopped in void.js, so it only moves when the reader scrolls.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rise, .rise.seen, .rise.seen .facts li, .scrollcue, .bug{
    animation:none!important;
    transition:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .track i{transition:none!important}
  .glide{transition:none!important}
}

/* ---------------------------------------------------------------------------
   KEEP THIS ONE — the first-visit card.
   Sits bottom-left so it never covers the scroll cue or the signup, and is
   built from the same pixel frame as everything else. No black ink anywhere.
   --------------------------------------------------------------------------- */
#keepit{
  /* bottom-RIGHT: on the left it sat straight over the hero's own call to
     action, which is the one thing on the page it must not bury */
  position:fixed; right:26px; bottom:26px; z-index:60; width:min(340px, calc(100vw - 40px));
  background:#070b16; color:var(--ink);
  padding:18px 18px 16px;
  box-shadow:0 0 0 3px #53f2ff, 0 0 34px rgba(83,242,255,.18);
  opacity:0; transform:translateY(14px);
  transition:opacity .34s steps(6,end), transform .34s steps(6,end);
}
#keepit.on{opacity:1; transform:translateY(0)}
#keepit .ttl{
  font-family:var(--f-d, monospace); font-size:19px; letter-spacing:.06em;
  color:#53f2ff; margin:0 0 8px; text-shadow:0 0 18px rgba(83,242,255,.5);
}
#keepit .say{font-size:14px; line-height:1.65; color:#cfe6f2; margin:0 0 14px; max-width:34ch}
#keepit .act{display:flex; gap:10px; flex-wrap:wrap}
#keepit button{
  font-family:var(--f-u, monospace); font-size:10px; letter-spacing:.16em;
  min-height:44px; padding:0 16px; cursor:pointer;
  background:transparent; color:#9fd8ea; border:0; box-shadow:0 0 0 2px #2b4a5c;
}
#keepit .yes{background:#53f2ff; color:#04202a; box-shadow:0 0 0 2px #53f2ff; font-weight:700}
#keepit .yes:hover{background:#8af6ff}
#keepit .no:hover{color:#dff4fb; box-shadow:0 0 0 2px #53f2ff}
#keepit .x{
  position:absolute; top:6px; right:6px; min-height:0; height:26px; padding:0 8px;
  font-size:8px; color:#6e93a4; box-shadow:none;
}
#keepit .x:hover{color:#53f2ff}
/* the keystroke only appears once we have admitted we cannot do it for them */
#keepit .fallback{display:none; margin-top:14px; padding-top:12px; border-top:1px solid #1b2d3a}
#keepit.revealed .fallback{display:block}
#keepit[data-mode="bookmark"].revealed .fallback{display:block}
#keepit .keys{display:inline-flex; align-items:center; gap:8px}
#keepit kbd{
  font-family:var(--f-u, monospace); font-size:12px; letter-spacing:.1em;
  color:#04202a; background:#9fd8ea; padding:8px 12px; box-shadow:0 3px 0 #4d7d91;
}
#keepit .keys i{font-style:normal; color:#6e93a4; font-size:13px}
#keepit .how{font-family:var(--f-u, monospace); font-size:10px; letter-spacing:.14em; color:#9fd8ea; line-height:1.9}
@media (max-width: 980px){
  #keepit{left:12px; right:12px; bottom:12px; width:auto; padding:16px 16px 14px}
  #keepit .say{max-width:none}
}
@media (prefers-reduced-motion: reduce){
  #keepit{transition:none}
}

/* ---------------------------------------------------------------------------
   YARDS WITH NOTHING ON THE MARKET.
   Solaris and Jamila Creations are canon makers that have not put a hull up
   yet. They keep their plate and state the fact rather than being hidden,
   because hiding them would misrepresent who builds ships out here.
   --------------------------------------------------------------------------- */
.stand.empty{opacity:.72}
.stand.empty .nostock{
  font-family:var(--f-u, monospace); font-size:10px; letter-spacing:.24em;
  color:var(--bc); opacity:.85; margin:18px 0 4px; padding:16px 0 0;
  border-top:1px dashed color-mix(in srgb, var(--bc) 45%, transparent);
}
/* SOLARIS — the Union's warm plate */
.stand[data-brand="solaris"] .wordmark{color:#ffb27f; text-shadow:0 0 26px rgba(255,178,127,.4)}
.stand[data-brand="solaris"] .standrule{
  background:repeating-linear-gradient(90deg,#ffb27f 0 26px,transparent 26px 40px); height:3px}
/* JAMILA CREATIONS — the Concord: one unbroken line, nothing serrated */
.stand[data-brand="jamila"] .wordmark{color:#7fffd4; text-shadow:0 0 30px rgba(127,255,212,.36)}
.stand[data-brand="jamila"] .standrule{
  background:linear-gradient(90deg,transparent,#7fffd4 18%,#7fffd4 82%,transparent); height:1px}