:root { color-scheme: light; background: #faf9f6; color: #27313a; font: 18px/1.65 Georgia, serif; }
body { max-width: 58rem; margin: 0 auto; padding: 0 1.5rem; }
header { padding: 1.5rem 0; border-bottom: 1px solid #d9dfe2; }
nav { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem 1.4rem; font: 1rem/1.5 system-ui, sans-serif; }
nav .brand { margin-right: auto; font: bold 1.25rem Georgia, serif; color: #27313a; }
a { color: #315d72; text-underline-offset: .2em; }
a:hover { color: #193a4b; }
a:focus-visible { outline: 3px solid #315d72; outline-offset: 5px; }
main { max-width: 42rem; padding: 3rem 0; }
h1 { font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.15; }
h2 { line-height: 1.3; }
footer { padding: 2rem 0; color: #596773; font-size: .9rem; }
@media (max-width: 480px) { body { padding: 0 1rem; } nav .brand { flex-basis: 100%; } main { padding: 1.5rem 0; } }