/* Purpose: Reset + base element styles. Derived from the approved WV reference build.
   No component or page styles here — only resets and bare HTML elements. */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Lenis smooth-scroll (initialised in animations.js). */
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: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Custom GSAP cursor is desktop-only — see animations.js. cursor:none is applied
   via .has-custom-cursor (added by JS) so touch / no-JS keep the native cursor. */
.has-custom-cursor { cursor: none; }

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--gold); color: var(--emerald); }

/* Global heading typography — ported verbatim from the WV reference so every section
   heading matches by default (override per component only when the reference does). */
h1 {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: var(--page-hero-h1);   /* 64px desktop */
  line-height: 1.04; letter-spacing: -0.022em;
  color: var(--ink); padding-bottom: 0.08em;
  text-wrap: balance;
}
h2 {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: var(--sec-h2);          /* 48px desktop */
  line-height: 1.05; letter-spacing: -0.022em;
  color: var(--ink); padding-bottom: 0.08em;
  text-wrap: balance;
}
h3 {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: var(--sec-h3);
  line-height: 1.18; letter-spacing: -0.015em;
  color: var(--ink); padding-bottom: 0.06em;
}
h4 {
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  font-size: 20px; line-height: 1.3; color: var(--ink); letter-spacing: -0.01em;
}
h1 em, h2 em, h3 em { font-style: italic; color: var(--serif-em-color); }
p.lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-72); line-height: 1.55; }

/* Widow control site-wide: headings balance line lengths; body text avoids a lone
   last word on its own line (text-wrap: pretty). Graceful no-op in older browsers. */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li, blockquote, figcaption, .lead, .eyebrow, .label { text-wrap: pretty; }

/* Focus — never strip without replacement (RULEBOOK §8 / WCAG). */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Skip link — first focusable element on every page. */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--emerald);
  color: var(--cream);
  padding: 8px 16px;
  z-index: var(--z-modal);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.skip-link:focus { top: 0; }

/* Honor reduced-motion globally (RULEBOOK §11.9). */
@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;
  }
}