:root {
  --bg: #fff8f0; --card: #ffffff; --ink: #2a211b; --soft: #75685e; --line: #eadfd3;
  --tomato: #e4572e; --herb: #2e7d5b; --saffron: #f2a531;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #16130f; --card: #231f1a; --ink: #f6eee6; --soft: #b5a89c; --line: #3a332c; --tomato: #ff7a52; --herb: #5cc49a; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 720px; margin: 0 auto; padding: 32px 16px 80px; }
h1, h2, h3 { font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif; line-height: 1.2; }
h1 { font-size: 2.2rem; font-weight: 800; margin: 8px 0 4px; }
h2 { font-size: 1.3rem; margin: 36px 0 8px; }
h3 { font-size: 1.05rem; margin: 22px 0 4px; }
a { color: var(--tomato); }
.meta, .crumb { color: var(--soft); font-size: 0.92rem; }
.crumb a { text-decoration: none; font-weight: 600; }
.hero { text-align: center; padding: 48px 0 24px; }
.hero .plate { font-size: 72px; line-height: 1; }
.hero p { color: var(--soft); font-size: 1.15rem; max-width: 520px; margin: 12px auto 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 28px 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.card h3 { margin-top: 0; }
.card p { margin: 0; color: var(--soft); font-size: 0.97rem; }
.links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.button {
  display: inline-block; background: var(--tomato); color: #fff; text-decoration: none; font-weight: 700;
  padding: 12px 22px; border-radius: 14px;
}
.button.soft { background: transparent; color: var(--tomato); border: 1.5px solid var(--tomato); }
details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 10px 0; }
summary { font-weight: 700; cursor: pointer; }
details p { color: var(--soft); margin: 10px 0 0; }
footer { color: var(--soft); font-size: 0.9rem; text-align: center; margin-top: 56px; }