/* ══════════════════════════════════════════════════════════════════════
   Base: reset, type, links, focus, utilities. Mobile first — every rule
   is written for the narrow viewport; breakpoints (768, 1024) add upward.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-height) + var(--space-4));
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  /* No top padding: every page opens on a dark hero that runs up behind the
     transparent header (see layout.css → "header over the hero"). */
}

html.is-scroll-locked, html.is-scroll-locked body { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: var(--text-3xl); }
h3, .h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }

a { color: var(--color-steel); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--steel-800); }

strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

button { font: inherit; color: inherit; }

.lead { font-size: var(--text-lg); color: var(--color-muted); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: var(--space-2); left: var(--space-2);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--color-cta);
  color: var(--color-cta-ink);
  font-weight: 700;
  border-radius: var(--radius-pill);
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease-out);
  text-decoration: none;
}
.skip-link:focus { transform: none; }

.center { text-align: center; }

.icon { width: 1.35em; height: 1.35em; flex: none; }
.icon--sm { width: 1.1em; height: 1.1em; }

/* No-JS: show the plain "Menu" link, hide the burger that needs JS. */
.menu-nojs { display: none; }
html:not(.js) .burger { display: none; }
html:not(.js) .menu-nojs { display: inline-flex; }

/* Reveal start state — only when motion is ready (see partials/head.php),
   so content can never be stranded invisible. */
.js.motion-ready [data-reveal] { opacity: 0; transform: translateY(22px); }

/* Above-the-fold hero copy rises in with CSS, starting at first paint —
   not after the scripts load — so the largest text (the LCP element) paints
   immediately. It starts at 20 % opacity, not 0: Chrome does not count
   text painted fully transparent, so a fade from 0 would push LCP back to
   the end of the animation. --i staggers the lines by 60 ms. */
@keyframes hero-rise { from { opacity: 0.2; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js.motion-ready [data-hero-rise] { animation: hero-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 60ms) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* The icon sprite (core/icons.php): out of sight but not display:none,
   which some browsers treat as unrenderable for <use> references. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }