:root {
  color-scheme: light dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 112.5%;
  line-height: 1.65;
  color: #20252b;
  background: #fafaf8;
}
* { box-sizing: border-box; }
body { max-width: 72ch; margin: 0 auto; padding: 0 1.25rem; overflow-wrap: anywhere; }
header { padding: 1.5rem 0; border-bottom: 1px solid #c8cdd1; }
nav ul { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; list-style: none; padding: 0; margin: 0; }
a { color: #174d85; text-decoration-thickness: .08em; text-underline-offset: .16em; }
a:hover { text-decoration-thickness: .15em; }
a:focus-visible, main:focus { outline: 3px solid #9a4a00; outline-offset: 4px; }
[aria-current="page"] { font-weight: 700; }
.skip-link { position: absolute; left: 1rem; top: -8rem; padding: .5rem 1rem; background: #fafaf8; z-index: 1; }
.skip-link:focus { top: 1rem; }
main { padding: 2rem 0 3rem; }
h1, h2, h3 { line-height: 1.25; text-wrap: pretty; }
h1 { font-size: 2rem; margin: 0 0 1.25rem; }
h2 { font-size: 1.4rem; margin: 2.25rem 0 .75rem; }
h3 { font-size: 1.15rem; margin: 1.75rem 0 .6rem; }
p { margin: 0 0 1rem; }
footer { padding: 1.25rem 0 2rem; border-top: 1px solid #c8cdd1; }
footer p { margin: 0; }
@media (prefers-color-scheme: dark) {
  :root { color: #e4e6e9; background: #181b1f; }
  a { color: #a0ccff; }
  header, footer { border-color: #525962; }
  a:focus-visible, main:focus { outline-color: #ffcb80; }
  .skip-link { background: #181b1f; }
}