/* Design tokens and element defaults. */
:root {
  --paper: #ffffff;
  --tint: #f3f3fa;
  --ink: #2f2a86;
  --line: #dcdcec;
  --stamp: #c8102e;
  --text: #1d1d24;
  --muted: #62646f;

  --font-body: Georgia, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Impact, "Arial Narrow Bold", "Helvetica Neue", Arial, sans-serif;

  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.875rem;
  --measure: 60ch;
  --topbar-height: 3.5rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--topbar-height);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: var(--step-0) / 1.65 var(--font-body);
}

h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--stamp);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  background: var(--paper);
  padding: .5rem .75rem;
  z-index: 20;
}