/* Reset + base typography + layout primitives */

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

html {
  color-scheme: light;
  scroll-behavior: smooth;
  /* Without this, browser overscroll/rubber-band bounce past the top edge (and the gap the
     sticky header's own stacking can briefly expose) falls back to the browser's own default
     canvas color instead of the page background — visible as a dark bar above the header. */
  background: var(--bg);
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-display);
  text-wrap: balance;
}

h1 { font-size: var(--fs-display-xl); }
h2 { font-size: var(--fs-display-lg); }
h3 { font-size: var(--fs-display-md); }
h4 { font-size: var(--fs-display-sm); }

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

input, select, textarea { font: inherit; color: inherit; }

ul, ol { list-style: none; padding: 0; }

/* Focus visibility — always visible, always uses the accent color */
:focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 3px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -3rem;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--duration-fast) var(--ease-calm);
}
.skip-link:focus { top: var(--space-2); }

/* Layout primitives */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-12);
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: var(--space-2);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* [data-reveal] and [data-reveal-type] initial/final states are now set directly by GSAP
   in js/animations.js (gsap.set / ScrollTrigger), not by a CSS class — no base rule needed here.
   If GSAP fails to load, initAnimations() no-ops and content is simply visible (safe default). */

/* Masked reveal wrapper (text + image), built at runtime by prepareMaskWrapper() in animations.js */
.mask-outer {
  overflow: hidden;
}
.mask-inner {
  display: inline-block;
}
h1.mask-outer .mask-inner,
h2.mask-outer .mask-inner,
p.mask-outer .mask-inner {
  display: block;
}