/* ==========================================================================
   base.css — reset, element defaults, and the band model.
   Loads after tokens.css. Uses tokens only; defines no raw colors or fonts.
   ========================================================================== */

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

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

body {
  margin: 0;                       /* the page itself never has a margin */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-s);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

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

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

/* --------------------------------------------------------------------------
   The band model — THE core rule of this system.
   A band's background always reaches both screen edges. The gutter lives
   inside, on .band__inner, never on the band.
   width:100% and NOT 100vw: 100vw includes the scrollbar and produces a few
   pixels of horizontal scroll on every section.
   -------------------------------------------------------------------------- */

.band {
  width: 100%;
  padding-block: var(--space-band);
  background: var(--paper);
}

.band__inner {
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Media that genuinely bleeds: no ceiling, no gutter. */
.band--flush { padding-block: 0; }
.band--flush .band__inner { max-width: none; padding-inline: 0; }

/* Band grounds. Separation between sections is the ground changing —
   never a border, never a shadow. */
.band--alt     { background: var(--paper-2); }
.band--tint    { background: var(--primary-tint); }
.band--primary { background: var(--primary); color: var(--ink-inverse); }
.band--dark    { background: var(--ink);     color: var(--ink-inverse); }
.band--lg      { padding-block: var(--space-band-lg); }

/* --------------------------------------------------------------------------
   Typography. Headings are sans, tight and large; running prose is serif.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

h1 { font-size: var(--step-2xl); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: var(--step-xl);  line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: var(--step-l);   line-height: 1.25; }
h4 { font-size: var(--step-s);   line-height: 1.4;  }

p { margin: 0 0 var(--space-3); }
p:last-child, h1:last-child, h2:last-child, h3:last-child { margin-bottom: 0; }

/* Running prose: serif, comfortable measure, never wider than 68ch even
   inside a wide band. */
.prose {
  font-family: var(--font-serif);
  font-size: var(--step-m);
  line-height: 1.65;
  max-width: var(--measure-prose);
}

.lede {
  font-family: var(--font-serif);
  font-size: var(--step-l);
  line-height: 1.45;
  max-width: 46ch;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--space-2);
}

.band--dark .eyebrow,
.band--primary .eyebrow { color: var(--ink-inverse); opacity: 0.75; }

/* Links in prose: colored AND underlined — never color alone. */
a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 150ms ease;
}
a:hover { color: var(--primary-strong); }

.band--dark a, .band--primary a { color: var(--ink-inverse); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.band--dark :focus-visible,
.band--primary :focus-visible { outline-color: var(--ink-inverse); }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-5) 0;
}

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