@font-face { font-family: "Archivo"; src: url("fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root { color-scheme: light; --paper: #e8ebee; --panel: #f6f7f8; --ink: #172131; --muted: #566173; --line: #c3c9d1; --signal: #d9931f; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.5 "Atkinson Hyperlegible", system-ui, sans-serif;
}
main { max-width: 40em; margin: 0 auto; padding: 12vh 16px 4em; }
h1 { font-family: "Archivo", sans-serif; font-stretch: 120%; font-weight: 800; font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: 1; margin: 0 0 0.2em; }
.lede { color: var(--muted); margin: 0 0 2.5em; }
.decks { list-style: none; margin: 0; padding: 0; }
.decks li { border-top: 3px solid var(--ink); padding: 0.9em 0 1.2em; }
.decks a { font-family: "Archivo", sans-serif; font-stretch: 105%; font-weight: 700; font-size: 1.5rem; color: var(--ink); text-decoration-color: var(--signal); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.decks a:hover { text-decoration-color: var(--ink); }
.decks p { margin: 0.3em 0 0; color: var(--muted); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }