:root {
  --bg: #fffaf3;
  --text: #2b2118;
  --muted: #6b5d50;
  --accent: #e2574c;
  --max: 960px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1612;
    --text: #f5ede4;
    --muted: #b3a597;
    --accent: #ff7a6e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }

header.site, footer.site { padding: 24px 0; }
header.site .wrap, footer.site .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo { font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--text); }
footer.site { color: var(--muted); font-size: 0.9rem; }
footer.site nav a { color: var(--muted); margin-left: 16px; }

.hero { padding: 64px 0; text-align: center; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.15; margin: 0 0 16px; }
.hero p { color: var(--muted); font-size: 1.15rem; max-width: 36em; margin: 0 auto 32px; }

.badges { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.badges a {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  font-weight: 600;
}

main.page { padding: 32px 0 64px; }
main.page h1 { margin-top: 0; }