/* ============================================================
   TYPOGRAPHY  —  Transducer Media
   "Three voices, one system."

   Newsreader   — the editorial voice: titles, section heads, pull
                  quotes, whispered lines. Sentence case, generous
                  size, real italics. This is where the warmth lives.
   IBM Plex Sans — everything you actually read: body, captions,
                  proposals, decks. Humanist and quiet.
   IBM Plex Mono — kickers, credits, timecodes, runtimes. Always
                  uppercase, wide tracking. The technical seasoning
                  that signals film — in small doses.
   Archivo      — bolder functional labels & small titles.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-serif: 'Newsreader', 'Times New Roman', Georgia, serif;
  --font-sans:  'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-label: 'Archivo', 'IBM Plex Sans', system-ui, sans-serif;

  /* ---- Display / serif scale (Newsreader, light) ---- */
  --display-1: 200 74px/1.04 var(--font-serif);  /* hero title         */
  --display-2: 300 56px/1.06 var(--font-serif);  /* section opener     */
  --display-3: 300 44px/1.1  var(--font-serif);  /* page headline      */
  --title-1:   400 32px/1.15 var(--font-serif);  /* sub-headline       */
  --title-2:   400 24px/1.25 var(--font-serif);  /* card title         */
  --serif-quote: 300 italic 28px/1.45 var(--font-serif); /* pull quote  */

  /* ---- Body (IBM Plex Sans) ---- */
  --body-lg:   300 18px/1.7  var(--font-sans);
  --body:      300 15px/1.8  var(--font-sans);   /* the brand-spec body */
  --body-sm:   400 13px/1.7  var(--font-sans);
  --caption:   400 12px/1.6  var(--font-sans);

  /* ---- Functional labels (Archivo) ---- */
  --label-lg:  600 20px/1.2 var(--font-label);
  --label:     600 16px/1.25 var(--font-label);
  --label-sm:  600 13px/1.3 var(--font-label);

  /* ---- Mono kicker / metadata (IBM Plex Mono) ---- */
  --kicker:      500 11px/1.4 var(--font-mono);
  --meta:        400 11px/1.5 var(--font-mono);
  --tracking-kicker: 0.3em;   /* uppercase, wide                       */
  --tracking-meta:   0.12em;

  /* ---- Italic toggle helper ---- */
  --serif-italic: italic;  /* @kind other */
}

/* Utility classes (optional — semantic aliases still preferred) */
.t-kicker {
  font: var(--kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-muted);
}
.t-meta {
  font: var(--meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--text-faint);
}