:root{
  --cream:      #FBF6EC;
  --cream-2:    #F4ECDD;
  --bg:         #E6F2DC;
  --green:      #7C9A6E;
  --green-d:    #55704A;
  --blue:       #6D93AC;
  --blue-d:     #4A6D82;
  --yellow:     #E8B94A;
  --orange:     #D9713C;
  --orange-d:   #B9552A;
  --ink:        #3A342C;
  --soft:       #7B7264;
  --line:       #E7DDCB;

  --r-sm:12px; --r-md:18px; --r-lg:28px; --r-xl:36px;
  --mw:1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'DM Sans', sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{ font-family:'Fraunces', serif; font-weight:500; margin:0; letter-spacing:-0.015em; }

.wrap{ max-width:var(--mw); margin:0 auto; padding:0 40px; }
@media (max-width:640px){ .wrap{ padding:0 22px; } body{ font-size:16px; } }

/* ============ HEADER / NAV ============ */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(230,242,220,0.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(197,217,182,0.7);
}
.nav{
  max-width:var(--mw); margin:0 auto;
  padding:15px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
@media (max-width:640px){ .nav{ padding:13px 22px; } }

.logo{ display:flex; align-items:center; gap:11px; font-family:'Fraunces',serif; font-size:21px; font-weight:500; color:var(--ink); flex-shrink:0; }
.logo .mark{ width:30px; height:30px; }

/* main nav (single top nav) */
.mainnav{ display:flex; align-items:center; gap:2px; }
@media (max-width:760px){
  .mainnav{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .mainnav::-webkit-scrollbar{ display:none; }
}
.cat{ position:relative; }
.cat > .cat-link{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:100px;
  font-size:15.5px; font-weight:600; color:var(--ink);
  cursor:pointer; white-space:nowrap;
  transition:background .18s ease, color .18s ease;
}
.cat > .cat-link:hover{ background:var(--cream-2); }
.cat .chev{ width:11px; height:11px; opacity:.5; transition:transform .2s ease; }
.cat:hover .chev, .cat:focus-within .chev{ transform:rotate(180deg); }
@media (max-width:760px){ .cat > .cat-link{ padding:9px 12px; font-size:14.5px; } }

/* dropdown (shared) */
.dropdown{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translate(-50%,-6px);
  min-width:214px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:0 18px 40px -12px rgba(58,52,44,0.28);
  padding:10px; opacity:0; visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.cat:hover .dropdown, .cat:focus-within .dropdown{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.dropdown .head{ font-family:'Fraunces',serif; font-style:italic; font-size:13px; color:var(--soft); padding:6px 12px 8px; }
.dropdown a{ display:block; padding:9px 12px; border-radius:10px; font-size:15px; font-weight:500; color:var(--ink); }
.dropdown a:hover{ background:var(--cream-2); }
.dropdown a.all{ margin-top:4px; padding-top:12px; border-top:1px solid var(--line); color:var(--green-d); font-weight:600; border-radius:0 0 8px 8px; }
.dropdown a.all:hover{ background:var(--cream-2); }

/* ============ HERO ============ */
.hero{ padding:34px 0 20px; }
.hero-panel{
  position:relative;
  border-radius:var(--r-xl);
  padding:84px 64px 92px;
  overflow:hidden;
  background:
    radial-gradient(58% 82% at 12% 18%, rgba(232,185,74,0.42), transparent 62%),
    radial-gradient(52% 68% at 90% 12%, rgba(217,113,60,0.34), transparent 58%),
    radial-gradient(64% 78% at 86% 92%, rgba(109,147,172,0.34), transparent 60%),
    radial-gradient(60% 74% at 14% 96%, rgba(124,154,110,0.36), transparent 60%),
    var(--cream-2);
}
@media (max-width:640px){ .hero-panel{ padding:56px 30px 60px; border-radius:var(--r-lg); } }

.hero .kicker{
  display:inline-block; font-family:'Fraunces',serif; font-style:italic;
  font-size:18px; color:var(--orange-d); margin-bottom:14px;
}
.hero h1{ font-size:clamp(40px, 6.2vw, 68px); line-height:1.0; max-width:14ch; }
.hero .lead{ margin-top:22px; font-size:clamp(17px,2.2vw,20px); color:var(--ink); opacity:.82; max-width:46ch; }

/* ============ SECTION HEAD ============ */
.section{ padding:78px 0; }
.section.tight{ padding-top:56px; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:40px; }
.section-head h2{ font-size:clamp(28px,4vw,38px); line-height:1.05; }
.section-head .sub{ color:var(--soft); margin-top:10px; max-width:44ch; }
.section-head .more{ font-weight:600; font-size:15px; color:var(--blue-d); white-space:nowrap; padding-bottom:2px; border-bottom:1.5px solid var(--blue); }
.section-head .more:hover{ color:var(--ink); }
@media (max-width:600px){ .section-head{ flex-direction:column; align-items:flex-start; } }

/* ============ RECIPES (no card box) ============ */
.recipe-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px 32px; }
@media (max-width:860px){ .recipe-grid{ grid-template-columns:repeat(2,1fr); gap:36px 24px; } }
@media (max-width:560px){ .recipe-grid{ grid-template-columns:1fr; gap:32px; } }

.recipe{ display:block; }
.recipe .thumb{
  position:relative; aspect-ratio:5/4; border-radius:var(--r-lg);
  overflow:hidden; margin-bottom:16px;
}
.recipe .thumb::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 25% 15%, rgba(255,255,255,0.28), transparent 55%),
             linear-gradient(200deg, transparent 55%, rgba(0,0,0,0.12));
}
.recipe .thumb .art{ position:absolute; inset:0; transition:transform .4s cubic-bezier(.2,.7,.3,1); }
.recipe:hover .thumb .art{ transform:scale(1.05); }
.recipe .tag{
  position:absolute; top:14px; left:14px; z-index:2;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(4px);
  padding:5px 12px; border-radius:100px; font-size:12.5px; font-weight:700;
}
.recipe h3{ font-size:21px; line-height:1.2; }
.recipe .meta{ margin-top:5px; color:var(--soft); font-size:14.5px; font-weight:500; }

/* gradients per category */
.g-yellow{ background:linear-gradient(150deg,#F5D889,var(--yellow)); }
.g-orange{ background:linear-gradient(150deg,#EDA679,var(--orange)); }
.g-orange-d{ background:linear-gradient(150deg,#D98A5A,var(--orange-d)); }
.g-green{ background:linear-gradient(150deg,#A9C69A,var(--green)); }
.g-green-d{ background:linear-gradient(150deg,#8FB07E,var(--green-d)); }
.g-blue{ background:linear-gradient(150deg,#9CBCCE,var(--blue)); }
.g-blue-d{ background:linear-gradient(150deg,#7FA3B8,var(--blue-d)); }
.g-teal{ background:linear-gradient(150deg,#8FBBA9,#5E8F86); }

.tag-bakken{ color:var(--orange-d); }
.tag-koken{ color:var(--green-d); }
.tag-soep{ color:var(--blue-d); }

/* ============ OVER LIEK ============ */
.about-panel{
  background:#DCEBCF; border-radius:var(--r-xl);
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:52px; align-items:center;
  padding:56px;
}
@media (max-width:780px){ .about-panel{ grid-template-columns:1fr; padding:36px; gap:32px; } }
.about-portrait{
  aspect-ratio:1/1; max-width:300px; border-radius:var(--r-lg);
  background:
    radial-gradient(80% 80% at 30% 20%, rgba(232,185,74,0.5), transparent 60%),
    linear-gradient(150deg, var(--blue) 0%, var(--green-d) 100%);
  display:flex; align-items:center; justify-content:center;
}
.about-portrait svg{ width:52%; height:52%; }
.about h2{ font-size:clamp(26px,3.6vw,34px); margin-bottom:16px; }
.about p{ color:var(--soft); max-width:52ch; }
.about p + p{ margin-top:12px; }
.about .sig{ margin-top:22px; font-family:'Fraunces',serif; font-style:italic; font-size:22px; color:var(--orange-d); }

/* ============ FOOTER ============ */
footer{ border-top:1px solid var(--line); margin-top:20px; }
.foot{ padding:44px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; }
.foot .logo{ font-size:19px; }
.foot-links{ display:flex; gap:26px; }
.foot-links a{ color:var(--soft); font-size:14.5px; font-weight:600; }
.foot-links a:hover{ color:var(--ink); }
.foot .fine{ color:var(--soft); font-size:13.5px; width:100%; padding-top:10px; border-top:1px solid var(--line); }

/* focus + motion */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline:2.5px solid var(--blue-d); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } html{ scroll-behavior:auto; } }

/* hero load motion */
@keyframes riseIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
.hero .kicker{ animation:riseIn .6s ease both; }
.hero h1{ animation:riseIn .6s ease .06s both; }
.hero .lead{ animation:riseIn .6s ease .12s both; }