/* ================================================================
   RESET — Opinionated minimal reset
   ================================================================ */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  height: 100%;
  /* Warm paper on the ROOT element (not just body): during a cross-document
     View Transition the base canvas behind the transition overlay is painted
     from html, and the navbar pill's rounded-corner snapshot + the tilted page
     edges reveal it — a transparent html let the UA default (white) show at the
     four corners. Paper here makes every exposed gap seamless. */
  background-color: var(--surface-page);
  /* Always reserve the scrollbar gutter so the layout never shifts
     sideways if a vertical scrollbar appears/disappears. */
  scrollbar-gutter: stable;
}

body {
  min-height: 100%;
  overflow-x: hidden;
  background-color: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--type-body1-font);
  font-size: var(--type-body1-size);
  line-height: var(--type-body1-line);
  font-weight: var(--weight-book);
}

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

img {
  height: auto;
}

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

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

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-regular);
}

/* ── ORPHAN CONTROL ───────────────────────────────────────────────
   A single word stranded alone on the last line is the most visible
   typographic error a page can make, and at display sizes it is close to
   inevitable — a six-word sentence at 64px will strand its last word at most
   viewport widths. Fixing it per-element with ` ` is a losing game: it
   has to be redone for every copy edit and every breakpoint.

   So it is set ONCE, here, and every page, component, and future case study
   inherits it:

   `balance` — evens the length of all lines. Right for headings, where the
   shape of the block matters and the text is short. Browsers cap it at
   ~6 lines, which is why it is not used for body copy.
   `pretty`  — leaves normal line breaking alone but refuses to leave a lone
   word on the last line. Right for paragraphs.

   Both degrade to normal wrapping where unsupported, so there is no fallback
   to write. Components may override per element (the case stat values use
   `balance` because they are short phrases in a narrow column). */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p, li, dd, dt, figcaption, blockquote, .case-lede {
  text-wrap: pretty;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}