@font-face {
  font-family: "League Gothic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/v4/fonts/league-gothic/league-gothic-400-variable-width.woff2") format("woff2-variations");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/v4/fonts/ibm-plex-mono/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/v4/fonts/ibm-plex-mono/ibm-plex-mono-600.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Serif JP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/v4/fonts/noto-serif-jp/noto-serif-jp-500-subset.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("assets/v4/fonts/newsreader/newsreader-roman-variable.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("assets/v4/fonts/newsreader/newsreader-italic-variable.woff2") format("woff2-variations");
}

:root {
  color-scheme: dark;

  /* Layer 1: primitives. */
  --p-ink-1000: #090b0f;
  --p-ink-900: #11151c;
  --p-ink-800: #171c24;
  --p-navy-900: #071b4f;
  --p-navy-700: #103784;
  --p-red-700: #8b151e;
  --p-red-600: #c8202d;
  --p-paper-100: #f1eee7;
  --p-paper-50: #faf8f2;
  --p-white: #ffffff;
  --p-brass-600: #ad8950;
  --p-olive-600: #8c897b;
  --p-dark-muted: #b8bbc2;
  --p-paper-ink: #111218;
  --p-paper-muted: #55564f;
  --p-white-a25: rgb(255 255 255 / 25%);
  --p-white-a14: rgb(255 255 255 / 14%);
  --p-black-a28: rgb(9 11 15 / 28%);
  --p-black-a16: rgb(9 11 15 / 16%);
  --p-font-display: "League Gothic", "Arial Narrow", sans-serif;
  --p-font-mono: "IBM Plex Mono", Consolas, monospace;
  --p-font-jp: "Noto Serif JP", "Yu Mincho", serif;
  --p-font-editorial: "Newsreader", Georgia, serif;
  --p-space-0: 0;
  --p-space-1: 4px;
  --p-space-2: 8px;
  --p-space-3: 12px;
  --p-space-4: 16px;
  --p-space-5: 20px;
  --p-space-6: 24px;
  --p-space-8: 32px;
  --p-space-10: 40px;
  --p-space-12: 48px;
  --p-space-16: 64px;
  --p-space-20: 80px;
  --p-space-24: 96px;
  --p-radius-0: 0;
  --p-radius-1: 1px;
  --p-radius-2: 2px;
  --p-shadow-hard: 8px 8px 0 rgb(9 11 15 / 22%);
  --p-shadow-inset-dark: inset 0 0 0 1px rgb(9 11 15 / 20%);
  --p-time-instant: 80ms;
  --p-time-control: 140ms;
  --p-time-reveal: 220ms;
  --p-time-drawer: 260ms;
  --p-time-ticker: 48s;
  --p-ease-mechanical: cubic-bezier(0.2, 0, 0, 1);
  --p-page-max: 1440px;
  --p-masthead-h-desktop: 68px;
  --p-control-min: 44px;
  --p-z-base: 0;
  --p-z-furniture: 10;
  --p-z-overlay: 20;
  --p-z-masthead: 100;
  --p-z-focus: 1000;

  /* Layer 2: surface and interaction semantics. */
  --s-page-bg: var(--p-ink-1000);
  --s-page-fg: var(--p-paper-50);
  --s-signal: var(--p-red-600);
  --s-signal-dark: var(--p-red-700);
  --s-authority: var(--p-navy-900);
  --s-authority-bright: var(--p-navy-700);
  --s-material: var(--p-brass-600);
  --s-focus: var(--p-red-600);
  --s-rule-on-dark: var(--p-white-a25);
  --s-rule-on-dark-soft: var(--p-white-a14);
  --s-rule-on-paper: var(--p-black-a28);
  --s-rule-on-paper-soft: var(--p-black-a16);
  --s-broadcast-canvas: var(--p-ink-1000);
  --s-broadcast-raised: var(--p-ink-800);
  --s-broadcast-fg: var(--p-paper-50);
  --s-broadcast-muted: var(--p-dark-muted);
  --s-archive-canvas: var(--p-paper-100);
  --s-archive-sheet: var(--p-paper-50);
  --s-archive-fg: var(--p-paper-ink);
  --s-archive-muted: var(--p-paper-muted);
  --s-arsenal-canvas: var(--p-ink-1000);
  --s-arsenal-panel: var(--p-paper-50);
  --s-dossier-canvas: var(--p-paper-100);
  --s-dossier-sheet: var(--p-paper-50);
  --s-leak-canvas: var(--p-ink-900);
  --s-contraband-canvas: var(--p-ink-1000);

  /* Layer 3: stable component bindings. */
  --c-masthead-bg: var(--s-broadcast-canvas);
  --c-masthead-fg: var(--s-broadcast-fg);
  --c-masthead-rule: var(--s-rule-on-dark);
  --c-masthead-active: var(--s-signal);
  --c-masthead-h: var(--p-masthead-h-desktop);
  --c-masthead-layer: var(--p-z-masthead);
  --c-control-min: var(--p-control-min);
  --c-control-focus: var(--s-focus);
  --c-control-time: var(--p-time-control);
  --c-lower-bg: var(--s-archive-sheet);
  --c-lower-fg: var(--s-archive-fg);
  --c-lower-rail-bg: var(--s-authority);
  --c-transmission-bg: var(--s-archive-sheet);
  --c-transmission-shadow: var(--p-shadow-hard);
  --c-docket-bg: var(--s-archive-sheet);
  --c-docket-rule: var(--s-rule-on-paper);
  --c-packet-bg: var(--s-arsenal-panel);
  --c-packet-rule: var(--s-rule-on-paper);
  --c-drawer-bg: var(--s-contraband-canvas);
  --c-drawer-time: var(--p-time-drawer);
  --c-personnel-bg: var(--s-dossier-sheet);
  --c-leak-bg: var(--s-leak-canvas);

  /* Compatibility bridge: existing components resolve through the spine. */
  --ink: var(--p-ink-1000);
  --ink-soft: var(--p-ink-900);
  --ink-raised: var(--p-ink-800);
  --navy: var(--s-authority);
  --navy-bright: var(--s-authority-bright);
  --red: var(--s-signal);
  --red-dark: var(--s-signal-dark);
  --paper: var(--s-archive-canvas);
  --warm-white: var(--p-paper-50);
  --brass: var(--s-material);
  --olive: var(--p-olive-600);
  --white-line: var(--s-rule-on-dark);
  --white-line-soft: var(--s-rule-on-dark-soft);
  --black-line: var(--s-rule-on-paper);
  --black-line-soft: var(--s-rule-on-paper-soft);
  --on-dark: var(--s-broadcast-fg);
  --on-dark-muted: var(--s-broadcast-muted);
  --on-paper: var(--s-archive-fg);
  --on-paper-muted: var(--s-archive-muted);
  --font-display: var(--p-font-display);
  --font-mono: var(--p-font-mono);
  --font-jp: var(--p-font-jp);
  --font-editorial: var(--p-font-editorial);
  --max-width: var(--p-page-max);
  --masthead-height: var(--c-masthead-h);
  --masthead-inline: clamp(14px, 2.2vw, 36px);
  --control-target: var(--c-control-min);
  --pad: clamp(18px, 3vw, 44px);
  --focus: 2px solid var(--c-control-focus);
  --hard-shadow: var(--c-transmission-shadow);
  --ease-mechanical: var(--p-ease-mechanical);
}