/* ==============================================
   GLOBAL — body, headings, links, typographic baseline
   ============================================== */

html {
  scroll-padding-top: var(--nav-height);
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--white);
}

/* ── Headings ─────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: 1.2;
  color: var(--navy);
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.625rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.875rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

/* ── Paragraphs ───────────────────────────────── */
p { max-width: 65ch; }

/* ── Links ────────────────────────────────────── */
a {
  color: var(--blue);
  text-underline-offset: 0.1875rem;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary); }

:focus-visible {
  outline: 0.1875rem solid var(--color-focus);
  outline-offset: 0.1875rem;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ── Inline text ──────────────────────────────── */
strong { font-weight: var(--fw-bold); }
em { font-style: italic; }

::selection {
  background: var(--orange);
  color: var(--white);
}

/* ── Section heading pattern ──────────────────── */
.section-label {
  display: block;
  width: fit-content;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--space-sm);
}

.section-title {
  margin-bottom: var(--space-md);
}

.section-lead {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  max-width: 100%;
  font-weight: var(--fw-regular);
  margin-bottom: 0;
}