:root { --primary: #d62828; --accent: #bf1d1d; --bg: #faf9f8; --text: #1f2328; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
header.site { background:#fff; border-bottom:1px solid #eee; position: sticky; top:0; z-index:50; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 16px; }
.topbar { display:flex; align-items:center; gap:16px; justify-content: space-between; flex-wrap: wrap; }
.logo { display:flex; align-items:center; gap:10px; }
.logo-badge { width:44px; height:44px; border-radius:10px; background: var(--primary); display:grid; place-items:center; color:#fff; font-weight:800; }
nav a { margin-right:14px; font-weight:600; color:#444; }
nav a.active { color: var(--primary); }
.searchbar { display:flex; align-items:center; gap:8px; flex: 1; max-width:620px; }
.searchbar input { width:100%; padding:12px 14px; border-radius:10px; border:1px solid #ddd; background:#fff; }
.btn { display:inline-block; background: var(--primary); color:#fff; padding:10px 14px; border-radius:10px; font-weight:700; }
.btn:hover { opacity:.92; text-decoration:none; }
.hero { background: var(--primary); color:#fff; }
.hero h1 { margin:0 0 6px; font-size: clamp(28px,4vw,42px); }
.hero p { margin:0; opacity:.98; }
.grid { display:grid; grid-template-columns: repeat(1, 1fr); gap:16px; }
@media (min-width: 740px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.card { background:#fff; border:1px solid #eee; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:transform .12s ease, box-shadow .12s ease; }
.card:hover { transform: translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.06); }
.card img { width:100%; height:190px; object-fit:cover; display:block; }
.card .content { padding:14px; }
.badge { display:inline-block; background:#ffe5e5; color: var(--primary); padding:4px 8px; border-radius:999px; font-size:12px; margin-bottom:8px; }
.kicker { font-size:13px; color:#666; text-transform:uppercase; letter-spacing:.04em; margin: 18px 0 8px; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top: 18px; }
.footer { background:#fff; border-top:1px solid #eee; margin-top:32px; }
.cat-row { display:flex; gap:10px; overflow:auto; padding-bottom:8px; }
.cat-pill { border:1px solid #ddd; border-radius:999px; background:#fff; padding:8px 12px; white-space:nowrap; }
.notice { background:#fff8f8; border:1px solid #ffdede; padding:12px; border-radius:12px; }
.recipe-hero img { width:100%; height:360px; object-fit:cover; border-radius:14px; border:1px solid #eee; }
.two-col { display:grid; grid-template-columns: 1fr; gap:18px; }
@media (min-width: 920px) { .two-col { grid-template-columns: 1fr 1fr; } }
.small { color:#666; font-size:14px; }