:root{
  --ink:#1f2430; --muted:#5b6472; --accent:#b4530a; --line:#e8e3da; --bg:#fbfaf8; --card:#ffffff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.65; margin:0;
}
.wrap{max-width:780px; margin:0 auto; padding:2.25rem 1.25rem 3rem}
header.site,footer.site{background:var(--card); border-color:var(--line)}
header.site{border-bottom:1px solid var(--line)}
header.site .wrap,footer.site .wrap{
  padding-top:1rem; padding-bottom:1rem; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:.5rem 1rem;
}
.brand{font-weight:700; font-size:1.2rem; color:var(--ink); text-decoration:none; letter-spacing:-.01em}
.brand span{color:var(--accent)}
nav a{color:var(--muted); text-decoration:none; margin-left:1.1rem; font-size:.95rem}
nav a:hover{color:var(--ink)}
h1{font-size:2.05rem; line-height:1.18; margin:.2rem 0 1rem; letter-spacing:-.02em}
.hero .lede{font-size:1.2rem; color:var(--muted); margin-top:0}
h2{font-size:1.3rem; margin-top:2.25rem}
h3{font-size:1.05rem; margin-top:1.6rem}
p,li{font-size:1.02rem}
a{color:var(--accent)}
ul{padding-left:1.2rem}
li{margin:.35rem 0}
.meta{color:var(--muted); font-size:.92rem; margin-top:-.4rem}
.callout{background:#fff6ec; border:1px solid #f0d9bf; border-radius:10px; padding:.85rem 1.1rem; color:#7a4a12; font-size:.95rem}
footer.site{border-top:1px solid var(--line); margin-top:3rem}
footer.site .wrap{color:var(--muted); font-size:.9rem}
footer.site a{color:var(--muted)}
hr{border:none; border-top:1px solid var(--line); margin:2rem 0}