/* Element defaults. Everything here is unclassed HTML; anything with a class belongs elsewhere. */

* { box-sizing: border-box; }

/* The phone drawer waits off-canvas at translateX(100%), which still counts as layout — without
 * this the document is ~310px wider than the screen and the page scrolls sideways. `clip` rather
 * than `hidden`: hidden makes the root a scroll container and breaks the sticky masthead.
 */
html { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.04;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(36px, 5.4vw, 60px); }
h2 { font-size: clamp(26px, 3.2vw, 36px); }
h3 { font-size: 18px; letter-spacing: -.01em; }

p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; }

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