
:root{
  --ink:#1f2a24; --muted:#66736b; --cream:#fbf8f1; --paper:#fffdf8;
  --green:#315c46; --sage:#dfe9df; --orange:#d97745; --line:#e6e1d7;
  --shadow:0 12px 35px rgba(35,45,38,.08); --radius:22px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.7}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.container{width:min(1120px,92%);margin:auto}
header{position:sticky;top:0;z-index:20;background:rgba(251,248,241,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-family:Georgia,serif;font-size:29px;font-weight:700;color:var(--green)}
.logo span{color:var(--orange)}
nav{display:flex;gap:22px;align-items:center;font-size:14px;font-weight:650}
nav a:hover{color:var(--orange)}
.menu{display:none;border:0;background:none;font-size:26px}
.hero{padding:76px 0 54px;background:linear-gradient(135deg,#eef3e8 0%,#fbf8f1 55%,#f9e9dd 100%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center}
.kicker{text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--orange);font-weight:800}
h1,h2,h3{font-family:Georgia,serif;line-height:1.15}
h1{font-size:clamp(44px,6vw,72px);margin:14px 0 18px;letter-spacing:-2px}
h2{font-size:38px;margin:0 0 12px} h3{font-size:24px;margin:10px 0}
.hero p{font-size:18px;color:var(--muted);max-width:610px}
.btn{display:inline-block;background:var(--green);color:#fff;padding:13px 20px;border-radius:999px;font-weight:750;margin-top:15px}
.btn.alt{background:#fff;color:var(--green);border:1px solid var(--line);margin-left:8px}
.hero-art{height:430px;border-radius:36px;background:
 radial-gradient(circle at 30% 25%,#fff7df 0 13%,transparent 14%),
 radial-gradient(circle at 72% 30%,#e6b66d 0 11%,transparent 12%),
 radial-gradient(circle at 58% 65%,#d86f45 0 17%,transparent 18%),
 radial-gradient(circle at 25% 70%,#719273 0 15%,transparent 16%),
 linear-gradient(145deg,#3f654f,#1f392d);box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero-art:after{content:"YUMY CHEF";position:absolute;inset:auto 24px 20px;color:#fff;font-family:Georgia,serif;font-size:34px;letter-spacing:4px;opacity:.9}
section{padding:70px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}
.section-head p{color:var(--muted);margin:0;max-width:520px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.card-image{height:190px;background:linear-gradient(135deg,#e8dfca,#c5d8c4);display:flex;align-items:center;justify-content:center;font-size:60px}
.card-body{padding:22px}.tag{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--orange);font-weight:800}
.card p{color:var(--muted);font-size:14px}.read{font-weight:750;color:var(--green)}
.categories{display:flex;flex-wrap:wrap;gap:12px}
.cat{background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 18px}
.feature{background:var(--green);color:#fff;border-radius:30px;padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.feature p{color:#dce7df}.feature .btn{background:#fff;color:var(--green)}
.about{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}
.about-box{background:var(--sage);padding:40px;border-radius:30px}
footer{background:#20362b;color:#dce7df;padding:48px 0 25px;margin-top:30px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:35px}
footer h3{color:#fff;font-size:20px}footer a{display:block;margin:7px 0;color:#dce7df;font-size:14px}
.small{font-size:13px;color:#9fb2a6;border-top:1px solid #405549;margin-top:35px;padding-top:18px}
.article{max-width:800px;margin:70px auto}.article h1{font-size:52px}.article .lead{font-size:20px;color:var(--muted)}
.article h2{font-size:31px;margin-top:42px}.recipe-box{background:#fff;border:1px solid var(--line);border-radius:22px;padding:25px;margin:30px 0}
.meta{display:flex;gap:15px;flex-wrap:wrap;color:var(--muted);font-size:14px}
ul,ol{padding-left:22px}
@media(max-width:800px){
 nav{display:none}.menu{display:block}.hero-grid,.about,.feature{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.hero{padding-top:45px}.hero-art{height:300px}
 .footer-grid{grid-template-columns:1fr}.section-head{display:block}.section-head p{margin-top:10px}
}
