:root { color-scheme: light; background: #fcf8f1; color: #30242a; font: 1rem/1.6 system-ui, sans-serif; }
body { max-width: 44rem; margin: auto; padding: 1rem clamp(1rem, 5vw, 3rem) 2rem; overflow-wrap: anywhere; }
a { color: #6c253d; text-underline-offset: .2em; }
a:focus-visible { outline: .15rem solid #6c253d; outline-offset: .2rem; }
header { border-bottom: 1px solid #dccbc4; padding-block: .5rem 1rem; }
header a { font-weight: 650; }
main { padding-block: 1.25rem 2rem; }
h1, h2 { color: #32151f; font-family: Georgia, serif; line-height: 1.2; }
h1 { font-size: clamp(2rem, 7vw, 3rem); }
h2 { margin-block-start: 1.5em; font-size: 1.35rem; }
.story-preview { font: 1.16rem/1.75 Georgia, serif; }
.story-preview h1 { margin-block: .35em; }
footer { border-top: 1px solid #dccbc4; }
nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; padding-block: 1rem; }
.skip-link { position: absolute; top: 0; left: 1rem; padding: .5rem 1rem; background: #fcf8f1; transform: translateY(-120%); }
.skip-link:focus { transform: none; }