/* ══════════════════════════════════════════════════════════════════════
   EMERGENCY CABINET — the shared skeleton for the emergency family.

   One cabinet, five cartridges. emergency / medical / fire / police / ses
   all load THIS file and change exactly two things:

     --hemi        the accent            (the only colour lever)
     [data-cartridge]  which game runs   (the only structural lever)

   Vignelli Unigrid: the grid is the brand, not the layout. Do not give a
   page its own skeleton — give it its accent.

   Canon: design-canon §5. The CRT identity (scanlines, pixel brackets,
   crispEdges, steps()) is deliberate and recorded in defects.md — it is
   NOT drift. Do not "fix" it.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* Ink — signal-black. The emergency family's tint. Never #000. */
  --ink:#05070A; --ink-2:#0A0E14; --ink-3:#101520;

  /* Paper — warm cream. Never #fff. */
  --paper:#ECE8D8;
  --paper-dim:#B8B4A6;
  --paper-mute:#7A776B;
  --paper-ghost:#4A4840;

  --hairline:rgba(236,232,216,.08);
  --hairline-2:rgba(236,232,216,.16);

  /* The five services. Each page raises exactly one of these to --hemi. */
  --sv-dispatch:#E83838;
  --sv-medical:#E83838;
  --sv-fire:#E88020;
  --sv-police:#3890E8;
  --sv-ses:#E8A020;

  --serif:"Playfair Display",Georgia,serif;
  --sans:"Space Grotesk",-apple-system,sans-serif;
  --mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,monospace;
  --pixel:"Press Start 2P",var(--mono);   /* the bespoke face — machine layer only */

  --wrap:1080px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:15px;line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  /* The ink is tinted per cartridge (canon §1). Ease it, so swapping the
     cart reads as the machine changing state rather than a page reload. */
  transition:background-color .55s var(--ease);
}
.content,.cab{transition:background-color .55s var(--ease)}
a{color:inherit;text-decoration:none}
::selection{background:var(--hemi);color:var(--ink)}

/* ── CRT: scanlines + grain. Canon (defects.md). ───────────────────── */
body::before{
  content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.12) 2px,rgba(0,0,0,.12) 4px);
}
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.03;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════════
   THE § NN · INSCRIPTION ──── RAIL. Canon §5.11.

   Injected by section-marker.js, never authored. The script absorbs each
   section's .eyebrow into the rail and tags the original
   .sec-marker-absorbed, which is why that must stay hidden.

   Ported verbatim from info-layout.css:66-92 — these five pages don't
   link that sheet (they'd inherit 550 lines of table/card layout this
   skeleton doesn't use), so the rail's styles have to live here. If the
   rail changes there, change it here too.
   ══════════════════════════════════════════════════════════════════ */
.sec-marker{
  display:flex;align-items:center;gap:14px;min-width:0;
  margin:0 0 clamp(26px,4vw,42px);
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--hemi);
}
.sec-marker .sec-num{opacity:.55;flex-shrink:0}
.sec-marker .sec-inscription{flex-shrink:1;min-width:0;overflow-wrap:anywhere}
.sec-marker .sec-rule{flex:1;height:1px;background:linear-gradient(90deg,currentColor,transparent);opacity:.3;min-width:40px}
.sec-marker-absorbed{display:none !important}
@media(max-width:640px){
  .sec-marker{align-items:flex-start;gap:8px 10px;letter-spacing:.16em}
  .sec-marker .sec-rule{flex-basis:100%;min-width:0}
}

/* ══ THE EYEBROW — canon §2, the most repeated pattern on the site ══ */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--hemi);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--hemi);opacity:.6}

/* ══════════════════════════════════════════════════════════════════
   THE CABINET — the hero. A machine bolted into a charter document.
   ══════════════════════════════════════════════════════════════════ */
.cab{
  position:relative;z-index:2;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:120px clamp(20px,5vw,64px) 64px;
  gap:clamp(24px,4vw,40px);
  /* REQUIRED: ::before is a 130vmax bloom centred on this box, so it spills
     ~350px each side at phone widths. body{overflow-x:hidden} would hide the
     scrollbar but the page would still be 744px wide and pannable. Clip here. */
  overflow:hidden;
}

/* The accent bloom — the one practical light in the frame (Deakins). */
.cab::before{
  content:"";position:absolute;top:42%;left:50%;
  width:130vmax;height:130vmax;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 30% 34% at 50% 46%,var(--hemi) 0%,transparent 62%);
  opacity:.13;pointer-events:none;z-index:0;
  animation:cab-breathe 9s ease-in-out infinite alternate;
}
@keyframes cab-breathe{
  0%{transform:translate(-50%,-50%) scale(1);opacity:.13}
  100%{transform:translate(-50%,-50%) scale(1.14);opacity:.08}
}

.cab-inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);display:flex;flex-direction:column;align-items:center}

/* ── The cartridge label. A real cart has a title, a system, a doctrine. ── */
.cart-label{
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  opacity:0;animation:rise .9s var(--ease) .2s forwards;
}
.cart-sys{
  font-family:var(--mono);font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--paper-mute);
}
.cart-title{
  font-family:var(--pixel);
  font-size:clamp(24px,6.4vw,62px);line-height:1;letter-spacing:.02em;
  color:var(--paper);
  text-shadow:0 0 32px color-mix(in oklab,var(--hemi) 60%,transparent),
              0 0 72px color-mix(in oklab,var(--hemi) 30%,transparent);
}
/* The doctrine line — serif, because it is the human sentence, not the machine's. */
.cart-doctrine{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(26px,4.4vw,56px);line-height:.92;letter-spacing:-.02em;
  max-width:16ch;text-wrap:balance;
}
.cart-doctrine em{font-style:italic;color:var(--hemi)}

/* ── The screen. Sharp, bracketed, seated in the cabinet. ── */
.screen{
  position:relative;width:100%;max-width:760px;margin-top:8px;
  border:1px solid var(--hairline-2);
  background:#030508;
  opacity:0;animation:rise 1s var(--ease) .45s forwards;
}
/* Pixel corner brackets — canon (defects.md). */
.screen::before,.screen::after,
.screen>.br-bl,.screen>.br-br{
  content:"";position:absolute;width:14px;height:14px;
  border-color:var(--hemi);border-style:solid;pointer-events:none;opacity:.5;z-index:4;
}
.screen::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
.screen::after{top:-1px;right:-1px;border-width:2px 2px 0 0}
.screen>.br-bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px}
.screen>.br-br{bottom:-1px;right:-1px;border-width:0 2px 2px 0}

.screen-head{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:9px 14px;border-bottom:1px solid var(--hairline);
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-mute);
}
.screen-head b{color:var(--hemi);font-weight:400}

.cart-canvas{
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  image-rendering:pixelated;shape-rendering:crispEdges;
  touch-action:none;cursor:crosshair;
}

/* HUD — the service's own vocabulary, in the machine face. */
/* Sizes itself to whatever the cartridge declares — a cart with two
   metrics gets two cells, not two and a filler. */
.screen-hud{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:1px;background:var(--hairline);border-top:1px solid var(--hairline);
}
.hud-cell{background:#030508;padding:11px 14px;text-align:center}
.hud-v{font-family:var(--pixel);font-size:13px;color:var(--hemi);line-height:1.4}
.hud-k{font-family:var(--mono);font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-ghost);margin-top:6px}

/* The fail banner — the service's real failure mode, named. */
.screen-fail{
  position:absolute;inset:0;z-index:5;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(3,5,8,.9);text-align:center;padding:24px;
}
.screen.failed .screen-fail{display:flex}
.fail-t{font-family:var(--pixel);font-size:clamp(11px,2.2vw,17px);color:var(--hemi);line-height:1.5}
.fail-w{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--paper-dim);max-width:42ch;line-height:1.7}

/* The controls line — punctuation is typography (canon §5.17). */
.cart-keys{
  margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper-ghost);text-align:center;
  opacity:0;animation:rise .9s var(--ease) .7s forwards;
}
.cart-keys kbd{
  font-family:var(--mono);border:1px solid var(--hairline-2);
  padding:2px 6px;margin:0 2px;border-radius:2px;color:var(--paper-dim);
}

@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════════════════════════════════════════════════════
   THE RACK — cartridge switcher. This is the Rosetta argument, made
   physical: five carts, one slot. Replaces the old .service-bar.
   ══════════════════════════════════════════════════════════════════ */
.rack{
  position:relative;z-index:3;
  background:rgba(5,7,10,.96);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  padding:0 clamp(16px,4vw,48px);
}
.rack-inner{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--hairline)}
.cart{
  background:var(--ink);padding:18px 8px 16px;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  text-align:center;transition:background .25s var(--ease),transform .25s var(--ease);
  border-top:2px solid transparent;
}
.cart:hover{background:var(--ink-2);transform:translateY(-2px)}
.cart-ico{width:22px;height:22px;shape-rendering:crispEdges;color:var(--paper-ghost);transition:color .25s var(--ease)}
.cart-n{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-mute);transition:color .25s var(--ease)}
.cart-g{font-family:var(--pixel);font-size:7px;color:var(--paper-ghost);letter-spacing:0;transition:color .25s var(--ease)}
.cart:hover .cart-ico,.cart:hover .cart-n{color:var(--paper)}
.cart[data-c="dispatch"]{--c:var(--sv-dispatch)} .cart[data-c="medical"]{--c:var(--sv-medical)}
.cart[data-c="fire"]{--c:var(--sv-fire)}         .cart[data-c="police"]{--c:var(--sv-police)}
.cart[data-c="ses"]{--c:var(--sv-ses)}
.cart:hover{border-top-color:color-mix(in oklab,var(--c) 50%,transparent)}
.cart:hover .cart-g{color:var(--c)}
.cart.on{background:var(--ink-2);border-top-color:var(--c)}
.cart.on .cart-ico,.cart.on .cart-g{color:var(--c)}
.cart.on .cart-n{color:var(--paper)}

/* ══════════════════════════════════════════════════════════════════
   THE DOCUMENT — below the cabinet, the page becomes a charter again.
   ══════════════════════════════════════════════════════════════════ */
.content{position:relative;z-index:2;background:var(--ink)}
.section,.panel{padding:clamp(60px,9vw,120px) clamp(20px,5vw,48px);max-width:var(--wrap);margin:0 auto;border-top:1px solid var(--hairline)}

/* ── The cartridge panel. Swaps with the cart; the spine below never moves. ──
   [hidden] must actually hide: nothing here may set display on .panel. */
.panel[hidden]{display:none}
.panel{animation:cart-in .5s var(--ease) both}
@keyframes cart-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sec-title{font-family:var(--serif);font-weight:900;font-size:clamp(30px,3.4vw,52px);line-height:1.02;letter-spacing:-.02em;margin:18px 0 16px;text-wrap:balance}
.sec-title em{font-style:italic;color:var(--hemi)}
/* Playfair's 900-weight zero is a near-perfect circle: "000" reads as "ooo".
   Any numeral set inside the serif display must borrow the mono figures. */
.fig{font-family:var(--mono);font-weight:500;font-size:.84em;letter-spacing:.01em;color:var(--hemi)}
.sec-lead{font-size:16px;line-height:1.7;color:var(--paper-dim);max-width:62ch;text-wrap:pretty}
.sec-lead+.sec-lead{margin-top:16px}

/* The hairline grid — cells TOUCH. 1px gap, container hairline shows through.
   Canon §5.4. A generic agent will try to turn this into gap+border cards.
   That is the single most destructive thing it can do to this site. */
.grid-2,.grid-3,.grid-4{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin-top:44px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2>*,.grid-3>*,.grid-4>*{background:var(--ink);padding:clamp(20px,3vw,30px)}

.cell-k{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--hemi);opacity:.8}
.cell-t{font-family:var(--sans);font-weight:700;font-size:17px;margin:12px 0 9px;letter-spacing:-.01em}
.cell-b{font-size:13.5px;line-height:1.68;color:var(--paper-dim);text-wrap:pretty}
.cell-m{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-ghost);margin-top:14px}

/* The decode — the Rosetta table. One utterance, four doctrines. */
.decode{margin-top:44px;border:1px solid var(--hairline)}
.decode-src{
  padding:clamp(20px,3vw,30px);border-bottom:1px solid var(--hairline);background:var(--ink-2);
}
.decode-k{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-ghost);margin-bottom:12px}
.decode-q{font-family:var(--serif);font-weight:900;font-size:clamp(20px,2.6vw,32px);line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.decode-rows{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline)}
.decode-c{background:var(--ink);padding:clamp(18px,2.6vw,26px)}
.decode-c[data-c="medical"]{--c:var(--sv-medical)} .decode-c[data-c="fire"]{--c:var(--sv-fire)}
.decode-c[data-c="police"]{--c:var(--sv-police)}   .decode-c[data-c="ses"]{--c:var(--sv-ses)}
.decode-s{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--c);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.decode-s::before{content:"";width:6px;height:6px;background:var(--c);flex:none}
.decode-l{font-size:13px;line-height:1.7;color:var(--paper-dim)}
.decode-l li{list-style:none;padding-left:16px;position:relative;margin-bottom:5px}
.decode-l li::before{content:"→";position:absolute;left:0;color:var(--paper-ghost);font-family:var(--serif)}

/* ══ Buttons — canon §6. 2px radius. Primary INVERTS on hover. ══ */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:16px 28px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  border-radius:2px;border:1px solid var(--hemi);cursor:pointer;
  transition:all .25s var(--ease);
}
.btn-primary{background:var(--hemi);color:var(--ink)}
.btn-primary:hover{background:transparent;color:var(--hemi);transform:translateY(-3px);box-shadow:0 12px 30px -12px var(--hemi)}
.btn-ghost{background:transparent;color:var(--paper-dim);border-color:var(--hairline-2)}
.btn-ghost:hover{border-color:var(--hemi);color:var(--hemi);transform:translateY(-3px)}

.cta{padding:clamp(80px,11vw,140px) clamp(20px,5vw,48px);text-align:center;border-top:1px solid var(--hairline);display:flex;flex-direction:column;align-items:center}
.cta-h{font-family:var(--serif);font-weight:900;font-size:clamp(38px,6vw,76px);line-height:.9;letter-spacing:-.025em;text-wrap:balance}
.cta-h em{font-style:italic;color:var(--hemi)}
.cta-s{font-size:16px;line-height:1.7;color:var(--paper-dim);max-width:52ch;margin:22px 0 34px;text-wrap:pretty}

.footer{padding:32px clamp(20px,5vw,48px);border-top:1px solid var(--hairline)}
.footer-inner{max-width:var(--wrap);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--paper-ghost)}
.footer-inner a:hover{color:var(--hemi)}

/* Scroll reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ══ Responsive — this site is reviewed on a phone. ══ */
@media(max-width:860px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .decode-rows{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .decode-rows{grid-template-columns:1fr}
  .rack-inner{grid-template-columns:repeat(5,1fr)}
  .cart{padding:12px 3px 11px;gap:6px}
  .cart-n{font-size:7px;letter-spacing:.04em}
  .cart-g{display:none}
  .cart-ico{width:17px;height:17px}
  /* Both halves wrap mid-phrase at this width. Stack them instead of
     dropping the fail-state label — it is what frames the cartridge. */
  .screen-head{flex-direction:column;align-items:flex-start;gap:3px}
  .hud-v{font-size:10px}
  .hud-k{font-size:7px;letter-spacing:.12em}
  .cab{padding-top:96px}
}

@media(prefers-reduced-motion:reduce){
  .cab::before{animation:none}
  .rv{opacity:1;transform:none}
  .cart-label,.screen,.cart-keys{animation:none;opacity:1}
  *{scroll-behavior:auto}
}