/* ============================================================================
   03-BASE — reset + iOS typography defaults
   ============================================================================ */

html {
  -webkit-text-size-adjust: 100%;   /* stop iOS Safari inflating text in landscape */
  scroll-behavior: smooth;
  scroll-padding-block-start: 4.5rem; /* clear the sticky nav on anchor jumps */
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  letter-spacing: var(--track-body);
  color: var(--label);
  background: var(--bg-grouped);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-title);
  margin: 0;
  text-wrap: balance;      /* stops one orphan word on its own line */
}
h1 { font-size: var(--type-large-title); letter-spacing: var(--track-large-title); }
h2 { font-size: var(--type-title-1); }
h3 { font-size: var(--type-title-3); }
h4 { font-size: var(--type-headline); font-weight: var(--weight-semibold); }

p { margin: 0; text-wrap: pretty; }
p, li { max-inline-size: var(--measure); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

ul, ol { margin: 0; padding-inline-start: 1.25em; }

strong, b { font-weight: var(--weight-semibold); }

small, .footnote { font-size: var(--type-footnote); color: var(--label-secondary); }

/* iOS-style focus ring — visible, rounded, never removed */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* Every interactive element meets the 44pt HIG minimum. Enforced here once
   rather than remembered per-block. */
:where(a[class*="btn"], button, [role="button"], summary, .list-row) {
  min-block-size: var(--tap-min);
}

button { font: inherit; color: inherit; }

/* Section rhythm */
.section { padding-block: var(--section-gap); }
.section--tight { padding-block: calc(var(--section-gap) * 0.55); }

/* iOS grouped-list section header: small, uppercase, secondary, inset */
.group-label {
  font-size: var(--type-footnote);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--label-secondary);
  padding-inline: var(--space-m);
  margin-block-end: var(--space-xs);
}

.eyebrow {
  font-size: var(--type-footnote);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The opening paragraph. Was body text stretched across the full container —
   a 60rem line of secondary-coloured prose with nothing shaping it. Now it is
   set as an intro: larger, at a reading measure, in full-strength ink. */
.lede {
  font-size: var(--type-title-3);
  font-weight: var(--weight-regular);
  color: var(--label);
  line-height: var(--leading-snug);
  max-inline-size: 62ch;
  text-wrap: pretty;
}

/* Screen-reader-only. Table captions and section labels need to exist for
   assistive tech and for search engines without appearing in the layout.
   Not `display:none` — that removes it from the accessibility tree too. */
.visually-hidden {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ============================================================================
   LEDE — the standfirst.

   Not a paragraph. Two or three short sentences whose job is to carry the
   reader from a full-bleed hero into the page. Three rules drive the design:

   · CENTRED, because it sits directly under a centred hero and a left-aligned
     block there reads as a different page starting.
   · SHORT MEASURE (~46ch) with text-wrap: balance, so every line is a similar
     length and the shape is deliberate rather than ragged.
   · GENEROUS AIR above and below. The whitespace is what makes a short
     statement feel confident instead of stranded.

   It steps DOWN from the hero h1 and UP from body text — it must not compete
   with the headline it follows.
   ============================================================================ */
.lede {
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  font-weight: var(--weight-regular);
  line-height: 1.45;
  letter-spacing: -0.011em;
  color: var(--label-secondary);
  max-inline-size: 46ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}
/* The lede is a short statement, not a section — it does not need a full
   section gap under it before the next heading. */
.section:has(> .center > .lede) { padding-block-end: var(--space-m); }

/* Option A selected 2026-08-08: plain centred. Air and balance do all the
   work — no rule, no lead sentence. */