/* ============================================================
   Reset + base typography
   ============================================================ */

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

html {
  font-size: 100%;
  /* `clip` keeps stray horizontal overflow out of view WITHOUT turning
     the root into a scroll container — `hidden` would, and that silently
     breaks `position: sticky` for every pinned stage on the page. */
  overflow-x: clip;
  scroll-behavior: auto;         /* scrolling is driven by JS */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  /* Matches the opening section, so the canvas behind an elastic
     overscroll at the top isn't a different colour to the hero. */
  background-color: var(--white);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--black);
  overflow-x: clip;
  transition: background-color var(--dur-fast) linear;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu--is-showing { overflow: hidden; }

/* A scroll-driven narrative and browser scroll anchoring fight each
   other: when a late image changes layout, the browser "helpfully"
   shifts scrollY, which moves every scene's progress with it. */
body { overflow-anchor: none; }

img, svg, video { max-width: 100%; height: auto; display: block; border: 0; }

/* Artwork is desaturated at render time, so dropping a colour
   photograph into assets/ can't break the monochrome palette. */
img, video { filter: grayscale(1); }

h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5rem; font-weight: 500; }

h1 {
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-tight);
  margin-bottom: 0;
}

h2 {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-head);
  margin-bottom: 32px;
}

h3 {
  font-size: var(--fs-h3);
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 16px;
}

h6 {
  font-size: var(--fs-h6);
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--grey);
  margin-bottom: 16px;
}

p {
  margin: 0 0 1rem;
  font-size: inherit;
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
}
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; cursor: pointer; line-height: inherit; }

strong, b { font-weight: 500; }
em, i { font-style: italic; }

ul, ol { margin: 0 0 1rem; padding-left: 1.1em; }
li { margin-bottom: 0.35em; }

blockquote {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  color: var(--black);
}

cite { display: block; font-style: normal; }

.caption {
  font-size: var(--fs-caption);
  line-height: 1.35;
  color: var(--grey);
  margin-bottom: 0.5rem;
}
.caption strong { color: var(--black); font-weight: 500; }

/* Screen-reader-only text */
.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;
}

/* Without an accent hue, the ring and the selection take their
   contrast from whichever ground they land on. */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

::selection { background: var(--black); color: var(--white); }
.section-black ::selection { background: var(--white); color: var(--black); }