/* ============================================================
   GRAND TERRITORY ARENA — pixel flat
   Palette locked to the hero art.
   ============================================================ */
:root{
  --orange:#F2683C;
  --navy:#2B2150;
  --violet:#584A8C;
  --water:#3A5A9B;
  --amber:#FFC24A;
  --bone:#F5EDE0;
  --ink:#16102E;
  --line:#584A8C;

  --pixel:'Press Start 2P', ui-monospace, monospace;
  --label:'Silkscreen', ui-monospace, monospace;
  --body:'VT323', ui-monospace, monospace;

  --gutter:clamp(16px, 5vw, 72px);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink);overflow-x:clip}
.hero,.feat,.band,.foot{scroll-margin-top:96px}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:20px;              /* VT323 runs small; this is ~14px x-height */
  line-height:1.45;
  overflow-x:clip;              /* not 'hidden': that breaks the sticky header */
  -webkit-font-smoothing:none;
}
img{max-width:100%;display:block;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}
svg{image-rendering:pixelated}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:120;background:var(--amber);color:var(--ink);padding:10px 14px;font-family:var(--label)}
.skip:focus{left:8px;top:8px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--label);font-weight:700;letter-spacing:.06em;
  font-size:15px;padding:12px 18px;border:2px solid var(--ink);border-radius:2px;
  background:var(--amber);color:var(--ink);cursor:pointer;text-transform:uppercase;
  min-height:44px;line-height:20px;
}
.btn--amber:hover{background:var(--orange);color:var(--bone);border-color:var(--bone)}
.btn--big{font-size:18px;padding:16px 26px}
.btn--ghost{background:transparent;color:var(--amber);border-color:var(--violet);font-size:13px;padding:8px 12px;min-height:36px}
.btn--ghost:hover{background:var(--violet);color:var(--bone)}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:20px;
  padding:10px var(--gutter);border-bottom:2px solid var(--line);background:var(--ink);
}
.topbar__logo{display:block;flex:0 0 auto;line-height:0}
.topbar__logo img{height:60px;width:auto}
.topbar__logo:hover{text-decoration:none;opacity:.85}

.topbar__nav{
  margin-left:auto;display:flex;align-items:center;gap:18px;
  font-family:var(--label);font-size:14px;letter-spacing:.04em;
}
.topbar__nav a{color:var(--bone);padding:4px 0}
.topbar__nav a:hover{color:var(--amber)}
.topbar__rule{width:2px;height:16px;background:var(--violet);flex:0 0 2px}

/* not-yet-live destinations: labelled, not linked */
.soon{color:var(--bone);cursor:default;white-space:nowrap}
.soon em{
  font-style:normal;font-size:10px;letter-spacing:.08em;
  color:var(--orange);margin-left:6px;
}

/* hamburger — hidden until the nav collapses */
.menubtn{
  display:none;margin-left:auto;width:44px;height:44px;padding:0;
  background:transparent;border:2px solid var(--violet);border-radius:2px;cursor:pointer;
  align-items:center;justify-content:center;
}
.menubtn:hover{border-color:var(--amber)}
.menubtn__bars,
.menubtn__bars::before,
.menubtn__bars::after{content:"";display:block;width:20px;height:2px;background:var(--bone)}
.menubtn__bars{position:relative}
.menubtn__bars::before{position:absolute;top:-6px}
.menubtn__bars::after{position:absolute;top:6px}
.topbar.is-open .menubtn{border-color:var(--amber)}
.topbar.is-open .menubtn__bars{background:transparent}
.topbar.is-open .menubtn__bars::before{top:0;transform:rotate(45deg);background:var(--amber)}
.topbar.is-open .menubtn__bars::after{top:0;transform:rotate(-45deg);background:var(--amber)}

/* ============================ HERO ============================ */
.hero{
  position:relative;
  height:clamp(520px, 78vh, 900px);
  border-bottom:2px solid var(--line);
  overflow:hidden;
}
.hero__frame{position:absolute;inset:0;
  /* instant low-res placeholder, no layout shift */
  background-image:url("data:image/jpeg;base64,/9j//gAPTGF2YzYzLjEuMTAxAP/bAEMACBgYHBgcISEhISEhJyQnKCgoJycnJygoKCsrKzMzMysrKygoKyswMDMzNzk3NDQzNDk5PDw8SEhFRVRUV2dnfP/EAGUAAQEBAAAAAAAAAAAAAAAAAAYHBQEAAwEBAAAAAAAAAAAAAAAABQQCAQMQAQACAQIHAQAAAAAAAAAAAAEAAhEDIQQTErFxYRRBEQADAAIDAQAAAAAAAAAAAAABAAIREzIxYQP/wAARCAAMABgDARIAAhIAAxIA/9oADAMBAAIRAxEAPwAFz1NzHvEwauKygfS5hZJ8DxCvpxB+g94HLuZpk11RZXJsDuQjwWk/TpdO2mr5JPFQiev6Z5lIJzbGOIQz/9k=");
  background-size:cover;background-position:50% 50%;
}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(22,16,46,.72) 0%, rgba(22,16,46,.18) 34%, rgba(22,16,46,0) 55%, rgba(22,16,46,.55) 100%);
}
.hero__copy{position:absolute;left:var(--gutter);top:clamp(18px,5vh,54px);z-index:12;max-width:min(640px,80vw)}
.hero__title{
  font-family:var(--pixel);font-size:clamp(20px,3.4vw,42px);line-height:1.5;margin:0;
  color:var(--bone);text-shadow:3px 3px 0 var(--navy);
}
.hero__ticker{font-family:var(--pixel);font-size:clamp(14px,2vw,22px);color:var(--amber);margin:14px 0 0;text-shadow:2px 2px 0 var(--navy)}
.hero__tag{font-family:var(--label);font-size:clamp(13px,1.3vw,16px);line-height:1.7;color:var(--bone);margin:16px 0 22px;max-width:34ch;text-shadow:2px 2px 0 rgba(22,16,46,.9)}

/* ---------- live stat strip ---------- */
.statstrip{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(16px,3vh,34px);z-index:12;
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
.stat{
  background:rgba(22,16,46,.86);border:2px solid var(--violet);border-radius:2px;
  padding:10px 12px;min-height:74px;display:flex;flex-direction:column;justify-content:space-between;
}
.stat__label{font-family:var(--label);font-size:11px;letter-spacing:.08em;color:var(--amber)}
.stat__value{font-family:var(--pixel);font-size:clamp(11px,1.1vw,15px);color:var(--bone);min-height:18px;display:block;line-height:18px}
.skel{display:block;height:14px;width:80%;background:var(--violet);opacity:.55;animation:skel 1s steps(2) infinite}
@keyframes skel{0%{opacity:.35}50%{opacity:.7}100%{opacity:.35}}

/* short viewports: keep the hero copy from running into the stat strip */
@media (max-height:780px) and (min-width:768px){
  .hero__title{font-size:clamp(18px,2.6vw,30px);line-height:1.4}
  .hero__ticker{margin-top:10px}
  .hero__tag{margin:12px 0 16px}
  .btn--big{font-size:16px;padding:12px 20px}
}

/* ============================ FEATURES ============================ */
.features{display:block;padding:clamp(48px,9vh,110px) 0 clamp(24px,5vh,60px)}
.feat{
  max-width:var(--maxw);margin:0 auto;padding:clamp(34px,7vh,80px) var(--gutter);
  min-height:62vh;display:flex;align-items:center;
}
.feat--left{justify-content:flex-start}
.feat--right{justify-content:flex-end}
.card{
  position:relative;width:min(460px,100%);
  border:2px solid var(--violet);border-radius:2px;background:var(--navy);
  padding:22px 22px 24px;
}
.card__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ico{fill:var(--amber);width:32px;height:32px;flex:0 0 auto}
.card__num{font-family:var(--pixel);font-size:12px;color:var(--violet)}
.card__title{font-family:var(--pixel);font-size:clamp(13px,1.5vw,17px);line-height:1.5;margin:0 0 12px;color:var(--bone)}
.card__body{font-family:var(--body);font-size:21px;line-height:1.4;margin:0;color:var(--bone);opacity:.92}
.card__phase{
  position:absolute;top:8px;right:10px;font-family:var(--label);font-size:10px;letter-spacing:.1em;
  color:var(--violet);border:2px solid var(--violet);border-radius:2px;padding:2px 6px;
}

/* ============================ BANDS ============================ */
.band{max-width:var(--maxw);margin:0 auto;padding:clamp(44px,8vh,96px) var(--gutter);border-top:2px solid var(--line)}
.band__title{font-family:var(--pixel);font-size:clamp(14px,1.8vw,20px);margin:0 0 26px;color:var(--amber)}
.band__note{font-family:var(--body);font-size:19px;opacity:.7;margin:16px 0 0}

.tablewrap{overflow-x:auto;border:2px solid var(--violet);border-radius:2px}
.ptable{width:100%;min-width:460px;border-collapse:collapse;background:var(--navy)}
.ptable th,.ptable td{text-align:left;padding:12px 14px;border-bottom:2px solid var(--ink);font-family:var(--label);font-size:14px}
.ptable thead th{background:var(--ink);color:var(--amber);font-size:12px;letter-spacing:.08em}
.ptable tbody th{color:var(--bone);font-weight:700}
.ptable tbody td{color:var(--bone)}
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:0}

.flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.flow__step{flex:1 1 180px;border:2px solid var(--violet);border-radius:2px;background:var(--navy);padding:16px 14px;display:flex;flex-direction:column;gap:8px}
.flow__n{font-family:var(--pixel);font-size:11px;color:var(--violet)}
.flow__t{font-family:var(--label);font-size:14px;letter-spacing:.06em;color:var(--bone)}
.flow__arrow{display:flex;align-items:center;justify-content:center;flex:0 0 22px}
.chev{width:14px;height:14px;background:var(--orange);
  clip-path:polygon(0 0,50% 0,100% 50%,50% 100%,0 100%,50% 50%)}

.faq{border:2px solid var(--violet);border-radius:2px;background:var(--navy)}
.qa{border-bottom:2px solid var(--ink)}
.qa:last-child{border-bottom:0}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:15px 16px;min-height:44px}
.qa summary::-webkit-details-marker{display:none}
.qa__q{font-family:var(--label);font-size:14px;letter-spacing:.03em;flex:1}
.qa__x{width:14px;height:14px;position:relative;flex:0 0 14px}
.qa__x::before,.qa__x::after{content:"";position:absolute;background:var(--amber)}
.qa__x::before{left:0;top:6px;width:14px;height:2px}
.qa__x::after{left:6px;top:0;width:2px;height:14px}
.qa[open] .qa__x::after{display:none}
.qa__a{padding:0 16px 16px}
.qa__a p{margin:0;font-size:20px;opacity:.9}

/* ============================ FOOTER ============================ */
.foot{position:relative;border-top:2px solid var(--line);background:var(--navy);padding:clamp(70px,11vh,130px) var(--gutter) 28px}
.foot__park{position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none}
.foot__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.foot__col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.foot__mark{font-family:var(--pixel);font-size:12px;line-height:1.6;margin:0;color:var(--bone)}
.foot__tick{font-family:var(--label);font-size:13px;margin:0;color:var(--amber)}
.foot__col a,.foot__col .soon{font-family:var(--label);font-size:14px}
.foot__lbl{font-family:var(--label);font-size:11px;letter-spacing:.1em;color:var(--violet)}
.copyrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.copyrow code{font-family:var(--body);font-size:18px;color:var(--bone);word-break:break-all}
.copystatus{font-family:var(--label);font-size:11px;color:var(--amber);min-height:14px}
.foot__fine{max-width:var(--maxw);margin:34px auto 0;font-size:18px;opacity:.6;border-top:2px solid var(--violet);padding-top:16px}

/* ============================ CAR ============================ */
.exhaust{position:fixed;inset:0;width:100%;height:100%;z-index:38;pointer-events:none}
.car{
  position:fixed;left:0;top:0;z-index:40;
  width:64px;height:auto;min-width:44px;min-height:44px;
  padding:0;margin:0;border:0;background:transparent;cursor:pointer;
  transform:translate3d(-999px,-999px,0);
  will-change:transform;
}
.car__body{display:block;position:relative;animation:idle .9s steps(2) infinite}
.car img{width:64px;height:121px}
.car.is-moving .car__body{animation:roll .18s steps(2) infinite}
@keyframes idle{0%{transform:translateY(0)}50%{transform:translateY(1px)}100%{transform:translateY(0)}}
@keyframes roll{0%{transform:translateY(0)}50%{transform:translateY(2px)}100%{transform:translateY(0)}}
.car__lamp{position:absolute;bottom:5px;width:6px;height:4px;background:var(--amber);opacity:.75;
  box-shadow:0 3px 0 rgba(255,194,74,.45)}
.car__lamp--l{left:11px}
.car__lamp--r{right:11px}
.car.is-moving .car__lamp{opacity:1;box-shadow:0 5px 0 rgba(255,194,74,.6),0 9px 0 rgba(255,194,74,.25)}

.drivecue{
  position:fixed;left:0;top:0;z-index:41;
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:10px 12px;cursor:pointer;
  background:rgba(22,16,46,.9);border:2px solid var(--amber);border-radius:2px;
  color:var(--amber);font-family:var(--label);font-size:12px;letter-spacing:.08em;
  transform:translate3d(-999px,-999px,0);white-space:nowrap;
  animation:blink 1.1s steps(2) infinite;will-change:transform;
}
.drivecue:hover{background:var(--amber);color:var(--ink);animation:none}
.drivecue__tri{font-size:11px;line-height:1}
@keyframes blink{0%{opacity:1}50%{opacity:.45}100%{opacity:1}}
.drivecue[hidden],.car[hidden]{display:none}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1024px){
  .statstrip{grid-template-columns:repeat(2,1fr)}
}

/* ---- collapsed nav ---- */
@media (max-width:1024px){
  .menubtn{display:flex}
  .topbar__nav{
    position:absolute;left:0;right:0;top:100%;z-index:59;
    margin:0;display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy);border-bottom:2px solid var(--violet);
  }
  .topbar.is-open .topbar__nav{display:flex}
  .topbar__nav a,
  .topbar__nav .soon{
    padding:0 var(--gutter);min-height:52px;display:flex;align-items:center;
    border-top:2px solid var(--ink);font-size:15px;
  }
  .topbar__nav a:hover{background:var(--violet);color:var(--amber);text-decoration:none}
  .topbar__rule{width:auto;height:2px;background:var(--violet);flex:0 0 2px;margin:0}
}
@media (max-width:767px){
  .hero{height:clamp(500px,72vh,760px)}
  .hero__img{object-position:32% 34%}   /* anchor the skyline, not the water */
  .hero__frame{background-position:32% 34%}
  .topbar__logo img{height:44px}
  .feat{padding-left:var(--gutter);padding-right:var(--gutter)}
  .feat--left,.feat--right{justify-content:center}
  .card{width:100%}
  .foot__grid{grid-template-columns:1fr}
  .statstrip{gap:8px;bottom:12px}
  .stat{min-height:60px;padding:8px 10px}
  .stat__label{font-size:10px}
  .car{width:48px}
  .car img{width:48px;height:91px}
  .drivecue__txt{display:none}
  .drivecue{padding:12px 14px}
  .drivecue__tri{font-size:15px}
}
@media (max-width:400px){
  .stat__value{font-size:10px}
  .stat__label{font-size:10px}
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .car__body,.drivecue,.skel{animation:none !important}
  .exhaust{display:none}
}