:root{--ink:#1d2a22;--muted:#5b6a60;--paper:#fbf6ea;--card:#fffdf7;--line:#e6dcc6;--green:#1f4630;--green2:#2f5f43;--gold:#b98a2c;--red:#b93a2f}
@media (prefers-color-scheme:dark){:root{--ink:#efe8d8;--muted:#b3ab98;--paper:#14231a;--card:#1b2e22;--line:#2d4535;--gold:#e0b45a;--red:#e0675a}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
h1,h2,h3,.serif{font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;font-weight:600;line-height:1.2}
a{color:var(--red)}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
header.top{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
header.top a.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:20px}
header.top a.brand img{width:34px;height:34px}
header.top nav a{color:var(--muted);text-decoration:none;margin-left:18px;font-size:15px}
header.top nav a:hover{color:var(--ink)}
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;padding:56px 0 64px}
.hero h1{font-size:clamp(34px,5vw,52px);margin:0 0 18px}
.hero p.lead{font-size:20px;color:var(--muted);margin:0 0 26px;max-width:34em}
.hero img{width:100%;max-width:300px;justify-self:center;filter:drop-shadow(0 18px 30px rgba(10,30,18,.25))}
.badge{display:inline-block;padding:10px 18px;border-radius:999px;background:var(--green);color:#fbf6ea;font-size:15px}
.badge small{opacity:.75}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:8px 0 56px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.card h3{margin:0 0 8px;font-size:21px}
.card p{margin:0;color:var(--muted);font-size:16px}
.band{border-top:1px solid var(--line);padding:44px 0}
.band h2{font-size:30px;margin:0 0 12px}
.band p{color:var(--muted);max-width:42em}
.prose{max-width:44em;padding:24px 0 64px}
.prose h1{font-size:40px;margin:16px 0 8px}
.prose h2{font-size:24px;margin:34px 0 8px}
.prose p,.prose li{color:var(--ink)}
.prose .meta{color:var(--muted);font-size:15px}
footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--muted);font-size:14px}
footer a{color:var(--muted);margin-right:16px}
@media (max-width:760px){.hero{grid-template-columns:1fr;padding:28px 0 40px}.hero img{max-width:200px;grid-row:1}.grid{grid-template-columns:1fr}header.top nav a{margin-left:12px}}
header.top nav{display:flex;align-items:center}
details.lang{position:relative;margin-left:18px}
details.lang summary{list-style:none;cursor:pointer;color:var(--muted);font-size:14px;border:1px solid var(--line);border-radius:8px;padding:3px 9px}
details.lang summary::-webkit-details-marker{display:none}
details.lang[open] summary,details.lang summary:hover{color:var(--ink)}
details.lang div{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px;min-width:180px;box-shadow:0 10px 30px rgba(0,0,0,.12);z-index:5}
details.lang div a{display:block;margin:0;padding:7px 10px;border-radius:6px;color:var(--ink);font-size:15px}
details.lang div a:hover{background:var(--paper)}
details.lang div a[aria-current]{font-weight:600}
@media (max-width:760px){details.lang{margin-left:12px}}