:root { color-scheme: dark; font: 18px/1.6 system-ui, sans-serif; background: #101918; color: #e8efea; }
* { box-sizing: border-box; }
body { max-width: 64rem; margin: auto; padding: 2rem clamp(1.25rem, 5vw, 4rem); }
header, footer { color: #b1c1b7; }
header { display: flex; justify-content: space-between; gap: 2rem; }
a { color: #c8edce; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid #e5c780; outline-offset: 6px; }
main { margin: clamp(4rem, 12vh, 8rem) 0; max-width: 40rem; }
.eyebrow { color: #b1c1b7; }
h1 { font-size: clamp(3rem, 10vw, 6rem); line-height: 1.1; letter-spacing: -.05em; margin: 1rem 0 1.5rem; }
.intro { font-size: 1.3rem; max-width: 32rem; }
nav { display: grid; gap: .3rem; margin: 2.5rem 0; }
nav a { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid #40524a; }
.note { font-size: .85rem; color: #b1c1b7; max-width: 34rem; }
footer { font-size: .8rem; overflow-wrap: anywhere; }
@media (forced-colors: active) { nav a { border-color: LinkText; } }
@media print { :root { background: white; color: black; } a, header, footer, .note, .eyebrow { color: black; } }