/* Typography.
 *
 * IBM Plex Sans  -- body, UI, and every chart label. Chosen because it was
 *   drawn for technical documentation and carries true lining tabular figures,
 *   which is what makes a number in an axis and a number in a sentence read as
 *   one system. Variable, 400-700, one 45KB file.
 * IBM Plex Mono  -- tabular figures and code only. Same skeleton as the sans.
 * Instrument Serif -- display only, >=32px. Never touches reading text.
 *
 * Self-hosted from public/fonts (see tools/fetch_fonts.py). The built site
 * makes no external font request.
 */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Body sits at 17px. The scale below is deliberately shallow in the middle --
   * this site has far more prose and tabular data than it has headings. */
  --text-xs: 0.8125rem; /* 13px  chart tick labels, footnote body */
  --text-sm: 0.875rem; /* 14px  captions, table cells            */
  --text-base: 1.0625rem; /* 17px  body                             */
  --text-md: 1.1875rem; /* 19px  lede                             */
  --text-lg: 1.375rem; /* 22px  section heading                  */
  --text-xl: 1.75rem; /* 28px  route subheading                 */
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 2.75rem); /* display, small */
  --text-3xl: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); /* masthead thesis */

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.65;
}

/* Figures line up in columns everywhere a number can appear next to another
 * number. This is the single most important typographic setting on the site. */
.tabular,
table,
.figure,
.stat,
.axis text {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Prose ------------------------------------------------------------------ */

.prose {
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text);
}

.prose > * + * {
  margin-block-start: 1.15em;
}

.prose h2 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.011em;
  margin-block-start: 2.4em;
  margin-block-end: 0.1em;
  font-weight: 600;
  text-wrap: balance;
}

.prose h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin-block-start: 1.9em;
  margin-block-end: 0.1em;
  font-weight: 600;
  text-wrap: balance;
}

.prose h2 + p,
.prose h3 + p {
  margin-block-start: 0.55em;
}

.prose .lede {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--text);
}

.prose strong {
  font-weight: 600;
}

.prose blockquote {
  margin-inline: 0;
  padding-inline-start: 1.15rem;
  border-inline-start: 2px solid var(--accent);
  color: var(--text-muted);
}

.prose ul,
.prose ol {
  padding-inline-start: 1.4rem;
}

.prose li + li {
  margin-block-start: 0.4em;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-sunken);
  padding: 0.1em 0.32em;
  border-radius: var(--radius);
}

/* No hyphenation anywhere. The measure is ragged-right, where hyphenation
 * buys nothing and costs the occasional "iden-tity". */
.prose p,
.prose h2,
.prose h3,
.display {
  hyphens: none;
}