/* =========================================================================
   Base — reset, typography, layout primitives.
   Spacing is done with grid/flex `gap`, never with per-element margins, so
   sibling groups can't collapse or double up on each other.
   ========================================================================= */

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

* { margin: 0; }

/* Any author `display` beats the UA rule for [hidden], which would silently
   un-hide every component that sets one (grids, flex rows, the empty state).
   Toggling `.hidden` from JS has to keep working, so this wins outright. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + var(--space-m));
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Long-form prose is the serif; UI chrome stays in the sans. */
p, li, dd, blockquote { font-family: var(--font-display); }

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

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

img, video { height: auto; }

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

button {
  background: none;
  border: none;
  padding: 0; /* else the UA's 1px 6px indents anything using a bare button */
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: from-font;
}

a:hover { text-decoration-color: currentColor; }

:where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-snug);
  text-wrap: balance;
  letter-spacing: -0.012em;
}

hr {
  border: none;
  border-top: 1px solid var(--rule);
}

/* ---- Focus ------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  inset-inline-start: var(--gutter);
  inset-block-start: -100%;
  z-index: 200;
  padding: var(--space-2xs) var(--space-s);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
}

.skip-link:focus-visible { inset-block-start: 0; }

/* ---- Layout primitives -------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); }

/* The magazine grid: a narrow label column, then the content column.
   `.section` owns block padding and the rule; children never add their own
   outer margins, which keeps the cascade from fighting over spacing. */
.section {
  display: grid;
  grid-template-columns: var(--eyebrow-col) minmax(0, 1fr);
  column-gap: var(--space-xl);
  row-gap: var(--space-m);
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(var(--space-2xl), 9vw, var(--space-3xl));
  border-top: 1px solid var(--rule);
}

.section__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  min-width: 0;
}

.section__title {
  font-size: var(--step-3);
  max-width: 20ch;
}

.section__lede {
  color: var(--ink-muted);
  font-size: var(--step-1);
  max-width: var(--measure);
}

/* The eyebrow tracks the section as you read it. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.section__eyebrow {
  position: sticky;
  top: calc(var(--topbar-h) + var(--space-m));
  align-self: start;
  padding-top: 0.55em;
}

@media (max-width: 60rem) {
  .section {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-s);
  }

  .section__eyebrow {
    position: static;
    padding-top: 0;
  }
}

/* ---- Reveal on scroll — replaces AOS ------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Utility ------------------------------------------------------------ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tabular { font-variant-numeric: tabular-nums; }

/* Any wide child scrolls inside its own box; the page body never does. */
.scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

@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;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}