:root{
header{position:sticky; top:0; z-index:10; background:linear-gradient(180deg, rgba(246,234,223,0.95), rgba(246,234,223,0.85)); border-bottom:1px solid rgba(0,0,0,0.05); backdrop-filter:saturate(150%) blur(6px)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.nav .brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:0.3px}
.brand img{width:46px; height:46px; border-radius:10px; box-shadow:0 2px 0 rgba(0,0,0,0.1)}
.nav a.btn{padding:10px 14px; border-radius:999px; border:2px solid var(--brown); color:var(--brown); font-weight:600}
.nav a.btn:hover{background:var(--brown); color:#fff}


/* Hero */
.hero{padding:64px 0 36px}
.hero-inner{display:grid; grid-template-columns:1.1fr 0.9fr; gap:28px; align-items:center}
.hero-card{background:var(--cream-2); border:1px solid rgba(0,0,0,0.08); border-radius:20px; padding:26px; box-shadow:0 12px 30px rgba(59,42,26,0.08)}
.tag{display:inline-block; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,0.06); color:var(--cocoa); font-size:12px; font-weight:600; letter-spacing:0.2px}
.headline{font-size:42px; line-height:1.05; margin:14px 0 8px}
.sub{font-size:16px; color:#3a342e}
.cta-row{margin-top:18px; display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-block; padding:12px 16px; border-radius:14px; font-weight:700; border:2px solid var(--brown); color:var(--brown); background:#fff}
.btn.primary{background:var(--brown); color:#fff}
.btn.ghost{background:transparent}


/* Video */
.video-wrap{position:relative; width:100%; padding-top:56.25%; border-radius:16px; overflow:hidden; box-shadow:0 10px 28px rgba(0,0,0,0.12); border:1px solid rgba(0,0,0,0.08)}
.video-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}


/* Featured Recipe */
.section{padding:44px 0}
.section h2{font-size:28px; margin:0 0 10px}
.featured{display:grid; grid-template-columns:1.2fr 0.8fr; gap:18px}
.featured-card{background:#fff; border:1px solid rgba(0,0,0,0.1); border-radius:18px; padding:18px; box-shadow:0 10px 24px rgba(0,0,0,0.12)}
.featured-card h3{font-size:22px; margin:0 0 8px}
.teaser{font-size:14px; color:#4a3f36; margin:0 0 12px}


/* Gallery */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:16px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,0.08)}
.thumb{aspect-ratio:16/9; background:linear-gradient(135deg, #ffe9cf, #f9d4b1)}
.card-body{padding:14px}
.card h3{font-size:18px; margin:0 0 4px}
.meta{font-size:12px; color:#5b4c41}


/* About */
.about{display:grid; grid-template-columns:0.9fr 1.1fr; gap:24px; align-items:center}
.about .panel{background:var(--cream-2); border:1px solid rgba(0,0,0,0.08); border-radius:18px; padding:20px}
.about p{margin:0}


/* Footer */
footer{border-top:1px solid rgba(0,0,0,0.08); padding:24px 0; color:#5b4c41; font-size:14px}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.motto{opacity:0.85}


/* Responsive */
@media (max-width: 980px){
.hero-inner, .about{grid-template-columns:1fr}
.grid{grid-template-columns:1fr 1fr}
.headline{font-size:34px}
}
@media (max-width: 620px){
.grid{grid-template-columns:1fr}
}