:root { --bg:#fbfaf7; --fg:#1d2430; --muted:#5b6575; --accent:#f6821f; --line:#dcd8cf; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14181f; --fg:#eceae4; --muted:#a2abb9; --line:#2b323d; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:18px/1.6 Georgia, "Times New Roman", serif; min-height:100vh; display:flex; flex-direction:column; }
header { display:flex; flex-wrap:wrap; gap:.75rem 2rem; align-items:center; padding:1rem 1.5rem; border-bottom:1px solid var(--line); }
nav { display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; }
a { color:var(--fg); text-underline-offset:3px; }
a:hover, a:focus-visible { color:var(--accent); }
a[aria-current="page"] { color:var(--accent); font-weight:bold; }
main { flex:1; max-width:40rem; width:100%; margin:0 auto; padding:3rem 1.5rem; }
.badge { display:inline-block; border:2px solid var(--accent); padding:.1rem .7rem; border-radius:999px; font-size:.9rem; }
h1 { font-size:clamp(2.5rem, 8vw, 4.5rem); line-height:1.05; margin:.5rem 0 1rem; }
footer { display:flex; justify-content:space-between; padding:1rem 1.5rem; border-top:1px solid var(--line); color:var(--muted); }