:root{color-scheme:light;--paper:#faf4e9;--ink:#28221d;--rust:#7e3825;--line:#dccdb9}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:1.05rem/1.65 system-ui,sans-serif}
header,main,footer{width:min(100% - 2rem,68rem);margin-inline:auto}
header{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;padding-block:1rem;border-bottom:1px solid var(--line)}
a{color:var(--rust);text-underline-offset:.19em}
a:focus-visible{outline:3px solid var(--rust);outline-offset:4px}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--paper);padding:.5rem}
.skip:focus{top:.5rem}
.intro{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2rem;padding-block:2rem}
.eyebrow{font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rust)}
h1,h2{font-family:Georgia,serif;line-height:1.12}
h1{font-size:clamp(2.5rem,6vw,4.4rem);margin:.25em 0}
h2{font-size:clamp(1.55rem,3vw,2rem)}
.button{display:inline-block;background:var(--rust);color:white;padding:.5rem 1rem;border-radius:.35rem}
.illustration{overflow:hidden;border-radius:.6rem;aspect-ratio:auto;background:#503325}
.illustration img{width:100%;height:auto;display:block}
nav{display:flex;gap:.45rem 1.2rem;flex-wrap:wrap;border-block:1px solid var(--line);padding-block:.8rem}
nav a{padding:.25rem 0}
.guide{max-width:44rem;padding-block:1rem}
article{padding-bottom:1rem;border-bottom:1px solid var(--line);scroll-margin-top:1rem}
dt{font-weight:700}dd{margin:0 0 .5rem}
footer{padding:1rem 0 2rem;font-size:.9rem}
@media(max-width:42rem){.intro{grid-template-columns:1fr;gap:1rem}}