:root{
  --bg:#faf7f2;--card:#fff;--ink:#2b2622;--muted:#7a6f66;--accent:#b5562f;--accent-soft:#f3e3d8;--line:#ece4da;
  --c1:#f3d9c4;--c2:#dfe8cf;--c3:#f1e2b8;--c4:#e5d6e8;--c5:#d4e4ea;--c6:#f0d0cc;--c7:#e9dcc9;--c8:#d9e6d9;
  --serif:Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#1d1a17;--card:#26221e;--ink:#eee7df;--muted:#a89d92;--accent:#e08a5f;--accent-soft:#3a2a21;--line:#36302a;
  --c1:#4a3426;--c2:#33402a;--c3:#4a4026;--c4:#3d3142;--c5:#2a3b42;--c6:#4a2d2a;--c7:#433829;--c8:#2e3d2e;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.65 var(--serif)}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
.narrow{max-width:720px}

/* header / footer */
.top{border-bottom:1px solid var(--line)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:22px;padding-bottom:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:bold;color:var(--ink)}
.logo:hover{text-decoration:none}
.logo svg{width:34px;height:34px}
nav a{margin-left:18px;font:15px var(--sans);color:var(--muted)}
nav a:hover,nav a.on{color:var(--accent);text-decoration:none}
.foot{border-top:1px solid var(--line);margin-top:48px}
.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:22px;padding-bottom:30px;font:14px var(--sans);color:var(--muted)}
.foot a{color:var(--muted)}

/* home */
.hero{padding:48px 0 18px}
.hero h1{font-size:44px;line-height:1.12;margin:0 0 14px}
.hero p{color:var(--muted);max-width:640px;margin:0}
.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:28px 0 6px}
.tools input{flex:1 1 220px;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:16px var(--sans)}
.chip{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font:14px var(--sans);cursor:pointer}
.chip.on,.chip:hover{border-color:var(--accent);color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px;padding:22px 0 10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;color:var(--ink);display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}
.card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.06)}
.ph{height:150px;display:flex;align-items:center;justify-content:center;font-size:66px}
.card .b{padding:14px 18px 18px}
.card h3{margin:0 0 6px;font-size:21px;line-height:1.25}
.card p{margin:8px 0 0;font-size:16px;color:var(--muted)}
.meta{font:13px var(--sans);color:var(--muted)}
.tag{display:inline-block;font:12px var(--sans);color:var(--accent);background:var(--accent-soft);padding:2px 9px;border-radius:999px;margin-right:6px}
.empty{display:none;color:var(--muted);font:15px var(--sans);padding:20px 0}
.c1{background:var(--c1)}.c2{background:var(--c2)}.c3{background:var(--c3)}.c4{background:var(--c4)}
.c5{background:var(--c5)}.c6{background:var(--c6)}.c7{background:var(--c7)}.c8{background:var(--c8)}
.block{border-top:1px solid var(--line);margin-top:36px;padding-top:28px}
.block h2{margin-top:0}
.notes li{margin-bottom:6px}

/* recipe page */
.crumbs{font:14px var(--sans);color:var(--muted);margin:26px 0 0}
.crumbs a{color:var(--muted)}
.rhead{padding:18px 0 8px}
.rhead h1{font-size:40px;line-height:1.15;margin:8px 0 12px}
.lead{font-size:20px;color:var(--muted);margin:0 0 18px}
.banner{height:220px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:110px;margin:10px 0 22px}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px;padding:0;list-style:none}
.facts li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font:14px var(--sans)}
.facts b{display:block;font-size:12px;color:var(--muted);font-weight:normal}
.cols{display:grid;grid-template-columns:280px 1fr;gap:36px;align-items:start}
.ingr{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 20px 14px;position:sticky;top:16px}
.ingr h2,.steps h2{font-size:22px}
.ingr ul{padding-left:0;list-style:none;margin:0}
.ingr li{padding:6px 0;border-bottom:1px dashed var(--line);font-size:16px}
.ingr li:last-child{border-bottom:0}
.ingr label{cursor:pointer;display:flex;gap:8px;align-items:baseline}
.ingr input{accent-color:var(--accent)}
.ingr .sub{font:13px var(--sans);color:var(--muted);margin:12px 0 4px;text-transform:uppercase;letter-spacing:.04em}
.steps ol{padding-left:0;list-style:none;counter-reset:s;margin:0}
.steps li{counter-increment:s;position:relative;padding:0 0 18px 50px}
.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font:bold 16px var(--sans);display:flex;align-items:center;justify-content:center}
.tip{background:var(--accent-soft);border-radius:12px;padding:14px 18px;margin:8px 0 0;font-size:17px}
.tip b{font-family:var(--sans);font-size:14px;color:var(--accent);display:block;margin-bottom:4px}
.more{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:14px}
.more a{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;color:var(--ink);font-size:16px}
.more a:hover{border-color:var(--accent);text-decoration:none}
.posted{font:14px var(--sans);color:var(--muted)}

/* misc */
.center{text-align:center;padding:80px 0}
.center h1{font-size:72px;margin:0}
@media (max-width:760px){
  .hero h1{font-size:34px}.rhead h1{font-size:30px}
  .cols{grid-template-columns:1fr}.ingr{position:static}
  nav a{margin-left:12px}
  .banner{height:160px;font-size:80px}
}
@media print{
  .top,.foot,.crumbs,.more,.tools{display:none}
  body{background:#fff;color:#000}
  .cols{grid-template-columns:1fr}
}