/* =============================================================================

  The Agent Bets — Design Tokens

-----------------------------------------------------------------------------
  FONT APPROACH: self-hosted. All seven faces live in ../fonts/ as WOFF2:

    newsreader-400.woff2        Newsreader Regular      (SIL OFL, Google Fonts)
    newsreader-400-italic.woff2 Newsreader Italic       (SIL OFL, Google Fonts)
    newsreader-700.woff2        Newsreader Bold         (SIL OFL, Google Fonts)
    departure-mono-400.woff2    Departure Mono Regular  (SIL OFL, Helena Zhang,
                                rektdeckard/departure-mono v1.500 release)
    geist-400.woff2             Geist Regular           (SIL OFL, Google Fonts)
    geist-500.woff2             Geist Medium            (SIL OFL, Google Fonts)
    jacquard-12-400.woff2       Jacquard 12 Regular     (SIL OFL, Google Fonts)

  No Google Fonts <link> or @import is needed; nothing leaves the origin.
  departure-mono-LICENSE.txt ships alongside the binary for the OFL notice.

  DESIGN DECISIONS (tokenized opinions):
  - Link/focus color: deep teal (#0A6B5C), NOT the Times' blue #0968F6.
    Blue at full chroma fights the emerald accent; teal sits inside the green
    family so links harmonize with the accent while staying distinct from it.
    Contrast on paper #FBF7EE is ~5.9:1 (WCAG AA).
  - Status tags: CONFIRMED = brighter phosphor green #2E9A3D (deliberately
    lifted off the #0E7A3D accent so verification reads as signal, not brand),
    DEVELOPING = amber #C4A65A, REPORTED = neutral gray #707070.
  - The emerald accent appears at most once per page (ticker rule, CTA module,
    or wire band — never all three on one template).
  - The Times' red is banned from this system: no token, no utility, no
    comment-hack references it as a value. Verified absent 2026-10-03.
  - Every spacing token is a multiple of 8px. No shadows, no radius: flat
    editorial chrome, like the parent paper.

============================================================================= */

/* ---------- Self-hosted webfonts ---------- */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/newsreader-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/newsreader-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/newsreader-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Departure Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/departure-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/geist-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/geist-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Jacquard 12';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jacquard-12-400.woff2') format('woff2');
}

:root {

  /* ---------- Color tokens ---------- */

  /* Surfaces */
  --paper: #FBF7EE;            /* warm reading surface */
  --paper-inset: #F0EADC;      /* inset surface — For Agents / Morning Wire bands */

  /* Ink ramp — primary text to tertiary labels */
  --ink: #191919;              /* primary text */
  --ink-soft: #363636;         /* emphasized secondary */
  --ink-dim: #707070;          /* captions, datelines, meta */
  --ink-faint: #8F8F8F;        /* tertiary mono labels */

  /* Rules */
  --rule: #E5E5E5;             /* hairlines — never doubled */

  /* Brand accent — emerald. Once per page. */
  --accent: #0E7A3D;           /* deep emerald */
  --accent-hover: #0A5A2E;     /* deeper emerald for hover/active */

  /* Verification / status tags — deliberately off the accent */
  --status-confirmed: #2E9A3D; /* brighter phosphor green */
  --status-developing: #C4A65A;/* amber */
  --status-reported: #707070;  /* neutral gray */

  /* Links + focus — deep teal (see design-decisions note above) */
  --link: #0A6B5C;
  --link-hover: #075A4D;

  /* Live wire band — ink inversion of the paper palette */
  --wire-bg: #191919;
  --wire-ink: #F0EADC;
  --wire-ink-dim: #8F8F8F;
  --wire-rule: #363636;

  /* ---------- Type families ---------- */

  --font-headline: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'Departure Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-ui: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-wordmark: 'Jacquard 12', 'UnifrakturMaguntia', 'Newsreader', serif;

  /* ---------- Type scale ----------
     Sizes in px; line-heights snapped to the 8px grid where the type allows. */

  --type-wordmark-lg: 72px;
  --type-wordmark-lg-lh: 72px;
  --type-wordmark-sm: 36px;
  --type-wordmark-sm-lh: 40px;

  --type-display: 64px;        /* homepage lead headline */
  --type-display-lh: 72px;
  --type-headline: 40px;       /* article headlines */
  --type-headline-lh: 48px;
  --type-headline-md: 28px;    /* secondary card headlines */
  --type-headline-md-lh: 32px;
  --type-card-title: 20px;     /* compact card headlines */
  --type-card-title-lh: 28px;

  --type-deck: 22px;           /* standfirst */
  --type-deck-lh: 32px;
  --type-lead: 20px;           /* opening paragraph */
  --type-lead-lh: 32px;
  --type-body: 18px;           /* article body */
  --type-body-lh: 32px;
  --type-body-sm: 16px;        /* card decks, sidecars */
  --type-body-sm-lh: 24px;

  --type-ui: 15px;             /* buttons, inputs — Geist */
  --type-ui-lh: 24px;
  --type-byline: 15px;         /* "By X" — Newsreader */
  --type-byline-lh: 24px;
  --type-caption: 13px;
  --type-caption-lh: 20px;

  --type-meta: 12px;           /* kickers, badges, timestamps — mono */
  --type-meta-lh: 16px;
  --type-meta-sm: 11px;        /* tighter mono — ticker, footer labels */
  --type-meta-sm-lh: 16px;

  /* ---------- Spacing — every value a multiple of 8px ---------- */

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* ---------- Layout ---------- */

  --container: 1120px;         /* max page column */
  --measure: 65ch;             /* article body measure */
  --measure-wide: 920px;       /* wide media inside articles */
  --rule-width: 1px;           /* hairline — never doubled */
  --underline-offset: 3px;     /* link underline clearance (micro-detail, not a gap) */

  /* ---------- Breakpoints (documentation + JS; media queries use literals,
     CSS vars cannot appear in @media preludes — keep in sync) ----------
     --bp-md: 720px  — stacked chrome, single-column grids
     --bp-lg: 1080px — full multi-column rhythm */
  --bp-md: 720px;
  --bp-lg: 1080px;

  /* ---------- Motion — used rarely. If you need more than this, you don't. ---------- */

  --ease: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --ticker-duration: 48s;      /* live wire scroll speed — slow, readable */

  /* ---------- Flat chrome — documented as zero, not as omission ---------- */

  --radius: 0;
  --shadow: none;
}

/* =============================================================================
   Element defaults
============================================================================= */

html {
  background: var(--wire-bg); /* rubber-band scroll at top/bottom matches ink */
}

html,
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Sharper focus ring across the whole surface: link teal, visible on keyboard
   only, with an offset so it clears text and hairlines. */
*:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Selection — newsroom-restrained, mirrors the accent emerald. */
::selection {
  background: var(--accent);
  color: var(--paper);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* The institutional wordmark — the only place Jacquard 12 appears. */
.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-size: var(--type-wordmark-lg);
  line-height: var(--type-wordmark-lg-lh);
  letter-spacing: 0;
  color: var(--ink);
}

.wordmark--sm {
  font-size: var(--type-wordmark-sm);
  line-height: var(--type-wordmark-sm-lh);
}

/* Headlines — Newsreader 700, sentence case, optical sizing on. */
h1,
.h-display {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--type-display);
  line-height: var(--type-display-lh);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-optical-sizing: auto;
}

h2,
.h-headline {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--type-headline);
  line-height: var(--type-headline-lh);
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0;
  font-optical-sizing: auto;
}

h3,
.h-headline-md {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--type-headline-md);
  line-height: var(--type-headline-md-lh);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  font-optical-sizing: auto;
}

/* Standfirst — Newsreader italic 400, dimmer ink. */
.deck {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: var(--type-deck);
  line-height: var(--type-deck-lh);
  color: var(--ink-dim);
  margin: 0;
}

/* Mono section label — departure-mono is a pixel-grid face; keep tracking
   near zero and uppercase; never letterspace it wide. */
.kicker {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--type-meta);
  line-height: var(--type-meta-lh);
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

/* Body paragraph — Newsreader 400. */
p,
.body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  margin: 0 0 var(--space-2) 0;
}

/* Byline — Newsreader 400, name wrapped in <strong>. */
.byline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-byline);
  line-height: var(--type-byline-lh);
  color: var(--ink);
  margin: 0;
}

.byline strong {
  font-weight: 700;
}

/* Links — teal, underline on hover only (calm chrome, deliberate affordance). */
a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}