/* ============================================================
   SCRIPT — TYPOGRAPHY TOKENS
   One family: Montserrat. Bold + tight for display, light + airy
   for intros, regular for body. ALL CAPS + tracking for eyebrows.
   ============================================================ */
:root {
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* weights */
  --fw-light: 300;       /* @kind font */
  --fw-regular: 400;     /* @kind font */
  --fw-medium: 500;      /* @kind font */
  --fw-semibold: 600;    /* @kind font */
  --fw-bold: 700;        /* @kind font */
  --fw-extrabold: 800;   /* @kind font */

  /* ---- Type scale (px) ---- */
  --fs-display: 88px;   /* hero — bold, tight tracking */
  --fs-h1: 56px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-h4: 20px;
  --fs-lead: 20px;      /* intro paragraph — light weight */
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-eyebrow: 14px;   /* uppercase label */
  --fs-caption: 13px;   /* @kind font */  /* bijschrift bij beeld */
  --fs-source: 12px;    /* @kind font */  /* bronvermelding / voetnoot */

  /* ---- Grote cijfers — the impact figure (219, 158, 8,3) ---- */
  --fs-figure: 96px;    /* @kind font */  /* stat figure in a column */
  --fs-figure-xl: 160px;/* @kind font */  /* the number that carries a whole page */

  /* ---- Line heights ---- */
  --lh-display: 1.05;   /* @kind font */
  --lh-tight: 1.2;      /* @kind font */
  --lh-heading: 1.2;    /* @kind font */
  --lh-body: 1.6;       /* @kind font */
  --lh-lead: 2.2;       /* @kind font */

  /* ---- Tracking ---- */
  --ls-display: -0.011em;  /* @kind font */
  --ls-eyebrow: 0.14em;    /* @kind font */
  --ls-tag: 0.08em;        /* @kind font */
  --ls-figure: -0.02em;    /* @kind font */
}

/* ---- Specimen helper classes (optional, for cards/prose) ---- */
.scr-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-heading);
}
.scr-h1 { font: var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-sans); letter-spacing: var(--ls-display); color: var(--text-heading); }
.scr-h2 { font: var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-sans); color: var(--text-heading); }
.scr-h3 { font: var(--fw-bold) var(--fs-h3)/var(--lh-tight) var(--font-sans); color: var(--text-heading); }
.scr-h4 { font: var(--fw-semibold) var(--fs-h4)/var(--lh-tight) var(--font-sans); color: var(--text-heading); }
.scr-lead { font: var(--fw-light) var(--fs-lead)/var(--lh-lead) var(--font-sans); color: var(--text-body); }
.scr-body { font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); color: var(--text-body); }
.scr-small { font: var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font-sans); color: var(--text-muted); }
.scr-eyebrow {
  font: var(--fw-semibold) var(--fs-eyebrow)/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-body);
}

/* ---- Report set: the figure, its label, and the small print ---- */
.scr-figure {
  font: var(--fw-bold) var(--fs-figure)/0.9 var(--font-sans);
  letter-spacing: var(--ls-figure);
  color: var(--scr-blue);
  font-variant-numeric: lining-nums tabular-nums;
}
.scr-figure-xl { font-size: var(--fs-figure-xl); }
/* The label under a figure — what the number counts. */
.scr-figure-label {
  font: var(--fw-semibold) var(--fs-h4)/1.25 var(--font-sans);
  color: var(--text-heading);
}
/* Bijschrift bij beeld. */
.scr-caption { font: var(--fw-regular) var(--fs-caption)/1.5 var(--font-sans); color: var(--text-muted); }
/* Bronvermelding / voetnoot — plain and direct, never apologetic. */
.scr-source { font: var(--fw-regular) var(--fs-source)/1.5 var(--font-sans); color: var(--text-muted); }
.scr-source sup, .scr-footnote-ref { font-size: 0.75em; vertical-align: super; line-height: 0; }