:root {
  --bg: #fff6e8;
  --ink: #2b1a12;
  --muted: #7a5f4f;
  --accent: #e2483d;
  --gold: #f4b63f;
  --card: #ffffff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1410;
    --ink: #fbeee0;
    --muted: #c2a896;
    --accent: #ff6a5c;
    --gold: #f4b63f;
    --card: #2a1e18;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 0 20px;
}
a { color: var(--accent); }
main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; }
footer {
  width: 100%; max-width: 720px; margin: 0 auto;
  padding: 24px 0 32px;
  color: var(--muted); font-size: 14px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center;
}
footer a { color: var(--muted); }

/* Splash */
.hero { text-align: center; padding: 12vh 0 6vh; }
.hero svg { width: min(240px, 60vw); height: auto; animation: swing 3.2s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes swing { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .hero svg { animation: none; } }
h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1.1; margin: 24px 0 8px; letter-spacing: -0.02em; }
.tagline { font-size: 1.2rem; color: var(--muted); margin: 0 0 32px; }
.pill {
  display: inline-block; padding: 10px 20px; border-radius: 999px;
  background: var(--accent); color: #fff; text-decoration: none; font-weight: 600;
}

/* Text pages */
.doc { padding: 48px 0 24px; }
.doc h1 { font-size: 2.2rem; }
.doc h2 { font-size: 1.2rem; margin-top: 32px; }
.doc .home { text-decoration: none; font-weight: 600; }
.updated { color: var(--muted); font-size: 14px; }