/* ===== 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 — VARIANT: The Structural Ledger (v2.0 concept)
   Sharp, print-inspired civic infrastructure. Woven cable + stamped document,
   in place of v1.1's arc and ring.

   Same token NAMES as brand/tokens.css, different values — so the whole site
   re-skins without touching a single component. Role mapping is unchanged:
     --arc-green  = Sign      (vermilion)      --arc-rose = Listen (violet)
     --arc-sky    = Read      (cobalt)         --arc-yellow = Plain (amber)

   Every ratio below was measured, not assumed. Where the brief's hex fails a
   floor on one ground, a per-theme variant is derived and the base colour is
   kept for surfaces. Those derivations are listed in DESIGN-SYSTEM-LEDGER.md.
   ============================================================================ */

:root {
  /* Modality colours — surfaces and markers */
  --arc-green:  #E03C28;   /* Sign — vivid vermilion */
  --arc-rose:   #5B2A86;   /* Listen — deep violet */
  --arc-sky:    #004B87;   /* Read — cobalt */
  --arc-yellow: #F2A900;   /* Plain — high-visibility amber */
  --arc-grey:   #000000;

  /* Foreground ON each modality surface. Violet and cobalt are DARK surfaces and
     take light text — unlike v1, where all four arcs were pastels taking ink. */
  --on-sign:   #000000;    /* 4.85:1 on vermilion */
  --on-listen: #FFFFFF;    /* 9.90:1 on violet */
  --on-read:   #FFFFFF;    /* 8.91:1 on cobalt */
  --on-plain:  #000000;    /* 10.45:1 on amber */

  /* Grounds — cooler newsprint */
  --paper:   #F4F4F4;
  --paper-2: #EBEBEB;
  --paper-3: #DEDEDE;
  --ink:     #000000;      /* 19.09:1 on paper */
  --ink-2:   #333333;      /* 11.49:1 on paper */
  --line:        #000000;  /* strong structural borders, no hairlines */
  --line-strong: #000000;

  /* Modality colours as TEXT — derived to hold 7:1 on this ground */
  --green: #98291B;        /* Sign text   7.16:1 */
  --rose:  #5B2A86;        /* Listen text 9.01:1 (brief value holds) */
  --sky:   #004B87;        /* Read text   8.10:1 (brief value holds) */
  --gold:  #6D4C00;        /* Plain text  7.11:1 */

  --link: var(--ink);
  --link-underline: var(--arc-sky);
  --link-hover-bg: var(--arc-yellow);
  --btn-bg: #000000;
  --btn-fg: #FFFFFF;
  --focus: #000000;
  --focus-halo: var(--arc-yellow);
  --mark: var(--arc-yellow);
  --accent-on-ink: var(--arc-yellow);   /* 10.45:1 on the black ink band */

  /* Light-surfaced components inside the inverted band restore these (see tokens.css for why). */
  --band-ink: #000000; --band-ink-2: #333333; --band-paper: #F4F4F4; --band-paper-2: #EBEBEB;
  --band-line: #000000; --band-line-strong: #000000;
  --band-green: #98291B; --band-rose: #5B2A86; --band-sky: #004B87; --band-gold: #6D4C00;
  --band-warn-bg: #FFF3B0; --band-warn-fg: #4A3400;
  --band-hover-bg: #4A3400;   /* band text #F4F4F4 stays 10.71:1 over it */
  --warn-bg: #FFE9B0;
  --warn-fg: #6D4C00;
  --ok: var(--green);

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

  --font-display: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-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: 66ch;

  --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;

  /* Geometry: sharp, not soft */
  --radius: 0px;
  --radius-sm: 0px;
  --radius-input: 2px;

  /* Motion: mechanical, infrastructure-grade */
  --t: 150ms;
  --ease: cubic-bezier(0, 0.5, 0.5, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="contrast"]) {
    --paper: #0F1012; --paper-2: #1A1C20; --paper-3: #24262B;
    --ink: #FBFBF9; --ink-2: #D1D1D1;
    --line: #6B6D75; --line-strong: #8A8D95;   /* 3.69:1 — the brief's #5C5E66 measured 2.94 */
    --green: #EB7E71;  /* Sign text   7.03:1 */
    --rose:  #AD95C3;  /* Listen text 7.13:1 */
    --sky:   #7DA3C2;  /* Read text   7.15:1 */
    --gold:  #F2A900;  /* Plain text  9.47:1 */
    --btn-bg: #FBFBF9; --btn-fg: #0F1012;
    --focus: var(--arc-yellow); --focus-halo: #0F1012;
    --link-hover-bg: #4A3400; --warn-bg: #4A3400; --warn-fg: #F2A900;
    --accent-on-ink: #6D4C00;
    --band-hover-bg: #F2A900;   /* band text #0F1012 stays 9.47:1 */
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0F1012; --paper-2: #1A1C20; --paper-3: #24262B;
  --ink: #FBFBF9; --ink-2: #D1D1D1;
  --line: #6B6D75; --line-strong: #8A8D95;
  --green: #EB7E71; --rose: #AD95C3; --sky: #7DA3C2; --gold: #F2A900;
  --btn-bg: #FBFBF9; --btn-fg: #0F1012;
  --focus: var(--arc-yellow); --focus-halo: #0F1012;
  --link-hover-bg: #4A3400; --warn-bg: #4A3400; --warn-fg: #F2A900;
  --accent-on-ink: #6D4C00;   /* 7.55:1 on the light ink band */
  --band-hover-bg: #F2A900;   /* band text #0F1012 stays 9.47:1 */
  color-scheme: dark;
}
:root[data-theme="contrast"] {
  --paper: #FFFFFF; --paper-2: #FFFFFF; --paper-3: #F0F0F0;
  --ink: #000000; --ink-2: #000000; --line: #000000; --line-strong: #000000;
  --green: #7A1D10; --rose: #431F63; --sky: #00365F; --gold: #4A3400;
  --arc-green: #C22E1C; --arc-rose: #431F63; --arc-sky: #00365F; --arc-yellow: #FFD400;
  --on-sign: #FFFFFF; --on-listen: #FFFFFF; --on-read: #FFFFFF; --on-plain: #000000;
  --btn-bg: #000000; --btn-fg: #FFFFFF;
  --focus: #000000; --focus-halo: #FFD400;
  --link-underline: #000000; --link-hover-bg: #FFD400; --mark: #FFD400;
  --warn-bg: #FFF3B0; --warn-fg: #000000;
  --accent-on-ink: #FFD400;
  --band-hover-bg: #4A3400;
  --band-paper-2: #FFFFFF;
  color-scheme: light;
}
:root[data-text="lg"] { font-size: 112.5%; }
:root[data-text="xl"] { font-size: 125%; }

/* ===== 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-left: 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; }
}

/* ===== components ===== */
/* components.css — built as a system, in design.md order. */

/* ---------- Skip link ---------- */
.skip { position: absolute; left: 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); }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Header ---------- */
.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: 72px; padding-block: 0.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.02em; color: var(--ink); margin-right: auto; }
.brand:hover { background: transparent; }
.brand .ring { width: 40px; height: 40px; flex: none; }
.brand__word sup { font-size: 0.5em; font-weight: 500; color: var(--ink-2); margin-left: 0.2em; }
.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--sl[aria-pressed="true"] { background: var(--arc-green); border-color: var(--arc-green); color: var(--on-sign); }
.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; right: 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; }
.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: 1120px) {
  .site-nav, .controls .btn--primary, .ctl--listen, .ctl-menu { display: none; }
  .menu-toggle { display: inline-flex; }
  .ctl--sl span { display: none; }
  .ctl--sl { padding-inline: 0.65rem; }
  .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; }
  .mobile-extras .btn--primary { display: inline-flex; margin-top: var(--s-2); }
}
@media (min-width: 1121px) { .mobile-extras { display: none; } }
@media (min-width: 1121px) and (max-width: 1220px) { .brand__word { display: none; } .site-nav a { padding-inline: 0.5rem; } }

/* ---------- 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-left: 6px solid var(--mod-plain); background: var(--paper-2); padding: var(--s-2) var(--s-3); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; 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); }
.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-left: 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-left: 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-left: var(--s-3); border-left: 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; }
.media__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--paper-3); border: 1px solid var(--line); }
.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-left: 4px; }
.media__playlabel { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; color: #fff; text-align: left; 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); }
.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(--line) 45%, transparent) 14px 15px), var(--paper-2); }
.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; }
.media__pending-note { margin: 0; color: var(--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); left: 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-left: 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-left: 6px solid var(--arc-green); background: var(--paper-2); padding: var(--s-2) var(--s-3); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.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-left: 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: left; 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: left; 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); }
.section--ink .btn--secondary { border-color: var(--paper); color: var(--paper); }
.section--ink .btn--secondary:hover { background: rgba(255,255,255,0.12); }

/* 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, .ctl--sl span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-toggle, .ctl--sl { 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 */
@media (min-width: 1121px) and (max-width: 1440px) {
  body.nav-wide .controls .ctl--listen span, body.nav-wide .controls .ctl-menu summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.nav-wide .controls .ctl--listen, body.nav-wide .controls .ctl-menu summary { padding-inline: 0.6rem; }
  body.nav-wide .site-nav a { padding-inline: 0.5rem; }
}

/* ---------- 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; left: 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-left: var(--s-2); border-left: 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-left: 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; right: 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 right edge the panel would overflow the table; flip it to hang from the right 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)); }

/* ---------- 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; left: 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-left: 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, .promise, .right) { color: var(--ink); }
.section--ink :is(.door, .card, .scene, .org, .gapstat, .signal, .steps 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, .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); }
.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-right: 1px solid var(--line); } }
.promise__side--real { border-left: 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-left: 4px solid var(--arc-sky); padding: 0.35rem 0 0.35rem 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-left: 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-left: 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-left: 4px solid var(--arc-sky); padding: 0.2rem 0 0.2rem 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); }

/* ===== 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); }

/* ===== ledger ===== */
/* ============================================================================
   The Structural Ledger — structural overrides
   Loaded after components.css when building with --variant=ledger.
   Geometry, shadow, divider and motion only; colour lives in tokens-ledger.css.
   ============================================================================ */

/* ---- Sharp, not soft -------------------------------------------------------
   Pills become rectangles. Nothing is rounded except a 2px on text inputs,
   which keeps them reading as fields rather than blocks. */
.btn, .ctl, .chip, .mod__pill, .badge, .lang-toggle, .cmap__label, .org__led,
.country__partner, .rail a, .chooser summary { border-radius: 0 !important; }
.field input, .field select, .field textarea, .voice-field select { border-radius: var(--radius-input); }
.door__icon, .avatar, .sw__chip { border-radius: 0; }
.avatar { border-radius: 0; }
.cmap__dot { border-radius: 0; }
.eyebrow::before { border-radius: 0; height: 0.5em; }
.divider { border-radius: 0; }

/* ---- Offset solid shadows, never blur --------------------------------------
   The product is a translucent access layer over content; floating elements
   echo that with a hard offset plate rather than a soft glow. */
.door:hover, .door:focus-within { box-shadow: 6px 6px 0 var(--ink); }
.card, .receipt, .promise, .scene, .org, .gapstat, .signal, .steps li, .right, .country {
  box-shadow: 4px 4px 0 var(--paper-3);
}
.listen-bar { box-shadow: 4px 4px 0 var(--arc-yellow); border-radius: 0; }
.ctl-menu__panel, .chooser__list { box-shadow: 6px 6px 0 var(--ink); border-radius: 0; }
.media__playicon { box-shadow: 4px 4px 0 var(--ink); border-radius: 0; }
.cmap__label { box-shadow: 3px 3px 0 var(--ink); }

/* ---- The braid divider -----------------------------------------------------
   Content, Code and Community woven together: three stacked rules instead of
   one hairline, wherever a section boundary is drawn. */
.section { border-top: 0; position: relative; }
.section + .section::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(
    var(--arc-green) 0 1px, transparent 1px 2px,
    var(--arc-sky) 2px 3px, transparent 3px 4px,
    var(--arc-yellow) 4px 5px);
}
.site-header { border-bottom: 3px double var(--ink); }
.site-footer { border-top: 3px double var(--ink); }

/* ---- Modality surfaces carry their own foreground --------------------------
   Violet and cobalt are dark surfaces; ink on them fails. Each surface names
   the text colour that passes on it. */
.chip--sign   { background: var(--arc-green);  color: var(--on-sign);   border-color: var(--arc-green); }
.chip--listen { background: var(--arc-rose);   color: var(--on-listen); border-color: var(--arc-rose); }
.chip--read   { background: var(--arc-sky);    color: var(--on-read);   border-color: var(--arc-sky); }
.chip--plain  { background: var(--arc-yellow); color: var(--on-plain);  border-color: var(--arc-yellow); }
.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 li::before { border-radius: 0; }
.scene::before { background: var(--arc-rose); color: var(--on-listen); border-radius: 0; }
.door--access .door__icon  { background: var(--arc-sky);    color: var(--on-read); }
.door--create .door__icon  { background: var(--arc-green);  color: var(--on-sign); }
.door--provide .door__icon { background: var(--arc-yellow); color: var(--on-plain); }
.ctl--sl[aria-pressed="true"]     { background: var(--arc-green); border-color: var(--arc-green); color: var(--on-sign); }
.ctl--listen[aria-pressed="true"] { background: var(--arc-rose);  border-color: var(--arc-rose);  color: var(--on-listen); }
.cmap__pin--live .cmap__dot     { box-shadow: 0 0 0 2px var(--arc-green); }
.cmap__pin--presence .cmap__dot { box-shadow: 0 0 0 2px var(--arc-rose); }

/* ---- Receipt as a stamped paper slip ---------------------------------------
   The signature component. Squared off, hard-edged, monospace citation. */
.receipt { border: 2px solid var(--ink); background: var(--paper); }
.receipt::after { display: none; }              /* v1's perforated edge is a soft flourish */
.receipt__source { border-top: 2px solid var(--ink); font-family: var(--font-mono); }
.receipt__label { text-transform: uppercase; letter-spacing: 0.06em; }
.receipt__headline { font-family: var(--font-display); letter-spacing: -0.03em; }

/* ---- Monospace elevated to a primary voice ---------------------------------
   Timestamps, citations, statistics and structural labels read as ledger entries. */
.fact__src, .right__cite, .promise__cite, .signal__unit, .country__code,
.media__meta, .specimen__meta, .gapstat__sub { font-family: var(--font-mono); }
.eyebrow, .promise__label, .scene__label, .signal__name, .plain__label, .rule__tag {
  font-family: var(--font-mono); letter-spacing: 0.08em;
}
.signal__number, .gapstat__number, .receipt__headline {
  font-variant-numeric: tabular-nums;
}

/* ---- Plain words: amber rule ---------------------------------------------- */
.plain { border-left-width: 8px; border-left-color: var(--arc-yellow); }

/* ---- Buttons: sharp rectangles --------------------------------------------- */
.btn { border-width: 2px; }
.btn--primary { border-color: var(--btn-bg); }
.btn--secondary, .btn--ghost { border-color: var(--ink); }
.ctl { border-width: 2px; border-color: var(--ink); }

/* ---- Tables and rules read as a ledger ------------------------------------- */
th, td { border-bottom: 1px solid var(--line); }
.facts, .rights { border: 2px solid var(--ink); }
.fact { border-bottom: 1px solid var(--line); }

/* The forced light card inside an ink band uses this system's light-theme accents. */
.section--ink .plain { --gold: #6D4C00; --green: #98291B; --rose: #5B2A86; --sky: #004B87; }