/* ==========================================================================
   FANGIN — Base / Reset
   Minimal reset + global element defaults. Keep this file free of
   component-specific rules — those belong in their own files
   (header.css, hero.css, etc.) so sections can be lifted into separate
   WordPress template parts later without untangling shared selectors.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* GSAP/ScrollTrigger owns the scroll experience */
  /* Only `body` used to carry this. `html`'s own canvas has no background
     rule of its own, so it defaults to the browser's plain white — normally
     invisible since body fully covers it, but any momentary gap (elastic
     overscroll/rubber-banding past the top or bottom on trackpad/touch, or
     a layout recalculation an instant before Lenis/ScrollTrigger settle
     body's height back to the viewport) lets that white canvas show
     through as a brief flash — reported around 03 — The Difference, whose
     560-680vh pinned chapter is the tallest scroll-trigger boundary on the
     page and so the likeliest place for a recalculation to land mid-
     scroll. Matching html's own background to body's removes the seam
     regardless of which of those momentarily exposes it. */
  background: var(--color-bg);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, p {
  margin: 0;
}

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

/* Utility label style used across meta/eyebrow text (nav links, captions) */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- Lenis (assets/js/lenis-scroll.js) ----
   The two rules Lenis's own stylesheet recommends that actually matter for
   how this site uses it (folded in here rather than linking its full
   lenis.css — everything else in that file concerns options/behaviours
   this build doesn't use, like an autoToggle wrapper or nested-scroll
   containers). Lenis adds the `lenis`/`lenis-stopped` classes to <html>
   itself, so these only ever apply once it's actually running.
   `height: auto` guards against a stray height:100% rule fighting Lenis's
   own scroll-height measurement (this file sets no such rule today, but
   Lenis's own docs call this out as the standard safety net); `overflow:
   clip` on `.lenis-stopped` is what makes a future `lenis.stop()` call
   (not currently used anywhere, but harmless to have ready) actually lock
   scrolling instead of just pausing the smoothing. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

/* ---- Reduced motion: global fallback ----
   Component scripts also branch on this at runtime (see main.js), but this
   blanket rule protects any CSS transitions/animations we add later. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}