:root {
  color-scheme: light dark;
  --cream: #f7f1e4;
  --ink: #13251d;
  --green: #0f5b3a;
  --muted: #5e6b64;
  --card: rgba(255, 255, 255, 0.62);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 18px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--cream);
}
main, header, footer { width: min(760px, calc(100% - 40px)); margin-inline: auto; }
header { padding: 52px 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { font: 700 30px/1.1 Georgia, serif; color: var(--ink); text-decoration: none; }
nav { display: flex; gap: 18px; font-size: 15px; }
a { color: var(--green); }
.hero, article { padding: 44px; border-radius: 28px; background: var(--card); border: 1px solid rgba(19, 37, 29, 0.1); }
h1, h2 { font-family: Georgia, serif; line-height: 1.12; }
h1 { font-size: clamp(42px, 8vw, 66px); margin: 0 0 18px; }
h2 { margin-top: 38px; }
p, li { color: var(--muted); }
.updated { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
footer { padding: 30px 0 54px; font-size: 14px; color: var(--muted); }
@media (prefers-color-scheme: dark) {
  :root { --cream: #0d1712; --ink: #f7f1e4; --green: #7fc49a; --muted: #c2ccc6; --card: rgba(255,255,255,.04); }
}
@media (max-width: 560px) { header { align-items: flex-start; flex-direction: column; } .hero, article { padding: 26px; } }