/* Reset and page basics */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-0)/1.6 var(--font);
  font-kerning: normal; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 650; letter-spacing: -0.025em; overflow-wrap: break-word; text-wrap: balance; }
h2 { font-size: var(--step-2); line-height: 1.1; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
img { max-inline-size: 100%; block-size: auto; }
.muted { color: var(--ink-2); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page { inline-size: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; }