/* ==========================================================================
   And The Little Ones Too: design tokens and base typography
   Source of truth: docs/BRAND_SYSTEM.md (v1.1). Load before article.css.

   Contrast (WCAG 2.2, measured):
     Deep Ink   on Warm Ivory 11.98  · White 13.16 · Pale Sage 10.94
     Slate      on Warm Ivory  5.33  · White  5.85 · Pale Sage  4.87
     Teal ink   on Warm Ivory  5.05  · White  5.54 · Pale Sage  4.61
     Clay ink   on Warm Ivory  5.07  · White  5.57 · Pale Sage  4.63
     Warm Ivory on Deep Ink   11.98  · Pale Sage on Deep Ink 10.94
   Forest Teal #39746D is 4.49 on Pale Sage, so TEXT uses --teal-ink.
   Soft Clay #C98168 is 2.80 on Warm Ivory: decorative rules and marks only,
   never text or meaningful graphics. Clay text uses --clay-ink.
   ========================================================================== */

/* Self-hosted, OFL-licensed (assets/fonts/OFL.txt). Latin subset, variable weight. */
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-latin-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  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: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  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: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin-italic-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  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;
}

/* Metric-matched fallbacks so the swap does not move text. Overrides computed
   from real glyph widths against Liberation Serif/Sans (metric-compatible with
   Times New Roman/Arial), weighted by English letter frequency. */
@font-face {
  font-family: "Source Serif 4 Fallback";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif");
  size-adjust: 119.01%;
  ascent-override: 87.05%;
  descent-override: 28.15%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Sans 3 Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 89.87%;
  ascent-override: 113.95%;
  descent-override: 44.51%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* Brand palette (docs/BRAND_SYSTEM.md) */
  --ink: #183344;          /* Deep Ink: headings, wordmark, high-emphasis text */
  --ivory: #F7F4ED;        /* Warm Ivory: the page */
  --teal: #39746D;         /* Forest Teal: research/data accent (graphics) */
  --clay: #C98168;         /* Soft Clay: human/editorial accent (decorative only) */
  --slate: #586770;        /* Slate: supporting copy */
  --sage: #E5ECE5;         /* Pale Sage: research panels, methodology */
  --white: #FFFFFF;

  /* Text-safe variants of the accents (same hue, darker; see header) */
  --teal-ink: #38726B;
  --clay-ink: #9F5339;

  /* Lines are Deep Ink at reduced strength, never an unrelated grey */
  --rule: rgb(24 51 68 / 0.16);
  --rule-strong: rgb(24 51 68 / 0.42);

  /* Type */
  --font-serif: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
  --font-sans: "Source Sans 3", "Source Sans 3 Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type ramp. Every font-size in the stylesheets uses one of these. */
  --text-label: 0.8125rem;                               /* 13px: evidence labels (uppercase, tracked) */
  --text-sm: 0.9375rem;                                  /* 15px: meta, captions, small UI */
  --text-ui: 1rem;                                       /* 16px: controls, tables, sources */
  --text-base: 1.125rem;                                 /* 18px: body */
  --text-lg: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem); /* standfirst */
  --text-h4: var(--text-lg);
  --text-h3: clamp(1.3125rem, 1.15rem + 0.6vw, 1.5rem);
  --text-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --text-h1: clamp(2.5rem, 1.6rem + 4vw, 4.75rem);
  --text-display: clamp(2.75rem, 1.5rem + 5.6vw, 5.75rem);

  --leading-tight: 1.06;
  --leading-snug: 1.3;
  --leading-body: 1.62;
  --measure: 68ch;

  /* Space (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* Layout */
  --page-max: 76rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --tap: 44px;

  /* Shape and depth */
  --radius: 4px;
  --radius-sm: 2px;
  --shadow-raised: 0 1px 2px rgb(24 51 68 / 0.06), 0 6px 18px -8px rgb(24 51 68 / 0.18);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 180ms;
}

/* ---- Base ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--rule-strong) var(--ivory);
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--teal-ink);
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: -0.022em; }
h2 { font-size: var(--text-h2); line-height: 1.12; letter-spacing: -0.015em; }
h3 { font-size: var(--text-h3); line-height: var(--leading-snug); letter-spacing: -0.005em; }
h4 { font-size: var(--text-h4); line-height: var(--leading-snug); font-family: var(--font-sans); font-weight: 650; }

p, ul, ol, dl, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }

a {
  color: var(--teal-ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgb(56 114 107 / 0.45);
  transition: text-decoration-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
a:hover { text-decoration-color: currentColor; }
main a:hover { color: var(--ink); }

strong, b { font-weight: 650; }
img, svg { display: block; max-width: 100%; height: auto; }

::selection { background: var(--sage); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--teal-ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Numerals in data line up */
table, .numeric, time { font-variant-numeric: tabular-nums lining-nums; }

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

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

/* Interaction and content handling (Web Interface Guidelines) */
[id] { scroll-margin-top: var(--space-6); }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: rgb(229 236 229 / 0.6); }
body { overflow-wrap: break-word; }
.sources a, .source-note a { overflow-wrap: anywhere; }