/* ==========================================================================
   Typography — few levels, wide gaps between them
   ========================================================================== */

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background-color: var(--bg-page);
  overflow-x: clip;
}

/* —— Display: the architecture of the page ——
   Large type must never hyphenate or break mid-word. */
.display-xl,
.display,
.heading-2,
.heading-3 {
  overflow-wrap: normal;
  hyphens: none;
}

.display-xl,
.display {
  font-weight: 400;
  text-wrap: balance;
}

.display-xl {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.heading-2 {
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.heading-3 {
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* —— Reading sizes —— */
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  max-width: var(--measure);
}

/* —— Technical annotation: quiet, never loud —— */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.text-muted {
  color: var(--text-muted);
}