/* ===== fonts ===== */
/* Self-hosted, latin subset. Lexend (SIL OFL) + Atkinson Hyperlegible Next (SIL OFL). */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/lexend-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/atkinson-hyperlegible-next-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== tokens ===== */
/* ============================================================================
   a11y design tokens — LEDGER (2026-09-15)
   Warm paper, near-black ink, one teal accent, one yellow mark. The document
   is the interface: 1 px rules, 2 px radius, mono for every number. A variant
   of the same token contract every other system implements: same names, same
   floors, different palette. Body text holds 7:1 in every theme; the accent
   holds 7:1 as text on both grounds. Dashed rules mean pending; the mark only
   ever paints a focus ring, a link hover or an honest zero.
   Fonts: IBM Plex Sans (display and body) and IBM Plex Mono, self-hosted,
   loaded by src/styles/ledger2.css. Sister Plex families carry other scripts
   through the system stacks in base.css.
   ========================================================================== */
:root {
  /* Modality colours — surfaces and markers */
  --arc-green:  #005A5E;   /* Sign — the one accent */
  --arc-rose:   #4F4D48;   /* Listen — ink-2 */
  --arc-sky:    #C0BDB8;   /* Read — rule */
  --arc-yellow: #FFE772;   /* Plain / mark */
  --arc-grey:   #4F4D48;

  /* Foreground ON each modality surface */
  --on-sign:   #F7F5F1;
  --on-listen: #F7F5F1;
  --on-read:   #171613;
  --on-plain:  #171613;

  /* Grounds */
  --paper:   #F7F5F1;
  --paper-2: #EEEBE5;
  --paper-3: #E4E1DA;
  --ink:     #171613;
  --ink-2:   #4F4D48;
  --line:        #C0BDB8;
  --line-strong: #4F4D48;

  /* Accents as TEXT */
  --green: #005A5E;
  --rose:  #4F4D48;
  --sky:   #005A5E;
  --gold:  #4F4D48;

  --link: #005A5E;
  --link-underline: #005A5E;
  --link-hover-bg: var(--arc-yellow);
  --btn-bg: #171613;
  --btn-fg: #F7F5F1;
  --focus: #171613;
  --focus-halo: var(--arc-yellow);
  --mark: var(--arc-yellow);
  --accent-on-ink: var(--arc-yellow);

  /* Light-surfaced components inside the inverted band */
  --band-ink: #171613; --band-ink-2: #4F4D48; --band-paper: #F7F5F1; --band-paper-2: #EEEBE5;
  --band-line: #C0BDB8; --band-line-strong: #4F4D48;
  --band-green: #005A5E; --band-rose: #4F4D48; --band-sky: #005A5E; --band-gold: #4F4D48;
  --band-warn-bg: #EEEBE5; --band-warn-fg: #932B2A;
  --band-hover-bg: #005A5E;
  --warn-bg: #EEEBE5;
  --warn-fg: #932B2A;
  --ok: #236436;

  --mod-sign: var(--arc-green);
  --mod-listen: var(--arc-rose);
  --mod-read: var(--arc-sky);
  --mod-plain: var(--arc-yellow);

  --font-display: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --text-base: clamp(1.0625rem, 1rem + 0.15vw, 1.125rem);
  --text-sm: max(16px, 0.92rem);
  --text-lg: clamp(1.15rem, 1rem + 0.5vw, 1.3rem);
  --text-xl: clamp(1.35rem, 1rem + 1vw, 1.65rem);
  --h1: clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem);
  --h2: clamp(1.75rem, 1.2rem + 1.9vw, 2.6rem);
  --h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  --leading: 1.6;
  --measure: 60ch;

  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4rem; --s-7: 6rem; --s-8: 8rem;
  --section: clamp(4rem, 6vw + 1rem, 7rem);
  --wrap: 1200px;

  --radius: 2px;
  --radius-sm: 2px;
  --radius-input: 2px;

  --t: 150ms;
  --ease: cubic-bezier(0, 0.5, 0.5, 1);

  color-scheme: light;
}

/* Dark: ground and ink swap, the accent lightens, the mark stays. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="contrast"]) {
    --arc-green: #76C7CC; --arc-rose: #BAB7B2; --arc-sky: #4F4D48; --arc-yellow: #FFE772;
    --on-sign: #171613; --on-listen: #171613; --on-read: #F7F5F1; --on-plain: #171613;
    --paper: #171613; --paper-2: #23211E; --paper-3: #2B2926;
    --ink: #F7F5F1; --ink-2: #BAB7B2;
    --line: #4F4D48; --line-strong: #BAB7B2;
    --green: #76C7CC; --rose: #BAB7B2; --sky: #76C7CC; --gold: #BAB7B2;
    --link: #76C7CC; --link-underline: #76C7CC; --link-hover-bg: #3A3412;
    --btn-bg: #F7F5F1; --btn-fg: #171613;
    --focus: #FFE772; --focus-halo: #171613;
    --accent-on-ink: #005A5E;
    --band-hover-bg: #76C7CC;
    --warn-bg: #23211E; --warn-fg: #F5A3A0;
    --ok: #7FD19A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --arc-green: #76C7CC; --arc-rose: #BAB7B2; --arc-sky: #4F4D48; --arc-yellow: #FFE772;
  --on-sign: #171613; --on-listen: #171613; --on-read: #F7F5F1; --on-plain: #171613;
  --paper: #171613; --paper-2: #23211E; --paper-3: #2B2926;
  --ink: #F7F5F1; --ink-2: #BAB7B2;
  --line: #4F4D48; --line-strong: #BAB7B2;
  --green: #76C7CC; --rose: #BAB7B2; --sky: #76C7CC; --gold: #BAB7B2;
  --link: #76C7CC; --link-underline: #76C7CC; --link-hover-bg: #3A3412;
  --btn-bg: #F7F5F1; --btn-fg: #171613;
  --focus: #FFE772; --focus-halo: #171613;
  --accent-on-ink: #005A5E;
  --band-hover-bg: #76C7CC;
  --warn-bg: #23211E; --warn-fg: #F5A3A0;
  --ok: #7FD19A;
  color-scheme: dark;
}

/* High contrast: black on white; every rule becomes ink; the same accent hue, deeper. It flips to
   white on black only for a reader who was already in dark when they chose it. */
:root[data-theme="contrast"][data-contrast="dark"] {
  --arc-green: #FFFFFF; --arc-rose: #FFFFFF; --arc-sky: #000000; --arc-yellow: #FFE772;
  --on-sign: #000000; --on-listen: #000000; --on-read: #FFFFFF; --on-plain: #000000;
  --paper: #000000; --paper-2: #000000; --paper-3: #0A0A0A;
  --ink: #FFFFFF; --ink-2: #FFFFFF; --line: #FFFFFF; --line-strong: #FFFFFF;
  --green: #FFFFFF; --rose: #FFFFFF; --sky: #FFFFFF; --gold: #FFFFFF;
  --link: #FFFFFF; --link-underline: #FFFFFF; --link-hover-bg: #3A3412;
  --btn-bg: #FFFFFF; --btn-fg: #000000;
  --focus: #FFE772; --focus-halo: #000000;
  --accent-on-ink: #000000;
  --warn-bg: #000000; --warn-fg: #FFFFFF;
  --band-ink: #FFFFFF; --band-ink-2: #FFFFFF; --band-paper: #000000; --band-paper-2: #000000;
  --band-line: #FFFFFF; --band-line-strong: #FFFFFF;
  --band-green: #FFFFFF; --band-rose: #FFFFFF; --band-sky: #FFFFFF; --band-gold: #FFFFFF;
  --band-warn-bg: #000000; --band-warn-fg: #FFFFFF;
  --band-hover-bg: #FFFFFF;
  --ok: #FFFFFF;
  color-scheme: dark;
}
:root[data-theme="contrast"] {
  --arc-green: #004E53; --arc-rose: #000000; --arc-sky: #F2F2F2; --arc-yellow: #FFE772;
  --on-sign: #FFFFFF; --on-listen: #FFFFFF; --on-read: #000000; --on-plain: #000000;
  --paper: #FFFFFF; --paper-2: #F2F2F2; --paper-3: #E6E6E6;
  --ink: #000000; --ink-2: #000000; --line: #000000; --line-strong: #000000;
  --green: #004E53; --rose: #000000; --sky: #004E53; --gold: #000000;
  --link: #004E53; --link-underline: #004E53; --link-hover-bg: #FFE772;
  --btn-bg: #000000; --btn-fg: #FFFFFF;
  --focus: #000000; --focus-halo: #FFE772;
  --mark: #FFE772;
  --accent-on-ink: #FFE772;
  --warn-bg: #FFF3B0; --warn-fg: #000000;
  --band-ink: #000000; --band-ink-2: #000000; --band-paper: #FFFFFF; --band-paper-2: #F2F2F2;
  --band-line: #000000; --band-line-strong: #000000;
  --band-green: #004E53; --band-rose: #000000; --band-sky: #004E53; --band-gold: #000000;
  --band-warn-bg: #FFF3B0; --band-warn-fg: #000000;
  --band-hover-bg: #004E53;
  --ok: #000000;
  color-scheme: light;
}

:root[data-text="lg"] { font-size: 112.5%; }
:root[data-text="xl"] { font-size: 125%; }

/* ===== palettes ===== */
/* GENERATED by scripts/make-palettes.mjs — do not edit. Palettes for the Display menu.
   Sources: brand/tokens-knicks.css, brand/tokens-charcoal.css. Colour tokens only; complete per theme. */

/* ---------- Blue (Knicks) ---------- */
:root[data-palette="blue"] {
  --arc-green: #F58426;
  --arc-rose: #006BB6;
  --arc-sky: #0A2340;
  --arc-yellow: #BEC0C2;
  --arc-grey: #0A2340;
  --on-sign: #000000;
  --on-listen: #FFFFFF;
  --on-read: #FFFFFF;
  --on-plain: #000000;
  --paper: #F1F2F4;
  --paper-2: #E5E7EB;
  --paper-3: #D6DAE0;
  --ink: #0A2340;
  --ink-2: #24405F;
  --line: #0A2340;
  --line-strong: #3B5578;
  --green: #8A4A00;
  --rose: #00579A;
  --sky: #0A2340;
  --gold: #494F57;
  --link: #0A2340;
  --link-underline: #006BB6;
  --link-hover-bg: #BEC0C2;
  --btn-bg: #0A2340;
  --btn-fg: #FFFFFF;
  --focus: #006BB6;
  --focus-halo: #F58426;
  --mark: #D07020;
  --accent-on-ink: #F58426;
  --band-ink: #0A2340;
  --band-ink-2: #24405F;
  --band-paper: #F1F2F4;
  --band-paper-2: #E5E7EB;
  --band-line: #0A2340;
  --band-line-strong: #3B5578;
  --band-green: #8A4A00;
  --band-rose: #00579A;
  --band-sky: #0A2340;
  --band-gold: #494F57;
  --band-warn-bg: #FFE8D6;
  --band-warn-fg: #6B3200;
  --band-hover-bg: #123E75;
  --warn-bg: #FFE8D6;
  --warn-fg: #6B3200;
  --ok: #8A4A00;
  --mod-sign: #F58426;
  --mod-listen: #006BB6;
  --mod-read: #0A2340;
  --mod-plain: #BEC0C2;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="blue"]:not([data-theme="light"]):not([data-theme="contrast"]) {
    --arc-green: #F58426;
    --arc-rose: #006BB6;
    --arc-sky: #0A2340;
    --arc-yellow: #BEC0C2;
    --arc-grey: #0A2340;
    --on-sign: #000000;
    --on-listen: #FFFFFF;
    --on-read: #FFFFFF;
    --on-plain: #000000;
    --paper: #0A2340;
    --paper-2: #123E75;
    --paper-3: #1B4F8F;
    --ink: #FFFFFF;
    --ink-2: #C9D3E3;
    --line: #FFFFFF;
    --line-strong: #9DB2CE;
    --green: #FFB577;
    --rose: #7FC4FF;
    --sky: #C9D3E3;
    --gold: #D8DBDE;
    --link: #FFFFFF;
    --link-underline: #F58426;
    --link-hover-bg: #123E75;
    --btn-bg: #F58426;
    --btn-fg: #0A2340;
    --focus: #F58426;
    --focus-halo: #0A2340;
    --mark: #F58426;
    --accent-on-ink: #8A4A00;
    --band-ink: #0A2340;
    --band-ink-2: #24405F;
    --band-paper: #F1F2F4;
    --band-paper-2: #E5E7EB;
    --band-line: #0A2340;
    --band-line-strong: #3B5578;
    --band-green: #8A4A00;
    --band-rose: #00579A;
    --band-sky: #0A2340;
    --band-gold: #494F57;
    --band-warn-bg: #FFE8D6;
    --band-warn-fg: #6B3200;
    --band-hover-bg: #FFE8D6;
    --warn-bg: #3A2A16;
    --warn-fg: #FFC98A;
    --ok: #FFB577;
    --mod-sign: #F58426;
    --mod-listen: #006BB6;
    --mod-read: #0A2340;
    --mod-plain: #BEC0C2;
    color-scheme: dark;
  }
  }
:root[data-palette="blue"][data-theme="dark"] {
  --arc-green: #F58426;
  --arc-rose: #006BB6;
  --arc-sky: #0A2340;
  --arc-yellow: #BEC0C2;
  --arc-grey: #0A2340;
  --on-sign: #000000;
  --on-listen: #FFFFFF;
  --on-read: #FFFFFF;
  --on-plain: #000000;
  --paper: #0A2340;
  --paper-2: #123E75;
  --paper-3: #1B4F8F;
  --ink: #FFFFFF;
  --ink-2: #C9D3E3;
  --line: #FFFFFF;
  --line-strong: #9DB2CE;
  --green: #FFB577;
  --rose: #7FC4FF;
  --sky: #C9D3E3;
  --gold: #D8DBDE;
  --link: #FFFFFF;
  --link-underline: #F58426;
  --link-hover-bg: #123E75;
  --btn-bg: #F58426;
  --btn-fg: #0A2340;
  --focus: #F58426;
  --focus-halo: #0A2340;
  --mark: #F58426;
  --accent-on-ink: #8A4A00;
  --band-ink: #0A2340;
  --band-ink-2: #24405F;
  --band-paper: #F1F2F4;
  --band-paper-2: #E5E7EB;
  --band-line: #0A2340;
  --band-line-strong: #3B5578;
  --band-green: #8A4A00;
  --band-rose: #00579A;
  --band-sky: #0A2340;
  --band-gold: #494F57;
  --band-warn-bg: #FFE8D6;
  --band-warn-fg: #6B3200;
  --band-hover-bg: #FFE8D6;
  --warn-bg: #3A2A16;
  --warn-fg: #FFC98A;
  --ok: #FFB577;
  --mod-sign: #F58426;
  --mod-listen: #006BB6;
  --mod-read: #0A2340;
  --mod-plain: #BEC0C2;
  color-scheme: dark;
}
:root[data-palette="blue"][data-theme="contrast"][data-contrast="dark"] {
  --arc-green: #F58426;
  --arc-rose: #006BB6;
  --arc-sky: #0A2340;
  --arc-yellow: #BEC0C2;
  --arc-grey: #0A2340;
  --on-sign: #000000;
  --on-listen: #FFFFFF;
  --on-read: #FFFFFF;
  --on-plain: #000000;
  --paper: #000000;
  --paper-2: #000000;
  --paper-3: #0A0A0A;
  --ink: #FFFFFF;
  --ink-2: #FFFFFF;
  --line: #FFFFFF;
  --line-strong: #FFFFFF;
  --green: #FFFFFF;
  --rose: #FFFFFF;
  --sky: #FFFFFF;
  --gold: #FFFFFF;
  --link: #FFFFFF;
  --link-underline: #006BB6;
  --link-hover-bg: #F58426;
  --btn-bg: #FFFFFF;
  --btn-fg: #000000;
  --focus: #FFFFFF;
  --focus-halo: #DD7722;
  --mark: #F58426;
  --accent-on-ink: #000000;
  --band-ink: #FFFFFF;
  --band-ink-2: #FFFFFF;
  --band-paper: #000000;
  --band-paper-2: #000000;
  --band-line: #0A2340;
  --band-line-strong: #3B5578;
  --band-green: #FFFFFF;
  --band-rose: #00579A;
  --band-sky: #0A2340;
  --band-gold: #494F57;
  --band-warn-bg: #000000;
  --band-warn-fg: #FFFFFF;
  --band-hover-bg: #FFFFFF;
  --warn-bg: #000000;
  --warn-fg: #FFFFFF;
  --ok: #FFFFFF;
  --mod-sign: #F58426;
  --mod-listen: #006BB6;
  --mod-read: #0A2340;
  --mod-plain: #BEC0C2;
  color-scheme: dark;
}
:root[data-palette="blue"][data-theme="contrast"] {
  --arc-green: #F58426;
  --arc-rose: #006BB6;
  --arc-sky: #0A2340;
  --arc-yellow: #BEC0C2;
  --arc-grey: #0A2340;
  --on-sign: #000000;
  --on-listen: #FFFFFF;
  --on-read: #FFFFFF;
  --on-plain: #000000;
  --paper: #FFFFFF;
  --paper-2: #FFFFFF;
  --paper-3: #F0F0F0;
  --ink: #000000;
  --ink-2: #000000;
  --line: #000000;
  --line-strong: #000000;
  --green: #000000;
  --rose: #000000;
  --sky: #000000;
  --gold: #000000;
  --link: #000000;
  --link-underline: #006BB6;
  --link-hover-bg: #F58426;
  --btn-bg: #000000;
  --btn-fg: #FFFFFF;
  --focus: #000000;
  --focus-halo: #F58426;
  --mark: #DD7722;
  --accent-on-ink: #FFFFFF;
  --band-ink: #0A2340;
  --band-ink-2: #24405F;
  --band-paper: #F1F2F4;
  --band-paper-2: #E5E7EB;
  --band-line: #0A2340;
  --band-line-strong: #3B5578;
  --band-green: #8A4A00;
  --band-rose: #00579A;
  --band-sky: #0A2340;
  --band-gold: #494F57;
  --band-warn-bg: #FFF3B0;
  --band-warn-fg: #000000;
  --band-hover-bg: #123E75;
  --warn-bg: #FFF3B0;
  --warn-fg: #000000;
  --ok: #000000;
  --mod-sign: #F58426;
  --mod-listen: #006BB6;
  --mod-read: #0A2340;
  --mod-plain: #BEC0C2;
  color-scheme: light;
}

/* ---------- Amber (Charcoal & Amber) ---------- */
:root[data-palette="amber"] {
  --arc-green: #A83F08;
  --arc-rose: #14181A;
  --arc-sky: #3C4548;
  --arc-yellow: #FCEBE0;
  --arc-grey: #5F6A6E;
  --on-sign: #FFFFFF;
  --on-listen: #FFFFFF;
  --on-read: #FFFFFF;
  --on-plain: #14181A;
  --paper: #F4F7F8;
  --paper-2: #FFFFFF;
  --paper-3: #E7EDEF;
  --ink: #14181A;
  --ink-2: #3C4548;
  --line: #D5DCDE;
  --line-strong: #879093;
  --green: #A83F08;
  --rose: #14181A;
  --sky: #3C4548;
  --gold: #8A5A00;
  --link: #A83F08;
  --link-underline: #A83F08;
  --link-hover-bg: #FCEBE0;
  --btn-bg: #A83F08;
  --btn-fg: #FFFFFF;
  --focus: #A83F08;
  --focus-halo: #DCB29C;
  --mark: #A83F08;
  --accent-on-ink: #FFB070;
  --band-ink: #EEF1F2;
  --band-ink-2: #A5AEB2;
  --band-paper: #1F2326;
  --band-paper-2: #2A2F33;
  --band-line: #3B4146;
  --band-line-strong: #4A5257;
  --band-green: #FFB070;
  --band-rose: #EEF1F2;
  --band-sky: #A5AEB2;
  --band-gold: #F2C14E;
  --band-warn-bg: #3A2A0A;
  --band-warn-fg: #F2C14E;
  --band-hover-bg: #3A2414;
  --warn-bg: #FDF3DC;
  --warn-fg: #8A5A00;
  --ok: #1E7B4E;
  --mod-sign: #A83F08;
  --mod-listen: #14181A;
  --mod-read: #3C4548;
  --mod-plain: #FCEBE0;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="amber"]:not([data-theme="light"]):not([data-theme="contrast"]) {
    --arc-green: #FFB070;
    --arc-rose: #EEF1F2;
    --arc-sky: #C3CBCE;
    --arc-yellow: #3A2414;
    --arc-grey: #A5AEB2;
    --on-sign: #1F2326;
    --on-listen: #666666;
    --on-read: #4C4C4C;
    --on-plain: #EEF1F2;
    --paper: #1F2326;
    --paper-2: #2A2F33;
    --paper-3: #343A3F;
    --ink: #EEF1F2;
    --ink-2: #C3CBCE;
    --line: #3B4146;
    --line-strong: #6E7579;
    --green: #FFB070;
    --rose: #EEF1F2;
    --sky: #C3CBCE;
    --gold: #F2C14E;
    --link: #FFB070;
    --link-underline: #FFB070;
    --link-hover-bg: #3A2414;
    --btn-bg: #FFB070;
    --btn-fg: #1F2326;
    --focus: #FFB070;
    --focus-halo: #8C613E;
    --mark: #FFB070;
    --accent-on-ink: #8A3306;
    --band-ink: #EEF1F2;
    --band-ink-2: #A5AEB2;
    --band-paper: #14181A;
    --band-paper-2: #1F2326;
    --band-line: #3B4146;
    --band-line-strong: #4A5257;
    --band-green: #FFB070;
    --band-rose: #EEF1F2;
    --band-sky: #A5AEB2;
    --band-gold: #F2C14E;
    --band-warn-bg: #3A2A0A;
    --band-warn-fg: #F2C14E;
    --band-hover-bg: #93877E;
    --warn-bg: #3A2A0A;
    --warn-fg: #F2C14E;
    --ok: #6FD39A;
    --mod-sign: #FFB070;
    --mod-listen: #EEF1F2;
    --mod-read: #C3CBCE;
    --mod-plain: #3A2414;
    color-scheme: dark;
  }
  }
:root[data-palette="amber"][data-theme="dark"] {
  --arc-green: #FFB070;
  --arc-rose: #EEF1F2;
  --arc-sky: #C3CBCE;
  --arc-yellow: #3A2414;
  --arc-grey: #A5AEB2;
  --on-sign: #1F2326;
  --on-listen: #666666;
  --on-read: #4C4C4C;
  --on-plain: #EEF1F2;
  --paper: #1F2326;
  --paper-2: #2A2F33;
  --paper-3: #343A3F;
  --ink: #EEF1F2;
  --ink-2: #C3CBCE;
  --line: #3B4146;
  --line-strong: #6E7579;
  --green: #FFB070;
  --rose: #EEF1F2;
  --sky: #C3CBCE;
  --gold: #F2C14E;
  --link: #FFB070;
  --link-underline: #FFB070;
  --link-hover-bg: #3A2414;
  --btn-bg: #FFB070;
  --btn-fg: #1F2326;
  --focus: #FFB070;
  --focus-halo: #8C613E;
  --mark: #FFB070;
  --accent-on-ink: #8A3306;
  --band-ink: #EEF1F2;
  --band-ink-2: #A5AEB2;
  --band-paper: #14181A;
  --band-paper-2: #1F2326;
  --band-line: #3B4146;
  --band-line-strong: #4A5257;
  --band-green: #FFB070;
  --band-rose: #EEF1F2;
  --band-sky: #A5AEB2;
  --band-gold: #F2C14E;
  --band-warn-bg: #3A2A0A;
  --band-warn-fg: #F2C14E;
  --band-hover-bg: #93877E;
  --warn-bg: #3A2A0A;
  --warn-fg: #F2C14E;
  --ok: #6FD39A;
  --mod-sign: #FFB070;
  --mod-listen: #EEF1F2;
  --mod-read: #C3CBCE;
  --mod-plain: #3A2414;
  color-scheme: dark;
}
:root[data-palette="amber"][data-theme="contrast"][data-contrast="dark"] {
  --arc-green: #FFFFFF;
  --arc-rose: #FFFFFF;
  --arc-sky: #000000;
  --arc-yellow: #FFE772;
  --arc-grey: #000000;
  --on-sign: #000000;
  --on-listen: #000000;
  --on-read: #FFFFFF;
  --on-plain: #000000;
  --paper: #000000;
  --paper-2: #000000;
  --paper-3: #0A0A0A;
  --ink: #FFFFFF;
  --ink-2: #FFFFFF;
  --line: #FFFFFF;
  --line-strong: #FFFFFF;
  --green: #FFFFFF;
  --rose: #FFFFFF;
  --sky: #FFFFFF;
  --gold: #FFFFFF;
  --link: #FFFFFF;
  --link-underline: #FFFFFF;
  --link-hover-bg: #3A3412;
  --btn-bg: #FFFFFF;
  --btn-fg: #000000;
  --focus: #FFE772;
  --focus-halo: #000000;
  --mark: #96471F;
  --accent-on-ink: #000000;
  --band-ink: #FFFFFF;
  --band-ink-2: #FFFFFF;
  --band-paper: #000000;
  --band-paper-2: #000000;
  --band-line: #FFFFFF;
  --band-line-strong: #FFFFFF;
  --band-green: #FFFFFF;
  --band-rose: #FFFFFF;
  --band-sky: #FFFFFF;
  --band-gold: #FFFFFF;
  --band-warn-bg: #000000;
  --band-warn-fg: #FFFFFF;
  --band-hover-bg: #FFFFFF;
  --warn-bg: #000000;
  --warn-fg: #FFFFFF;
  --ok: #FFFFFF;
  --mod-sign: #8A3306;
  --mod-listen: #000000;
  --mod-read: #000000;
  --mod-plain: #FFFFFF;
  color-scheme: dark;
}
:root[data-palette="amber"][data-theme="contrast"] {
  --arc-green: #8A3306;
  --arc-rose: #000000;
  --arc-sky: #000000;
  --arc-yellow: #FFFFFF;
  --arc-grey: #000000;
  --on-sign: #FFFFFF;
  --on-listen: #FFFFFF;
  --on-read: #FFFFFF;
  --on-plain: #000000;
  --paper: #FFFFFF;
  --paper-2: #FFFFFF;
  --paper-3: #FFFFFF;
  --ink: #000000;
  --ink-2: #000000;
  --line: #000000;
  --line-strong: #000000;
  --green: #8A3306;
  --rose: #000000;
  --sky: #000000;
  --gold: #8A5A00;
  --link: #8A3306;
  --link-underline: #8A3306;
  --link-hover-bg: #FFFFFF;
  --btn-bg: #000000;
  --btn-fg: #FFFFFF;
  --focus: #8A3306;
  --focus-halo: #96471F;
  --mark: #8A3306;
  --accent-on-ink: #FFFF00;
  --band-ink: #EEF1F2;
  --band-ink-2: #A5AEB2;
  --band-paper: #1F2326;
  --band-paper-2: #2A2F33;
  --band-line: #3B4146;
  --band-line-strong: #4A5257;
  --band-green: #FFB070;
  --band-rose: #EEF1F2;
  --band-sky: #A5AEB2;
  --band-gold: #F2C14E;
  --band-warn-bg: #3A2A0A;
  --band-warn-fg: #F2C14E;
  --band-hover-bg: #3A2414;
  --warn-bg: #FDF3DC;
  --warn-fg: #8A5A00;
  --ok: #1E7B4E;
  --mod-sign: #8A3306;
  --mod-listen: #000000;
  --mod-read: #000000;
  --mod-plain: #FFFFFF;
  color-scheme: light;
}

/* ===== base ===== */
/* base.css — reset, typography, layout primitives, focus, motion policy */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-3);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--h1); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--h2); font-weight: 650; }
h3 { font-size: var(--h3); font-weight: 600; line-height: 1.2; }
h4 { font-size: var(--text-lg); font-weight: 600; }
p, ul, ol, dl, figure, pre, blockquote { margin: 0 0 var(--s-3); }
p, li, dd, figcaption { max-width: var(--measure); }
ul, ol { padding-inline-start: 1.25em; }
li + li { margin-top: 0.35em; }
small { font-size: var(--text-sm); }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-5) 0; }
code, pre { font-family: var(--font-mono); font-size: 0.95em; }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.15em; }
[hidden] { display: none !important; }

/* Links: ink text + brand underline; hover = marker highlight. Never colour alone. */
a { color: var(--link); text-decoration: underline; text-decoration-color: var(--link-underline); text-decoration-thickness: 2px; text-underline-offset: 0.18em; transition: background-color var(--t) var(--ease), text-decoration-thickness var(--t) var(--ease); border-radius: 2px; }
a:hover { background-color: var(--link-hover-bg); text-decoration-thickness: 3px; }

/* Focus: outline + halo so it contrasts against light AND dark surfaces (SC 2.4.11) */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-halo); border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* Targets ≥ 24×24 (SC 2.5.8) — buttons and controls share this floor */
button, .btn, input, select, textarea, summary { min-height: 44px; font: inherit; color: inherit; }
button { cursor: pointer; }

/* Selection + marker */
::selection { background: var(--mark); color: #1B1C1F; }
mark { background: var(--mark); color: #1B1C1F; padding: 0 0.15em; border-radius: 3px; }

/* Layout primitives */
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 720px) { .wrap { width: min(100% - 4rem, var(--wrap)); } }
.wrap--narrow { max-width: 52rem; }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--alt { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--paper); }
/* The band inverts with the theme, so both the underline and the hover ground must invert too.
   --arc-yellow measured 1.34:1 on the light band in dark theme, and the literal #3A3412 hover
   ground put dark text on dark at 1.49:1. Neither is visible to the static sweep, which cannot
   hover. --accent-on-ink and --band-hover-bg are defined per theme by every token set. */
.section--ink a { color: inherit; --link-underline: var(--accent-on-ink); --link-hover-bg: var(--band-hover-bg); }
.section--ink .eyebrow { color: var(--accent-on-ink); }
.section--ink .eyebrow::before { background: var(--accent-on-ink); }
.section--ink .btn--primary { background: var(--paper); color: var(--ink); }
.section__head { max-width: 52rem; margin-bottom: var(--s-5); }
.section__head .lead { margin-bottom: 0; }
.eyebrow { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--green); margin: 0 0 var(--s-2); display: flex; align-items: center; gap: 0.6em; }
.eyebrow::before { content: ""; width: 1.6em; height: 0.45em; border-radius: 999px; background: var(--arc-green); flex: none; }
.eyebrow--rose { color: var(--rose); } .eyebrow--rose::before { background: var(--arc-rose); }
.eyebrow--sky { color: var(--sky); } .eyebrow--sky::before { background: var(--arc-sky); }
.eyebrow--gold { color: var(--gold); } .eyebrow--gold::before { background: var(--arc-yellow); }
.lead { font-size: var(--text-xl); line-height: 1.45; color: var(--ink-2); max-width: 40ch; }
.section--ink .lead { color: var(--paper); opacity: 0.92; }
.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.flow > * + * { margin-top: var(--s-3); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.stack { display: flex; flex-direction: column; gap: var(--s-2); }
.center { text-align: center; } .center p, .center h2 { margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-2); }
.nowrap { white-space: nowrap; }
.prose > * + * { margin-top: var(--s-3); }
.prose h2 { margin-top: var(--s-6); }
.prose h3 { margin-top: var(--s-5); }
.prose ul li, .prose ol li { max-width: var(--measure); }
.two-col { display: grid; gap: var(--s-5); align-items: start; }
.two-col > *, .grid > *, .hero__grid > *, .line-wrap > * { min-width: 0; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.1fr 0.9fr; } .two-col--even { grid-template-columns: 1fr 1fr; } }

/* Motion policy: everything works with animation off; reduced-motion = genuinely calm */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .site-footer, .controls, .skip, .sl-slot, .media__play { display: none !important; }
  a { text-decoration: none; }
}

/* ---------- Right-to-left scripts ----------
   Neither Lexend nor Atkinson Hyperlegible has Arabic glyphs. Rather than let Latin acronyms sit in one
   face and the sentence around them in another, an Arabic page uses the system's Arabic-capable family
   for everything, and the taller line the script needs. Layout mirrors through the logical properties
   in components.css; nothing here moves boxes. */
:lang(ar), :lang(ar) .h-display, :lang(ar) h1, :lang(ar) h2, :lang(ar) h3 {
  --font-display: system-ui, -apple-system, 'Segoe UI', 'Noto Naskh Arabic', 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', 'Noto Naskh Arabic', 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
  letter-spacing: 0;
}
:lang(ar) body, :lang(ar) p, :lang(ar) li { line-height: 1.75; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) .line, :lang(ar) .bigline { line-height: 1.35; }

/* ===== components ===== */
/* components.css — built as a system, in design.md order.
   Direction: text-flow properties are logical (inline-start/end), so Arabic pages mirror on their own.
   The world map, the hero background and centred bars stay physical on purpose — a map does not flip. */

/* ---------- Skip link ---------- */
.skip { position: absolute; inset-inline-start: var(--s-2); top: -100px; z-index: 1000; background: var(--ink); color: var(--paper); padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; }
.skip:focus { top: var(--s-2); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; white-space: nowrap; padding: 0.7em 1.25em; border-radius: 999px; border: 2px solid transparent; font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; background: transparent; color: var(--ink); transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); }
.btn:hover { background: var(--paper-2); }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn--primary:hover { background: var(--btn-bg); color: var(--btn-fg); filter: brightness(1.15); }
.btn--secondary { border-color: var(--ink); }
.btn--ghost { border-color: var(--line); }
.btn--lg { font-size: var(--text-lg); padding: 0.85em 1.5em; }
.btn--sm { font-size: var(--text-sm); padding: 0.45em 0.9em; min-height: 36px; }
.btn .arrow { transition: transform var(--t) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
[dir="rtl"] .btn .arrow, [dir="rtl"] .door__go svg { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(3px); }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Header ---------- */
/* --page-ink-2 is computed here at :root, where --ink-2 is still the page value. .section--ink
   shadows --ink-2 for text sitting directly ON the band; anything with its own surface (a card, a
   media frame) restores the page value from this alias. Deliberately not a design token: it is a
   plumbing detail of the band, not part of the palette. */
:root { --page-ink-2: var(--ink-2); }

.site-header { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header__row { display: flex; align-items: center; gap: var(--s-2); min-height: 89px; padding-block: 0.5rem; }

/* The v2 wordmark replaces the ring-plus-text lockup. Its own guidance forbids pairing it with a
   ring or re-typesetting it, so the mark is the whole lockup; the ring stays as background
   texture elsewhere. currentColor carries it through light, dark and high contrast. */
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.brand .wordmark { width: 188px; height: 43px; flex: none; display: block; }   /* 96px is the stated minimum on screen */
.brand:hover { background: transparent; }
.brand__word sup { font-size: 0.5em; font-weight: 500; color: var(--ink-2); margin-inline-start: 0.2em; }
.site-nav { margin-inline: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
/* base.css sets `li + li { margin-top: 0.35em }` for prose lists. In this horizontal flex row that
   pushed every item after the first down by 0.35em, so "Demos" sat 6px above its siblings. The row
   spaces itself with gap; the flow margin has no business here. */
.site-nav ul li + li { margin-top: 0; }
.site-nav a { display: inline-block; padding: 0.55rem 0.6rem; font-size: 0.95rem; border-radius: 999px; text-decoration: none; font-family: var(--font-display); font-weight: 500; color: var(--ink); white-space: nowrap; }
.site-nav a:hover { background: var(--paper-2); }
.site-nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.controls { display: flex; align-items: center; gap: 0.4rem; }
.ctl { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0.4rem 0.7rem; border-radius: 999px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease); }
.ctl:hover { border-color: var(--ink); }
.ctl svg { width: 20px; height: 20px; flex: none; }
.ctl--listen[aria-pressed="true"] { background: var(--arc-rose); border-color: var(--arc-rose); color: var(--on-listen); }
.ctl-menu { position: relative; }
.ctl-menu summary { list-style: none; }
.ctl-menu summary::-webkit-details-marker { display: none; }
.ctl-menu__panel { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); width: min(92vw, 22rem); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--s-3); box-shadow: 0 12px 40px rgba(0,0,0,0.18); z-index: 200; }
.ctl-menu fieldset { border: 0; padding: 0; margin: 0 0 var(--s-3); }
.ctl-menu fieldset:last-child { margin-bottom: 0; }
.ctl-menu legend { font-family: var(--font-display); font-weight: 600; margin-bottom: 0.5rem; }
.ctl-menu .note { margin: 0 0 var(--s-3); }
.ctl-menu__last { margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.choice { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice label { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0.3rem 0.8rem; border: 2px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: var(--text-sm); }
.choice label:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.choice input { width: 1.1em; height: 1.1em; min-height: 0; margin: 0; accent-color: var(--ink); }
.menu-toggle { display: none; }
@media (max-width: 1260px) {
  .site-nav, .controls .btn--primary, .ctl--listen, .ctl-menu { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header[data-open="true"] .site-nav { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); padding: var(--s-3) var(--s-3) var(--s-4); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
  .site-header[data-open="true"] .site-nav ul { flex-direction: column; gap: 0.25rem; }
  .site-header[data-open="true"] .site-nav a { display: block; font-size: var(--text-lg); padding: 0.8rem 1rem; }
  .site-header[data-open="true"] .site-nav .mobile-extras { display: block; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
  .mobile-extras .ctl, .mobile-extras .ctl-menu { display: inline-flex; }
  .mobile-extras .ctl-menu__panel { position: static; box-shadow: none; width: 100%; margin-top: 0.5rem; }
  .site-header[data-open="true"] .nav-menu > summary { display: flex; justify-content: space-between; font-size: var(--text-lg); padding: 0.8rem 1rem; }
  .site-header[data-open="true"] .site-nav .nav-menu__panel { position: static; width: auto; max-width: none; box-shadow: none; border: 0; border-inline-start: 2px solid var(--line); border-radius: 0; margin: 0.1rem 0 0.6rem; margin-inline-start: 1rem; padding: 0; padding-inline-start: 0.6rem; }
  .site-header[data-open="true"] .site-nav .nav-menu__panel a { font-size: var(--text-base); padding: 0.6rem 0.7rem; }
  .mobile-extras .btn--primary { display: inline-flex; margin-top: var(--s-2); }
}
@media (min-width: 1261px) { .mobile-extras { display: none; } }
/* Between the mobile breakpoint and a comfortable desktop the header has to carry five nav groups,
   Access settings, the switcher and the CTA. The longest locale (French) overflowed here, so the
   bar tightens in stages instead of pushing "Parlez-nous" off the edge. */
/* No upper bound: capping this at 1400px meant the bar sprang back to full padding on wide screens
   and the longest locales (Indonesian, French) overflowed there instead. */
@media (min-width: 1261px) {
  .site-nav a, .nav-menu > summary { padding-inline: 0.32rem; }
  .site-header__row { gap: 0.25rem; }
  .brand { font-size: 1.3rem; }
}
/* Five nav groups plus four controls and the CTA is a full bar, and the verbose locales
   (French, Indonesian) run longest. The ring alone still reads as the brand and still links
   home, so the wordmark is the first thing to go rather than a nav label. */

/* The tightest desktop band, just above the drawer breakpoint: French still ran 19px long here. */
@media (min-width: 1261px) and (max-width: 1300px) {
  .site-header__row { gap: 0.25rem; }
  .site-nav a, .nav-menu > summary { padding-inline: 0.35rem; }
  /* Only when the bar is actually crowded — otherwise this control would sit label-less next to
     Listen and Display, which still show theirs. */
}

/* ---------- Country switcher ------------------------------------------------
   No flags: they carry politics and are unreadable at small sizes. The country
   name and the sign-language short name do the work. */
.cswitch > summary { max-width: 14rem; }
.cswitch > summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cswitch__intro, .cswitch__note { font-size: var(--text-sm); color: var(--ink-2); margin: 0 0 var(--s-2); }
.cswitch__note { margin: var(--s-2) 0 0; }
.cswitch__list { list-style: none; margin: 0; padding: 0; max-height: min(52vh, 26rem); overflow-y: auto; }
.cswitch__list li + li { margin-top: 0.15rem; }
.cswitch__list a { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.5rem 0.6rem; border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.cswitch__list a:hover { background: var(--paper-2); }
.cswitch__list a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.cswitch__name { font-family: var(--font-display); font-weight: 600; }
.cswitch__sl { font-size: var(--text-sm); color: var(--ink-2); }
.cswitch__list a[aria-current="true"] .cswitch__sl { color: var(--paper); }
.cswitch__state { font-size: 0.72rem; }
@media (max-width: 1260px) { .controls .cswitch { display: none; } .mobile-extras .cswitch { display: block; margin-top: var(--s-2); } .mobile-extras .cswitch .ctl-menu__panel { position: static; box-shadow: none; width: 100%; } .mobile-extras .cswitch > summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* The merged control: one button that turns signed video on and chooses which sign language it is. */
.cswitch__watch { display: flex; width: 100%; align-items: center; justify-content: center; gap: 0.4rem; margin-bottom: var(--s-3); border: 2px solid var(--line-strong); background: var(--paper); color: var(--ink); }
.cswitch__watch:hover { border-color: var(--ink); }
.cswitch__watch[aria-pressed="true"] { background: var(--arc-green); border-color: var(--arc-green); color: var(--on-sign); }
.cswitch__watch svg { flex: none; }
/* Signed mode is on: say so on the closed control, so it reads without opening the panel. */
:root[data-sl="on"] .cswitch > summary { background: var(--arc-green); border-color: var(--arc-green); color: var(--on-sign); }

/* ---------- Access status line ----------------------------------------------
   Sits directly under every H1. It is generated from what the page actually holds,
   so "pending" is a fact about this page, not a promise someone forgot to update. */
.access-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: var(--s-2) 0 var(--s-3); padding: 0.5rem 0 0; font-family: var(--font-display); font-size: var(--text-sm); color: var(--ink-2); border-top: 1px solid var(--line); }
.access-status__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.access-status__item svg { flex: none; opacity: 0.75; }
.access-status strong { color: var(--ink); font-weight: 600; }
/* Pending is stated, not apologised for — same weight as any other status, no alarm colour. */
.access-status__item--pending strong { font-weight: 500; }
.access-status__listen { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0.25rem 0.6rem; margin: -0.25rem 0; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.access-status__listen:hover { background: var(--paper-2); }
.access-status__listen[aria-pressed="true"] { background: var(--arc-rose); border-color: var(--arc-rose); color: var(--on-listen); }
.access-status__how { color: var(--ink-2); }
.section--ink .access-status, .hero .access-status { border-top-color: var(--line); }

/* ---------- Grouped navigation ----------------------------------------------
   Solutions / Who it's for / Community / Resources are <details> disclosures:
   native HTML, keyboard-operable for free, and readable with JS off. Panels are
   absolutely positioned on desktop and inline inside the drawer on mobile. */
.nav-group { position: relative; }
.nav-menu > summary { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; padding: 0.55rem 0.6rem; font-size: 0.95rem; border-radius: 999px; font-family: var(--font-display); font-weight: 500; color: var(--ink); white-space: nowrap; cursor: pointer; list-style: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:hover { background: var(--paper-2); }
/* The section you are in is marked with a rule, not colour alone. */
.nav-menu[data-here="true"] > summary { box-shadow: inset 0 -3px 0 var(--ink); border-radius: 999px; }
.nav-menu .chev { flex: none; transition: transform var(--t) var(--ease); }
.nav-menu[open] .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .nav-menu .chev { transition: none; } }

.site-nav .nav-menu__panel { display: block; position: absolute; inset-inline-start: 0; top: calc(100% + 8px); width: max(20rem, 100%); max-width: 92vw; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0.4rem; box-shadow: 0 12px 40px rgba(0,0,0,0.18); z-index: 200; }
.site-nav .nav-menu__panel > li + li { margin-top: 0.15rem; }
.site-nav .nav-menu__panel a { display: block; white-space: normal; padding: 0.6rem 0.7rem; border-radius: var(--radius); font-weight: 400; }
.site-nav .nav-menu__panel .nav-menu__label { display: block; font-family: var(--font-display); font-weight: 600; }
.site-nav .nav-menu__panel .nav-menu__blurb { display: block; font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-2); margin-top: 0.1rem; }
/* The current page inverts, so its blurb has to come with it or it drops to ~2:1. */
.site-nav .nav-menu__panel a[aria-current="page"] .nav-menu__blurb { color: var(--paper); }

.country-group { margin-bottom: var(--s-5); }
.country-group__h { font-size: var(--text-xl); margin: 0 0 0.2rem; }
.country-group__note { color: var(--ink-2); font-size: var(--text-sm); margin: 0 0 var(--s-3); }
.access-settings { display: flex; align-items: center; gap: 0.4rem; }

/* ---------- Ring mark (brand) ---------- */
.ring { display: inline-block; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3rem, 6vw, 6rem) var(--section); position: relative; overflow: hidden; }
.hero__grid { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero h1 { max-width: 14ch; }
.hero h1.h1--long { max-width: 18ch; font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); }
.hero .lead { max-width: 42ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.9; }
.hero__bg svg { position: absolute; right: -8vw; top: -30vh; width: min(70vw, 900px); height: min(70vw, 900px); opacity: 0.22; }
@media (max-width: 959px) { .hero__bg svg { right: -45vw; top: auto; bottom: -20vh; width: 110vw; height: 110vw; opacity: 0.14; } }

/* ---------- Plain words (the short, grade-5 summary) ---------- */
.plain { border-inline-start: 6px solid var(--mod-plain); background: var(--paper-2); padding: var(--s-2) var(--s-3); border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); margin-block: var(--s-3) var(--s-4); max-width: 60ch; }
.plain__label { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold); margin: 0 0 0.25rem; display: flex; align-items: center; gap: 0.5em; }
.plain p:last-child { margin-bottom: 0; font-size: var(--text-lg); line-height: 1.45; }
.plain [data-alt] { display: none; }
:root[data-lang="alt"] .plain--dual [data-alt] { display: block; }
:root[data-lang="alt"] .plain--dual [data-primary] { display: none; }

/* ---------- Section toolbar (Listen / SL per section) ---------- */
.sec-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--s-3); }
.sec-tools .btn--sm svg { width: 18px; height: 18px; }

/* ---------- Self-ID router doors ---------- */
.doors { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.door { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: var(--s-4); border: 2px solid var(--line); border-radius: var(--radius); background: var(--paper); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); min-height: 100%; }
.door:hover, .door:focus-within { border-color: var(--ink); box-shadow: 0 10px 26px rgba(0,0,0,0.10); }
.door__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--paper-2); }
.door__icon svg { width: 32px; height: 32px; }
.door--access .door__icon { background: color-mix(in srgb, var(--arc-sky) 45%, var(--paper)); }
.door--create .door__icon { background: color-mix(in srgb, var(--arc-green) 45%, var(--paper)); }
.door--provide .door__icon { background: color-mix(in srgb, var(--arc-yellow) 60%, var(--paper)); }
.door h3 { margin: 0; font-size: var(--text-xl); }
.door h3 a { text-decoration: none; color: inherit; }
.door h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.door h3 a:hover { background: transparent; }
.door p { margin: 0; color: var(--ink-2); }
.door__go { margin-top: auto; font-family: var(--font-display); font-weight: 600; display: flex; align-items: center; gap: 0.4em; }
.door__go svg { width: 20px; height: 20px; transition: transform var(--t) var(--ease); }
.door:hover .door__go svg { transform: translateX(4px); }
[dir="rtl"] .door:hover .door__go svg { transform: scaleX(-1) translateX(4px); }
.triad { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--ink); display: flex; flex-wrap: wrap; gap: 0.35em 0.6em; margin: 0; }
.triad span { white-space: nowrap; }
.triad span:not(:last-child)::after { content: "·"; margin-inline-start: 0.6em; color: var(--arc-green); }
.quiet-link { margin-top: var(--s-3); color: var(--ink-2); }

/* ---------- Receipt (the signature component) ---------- */
.receipt { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s-3) var(--s-3) var(--s-2); max-width: 40rem; }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 6px; background: radial-gradient(circle at 6px 0, transparent 5px, var(--paper-2) 5.5px) 0 0 / 12px 6px repeat-x; }
.receipt--stat { padding-top: var(--s-3); }
.receipt__headline { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); line-height: 1; letter-spacing: -0.02em; margin: 0 0 var(--s-2); color: var(--ink); }
.receipt__text { margin: 0 0 var(--s-2); font-size: 1rem; }
.receipt--stat .receipt__text { color: var(--ink-2); }
.receipt__source { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; margin: 0; padding-top: 0.6rem; border-top: 1px dashed var(--line-strong); font-size: var(--text-sm); color: var(--ink-2); font-family: var(--font-mono); }
.receipt__icon { flex: none; color: var(--green); }
.receipt__label { font-weight: 700; color: var(--ink); }
.receipt__link { font-family: var(--font-body); color: var(--ink); }
.receipt--inline { display: inline; }
.receipt__source--inline { display: inline; border: 0; padding: 0; font-family: var(--font-mono); }
.receipt--unverified { border-color: var(--warn-fg); background: var(--warn-bg); }
.receipt--unverified .receipt__source { border-top-color: var(--warn-fg); }
.receipts { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); align-items: stretch; }
.receipts .receipt { max-width: none; height: 100%; }
.receipts .receipt--stat { display: flex; flex-direction: column; }
.receipts .receipt--stat .receipt__text { flex: 1; }
.badge { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; padding: 0.15em 0.6em; border-radius: 999px; background: var(--warn-fg); color: var(--warn-bg); margin-inline-start: 0.5em; }
.badge--ok { background: var(--green); color: var(--paper); }

/* ---------- House line (callout) ---------- */
.line { font-family: var(--font-display); font-weight: 650; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); line-height: 1.2; letter-spacing: -0.015em; max-width: 22ch; margin: 0; padding-inline-start: var(--s-3); border-inline-start: 8px solid var(--arc-green); text-wrap: balance; }
.line--rose { border-color: var(--arc-rose); } .line--sky { border-color: var(--arc-sky); } .line--gold { border-color: var(--arc-yellow); }
.line--center { margin-inline: auto; border: 0; padding: 0; text-align: center; max-width: 26ch; }
.line-wrap { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 900px) { .line-wrap { grid-template-columns: 1fr 1fr; } }

/* ---------- Media: real video (facade) and MediaPending ---------- */
.media { margin: 0; max-width: 52rem; }
.media--full { max-width: none; }
/* The player and the sign-language window keep a dark surround in EVERY page theme. A signer's
   hands and face need the frame to recede, and captions are read on dark. So the frame carries its
   own palette rather than the page's — including lighter ring arcs, because two of this system's
   arcs are near-navy and would disappear against a dark ground. */
.media__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  --frame-bg: #0D1B2E; --frame-ink: #FFFFFF; --frame-ink-2: #C9D3E3; --frame-line: #2F4E7A;
  --arc-sky: #7FC4FF; --arc-grey: #9DB2CE;
  background: var(--frame-bg); border: 1px solid var(--frame-line); color: var(--frame-ink); }
:root[data-theme="contrast"] .media__frame { --frame-bg: #000000; --frame-ink: #FFFFFF; --frame-ink-2: #FFFFFF; --frame-line: #FFFFFF; }
.media__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; display: grid; place-items: center; }
.media__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; transition: transform var(--t) var(--ease); }
.media__play:hover img { transform: scale(1.02); }
.media__playicon { position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--paper); color: var(--ink); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.media__playicon svg { width: 34px; height: 34px; margin-inline-start: 4px; }
.media__playlabel { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; color: #fff; text-align: start; font-family: var(--font-display); font-weight: 600; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
.media__meta { margin-top: 0.75rem; font-size: var(--text-sm); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; max-width: none; }
.media__meta strong { color: var(--ink); }
/* Pending placeholders hold text, not video, so they grow with their note instead of
   inheriting the 16/9 frame — which clipped longer notes at the bottom. */
.media--pending .media__frame { aspect-ratio: auto; min-height: 20rem; }
.media--pending .media__frame { display: grid; place-items: center; text-align: center; padding: var(--s-4); background:
  repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--frame-line) 70%, transparent) 14px 15px), var(--frame-bg); }
.media--pending .media__inner { display: grid; gap: 0.5rem; justify-items: center; max-width: 34ch; }
.media--pending .ring { width: 64px; height: 64px; }
.media__pending-title { font-family: var(--font-display); font-weight: 650; font-size: var(--text-xl); margin: 0; line-height: 1.2; color: var(--frame-ink); }
.media__pending-note { margin: 0; color: var(--frame-ink-2); font-size: 1rem; }
.chip { display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; padding: 0.2em 0.65em; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink); }
.chip--sign { background: color-mix(in srgb, var(--mod-sign) 35%, var(--paper)); }
.chip--listen { background: color-mix(in srgb, var(--mod-listen) 35%, var(--paper)); }
.chip--read { background: color-mix(in srgb, var(--mod-read) 35%, var(--paper)); }
.chip--plain { background: color-mix(in srgb, var(--mod-plain) 50%, var(--paper)); }
.chip--pending { border-style: dashed; }

/* SL slots: collapsed by default, expanded when the header toggle is on (or per-slot) */
.sl-slot { margin-block: var(--s-3) var(--s-4); }
.sl-slot__open { display: inline-flex; }
.sl-slot__body { display: none; margin-top: var(--s-2); }
.sl-slot[data-open="true"] .sl-slot__body { display: block; }
.sl-slot[data-open="true"] .sl-slot__open { display: none; }
.sl-slot--hero .sl-slot__body { display: block; }
.sl-slot--hero .sl-slot__open { display: none; }
:root[data-sl="on"] .sl-slot .sl-slot__body { display: block; }
:root[data-sl="on"] .sl-slot .sl-slot__open { display: none; }

/* ---------- Steps ---------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.steps li { counter-increment: step; position: relative; padding: var(--s-3); padding-top: calc(var(--s-3) + 2.6rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.steps li::before { content: counter(step); position: absolute; top: var(--s-3); inset-inline-start: var(--s-3); width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; background: var(--ink); color: var(--paper); }
.steps li:nth-child(1)::before { background: var(--arc-green); color: var(--on-sign); }
.steps li:nth-child(2)::before { background: var(--arc-sky); color: var(--on-read); }
.steps li:nth-child(3)::before { background: var(--arc-yellow); color: var(--on-plain); }
.steps li:nth-child(4)::before { background: var(--arc-rose); color: var(--on-listen); }
.steps h3 { font-size: var(--text-lg); margin-bottom: 0.5rem; }
.steps p { margin: 0; color: var(--ink-2); }

/* ---------- Code (labelled for AT) ---------- */
.code { margin: 0; max-width: 52rem; min-width: 0; }
.code pre { margin: 0; max-width: 100%; background: #16181D; color: #ECEBE6; padding: var(--s-3); border-radius: var(--radius); overflow-x: auto; font-size: 0.95rem; line-height: 1.55; tab-size: 2; }
:root[data-theme="contrast"] .code pre { background: #000; color: #fff; border: 2px solid #000; }
.code figcaption { font-size: var(--text-sm); color: var(--ink-2); margin-bottom: 0.5rem; }
.code .c { color: #9DA3AE; } .code .k { color: #EADE78; } .code .s { color: #78C0DE; } .code .n { color: #5FD3A6; }

/* ---------- Signal meter ---------- */
.signals { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); counter-reset: sig; }
.signal { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-3); background: var(--paper); display: flex; flex-direction: column; gap: 0.35rem; }
.signal__name { font-family: var(--font-display); font-weight: 600; margin: 0; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }
.signal__value { margin: 0; display: flex; align-items: baseline; gap: 0.4em; flex-wrap: wrap; }
.signal__number { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1; letter-spacing: -0.02em; }
.signal--zero .signal__number { color: var(--ink-2); }
.signal--zero .signal__number::after { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-inline-start: 0.3em; border-radius: 50%; background: var(--arc-yellow); vertical-align: middle; }
.signal--unknown .signal__number { font-size: var(--text-xl); color: var(--ink-2); font-weight: 600; text-transform: capitalize; }
.signal--live .signal__number { color: var(--green); }
.signal__unit { font-size: var(--text-sm); color: var(--ink-2); }
.signal__what { margin: 0; font-size: 1rem; }
.signal__note { margin: 0; font-size: var(--text-sm); color: var(--ink-2); border-top: 1px dashed var(--line-strong); padding-top: 0.5rem; margin-top: auto; }
.signals__caption { color: var(--ink-2); font-size: var(--text-sm); max-width: none; }

/* ---------- Cards / proof ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-4); background: var(--paper); height: 100%; }
.card h3 { margin-bottom: 0.5rem; }
.card .receipt { margin-top: var(--s-2); max-width: none; }
.card--accent { border-top: 8px solid var(--arc-green); }
.card--rose { border-top-color: var(--arc-rose); } .card--sky { border-top-color: var(--arc-sky); } .card--gold { border-top-color: var(--arc-yellow); }
.proof { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: start; }

/* ---------- Lists with icons ---------- */
.iconlist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.iconlist li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.75rem; align-items: start; }
.iconlist li::before { content: ""; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line); }
.iconlist li:nth-child(4n+1)::before { background: color-mix(in srgb, var(--arc-green) 40%, var(--paper)); }
.iconlist li:nth-child(4n+2)::before { background: color-mix(in srgb, var(--arc-sky) 40%, var(--paper)); }
.iconlist li:nth-child(4n+3)::before { background: color-mix(in srgb, var(--arc-yellow) 55%, var(--paper)); }
.iconlist li:nth-child(4n+4)::before { background: color-mix(in srgb, var(--arc-rose) 40%, var(--paper)); }
.iconlist strong { display: block; font-family: var(--font-display); font-weight: 600; }

/* ---------- Country list ---------- */
.countries { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.countries .country { border: 2px solid var(--line); border-radius: var(--radius); padding: var(--s-3); display: flex; flex-direction: column; gap: 0.5rem; position: relative; background: var(--paper); }
.countries .country--live { border-color: var(--ink); }
.countries .country__code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-2); }
.countries .country h3 { margin: 0; }
.countries .country h3 a { text-decoration: none; }
.countries .country h3 a::after { content: ""; position: absolute; inset: 0; }
.countries .country p { margin: 0; color: var(--ink-2); }
.countries .country__sl { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.countries .country--coming { border-style: dashed; }

/* ---------- Country hero (bilingual) ---------- */
.bilingual { display: grid; gap: var(--s-3); }
.bilingual p { margin: 0; }
.bilingual .greeting { font-family: var(--font-display); font-weight: 650; font-size: var(--text-xl); line-height: 1.3; }
/* ---------- Language switch (localised country pages) ----------
   Two real links to two real URLs, styled as one segmented control so the divider between them is
   unmistakable and the current language is filled rather than merely underlined. It was previously
   unstyled: two bare inline links separated by a single space, which read as one phrase and put the
   "back to English" target directly under the pointer that had just chosen the other language. */
.lang-switch {
  display: inline-flex; align-items: stretch; margin: 0 0 var(--s-2);
  border: 2px solid var(--line-strong); border-radius: 999px; overflow: hidden;
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600;
}
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.35rem 1.1rem; text-decoration: none;
  color: var(--ink); background: transparent; white-space: nowrap;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
/* The divider. A separate element rather than a "|" character, so it is not read out as content. */
.lang-switch a + a { border-inline-start: 2px solid var(--line-strong); }
.lang-switch a:hover { background: var(--paper-2); }
/* The language you are reading, filled. aria-current already says the same thing to a screen reader. */
.lang-switch a[aria-current] { background: var(--ink); color: var(--paper); cursor: default; }
.lang-switch a[aria-current]:hover { background: var(--ink); color: var(--paper); }
/* Inside the inverted band the hero palette flips; keep the control readable there too. */
.section--ink .lang-switch { border-color: var(--paper); }
.section--ink .lang-switch a { color: var(--paper); }
.section--ink .lang-switch a + a { border-inline-start-color: var(--paper); }
.section--ink .lang-switch a[aria-current] { background: var(--paper); color: var(--ink); }

.lang-toggle { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.lang-toggle button { border: 0; background: transparent; padding: 0.4rem 1rem; font-family: var(--font-display); font-weight: 600; min-height: 40px; }
.lang-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- Team ---------- */
.team { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.team li { display: flex; gap: var(--s-2); align-items: center; }
.avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--avatar-fg, var(--on-plain)); flex: none; }
.team strong { display: block; font-family: var(--font-display); }
.team span { color: var(--ink-2); font-size: var(--text-sm); }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--s-3); max-width: 44rem; }
.field { display: grid; gap: 0.4rem; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 0.5rem; }
.field label, .field legend { font-family: var(--font-display); font-weight: 600; }
.field .hint { color: var(--ink-2); font-size: var(--text-sm); margin: 0; }
.field input, .field select, .field textarea { width: 100%; padding: 0.7rem 0.9rem; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font-size: 1rem; }
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--ink); }
.field--error input, .field--error textarea { border-color: var(--rose); }
.error { color: var(--rose); font-weight: 700; margin: 0; font-size: var(--text-sm); }
.error:empty { display: none; }
.routes { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.routes label { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; border: 2px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; min-height: 44px; font-weight: 600; font-family: var(--font-display); }
.routes label:has(input:checked) { border-color: var(--ink); background: var(--paper-2); }
.routes input { width: 1.2em; height: 1.2em; min-height: 0; margin: 0; accent-color: var(--ink); flex: none; }
.form__status { border-inline-start: 6px solid var(--arc-green); background: var(--paper-2); padding: var(--s-2) var(--s-3); border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }
.form__status:empty { display: none; }
.newsletter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
.newsletter .field { flex: 1 1 14rem; }

/* ---------- Contact routes (visible on every page) ---------- */
.ways { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.ways li { display: flex; gap: 0.75rem; align-items: flex-start; }
.ways svg { width: 24px; height: 24px; flex: none; margin-top: 0.15em; }
.ways strong { font-family: var(--font-display); display: block; }

/* ---------- Details / FAQ ---------- */
details.disclosure { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 var(--s-3); background: var(--paper); }
details.disclosure + details.disclosure { margin-top: 0.5rem; }
details.disclosure summary { cursor: pointer; padding: 0.9rem 0; font-family: var(--font-display); font-weight: 600; display: flex; align-items: center; gap: 0.6rem; list-style: none; }
details.disclosure summary::-webkit-details-marker { display: none; }
details.disclosure summary::before { content: ""; width: 0.6em; height: 0.6em; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(-45deg); transition: transform var(--t) var(--ease); flex: none; margin-inline-start: 0.2em; }
details.disclosure[open] summary::before { transform: rotate(45deg); }
details.disclosure .disclosure__body { padding-bottom: var(--s-3); }
.transcript { margin-top: var(--s-2); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
th, td { text-align: start; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--font-display); font-weight: 600; }
caption { text-align: start; font-family: var(--font-display); font-weight: 600; padding-bottom: 0.5rem; }

/* ---------- Listen player (text reader, draft) ---------- */
.listen-bar { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 150; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 0.5rem 0.75rem 0.5rem 1rem; display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 12px 40px rgba(0,0,0,0.35); max-width: calc(100vw - 2rem); }
.listen-bar[hidden] { display: none; }
.listen-bar .btn { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 40%, transparent); min-height: 40px; }
.listen-bar .btn:hover { background: color-mix(in srgb, var(--paper) 15%, transparent); }
.listen-bar__label { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
.is-reading { background: color-mix(in srgb, var(--mod-listen) 35%, var(--paper)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--mod-listen) 35%, var(--paper)); border-radius: 4px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--paper-2); border-top: 1px solid var(--line); padding-block: var(--s-6) var(--s-4); margin-top: auto; }
.site-footer__grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.site-footer h2 { font-size: var(--text-lg); margin-bottom: var(--s-2); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: 0.5rem; }
.site-footer__bottom { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; justify-content: space-between; color: var(--ink-2); font-size: var(--text-sm); }
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.site-footer__bottom li + li { margin-top: 0; }

/* ---------- Preview banner ---------- */
.preview-banner { background: var(--warn-bg); color: var(--warn-fg); border-bottom: 2px solid var(--warn-fg); padding: 0.6rem 1rem; font-size: var(--text-sm); font-family: var(--font-display); font-weight: 600; text-align: center; }

/* ---------- Misc ---------- */
.kicker { font-family: var(--font-display); font-weight: 600; color: var(--ink-2); }
.divider { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--arc-yellow) 0 25%, var(--arc-green) 25% 50%, var(--arc-rose) 50% 75%, var(--arc-sky) 75% 100%); width: min(100%, 14rem); margin: var(--s-4) 0; }
.strands { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.strand { padding: var(--s-3); border-radius: var(--radius); background: var(--paper-2); border-top: 8px solid var(--arc-green); }
.section--alt .strand { background: var(--paper); }
.strand:nth-child(2) { border-top-color: var(--arc-sky); } .strand:nth-child(3) { border-top-color: var(--arc-yellow); }
.strand h3 { margin-bottom: 0.4rem; font-size: var(--text-lg); }
.strand p { margin: 0; color: var(--ink-2); }
.note { font-size: var(--text-sm); color: var(--ink-2); }
.big-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.big-list li { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); padding: 0.6rem 0; border-bottom: 1px solid var(--line); max-width: none; }
.big-list li span { font-family: var(--font-body); font-weight: 400; color: var(--ink-2); font-size: 1rem; display: block; }

/* Receipts inside dark sections keep their light card; inline receipts inherit */
/* A light-surfaced component sitting inside the inverted band restores a readable palette. These
   were literal v1.1 hexes, so every design system's band rendered in v1.1 colours regardless of its
   own palette — the drift that made a ledger-build receipt look like a v1.1 receipt. Now tokens. */
.section--ink .receipt { color: var(--band-ink); --ink: var(--band-ink); --ink-2: var(--band-ink-2); --paper: var(--band-paper); --paper-2: var(--band-paper-2); --line: var(--band-line); --line-strong: var(--band-line-strong); --green: var(--band-green); --rose: var(--band-rose); --sky: var(--band-sky); --gold: var(--band-gold); --warn-bg: var(--band-warn-bg); --warn-fg: var(--band-warn-fg); }
.section--ink .receipt a { color: var(--band-ink); --link-underline: var(--band-green); --link-hover-bg: var(--band-paper-2); }
.section--ink .receipt--inline, .section--ink .receipt--inline a { color: inherit; }
.section--ink .plain { color: var(--band-ink); --ink: var(--band-ink); --ink-2: var(--band-ink-2); --paper-2: var(--band-paper-2); --gold: var(--band-gold); --green: var(--band-green); --rose: var(--band-rose); --sky: var(--band-sky); }
/* Ghost buttons need the same inversion as secondary ones. Until the access layer started placing
   "Listen to this section" into every band, no ghost button had ever landed inside .section--ink,
   so this rule did not exist and the control rendered --ink on --ink: invisible at 1.00:1. */
.section--ink .btn--secondary, .section--ink .btn--ghost { border-color: var(--paper); color: var(--paper); }
.section--ink .btn--secondary:hover, .section--ink .btn--ghost:hover { background: rgba(255,255,255,0.12); }
/* Same reason: the status line under an H1 that sits inside an inverted hero. */
.section--ink .access-status { color: var(--band-ink-2); border-top-color: var(--band-line); }
.section--ink .access-status strong { color: var(--paper); }
.section--ink .access-status__listen { border-color: var(--paper); color: var(--paper); }
.section--ink .access-status__how { color: var(--band-ink-2); }

/* Narrow screens: buttons may wrap rather than overflow (header CTA is in the menu there) */
@media (max-width: 600px) { .btn { white-space: normal; text-align: center; } }

/* Very narrow screens / 400% zoom: icon-only menu button (name stays for AT), tighter header */
@media (max-width: 480px) {
  .site-header__row { gap: 0.5rem; }
  .brand { font-size: 1.25rem; gap: 0.4rem; }
  .brand .ring { width: 34px; height: 34px; }
  .menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-toggle { padding-inline: 0.6rem; }
  .lang-toggle { width: 100%; } .lang-toggle button { flex: 1; }
  .hero__actions > * { max-width: 100%; }
}

/* ---------- Pattern (a local story, abstracted: problem → what happened → benefit) ---------- */
.pattern { display: flex; flex-direction: column; gap: 0.75rem; }
.pattern__kicker { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.pattern h3 { margin: 0; }
.pattern__psb { margin: 0; display: grid; gap: 0.6rem; }
.pattern__psb div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem; align-items: start; }
.pattern__psb dt { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--ink-2); padding-top: 0.1em; }
.pattern__psb dd { margin: 0; font-size: 1rem; }
.pattern__benefit { margin: 0; }
.pattern .receipt { margin-top: 0.25rem; }
.pattern__where { margin: 0; font-size: var(--text-sm); }
@media (max-width: 480px) { .pattern__psb div { grid-template-columns: 1fr; gap: 0.1rem; } }
.patterns { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); align-items: start; }
.patterns--compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* ---------- Demo gallery ---------- */
.gallery { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.video__also { margin: 0.35rem 0 0; font-size: var(--text-sm); color: var(--ink-2); }
.media--gallery { max-width: none; }
.media--gallery video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.media--review .media__frame { outline: 3px dashed var(--warn-fg); outline-offset: 3px; }
.video__shows { margin: 0.5rem 0 0; max-width: none; }
.video__note { margin-top: 0.4rem; }
.gallery-group + .gallery-group { border-top: 1px solid var(--line); }

/* Six nav items (Cinema live): keep the header on one line by showing icon-only Listen/Display until one item moves to the footer */
/* Header compression is a fact about width, not about how many nav groups there are. It used to key
   off a build-time `nav-wide` class counting items; that guessed wrong the moment the group count
   changed while the locale's labels stayed long. Stages, by measured width: */
@media (min-width: 1261px) {
  /* All three controls are icon-only here. The text stays in the DOM, clipped, and each summary
     carries an aria-label naming the current value ("Sign language: Global · IS"), so the
     accessible name is unchanged — only the pixels are gone. */
  .controls .ctl--listen span, .controls .ctl-menu summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .controls .ctl--listen, .controls .ctl-menu summary { padding-inline: 0.6rem; }
  .site-nav .nav-menu__panel a { padding-inline: 0.7rem; }
}
}

/* ---------- Country map (decorative silhouette + real links) ---------- */
.cmap { margin-top: var(--s-3); }
.cmap__stage { position: relative; width: 100%; max-width: 1100px; margin-inline: auto; }
.cmap__world { width: 100%; height: auto; display: block; }
.cmap__world path { fill: var(--paper-3); stroke: var(--paper); stroke-width: 0.6; }
:root[data-theme="contrast"] .cmap__world path { fill: #E6E6E6; stroke: #000; stroke-width: 0.8; }
.cmap__pins { position: absolute; inset: 0; }
.cmap__pin { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-decoration: none; padding: 0.35rem; border-radius: var(--radius-sm); min-width: 44px; min-height: 44px; justify-content: center; }
.cmap__pin:hover { background: transparent; }
.cmap__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--green); border: 3px solid var(--paper); box-shadow: 0 2px 8px rgba(0,0,0,.3); transition: transform var(--t) var(--ease); }
.cmap__pin--presence .cmap__dot { background: var(--paper); border-color: var(--green); }
.cmap__pin:hover .cmap__dot, .cmap__pin:focus-visible .cmap__dot { transform: scale(1.25); }
.cmap__label { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; line-height: 1.1; text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0.15em 0.6em; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.cmap__sl { color: var(--ink-2); font-weight: 500; }
.cmap__pin:hover .cmap__label, .cmap__pin:focus-visible .cmap__label { border-color: var(--ink); }
.cmap__note { margin: var(--s-3) auto 0; text-align: center; max-width: 52ch; color: var(--ink-2); font-size: var(--text-sm); }
@media (max-width: 700px) { .cmap__label { font-size: 0.75rem; padding: 0.1em 0.45em; } .cmap__sl { display: none; } .cmap__dot { width: 15px; height: 15px; border-width: 2px; } }
@media (prefers-reduced-motion: reduce) { .cmap__dot { transition: none; } }

/* ---------- Country chooser (disclosure; works with no JavaScript) ---------- */
.chooser { position: relative; display: inline-block; }
.chooser summary { list-style: none; cursor: pointer; }
.chooser summary::-webkit-details-marker { display: none; }
.chooser__list { position: absolute; z-index: 60; inset-inline-start: 0; top: calc(100% + 6px); margin: 0; padding: 0.5rem; list-style: none; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.18); min-width: 20rem; max-width: min(90vw, 26rem); }
.chooser__list li + li { margin-top: 0.15rem; }
.chooser__list a { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); text-decoration: none; min-height: 44px; }
.chooser__list a:hover { background: var(--paper-2); }

/* ---------- Country facts table ---------- */
/* No overflow clipping here: the row detail panel is absolutely positioned and would be cut off by
   it. The rounded corners are put back on the first and last row instead. */
.facts { margin: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.facts > .fact:first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.facts > .fact:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.fact { display: grid; grid-template-columns: 12rem 1fr; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); background: var(--paper); }
.fact:last-child { border-bottom: 0; }
.fact dt { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--ink-2); }
.fact dd { margin: 0; }
/* ---------- Statline: an inline sourced figure inside narrative copy ----------
   Used on the country-trio partner pages, where a number sits in the middle of the story rather
   than in the stat table. Same idea as a receipt: the value leads, the source follows in mono. */
.statline { margin: var(--s-2) 0; padding-inline-start: var(--s-2); border-inline-start: 4px solid var(--arc-sky); max-width: var(--measure); }
.statline > strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.1; }
.statline__src { display: block; margin-top: 0.3rem; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-2); }

/* ---------- Stat box: the detail behind one link per row ----------
   The row shows the number and its label. What it measures, its source and its year sit in a panel
   that opens on HOVER and on KEYBOARD FOCUS. Hover alone would fail WCAG 2.2 SC 1.4.13 and shut out
   keyboard and touch users. The wrapper carries :hover (not the link) so the pointer can move into
   the panel without closing it, and :focus-within keeps it open while tabbing through. */
.fact__value { font-size: var(--text-lg); }
.fact__more { position: relative; display: inline-block; margin-inline-start: 0.4rem; vertical-align: baseline; }
.fact__more-link {
  display: inline-flex; align-items: center; gap: 0.25em;
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-2);
  text-decoration: none; border-bottom: 1px dotted var(--line-strong);
  padding: 0.15em 0.1em; min-height: 24px;
}
.fact__more-link:hover, .fact__more-link:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
/* Present in the accessibility tree at all times, so aria-describedby announces it on focus even
   while it is not painted. opacity (not display:none) is what keeps that true. */
.fact__pop {
  position: absolute; z-index: 5; inset-inline-end: 0; top: calc(100% + 0.35rem);
  width: max-content; max-width: min(30rem, 70vw);
  opacity: 0; pointer-events: none; transition: opacity var(--t) var(--ease);
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem; box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  font-size: var(--text-sm); line-height: 1.45;
}
.fact__pop > span { display: block; }
.fact__pop > span + span { margin-top: 0.35rem; font-family: var(--font-mono); color: var(--ink-2); }
.fact__more:hover .fact__pop, .fact__more:focus-within .fact__pop { opacity: 1; pointer-events: auto; }
/* Near the end of the table the panel would overflow it; flip it to hang upward instead. */
.fact:last-child .fact__pop, .facts > .fact:nth-last-child(-n+2) .fact__pop { top: auto; bottom: calc(100% + 0.35rem); }
@media (max-width: 40rem) { .fact__pop { max-width: 80vw; } }
/* No CSS, no problem: the panel simply reads as part of the row. */
@media (prefers-reduced-motion: reduce) { .fact__pop { transition: none; } }

.fact__src { display: block; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-2); margin-top: 0.15rem; }
.fact__pending { color: var(--ink-2); font-style: italic; }
.fact--empty { background: var(--paper-2); }
@media (max-width: 560px) { .fact { grid-template-columns: 1fr; gap: 0.2rem; } }

/* ---------- Country card extras ---------- */
.countries .country__local { color: var(--ink-2); margin: 0; }
.countries .country__written { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.countries .country__partner { margin: auto 0 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); display: flex; align-items: center; gap: 0.45em; }
.countries .country__partner::before { content: ""; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--arc-green); flex: none; }
.countries .country__partner--seeking::before { background: transparent; border: 2px solid var(--arc-rose); }
.countries .country__partner--none::before { background: var(--line-strong); }
.countries .country--presence { border-style: dashed; }
.countries .country--invite { border-style: dashed; background: var(--paper-2); }

/* ---------- Flags: country recognition for visitors who do not read the written language ---------- */
.flag { display: block; border-radius: 3px; border: 1px solid var(--line); object-fit: cover; background: var(--paper-2); }
.flag--sm { width: 36px; height: 27px; flex: none; }
.flag--card { width: 64px; height: 48px; margin-bottom: 0.25rem; }
.flag--hero { width: 96px; height: 72px; margin-bottom: var(--s-2); border-radius: 4px; }
.chooser__name { flex: 1; }
.chooser__list a { justify-content: flex-start; }
.cmap__dot { display: grid; place-items: center; overflow: hidden; padding: 0; background: var(--paper); width: 34px; height: 26px; border-radius: 4px; border: 2px solid var(--paper); }
.cmap__flag { width: 30px; height: 22px; border-radius: 2px; display: block; }
.cmap__pin--presence .cmap__dot { border-color: var(--paper); box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 0 2px var(--rose); }
.cmap__pin--live .cmap__dot { box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 0 2px var(--green); }
@media (max-width: 700px) { .cmap__dot { width: 26px; height: 20px; } .cmap__flag { width: 22px; height: 16px; } }
.fact__basis { display: block; font-size: var(--text-sm); color: var(--ink-2); margin-top: 0.15rem; }
.cmap__pin--right { align-items: flex-end; }
.cmap__pin--right .cmap__label { transform: translateX(calc(50% - 17px)); }
.cmap__pin--left { align-items: flex-start; }
.cmap__pin--left .cmap__label { transform: translateX(calc(-50% + 17px)); }
/* Region insets: the same world path through a tighter viewBox, so a crowded region gets room for
   its flags without any zoom control. The world map shows one pin per region linking down here. */
.cmap__pin--cluster .cmap__dot--cluster { width: 34px; height: 34px; border-radius: 50%; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink); background: var(--paper); border: 2px solid var(--paper); box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 0 2px var(--sky); }
.cmap__pin--cluster:hover .cmap__dot--cluster, .cmap__pin--cluster:focus-visible .cmap__dot--cluster { transform: scale(1.12); }
.cmap__inset { margin-top: var(--s-4); }
.cmap__inset-h { font-size: var(--text-lg); margin: 0 0 var(--s-2); text-align: center; }
.cmap__stage--inset { max-width: 900px; aspect-ratio: 100 / 92; /* overridden inline per inset */ overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper-2); }
.cmap__stage--inset .cmap__world { width: 100%; height: 100%; }
.cmap__name--short { display: none; }
.cmap__regions { display: none; }
/* The map on the dark band (home page): pins and chips bring their own light surfaces, so their
   text has to come back to page ink — the same restore the doors and cards get. Land stays paper. */
.section--ink .cmap__pin, .section--ink .cmap__label, .section--ink .cmap__regions a { color: var(--ink); }
.section--ink .cmap__pin .cmap__sl, .section--ink .cmap__regions .cmap__sl { color: var(--page-ink-2); }
.section--ink .cmap__world path { stroke: color-mix(in srgb, var(--paper) 40%, transparent); }
.section--ink .cmap__note { color: color-mix(in srgb, var(--paper) 80%, transparent); }
.section--ink .cmap__note a { color: var(--paper); }
.section--ink .cmap { margin-top: var(--s-4); margin-bottom: var(--s-4); }
@media (max-width: 700px) {
  .cmap__pin--cluster .cmap__label { display: none; }
  .cmap__regions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; list-style: none; margin: var(--s-2) 0 0; padding: 0; }
  .cmap__regions a { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; line-height: 1.2; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0.45em 0.8em; min-height: 44px; display: inline-flex; align-items: center; }
  .cmap__regions .cmap__sl { display: inline; margin-inline-start: 0.3em; }   /* the flex anchor drops the space before the count */
}
@media (max-width: 700px) { .cmap__pin--cluster .cmap__dot--cluster { width: 28px; height: 28px; font-size: 0.85rem; } .cmap__name--full { display: none; } .cmap__name--short { display: inline; } }

/* ---------- Country: the gap in one number ---------- */
.gapstat { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: var(--s-4); border-top: 8px solid var(--arc-rose); }
.gapstat__number { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 1.8rem + 4vw, 4.4rem); line-height: 1; letter-spacing: -0.03em; margin: 0 0 var(--s-2); color: var(--rose); }
.gapstat--fallback .gapstat__number { font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); color: var(--ink-2); }
.gapstat__line { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.3; margin: 0 0 var(--s-2); }
.gapstat__sub { font-size: var(--text-sm); color: var(--ink-2); margin: 0; padding-top: 0.75rem; border-top: 1px dashed var(--line-strong); }
.gapstat__cite { font-size: var(--text-sm); margin: 0.75rem 0 0; }

/* ---------- Country: an ordinary day ---------- */
.scenes { list-style: none; counter-reset: scene; padding: 0; margin: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.scene { counter-increment: scene; position: relative; padding: var(--s-4) var(--s-3) var(--s-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.scene::before { content: counter(scene); position: absolute; top: -0.9rem; inset-inline-start: var(--s-3); width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; background: var(--arc-rose); color: var(--on-listen); }
.scene h3 { font-size: var(--text-lg); margin: 0 0 0.4rem; }
.scene p { margin: 0; color: var(--ink-2); }

/* ---------- Country: organisations already doing the work ---------- */
.orgs { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.org { border: 1px solid var(--line); border-inline-start: 6px solid var(--arc-green); border-radius: var(--radius); padding: var(--s-3); background: var(--paper); }
.org h3 { font-size: var(--text-lg); margin: 0 0 0.35rem; }
.org p { margin: 0; color: var(--ink-2); }
.org__led { display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; color: var(--green); background: color-mix(in srgb, var(--arc-green) 25%, var(--paper)); padding: 0.1em 0.55em; border-radius: 999px; margin: 0 0 0.4rem !important; }

/* ---------- Light-surface components inside a dark section ----------
   .section--ink sets a light text colour for the band. Components that bring their own LIGHT card background
   (doors, cards, scenes, orgs, the gap stat) must restore the normal ink palette, or their text turns
   light-on-light and disappears. Caught by the computed-contrast sweep, not by token checking. */
.section--ink :is(.door, .card, .scene, .org, .gapstat, .signal, .steps li, .timeline li, .promise, .right) { color: var(--ink); --ink-2: var(--page-ink-2); --muted: var(--page-ink-2); }
.section--ink :is(.door, .card, .scene, .org, .gapstat, .signal, .steps li, .timeline li, .promise, .right) :is(h1, h2, h3, h4, a, .triad, .door__go, .gapstat__line, dt) { color: var(--ink); }
.section--ink :is(.door, .card, .scene, .org, .signal, .steps li, .timeline li, .promise, .right) p { color: var(--ink-2); }
.section--ink :is(.door, .card, .scene, .org, .gapstat) a { --link-underline: var(--green); --link-hover-bg: var(--arc-yellow); }
.section--ink .gapstat__number { color: var(--rose); }
.section--ink :is(.gapstat__sub, .gapstat__cite, .org__led) { color: var(--ink-2); }
.section--ink .org__led { color: var(--green); }
.section--ink .media__frame { color: var(--ink); --ink-2: var(--page-ink-2); }
.media__fallback { color: var(--ink); padding: var(--s-3); }

/* ---------- Country: promised vs delivered ---------- */
.promises { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.promise { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
@media (min-width: 780px) { .promise { grid-template-columns: 1fr 1fr; } }
.promise__side { padding: var(--s-3); }
.promise__side--law { background: var(--paper-2); border-bottom: 1px solid var(--line); }
@media (min-width: 780px) { .promise__side--law { border-bottom: 0; border-inline-end: 1px solid var(--line); } }
.promise__side--real { border-inline-start: 6px solid var(--arc-rose); }
.promise--working .promise__side--real { border-left-color: var(--arc-green); }
.promise__label { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 0.4rem; }
.promise--working .promise__side--real .promise__label { color: var(--green); }
.promise__text { margin: 0; }
.promise__cite { margin: 0.5rem 0 0; font-size: var(--text-sm); font-family: var(--font-mono); color: var(--ink-2); }

/* ---------- Country: an ordinary day, today and when it works ---------- */
.scenes--paired .scene { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.scenes--paired .scene h3 { padding: var(--s-3) var(--s-3) 0.5rem; margin: 0; }
.scenes--paired .scene__now, .scenes--paired .scene__after { padding: 0 var(--s-3) var(--s-3); }
.scenes--paired .scene__now { flex: 1 0 auto; }   /* pushes "when this works" to the foot of every card so they line up */
.scenes--paired .scene__after { background: color-mix(in srgb, var(--arc-green) 16%, var(--paper)); margin-top: auto; padding-top: var(--s-2); }
.scene__label { font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 0.25rem; }
.scenes--paired .scene__after .scene__label { color: var(--green); }
.scenes--paired .scene p { margin: 0; }

/* ---------- Country: creators ---------- */
.creators-block { margin-top: var(--s-5); }
.creators-block h3 { font-size: var(--text-xl); }
.creators { list-style: none; padding: 0; margin: 0 0 var(--s-2); display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.creator { border-inline-start: 4px solid var(--arc-sky); padding: 0.35rem 0; padding-inline-start: var(--s-2); }
.creator h3 { font-size: 1rem; margin: 0 0 0.15rem; }
.creator p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }

/* ---------- Country: know your rights ---------- */
.rights { margin: 0; display: grid; gap: var(--s-2); }
.right { border: 1px solid var(--line); border-inline-start: 6px solid var(--arc-sky); border-radius: var(--radius-sm); padding: var(--s-3); background: var(--paper); }
.right dt { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--sky); margin-bottom: 0.3rem; }
.right dd { margin: 0; }
.right__main { margin: 0 0 0.35rem; font-weight: 600; }
.right__detail { margin: 0 0 0.35rem; color: var(--ink-2); font-size: var(--text-sm); }
.right__cite { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-2); }

/* ---------- Country: what happens next ---------- */
.next-steps { margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 10%, transparent); border: 1px solid color-mix(in srgb, var(--paper) 25%, transparent); }
.next-steps h3 { margin-bottom: var(--s-2); }
.next-steps ol { margin: 0 0 var(--s-2); }

/* A muted note painted straight onto the dark band — .note's default ink-2 would be dark on dark. */
.section--ink > .wrap > .note,
.section--ink .next-steps .note,
.section--ink > .wrap > div > .note { color: color-mix(in srgb, var(--paper) 80%, transparent); }

/* Reading-voice controls in the Display menu */
.voice-field .field label { font-size: var(--text-sm); }
.voice-field select { width: 100%; padding: 0.5rem 0.6rem; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font-size: 0.95rem; }
.voice-field .hint { margin: 0.25rem 0 0; }

/* ---------- Partner pages: narrative components ----------
   These classes are used by the per-country partner pages. `.timeline` was previously written as
   `.promise`, which collided with the country law-vs-reality component above and rendered the
   timeline as a two-column bordered grid. Renamed and given its own styles. */
.timeline { list-style: none; padding: 0; margin: var(--s-3) 0; display: grid; gap: var(--s-2); max-width: var(--measure); }
.timeline li { padding: var(--s-2) var(--s-3); background: var(--paper-2); border-inline-start: 4px solid var(--gold); border-radius: var(--radius); }
.timeline .yr { display: block; font-family: var(--font-mono); font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.06em; color: var(--ink-2); margin-bottom: 0.2rem; }

.turnline { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.25; max-width: 30ch; margin: var(--s-4) 0; }

.mirror { border-inline-start: 4px solid var(--arc-sky); padding: 0.2rem 0; padding-inline-start: var(--s-3); margin: var(--s-3) 0; max-width: var(--measure); }
.mirror p { font-size: var(--text-lg); font-weight: 600; margin: 0.4em 0; }

.closeline { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.2; max-width: 24ch; margin: 0 0 var(--s-3); }

.ways-in { margin-top: var(--s-4); }

.faq { max-width: var(--measure); margin: var(--s-4) 0 0; }
.faq dt { font-weight: 700; margin-top: var(--s-3); }
.faq dd { margin: 0.3rem 0 0; color: var(--ink-2); }
/* Inside the inverted band the page's secondary ink IS the background. Remap it once, here,
   rather than patching each component that reaches for it. A no-op on systems where
   --band-ink-2 equals --ink-2; the fix that matters on inverted-ground palettes. */
.section--ink { --ink-2: color-mix(in srgb, var(--paper) 82%, var(--ink)); --muted: var(--ink-2); }
/* The high-contrast theme asks for maximum separation, not a muted tone. */
:root[data-theme="contrast"] .section--ink { --ink-2: var(--paper); --muted: var(--paper); }
.section--ink .faq dd, .section--ink .faq dd a { color: var(--paper); }

/* ---------- First-visit tip ----------
   A quiet strip, not a modal and not a gate: it offers the controls, it never blocks the page.
   Hidden by default and revealed only by the pre-paint inline script, so (a) it costs no layout
   shift, and (b) with JavaScript off it never appears — the controls it points at need JS to work,
   so advertising them without JS would be a lie. */
.tip { display: none; }
:root[data-tip="on"] .tip { display: block; }
.tip { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.tip__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding-block: 0.7rem; }
.tip__text { margin: 0; flex: 1 1 22rem; font-size: var(--text-sm); color: var(--ink-2); max-width: 68ch; }
.tip__close {
  flex: 0 0 auto; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  color: var(--ink); background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.35rem 0.9rem; cursor: pointer;
}
.tip__close:hover { border-color: var(--ink-2); }

/* ===== pages ===== */
/* pages.css — page-specific layout only; components carry the system */
.home-hero .sl-slot--hero .media { max-width: none; }
.wedge .receipts { margin-bottom: var(--s-4); }
.why-chain { display: grid; gap: var(--s-5); }
.why-chain__item { display: grid; gap: var(--s-3); align-items: start; }
@media (min-width: 900px) { .why-chain__item { grid-template-columns: minmax(16rem, 22rem) 1fr; } }
.why-chain__item .receipt { max-width: none; }
.policy-list li { margin-bottom: var(--s-2); }
.statement-table td:first-child { white-space: nowrap; font-family: var(--font-display); font-weight: 600; }
.notfound { text-align: center; padding-block: var(--s-8); }
.notfound .ring { width: 96px; height: 96px; margin-inline: auto; margin-bottom: var(--s-3); }

/* ===== ledger2 ===== */
/* ledger2.css — Ledger (2026-09-15) structural expression. Loaded last, after tokens-ledger2.css.
   Colour lives in the token layer; this sheet is type, and the handful of shapes the tokens cannot
   reach: the v1.1 ring, the plain-words edge, pill radii, shadows. No component markup changes. */

/* ---------- Typefaces. IBM Plex Sans and IBM Plex Mono, self-hosted, latin subset. Both SIL OFL. ---------- */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-sans-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/ibm-plex-sans-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('/assets/fonts/ibm-plex-sans-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); }

/* Headlines: weight, not size inflation. Plex needs a touch less tracking than Lexend did. */
h1, h2, .h-display { letter-spacing: -0.015em; }
h3 { letter-spacing: 0; }

/* ---------- The ring was the v1.1 signature. Ledger has none: the wordmark is the whole lockup. ---------- */
.hero__bg { display: none; }

/* ---------- Plain words: ground-2 under a 2 px ink head. No coloured edge. ---------- */
.plain { border-inline-start: 0; border-top: 2px solid var(--ink); border-radius: 0; }
.form__status { border-inline-start: 0; border-top: 2px solid var(--ok); border-radius: 0; }

/* ---------- Rules are 1 px ink or 2 px ink. Nothing is a pill, nothing casts a shadow. ---------- */
.line { border-inline-start: 2px solid var(--ink); }
.statline, .creator, .mirror, .org, .right, .timeline li, .promise__side--real { border-inline-start-width: 2px; border-inline-start-color: var(--ink); }
.ctl-menu__panel, .site-nav .nav-menu__panel, .chooser__list, .fact__pop, .listen-bar { box-shadow: none; }
.ctl-menu__panel, .site-nav .nav-menu__panel, .chooser__list, .fact__pop { border-color: var(--ink); }
.listen-bar, .badge { border-radius: var(--radius); }

/* ---------- Every number and every source line in mono, tabular. ---------- */
.receipt, .signal__number, .fact__value, .cmap__sl, .country__sl .chip, .timeline time { font-variant-numeric: tabular-nums; }

/* ---------- Where the ring symbol still appears (pending frames, spinners), it is monochrome. ---------- */
.ring, .media-pending svg, .mp__ring { --arc-yellow: var(--line-strong); --arc-green: var(--line-strong); --arc-rose: var(--line-strong); --arc-sky: var(--line-strong); --arc-grey: var(--line); }

/* ---------- Buttons and chips: 2 px radius, 1 px ink, the accent on primary hover. ---------- */
.btn { border-radius: var(--radius); border-width: 1px; }
.btn--primary:hover { background: var(--green); border-color: var(--green); color: var(--btn-fg); filter: none; }
.btn--secondary { border-color: var(--ink); }
.chip { border-radius: var(--radius); font-family: var(--font-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.02em; background: var(--paper); border-color: var(--ink); }
.chip--sign { background: var(--paper); border-color: var(--green); color: var(--green); }
.chip--listen, .chip--read, .chip--plain { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.chip--pending { border-style: dashed; border-color: var(--line-strong); color: var(--ink-2); }
.access-status__listen { border-radius: var(--radius); }

/* ---------- Eyebrows are mono labels. No coloured pill. ---------- */
.eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--ink-2); }
.eyebrow::before { display: none; }
.eyebrow--rose, .eyebrow--sky, .eyebrow--gold { color: var(--ink-2); }

/* ---------- Hero: the access strip is a ground-2 block; the pending frame is dashed and hatched, no ring. ---------- */
.hero .access-status { background: var(--paper-2); padding: 0.6rem 0.9rem; border-top: 0; }
.media--pending .media__frame { border: 1px dashed var(--line-strong); border-radius: 0; min-height: 16rem; place-items: start; text-align: start; }
.media--pending .media__inner { justify-items: start; max-width: 40ch; }
.media--pending .ring { display: none; }
.media__pending-title { font-size: 1.125rem; font-weight: 600; }
.media__pending-title::before { content: "Pending"; display: block; font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--frame-ink-2, var(--ink-2)); margin-bottom: 0.5rem; }
.media__pending-note { font-size: 0.9375rem; line-height: 1.5; }

/* ---------- Doors: an ink frame, a mono triad, the accent on the way in. No icon tile, no shadow. ---------- */
.door { border: 2px solid var(--ink); border-radius: var(--radius); gap: 0.6rem; padding: var(--s-3) var(--s-3) var(--s-3); }
.door:hover, .door:focus-within { border-color: var(--ink); box-shadow: none; }
.door--quiet { border: 1px solid var(--line-strong); }
.door__icon { display: none; }
.door h3 { font-size: 1.375rem; line-height: 1.25; }
.triad { font-family: var(--font-mono); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--ink-2); }
.triad span:not(:last-child)::after { color: var(--ink-2); }
.door p:not(.triad) { font-size: 0.9375rem; color: var(--ink); }
.door__go { color: var(--green); font-size: 0.9375rem; }
.door:hover .door__go svg { transform: translateX(3px); }

/* The pending frame sits on paper, hatched in ground-2, like the canvas. Inside the ink band it takes the band's paper. */
.media--pending .media__frame { --frame-bg: var(--paper); --frame-ink: var(--ink); --frame-ink-2: var(--ink-2); --frame-line: var(--line); background-image: repeating-linear-gradient(135deg, transparent 0 10px, var(--paper-2) 10px 12px); }
.section--ink .media--pending .media__frame { --frame-bg: var(--band-paper); --frame-ink: var(--band-ink); --frame-ink-2: var(--band-ink-2); --frame-line: var(--band-line); background-image: repeating-linear-gradient(135deg, transparent 0 10px, var(--band-paper-2) 10px 12px); }

/* Video frames are ink, not the navy the previous system used. */
.media__frame { --frame-bg: var(--ink); --frame-ink: var(--paper); --frame-ink-2: var(--paper-2); --frame-line: var(--line-strong); }

/* ---------- Country hero: flag and kicker on one row, the lede at reading width, the big line in its own band. ---------- */
.hero__kicker { display: flex; align-items: center; gap: 0.9rem; margin-bottom: var(--s-2); }
.hero__kicker .flag--hero { width: 40px; height: 28px; margin: 0; border-radius: 0; border-color: var(--ink); }
.hero__kicker .eyebrow { margin: 0; }
.greeting { font-size: 1.125rem; color: var(--ink-2); margin: 0 0 var(--s-2); }
.country-page .hero__grid { align-items: start; }
.country-page .hero h1 { max-width: 15ch; }
.country-page .hero .lead { max-width: 60ch; font-size: var(--text-base); }
.lang-switch { border: 1px solid var(--ink); border-radius: var(--radius); }
.lang-switch a { border-radius: 0; }
.lang-switch a + a { border-inline-start: 1px solid var(--ink); }
.turnband { padding-block: var(--s-5); }
.turnband .turnline { margin: 0; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; max-width: 24ch; text-wrap: balance; }

/* ---------- Header: an ink rule, squared controls, the sign toggle in the accent when on. ---------- */
.site-header { border-bottom: 1px solid var(--ink); }
@media (min-width: 960px) { .brand .wordmark { width: 228px; height: 51px; } }
.site-nav a, .nav-menu > summary { border-radius: var(--radius); font-size: 1rem; font-weight: 500; }
.site-nav a[aria-current="page"] { background: transparent; color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.nav-menu[data-here="true"] > summary { box-shadow: inset 0 -2px 0 var(--ink); border-radius: var(--radius); }
.ctl { border: 1px solid var(--ink); border-radius: var(--radius); background: var(--paper); }
.ctl:hover { background: var(--paper-2); border-color: var(--ink); }
.ctl--listen[aria-pressed="true"], .cswitch__watch[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--paper); }
.cswitch__watch { border: 1px solid var(--ink); border-radius: var(--radius); }
.ctl-menu__panel, .site-nav .nav-menu__panel { border: 1px solid var(--ink); border-radius: var(--radius); }
.site-nav .nav-menu__panel a, .cswitch__list a { border-radius: var(--radius); }

/* ---------- Footer: paper under a 2 px ink rule, five columns with mono labels, the reach block on ground-2. ---------- */
.site-footer { background: var(--paper); border-top: 2px solid var(--ink); padding-block: var(--s-5) var(--s-4); }
.site-footer h2 { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.75rem; }
.site-footer__grid { gap: var(--s-4); }
@media (min-width: 960px) { .site-footer__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.site-footer__grid a { text-decoration: none; color: var(--ink); }
.site-footer__grid a:hover { text-decoration: underline; background: transparent; }
.site-footer__reach { margin-top: var(--s-4); padding: var(--s-3); background: var(--paper-2); display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .site-footer__reach { grid-template-columns: 1fr 1fr; } }
.site-footer__reach-h { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 0.6rem; }
.site-footer__routes { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.6rem; }
.site-footer__routes .ctl { text-decoration: none; }
.site-footer__reach .hint { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.site-footer__reach .newsletter .field { margin-bottom: 0.6rem; }
.site-footer__bottom { border-top: 0; margin-top: var(--s-4); padding-top: 0; justify-content: space-between; }
.site-footer__legal { margin: 0; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-2); }

/* The first-visit tip's dismiss is a square control like every other. */
.tip__close { border-radius: var(--radius); border: 1px solid var(--ink); }
.tip { border-bottom: 1px solid var(--line-strong); }

/* ======================================================================
   The remaining components, to the canvas: receipts, signals, steps, code,
   cards, fields, disclosure, tables, the map, facts, people, law, time.
   ====================================================================== */

/* ---------- Receipt: an ink frame, the figure in mono, the source on a dashed rule. No perforation. ---------- */
.receipt { border: 1px solid var(--ink); border-radius: var(--radius); }
.receipt::after { display: none; }
.receipt__headline { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.receipt--stat .receipt__text { color: var(--ink); }
.receipt__source { font-family: var(--font-mono); font-size: 0.8125rem; border-top: 1px dashed var(--ink-2); }
.receipt__icon { color: var(--ink-2); }
.receipt__label { font-weight: 500; color: var(--ink-2); }
.receipt__link { font-family: var(--font-mono); color: var(--green); }
.receipt--unverified { border: 1px dashed var(--line-strong); background: var(--paper); color: var(--ink-2); }
.receipt--unverified .receipt__source { border-top-color: var(--line-strong); }
.badge { border-radius: var(--radius); font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.04em; background: var(--mark); color: #171613; }
.badge--ok { background: var(--ok); color: var(--paper); }
.statline > strong { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.gapstat { border: 1px solid var(--ink); border-top-width: 2px; border-radius: var(--radius); }
.gapstat__number { font-family: var(--font-mono); font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.gapstat__sub { border-top-color: var(--ink-2); }

/* ---------- Signals: a 2 px ink head, the number in mono, a zero marked with a square. ---------- */
.signal { border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: 0.6rem 0 0; background: transparent; }
.signal__name { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; }
.signal__number { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.signal--zero .signal__number { color: var(--ink); }
.signal--zero .signal__number::after { border-radius: 0; background: var(--mark); width: 0.4em; height: 0.4em; }
.signal--live .signal__number { color: var(--ink); }
.signal__note { border-top-color: var(--ink-2); font-family: var(--font-mono); font-size: 0.8125rem; }

/* ---------- Steps and scenes: counters are ink squares, never coloured discs. ---------- */
.steps li { border-color: var(--ink); }
.steps li::before, .steps li:nth-child(1)::before, .steps li:nth-child(2)::before, .steps li:nth-child(3)::before, .steps li:nth-child(4)::before { border-radius: var(--radius); background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-weight: 500; }
.scene { border-color: var(--ink); }
.scene::before { border-radius: var(--radius); background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-weight: 500; }
.scenes--paired .scene__after { background: var(--paper-2); }
.scene__label, .scenes--paired .scene__after .scene__label, .promise__label, .promise--working .promise__side--real .promise__label, .pattern__kicker, .pattern__psb dt, .fact dt, .right dt, .cswitch__state { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.04em; color: var(--ink-2); }

/* ---------- Code: ink ground, paper text, the accent and the mark for syntax. ---------- */
.code pre { background: var(--ink); color: var(--paper); border-radius: var(--radius); font-family: var(--font-mono); }
.code .c { color: #BAB7B2; } .code .k { color: #FFE772; } .code .s { color: #76C7CC; } .code .n { color: #7FD19A; }

/* ---------- Cards, countries, people, organisations, rights: one ink frame each. ---------- */
.card { border-color: var(--ink); }
.card--accent, .card--rose, .card--sky, .card--gold { border-top: 2px solid var(--ink); }
.countries .country { border: 1px solid var(--ink); }
.countries .country--live { border-width: 2px; }
.countries .country__code { font-family: var(--font-mono); }
.countries .country__partner::before { border-radius: 0; background: var(--ok); }
.countries .country__partner--seeking::before { background: transparent; border: 1px dashed var(--ink-2); }
.countries .country__partner--none::before { background: var(--line-strong); }
.creator { border: 1px solid var(--ink); border-inline-start-width: 1px; border-radius: var(--radius); padding: 0.8rem 0.9rem; }
.org { border: 1px solid var(--ink); border-inline-start-width: 1px; }
.org__led { background: transparent; border: 1px solid var(--ok); color: var(--ok); border-radius: var(--radius); font-family: var(--font-mono); font-weight: 500; }
.right { border: 1px solid var(--ink); border-inline-start-width: 1px; border-radius: var(--radius); }
.right dt { color: var(--ink-2); }

/* ---------- The promise: law beside reality, a rule between them, no coloured edge. ---------- */
.promise { border: 1px solid var(--ink); border-radius: 0; }
.promise__side--law { background: var(--paper); }
.promise__side--real { border-inline-start: 0; }
.promise--working .promise__side--real { border-left-color: transparent; }
.promise__cite { color: var(--ink-2); }

/* ---------- Timeline: dated rows, the date in mono at the inline start, a rule under each. ---------- */
.timeline { gap: 0; border-top: 1px solid var(--ink); }
.timeline li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 0.75rem 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.timeline .yr { margin: 0; font-weight: 500; letter-spacing: 0; font-size: 0.875rem; }

/* ---------- Facts: an ink frame, mono labels, mono figures, the popover on paper with an ink edge. ---------- */
.facts { border: 1px solid var(--ink); border-radius: 0; }
.facts > .fact:first-child, .facts > .fact:last-child { border-radius: 0; }
.fact__value { font-family: var(--font-mono); font-size: 1rem; font-variant-numeric: tabular-nums; }
.fact__pop { border: 1px solid var(--ink); border-radius: var(--radius); box-shadow: none; }
.fact__pending { font-style: normal; }
.fact--empty { background: var(--paper-2); }

/* ---------- Fields and notices. ---------- */
.field input, .field select, .field textarea { border: 1px solid var(--ink); border-radius: var(--radius); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--ink); }
.field--error input, .field--error textarea { border: 2px solid var(--warn-fg); }
.error { color: var(--warn-fg); font-weight: 600; }
.field label, .field legend { font-weight: 600; }

/* ---------- Disclosure and tables. ---------- */
details.disclosure { border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; }
details.disclosure + details.disclosure { margin-top: 0; border-top: 0; }
th { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
caption { font-weight: 600; }

/* ---------- The map: flags with an ink edge, labels in mono, counts in a paper square. No drop shadows. ---------- */
.cmap__dot { border-radius: var(--radius); border: 1px solid var(--ink); box-shadow: none; }
.cmap__pin--presence .cmap__dot { border-color: var(--line-strong); box-shadow: none; }
.cmap__pin--live .cmap__dot { box-shadow: 0 0 0 2px var(--ok); }
.cmap__label { border-radius: var(--radius); border-color: var(--line-strong); font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; }
.cmap__pin--cluster .cmap__dot--cluster { border-radius: var(--radius); border: 1px solid var(--ink); box-shadow: none; font-family: var(--font-mono); font-weight: 500; }
.cmap__regions a { border-radius: var(--radius); }

/* ---------- Lines and the listen bar. ---------- */
.line, .line--rose, .line--sky, .line--gold { border-color: var(--ink); }
.listen-bar .btn { border-radius: var(--radius); min-height: 44px; border-color: var(--paper); }
.skip { border-radius: var(--radius); }