/* Harvest Honey, matching src/theme/index.ts. */
@font-face { font-family: Figtree; src: url(/fonts/Figtree_400Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Figtree; src: url(/fonts/Figtree_600SemiBold.ttf); font-weight: 600; font-display: swap; }
@font-face { font-family: Bricolage; src: url(/fonts/BricolageGrotesque_800ExtraBold.ttf); font-weight: 800; font-display: swap; }

:root {
  color-scheme: light dark;
  --bg: #f5efe2;
  --surface: #fffcf4;
  --ink: #2b2418;
  --muted: #6d6350;
  --line: #e6dbc4;
  --glow: #c98a17;
  --glow-ink: #2b1a00;
  --glow-soft: #f5e6c2;
  --link: #7d5407;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #18140d;
    --surface: #221d14;
    --ink: #efe8d9;
    --muted: #aea38c;
    --line: #362f22;
    --glow: #e5aa3e;
    --glow-soft: #3a2e15;
    --link: #e5aa3e;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 Figtree, system-ui, sans-serif;
}
main { max-width: 620px; margin: 0 auto; padding: 32px 16px 56px; }
a { color: var(--link); }
.brand {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px;
  color: var(--ink); text-decoration: none; font: 800 19px Bricolage, Figtree, sans-serif;
}
.brand::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--glow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--glow) 25%, transparent);
}
h1 { font: 800 32px/1.15 Bricolage, Figtree, sans-serif; margin: 0 0 12px; }
h2 { font: 800 21px/1.25 Bricolage, Figtree, sans-serif; margin: 30px 0 6px; }
p, ul, ol { margin: 0 0 12px; }
li { margin-bottom: 6px; }
.lead { font-size: 18px; color: var(--muted); }
.muted { color: var(--muted); font-size: 15px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin: 20px 0; }
.card h2 { margin-top: 0; }
.button {
  display: block; padding: 15px 18px; border-radius: 14px; text-align: center; text-decoration: none;
  background: var(--glow); color: var(--glow-ink); font-weight: 600;
}
.button.quiet { background: var(--glow-soft); color: var(--ink); margin-top: 10px; }
footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
footer a { margin-right: 14px; }
[hidden] { display: none !important; }