:root {
  color-scheme: light dark;
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.65;
  color: #242a36;
  background: #f8f9fb;
}

main {
  box-sizing: border-box;
  max-width: 48rem;
  padding: clamp(2rem, 8vw, 5rem) clamp(1.25rem, 5vw, 3rem);
  margin-inline: auto;
  overflow-wrap: anywhere;
}

h1, h2 {
  line-height: 1.2;
  letter-spacing: -.025em;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); margin-block: .5rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .5rem; }
p { margin: .5rem 0 1rem; }
a { color: #254e9b; text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.brand { font-weight: 650; }
.date { color: #505968; margin-bottom: 2rem; }
nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

@media (prefers-color-scheme: dark) {
  :root { color: #edf0f4; background: #181b22; }
  a { color: #a9c9ff; }
  .date { color: #b1bac9; }
}