/* ==========================================================================
   $NOTABULL — Gate 3 access control
   Palette lifted straight off the artwork: sage wall panel, cream corridor,
   powder-blue costume (and gate), coral floor stripe, dark-brown ink.
   Type: Zilla Slab (institutional slab display) / Asap (body) / Inconsolata
   (every label, readout and numeral — including the ticker, per house rule).
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --sage:#A8AE85;          /* page ground — the wall panel */
  --sage-d:#8E9570;
  --sage-l:#BCC199;
  --paper:#F7E7C0;         /* corridor wall — cards, light sections */
  --paper-2:#EFDCB0;
  --ink:#241C12;           /* everything is stamped in this */
  --ink-2:#3B3320;
  --ink-3:#6A5C42;
  --blue:#8FB3D4;          /* the costume. and the gate. */
  --blue-d:#6E93B6;
  --blue-l:#C6D7E2;
  --coral:#EE7A5E;         /* the floor stripe / the alert colour */
  --coral-d:#C85A40;
  --screen:#1A1509;        /* control-room dark */
  --screen-2:#0E0B05;

  --disp:'Zilla Slab',Georgia,'Times New Roman',serif;
  --body:'Asap',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Inconsolata',ui-monospace,'SF Mono',Consolas,monospace;

  --edge:2.5px solid var(--ink);
  --edge-thin:1.5px solid var(--ink);
  --pop:6px 6px 0 var(--ink);      /* hard offset shadow — stamped paperwork */
  --pop-sm:4px 4px 0 var(--ink);
  --wrap:1180px;
  --gut:clamp(18px,4vw,40px);
  --sec-y:clamp(64px,9vw,116px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}       /* beats any .class{display:…} (sol94) */
html{
  overflow-x:clip; scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  background:var(--sage);
}
body{
  margin:0; overflow-x:hidden;
  background:var(--sage); color:var(--ink);
  font-family:var(--body); font-size:clamp(16px,1.03vw,17.5px); line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0; list-style:none}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:var(--coral); color:var(--ink)}
:focus-visible{outline:3px solid var(--coral); outline-offset:3px; border-radius:2px}
[id]{scroll-margin-top:96px}

/* custom scrollbar — corridor rail */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{width:13px;height:13px}
  ::-webkit-scrollbar-track{background:var(--sage-d)}
  ::-webkit-scrollbar-thumb{background:var(--ink); border:3px solid var(--sage-d)}
  ::-webkit-scrollbar-thumb:hover{background:var(--coral-d)}
}
html{scrollbar-color:var(--ink) var(--sage-d)}

.skip{
  position:fixed; left:12px; top:-70px; z-index:10000;
  background:var(--coral); color:var(--ink); border:var(--edge);
  padding:10px 16px; font:700 13px/1 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; transition:top .18s var(--ease);
}
.skip:focus{top:12px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}

/* ---------- shared type ---------- */
.kicker,.eyebrow,.panel-h,.an-k,.s-k,.g-k,.osd p,.cam-tag,.stage-tag,.foot-log{
  font-family:var(--mono); font-weight:700; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase;
}
.sec-h{max-width:62ch; margin-bottom:clamp(30px,4vw,52px)}
.sec-h .kicker{
  display:inline-flex; align-items:center; gap:9px; color:var(--ink-2); margin-bottom:14px;
}
.sec-h .kicker::before{content:''; width:26px; height:2.5px; background:var(--coral)}
.sec h2{
  font-family:var(--disp); font-weight:700; line-height:.98;
  font-size:clamp(34px,5.4vw,62px); letter-spacing:-.015em;
}
.sec .sub{margin-top:16px; max-width:56ch; color:var(--ink-2)}
.sec .sub b{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--paper);
  position:relative; display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border:var(--edge); background:var(--btn-bg);
  font-family:var(--mono); font-weight:700; font-size:14px;
  letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
  box-shadow:var(--pop-sm);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
.btn-p{--btn-bg:var(--coral)}
.btn-p:hover{--btn-bg:#F58E73}
.btn-i img{width:16px;height:16px}
.btn-s{
  --btn-bg:transparent; color:var(--paper); border-color:var(--paper-2);
  box-shadow:4px 4px 0 rgba(247,231,192,.28); font-size:13px; padding:11px 18px;
}
.btn-s:hover{--btn-bg:rgba(247,231,192,.14); box-shadow:6px 6px 0 rgba(247,231,192,.34)}
.btn-s:active{box-shadow:1px 1px 0 rgba(247,231,192,.4)}

/* ==========================================================================
   NAV — the clearance bar
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:900;
  background:var(--paper);
  border-bottom:var(--edge);
}
.nav-in{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:10px var(--gut);
  display:flex; align-items:center; gap:18px;
}
.brand{display:flex; align-items:center; gap:11px; flex:0 0 auto}
.brand img{width:34px; height:auto}
.brand-txt{display:flex; flex-direction:column; line-height:1}
.brand-txt b{font-family:var(--disp); font-size:20px; letter-spacing:.01em}
.brand-txt i{
  font:700 9.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); font-style:normal; margin-top:4px;
}
.links{display:flex; gap:2px; margin-left:auto}
.links a{
  position:relative; padding:9px 12px;
  font-family:var(--mono); font-weight:700; font-size:12.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2);
  transition:color .16s var(--ease);
}
.links a::after{
  content:''; position:absolute; left:12px; right:12px; bottom:5px; height:2.5px;
  background:var(--coral); transform:scaleX(0); transform-origin:left;
  transition:transform .22s var(--ease);
}
.links a:hover{color:var(--ink)}
.links a:hover::after,.links a[aria-current]::after{transform:scaleX(1)}
.nav-r{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.depth{
  display:flex; flex-direction:column; align-items:flex-end; line-height:1;
  font-family:var(--mono);
}
.depth span{font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}
.depth b{font-size:17px; font-weight:700; margin-top:3px; font-variant-numeric:tabular-nums}
.depth b i{font-style:normal; font-size:11px; color:var(--ink-3); margin-left:1px}
.nav .btn{padding:10px 17px; font-size:12.5px}

/* the sliver of coral that tracks how deep he has got */
.nav-rule{height:4px; background:var(--ink); position:relative; overflow:hidden}
.nav-rule::after{
  content:''; position:absolute; inset:0 auto 0 0; width:100%;
  background:var(--coral); transform:scaleX(var(--prog,0)); transform-origin:left;
}

.burger{
  display:none; width:42px; height:42px; border:var(--edge); background:var(--paper);
  padding:0; place-items:center; box-shadow:var(--pop-sm);
}
.burger span{
  display:block; width:19px; height:2.5px; background:var(--ink); margin:2.6px auto;
  transition:transform .22s var(--ease), opacity .16s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.2px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.2px) rotate(-45deg)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  --floor-h:clamp(46px,7vw,88px);
  --stripe-h:clamp(26px,3.4vw,44px);
  position:relative; overflow:hidden;
  /* the bottom pad is exactly the floor band, so nothing ever lands on it and
     the stage's own ground line meets the coral stripe */
  padding:clamp(38px,5.5vw,72px) 0 calc(var(--floor-h) + var(--stripe-h));
}
.hero::before{  /* the corridor floor stripe running behind everything */
  content:''; position:absolute; left:-10%; right:-10%; bottom:var(--floor-h);
  height:var(--stripe-h); background:var(--coral); opacity:.9;
  border-block:2.5px solid var(--ink);
}
.hero::after{  /* cream floor below the stripe */
  content:''; position:absolute; inset:auto -10% 0 -10%; height:var(--floor-h);
  background:var(--paper-2);
}
.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(26px,4vw,58px); align-items:end;
}
.hero-grid > *{min-width:0}
.hero-copy{padding-bottom:clamp(14px,2.4vw,30px)}
.eyebrow{display:inline-flex; align-items:center; gap:9px; color:var(--ink-2)}
.eyebrow .dot{
  width:9px; height:9px; background:var(--coral); border:1.5px solid var(--ink);
  border-radius:50%; flex:0 0 auto;
}
.hero h1{
  font-family:var(--disp); font-weight:700; letter-spacing:-.02em; line-height:.92;
  font-size:clamp(46px,8.4vw,104px); margin:16px 0 0;
}
.hero h1 span{display:block}
.hero h1 span:last-child{color:var(--paper); -webkit-text-stroke:2.5px var(--ink); paint-order:stroke fill}
.ticker{
  font-family:var(--mono); font-weight:700; font-size:clamp(19px,2.4vw,28px);
  letter-spacing:.14em; margin-top:14px;
  display:inline-block; padding:5px 14px;
  background:var(--blue); border:var(--edge); box-shadow:var(--pop-sm);
}
.lede{
  font-family:var(--disp); font-style:italic; font-size:clamp(19px,2.1vw,24px);
  line-height:1.34; margin-top:22px; max-width:26ch;
}
.hero .body{margin-top:14px; max-width:50ch; color:var(--ink-2)}

/* CA pill — a badge slot */
.ca{
  display:inline-flex; align-items:center; gap:12px; margin-top:26px;
  padding:10px 12px 10px 14px; background:var(--paper); border:var(--edge);
  box-shadow:var(--pop-sm); cursor:pointer; max-width:100%;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease);
}
.ca:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink)}
.ca:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
.ca-k{
  font:700 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); flex:0 0 auto;
}
.ca-v{
  font:700 13.5px/1 var(--mono); letter-spacing:.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.ca-c{
  flex:0 0 auto; font:700 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  background:var(--blue); border:var(--edge-thin); padding:6px 8px;
}
.ca.copied .ca-c{background:var(--coral)}

.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}

.verdict-chip{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  border:var(--edge-thin); border-style:dashed; padding:8px 13px;
  background:rgba(247,231,192,.4); cursor:pointer; user-select:none;
}
.verdict-chip b{
  font:700 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}
.verdict-chip span{
  font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:.01em;
}
.verdict-chip:hover{background:rgba(247,231,192,.72)}

/* ---- hero art: the gate, the camera, the very still bull ---- */
.hero-art{display:flex; justify-content:center}
.stage{position:relative; width:100%; max-width:470px; aspect-ratio:1/1.13}
.gate{
  position:absolute; left:50%; top:0; width:92%; height:auto;
  transform:translateX(-50%); filter:drop-shadow(0 0 0 var(--ink));
}
.gate path{stroke:var(--ink); stroke-width:2.5; stroke-linejoin:round}
 /* the ground line only has a job when the corridor floor band is hidden */
.floor{position:absolute; left:2%; right:2%; bottom:0; height:2px; display:none}
.floor .line{display:block; height:2.5px; background:var(--ink); opacity:.55}
.hero-bull{
  position:absolute; left:50%; bottom:0; width:78%; height:auto;
  transform:translate(-50%,0) translateY(var(--sway,0px));
  filter:drop-shadow(0 12px 7px rgba(36,28,18,.26));
  z-index:3;
}
.stage-tag{
  position:absolute; left:0; bottom:calc(-1 * (var(--stripe-h) + 26px));
  color:var(--ink-2); font-size:10px;
  background:var(--paper); border:var(--edge-thin); padding:3px 8px;
}
.cam{
  position:absolute; right:-2%; top:9%; z-index:4; width:126px; padding:0;
  transform-origin:6px 30px; display:block;
}
.cam svg{width:100%; height:auto; overflow:visible}
.cam .cam-head{
  transform-origin:26px 33px;
  transform:rotate(var(--pan,0deg));
  transition:transform .55s var(--ease);
}
.cam .cam-head rect,.cam .cam-head circle{stroke-linejoin:round}
.cam .rec{transform-origin:center; animation:rec 1.9s steps(1,end) infinite}
.cam-tag{
  position:absolute; right:6px; bottom:-14px;
  background:var(--coral); border:var(--edge-thin); padding:3px 7px; font-size:9.5px;
}
.cam[aria-pressed="true"]{--pan:-26deg}
.cam[aria-pressed="true"] .cam-tag{background:var(--blue)}
@keyframes rec{0%,49%{opacity:1}50%,100%{opacity:.18}}

/* ==========================================================================
   SECTIONS — shared shell
   ========================================================================== */
.sec{position:relative; padding:var(--sec-y) 0}
.incident,.clearance,.schedule{background:var(--paper)}
.incident,.clearance,.schedule,.anomalies,.entry,.cta-sec{border-top:var(--edge)}

.card{
  position:relative; background:var(--paper); border:var(--edge);
  box-shadow:var(--pop); padding:22px 22px 24px;
}
.incident .card,.clearance .card,.schedule .card{background:#FFF6DF}

.grid{display:grid; gap:clamp(16px,2vw,22px)}
.grid > *{min-width:0}
.an{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.stats{grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}
.how{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}

/* ==========================================================================
   CAMERA 03 — the centrepiece
   ========================================================================== */
.camera{
  background:var(--screen); color:var(--paper);
  border-top:var(--edge); border-bottom:var(--edge);
}
.camera::before{  /* faint control-room grid */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.14;
  background:
    repeating-linear-gradient(0deg,rgba(247,231,192,.5) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(90deg,rgba(247,231,192,.5) 0 1px,transparent 1px 44px);
  mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 78%);
}
.camera .sec-h .kicker{color:var(--blue)}
.camera .sec-h .kicker::before{background:var(--blue)}
.camera h2{color:var(--paper)}
.camera .sub{color:#CFC0A0}
.camera .sub b{color:var(--coral)}

.rig{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,30px); align-items:start;
}
.rig > *{min-width:0}

/* ---- the monitor ---- */
.monitor{
  position:relative; background:#0A0803; border:2.5px solid #6B5C3E;
  padding:12px 12px 0; box-shadow:0 0 0 5px #241C12, 0 22px 46px rgba(0,0,0,.45);
  cursor:crosshair;
}
.monitor:focus-visible{outline:3px solid var(--coral); outline-offset:6px}
.screen{
  position:relative; overflow:hidden; aspect-ratio:2.6/1;
  background:var(--screen-2);
  filter:saturate(.82) contrast(1.06);
}
.screen .corridor{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 58%;
}
.screen .subject{
  position:absolute; bottom:12%; left:var(--x,4%); width:auto; height:64%;
  transform:translateX(-50%) scaleX(var(--flip,1));
  transition:left .22s linear;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.34));
  will-change:left;
}
.screen .scan{
  position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.30) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,transparent 0 42%,rgba(200,225,255,.10) 50%,transparent 58% 100%);
  background-size:100% 3px,100% 240%;
  animation:sweep 5.6s linear infinite;
  mix-blend-mode:screen;
}
@keyframes sweep{from{background-position:0 0,0 -140%} to{background-position:0 0,0 240%}}
.screen::after{  /* CRT vignette + glass */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 130% at 50% 45%,transparent 42%,rgba(0,0,0,.62) 100%);
}
.osd{position:absolute; inset:0; pointer-events:none; color:#C8E6D2}
.osd p{
  position:absolute; font-size:11px; padding:3px 7px;
  background:rgba(10,8,3,.62); text-shadow:0 1px 2px rgba(0,0,0,.8);
}
.osd-l{left:9px; top:8px; display:flex; align-items:center; gap:7px}
.osd-r{right:9px; top:8px; font-variant-numeric:tabular-nums}
.osd-b{left:9px; bottom:8px; border:1.5px solid currentColor; letter-spacing:.22em}
.rec-dot{
  width:8px; height:8px; border-radius:50%; background:var(--coral); display:block;
  animation:rec 1.9s steps(1,end) infinite;
}
.monitor.observed .osd-b{color:var(--coral); border-color:var(--coral)}
.monitor.observed .screen{filter:saturate(1) contrast(1.12) brightness(1.06)}

.markers{position:absolute; inset:0; pointer-events:none}
.markers i{
  position:absolute; bottom:7%; left:var(--mx); width:2px; height:11%;
  background:var(--coral); opacity:.85;
}
.markers i::after{
  content:attr(data-n); position:absolute; left:-5px; top:-15px;
  width:12px; height:12px; display:grid; place-items:center;
  background:var(--coral); color:var(--screen-2);
  font:700 9px/1 var(--mono); letter-spacing:0;
}

.hint{
  position:absolute; inset:auto 0 0 0; display:grid; place-items:center;
  padding-bottom:34px; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.hint span{
  background:rgba(10,8,3,.78); border:1.5px solid #7E6C48; color:var(--paper);
  padding:7px 13px; font:700 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
.monitor.touched .hint{opacity:0}

.bezel{display:flex; gap:7px; justify-content:flex-end; padding:9px 2px}
.bezel span{width:22px; height:5px; background:#3A3122; border:1px solid #6B5C3E}
.bezel span:first-child{background:var(--coral); border-color:var(--coral-d)}

/* ---- the tracking panel ---- */
.panel{
  background:#221B0F; border:2.5px solid #6B5C3E; padding:20px 20px 22px;
  box-shadow:0 0 0 5px #241C12;
}
.panel-h{
  color:var(--blue); padding-bottom:9px; margin-bottom:16px;
  border-bottom:1.5px dashed #6B5C3E;
}
.panel-h + .panel-h,.gauge + .panel-h{margin-top:26px}
.gauge + .gauge{margin-top:18px}
.g-k{color:#B6A582; font-size:11px}
.g-v{
  font-family:var(--mono); font-weight:700; font-size:30px; line-height:1.1; margin-top:2px;
  font-variant-numeric:tabular-nums; color:var(--paper);
}
.g-v i{font-style:normal; font-size:14px; color:#B6A582; margin-left:4px}
.g-bar{height:9px; background:#0E0B05; border:1.5px solid #6B5C3E; margin-top:8px; overflow:hidden}
.g-bar b{display:block; height:100%; width:0; background:var(--blue); transition:width .3s var(--ease)}
.g-bar.alt b{background:var(--coral)}
.g-n{font-size:12.5px; color:#9E8F6F; margin-top:7px; line-height:1.45}

.stamp{
  display:inline-block; font-family:var(--disp); font-weight:700; font-size:20px;
  line-height:1.1; text-transform:uppercase; letter-spacing:.02em;
  color:var(--coral); border:3px solid var(--coral); padding:7px 13px;
  transform:rotate(-3.2deg); margin:2px 0 4px;
}

.log{
  margin-top:18px; border-top:1.5px dashed #6B5C3E; padding-top:14px;
  display:flex; flex-direction:column; gap:7px; min-height:96px;
  font-family:var(--mono); font-size:12px; color:#C8B993;
}
.log li{display:flex; gap:9px; animation:logIn .3s var(--ease) both}
.log li b{color:var(--coral); flex:0 0 auto; font-weight:700}
.log li.idle{color:#7E7157; font-style:italic}
@keyframes logIn{from{opacity:0; transform:translateX(-8px)}}
.panel .btn-s{margin-top:18px; width:100%; justify-content:center}

/* ==========================================================================
   WALL — the bulletin marquee
   ========================================================================== */
.wall{
  overflow:hidden; background:var(--coral);
  border-bottom:var(--edge); padding:13px 0;
}
.wall-in{
  display:flex; width:max-content; gap:0;
  animation:roll 46s linear infinite;
}
.wall span{
  display:inline-flex; align-items:center; gap:16px; padding-right:16px;
  font:700 14px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); white-space:nowrap;
}
.wall span::after{content:'◆'; font-size:10px; opacity:.55}
@keyframes roll{to{transform:translateX(-50%)}}
.wall:hover .wall-in{animation-play-state:paused}

/* ==========================================================================
   INCIDENT
   ========================================================================== */
.report{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(22px,3vw,40px); align-items:start;
}
.steps{position:relative; padding-left:26px}
.steps::before{
  content:''; position:absolute; left:5px; top:10px; bottom:10px; width:2.5px;
  background:repeating-linear-gradient(180deg,var(--ink) 0 7px,transparent 7px 13px);
  opacity:.4;
}
.steps li{position:relative; padding:0 0 22px}
.steps li:last-child{padding-bottom:0}
.steps li::before{
  content:''; position:absolute; left:-26px; top:7px; width:13px; height:13px;
  background:var(--paper); border:2.5px solid var(--ink);
}
.steps li.hi::before{background:var(--coral)}
.steps li b{
  display:block; font:700 11px/1 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:5px;
}
.steps li p{font-size:17px; line-height:1.52}
.steps li em{font-style:italic; font-family:var(--disp); font-weight:600}
.steps li .verdict{
  display:inline-block; font-family:var(--disp); font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; font-size:19px; background:var(--coral);
  border:var(--edge); padding:5px 11px; transform:rotate(-1.4deg);
}
.memo{background:var(--blue) !important}
.memo p{font-size:15.5px}
.memo p + p{margin-top:11px}
.memo-h{
  font:700 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  padding-bottom:10px; margin-bottom:13px; border-bottom:2.5px solid var(--ink);
}
.memo-f{font-family:var(--disp); font-style:italic; color:var(--ink-2); margin-top:14px !important}

/* ==========================================================================
   ANOMALIES
   ========================================================================== */
.an .card{padding:20px}
.an-k{color:var(--ink-3); font-size:11px}
.an-v{
  font-family:var(--mono); font-weight:700; font-size:clamp(32px,4vw,44px);
  line-height:1; margin:9px 0 11px; font-variant-numeric:tabular-nums;
}
.an-v i{font-style:normal; font-size:16px; color:var(--ink-3)}
.an-v.v{font-family:var(--disp); font-size:clamp(21px,2.4vw,26px); line-height:1.06; text-transform:uppercase}
.an-d{font-size:14.5px; line-height:1.5; color:var(--ink-2)}
.an-c{
  margin-top:13px; padding-top:11px; border-top:1.5px dashed rgba(36,28,18,.4);
  font:700 10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.an .final{background:var(--blue)}
.an .final .an-c{color:var(--ink-2)}

/* ==========================================================================
   CLEARANCE
   ========================================================================== */
.stat{text-align:left}
.s-k{color:var(--ink-3); font-size:11px}
.s-v{
  font-family:var(--mono); font-weight:700; font-size:clamp(21px,2.5vw,28px);
  line-height:1.1; margin:9px 0 9px; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.s-n{font-size:14px; color:var(--ink-2); line-height:1.45}

/* ---- live floor readout (Dexscreener) ---- */
.tele{margin-top:clamp(28px,3.4vw,44px)}
.tele-h{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-bottom:12px; margin-bottom:clamp(16px,2vw,22px);
  border-bottom:2.5px solid var(--ink);
}
.tele-t{
  font-family:var(--mono); font-weight:700; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2);
}
.tele-h b{
  margin-left:auto; font:700 10.5px/1 var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
  border:1.5px solid var(--ink-3); padding:5px 9px;
}
.tele-dot{
  width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  background:var(--ink-3); border:1.5px solid var(--ink);
}
.tele.live .tele-dot{background:var(--coral); animation:rec 1.9s steps(1,end) infinite}
.tele.live .tele-h b{color:var(--coral-d); border-color:var(--coral-d)}
.tele.warming .tele-dot{background:var(--blue)}
.tele.warming .tele-h b{color:var(--ink-2); border-color:var(--ink-2)}
.tele.err .tele-dot{background:var(--paper-2)}

.tele-g{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.tele-c{padding:18px 18px 20px}
.t-k{
  font-family:var(--mono); font-weight:700; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
.t-v{
  font-family:var(--mono); font-weight:700; font-size:clamp(21px,2.5vw,27px);
  line-height:1.1; margin-top:9px; font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere; transition:color .25s var(--ease);
}
.t-v.up{color:var(--coral-d)}
.t-v.down{color:#3F6E8C}
.t-v.dim{color:var(--ink-3)}
.tele-n{margin-top:14px; font-size:14px; line-height:1.5; color:var(--ink-2); max-width:60ch}

/* ==========================================================================
   ENTRY — four steps
   ========================================================================== */
.how .card{display:flex; flex-direction:column; padding-top:30px}
.how .n{
  position:absolute; top:-17px; left:18px;
  width:38px; height:38px; display:grid; place-items:center;
  background:var(--coral); border:var(--edge); box-shadow:3px 3px 0 var(--ink);
  font:700 19px/1 var(--mono);
}
.how h3{font-family:var(--disp); font-weight:700; font-size:21px; line-height:1.12; margin-bottom:9px}
.how p{font-size:14.8px; line-height:1.5; color:var(--ink-2)}
.how .icon{display:flex; gap:10px; margin-top:auto; padding-top:16px}
.how .icon img{width:22px; height:22px; opacity:.85}

/* ==========================================================================
   SCHEDULE — duty log
   ========================================================================== */
.track{
  position:relative; display:grid; gap:clamp(16px,2vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
}
.track li{
  position:relative; background:#FFF6DF; border:var(--edge); box-shadow:var(--pop);
  padding:34px 20px 22px;
}
.track li::before{
  content:''; position:absolute; top:-2.5px; left:-2.5px; right:-2.5px; height:9px;
  background:var(--sage-d);
}
.track li.done::before{background:var(--ink)}
.track li.now::before{background:var(--coral)}
.track li b{
  position:absolute; top:17px; left:20px;
  font:700 10.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
.track li.now b{color:var(--coral-d)}
.track li h3{font-family:var(--disp); font-weight:700; font-size:22px; margin:14px 0 9px}
.track li p{font-size:14.6px; line-height:1.5; color:var(--ink-2)}
.track li.done h3::after{content:' ✓'; color:var(--ink-3); font-size:16px}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta-sec{background:var(--blue); text-align:center}
.cta-in{display:flex; flex-direction:column; align-items:center}
.cta-sec h2{
  font-family:var(--disp); font-weight:700; line-height:1;
  font-size:clamp(32px,6vw,64px); letter-spacing:-.015em; max-width:16ch;
}
.cta-sec p{margin-top:16px; font-family:var(--disp); font-style:italic; font-size:clamp(17px,2vw,21px)}
.cta-sec .cta{justify-content:center}

/* ---- Form 27-B: the report that cannot be filed ----
   NB not `.report` -- that class is the incident section's two-column grid. */
.rep{margin-top:34px; width:100%; max-width:520px}
.rep-open{
  font-family:var(--mono); font-weight:700; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
  border-bottom:2px dashed var(--ink-2); padding:0 2px 3px;
  transition:color .16s var(--ease), border-color .16s var(--ease);
}
.rep-open:hover{color:var(--ink); border-color:var(--coral-d)}
.rep-form{
  margin-top:18px; background:var(--paper); border:var(--edge); box-shadow:var(--pop);
  padding:20px 20px 22px; text-align:left; animation:formIn .34s var(--ease) both;
}
@keyframes formIn{from{opacity:0; transform:translateY(-8px)}}
.rf-h{
  font:700 11px/1.4 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:11px; margin-bottom:13px;
  border-bottom:2.5px solid var(--ink);
}
.rf-b{font-size:15.5px !important; line-height:1.5; margin:0 0 16px !important;
      font-family:var(--body) !important; font-style:normal !important; min-height:3em}
.rf-stamp{
  display:table; font-family:var(--disp) !important; font-weight:700;
  font-size:19px !important; line-height:1 !important; text-transform:uppercase;
  color:var(--coral-d); border:3px solid var(--coral-d); padding:6px 12px;
  transform:rotate(-3deg); margin:0 0 16px !important; font-style:normal !important;
}
.rf-t{
  margin:16px 0 0 !important; padding-top:13px; border-top:1.5px dashed rgba(36,28,18,.4);
  font:700 11px/1.5 var(--mono) !important; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); font-style:normal !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--ink); color:var(--paper); border-top:var(--edge); padding-top:clamp(40px,5vw,60px)}
.foot-in{
  display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; align-items:flex-start;
  padding-bottom:30px; border-bottom:1.5px dashed rgba(247,231,192,.28);
}
.foot-brand{font-family:var(--mono); font-weight:700; font-size:26px; letter-spacing:.1em}
.foot-a p{font-size:14px; color:#C8B993; margin-top:6px}
.foot-log{color:var(--blue) !important; font-size:11px !important; margin-top:12px !important}
.foot-b{display:flex; flex-wrap:wrap; gap:9px}
.foot-b a{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
  border:1.5px solid rgba(247,231,192,.34);
  font:700 12px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  transition:background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.foot-b a img{width:18px; height:18px; filter:brightness(0) invert(1); opacity:.85}
.foot-b a:hover{background:rgba(247,231,192,.12); border-color:var(--paper); transform:translateY(-2px)}
.disc{padding:26px 0 40px}
.disc p{font-size:13px; line-height:1.6; color:#B3A487; max-width:86ch}
.disc b{color:var(--paper-2)}
.disc-s{margin-top:10px !important; font-style:italic}

/* ==========================================================================
   TOAST / GRAIN / OVERLAYS
   ========================================================================== */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:9000; transform:translate(-50%,14px);
  background:var(--ink); color:var(--paper); border:2.5px solid var(--coral);
  padding:12px 20px; font:700 12.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  opacity:0; pointer-events:none; transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.toast.show{opacity:1; transform:translate(-50%,0)}
.grain{
  position:fixed; inset:0; z-index:8000; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}

/* ==========================================================================
   SCROLL REVEALS
   ========================================================================== */
.rv{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.07s} .rv-d2{transition-delay:.14s} .rv-d3{transition-delay:.21s}
.rv-d4{transition-delay:.28s} .rv-d5{transition-delay:.35s} .rv-d6{transition-delay:.42s}
.rv-d7{transition-delay:.49s}

/* hero entrance */
.hz{opacity:0; transform:translateY(16px)}
html.ready .hz{animation:heroIn .72s var(--ease) both}
html.ready .hz:nth-child(1){animation-delay:.05s}
html.ready .hz:nth-child(2){animation-delay:.12s}
html.ready .hz:nth-child(3){animation-delay:.19s}
html.ready .hz:nth-child(4){animation-delay:.26s}
html.ready .hz:nth-child(5){animation-delay:.33s}
html.ready .hz:nth-child(6){animation-delay:.40s}
html.ready .hz:nth-child(7){animation-delay:.47s}
html.ready .hz:nth-child(8){animation-delay:.54s}
html.ready .hero-art{animation:artIn .9s var(--ease) both .22s}
@keyframes heroIn{to{opacity:1; transform:none}}
@keyframes artIn{from{opacity:0; transform:translateY(26px) scale(.97)} to{opacity:1; transform:none}}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width:1081px){
  /* stretch the monitor to the tracking panel so the feed is not a letterbox
     floating over a void of empty control room */
  .rig{align-items:stretch}
  .monitor{display:flex; flex-direction:column}
  .screen{aspect-ratio:auto; flex:1 1 auto; min-height:300px}
}
@media (max-width:1080px){
  .rig{grid-template-columns:1fr}
  .panel{max-width:none}
}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:34px}
  .hero-art{order:-1}
  .stage{max-width:380px}
  .report{grid-template-columns:1fr}
  .hero{padding-bottom:clamp(44px,7vw,64px)}
  .hero::before,.hero::after{display:none}
  .stage-tag{bottom:-28px}
  .floor{display:block}
}
@media (max-width:860px){
  .links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--paper);
    border-bottom:var(--edge); padding:6px var(--gut) 14px;
    box-shadow:0 18px 30px rgba(36,28,18,.22);
  }
  .links.open{display:flex}
  .links a{padding:13px 4px; font-size:14px; border-bottom:1.5px dashed rgba(36,28,18,.24)}
  .links a::after{left:4px; right:auto; width:26px; bottom:8px}
  .burger{display:grid}
  .nav-in{gap:12px}
  .depth{display:none}
}
@media (max-width:620px){
  :root{--pop:5px 5px 0 var(--ink); --pop-sm:3px 3px 0 var(--ink)}
  .nav .btn{display:none}
  .brand img{width:30px}
  .screen{aspect-ratio:1.9/1}
  .osd p{font-size:9.5px}
  .osd-b{letter-spacing:.14em}
  .monitor{padding:8px 8px 0}
  .panel{padding:16px}
  .g-v{font-size:26px}
  .steps li p{font-size:16px}
  .foot-in{flex-direction:column}
  .cta{width:100%}
  .cta .btn{flex:1 1 auto; justify-content:center}
}
@media (max-width:420px){
  .ticker{font-size:18px}
  .ca{gap:8px; padding:9px 10px}
  .ca-k{display:none}
  .ca-v{font-size:12px}   /* fits ~6 more characters of the mint before the ellipsis */
}

/* ==========================================================================
   MOTION PREFERENCES — honoured, with ?motion=force to override
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html:not(.motion-force){scroll-behavior:auto}
  html:not(.motion-force) *,
  html:not(.motion-force) *::before,
  html:not(.motion-force) *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html:not(.motion-force) .rv{opacity:1; transform:none}
  html:not(.motion-force) .hz{opacity:1; transform:none}
  html:not(.motion-force) .wall-in{animation:none}
}