/* koolpops / NG+ house system. Dark-first: dark values on bare :root, the day (light) variant
   under prefers-color-scheme: light and under [data-theme="light"].
   Sources: platform packages/koolpops/editorial.css (base), ngplus/ngplus.css (NG+ accents),
   portal.css + hub.css (nav, wrap, eyebrow, sec-label), org/brand.mjs koolpops variants.day (light).
   Every colour on the site comes from here. */
:root {
  /* editorial base */
  --vf-bg: #080808;
  --vf-bg-elevated: #101010;
  --vf-surface-card: #161616;
  --vf-ink: #f5f3ec;
  --vf-ink-2: #a8a59c;
  --vf-ink-3: #8a877d;
  --vf-line: rgba(255,255,255,.08);
  --vf-line-strong: #333333;
  --vf-radius: 14px;
  --vf-green: #34d399;
  --vf-amber: #fbbf24;
  --vf-red: #f87171;

  /* NG+ override: pink primary, aqua highlight, indigo secondary */
  --ng-pink: #ff3d8b;
  --ng-aqua: #00e7d0;
  --ng-indigo: #9b8cff;
  --ng-pass: #5bd18f;
  --ng-amber: #fbbf24;
  --vf-gold: var(--ng-pink);
  --vf-gold-bright: var(--ng-aqua);
  --vf-coral: var(--ng-indigo);
  --vf-line-gold: rgba(255,61,139,.30);

  /* surfaces derived from the house rgba washes */
  --nav-bg: rgba(8,8,8,.82);
  --dot-glow: rgba(255,61,139,.5);
  --tint: rgba(255,255,255,.025);
  --tint-indigo: rgba(155,140,255,.06);

  /* evidence states: none = red ramp, uncontrolled = amber, registered = indigo, controlled = green */
  --eg-none: #ff7a7a;
  --eg-uncontrolled: var(--ng-amber);
  --eg-registered: var(--ng-indigo);
  --eg-controlled: var(--ng-pass);

  /* 80s layer: neon numerals and card depth (day values below) */
  --num-ink: #ffffff;
  --num-glow: 0 0 5px #fff, 0 0 15px #ff3d8b, 0 0 30px #ff3d8b;
  --num-glow-alt: 0 0 5px #fff, 0 0 15px #00e7d0, 0 0 30px #00e7d0;
  --card-shadow: 0 8px 28px rgba(0,0,0,.4);
  --card-shadow-hover: 0 0 26px rgba(255,61,139,.28), 0 14px 38px rgba(0,0,0,.5);
  --hud-bg: linear-gradient(180deg, rgba(155,140,255,.07), rgba(0,231,208,.03));
  --glow-link: var(--ng-aqua);
  --glow-link-shadow: 0 0 6px rgba(255,61,139,.5), 0 0 16px rgba(255,61,139,.5), 0 0 28px rgba(0,231,208,.3);
  --hud-glow: 0 0 26px rgba(255,61,139,.10), inset 0 1px 0 rgba(255,255,255,.04);
  --neon-gold: #ffd877;
  --neon-gold-2: #ffb347;
  --rule-border: rgba(255,61,139,.34);
  --rule-bg: linear-gradient(180deg, rgba(255,61,139,.06), rgba(0,231,208,.03));
  --rule-bar-glow: 0 0 12px rgba(255,61,139,.6);

  /* atlas idioms (pills, option cards, tables): ink on a filled accent, aqua as text, row zebra */
  --pill-on: #080808;
  --aqua-ink: var(--ng-aqua);
  --zebra: rgba(255,255,255,.02);

  /* CRT readout: an object like the hero, so these are NOT redefined for day (see .crt below). */
  --crt-bezel: linear-gradient(150deg, #2a2d36, #171922 60%, #0e1016);
  --crt-bezel-edge: rgba(0,0,0,.6);
  --crt-bezel-shadow: inset 0 2px 0 rgba(255,255,255,.07), inset 0 -3px 8px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.05), 0 26px 60px -26px rgba(0,0,0,.85);
  --crt-tube: radial-gradient(120% 120% at 50% 42%, rgba(40,60,150,.16), rgba(8,10,26,.55) 78%);
  --crt-tube-shadow: inset 0 0 40px rgba(0,0,0,.7), inset 0 0 90px rgba(20,40,120,.18);
  --crt-ink: #cfe3ff;
  --crt-face: linear-gradient(180deg, rgba(30,38,90,.45), rgba(16,20,50,.5));
  --crt-face-shadow: inset 0 0 34px rgba(40,60,150,.2), inset 0 0 70px rgba(0,0,0,.45);
  --crt-ink-line: #dbe7ff;
  --crt-ink-dim: #9fb0e6;
  --crt-phosphor: #9af5e6;
  --crt-phosphor-glow: 0 0 9px rgba(0,231,208,.45);
  --crt-scanlines: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.16) 3px, rgba(0,0,0,0) 4px);
  --crt-glare: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 38%);
  --crt-glare-edge: inset 0 0 0 1px rgba(150,180,255,.12);
  --crt-base: linear-gradient(180deg, #23262f, #13151c);
  --crt-base-edge: rgba(0,0,0,.55);
  --crt-base-shadow: 0 14px 24px -14px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
  --crt-led: #39e08a;
  --crt-led-glow: 0 0 8px rgba(57,224,138,.85), 0 0 2px #fff;

  --vf-display: 'Space Grotesk', var(--vf-sans);
  --vf-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --vf-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --vf-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: max(24px, env(safe-area-inset-left, 0px));
  --gutter-r: max(24px, env(safe-area-inset-right, 0px));

  color-scheme: dark;
}

/* Day: NG+ has no day palette of its own; the koolpops day values stand in, pink deepened for cream. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --vf-bg: #f7f5ee;
    --vf-bg-elevated: #ffffff;
    --vf-surface-card: #ffffff;
    --vf-ink: #161616;
    --vf-ink-2: #3f3d36;
    --vf-ink-3: #5b594f;
    --vf-line: rgba(22,22,22,.12);
    --vf-line-strong: #8f8c82;
    --ng-pink: #d6005f;
    --ng-aqua: #00a596;
    --ng-indigo: #5b4bd6;
    --ng-pass: #1f7a4a;
    --ng-amber: #8a5a00;
    --vf-line-gold: rgba(214,0,95,.28);
    --nav-bg: rgba(247,245,238,.86);
    --dot-glow: rgba(214,0,95,.35);
    --tint: rgba(22,22,22,.025);
    --tint-indigo: rgba(91,75,214,.06);
    --eg-none: #b42318;
    --num-ink: #d6005f;
    --num-glow: 0 0 10px rgba(214,0,95,.25);
    --num-glow-alt: 0 0 10px rgba(0,165,150,.25);
    --card-shadow: 0 6px 18px rgba(22,22,22,.07);
    --card-shadow-hover: 0 0 18px rgba(214,0,95,.18), 0 10px 24px rgba(22,22,22,.10);
    --hud-bg: linear-gradient(180deg, rgba(91,75,214,.05), rgba(0,165,150,.03));
    --glow-link: #00756b;
    --glow-link-shadow: 0 0 8px rgba(214,0,95,.25);
    --hud-glow: 0 0 22px rgba(214,0,95,.08), inset 0 1px 0 rgba(255,255,255,.6);
    --neon-gold: #b7791f;
    --neon-gold-2: #f0a830;
    --rule-border: rgba(214,0,95,.28);
    --rule-bg: linear-gradient(180deg, rgba(214,0,95,.04), rgba(0,165,150,.03));
    --rule-bar-glow: 0 0 10px rgba(214,0,95,.35);
    --pill-on: #ffffff;
    --aqua-ink: #00756b;
    --zebra: rgba(22,22,22,.025);
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --vf-bg: #f7f5ee;
  --vf-bg-elevated: #ffffff;
  --vf-surface-card: #ffffff;
  --vf-ink: #161616;
  --vf-ink-2: #3f3d36;
  --vf-ink-3: #5b594f;
  --vf-line: rgba(22,22,22,.12);
  --vf-line-strong: #8f8c82;
  --ng-pink: #d6005f;
  --ng-aqua: #00a596;
  --ng-indigo: #5b4bd6;
  --ng-pass: #1f7a4a;
  --ng-amber: #8a5a00;
  --vf-line-gold: rgba(214,0,95,.28);
  --nav-bg: rgba(247,245,238,.86);
  --dot-glow: rgba(214,0,95,.35);
  --tint: rgba(22,22,22,.025);
  --tint-indigo: rgba(91,75,214,.06);
  --eg-none: #b42318;
  --num-ink: #d6005f;
  --num-glow: 0 0 10px rgba(214,0,95,.25);
  --num-glow-alt: 0 0 10px rgba(0,165,150,.25);
  --card-shadow: 0 6px 18px rgba(22,22,22,.07);
  --card-shadow-hover: 0 0 18px rgba(214,0,95,.18), 0 10px 24px rgba(22,22,22,.10);
  --hud-bg: linear-gradient(180deg, rgba(91,75,214,.05), rgba(0,165,150,.03));
  --glow-link: #00756b;
  --glow-link-shadow: 0 0 8px rgba(214,0,95,.25);
  --hud-glow: 0 0 22px rgba(214,0,95,.08), inset 0 1px 0 rgba(255,255,255,.6);
  --neon-gold: #b7791f;
  --neon-gold-2: #f0a830;
  --rule-border: rgba(214,0,95,.28);
  --rule-bg: linear-gradient(180deg, rgba(214,0,95,.04), rgba(0,165,150,.03));
  --rule-bar-glow: 0 0 10px rgba(214,0,95,.35);
  --pill-on: #ffffff;
  --aqua-ink: #00756b;
  --zebra: rgba(22,22,22,.025);
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--vf-bg);
  color: var(--vf-ink-2);
  font-family: var(--vf-sans);
  font-size: 17px;
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  /* the full-bleed hero is 100vw wide; clip (not hidden) keeps the sticky nav working */
  overflow-x: hidden;
  overflow-x: clip;
}

a { color: var(--vf-gold); text-decoration: underline; text-decoration-color: var(--vf-line-gold); text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--ng-pink);
  outline-offset: 3px;
}

/* Nav: sticky, blurred, pink dot, mono wordmark, status pill, crumbs as pills. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vf-line);
}
.nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px var(--gutter-r) 16px var(--gutter);
}
.nav-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ng-pink);
  box-shadow: 0 0 18px var(--dot-glow);
  flex-shrink: 0;
}
.nav-name {
  font-family: var(--vf-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vf-ink);
  text-decoration: none;
}
.nav-name:hover { color: var(--vf-gold); }
.nav-tag {
  font-family: var(--vf-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vf-gold);
  border: 1px solid var(--vf-line-gold);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.nav-crumbs { margin-left: auto; }
.nav-crumbs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--vf-mono);
  font-size: 11px;
  letter-spacing: .04em;
}
.nav-crumbs a {
  display: inline-block;
  color: var(--vf-ink-3);
  border: 1px solid var(--vf-line);
  border-radius: 20px;
  padding: 6px 10px;
  text-decoration: none;
  transition: color .12s, border-color .12s;
}
.nav-crumbs a:hover { color: var(--vf-gold); border-color: var(--vf-line-gold); }
.nav-crumbs a[aria-current="page"] { color: var(--vf-gold); border-color: var(--vf-gold); }

/* Page column */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px var(--gutter-r) 40px var(--gutter);
}

.site-footer {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter-r) 110px var(--gutter);
}
.footnote {
  padding-top: 1.2rem;
  border-top: 1px solid var(--vf-line);
  font-family: var(--vf-mono);
  font-size: 11px;
  letter-spacing: .03em;
  line-height: 1.7;
  color: var(--vf-ink-3);
}
.footnote p { margin: 0 0 4px; }

/* Type: serif headings and leads, sans body, mono labels. */
h1, h2, h3 {
  font-family: var(--vf-serif);
  font-weight: 700;
  color: var(--vf-ink);
  line-height: 1.14;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(40px, 7vw, 78px); line-height: 1.08; margin: 0 0 24px; max-width: 22ch; }
h2 { font-size: clamp(24px, 3.4vw, 34px); margin: 40px 0 12px; }
h3 { font-size: 18px; margin: 28px 0 8px; }
p, ul, ol { margin: 0 0 16px; }
strong { color: var(--vf-ink); }

.eyebrow {
  display: block;
  margin: 0 0 14px;
  font-family: var(--vf-mono);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--vf-gold);
}

/* The home hero: the position sentence, then the lead it rests on. */
.position { max-width: 22ch; margin-bottom: 16px; }
.oneliner {
  font-family: var(--vf-serif);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
  line-height: 1.3;
  color: var(--vf-ink);
  border-left: 3px solid var(--ng-pink);
  padding: .2rem 0 .2rem 1.2rem;
  margin: 1.4rem 0 0;
  max-width: 36ch;
}

/* Sections: a mono label with a hairline, then the running text. */
.sec { margin-top: 52px; }
.sec-label {
  font-family: var(--vf-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vf-gold);
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--vf-line);
}
.main { max-width: 68ch; }
.main-wide { max-width: none; }

/* Short ledger (home): the house facts table. */
table.facts {
  width: 100%;
  border-collapse: collapse;
  margin: 1.1rem 0;
  font-size: .95rem;
}
table.facts td,
table.facts th {
  border: 1px solid var(--vf-line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
}
table.facts th {
  font-family: var(--vf-mono);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
}
.ledger td.name { font-weight: 700; color: var(--vf-ink); }
.ledger .state { width: 2.5em; text-align: center; white-space: nowrap; font-size: 1.1rem; }
.ledger .au { color: var(--vf-ink-3); }
.ledger .more { font-family: var(--vf-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

/* Glyph colour by state. */
[data-state="none"] { color: var(--eg-none); }
[data-state="uncontrolled"] { color: var(--eg-uncontrolled); }
[data-state="registered"] { color: var(--eg-registered); }
[data-state="controlled"] { color: var(--eg-controlled); }

/* Evidence-grade chips: line style, the state carried by colour and words, never by fill alone. */
.eg {
  display: inline-block;
  font-family: var(--vf-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .16rem .6rem;
  background: transparent;
}

/* Phones: the Australian status lives on the evidence page; the row reads glyph, name, evidence, details. */
@media (max-width: 599px) {
  .ledger .col-au { display: none; }
  table.facts td, table.facts th { padding: 8px; }
}

/* Full ledger (/evidence/): one option card per compound (atlas layer below). */
.ledger-full summary {
  cursor: pointer;
  font-family: var(--vf-serif);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--vf-ink);
}
.ledger-full summary::marker { color: var(--vf-gold); }
.ledger-full summary .name { font-weight: 700; margin-right: .4em; }
.ledger-full summary .state { vertical-align: middle; }
.ledger-full dl.facts {
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: 12px 20px;
}
.ledger-full dl.facts dt {
  font-family: var(--vf-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vf-gold);
  padding-top: .3em;
}
.ledger-full dl.facts dd { margin: 0; max-width: 68ch; }
.ledger-full .registered { padding-left: 1.2em; margin: 0; }
.ledger-full .reg-id { font-family: var(--vf-mono); font-size: .88em; color: var(--vf-ink); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Disclosure: the not-recruiting status and the privacy line. */
.disclosure {
  border-left: 3px solid var(--ng-indigo);
  background: var(--tint-indigo);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 0 0 20px;
}
.disclosure p { margin: 0 0 8px; }
.disclosure p:last-child { margin-bottom: 0; }
.status { font-weight: 700; color: var(--vf-ink); }

/* Pathway: the only numbered list on the site, because the steps are a sequence. */
.steps { padding-left: 2.2em; }
.steps li { margin-bottom: 10px; }
.steps li::marker { font-family: var(--vf-mono); font-size: .85em; color: var(--vf-gold); }

/* Interest form (disabled until there is somewhere to keep what is sent). */
.interest fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.interest label {
  display: block;
  font-family: var(--vf-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  margin-bottom: 6px;
}
.interest input[type="text"],
.interest input[type="email"],
.interest select {
  width: 100%;
  max-width: 32em;
  font: inherit;
  padding: 10px 12px;
  color: var(--vf-ink);
  background: var(--vf-surface-card);
  border: 1px solid var(--vf-ink-3);
  border-radius: 10px;
}
.interest .check { display: flex; gap: 10px; align-items: flex-start; }
.interest .check label {
  display: inline;
  font-family: var(--vf-sans);
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vf-ink-2);
  margin: 0;
}
.interest .check input { margin-top: .35em; }
.interest input[type="checkbox"] { accent-color: var(--ng-pink); }
.interest button {
  font-family: var(--vf-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 18px;
  color: var(--vf-ink-2);
  background: transparent;
  border: 1px solid var(--vf-ink-3);
  border-radius: 20px;
  cursor: pointer;
}
.interest fieldset:disabled { opacity: .7; }
/* The privacy disclosure sits after the fieldset, so it is never dimmed with the disabled fields. */
.interest .disclosure { margin: 20px 0 0; }
.interest fieldset:disabled button { cursor: not-allowed; }

/* Phones: 16px gutters, nav scrolls away with the page so the crumbs never cover the text. */
@media (max-width: 720px) {
  :root {
    --gutter: max(16px, env(safe-area-inset-left, 0px));
    --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  }
  .nav { position: static; }
  .nav-crumbs { margin-left: 0; width: 100%; }
  .nav-crumbs ul { gap: 6px; font-size: 10px; }
  .nav-crumbs a { padding: 5px 10px; }
  .wrap { padding-top: 36px; }
  .sec { margin-top: 40px; }
  .site-footer { padding-bottom: 72px; }
}

/* ════════════════════════════════════════════════════════════════════
   80s layer (koolpops outrun / arcade). Ported from platform packages/koolpops/koolpops.css
   (.kp-hero, .kp-wm, .kp-twin, .kp-sub/.kp-est, .rules-grid .rule, .ocs-crt*, .kp-glow-link)
   and ngplus/ngplus.css. CSS and inline SVG only; every graphic is decorative and the text
   beside it carries the meaning. Motion is subtle and stilled under prefers-reduced-motion. */

/* ── Outrun hero (home). An image: it keeps its sunset palette in both themes. ── */
.hero {
  position: relative;
  width: 100vw;
  margin: -56px calc(50% - 50vw) 48px;
  height: 380px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,61,139,.2);
  background: #020a11;
}
.hero .sky { position: absolute; inset: 0; background: linear-gradient(#1a0f3a 0%, #3b1560 13%, #7a2178 27%, #c92d77 39%, #ff4d80 48%, #ff8a55 56%, #ffb347 61%, #ffd877 64%); }
.hero .starfield { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.hero .sun {
  position: absolute; left: 50%; top: 88px; transform: translateX(-50%);
  width: 200px; height: 200px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 50% 42%, #fff7e0, #ffdf85 44%, #ff9f55 72%, #ff5e7e 100%);
  box-shadow: 0 0 100px 14px #ff7a5eaa;
  /* the classic outrun cut bands across the lower disc */
  -webkit-mask-image: linear-gradient(#000 0 56%, transparent 56% 59%, #000 59% 66%, transparent 66% 70%, #000 70% 76%, transparent 76% 81%, #000 81%);
          mask-image: linear-gradient(#000 0 56%, transparent 56% 59%, #000 59% 66%, transparent 66% 70%, #000 70% 76%, transparent 76% 81%, #000 81%);
}
.hero .sea {
  position: absolute; left: 0; right: 0; bottom: 0; height: 39%; z-index: 4; overflow: hidden;
  background: linear-gradient(#0f9f8e 0%, #0a6068 18%, #063a44 42%, #04222c 72%, #020a11 100%);
}
/* the perspective grid: aqua lines on the sea, laid flat and fading into the horizon */
.hero .sea .grid {
  position: absolute; left: -75%; right: -75%; top: 0; height: 100%;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,231,208,.55) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(180deg, rgba(0,231,208,.5) 0 2px, transparent 2px 26px);
  transform-origin: 50% 0;
  transform: perspective(90px) rotateX(48deg);
  -webkit-mask-image: linear-gradient(transparent 0, rgba(0,0,0,.35) 18%, #000 70%);
          mask-image: linear-gradient(transparent 0, rgba(0,0,0,.35) 18%, #000 70%);
}
.hero .sea .grid-h { position: absolute; inset: 0; background: linear-gradient(rgba(255,160,120,.28), transparent 35%); }
.hero .horizon {
  position: absolute; left: 0; right: 0; top: 61%; height: 2px; z-index: 5;
  background: #fff0c2; box-shadow: 0 0 24px 6px #ffcf78cc;
  animation: hz-pulse 7s ease-in-out infinite;
}
@keyframes hz-pulse { 0%, 100% { box-shadow: 0 0 22px 5px #ffcf78bb; } 50% { box-shadow: 0 0 34px 10px #ffcf78ee; } }
.hero .refl {
  position: absolute; left: 50%; top: 61%; transform: translateX(-50%); width: 96px; height: 39%; z-index: 5;
  mix-blend-mode: screen; background: radial-gradient(60% 80% at 50% 0%, #ffe2a8bb, #ff9a6e55 45%, transparent 72%);
}
.hero .lock { position: absolute; left: 0; right: 0; top: 134px; display: flex; justify-content: center; z-index: 10; }
.kp-wm {
  font-family: var(--vf-display); font-weight: 700; font-size: clamp(44px, 11vw, 84px); line-height: 1;
  text-transform: uppercase; letter-spacing: -.035em; color: #fff; display: inline-block; transform: skewX(-9deg);
  text-shadow: 0 0 4px #fff, 0 0 16px #ff5e9c, 0 0 34px #ff3d8b, 0 0 64px rgba(255,61,139,.45);
  white-space: nowrap;
}
.hero .tag { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 9px; z-index: 12; }
.kp-twin { width: min(320px, 78%); }
.kp-twin .p { height: 3px; background: #ff3d8b; box-shadow: 0 0 12px #ff3d8b; }
.kp-twin .t { height: 3px; margin-top: 5px; background: #00e7d0; box-shadow: 0 0 12px #00e7d0; }
.kp-sub {
  font-family: var(--vf-display); font-weight: 500; letter-spacing: .46em; padding-left: .46em; text-transform: uppercase;
  color: #fff4ea; font-size: 13px; text-shadow: 0 0 10px #ffb15e99; text-align: center;
}
.kp-est {
  font-family: var(--vf-display); font-weight: 500; letter-spacing: .5em; padding-left: .5em; text-transform: uppercase;
  color: #ffdcae; font-size: 9px; opacity: .9; text-shadow: 0 0 8px #ff9a3d77;
}

/* ── Legend strip and the arcade HUD ledger (home) ── */
.legend {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-family: var(--vf-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
}
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend .meter { width: 48px; height: 12px; }
.lg-glyph { font-size: .95rem; letter-spacing: 0; }

.meter { display: inline-block; vertical-align: middle; overflow: visible; }
.meter .pip { fill: transparent; stroke: currentColor; stroke-width: 1.5; opacity: .45; }
.meter .pip.lit { fill: currentColor; opacity: 1; filter: drop-shadow(0 0 3px currentColor); }

table.hud {
  border-collapse: separate; border-spacing: 0;
  background: var(--hud-bg);
  border: 1px solid var(--vf-line-gold);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--hud-glow);
}
table.hud th, table.hud td { border: 0; border-bottom: 1px solid var(--vf-line); padding: 12px 14px; }
table.hud tbody tr:last-child td { border-bottom: 0; }
table.hud tbody tr:hover { background: var(--tint); }
.hud td.name { font-family: var(--vf-mono); font-size: .88rem; letter-spacing: .04em; }
.hud .state { width: auto; text-align: left; font-size: inherit; white-space: normal; }
.hud .meter { width: 64px; height: 16px; margin-right: 10px; }
.hud-word { font-family: var(--vf-mono); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; }
a.glow {
  color: var(--glow-link); text-decoration: none;
  border-bottom: 1px solid var(--vf-line-gold); padding-bottom: .06em;
  transition: color .2s ease, border-color .2s ease, text-shadow .2s ease;
}
a.glow:hover, a.glow:focus-visible {
  color: var(--vf-ink); border-bottom-color: var(--ng-pink);
  text-shadow: var(--glow-link-shadow);
}

/* ── Evidence page: the gauge and the registered-trial timeline ── */
.gauge { margin: 16px 0 2px; }
.gauge-bar { display: block; width: 100%; max-width: 420px; height: 14px; overflow: visible; }
.gauge .seg { fill: currentColor; opacity: .14; }
.gauge .seg.lit { opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
.gauge-word { margin: 6px 0 0; font-family: var(--vf-mono); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.timeline { max-width: 420px; margin: 6px 0 8px; }
.timeline .tl { display: block; width: 100%; height: auto; overflow: visible; }
.tl-line { stroke: var(--ng-pink); stroke-width: 2; filter: drop-shadow(0 0 4px var(--ng-pink)); }
.tl-node { stroke-width: 3; fill: var(--vf-bg); }
.tl-node.open { stroke: var(--ng-aqua); fill: var(--ng-aqua); filter: drop-shadow(0 0 5px var(--ng-aqua)); }
.tl-node.soon { stroke: var(--ng-indigo); }
.tl-node.other { stroke: var(--vf-ink-3); }
.tl-id { font-family: var(--vf-mono); font-size: 12px; fill: var(--vf-ink-3); }
.tl-key { margin: 2px 0 0; font-family: var(--vf-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vf-ink-3); }
.tl-k { margin-right: 12px; white-space: nowrap; }
.tl-k::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 0; border: 2px solid; }
.tl-k.open::before { border-color: var(--ng-aqua); background: var(--ng-aqua); }
.tl-k.soon::before { border-color: var(--ng-indigo); }
.tl-k.other::before { border-color: var(--vf-ink-3); }

/* ── Pathway: the level map (wide on desktop, tall on phones) ── */
.levelmap-wrap { margin: 4px 0 28px; }
.levelmap { display: block; width: 100%; height: auto; overflow: visible; }
.levelmap-tall { display: none; max-width: 360px; }
.lm-path { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.lm-glow { fill: none; stroke-width: 12; stroke-linejoin: round; opacity: .35; filter: blur(5px); }
.lm-ring { fill: var(--vf-bg); stroke: var(--ng-pink); stroke-width: 2.5; filter: drop-shadow(0 0 6px var(--ng-pink)); }
.lm-node:nth-of-type(even) .lm-ring { stroke: var(--ng-aqua); filter: drop-shadow(0 0 6px var(--ng-aqua)); }
.lm-node.goal .lm-ring { stroke: var(--neon-gold); stroke-width: 3.5; filter: drop-shadow(0 0 10px var(--neon-gold-2)); }
.lm-n { font-family: var(--vf-display); font-weight: 700; font-size: 22px; fill: var(--vf-ink); }
.lm-label { font-family: var(--vf-mono); font-size: 12.5px; fill: var(--vf-ink-2); }
.levelmap-tall .lm-label { font-size: 15px; }

/* ── Neon cards: the vows (honesty) and the CTN pair (pathway) ── */
.rules-grid {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.rules-grid.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rule {
  position: relative; overflow: hidden;
  border: 1px solid var(--rule-border); border-radius: 13px;
  background: var(--rule-bg);
  box-shadow: var(--card-shadow);
  padding: 22px 20px 20px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.rule::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--ng-pink), var(--ng-aqua)); box-shadow: var(--rule-bar-glow);
}
.rule:nth-child(even)::before { background: linear-gradient(90deg, var(--ng-aqua), var(--ng-pink)); }
.rule:hover, .rule:focus-within { transform: translateY(-3px); border-color: var(--ng-pink); box-shadow: var(--card-shadow-hover); }
.rule p { margin: 0; color: var(--vf-ink); font-size: .98rem; line-height: 1.5; }
.rule p + p { margin-top: 8px; }
.rule-n {
  display: inline-block; margin-bottom: .4rem; transform: skewX(-9deg);
  font-family: var(--vf-display); font-weight: 700; font-size: 1.9rem; line-height: 1;
  color: var(--num-ink); text-shadow: var(--num-glow);
}
.rule:nth-child(even) .rule-n { text-shadow: var(--num-glow-alt); }
.rule .rule-k { font-family: var(--vf-mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--vf-gold); margin-bottom: 10px; }
.main-wide > p { max-width: 68ch; }

/* ── CRT readout (pathway status, contact). An object: dark tube in both themes. ──
   Exempt from day theming, like the hero: its colours are the --crt-* properties on :root, one set for both themes. */
.crt { max-width: 520px; margin: 4px 0 28px; }
.crt-screen {
  position: relative; border-radius: 26px / 30px; padding: 22px 22px 24px;
  background: var(--crt-bezel);
  border: 1px solid var(--crt-bezel-edge);
  box-shadow: var(--crt-bezel-shadow);
}
.crt-screen::before {
  content: ""; position: absolute; inset: 14px; border-radius: 14px / 22px; z-index: 0;
  background: var(--crt-tube);
  box-shadow: var(--crt-tube-shadow);
}
.crt-boot {
  position: relative; z-index: 1; margin: 0; padding: 18px 20px; border-radius: 14px / 22px;
  font-family: var(--vf-mono); font-size: .86rem; line-height: 1.8; color: var(--crt-ink);
  background: var(--crt-face);
  box-shadow: var(--crt-face-shadow);
}
.crt-boot .b-ln { display: block; margin: 0; color: var(--crt-ink-line); }
.crt-boot .b-ln.dim { color: var(--crt-ink-dim); font-size: .7rem; letter-spacing: .14em; }
.crt-boot .status, .crt-boot .ready { color: var(--crt-phosphor); font-weight: 700; text-shadow: var(--crt-phosphor-glow); }
.crt-scan {
  position: absolute; inset: 14px; border-radius: 14px / 22px; z-index: 2; pointer-events: none;
  background: var(--crt-scanlines);
  mix-blend-mode: multiply; opacity: .6; animation: crt-scan 8s linear infinite;
}
@keyframes crt-scan { from { background-position-y: 0; } to { background-position-y: 100px; } }
.crt-glass {
  position: absolute; inset: 14px; border-radius: 14px / 22px; z-index: 3; pointer-events: none;
  background: var(--crt-glare);
  box-shadow: var(--crt-glare-edge);
}
.crt-base {
  position: relative; width: 42%; max-width: 160px; height: 18px; margin: -2px auto 0;
  background: var(--crt-base); border: 1px solid var(--crt-base-edge); border-top: 0;
  border-radius: 0 0 14px 14px; box-shadow: var(--crt-base-shadow);
}
.crt-led { position: absolute; left: 14px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--crt-led); box-shadow: var(--crt-led-glow); }
.crt-cursor { display: inline-block; width: .55em; height: 1em; vertical-align: -.12em; margin-left: 4px; background: var(--crt-phosphor); animation: crt-blink 1.05s steps(1) infinite; }
@keyframes crt-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }


/* ── Atlas idioms (platform design-atlas StatusPill / OptionGrid / Hub), in NG+ tokens ──
   Pill: 11px mono, radius 7, accent outline; filled = selected. Option card: radius 14, hairline,
   selected = accent border + 1px ring + chip. Dashed box: Hub's "next step" panel. */
.pill, .tab, details.more > summary, a.pill-fill {
  display: inline-block; font-family: var(--vf-mono); font-size: 11px; line-height: 1.45; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 7px; border: 1px solid var(--ng-pink); color: var(--ng-pink);
  white-space: nowrap; text-decoration: none; background: transparent;
}
.pill-aqua { border-color: var(--aqua-ink); color: var(--aqua-ink); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 700; }
.rule .pill-aqua { display: table; margin-bottom: 10px; }
a.pill-fill { background: var(--ng-pink); color: var(--pill-on); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
a.pill-fill:hover { background: transparent; color: var(--ng-pink); }

/* State tabs: a radio group drawn as pills. :has() does the filtering; without it every row shows. */
.state-tabs { margin: 0 0 14px; }
.tab-strip { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tab-in { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tab { cursor: pointer; }
.tab:hover { background: var(--vf-line-gold); }
.tab-in:checked + .tab { background: var(--ng-pink); color: var(--pill-on); font-weight: 700; }
.tab-in:focus-visible + .tab { outline: 2px solid var(--ng-pink); outline-offset: 3px; }
.tab-empty { display: none; font-family: var(--vf-mono); font-size: .8rem; color: var(--vf-ink-3); }
.state-tabs:has(#sf-none:checked) tr.row:has(> td.state:not([data-state="none"])),
.state-tabs:has(#sf-uncontrolled:checked) tr.row:has(> td.state:not([data-state="uncontrolled"])),
.state-tabs:has(#sf-registered:checked) tr.row:has(> td.state:not([data-state="registered"])),
.state-tabs:has(#sf-controlled:checked) tr.row:has(> td.state:not([data-state="controlled"])),
.state-tabs:has(#sf-none:checked) details.card:has(> summary > .state:not([data-state="none"])),
.state-tabs:has(#sf-uncontrolled:checked) details.card:has(> summary > .state:not([data-state="uncontrolled"])),
.state-tabs:has(#sf-registered:checked) details.card:has(> summary > .state:not([data-state="registered"])),
.state-tabs:has(#sf-controlled:checked) details.card:has(> summary > .state:not([data-state="controlled"])) { display: none; }
.state-tabs:has(#sf-none:checked) .tab-empty[data-empty="none"],
.state-tabs:has(#sf-uncontrolled:checked) .tab-empty[data-empty="uncontrolled"],
.state-tabs:has(#sf-registered:checked) .tab-empty[data-empty="registered"],
.state-tabs:has(#sf-controlled:checked) .tab-empty[data-empty="controlled"] { display: block; }

/* Atlas table: mono accent heads, hairline rows, zebra, accent hairline on the hovered row. */
table.atable th { font-family: var(--vf-mono); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vf-gold); }
table.atable tbody tr:nth-child(even) { background: var(--zebra); }
table.atable tbody tr:hover { background: var(--zebra); box-shadow: inset 0 0 0 1px var(--vf-line-gold); }
table.atable .au { text-align: right; color: var(--vf-ink-3); }
table.atable .more { text-align: right; width: 1%; }

/* Option cards: the CTN pair (pathway) and the compound cards (evidence). */
.opts, .ledger-full { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.opt, .ledger-full details.card {
  flex: 1 1 220px; min-width: 0;
  border: 1px solid var(--vf-line); border-radius: 14px; padding: 14px 16px;
  background: var(--tint);
}
.opt p { margin: 0 0 8px; color: var(--vf-ink); }
.opt-k { font-family: var(--vf-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.opt-k { color: var(--vf-gold); }
.opt.sel { border-color: var(--ng-pink); box-shadow: 0 0 0 1px var(--ng-pink); }
.chip { display: inline-block; padding: 2px 8px; border-radius: 6px; font-family: var(--vf-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--ng-pink); color: var(--pill-on); }
/* An open compound card takes the full row, with an aqua ring and the "open" chip. */
.ledger-full details.card[open] { flex-basis: 100%; border-color: var(--aqua-ink); box-shadow: 0 0 0 1px var(--aqua-ink); }
.ledger-full details.card[open] > summary::after {
  content: "✓ OPEN";
  content: "✓ OPEN" / "";
  display: inline-block; margin-left: .6em; padding: 2px 8px; border-radius: 6px; vertical-align: middle;
  font-family: var(--vf-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em;
  background: var(--aqua-ink); color: var(--pill-on);
}

/* Drill-down: "More" as an outlined pill, "Less" once open; the fuller text sits below it. */
details.more { margin: 0 0 16px; }
details.more > summary { cursor: pointer; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary:hover { background: var(--vf-line-gold); }
details.more .m-less, .more[open] .m-more { display: none; }
details.more[open] .m-less { display: inline; }
details.more[open] > summary { margin-bottom: 12px; }
details.more > p:last-child { margin-bottom: 0; }
.marks { list-style: none; padding: 0; }

/* Dashed box: the next step after the privacy block. */
.dashed { border: 1px dashed var(--ng-pink); border-radius: 12px; padding: 16px 20px; margin: 20px 0 0; }

/* ── 80s layer: tablets and phones ── */
@media (max-width: 900px) {
  .rules-grid.vows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hero { margin-top: -36px; height: 300px; }
  .hero .sun { top: 56px; width: 156px; height: 156px; }
  .hero .lock { top: 104px; }
  .hero .tag { bottom: 20px; }
  .kp-sub { font-size: 10px; letter-spacing: .26em; padding-left: .26em; }
  .kp-est { font-size: 8px; }
}
@media (max-width: 599px) {
  .rules-grid, .rules-grid.pair, .rules-grid.vows { grid-template-columns: 1fr; }
  .levelmap-wide { display: none; }
  .levelmap-tall { display: block; }
  table.hud th, table.hud td { padding: 10px 8px; }
  .hud td.name { font-size: .8rem; letter-spacing: 0; }
  .hud .meter { display: block; margin: 0 0 4px; }
  .crt-screen { padding: 16px 14px 18px; }
  .crt-boot { padding: 14px 14px; font-size: .8rem; }
  .ledger-full dl.facts { grid-template-columns: 1fr; gap: 4px; }
  .ledger-full dl.facts dd { margin-bottom: 10px; }
  table.atable .au { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .horizon, .crt-scan, .crt-cursor { animation: none !important; }
  .crt-cursor { opacity: 1; }
  .rule, a.glow { transition: none; }
  .rule:hover, .rule:focus-within { transform: none; }
}

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