:root{color-scheme:light;--ink:#1c2321;--paper:#faf9f6;--muted:#4a524f;--sand:#e7c9a7;--sea:#2f4f48;--line:#e4e0d6;--g:clamp(1.25rem,6vw,6rem)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.7 "DM Sans",system-ui,sans-serif}
a{color:inherit}
a:focus-visible{outline:3px solid var(--sea);outline-offset:3px}
.wrap{width:min(100%,1120px);margin:auto;padding-inline:var(--g)}
.bar{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
header{position:sticky;top:0;z-index:5;background:rgba(250,249,246,.97);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:700;line-height:1.2}
.brand img{width:50px;height:50px;object-fit:contain}
.brand small{display:block;color:var(--muted);font-size:.72rem;font-weight:500}
nav{display:flex;align-items:center;gap:1.4rem}
nav a{text-decoration:none;font-size:.94rem}
.button{display:inline-block;padding:.85rem 1.2rem;background:var(--sand);font-weight:700;text-decoration:none}
.hero{padding:clamp(4rem,9vw,7.5rem) 0;background:var(--sea);color:#fff}
.eyebrow{color:var(--sand);font:400 .85rem "IBM Plex Mono",monospace}
h1,h2,h3{line-height:1.1;letter-spacing:-.035em}
h1{max-width:16ch;margin:.8rem 0 1rem;font-size:clamp(2.6rem,6vw,5rem)}
h2{font-size:clamp(1.8rem,4vw,2.7rem)}
.hero p{max-width:700px;color:#e3eae6;font-size:1.1rem}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.actions .secondary{border:1px solid #fff;background:transparent;color:#fff}
main section{padding-block:clamp(3.5rem,7vw,5rem);border-bottom:1px solid var(--line)}
.content{max-width:760px}
.content p,.content li{color:var(--muted)}
.content h2{margin:0 0 1rem}
.content h3{margin:1.8rem 0 .4rem;font-size:1.25rem}
.content ul{padding-left:1.25rem}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
.related a{padding:1.2rem;background:#fff;border:1px solid var(--line);font-weight:700;text-decoration:none}
details{padding:1rem 0;border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:700}
details p{margin-bottom:0;color:var(--muted)}
footer{padding:1.5rem 0;background:var(--ink);color:#d5d8d2;font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem}
footer a{color:var(--sand)}
@media(max-width:640px){nav a:not(.button){display:none}.related{grid-template-columns:1fr}.button{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}