:root { color-scheme: light dark; --bg: #f7f3ec; --fg: #3a2e26; }
@media (prefers-color-scheme: dark) { :root { --bg: #211b17; --fg: #efe6dc; } }
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; line-height: 1.6; background: var(--bg); color: var(--fg); }
a { color: inherit; }
.skip-link { position: absolute; left: .5rem; top: .5rem; padding: .75rem 1rem; background: var(--fg); color: var(--bg); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
header { padding: .25rem 1rem; text-align: center; }
header a { display: inline-block; padding: .625rem .5rem; }
main { padding: 2rem 1rem; }
main:focus { outline: none; }
.hero { align-self: center; text-align: center; }
.hero h1 { font-weight: normal; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.2; margin: 0 0 .5rem; }
.hero p { margin: 0; letter-spacing: .08em; text-transform: uppercase; }
.prose { width: 100%; max-width: 40rem; margin: 0 auto; }
.prose h1 { font-weight: normal; line-height: 1.2; }
footer { padding: .5rem 1rem 1rem; text-align: center; }
footer a { display: inline-block; padding: .625rem .75rem; }