*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

img, svg, canvas { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
/* list-style: none strips list semantics from VoiceOver in Safari. Restoring an
   empty marker keeps the list announced while showing no bullet. */
ul, ol { list-style: none; margin: 0; padding: 0; }
ul li::marker, ol li::marker { content: ""; }

/* :focus-visible is unsupported before Safari 15.4, so :focus carries the ring
   there and is then withdrawn wherever :focus-visible is understood. */
:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}