:root {
  --bg: #f4f6f2;
  --card: #ffffff;
  --ink: #22312a;
  --muted: #5d6b60;
  --accent: #2a5d4e;
  --gold: #c8a15f;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 28px; background: var(--card);
  border-bottom: 2px solid var(--gold);
}
.brand { font-size: 20px; font-weight: bold; color: var(--accent); display: flex; align-items: center; gap: 10px; }
.mark { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); display: inline-block; }
nav a { color: var(--muted); text-decoration: none; margin-left: 18px; font-size: 15px; }
nav a:hover { color: var(--accent); }
main { max-width: 880px; margin: 0 auto; padding: 36px 24px; }
.hero h1 { font-size: 34px; color: var(--accent); margin-bottom: 12px; }
.hero p { color: var(--muted); font-size: 17px; max-width: 640px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 34px; }
article {
  background: var(--card); border: 1px solid #e2e6dd; border-radius: 10px;
  padding: 20px 22px;
}
article h3 { color: var(--accent); margin-bottom: 8px; font-size: 18px; }
article p { color: var(--muted); font-size: 15px; }
footer { text-align: center; padding: 22px; color: var(--muted); font-size: 14px; border-top: 1px solid #e2e6dd; margin-top: 40px; }
footer a { color: var(--accent); }
a { color: var(--accent); }