/* Lexington Brief - typography layer
   Load AFTER app.css, dark-fix.css and weather-dateline.css:
     <link rel="preload" href="/static/fonts/lb-sans.woff2"  as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="/static/fonts/lb-serif.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="stylesheet" href="/static/typography.css">
   Fonts go in /static/fonts/. All are SIL Open Font License 1.1:
     lb-sans.woff2, Inter (variable, weight axis)     lb-serif.woff2, Newsreader (variable, weight axis)
     lb-wordmark*.woff2, Newsreader pinned to weight 500 / italic 400 at optical size 72,
     subset to the letters in "Lexington Brief". If the wordmark text changes, regenerate them.
   Total payload is about 120 KB, cached after the first visit.

   Rules use (0,2,x) specificity so they win over plain .card h3 style rules in app.css.
   Merged cards are found with :has(.coverage a + a), so no class name is needed. */

@font-face {
  font-family: "LB Sans";
  src: url("/static/fonts/lb-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LB Serif";
  src: url("/static/fonts/lb-serif.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LB Wordmark";
  src: url("/static/fonts/lb-wordmark.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LB Wordmark";
  src: url("/static/fonts/lb-wordmark-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-sans:  "LB Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "LB Serif", Georgia, "Times New Roman", serif;
  --font-mark:  "LB Wordmark", "LB Serif", Georgia, serif;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* body usually sets its own font stack in app.css, so set it here too; form controls never inherit */
body, button, input, select, textarea { font-family: var(--font-sans); }

/* Masthead */
h1 {
  font-family: var(--font-mark);
  font-weight: 500;
  font-size: clamp(2.75rem, 2rem + 3.5vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
h1 em { font-style: italic; font-weight: 400; }
.dek {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  letter-spacing: -0.003em;
}
#dateline {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* Navigation and controls */
.navitem { font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.005em; }
.chip    { font-family: var(--font-sans); font-weight: 600; font-size: 0.875rem; }
.navnote, .status, footer { font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

/* Cards: serif for the story, sans for everything that is data */
.grid .card .meta {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.grid .card .tag {
  font-weight: 650;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.grid .card h3 {
  font-family: var(--font-serif);
  font-weight: 580;
  font-size: clamp(1.25rem, 1.15rem + 0.35vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.008em;
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}
.grid .card:has(.coverage a + a) h3 {            /* merged cards: lead headline */
  font-weight: 540;
  font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.grid .card > p {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Coverage rows */
.grid .card .coverage > b {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.grid .card .coverage a strong { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; }
.grid .card .coverage a span   { font-family: var(--font-sans); font-size: 0.8125rem; line-height: 1.35; }
.grid .card .coverage a small  { font-family: var(--font-sans); font-size: 0.75rem; }