/* ─────────────────────────────────────────────────────────────────────
   typography.css
   @font-face declarations (self-hosted woff2, never the Google CDN at
   runtime) and the LOOM type scale.

   Batch 6: Schibsted Grotesk (client's choice) for display, body, labels.
     --font-display / --font-body / --font-label → Schibsted Grotesk
     --font-mono                                  → Geist Mono (accent)
     --font-ui                                    → Inter (infrastructure)

   The @font-face blocks below DEFINE the family names. Everywhere else
   we reference the tokens, never the literal names. All prior typefaces
   (Space Grotesk, Space Mono, Geist Mono, Roboto Mono) kept for revert.

   NOTE ON SIZES: tuned for Schibsted Grotesk's proportions (humanist
   grotesque, slightly tall x-height). Keep values in tokens/utility
   classes so that re-tuning is localized.
   ───────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Variable.woff2') format('woff2-variations'),
       url('../fonts/SpaceGrotesk-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  font-named-instance: 'Regular';
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable.woff2') format('woff2-variations'),
       url('../fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

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

/* ─── Batch 5 trial: Geist Mono + Roboto Mono ───────────────────────── */

@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Italic-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('../fonts/roboto-mono-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* ─── GeistMono Regular (post titles only, Mei 7/13) ────────────────
   The Regular 400 static file, referenced as 'GeistMono' (no space).
   The variable-weight 'Geist Mono' (with space) stays for everything
   else that uses the mono accent. */

@font-face {
  font-family: 'GeistMono';
  src: url('../fonts/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* ─── Reading component: JetBrains Mono + Lora ──────────────────────
   Used exclusively inside the live reading-screen phone mockup. */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Variable.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

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

/* ─── Batch 6: Schibsted Grotesk (client's final choice) ─────────── */

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ─── Root settings ──────────────────────────────────────────────── */

html {
  font-family: var(--font-body);
  font-size: 16px;                 /* rem base; body is sized up below */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: -0.005em;
  /* kern + liga + calt are on by default in most browsers; declaring
     them keeps the intent visible in the source. */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
}

/* ─── Type scale (utility classes; the system in code) ─────────────
   v3: body grew (16 → 19px) and the sidebar label grew past it (24px),
   an intentional inversion. The statement stays at display size. */

.t-display {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 5.4vw, 4rem);    /* 52-64px statement range */
  font-weight: 400;                          /* Schibsted lightest is 400 */
  letter-spacing: -0.018em;
  line-height: 1.04;
}

.t-label {
  font-family: var(--font-label);
  font-size: var(--type-label);    /* the label step, clearly larger than body */
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.12;
}

.t-body {
  font-family: var(--font-body);
  font-size: 1.1875rem;            /* 19px */
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.5;
}

.t-ui {
  font-family: var(--font-ui);
  font-size: 0.875rem;             /* 14px */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

.t-caption {
  font-family: var(--font-ui);
  font-size: 0.8125rem;            /* 13px */
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.45;
}

.t-folio {
  font-family: var(--font-ui);
  font-size: 0.6875rem;            /* 11px */
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-transform: lowercase;
}

.t-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ─── Default semantic elements ──────────────────────────────────── */

p {
  font-family: var(--font-body);
  font-size: 1.1875rem;            /* 19px */
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: pretty;               /* avoid orphans */
  hyphens: none;
  /* Old-style figures for numbers in body prose ("35 years", "28 years
     since"). Proportional, not tabular: tabular-nums widened the comma and
     period to figure width (they double as numeric separators), which read
     as a space before every comma and period. Proportional keeps them tight. */
  font-variant-numeric: oldstyle-nums;
}

/* The sidebar label IS the heading; we never use h1/h2 inside the body. */
h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 400; margin: 0; }

/* Headlines wrap with the better algorithm: balance the last lines. */
.statement,
.section__label { text-wrap: balance; }

a { color: inherit; text-decoration: none; }
strong { font-weight: 600; }
em { font-style: italic; }