:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #d4d4d4; background: #1c1e26; line-height: 1.65; }
* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer { max-width: 72ch; margin: auto; padding: 24px; }
header { border-bottom: 1px solid #3f465c; }
nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
a { color: #f5c542; text-underline-offset: .2em; overflow-wrap: anywhere; }
a:hover { color: #fff0bb; }
a:focus-visible { outline: 2px solid #f5c542; outline-offset: 5px; }
h1, h2 { line-height: 1.25; color: #fff0db; text-wrap: balance; }
h1 { font-size: 2rem; margin: 8px 0 16px; }
h2 { font-size: 1.25rem; margin-top: 36px; }
li + li { margin-top: 10px; }
ul, ol { padding-left: 24px; }
.meta, footer { color: #b6b8c2; font-size: .875rem; }
footer { border-top: 1px solid #3f465c; }
@media print { :root { color: #111; background: white; } a, h1, h2, .meta, footer { color: #111; } }