/* ===========================================================================
 * Aperture Glass — public site token system.
 *
 * Ported from glass/src/styles.css (the Retina Deck). One palette for every
 * surface: the operator Deck and the GitHub Pages site share the same machined
 * iron chrome, aperture-cyan live, brass clutch, and IBM Plex Mono digits.
 *
 * Deck law carries over: flat void field, no scanlines, no radial wash, no bloom
 * on the picture. Machined plates with iron hairlines. Radii 2–12px. Motion is
 * one-shot and licensed — never ambient glow. The public site is HOLD: never
 * paint fake LIVE telemetry.
 * ========================================================================= */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/instrument-sans-latin-400-normal.woff2") format("woff2"),
       url("https://cdn.jsdelivr.net/gh/ConWan30/Qoresence@main/glass/src/fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/instrument-sans-latin-500-normal.woff2") format("woff2"),
       url("https://cdn.jsdelivr.net/gh/ConWan30/Qoresence@main/glass/src/fonts/instrument-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/instrument-sans-latin-600-normal.woff2") format("woff2"),
       url("https://cdn.jsdelivr.net/gh/ConWan30/Qoresence@main/glass/src/fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"),
       url("https://cdn.jsdelivr.net/gh/ConWan30/Qoresence@main/glass/src/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"),
       url("https://cdn.jsdelivr.net/gh/ConWan30/Qoresence@main/glass/src/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

:root {
  /* Surfaces — void well, machined plates. */
  --bg: #05060a;          /* void */
  --surface: #0b0d14;     /* well */
  --subtle: #12151e;      /* plate */
  --plate-2: #161924;     /* raised plate */

  /* Ink — star / iron. */
  --fg: #e8eaf2;          /* star */
  --muted: #8b90a0;       /* iron */
  --dim: #5b6070;         /* iron dim */

  /* Aperture — live / sync / iris. */
  --live: #9be7ff;        /* aperture */
  --sync: #9be7ff;        /* iris */
  --primary: #9be7ff;
  --primary-fg: #05060a;

  /* Clutch path tints — brass fast, aperture confirm. */
  --fast: #d7b36a;        /* brass — path=fast */
  --confirm: #9be7ff;     /* aperture — path=confirm */
  --veto: #e07a7a;        /* alert / stall */

  /* Iron hairlines. */
  --line: color-mix(in oklab, #8b90a0 22%, transparent);
  --line-hi: color-mix(in oklab, #9be7ff 32%, transparent);
  --line-brass: color-mix(in oklab, #d7b36a 38%, transparent);
  --line-veto: color-mix(in oklab, #e07a7a 34%, transparent);

  /* Machined shadows — hairline borders, never picture bloom. */
  --shadow-border: 0 0 0 1px var(--line);
  --shadow-border-hover: 0 0 0 1px var(--line-hi);
  --shadow-live: 0 0 12px color-mix(in oklab, #9be7ff 22%, transparent);
  --shadow-sync: 0 0 10px color-mix(in oklab, #9be7ff 14%, transparent);

  /* Radii — machined, not broadcast pills. */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;

  /* Motion — deck ease, one-shot. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-micro: 80ms;
  --motion-quick: 150ms;
  --motion-fast: 250ms;
  --motion-slow: 400ms;

  --max: 1408px; /* deck max-w-[88rem] */
  --rail: 21rem;
  --font-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------------------
 * Base. Flat void field — no scanlines, no radial wash.
 * ------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { max-width: 100%; }
body {
  color: var(--fg);
  background: var(--bg);
  font-family: var(--font-sans);
  line-height: 1.55;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
p { text-wrap: pretty; }
code { font-family: var(--font-mono); font-size: 0.86em; color: var(--live); }
.wrap { width: min(var(--max), calc(100% - 40px)); max-width: 100%; min-width: 0; margin: 0 auto; }
.skip {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 80;
  padding: 8px 12px;
  background: var(--primary);
  color: var(--primary-fg);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------------------
 * Command bar — holo-header from Retina Deck.
 * ------------------------------------------------------------------------- */
.site-header,
.doc-header,
.holo-header {
  position: sticky;
  top: 0;
  z-index: 50;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 84%, var(--bg));
  backdrop-filter: blur(10px);
}
.command {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 20px 8px;
  max-width: none;
  width: 100%;
  margin: 0;
}
.command-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}
.nav {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.wordmark,
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fg);
  flex-shrink: 0;
}
.holo-mark {
  display: block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  object-fit: contain;
  background: transparent;
}
.mark,
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  object-fit: cover;
  display: block;
  box-shadow: var(--shadow-border);
}
.wordmark b,
.brand b {
  display: block;
  font: 800 18px/1 var(--font-display);
  letter-spacing: -0.03em;
}
.wordmark small,
.brand small {
  display: block;
  margin-top: 4px;
  color: var(--dim);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.brand { font: 800 18px/1 var(--font-display); letter-spacing: -0.03em; text-transform: none; }

.pgm-chip {
  display: none;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.bcast-clock {
  display: none;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
}
@media (min-width: 1280px) {
  .glass-nav, .nav-links { flex-wrap: nowrap; }
}
@media (min-width: 1600px) {
  .pgm-chip, .bcast-clock { display: inline; }
}

/* Tally lamp — AIR aperture, STANDBY iron, STALL veto. Public site = STANDBY. */
.holo-tally {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.holo-tally-lamp {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.holo-tally-air {
  color: var(--live);
  background: color-mix(in oklab, var(--live) 12%, transparent);
}
.holo-tally-standby {
  color: var(--muted);
  background: color-mix(in oklab, var(--muted) 8%, transparent);
}
.holo-tally-stall {
  color: var(--veto);
  background: color-mix(in oklab, var(--veto) 10%, transparent);
}
.holo-tally-hold {
  color: var(--muted);
  background: color-mix(in oklab, var(--muted) 8%, transparent);
}

.site-hold {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding: 2px 0 0;
  color: var(--dim);
  font: 500 10px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-hold .board-why {
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* Glass-nav — wrap tray, never a scroll strip. */
.glass-nav,
.nav-links {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  gap: 2px;
  overflow-x: hidden;
  padding: 3px;
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--subtle) 72%, transparent);
  box-shadow: var(--shadow-border);
}
.glass-nav a,
.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--motion-quick) var(--ease-out),
              background var(--motion-quick) var(--ease-out),
              box-shadow var(--motion-quick) var(--ease-out);
}
.glass-nav a:hover,
.nav-links a:hover { color: var(--fg); background: color-mix(in oklab, var(--primary) 10%, transparent); }
.glass-nav a:active,
.nav-links a:active { transform: translateY(1px); }
.glass-nav a.is-active,
.glass-nav a[aria-current="page"],
.nav-links a.is-active,
.nav-links a[aria-current="page"] {
  color: var(--primary-fg);
  background: var(--primary);
}
.glass-nav a.is-active:hover,
.nav-links a.is-active:hover {
  color: var(--primary-fg);
  background: color-mix(in oklab, var(--primary) 92%, #fff);
}
.nav-cta,
.glass-nav .back,
.nav-links .back {
  color: var(--live) !important;
  background: transparent !important;
  box-shadow: 0 0 0 1px var(--line-hi);
}

/* Stream keys — flat plate, iron hairline. Live = aperture fill. */
.mode-bar { display: flex; flex-wrap: nowrap; gap: 4px; margin-left: auto; flex-shrink: 0; }
.stream-key,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--subtle);
  color: var(--muted);
  font: 800 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow-border);
  cursor: pointer;
  transition: color var(--motion-quick) var(--ease-out),
              background var(--motion-quick) var(--ease-out),
              box-shadow var(--motion-quick) var(--ease-out);
}
.stream-key span { font-size: 9px; opacity: 0.5; letter-spacing: 0.08em; }
.stream-key:hover,
.button:hover {
  color: var(--fg);
  background: color-mix(in oklab, var(--primary) 10%, var(--subtle));
  box-shadow: var(--shadow-border-hover);
}
.stream-key:active,
.button:active { transform: translateY(1px); }
.stream-key-live,
.button.primary {
  background: var(--primary);
  color: var(--primary-fg);
  border-color: transparent;
}
.stream-key-live:hover,
.button.primary:hover {
  background: color-mix(in oklab, var(--primary) 92%, #fff);
  color: var(--primary-fg);
}
.stream-key-clip {
  color: var(--live);
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
  background: var(--subtle);
}
.stream-key-clip:hover {
  color: var(--live);
  background: color-mix(in oklab, var(--primary) 12%, var(--subtle));
}
.menu-toggle {
  display: none;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.command-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.lockbug {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}
.status-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--dim);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.status-meta em { color: var(--muted); font-style: normal; }

.progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--live), var(--sync));
  box-shadow: 0 0 8px color-mix(in oklab, var(--live) 40%, transparent);
}

/* ---------------------------------------------------------------------------
 * Kicker — aperture dot + mono label.
 * ------------------------------------------------------------------------- */
.kicker,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--live);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.kicker i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--live) 14%, transparent);
}

/* ---------------------------------------------------------------------------
 * Mast + theater stage. Public site is HOLD — HUD never claims LIVE.
 * ------------------------------------------------------------------------- */
.mast {
  padding: clamp(36px, 5vw, 56px) 0 28px;
  min-width: 0;
  max-width: 100%;
}
.mast h1 {
  margin: 16px 0 18px;
  width: 100%;
  max-width: 100%;
  font: 600 clamp(2.4rem, 6vw, 5.4rem)/0.92 var(--font-display);
  letter-spacing: -0.04em;
  text-wrap: wrap;
  overflow-wrap: break-word;
}
.mast h1 em,
.hero h1 em { font-style: normal; color: var(--live); }
.mast h1 em { display: block; max-width: 100%; }
.lede { max-width: min(40rem, 100%); color: var(--muted); font-size: 1.06rem; }
.hero-note { margin-top: 16px; max-width: 100%; color: var(--dim); font: 500 12px/1.5 var(--font-mono); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--dim);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.button { min-height: 44px; padding: 0 18px; color: var(--fg); font-weight: 600; }
.mode-bar .stream-key { min-width: 0; min-height: 34px; padding: 0 10px; white-space: nowrap; }

.hero {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding: clamp(56px, 8vw, 104px) 0 72px;
}
.hero h1 {
  margin: 18px 0 20px;
  font: 600 clamp(2.8rem, 6.4vw, 5.8rem)/0.92 var(--font-display);
  letter-spacing: -0.04em;
}
.hero--single {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0;
  padding-top: clamp(36px, 5vw, 56px);
  padding-bottom: 36px;
}
.hero--single h1 { margin: 16px 0 18px; max-width: 100%; text-wrap: wrap; overflow-wrap: break-word; }
.hero--single .lede { margin-top: 0; }
.hero--single .hero-strip { margin-top: 22px; }

.theater { padding: 48px 0 64px; border-top: 1px solid var(--line); }
.theater-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  gap: 16px;
  align-items: stretch;
}

/* HDMI bezel — machined iron frame around the void well. No tilt, no glow. */
.holo-plinth,
.demo-frame {
  position: relative;
  isolation: isolate;
  padding: 1px;
  border-radius: var(--r-xl);
  background: var(--subtle);
  box-shadow: var(--shadow-border);
  overflow: hidden;
}
.holo-plinth-well {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-radius: calc(var(--r-xl) - 1px);
}
.demo-frame video,
.demo-frame img,
.holo-plinth-well video,
.holo-plinth-well img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  background: #000;
  object-fit: contain;
}
.hdmi-picture { image-rendering: auto; transition: none !important; }

.stage-hud {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 14px;
}
.hud-top,
.hud-bot { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hud-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  color: var(--muted);
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: var(--shadow-border);
  backdrop-filter: blur(8px);
}
.hud-pill.hold { color: var(--muted); }
.hud-pill.sync { color: var(--dim); font-weight: 500; font-size: 10px; }
.hud-lockbug {
  margin-top: 6px;
  color: var(--dim);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px #05060a;
}
.pgm-label {
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  padding: 4px 8px;
  color: var(--dim);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.signal-prism {
  height: 4px;
  overflow: hidden;
  background: color-mix(in oklab, var(--sync) 8%, var(--bg));
}
.signal-prism-fill {
  height: 100%;
  width: 18%;
  background: linear-gradient(90deg, var(--dim), var(--muted));
}
.signal-prism-fill.is-hold {
  background: linear-gradient(90deg, var(--dim), var(--muted));
}

.demo-chrome {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.demo-chrome strong { color: var(--live); }
.demo-cap { margin-top: 14px; color: var(--dim); font: 500 12px/1.55 var(--font-mono); }
.demo-cap a { color: var(--live); text-decoration: none; }
.demo-cap a:hover { color: var(--fg); }

/* Intel rail — Situation + Clutch feed. */
.intel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.holo-plate {
  position: relative;
  background: var(--surface);
  box-shadow: var(--shadow-border);
  border-radius: var(--r-xl);
  padding: 16px;
}
.plate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.plate-head h2,
.plate-kicker {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.plate-meta {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.situation-line {
  font: 600 1.15rem/1.25 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--muted);
}
.situation-sub {
  margin-top: 8px;
  font: 500 10px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.heat {
  height: 4px;
  margin: 10px 0 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg);
}
.heat > i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--live);
}
.clutch-note {
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-border);
  background: color-mix(in oklab, var(--primary) 7%, var(--bg));
}
.clutch-note p {
  font: 600 0.95rem/1.2 var(--font-display);
  letter-spacing: -0.03em;
}
.clutch-note p em { color: var(--live); font-style: normal; }
.clutch-note span {
  display: block;
  margin-top: 6px;
  color: var(--dim);
  font: 500 10px/1.4 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.clutch-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  padding: 8px 4px;
  border-top: 1px solid var(--line);
}
.clutch-row:first-of-type { border-top: 0; }
.clutch-row .idx {
  color: var(--live);
  font: 600 10px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
}
.clutch-row b {
  display: block;
  font: 600 12px/1.2 var(--font-display);
  letter-spacing: -0.02em;
}
.clutch-row span {
  color: var(--muted);
  font: 500 11px/1.35 var(--font-mono);
}

/* Legacy clock-spine instrument (kept for any leftover markup). */
.instrument {
  position: relative;
  min-height: 520px;
  padding: 20px;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--surface), var(--bg));
  box-shadow: var(--shadow-border);
  overflow: hidden;
}
.inst-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.inst-top strong { color: var(--fg); }
.spine-wrap { position: relative; z-index: 1; height: 400px; margin: 18px 8px 10px; }
.spine {
  position: absolute;
  left: 50%;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--live), var(--sync));
  transform: translateX(-50%);
}
.pulse {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 10px var(--live);
  animation: fall 5.6s linear infinite;
}
.node {
  position: absolute;
  width: calc(50% - 28px);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  font: 500 11px/1.35 var(--font-mono);
}
.node b { display: block; color: var(--fg); font-size: 12px; letter-spacing: 0.04em; }
.node span { color: var(--muted); font-size: 10px; }
.node.left { right: calc(50% + 22px); text-align: right; }
.node.right { left: calc(50% + 22px); }
.n1 { top: 8% } .n2 { top: 28% } .n3 { top: 48% } .n4 { top: 68% } .n5 { top: 86% }
.dot {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--sync);
}
.d1 { top: 12% } .d2 { top: 32% } .d3 { top: 52% } .d4 { top: 72% } .d5 { top: 90% }
.inst-foot {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.inst-foot em { color: var(--live); font-style: normal; }

/* ---------------------------------------------------------------------------
 * Sections.
 * ------------------------------------------------------------------------- */
.section { padding: 72px 0; border-top: 1px solid var(--line); }
.section-intro { max-width: 42rem; color: var(--muted); margin-bottom: 28px; }
h2 {
  margin: 10px 0 0;
  font: 600 clamp(1.8rem, 4vw, 3.2rem)/0.98 var(--font-display);
  letter-spacing: -0.035em;
}
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: end;
  margin-bottom: 32px;
}
.section-head p { max-width: 24rem; color: var(--muted); }

.demo-stack { display: grid; gap: 28px; }

/* Thesis / principle — machined plates. Principle gets the aperture hairline. */
.thesis { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
.thesis-copy,
.principle {
  padding: 28px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-border);
}
.thesis-copy p + p { margin-top: 14px; color: var(--muted); }
.principle {
  box-shadow: 0 0 0 1px var(--line-hi);
  background: linear-gradient(160deg, color-mix(in oklab, var(--primary) 10%, var(--surface)), var(--bg));
}
.principle blockquote {
  font: 600 clamp(1.4rem, 2.6vw, 2.2rem)/1.08 var(--font-display);
  letter-spacing: -0.03em;
}
.principle em { color: var(--live); font-style: normal; }
.principle footer {
  margin-top: 24px;
  color: var(--dim);
  font: 500 10px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Flow — 5-up signal path. */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.flow article {
  padding: 16px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-border);
  transition: box-shadow var(--motion-quick) var(--ease-out);
}
.flow article:hover { box-shadow: var(--shadow-border-hover); }
.flow .idx { color: var(--live); font: 600 10px/1 var(--font-mono); letter-spacing: 0.14em; }
.flow h3 { margin: 14px 0 6px; font: 600 1.05rem/1.1 var(--font-display); }
.flow p { color: var(--muted); font-size: 0.84rem; }

/* Orchestration steps. */
.orch { display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 88px 1fr 120px;
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: 0; }
.step .num { color: var(--live); font: 600 13px/1 var(--font-mono); }
.step h3 { font: 600 1.1rem/1.2 var(--font-display); }
.step p { margin-top: 6px; color: var(--muted); font-size: 0.92rem; }
.step .tag { justify-self: end; color: var(--fast); font: 600 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }

/* Glasses — 6 eyepieces. */
.glasses { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.glasses-quad { grid-template-columns: repeat(4, 1fr); }
.glass {
  grid-column: span 3;
  padding: 24px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-border);
  min-height: 200px;
  transition: box-shadow var(--motion-quick) var(--ease-out), transform var(--motion-quick) var(--ease-out);
}
.glass:hover { box-shadow: var(--shadow-border-hover); transform: translateY(-1px); }
.glass:last-child { grid-column: 2 / span 4; }
.glass .idx { color: var(--live); font: 600 10px/1 var(--font-mono); letter-spacing: 0.14em; }
.glass h3 { margin: 24px 0 8px; font: 600 1.4rem/1.05 var(--font-display); }
.glass p { color: var(--muted); font-size: 0.94rem; }

/* Capabilities — 8-up. */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cap {
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-border);
  transition: box-shadow var(--motion-quick) var(--ease-out);
}
.cap:hover { box-shadow: var(--shadow-border-hover); }
.cap h3 { margin: 0 0 8px; font: 600 1.05rem/1.1 var(--font-display); }
.cap p { color: var(--muted); font-size: 0.88rem; }

/* Profiles. */
.profiles { display: grid; grid-template-columns: 1.2fr 1fr 1fr .9fr; gap: 12px; }
.profile {
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-border);
}
.profile.lead { box-shadow: 0 0 0 1px var(--line-hi); }
.profile .idx { color: var(--fast); font: 600 10px/1 var(--font-mono); letter-spacing: 0.14em; }
.profile h3 { margin: 14px 0 8px; font: 600 1.2rem/1.1 var(--font-display); }
.profile p { color: var(--muted); font-size: 0.88rem; }

/* Contrast table. */
table.contrast { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.contrast th,
table.contrast td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.contrast th { color: var(--dim); font: 600 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
table.contrast td:first-child { color: var(--live); font-weight: 600; white-space: nowrap; }
table.contrast td { color: var(--muted); }
table.contrast tbody tr:hover td { background: color-mix(in oklab, var(--live) 5%, transparent); }

/* Pilot gates. */
.gates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gate {
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-border);
}
.gate strong { display: block; color: var(--live); font: 600 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.gate span { display: block; margin-top: 10px; color: var(--muted); font-size: 0.88rem; }

/* Limits — ok = aperture hairline, no = veto hairline. */
.limits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.limit { padding: 22px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-border); }
.limit.ok { box-shadow: 0 0 0 1px var(--line-hi); background: color-mix(in oklab, var(--primary) 5%, var(--surface)); }
.limit.no { box-shadow: 0 0 0 1px var(--line-veto); background: color-mix(in oklab, var(--veto) 5%, var(--surface)); }
.limit h3 { margin-bottom: 10px; font: 600 1.1rem/1.1 var(--font-display); }
.limit ul { margin: 0 0 0 1.1rem; color: var(--muted); }
.limit li { margin: 0.35rem 0; }

/* FAQ. */
.faq details { padding: 16px 0; border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font: 600 1.02rem/1.3 var(--font-display); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--live); font-family: var(--font-mono); }
.faq details[open] summary::after { content: "\2013"; }
.faq p { margin-top: 10px; color: var(--muted); max-width: 52rem; }

/* Community. */
.community { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.community a {
  display: block;
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-border);
  text-decoration: none;
  transition: box-shadow var(--motion-quick) var(--ease-out), transform var(--motion-quick) var(--ease-out);
}
.community a:hover { box-shadow: var(--shadow-border-hover); transform: translateY(-1px); }
.community b { display: block; font: 600 1.08rem/1.1 var(--font-display); }
.community span { display: block; margin-top: 8px; color: var(--muted); font-size: 0.88rem; }

/* Download band. */
.download {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 32px;
  border-radius: var(--r-xl);
  background: linear-gradient(130deg, var(--surface), var(--bg));
  box-shadow: 0 0 0 1px var(--line-hi);
}
.download h2 { margin-top: 8px; }
.download p { max-width: 36rem; margin-top: 10px; color: var(--muted); }

/* Footer. */
.site-footer,
.footer {
  padding: 28px 0 52px;
  color: var(--dim);
  font: 500 11px/1.6 var(--font-mono);
}
.footer-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); }
.site-footer a,
.footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover,
.footer a:hover { color: var(--live); }

/* ---------------------------------------------------------------------------
 * Install page components.
 * ------------------------------------------------------------------------- */
.hero-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tag {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--dim);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.choices { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
.choice {
  padding: 24px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-border);
}
.choice.featured { box-shadow: 0 0 0 1px var(--line-hi); background: linear-gradient(160deg, color-mix(in oklab, var(--primary) 8%, var(--surface)), var(--bg)); }
.choice .label { color: var(--live); font: 600 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.choice h3 { margin: 0 0 10px; font: 600 1.3rem/1.1 var(--font-display); }
.choice p { color: var(--muted); font-size: 0.94rem; margin-bottom: 18px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.steps .step { display: block; padding: 22px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-border); }
.steps .step .number { color: var(--live); font: 600 10px/1 var(--font-mono); letter-spacing: 0.14em; }
.steps .step h3 { margin: 14px 0 8px; font: 600 1.15rem/1.1 var(--font-display); }
.steps .step p { color: var(--muted); font-size: 0.9rem; }
.code {
  position: relative;
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--fg);
  font: 500 12px/1.55 var(--font-mono);
  white-space: pre;
  overflow: auto;
  box-shadow: var(--shadow-border);
}
.code .copy {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--subtle);
  color: var(--muted);
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.code .copy:hover { color: var(--live); border-color: var(--line-hi); }
.package { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.package-panel {
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-border);
}
.package-panel h3 { margin: 0 0 12px; font: 600 1.1rem/1.1 var(--font-display); }
.package-panel ul { margin: 0 0 0 1.1rem; color: var(--muted); }
.package-panel li { margin: 0.35rem 0; }
.notice {
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 2px solid var(--fast);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: color-mix(in oklab, var(--fast) 6%, var(--surface));
  color: var(--muted);
  font-size: 0.9rem;
}
.notice strong { color: var(--fast); }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check {
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-border);
}
.check strong { display: block; color: var(--live); font: 600 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.check span { color: var(--muted); font-size: 0.88rem; }

/* ---------------------------------------------------------------------------
 * Dark essay page.
 * ------------------------------------------------------------------------- */
.doc-main { padding: 0 0 80px; }
.doc-main h1 { margin: 18px 0 16px; font: 600 clamp(2.2rem, 5.5vw, 3.4rem)/0.95 var(--font-display); }
.doc-main h1 em { color: var(--live); font-style: normal; }
.doc-main .lede { color: var(--muted); font-size: 1.06rem; }
.essay article { padding: 8px 0 64px; }
.essay h2 { margin: 34px 0 10px; font: 600 1.4rem/1.1 var(--font-display); }
.essay p { color: var(--muted); margin: 0 0 14px; }
.essay a { color: var(--live); text-decoration: none; }
.essay a:hover { color: var(--fg); }

/* ---------------------------------------------------------------------------
 * Trace viewer page.
 * ------------------------------------------------------------------------- */
.trace-main { padding: 44px 0 88px; }
.trace-main h1 { margin: 0 0 14px; font: 600 clamp(1.8rem, 4vw, 2.8rem)/0.95 var(--font-display); }
.trace-main h2 { margin: 32px 0 14px; font: 600 1.05rem/1.2 var(--font-display); color: var(--live); }
.card {
  border-radius: var(--r-xl);
  background: var(--surface);
  padding: 22px;
  box-shadow: var(--shadow-border);
}
.card + .card { margin-top: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field label { font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.field input,
.field select {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg);
  font: 500 14px var(--font-sans);
}
.field input:focus,
.field select:focus { outline: 2px solid var(--live); outline-offset: 1px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row .field { flex: 1; min-width: 220px; margin-bottom: 0; }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat {
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: var(--shadow-border);
}
.stat b { display: block; font: 600 20px/1 var(--font-display); color: var(--live); margin-bottom: 4px; }
.stat span { font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.trace-empty,
.trace-error { color: var(--dim); padding: 40px 0; text-align: center; }
.trace-error { color: var(--veto); }
.timeline {
  position: relative;
  height: 220px;
  border-radius: var(--r-md);
  background: var(--bg);
  overflow: auto;
  margin-bottom: 18px;
  box-shadow: var(--shadow-border);
}
.timeline-canvas { position: absolute; left: 0; top: 0; height: 100%; min-width: 100%; }
.span-bar {
  position: absolute;
  height: 22px;
  border-radius: var(--r-xs);
  background: color-mix(in oklab, var(--live) 22%, var(--surface));
  border: 1px solid var(--line-hi);
  font: 500 10px/22px var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
  color: var(--fg);
  cursor: pointer;
}
.span-bar:hover { background: color-mix(in oklab, var(--live) 38%, var(--surface)); z-index: 10; }
.span-bar.root { background: color-mix(in oklab, var(--live) 40%, var(--surface)); border-color: var(--live); }
.span-bar.child { background: color-mix(in oklab, var(--sync) 22%, var(--surface)); border-color: var(--sync); }
table.spans { width: 100%; border-collapse: collapse; font: 500 13px/1.5 var(--font-mono); }
table.spans th,
table.spans td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
table.spans th { font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
table.spans td { color: var(--muted); }
table.spans tr:hover td { background: color-mix(in oklab, var(--live) 6%, transparent); color: var(--fg); }
.op { font-weight: 600; color: var(--fg); }
.tag-pill {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font: 500 10px/1 var(--font-mono);
  color: var(--dim);
  margin-right: 4px;
}
.tag-pill.key { color: var(--live); border-color: var(--line-hi); }
.detail {
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--bg);
  margin-top: 8px;
  box-shadow: var(--shadow-border);
}
.detail h4 { font: 600 13px/1.2 var(--font-display); color: var(--live); margin-bottom: 10px; }
.detail pre { font: 500 12px/1.5 var(--font-mono); color: var(--muted); overflow: auto; max-height: 240px; }
.trace-main button.primary {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--primary);
  color: var(--primary-fg);
  font: 800 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Animations — one-shot, licensed. The spine pulse is the only ambient motion
 * and it is decorative iron, not a glow on content.
 * ------------------------------------------------------------------------- */
@keyframes fall { 0% { top: 6%; opacity: 0 } 8% { opacity: 1 } 92% { opacity: 1 } 100% { top: 92%; opacity: 0 } }

/* ---------------------------------------------------------------------------
 * Responsive.
 * ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .command-row { flex-wrap: wrap; }
  .theater-grid { grid-template-columns: 1fr; }
  .intel { flex-direction: row; }
  .intel > * { flex: 1; }
  .hero, .thesis, .download, .profiles { grid-template-columns: 1fr; }
  .glasses, .glasses-quad, .caps, .gates, .community, .limits, .flow, .choices, .steps, .package, .checks { grid-template-columns: 1fr 1fr; }
  .glass, .glass:last-child { grid-column: span 1; }
  .orch .step { grid-template-columns: 64px 1fr; }
  .orch .step .tag { display: none; }
  table.contrast td:first-child { white-space: normal; }
  .mode-bar { display: none; }
}
@media (max-width: 680px) {
  .wrap { width: min(var(--max), calc(100% - 28px)); }
  .glass-nav,
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    left: 14px;
    right: 14px;
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
    z-index: 60;
    background: color-mix(in oklab, var(--surface) 96%, var(--bg));
  }
  .glass-nav.open,
  .nav-links.open { display: flex; }
  .menu-toggle { display: inline-flex; margin-left: auto; }
  .mode-bar { display: none; }
  .glasses, .caps, .gates, .community, .limits, .flow, .choices, .steps, .package, .checks, .intel { grid-template-columns: 1fr; flex-direction: column; }
  .instrument { min-height: 440px; }
  .row { flex-direction: column; }
  .row .field { width: 100%; }
  .holo-tally { display: none; }
  .mast h1, .hero h1 { font-size: clamp(1.85rem, 8.4vw, 2.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
 * Hallway — public Pages composition. The Deck is the instrument.
 * This site is the door: HOLD chrome, one theater, honest blank.
 * ------------------------------------------------------------------------- */
.hallway {
  padding: clamp(28px, 4vw, 52px) 0 36px;
}
.hallway h1 {
  margin: 14px 0 12px;
  max-width: 16ch;
  font: 600 clamp(2.15rem, 6.2vw, 4.35rem)/0.94 var(--font-display);
  letter-spacing: -0.04em;
}
.hallway .lede {
  max-width: 34rem;
  font-size: 1.04rem;
}
.hallway-stage { margin-top: 28px; }
.board-speech {
  margin-top: 12px;
  color: var(--muted);
  font: 500 13px/1.45 var(--font-mono);
}
.board-speech b { color: var(--fg); font-weight: 600; }

.holo-plinth[data-shutter] { overflow: hidden; }
.holo-plinth[data-shutter] .shutter-leaf {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--bg);
  transform-origin: top center;
  transform: scaleY(1);
  transition: transform var(--motion-slow) var(--ease-out);
}
.holo-plinth[data-shutter].is-open .shutter-leaf { transform: scaleY(0); }

.contrast-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 8px;
  background: var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-border);
}
.contrast-pair article {
  background: var(--surface);
  padding: 22px 22px 24px;
}
.contrast-pair .idx {
  display: block;
  margin-bottom: 10px;
  color: var(--live);
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.contrast-pair h3 {
  margin: 0 0 8px;
  font: 600 1.12rem/1.15 var(--font-display);
}
.contrast-pair p { color: var(--muted); font-size: 0.94rem; }

.sidecar-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.sidecar {
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-border);
}
.sidecar b {
  display: block;
  margin-bottom: 6px;
  color: var(--live);
  font: 600 12px/1.2 var(--font-mono);
}
.sidecar span { color: var(--muted); font-size: 0.88rem; }

.chapters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}
.chapter {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--muted);
  font: 500 11px/1.3 var(--font-mono);
}
.chapter b { color: var(--fg); }

.checklist {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.checklist li {
  list-style: none;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-border);
  color: var(--muted);
}
.checklist b {
  display: block;
  margin-bottom: 6px;
  color: var(--fg);
  font: 600 1.02rem/1.2 var(--font-display);
}
.checklist .n {
  display: block;
  margin-bottom: 8px;
  color: var(--live);
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.split-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.split-two ul { margin: 0 0 0 1.1rem; color: var(--muted); }
.split-two li { margin: 0.4rem 0; }
.split-two h3 { margin: 0 0 10px; font: 600 1.1rem/1.15 var(--font-display); }
.split-panel {
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-border);
}

@media (max-width: 1100px) {
  .contrast-pair,
  .sidecar-row,
  .split-two { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .hallway h1 { font-size: clamp(1.9rem, 9vw, 2.5rem); max-width: none; }
  .contrast-pair,
  .sidecar-row,
  .split-two { grid-template-columns: 1fr; }
}