/* ==========================================================================
   typography.css — the primary design instrument of this framework
   Headings are set in the serif display face; interface text is set in the
   sans body face. Never mix the two roles.
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.display,
.h1,
.h2,
.h3,
.h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--colour-text);
  text-wrap: balance;
}

.display {
  font-size: var(--size-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

h1,
.h1 {
  font-size: var(--size-h1);
}

h2,
.h2 {
  font-size: var(--size-h2);
  line-height: var(--line-height-title);
}

h3,
.h3 {
  font-size: var(--size-h3);
  line-height: 1.24;
  letter-spacing: -0.015em;
}

h4,
.h4 {
  font-size: var(--size-h4);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

h5,
h6 {
  font-family: var(--font-body);
  font-size: var(--size-small);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* Italic emphasis inside a display heading — used sparingly for editorial lift. */
.display em,
h1 em,
h2 em {
  font-style: italic;
  color: var(--colour-accent);
}

/* --- Eyebrow -------------------------------------------------------------- */

.eyebrow {
  display: block;
  margin-bottom: var(--space-md);
  font-family: var(--font-navigation);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.eyebrow--accent {
  color: var(--colour-accent);
}

.eyebrow--rule {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.eyebrow--rule::before {
  content: '';
  inline-size: clamp(1.5rem, 4vw, 3.5rem);
  block-size: 1px;
  background-color: currentcolor;
  opacity: 0.55;
}

/* --- Body copy ------------------------------------------------------------ */

.lead {
  font-size: var(--size-lead);
  line-height: 1.42;
  letter-spacing: -0.008em;
  color: var(--colour-text);
  text-wrap: pretty;
}

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

/* --------------------------------------------------------------------------
   Default rhythm after a heading

   The reset strips every margin so that components can compose freely. That is
   the right default, but it means a heading followed by a paragraph collapses
   into a single visual block everywhere except inside .prose. This rule restores
   a sensible gap.

   Specificity note: the heading side uses :where() so it contributes nothing,
   and the following-element side uses :is() over element selectors so the rule
   scores (0,0,1) — exactly the same as the reset's `p { margin: 0 }`. Because
   typography.css is loaded after reset.css it wins on order, and any component
   rule using a class still overrides it.
   -------------------------------------------------------------------------- */

:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .display)
  + :is(p, ul, ol, dl, div, figure, blockquote, table) {
  margin-block-start: var(--space-sm);
}

/* A lead paragraph introducing a block of body copy needs a little more air. */
:where(.lead) + :is(.prose, .ruled-list, .grid, .table-wrap, .cluster) {
  margin-block-start: var(--space-lg);
}

.prose {
  max-inline-size: var(--reading-width);
}

.prose > * + * {
  margin-block-start: var(--space-md);
}

.prose p {
  text-wrap: pretty;
  margin-block-end: var(--space-xl);
}

.prose h2 {
  margin-block-start: var(--space-xl);
}

.prose h3 {
  margin-block-start: var(--space-lg);
}

.prose ul,
.prose ol {
  padding-inline-start: 1.35em;
}

.prose li + li {
  margin-block-start: var(--space-2xs);
}

.prose strong {
  font-weight: var(--weight-bold);
}

/* --- Statement type ------------------------------------------------------- */

.statement {
  max-inline-size: 22ch;
  font-family: var(--font-heading);
  font-size: var(--size-h2);
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.statement--wide {
  max-inline-size: 34ch;
}

/* --- Quote ---------------------------------------------------------------- */

.quote {
  max-inline-size: 34ch;
  margin: 0;
}

.quote__text {
  font-family: var(--font-heading);
  font-size: var(--size-h3);
  font-style: italic;
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.quote__text::before {
  content: '\201C';
  margin-inline-start: -0.45em;
}

.quote__text::after {
  content: '\201D';
}

.quote__attribution {
  display: block;
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-width) solid var(--colour-border);
  font-family: var(--font-navigation);
  font-size: var(--size-small);
  font-style: normal;
  line-height: 1.5;
  color: var(--colour-text-muted);
}

.quote__attribution strong {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--colour-text);
}

/* --- Small print ---------------------------------------------------------- */

.small {
  font-size: var(--size-small);
  line-height: 1.6;
}

.meta-line {
  font-family: var(--font-navigation);
  font-size: var(--size-small);
  color: var(--colour-text-muted);
}

.meta-line > * + *::before {
  content: '';
  display: inline-block;
  inline-size: 1px;
  block-size: 0.75em;
  margin-inline: var(--space-xs);
  vertical-align: -0.05em;
  background-color: var(--colour-border-strong);
}

/* --- Numerals ------------------------------------------------------------- */

.numeral {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  letter-spacing: -0.04em;
}