:root {
  --background: #fbf8f3;
  --foreground: #2c2521;
  --primary: #205641;
  --muted-foreground: #655d55;
  --border: #ded8cf;
  --secondary: #f2ece3;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: Heebo, Arial, sans-serif; line-height: 1.8; }
.container { width: min(100% - 2.5rem, 860px); margin-inline: auto; }
header { border-bottom: 1px solid var(--border); padding-block: 1rem; }
header a, nav a, article a, footer a { color: var(--primary); text-underline-offset: 4px; }
main { padding-block: 2.5rem; }
h1 { font-size: 2rem; line-height: 1.3; }
h2 { font-size: 1.5rem; line-height: 1.4; }
h3 { font-size: 1.125rem; }
nav { background: var(--secondary); padding: 1rem; border-inline-start: 3px solid var(--primary); }
nav ul { margin: 0; padding-inline-start: 1.5rem; }
article section { padding-block: 1.5rem; border-bottom: 1px solid var(--border); scroll-margin-top: 1rem; }
.intro, footer { color: var(--muted-foreground); }
footer { border-top: 1px solid var(--border); padding-block: 2rem; font-size: .875rem; }
a:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
@media (max-width: 480px) { h1 { font-size: 1.75rem; } }