:root { font-family: system-ui, sans-serif; color: #242424; background: #faf9f6; line-height: 1.65; }
* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer { max-width: 880px; margin: auto; padding: 1.5rem; }
header { border-bottom: 1px solid #d7d3cc; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
header > a { font-weight: 750; }
nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
a { color: #9a281e; text-underline-offset: .2em; overflow-wrap: anywhere; }
a:hover { color: #64170f; }
a:focus-visible { outline: 3px solid #9a281e; outline-offset: 4px; }
h1 { line-height: 1.2; font-size: clamp(2rem, 6vw, 2.8rem); }
h2 { line-height: 1.3; margin-top: 2rem; font-size: 1.35rem; }
main { min-height: 65vh; padding-bottom: 3rem; }
article { padding: 0 0 1.5rem; border-bottom: 1px solid #d7d3cc; }
footer { border-top: 1px solid #d7d3cc; font-size: .9rem; }
.notice { background: #fff0cf; border-left: 4px solid #8d5a00; padding: 1rem; }
.muted { color: #555; }
.skip { position: absolute; left: -10000px; }
.skip:focus { left: 1rem; top: 1rem; background: white; padding: .5rem; }
@media (max-width: 500px) { header, main, footer { padding: 1.1rem; } }