:root { color-scheme: light dark; font: 17px/1.65 system-ui, sans-serif; }
body { margin: 0; color: #142f39; background: #f4f8f8; }
main { max-width: 48rem; margin: 0 auto; padding: 2rem 1.2rem 4rem; }
a { color: #006a68; text-underline-offset: .15em; }
header { padding: 1rem 0 2rem; border-bottom: 1px solid #bdcfd2; }
nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.12; letter-spacing: -.03em; }
h2 { line-height: 1.3; margin-top: 2rem; }
.brand { font-weight: 750; text-transform: uppercase; letter-spacing: .1em; }
.draft { border: 2px solid #9d6500; border-radius: .5rem; padding: .8rem 1rem; background: #fff2cf; color: #4f3400; }
footer { margin-top: 3rem; border-top: 1px solid #bdcfd2; padding-top: 1rem; font-size: .9rem; }
@media (prefers-color-scheme: dark) {
  body { color: #e3eeee; background: #10232b; }
  a { color: #68dfce; }
}