:root {
  --bg: #f6f1e8;
  --ink: #1c1a17;
  --muted: #5c574f;
  --teal: #058391;
  --line: #e2d9cc;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
}
header, main, footer { width: min(720px, calc(100% - 40px)); margin: 0 auto; }
header { padding: 28px 0 8px; }
header a { color: var(--teal); text-decoration: none; font-weight: 650; letter-spacing: 0.02em; }
h1 { font-size: 1.7rem; margin: 12px 0 8px; }
h2 { font-size: 1.15rem; margin: 28px 0 8px; }
p, li { color: var(--ink); }
p.lead, .muted { color: var(--muted); }
a { color: var(--teal); }
ul { padding-left: 1.2em; }
.card {
  display: grid;
  gap: 12px;
  margin: 20px 0 32px;
}
.card a {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ink);
}
.card a strong { display: block; color: var(--teal); }
footer { padding: 28px 0 40px; color: var(--muted); font-size: 0.92rem; border-top: 1px solid var(--line); }