:root { --bg:#faf8f4; --fg:#1f1d1a; --muted:#6d675e; --card:#fff; --line:#e6e1d8; --accent:#2f6f4f; --accent-fg:#fff; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#161513; --fg:#ece8e1; --muted:#a39d93; --card:#201f1c; --line:#34312c; --accent:#5fb98a; --accent-fg:#0d1a13; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 680px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 1.8rem; line-height:1.2; margin: .2em 0 .6em; }
h2 { font-size: 1.15rem; margin: 1.6em 0 .5em; }
a { color: var(--accent); }
nav { font-size:.9rem; margin-bottom: 1rem; }
.kicker { color: var(--muted); font-size:.85rem; text-transform: uppercase; letter-spacing:.04em; margin:0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin:12px 0; }
.card h2 { margin:.2em 0 .6em; }
.card h2 a { color: inherit; text-decoration: none; }
.card.list { border-color: var(--accent); }
.bring { display:inline-block; background:var(--accent); color:var(--accent-fg); text-decoration:none; font-weight:600; padding:10px 16px; border-radius:999px; }
.bring.local { opacity:.6; }
.ingredients { list-style:none; padding:0; margin:0; }
.ingredients li { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); }
.spec { color: var(--muted); white-space: nowrap; }
ol li { margin: .3em 0; }
aside { margin-top:1.5em; padding:12px 14px; border-left:3px solid var(--accent); background:var(--card); color:var(--muted); }