/* ROOK — black shop floor, acid green machinery. Accent sampled from the mark: #C8F008 */

:root{
  --void:#050705;
  --panel:#0a0d08;
  --panel-2:#0e1209;
  --line:#1c2410;
  --line-2:#2c3a18;
  --acid:#c8f008;
  --acid-dim:#9cb400;
  --acid-deep:#4a5a00;
  --ink:#e8f0d8;
  --ink-2:#7d8a6b;
  --shut:#5a4a2a;

  --w:1280px;
  --gut:clamp(20px,5vw,72px);
  --disp:"Saira",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--void);color:var(--ink);
  font-family:var(--disp);font-weight:400;
  font-size:clamp(15px,1.05vw,16.5px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* a faint mill-floor texture so the black is not flat */
.grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 0%,transparent 75%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 0%,transparent 75%);
}
main,.nav,.foot{position:relative;z-index:1}
[data-view]{position:relative}
[data-view] canvas{display:block;width:100%;height:100%}

.mono{font-family:var(--mono);font-variant-ligatures:none}
.acid{color:var(--acid)}
a{color:inherit}
code.mono{background:var(--panel-2);border:1px solid var(--line);padding:.08em .4em;color:var(--acid-dim);font-size:.88em}

/* ───────────────────────────── nav ──────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;height:58px;z-index:50;
  display:flex;align-items:center;gap:clamp(14px,3vw,40px);padding:0 var(--gut);
  background:rgba(5,7,5,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav__mark{
  display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--acid);
  font-weight:900;font-size:15px;letter-spacing:.22em;
}
.nav__live{display:flex;align-items:center;gap:10px;margin-right:auto;font-size:11.5px;letter-spacing:.1em}
.pulse{width:7px;height:7px;background:var(--acid);box-shadow:0 0 10px var(--acid)}
.pulse.shut{background:var(--shut);box-shadow:none}
#navState{color:var(--ink-2)}
.nav__fee{color:var(--acid);font-weight:700}
.nav__links{display:flex;gap:22px;font-size:12px;letter-spacing:.06em;font-family:var(--mono)}
.nav__links a{text-decoration:none;color:var(--ink-2);transition:color .16s}
.nav__links a:hover{color:var(--acid)}
@media (max-width:780px){.nav__links a:not(:last-child){display:none}}

/* ───────────────────────────── hero ─────────────────────────── */
.hero{
  min-height:100svh;padding:110px var(--gut) 0;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  grid-template-rows:1fr auto;gap:0 clamp(24px,4vw,64px);
  max-width:var(--w);margin:0 auto;align-items:center;
}
.hero__copy{padding-bottom:20px}
.hero__stage{min-height:min(62vh,560px);width:100%}

.kicker{
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--acid-dim);margin:0 0 20px;
}
.hero__h1{
  font-weight:900;font-size:clamp(34px,6.2vw,80px);line-height:.98;
  letter-spacing:-.02em;margin:0 0 24px;
}
.hero__sub{font-size:clamp(16px,1.5vw,20px);color:var(--ink-2);max-width:40ch;margin:0 0 32px;line-height:1.5}
.hero__sub b{color:var(--ink);font-weight:700}

.btn{
  display:inline-block;text-decoration:none;font-family:var(--mono);
  font-size:12px;letter-spacing:.1em;padding:13px 24px;
  background:var(--acid);color:#0a0d08;font-weight:700;border:1px solid var(--acid);
  transition:box-shadow .18s,transform .18s;
}
.btn:hover{box-shadow:0 0 24px rgba(200,240,8,.42);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--acid);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--acid);box-shadow:none}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}

.ticker{
  grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:36px;
}
.tk{padding:16px 0 16px 18px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.tk:first-child{border-left:none;padding-left:0}
.tk__k{font-size:9.5px;letter-spacing:.22em;color:var(--ink-2)}
.tk__v{font-size:clamp(14px,1.5vw,19px);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.tk__v--big{color:var(--acid);font-weight:700;font-size:clamp(16px,2vw,26px)}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:90px}
  .hero__stage{min-height:40vh;order:-1}
  .ticker{grid-template-columns:1fr 1fr}
  .tk:nth-child(3){border-left:none;padding-left:0}
}

/* ──────────────────────────── bands ─────────────────────────── */
.band{padding:clamp(70px,9vw,130px) 0;border-top:1px solid var(--line)}
.band--panel{background:var(--panel)}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);align-items:start}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:22px}}

.h2{font-weight:900;font-size:clamp(30px,4.6vw,60px);line-height:1;letter-spacing:-.02em;margin:0}
.h2--mid{font-size:clamp(26px,3.6vw,46px);margin-bottom:24px}
.prose p{margin:0 0 16px;color:var(--ink-2);max-width:56ch}
.prose p:last-child{margin-bottom:0}
.prose b{color:var(--ink);font-weight:700}
.lead{font-size:clamp(15px,1.35vw,18px);color:var(--ink-2);max-width:62ch;margin:20px 0 0}
.lead b{color:var(--ink);font-weight:700}
.note{font-size:12px;color:var(--ink-2);letter-spacing:.01em}

/* ─────────────────────────── week bar ───────────────────────── */
.weekbar{
  display:grid;grid-template-columns:repeat(168,1fr);gap:1px;
  margin:clamp(40px,5vw,64px) 0 12px;height:64px;
}
.weekbar i{background:var(--panel-2);border-top:1px solid transparent}
.weekbar i.on{background:var(--acid);box-shadow:0 0 8px rgba(200,240,8,.5)}
.weekbar i.ext{background:var(--acid-deep)}
.weekbar i.now{outline:1px solid var(--ink);outline-offset:1px;z-index:2}
.weekbar__cap{font-size:11px;color:var(--ink-2);letter-spacing:.06em;margin:0}

/* ───────────────────────────── dial ─────────────────────────── */
.dial{
  max-width:var(--w);margin:clamp(40px,5vw,70px) auto 0;padding:0 var(--gut);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:center;
}
.dial__stage{min-height:min(52vh,440px);width:100%}
@media (max-width:880px){.dial{grid-template-columns:1fr}.dial__stage{min-height:38vh}}

.sched{width:100%;border-collapse:collapse;font-size:13px}
.sched th{
  text-align:left;font-size:9.5px;letter-spacing:.2em;color:var(--ink-2);
  font-weight:400;padding:0 0 12px;border-bottom:1px solid var(--line);
}
.sched td{padding:15px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.sched td:last-child{text-align:right;color:var(--acid);font-weight:700}
.sched tr[data-s].live td{color:var(--ink)}
.sched tr[data-s].live{background:linear-gradient(90deg,rgba(200,240,8,.07),transparent)}
.sw{display:inline-block;width:9px;height:9px;margin-right:11px;vertical-align:1px}
.sw--open{background:var(--acid)}
.sw--ext{background:var(--acid-deep)}
.sw--shut{background:var(--shut)}

/* ───────────────────────────── bell ─────────────────────────── */
.bell{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,60px);align-items:center;
  margin-top:clamp(50px,6vw,90px);
  border-top:1px solid var(--line);padding-top:clamp(36px,4vw,56px);
}
.bell h3{font-weight:700;font-size:clamp(19px,2.2vw,28px);margin:0 0 16px;line-height:1.14}
.bell p{margin:0 0 14px;color:var(--ink-2);max-width:52ch}
.bell b{color:var(--ink);font-weight:700}
.bell__svg{width:100%;height:auto}
.svgt{fill:#7d8a6b;font-family:"JetBrains Mono",monospace;font-size:11px}
@media (max-width:880px){.bell{grid-template-columns:1fr}}

/* ──────────────────────────── limits ────────────────────────── */
.limits{list-style:none;counter-reset:l;margin:0;padding:0;display:grid;gap:1px;background:var(--line)}
.limits li{
  counter-increment:l;background:var(--panel-2);padding:22px 26px 22px 64px;
  position:relative;color:var(--ink-2);font-size:15px;
}
.limits li::before{
  content:counter(l,decimal-leading-zero);position:absolute;left:24px;top:22px;
  font-family:var(--mono);font-size:11px;color:var(--acid-dim);letter-spacing:.1em;
}
.limits b{color:var(--ink);font-weight:700}

/* ──────────────────────────── table ─────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:24px}
.tbl td{padding:15px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl td:first-child{width:30%;color:var(--ink-2);letter-spacing:.06em;padding-right:20px}
.tbl td:last-child{color:var(--acid-dim);word-break:break-all}
@media (max-width:640px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl td{border:none;padding:2px 0}
  .tbl tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .tbl td:first-child{width:100%;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
}
.status{display:flex;gap:9px;flex-wrap:wrap;margin:30px 0 0}
.pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;padding:7px 14px;border:1px solid var(--line-2);color:var(--ink-2)}
.pill--warn{color:var(--acid);border-color:var(--acid-deep)}

/* ───────────────────────────── foot ─────────────────────────── */
.foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:24px var(--gut);border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.16em;color:var(--ink-2);
}
.foot__mid{color:var(--acid)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--acid)}