:root { color-scheme: light; --ink: #14100c; --paper: #f0e6d2; --red: #8e2a1a; --line: #c9a66b; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Georgia, serif; font-size: 17px; line-height: 1.7; }
a { color: var(--red); text-underline-offset: 4px; overflow-wrap: anywhere; }
a:focus-visible { outline: 2px solid #486646; outline-offset: 5px; }
header, main, footer { max-width: 920px; margin-inline: auto; padding-inline: clamp(20px, 6vw, 56px); }
header { padding-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
header a { min-height: 44px; display: inline-flex; align-items: center; }
.brand { font-family: system-ui, sans-serif; font-size: 25px; font-weight: 700; letter-spacing: -1px; color: var(--ink); text-decoration: none; }
main { padding-block: clamp(40px, 7vw, 72px); }
h1 { font-family: system-ui, sans-serif; font-size: clamp(32px, 7vw, 58px); line-height: 1.1; letter-spacing: -1.5px; overflow-wrap: anywhere; margin: 0 0 16px; }
.intro { margin-bottom: 40px; }
.info-section { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 28px; }
.info-section h2, .kicker { font-family: system-ui, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; margin: 0 0 14px; }
p { margin: 12px 0; }
code { font-size: 14px; overflow-wrap: anywhere; }
footer { padding-block: 24px 36px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: system-ui, sans-serif; font-size: 14px; }
footer a { display: inline-flex; min-height: 44px; align-items: center; }
.skip-link { position: absolute; top: -100px; left: 20px; padding: 12px; background: var(--paper); }
.skip-link:focus { top: 8px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }