*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:#100e0c;color:#eee7da;font:17px/1.75 system-ui,sans-serif}
a{color:#e8ca8e;text-underline-offset:4px}
a:hover{color:#fff}
a:focus-visible{outline:3px solid #edc977;outline-offset:5px}
header,main,footer{width:min(1060px,calc(100% - 40px));margin:auto}
header{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:24px 0;border-bottom:1px solid #494032}
.brand{font:700 24px Georgia,serif;color:#fff;text-decoration:none}
nav{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px}
.hero{padding:66px 0 42px;max-width:830px}
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:#d4b57b}
h1{font:500 clamp(40px,6vw,70px)/1.08 Georgia,serif;margin:16px 0 24px;letter-spacing:-.025em}
h2{font:500 29px/1.3 Georgia,serif;margin:0 0 18px}
p{margin:0 0 20px}
.intro{font-size:21px;color:#c5bfb6}
.cta{display:inline-block;margin:12px 0;padding:12px 22px;border-radius:8px;background:#e0c18b;color:#21190e;font-weight:650;text-decoration:none}
.cta:hover{background:#f4d8a4;color:#21190e}
.note{font-size:14px;color:#b9afa0}
.content{max-width:790px}
section.article{padding:32px 0;border-top:1px solid #40382e}
li{margin-bottom:12px}
ol{padding-left:24px}
.example{padding:24px;background:#201c17;border-left:3px solid #d4b57b;border-radius:0 12px 12px 0}
.example p:last-child{margin:0}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:20px 0 60px}
.card{padding:28px;background:#201c17;border:1px solid #40382e;border-radius:16px}
.card h2{font-size:26px}
.card a{font-weight:600}
footer{margin-top:48px;padding:32px 0 44px;border-top:1px solid #494032;font-size:14px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:20px;top:10px;background:#100e0c;padding:10px;z-index:2}
@media(max-width:650px){header{align-items:flex-start;flex-direction:column}
.hero{padding-top:42px}
.cards{grid-template-columns:1fr}
.intro{font-size:19px}
h1{font-size:42px}
.card{padding:22px}
}