*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 8rem; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--font-display); font-stretch: 85%; font-weight: 750;
  line-height: 1.08; letter-spacing: -.01em; margin: 0 0 var(--space-2);
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-stretch: 95%; font-weight: 700; line-height: 1.25; }
p { margin: 0 0 var(--space-2); max-width: var(--measure); }
a { color: var(--ink-2); text-underline-offset: .2em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
img, svg { max-width: 100%; }
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--ink); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; }
.lede { font-size: var(--step-1); color: var(--mute); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }