: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; }

.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{
  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); }

/* ============ PAGE HERO ============ */
.page-hero{ padding:56px 0 8px; }
.crumbs{ font-size:14.5px; color:var(--soft); margin-bottom:16px; }
.crumbs a:hover{ color:var(--ink); }
.crumbs span{ margin:0 8px; opacity:.5; }
.page-hero h1{ font-size:clamp(36px,5.4vw,56px); line-height:1.02; }
.page-hero p{ margin-top:14px; color:var(--soft); max-width:52ch; font-size:clamp(16px,2vw,19px); }

/* ============ FILTERS ============ */
.filters{ padding:34px 0 8px; position:sticky; top:63px; z-index:40; background:linear-gradient(var(--bg) 78%, transparent); }
.filter-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.filter-row + .filter-row{ margin-top:12px; }
.filter-label{ font-family:'Fraunces',serif; font-style:italic; font-size:14px; color:var(--soft); min-width:64px; }
.chip{
  border:1px solid var(--line); background:rgba(255,255,255,0.55);
  padding:8px 16px; border-radius:100px; font-size:14.5px; font-weight:600; color:var(--ink);
  cursor:pointer; transition:all .16s ease; font-family:inherit;
}
.chip:hover{ background:#fff; }
.chip.active{ background:var(--green-d); border-color:var(--green-d); color:#fff; }
.chips{ display:flex; gap:10px; flex-wrap:wrap; }

.result-bar{ display:flex; justify-content:space-between; align-items:baseline; margin:26px 0 24px; gap:16px; flex-wrap:wrap; }
.result-bar .count{ color:var(--soft); font-size:15px; }
.result-bar .count b{ color:var(--ink); font-weight:600; }
.sort{ font-size:14.5px; color:var(--soft); }
.sort select{ font-family:inherit; font-size:14.5px; font-weight:600; color:var(--ink); border:1px solid var(--line); background:#fff; border-radius:100px; padding:7px 14px; cursor:pointer; }

/* ============ RECIPE GRID ============ */
.grid-section{ padding:0 0 90px; }
.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 .thumb .art img{ width:100%; height:100%; object-fit:cover; }
.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; }

.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); }

/* ============ 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); }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible, select: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; } }

.result-bar .reset{ font-family:inherit; font-size:14.5px; font-weight:600; color:var(--green-d); background:none; border:none; cursor:pointer; padding:0; }
.result-bar .reset:hover{ color:var(--ink); text-decoration:underline; }
.empty{ text-align:center; color:var(--soft); padding:60px 0 40px; font-size:17px; }
.empty button{ font:inherit; font-weight:600; color:var(--green-d); background:none; border:none; cursor:pointer; text-decoration:underline; }
.recipe[hidden]{ display:none; }