:root{--wine:#2A1424;--crest:#3B1E35;--foam:#5A3452;--marble:#F4E8E4;--worn:#BFA6B6;--saffron:#E5A93A;--f-display:"Marcellus",Georgia,serif;--f-text:"Alegreya",Georgia,serif;color-scheme:dark}
*{box-sizing:border-box}
html,body{background:var(--wine)}
body{margin:0;color:var(--marble);font:400 19px/1.65 var(--f-text);-webkit-font-smoothing:antialiased}
a{color:var(--saffron)}
:focus-visible{outline:2px solid var(--saffron);outline-offset:3px;border-radius:4px}
.wrap{max-width:780px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:20px;border-bottom:1px solid var(--crest)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--marble);font:400 24px/1 var(--f-display)}
.brand img{width:38px;height:38px;border-radius:10px}
.nav nav{display:flex;gap:20px;font-size:17px}
.nav nav a{color:var(--worn);text-decoration:none}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--marble)}
.title{padding-block:44px 24px;border-bottom:1px solid var(--crest)}
.kicker{font-style:italic;color:var(--saffron);margin:0}
h1,h2{font-family:var(--f-display);font-weight:400;margin:0}
.title h1{font-size:clamp(38px,6vw,56px);line-height:1.1;margin:8px 0 10px}
.title p.sub{color:var(--worn);margin:0}
article{padding-block:28px 56px}
article h2{font-size:27px;line-height:1.2;margin:34px 0 10px}
article p,article li{margin:0 0 10px}
article ul{padding-left:1.2em;margin:0 0 12px}
.box{background:var(--crest);border-radius:16px;padding:18px 22px;margin:8px 0 12px}
.box p{margin:0}
footer{border-top:1px solid var(--crest);padding-block:28px 44px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--worn);font-size:17px}
footer .motto{font-style:italic;color:var(--marble)}
footer a{color:inherit}