:root{
  --green:#718b54;
  --green-dark:#4d6635;
  --green-soft:#eef3e9;
  --cream:#faf9f5;
  --text:#30332f;
  --muted:#6b7068;
  --line:#e3e6df;
  --white:#fff;
  --warn:#fff7df;
  --warn-border:#e7c875;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--cream);
  line-height:1.65;
}
a{color:var(--green-dark)}
.site-header{background:#fff;border-bottom:1px solid var(--line)}
.header-inner,.wrap{width:min(1050px,calc(100% - 34px));margin:0 auto}
.header-inner{padding:26px 0 20px;text-align:center}
.brand{
  display:inline-block;color:#283124;text-decoration:none;
  font-size:clamp(2rem,6vw,3.2rem);font-weight:700;letter-spacing:-.045em
}
.tagline{margin:4px 0 0;color:var(--muted);font-size:.96rem}
.maintenance{background:var(--warn);border-bottom:1px solid var(--warn-border)}
.maintenance .wrap{padding:15px 0;text-align:center;font-size:.96rem}
.maintenance strong{color:#5d511d}
nav{background:#fff;border-bottom:1px solid var(--line)}
nav .wrap{display:flex;justify-content:center;gap:24px;padding:12px 0;flex-wrap:wrap}
nav a{text-decoration:none;font-weight:600;color:#485043}
main.wrap{padding:42px 0 60px}
.hero{max-width:790px;margin:0 auto 38px;text-align:center}
h1{
  margin:.1em 0 .35em;font-size:clamp(2rem,5vw,3.15rem);
  line-height:1.12;color:#313b2c;letter-spacing:-.035em
}
h2{margin-top:1.8em;line-height:1.25;color:#394630}
h3{line-height:1.3;color:#425238}
.lead{font-size:1.12rem;color:var(--muted)}
.search-box{display:flex;max-width:660px;margin:26px auto 18px}
.search-box input{
  width:100%;padding:15px 18px;border:1px solid #cfd6c8;
  border-radius:12px;font-size:1rem;background:#fff
}
.filters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 auto 26px}
.filter{
  appearance:none;border:1px solid #ccd4c4;background:#fff;
  padding:8px 12px;border-radius:999px;cursor:pointer;color:#46513e
}
.filter.active{background:var(--green-dark);color:#fff;border-color:var(--green-dark)}
.recipe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.recipe-card{
  display:block;text-decoration:none;color:var(--text);background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:18px;
  min-height:104px;transition:transform .12s ease,border-color .12s ease
}
.recipe-card:hover{transform:translateY(-2px);border-color:#aebba3}
.recipe-card strong{display:block;line-height:1.35}
.recipe-card small{color:var(--muted)}
.recipe{
  max-width:790px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:clamp(24px,5vw,48px)
}
.recipe .intro{color:#555e51;font-size:1.05rem}
.meta{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 30px}
.meta span{background:var(--green-soft);padding:6px 10px;border-radius:8px;font-size:.92rem}
.group{margin:28px 0}
.ingredients{list-style:none;padding:0;margin:0}
.ingredients li{padding:9px 0;border-bottom:1px solid #eceee9}
.ingredients .qty{display:inline-block;min-width:92px;font-weight:700;color:#46593b}
.instructions{counter-reset:step;list-style:none;padding:0}
.instructions li{position:relative;padding:0 0 22px 48px;min-height:40px}
.instructions li:before{
  counter-increment:step;content:counter(step);position:absolute;left:0;top:0;
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:var(--green-dark);color:#fff;font-weight:700
}
.note{background:#f4f6f1;border-left:4px solid var(--green);padding:16px 18px;border-radius:6px}
.back{display:inline-block;margin-bottom:20px;text-decoration:none;font-weight:700}
.legal{
  max-width:850px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:clamp(24px,5vw,48px)
}
footer{background:#fff;border-top:1px solid var(--line);color:var(--muted)}
footer .wrap{padding:25px 0;text-align:center;font-size:.9rem}
footer a{margin:0 8px}
.empty{display:none;text-align:center;padding:25px;color:var(--muted)}
@media(max-width:800px){.recipe-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){
  .recipe-grid{grid-template-columns:1fr}
  .header-inner,.wrap{width:min(100% - 22px,1050px)}
  nav .wrap{gap:14px}
  main.wrap{padding-top:28px}
  .recipe{padding:24px 18px}
  .ingredients .qty{min-width:75px}
}