/* ──────────────────────────────────────────────────────────────
   microanalytics — Design System
   type.css · semantic .t-* utility classes
   ──────────────────────────────────────────────────────────────
   Mirrors brandbook v2 §6 "Type scale" exactly.

   | Role         | Family         | Size               | LH   | Wt  | font-variation-settings |
   |--------------|----------------|--------------------|------|-----|-------------------------|
   | Hero display | Space Grotesk  | clamp(48,8.5vw,116) | 1.05 | 500 | geometric sans (logo)   |
   | H1           | Fraunces       | 40                 | 1.10 | 500 | 'opsz' 120, 'wght' 500  |
   | H2           | Fraunces       | 28                 | 1.20 | 500 | 'opsz'  72, 'wght' 500  |
   | H3           | Fraunces       | 20                 | 1.30 | 500 | 'opsz'  48, 'wght' 500  |
   | Lede / body+ | Inter          | 17                 | 1.60 | 400 | —                       |
   | Body         | Inter          | 15                 | 1.65 | 400 | —                       |
   | Small        | Inter          | 13                 | 1.50 | 400 | —                       |
   | Eyebrow      | IBM Plex Mono  | 12                 | 1.40 | 400 | 0.04em · UPPERCASE      |
   | Tech tag     | IBM Plex Mono  | 12                 | 1.40 | 400 | sentence case           |
   | Section #    | IBM Plex Mono  | inherit            |  —   | 400 | —                       |

   Use these classes anywhere. base.css binds bare <h1>/<h2>/<h3>
   to the same scale for HTML that doesn't carry a class.
   ────────────────────────────────────────────────────────────── */

/* Hero display — Space Grotesk (geometric sans; echoes the logo wordmark) */
.t-hero {
  font-family: var(--font-hero);
  font-weight: 500;
  font-size: clamp(48px, 8.5vw, 116px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: none;
  margin: 0;
}
.t-hero em { font-style: normal; color: var(--fg-2); font-weight: 500; }

@media (min-width: 721px) {
  .t-hero {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
            line-clamp: 2;
    overflow: hidden;
  }
}

/* H1 — Fraunces 40 / 1.10 / 500 · opsz 120 */
.t-display, h1.t, .t-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.10;
  letter-spacing: -0.005em;
  font-variation-settings: 'opsz' 120, 'wght' 500;
  text-wrap: balance;
  margin: 0;
}
.t-display em, h1.t em, .t-h1 em { font-style: normal; color: var(--fg-2); font-weight: 500; }

/* H2 — Fraunces 28 / 1.20 / 500 · opsz 72 */
.t-h2, h2.t {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.20;
  letter-spacing: 0;
  font-variation-settings: 'opsz' 72, 'wght' 500;
  text-wrap: balance;
  margin: 0;
}
.t-h2 em, h2.t em { font-style: normal; color: var(--fg-2); font-weight: 500; }

/* H3 — Fraunces 20 / 1.30 / 500 · opsz 48 */
.t-h3, h3.t {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.30;
  letter-spacing: 0;
  font-variation-settings: 'opsz' 48, 'wght' 500;
  margin: 0;
  color: var(--fg-1);
}
.t-h3 em, h3.t em { font-style: normal; color: var(--fg-2); font-weight: 500; }

/* Lede / body large — Inter 17 / 1.60 / 400 */
.t-lede, .t-body-large {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.60;
  color: var(--fg-2);
  max-width: 60ch;
  margin: 0;
}

/* Body — Inter 15 / 1.65 / 400 */
.t-body, p.t {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 60ch;
  margin: 0;
}

/* Small — Inter 13 / 1.50 / 400 */
.t-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.50;
  color: var(--fg-2);
}

/* Eyebrow / section label — IBM Plex Mono 12 / 1.40 · 0.04em · UPPERCASE */
.t-eyebrow, .t-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.40;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Tech tag — IBM Plex Mono 12 / 1.40 · sentence case */
.t-tag, .t-tech-tag {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.40;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-2);
}

/* Section number — IBM Plex Mono · matches context · 400 */
.t-number, .t-section-number {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--fg-3);
}

/* Mono inline — data, code, KPIs */
.t-mono, code {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.40;
  letter-spacing: 0;
  color: var(--fg-1);
}

/* Big stat number — Fraunces · 500 · opsz 144 · matches Hero */
.t-stat {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 67px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  font-variation-settings: 'opsz' 144, 'wght' 500;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}