/* ============================================================
   BASE  —  reset + element defaults shared by every page
   ============================================================ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-8);
}

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

body {
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "ss01" 1; /* Inter niceties */
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* ---- Theme switch: circular wipe (View Transitions) ------
   The clip animation lives in JS (radiates from the toggle). Here we
   just stop the default snapshot crossfade and stack the new theme on
   top, so the wipe reveals it cleanly over the frozen old one. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 0; }
::view-transition-new(root) { z-index: 1; }

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

/* ---- Headings — tight, editorial ------------------------- */
h1, h2, h3, h4 {
  line-height: var(--leading-snug);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--step-h1); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); letter-spacing: 0; font-weight: var(--weight-semibold); }

p { text-wrap: pretty; }
p, li { max-width: var(--measure); }

/* ---- Links — identity color, restrained ------------------ */
a {
  color: var(--identity);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--identity-strong); text-decoration: underline; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--radius-sm);
}

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

::selection { background: var(--identity); color: var(--on-identity); }

/* ============================================================
   Shared layout primitives
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* Eyebrow / section label — a hairline SIDE line, used with intent.
   This is the sanctioned use of a border: a short cue, not a box. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--identity);
}

/* Visually-hidden but accessible */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}