/* Smokeander — ontwerp v17. Gegenereerd uit het goedgekeurde ontwerp.
   Pas hier niets met de hand aan als je later een nieuwe versie krijgt. */
:root{
 --bg:#1A1715; --bg2:#211D1A; --card:#262119; --card-hi:#2E2822;
 --joe:#D42B22; --joe-hot:#F5442F; --joe-lo:#9C1A14;
 --white:#fff; --text:#EFE8E0; --soft:#A79C90; --dim:#7B7166;
 --line:rgba(255,255,255,.11); --line-hi:rgba(255,255,255,.2);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Roboto Slab',serif;font-weight:800;line-height:1.1;color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
.wrap{max-width:1220px;margin:0 auto;padding:0 28px}
.frame{position:relative;overflow:hidden;background:#171310}
.frame img{transition:transform .6s cubic-bezier(.2,.7,.25,1)}
.frame:hover img{transform:scale(1.045)}
.kicker{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--joe-hot);margin-bottom:12px;display:flex;align-items:center;gap:9px}
.kicker::before{content:"";width:20px;height:2px;background:var(--joe)}

/* HEADER */
header{position:sticky;top:0;z-index:80;background:rgba(26,23,21,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;max-width:1220px;margin:0 auto;gap:18px}
.logo{display:flex;align-items:center;gap:9px;font-family:'Roboto Slab',serif;font-weight:900;font-size:18px;color:#fff;white-space:nowrap}
.logo .dot{width:11px;height:11px;border-radius:50%;background:var(--joe)}
.navlinks{display:flex;gap:26px;font-size:14px;font-weight:600;color:var(--text)}
.navlinks a{position:relative;padding:4px 0}
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--joe-hot);transition:right .26s}
.navlinks a:hover{color:#fff}.navlinks a:hover::after{right:0}
.navcta{font-size:13px;font-weight:700;background:var(--joe);color:#fff;padding:10px 17px;border-radius:4px;white-space:nowrap;transition:.2s}
.navcta:hover{background:var(--joe-hot)}

/* HERO — planner leads */
.hero{position:relative;padding:74px 0 66px;overflow:hidden}
.hero .frame{position:absolute;inset:0}
.hero .frame::after{content:"";position:absolute;inset:0;
 background:linear-gradient(268deg,rgba(20,17,15,.97) 0%,rgba(20,17,15,.9) 40%,rgba(20,17,15,.42) 72%,rgba(20,17,15,.12) 100%)}
.hero-in{position:relative;z-index:3;display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(36px,4.7vw,56px);margin-bottom:16px;letter-spacing:-.02em}
.hero h1 .fl{color:var(--joe-hot)}
.hero .lead{font-size:16.5px;color:var(--text);margin-bottom:26px;max-width:490px}
.cta-row{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:22px}
.btn-lg{display:inline-flex;align-items:center;gap:9px;background:var(--joe);color:#fff;font-family:'Roboto Slab',serif;font-weight:700;font-size:15px;padding:15px 24px;border-radius:4px;transition:.2s}
.btn-lg:hover{background:var(--joe-hot)}
.btn-ghost{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);border:1px solid var(--line-hi);color:#fff;font-weight:600;font-size:14.5px;padding:15px 22px;border-radius:4px;transition:.2s}
.btn-ghost:hover{border-color:var(--joe);background:rgba(212,43,34,.14)}
.searchbar{display:flex;max-width:470px;border-radius:4px;overflow:hidden;border:1px solid var(--line-hi)}
.searchbar input{flex:1;border:none;background:rgba(255,255,255,.94);padding:13px 15px;font-family:'Inter',sans-serif;font-size:14px;color:#1A1715}
.searchbar input:focus{outline:2px solid var(--joe-hot);outline-offset:-2px}
.searchbar button{background:rgba(255,255,255,.12);color:#fff;border:none;padding:0 18px;font-weight:600;font-size:13.5px;cursor:pointer;transition:.2s}
.searchbar button:hover{background:var(--joe)}
.hint{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--dim);margin-top:9px;letter-spacing:.04em}

/* planner preview card */
.pcard{background:rgba(30,26,23,.9);border:1px solid var(--line-hi);border-radius:7px;padding:24px;backdrop-filter:blur(14px);box-shadow:0 30px 70px -26px rgba(0,0,0,.85)}
.pcard .top{display:flex;justify-content:space-between;align-items:center;padding-bottom:15px;border-bottom:1px solid var(--line);margin-bottom:5px}
.pcard .top b{font-family:'Roboto Slab',serif;font-size:15px;color:#fff}
.tag{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;background:var(--joe);color:#fff;padding:4px 9px;border-radius:20px}
.prow{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.prow .k{color:var(--soft)}
.prow .v{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#fff;font-weight:700}
.plan{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line-hi)}
.plan .lbl{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;color:var(--joe-hot);margin-bottom:12px}
.step{display:flex;gap:12px;padding:8px 0;font-size:13.5px}
.step .d{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--joe-hot);min-width:52px;padding-top:2px;font-weight:700}
.step .t{color:var(--text)}

/* SECTIONS */
.sec{padding:62px 0}
.sec.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px;flex-wrap:wrap;gap:14px}
.shead h2{font-size:clamp(25px,3vw,34px);letter-spacing:-.015em}
.shead p{color:var(--soft);font-size:14.5px;margin-top:9px;max-width:480px}
.btn-sm{display:inline-flex;align-items:center;gap:8px;background:var(--joe);color:#fff;font-weight:700;font-size:13px;padding:10px 17px;border-radius:4px;white-space:nowrap;transition:.2s}
.btn-sm:hover{background:var(--joe-hot)}
.btn-out{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-hi);color:#fff;font-weight:600;font-size:13px;padding:10px 17px;border-radius:4px;white-space:nowrap;transition:.2s}
.btn-out:hover{border-color:var(--joe);background:rgba(212,43,34,.12)}

/* RECIPES */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rcard{background:var(--card);border:1px solid var(--line);border-radius:5px;overflow:hidden;display:flex;flex-direction:column;transition:.24s}
.rcard:hover{background:var(--card-hi);border-color:var(--joe);transform:translateY(-3px)}
.rcard .frame{aspect-ratio:3/2}
.pill{position:absolute;top:11px;left:11px;z-index:2;background:var(--joe);color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:5px 10px;border-radius:3px}
.rbody{padding:17px 18px 18px;display:flex;flex-direction:column;flex:1}
.rbody h3{font-size:18px;margin-bottom:8px}
.rbody p{color:var(--soft);font-size:14px;margin-bottom:14px;flex:1}
.times{display:flex;gap:16px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--dim);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px;letter-spacing:.05em;text-transform:uppercase}
.times b{color:#fff;font-weight:700}

/* TIPS */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tcard{position:relative;border-radius:5px;overflow:hidden;border:1px solid var(--line);transition:.24s}
.tcard .frame{aspect-ratio:4/5}
.tcard .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,13,11,.94) 20%,rgba(16,13,11,.04) 74%)}
.tover{position:absolute;left:14px;right:14px;bottom:14px;z-index:2}
.views{display:inline-block;background:rgba(0,0,0,.5);border:1px solid var(--line-hi);font-family:'JetBrains Mono',monospace;font-size:10px;color:#fff;padding:3px 9px;border-radius:20px;margin-bottom:9px}
.tover h3{font-size:15.5px;line-height:1.25}
.tcard:hover{border-color:var(--joe);transform:translateY(-3px)}

/* FEATURED VIDEO */
.vgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center}
.vplayer{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--line-hi);aspect-ratio:16/9}
.vplayer::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,13,11,.55),rgba(16,13,11,.12))}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:66px;height:66px;border-radius:50%;background:var(--joe);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 40px -8px rgba(212,43,34,.7);transition:.22s}
.vplayer:hover .play{background:var(--joe-hot);transform:translate(-50%,-50%) scale(1.07)}
.play span{border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.vmeta{position:absolute;left:14px;bottom:14px;z-index:3;display:flex;gap:8px}
.vmeta span{background:rgba(0,0,0,.62);border:1px solid var(--line-hi);font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#fff;padding:4px 10px;border-radius:20px}
.vtext h2{font-size:clamp(23px,2.7vw,31px);margin-bottom:14px;letter-spacing:-.015em}
.vtext p{color:var(--soft);font-size:15px;margin-bottom:14px}
.vsteps{list-style:none;margin:16px 0 20px}
.vsteps li{display:flex;gap:11px;padding:7px 0;font-size:14px;color:var(--text)}
.vsteps li b{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--joe-hot);min-width:20px}

/* DILEMMA */
.dilgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.dil{background:var(--card);border:1px solid var(--line);border-radius:5px;padding:23px;position:relative;overflow:hidden;transition:.24s}
.dil::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--joe)}
.dil:hover{border-color:var(--joe)}
.dil .num{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;color:var(--joe-hot);letter-spacing:.11em;margin-bottom:12px}
.dil p{font-family:'Roboto Slab',serif;font-weight:700;font-size:17px;color:#fff;line-height:1.32;margin-bottom:17px}
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--text)}
.bar .lbl{min-width:96px}
.bar .track{flex:1;height:5px;background:rgba(255,255,255,.09);border-radius:20px;overflow:hidden}
.bar .fill{height:100%;background:var(--joe);border-radius:20px}
.bar .pc{font-family:'JetBrains Mono',monospace;font-size:11px;color:#fff;min-width:32px;text-align:right}

/* CATEGORIES */
.catgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cat{position:relative;border-radius:5px;overflow:hidden;border:1px solid var(--line);transition:.24s}
.cat .frame{aspect-ratio:3/4}
.cat .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,13,11,.95) 15%,rgba(16,13,11,.05) 68%)}
.catbody{position:absolute;left:12px;right:12px;bottom:12px;z-index:2}
.catbody h3{font-size:15.5px;margin-bottom:2px}
.catbody .n{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--soft)}
.cat:hover{border-color:var(--joe);transform:translateY(-3px)}
.cat:hover .catbody .n{color:var(--joe-hot)}

/* REELS ROW */
.reels{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.reel{position:relative;border-radius:5px;overflow:hidden;border:1px solid var(--line);transition:.24s}
.reel .frame{aspect-ratio:9/16}
.reel .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,13,11,.9) 12%,rgba(16,13,11,.02) 62%)}
.reel .pl{position:absolute;top:10px;right:10px;z-index:3;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid var(--line-hi);display:flex;align-items:center;justify-content:center}
.reel .pl span{border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;margin-left:2px}
.rover{position:absolute;left:11px;right:11px;bottom:11px;z-index:2}
.rover .v{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--joe-hot);display:block;margin-bottom:4px}
.rover h4{font-size:13px;line-height:1.25;font-family:'Inter',sans-serif;font-weight:700}
.reel:hover{border-color:var(--joe);transform:translateY(-3px)}

/* FAQ */
.fgrid2{display:grid;grid-template-columns:265px 1fr;gap:46px}
.fitem{border-bottom:1px solid var(--line);padding:19px 0}
.fitem h3{font-size:16.5px;margin-bottom:7px}
.fitem p{color:var(--soft);font-size:14.5px;max-width:660px}

footer{padding:42px 0 34px;border-top:1px solid var(--line)}
.ftop{display:flex;justify-content:space-between;align-items:center;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:16px}
.flinks{display:flex;gap:21px;font-size:13px;color:var(--soft);flex-wrap:wrap;font-weight:500}
.flinks a:hover{color:var(--joe-hot)}
.fbot{display:flex;justify-content:space-between;color:var(--dim);font-size:12px;flex-wrap:wrap;gap:8px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}.frame:hover img{transform:none}}
@media (max-width:1040px){.catgrid{grid-template-columns:repeat(3,1fr)}.tgrid{grid-template-columns:repeat(2,1fr)}.reels{grid-template-columns:repeat(3,1fr)}.vgrid{grid-template-columns:1fr;gap:28px}}
@media (max-width:860px){
 .navlinks{display:none}
 .hero{padding:52px 0 46px}
 .hero .frame::after{background:linear-gradient(0deg,rgba(20,17,15,.97) 34%,rgba(20,17,15,.5) 100%)}
 .hero-in{grid-template-columns:1fr;gap:32px}
 .rgrid,.dilgrid{grid-template-columns:1fr}
 .catgrid,.reels{grid-template-columns:repeat(2,1fr)}
 .fgrid2{grid-template-columns:1fr;gap:20px}
 .ftop,.fbot{flex-direction:column;align-items:flex-start}
}

/* ===== HERO v11: readable text, one CTA, interactive planner ===== */
.hero{position:relative;padding:70px 0 64px;overflow:hidden}
.hero .frame{position:absolute;inset:0}
.hero .frame::after{content:"";position:absolute;inset:0;
 background:linear-gradient(268deg,rgba(14,12,10,.985) 0%,rgba(14,12,10,.965) 42%,rgba(14,12,10,.72) 68%,rgba(14,12,10,.3) 100%)}
.hero-in{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1.02fr;gap:52px;align-items:center}
.hero h1{font-size:clamp(36px,4.5vw,54px);margin-bottom:18px;letter-spacing:-.02em;
 text-shadow:0 2px 20px rgba(0,0,0,.6)}
.hero h1 .fl{color:#FF6A54}
.hero .lead{font-size:17px;line-height:1.62;color:#F3ECE4;margin-bottom:24px;max-width:470px;
 text-shadow:0 1px 12px rgba(0,0,0,.55)}
.hero .lead b{color:#fff;font-weight:600}
.hero-sub{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.textlink{font-size:14px;font-weight:600;color:#fff;display:inline-flex;align-items:center;gap:7px}
.textlink::after{content:"→";color:var(--joe-hot);transition:transform .2s}
.textlink:hover::after{transform:translateX(4px)}
.hero-badges{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.hero-badges span{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
 background:rgba(255,255,255,.09);border:1px solid var(--line-hi);color:#EDE5DB;padding:5px 11px;border-radius:20px}

/* ---- interactive planner card ---- */
.pcard{background:rgba(28,24,21,.93);border:1px solid var(--line-hi);border-radius:8px;
 padding:0;backdrop-filter:blur(16px);box-shadow:0 36px 80px -28px rgba(0,0,0,.9);overflow:hidden}
.pc-head{display:flex;justify-content:space-between;align-items:center;padding:17px 22px;
 border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.pc-head b{font-family:'Roboto Slab',serif;font-size:15.5px;color:#fff}
.pc-head .tag{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;
 background:var(--joe);color:#fff;padding:4px 10px;border-radius:20px}
.pc-body{padding:18px 22px 4px}
.field{margin-bottom:15px}
.field .lab{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;
 text-transform:uppercase;color:var(--soft);margin-bottom:8px}
.opts{display:flex;gap:6px;flex-wrap:wrap}
.opt{font-size:12.5px;font-weight:600;color:#DCD3C9;background:rgba(255,255,255,.06);
 border:1px solid var(--line-hi);padding:7px 12px;border-radius:4px;cursor:pointer;
 transition:.16s;font-family:'Inter',sans-serif;line-height:1.2}
.opt:hover{border-color:rgba(245,68,47,.6);color:#fff}
.opt[aria-pressed="true"]{background:var(--joe);border-color:var(--joe);color:#fff}
.opt:focus-visible{outline:2px solid var(--joe-hot);outline-offset:2px}

.pc-out{margin:6px 22px 0;padding:16px 0 0;border-top:1px dashed var(--line-hi)}
.pc-out .lbl{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;
 color:var(--joe-hot);margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.pc-dish{font-family:'Roboto Slab',serif;font-weight:700;font-size:17px;color:#fff;margin-bottom:13px}
.steps{display:flex;flex-direction:column}
.step{display:flex;gap:12px;padding:7px 0;font-size:13.5px;align-items:baseline}
.step .d{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;color:var(--joe-hot);
 min-width:64px;flex-shrink:0}
.step .t{color:#E8E0D7}
.pc-foot{padding:16px 22px 20px}
.pc-cta{display:flex;width:100%;align-items:center;justify-content:center;gap:9px;background:var(--joe);
 color:#fff;font-family:'Roboto Slab',serif;font-weight:700;font-size:15px;padding:15px 20px;
 border:none;border-radius:5px;cursor:pointer;transition:.2s;font-feature-settings:normal}
.pc-cta:hover{background:var(--joe-hot);box-shadow:0 12px 32px -10px rgba(245,68,47,.65)}
.pc-note{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);text-align:center;margin-top:10px;letter-spacing:.04em}

@media (max-width:860px){
 .hero-in{grid-template-columns:1fr;gap:30px}
 .hero .frame::after{background:linear-gradient(0deg,rgba(14,12,10,.985) 38%,rgba(14,12,10,.62) 100%)}
 .pc-body{padding:16px 17px 4px}.pc-head{padding:15px 17px}.pc-out{margin:6px 17px 0}.pc-foot{padding:14px 17px 18px}
 .step .d{min-width:58px}
}


/* ===== v12: list-first funnel ===== */
/* repeated signup block */
.capture{background:linear-gradient(180deg,rgba(212,43,34,.10),rgba(212,43,34,.03));
 border:1px solid rgba(212,43,34,.34);border-radius:7px;padding:26px 28px;
 display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.capture h3{font-size:20px;margin-bottom:6px;letter-spacing:-.015em}
.capture p{color:var(--soft);font-size:14px;max-width:520px}
.capture form{display:flex;gap:9px;min-width:360px}
.capture input{flex:1;background:rgba(255,255,255,.09);border:1px solid var(--line-hi);
 color:#fff;padding:14px 15px;border-radius:4px;font-family:'Inter',sans-serif;font-size:14px}
.capture input::placeholder{color:var(--dim)}
.capture input:focus{outline:2px solid var(--joe-hot);outline-offset:1px}
.capture button{background:var(--joe);color:#fff;border:none;padding:0 22px;
 font-family:'Roboto Slab',serif;font-weight:700;font-size:14px;border-radius:4px;cursor:pointer;
 white-space:nowrap;transition:.2s}
.capture button:hover{background:var(--joe-hot)}
.capture .mini{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);margin-top:9px;letter-spacing:.05em}
.capture.slim{padding:20px 24px}
.capture.slim h3{font-size:17px}

/* honesty strip */
.honest{display:flex;gap:26px;flex-wrap:wrap;align-items:center;justify-content:center;
 padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.honest span{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--soft);
 display:inline-flex;align-items:center;gap:8px}
.honest span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--joe)}

/* deep review with timeline */
.review{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
.review .frame{aspect-ratio:4/3;border-radius:6px;border:1px solid var(--line)}
.rv-stars{color:var(--joe-hot);font-size:15px;letter-spacing:3px;margin-bottom:10px}
.review h3{font-size:clamp(21px,2.4vw,27px);margin-bottom:12px;letter-spacing:-.015em}
.review p{color:var(--soft);font-size:14.5px;margin-bottom:16px}
.tl{border-left:2px solid var(--line);padding-left:18px;margin:18px 0 20px}
.tl-item{position:relative;padding:9px 0}
.tl-item::before{content:"";position:absolute;left:-24px;top:15px;width:9px;height:9px;
 border-radius:50%;background:var(--joe);border:2px solid var(--bg)}
.tl-item b{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--joe-hot);
 letter-spacing:.08em;display:block;margin-bottom:2px}
.tl-item span{font-size:14px;color:var(--text)}
.rv-disc{font-size:12.5px;color:var(--dim);font-style:italic;padding:12px 14px;
 background:rgba(255,255,255,.04);border-left:2px solid var(--line-hi);border-radius:0 4px 4px 0}

/* affiliate note inside content */
.aff{display:flex;gap:13px;align-items:flex-start;background:rgba(255,255,255,.045);
 border:1px solid var(--line);border-radius:5px;padding:14px 16px;margin:16px 0}
.aff .ic{font-size:17px;line-height:1.3}
.aff .tx{font-size:13.5px;color:var(--text)}
.aff .tx b{color:#fff}
.aff a{color:var(--joe-hot);font-weight:600;border-bottom:1px solid rgba(245,68,47,.45)}

@media (max-width:900px){
 .capture{grid-template-columns:1fr;gap:18px}
 .capture form{min-width:0;flex-direction:column}
 .review{grid-template-columns:1fr;gap:26px}
}


/* logo mark: small red kamado */
.logo .kamado{width:17px;height:19px;flex:0 0 auto;fill:var(--joe);display:block;
 transition:fill .2s ease,transform .2s ease}
.logo:hover .kamado{fill:var(--joe-hot);transform:translateY(-1px)}


/* ===== v14: font stacks =====
   Webfonts can fail on mobile: slow connection, tracker blockers, or a locally
   opened file. These fallbacks sit close in width so nothing jumps around.
   On the live site: self-host the fonts on your own domain — faster and no
   visitor IPs going to Google. */
:root{
 --font-display:'Roboto Slab','Noto Serif',Georgia,'Times New Roman',serif;
 --font-body:'Inter','Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
 --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
body,.opt,.pform input,.searchbar input,.capture input{font-family:var(--font-body)}
h1,h2,h3,h4,.logo,.pc-head b,.pc-dish,.dil p,.btn-lg,.pc-cta,.pform button,.capture button,.searchbar button{font-family:var(--font-display)}
.kicker,.lab,.step .d,.views,.times,.prow .v,.mini,.pc-note,.tag,.hint,.honest span,.tl-item b,.bar .pc,.dil .num,.catbody .n{font-family:var(--font-mono)}

/* Volgorde van secties wordt in PHP bepaald (Customizer), niet in CSS. */

}


.opt .sub{display:block;font-family:var(--font-mono);font-size:9px;opacity:.7;margin-top:1px;font-weight:500}

/* ===== v15: the cycling day in the headline =====
   The word swaps every four seconds. min-width is measured at runtime from the
   longest day name, so 'BBQ'en?' stays put instead of jittering left and right. */
.dayswap{display:inline-block;position:relative;text-align:left;vertical-align:baseline;
 color:var(--deep);will-change:transform}
.dayswap-in{display:inline-block;transition:opacity .42s cubic-bezier(.4,0,.2,1),transform .42s cubic-bezier(.4,0,.2,1)}
.dayswap.is-out .dayswap-in{opacity:0;transform:translateY(-14px)}
.dayswap.is-in .dayswap-in{opacity:0;transform:translateY(14px)}
@media (prefers-reduced-motion:reduce){
 .dayswap-in{transition:none}
 .dayswap.is-out .dayswap-in,.dayswap.is-in .dayswap-in{opacity:1;transform:none}
}

/* ===== v1.3: de plannerkaart compacter =====
   Met een volledig recept liep de kaart twee keer zo hoog als de tekst ernaast.
   Alles hieronder is ademruimte terugnemen, niets weglaten. */
.hero-in{align-items:center}
.pc-head{padding:14px 20px}
.pc-head b{font-size:14.5px}
.pc-body{padding:15px 20px 2px}
.field{margin-bottom:11px}
.field .lab{margin-bottom:6px;font-size:9px}
.opt{padding:6px 10px;font-size:12px}
.opt .sub{display:block;font-size:9px;font-family:var(--font-mono);
 opacity:.72;margin-top:2px;font-weight:500;line-height:1.2}
.opt{text-align:center;line-height:1.25}
.pc-out{margin:4px 20px 0;padding:12px 0 0}
.pc-dish{font-size:15.5px;margin-bottom:9px}
.step{padding:4px 0;font-size:12.5px}
.step .d{min-width:58px;font-size:9.5px}
.pc-foot{padding:13px 20px 16px}
.pc-cta{padding:13px 18px;font-size:14px}
.pc-note{font-size:9px;margin-top:8px}

/* Lange schema's krijgen een eigen schuifgebied in plaats van de kaart uit te rekken. */
.steps{max-height:230px;overflow-y:auto;scrollbar-width:thin;
 scrollbar-color:rgba(255,255,255,.2) transparent}
.steps::-webkit-scrollbar{width:4px}
.steps::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}

@media (max-width:860px){
 .steps{max-height:none}
 .hero-in{align-items:stretch}
}

/* ===== v1.4: de kaart begint compact =====
   Zonder interactie stond er meteen een volledig schema, waardoor de kaart
   twee keer zo hoog was als de tekst ernaast. Nu groeit hij pas als iemand kiest. */
.pc-wenk{display:none;margin:0 20px;padding:13px 0 3px;border-top:1px dashed var(--line-hi);
 font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;color:var(--dim);text-transform:uppercase}
.pcard.leeg .pc-wenk{display:block}
.pcard.leeg .pc-out{display:none}
.pcard.bezig .pc-wenk{opacity:.5}

/* Rustig openvouwen in plaats van springen. */
.pc-out{animation:pcOpen .32s cubic-bezier(.2,.8,.3,1)}
@keyframes pcOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pc-out{animation:none}}

/* ===== v1.5: leesbare lopende tekst op pagina's en artikelen ===== */
.entry{color:var(--ink,#EFE8E0);font-size:16.5px;line-height:1.75}
.entry > * + *{margin-top:18px}
.entry h2{font-size:clamp(22px,2.6vw,28px);margin-top:38px;letter-spacing:-.015em}
.entry h3{font-size:19px;margin-top:28px}
.entry h2 + p,.entry h3 + p{margin-top:10px}
.entry p{max-width:68ch}
.entry a{color:var(--deep,#F5442F);border-bottom:1px solid rgba(245,68,47,.4)}
.entry a:hover{border-bottom-color:currentColor}
.entry strong{color:#fff}
.entry ul,.entry ol{padding-left:22px;max-width:68ch}
.entry li{margin:7px 0}
.entry li::marker{color:var(--deep,#F5442F)}
.entry blockquote{border-left:3px solid var(--ember,#D42B22);padding:4px 0 4px 18px;
 margin-left:0;color:var(--soft,#A79C90);font-style:normal}

.entry code{font-family:var(--font-mono);font-size:14px;background:rgba(255,255,255,.07);
 padding:2px 7px;border-radius:3px;color:#FFC4B4}
.entry pre{background:rgba(255,255,255,.05);border-left:3px solid var(--ember,#D42B22);
 padding:16px 18px;overflow-x:auto;border-radius:0 5px 5px 0}
.entry pre code{background:none;padding:0}
.entry hr{border:none;border-top:1px solid var(--line);margin:34px 0}
.entry img{border-radius:5px;height:auto}

/* ===== v1.6: kennisbank ===== */

/* Het korte antwoord bovenaan een artikel. Google pakt hier zijn fragment vandaan,
   dus het moet visueel losstaan en direct leesbaar zijn. */
.smk-kort{background:rgba(212,43,34,.09);border-left:3px solid var(--ember,#D42B22);
 border-radius:0 6px 6px 0;padding:18px 22px;margin:0 0 30px}
.smk-kort-kop{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--deep,#F5442F);margin-bottom:9px}
.smk-kort-vraag{font-family:var(--font-display);font-weight:700;font-size:17px;
 color:#fff;margin:0 0 8px;line-height:1.3}
.smk-kort-tekst{margin:0;color:var(--ink,#EFE8E0);font-size:15.5px;line-height:1.65}

/* Uitklapbare vragen op de vragenpagina. */
.vragen{border-top:1px solid var(--line)}
.vraag{border-bottom:1px solid var(--line)}
.vraag summary{cursor:pointer;padding:18px 30px 18px 0;position:relative;
 font-family:var(--font-display);font-weight:700;font-size:17px;color:#fff;
 list-style:none;line-height:1.35}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"+";position:absolute;right:4px;top:16px;
 font-size:22px;color:var(--deep,#F5442F);font-weight:400;transition:transform .2s}
.vraag[open] summary::after{transform:rotate(45deg)}
.vraag summary:hover{color:var(--deep,#F5442F)}
.vraag-in{padding:0 0 22px}
.vraag-in p{color:var(--soft,#A79C90);font-size:15px;line-height:1.7;margin:0 0 14px;max-width:66ch}

/* ===== v1.7: menu zonder opsommingstekens =====
   Een gekoppeld menu levert <li>-elementen op. Zonder deze regels krijg je
   bolletjes en inspringing van de browser. */
.navlinks ul,.navlinks li,.flinks ul,.flinks li{list-style:none;margin:0;padding:0}
.navlinks ul{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.flinks ul{display:flex;gap:22px;flex-wrap:wrap}
.navlinks li a{display:inline-block}
.navlinks .current-menu-item > a,.navlinks .current_page_item > a{color:var(--deep,#F5442F)}
.navlinks .current-menu-item > a::after,.navlinks .current_page_item > a::after{right:0}

/* ===== v1.8: beeld en insluitblokken in artikelen ===== */

/* Alle foto's in een artikel even hoog. Zonder dit springen ze mee met hun
   eigen verhouding — 739x900 naast 573x1024 en de pagina hobbelt. */
.entry img{width:100%;height:auto;border-radius:5px}
.entry figure{margin:26px 0}
.entry figure img{display:block}
.entry .wp-block-image img,
.entry p > img,
.entry > img{aspect-ratio:4/3;object-fit:cover;object-position:center}

/* Staande foto's van een telefoon: kap ze af op een vaste hoogte in plaats van
   ze een halve pagina te laten vullen. */
.entry .wp-block-image.is-style-staand img{aspect-ratio:3/4;max-height:520px;width:auto;margin:0 auto}
.entry figcaption{font-family:var(--font-mono);font-size:11.5px;color:var(--dim);
 text-align:center;margin-top:9px;letter-spacing:.03em}

/* Twee foto's naast elkaar krijgen dezelfde hoogte. */
.entry .wp-block-gallery img{aspect-ratio:1/1;object-fit:cover}

/* ---- Insluitblok voor een reel ---- */
.smk-reel{margin:30px 0;max-width:340px}
.smk-reel-link{position:relative;display:block;border-radius:8px;overflow:hidden;
 border:1px solid var(--line);background:#0F0C0A}
.smk-reel-beeld{display:block}
.smk-reel-beeld img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;
 border-radius:0;transition:transform .5s ease}
.smk-reel-link:hover .smk-reel-beeld img{transform:scale(1.04)}
.smk-reel-link::after{content:"";position:absolute;inset:0;
 background:linear-gradient(0deg,rgba(10,8,6,.55),rgba(10,8,6,.05) 55%)}
.smk-reel-knop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
 width:58px;height:58px;border-radius:50%;background:var(--ember,#D42B22);
 box-shadow:0 10px 30px -6px rgba(212,43,34,.7);transition:.2s}
.smk-reel-knop::before{content:"";position:absolute;left:50%;top:50%;
 transform:translate(-42%,-50%);border-left:16px solid #fff;
 border-top:10px solid transparent;border-bottom:10px solid transparent}
.smk-reel-link:hover .smk-reel-knop{background:var(--deep,#F5442F);
 transform:translate(-50%,-50%) scale(1.07)}
.smk-reel-duur{position:absolute;right:11px;top:11px;z-index:2;
 background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);border-radius:20px;
 padding:3px 9px;font-family:var(--font-mono);font-size:10.5px;color:#fff}
.smk-reel-bij{display:flex;justify-content:space-between;align-items:baseline;
 gap:12px;flex-wrap:wrap;margin-top:10px}
.smk-reel-bron{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.07em;
 text-transform:uppercase;color:var(--dim)}
.smk-reel-bij a{font-size:13.5px;font-weight:600;color:var(--deep,#F5442F);border:none}

/* Drie plekken, in te stellen met plek="midden|rechts|links".
   Midden is de standaard: één beeld per stap, niks dat om aandacht vecht. */
.smk-reel--midden{margin:32px auto;max-width:330px}
.smk-reel--midden .smk-reel-bij{justify-content:center;text-align:center}

@media(min-width:820px){
 .smk-reel--rechts{float:right;margin:6px 0 22px 30px;max-width:290px}
 .smk-reel--links{float:left;margin:6px 30px 22px 0;max-width:290px}
}
@media(max-width:600px){
 .smk-reel{max-width:100%;float:none;margin:26px auto}
}

/* ---- Extra vragen onder een artikel ---- */
.smk-meer{margin-top:44px;padding-top:8px;border-top:1px solid var(--line)}
.smk-meer h2{font-size:clamp(21px,2.4vw,26px);margin:22px 0 6px;letter-spacing:-.015em}

/* ===== v2.0: nieuw merkteken ===== */
.logo .smk-mark{width:18px;height:18px;flex:0 0 auto;color:var(--ember,#D42B22);
 display:block;transition:color .2s ease,transform .2s ease}
.logo:hover .smk-mark{color:var(--deep,#F5442F);transform:rotate(-8deg)}
/* De oude kamado-vorm bestaat niet meer, maar de regels laten staan schaadt niet
   voor wie nog een gecachte pagina ziet. */
.logo .kamado{width:17px;height:19px;flex:0 0 auto;fill:var(--ember,#D42B22);display:block}

/* ===== v2.1: claimsbalk op mobiel =====
   Gecentreerd afbreken gaf een trapje: elke claim iets verder ingesprongen.
   Op een smal scherm horen ze links onder elkaar. */
@media (max-width:760px){
 .honest{flex-direction:column;align-items:flex-start;gap:11px;padding:18px 0}
 .honest span{width:100%;font-size:12px}
}

/* Foutmelding bij het inschrijven leesbaar houden. */
.smk-msg{font-size:13px;line-height:1.5;margin-top:9px;min-height:1px}
.smk-msg:empty{display:none}


/* ===== v2.4: tabellen die lezen als een lijst =====
   Een kader met verticale lijnen en gekleurde blokken maakt er een spreadsheet
   van. Wat je wilt is dat iemand een rij kan volgen — meer niet. Dus alleen
   dunne horizontale lijnen, veel lucht, en één rustige koprij. */

.entry .wp-block-table,
.entry figure.wp-block-table{margin:30px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}

.entry table{width:100%;border-collapse:collapse;font-size:15px;
 background:none;border:none;min-width:480px}

/* Koprij: klein, mono, alleen een streep eronder. Geen blok. */
.entry thead th,
.entry table tr:first-child th{
 background:none;color:var(--soft,#A79C90);text-align:left;
 font-family:var(--font-mono);font-size:10.5px;font-weight:700;
 letter-spacing:.12em;text-transform:uppercase;
 padding:0 22px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.entry thead th:last-child,
.entry table tr:first-child th:last-child{padding-right:0}

/* Rijen: alleen een dunne lijn, ruim genoeg om te volgen. */
.entry tbody td{padding:16px 22px 16px 0;border-bottom:1px solid rgba(255,255,255,.06);
 color:var(--soft,#A79C90);line-height:1.55;vertical-align:top}
.entry tbody td:last-child{padding-right:0}
.entry tbody tr:last-child td{border-bottom:none}

/* Geen gestreepte achtergronden. Alleen een subtiel oplichten bij hover. */
.entry tbody tr{transition:background .15s}
.entry tbody tr:hover td{background:rgba(255,255,255,.02)}

/* Nummerkolom: klein en terughoudend, het is een teller, geen inhoud. */
.entry tbody td:first-child{font-family:var(--font-mono);font-size:12px;
 color:var(--dim,#7B7166);width:34px;padding-right:0;padding-top:18px}

/* Tweede kolom draagt de naam: die mag opvallen. */
.entry tbody td:nth-child(2){color:#fff;font-weight:600;font-size:15.5px;white-space:nowrap}

/* Links in een tabel: geen felle onderstreping, wel duidelijk klikbaar. */
.entry tbody td a{color:#fff;border-bottom:1px solid rgba(212,43,34,.55);
 transition:border-color .15s,color .15s}
.entry tbody td a:hover{color:var(--deep,#F5442F);border-bottom-color:var(--deep,#F5442F)}

.entry table caption{caption-side:bottom;padding-top:12px;font-size:12.5px;
 color:var(--dim,#7B7166);text-align:left}

@media (max-width:700px){
 .entry .wp-block-table{position:relative}
 .entry .wp-block-table::after{content:"→ schuif voor de rest";display:block;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim,#7B7166);padding-top:8px}
 .entry table{font-size:14px}
 .entry thead th,.entry tbody td{padding-right:16px}
 .entry tbody td{padding-top:13px;padding-bottom:13px}
}

/* Wil je ergens tóch het kader met blokken — geef de tabel in WordPress
   de extra CSS-klasse "raster". */
.entry table.raster{background:rgba(255,255,255,.025);border:1px solid var(--line);
 border-radius:6px;overflow:hidden}
.entry table.raster thead th{background:rgba(255,255,255,.05);color:#fff;
 padding:13px 16px;border-bottom:2px solid var(--ember,#D42B22)}
.entry table.raster tbody td{padding:13px 16px;border-bottom:1px solid var(--line)}
.entry table.raster tbody td:first-child{padding-left:16px;width:auto}
.entry table.raster tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)}

/* ===== ankers: ruimte onder de vaste balk ===== */
.entry h2[id],.entry h3[id],
[id]:target{scroll-margin-top:88px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== v2.5: WordPress' eigen tabelranden uitzetten =====
   De blok-editor zet standaard een rand om elke cel. Die moet expliciet weg,
   anders blijven de verticale lijnen staan hoe luchtig je de rest ook maakt. */
.entry .wp-block-table table,
.entry .wp-block-table td,
.entry .wp-block-table th,
.entry table,
.entry table td,
.entry table th{border-left:0!important;border-right:0!important;border-top:0!important}

.entry .wp-block-table table{border-collapse:collapse!important}
.entry .wp-block-table.is-style-stripes table,
.entry .wp-block-table.is-style-stripes tbody tr:nth-child(odd){background:none!important}

/* Koprij en cellen: alleen de onderrand die we zelf zetten. */
.entry thead th,.entry table tr:first-child th{
 border-bottom:1px solid var(--line)!important}
.entry tbody td{border-bottom:1px solid rgba(255,255,255,.06)!important}
.entry tbody tr:last-child td{border-bottom:0!important}

/* Nummerkolom smal houden. */
.entry tbody td:first-child,
.entry thead th:first-child{width:1%;white-space:nowrap;padding-right:18px}

/* Bij de rastervariant willen we de randen juist wél. */
.entry table.raster td,.entry table.raster th{
 border-left:0!important;border-right:0!important}

/* ===== v2.6: tabellen in dezelfde stijl als de vragenlijst =====
   Zelfde ritme als de FAQ: witte vetgedrukte kop, gedempte tekst, één dunne
   lijn ertussen. Rustiger dan een raster, en het past bij de rest van de site. */

.entry table{font-size:14.5px}

/* Koprij: nog kleiner en verder weg. Hij benoemt de kolommen, meer niet. */
.entry thead th,.entry table tr:first-child th{
 font-size:10px;letter-spacing:.14em;color:var(--dim,#7B7166);
 padding:0 26px 12px 0;border-bottom:1px solid var(--line)!important}

/* Rijen krijgen dezelfde lucht als een FAQ-item. */
.entry tbody td{padding:19px 26px 19px 0;line-height:1.6;
 color:var(--soft,#A79C90);font-size:14.5px;
 border-bottom:1px solid var(--line)!important}
.entry tbody tr:last-child td{border-bottom:0!important}
.entry tbody tr:hover td{background:none}

/* De naam leest als de vraag: wit, vet, iets groter. */
.entry tbody td:nth-child(2){color:#fff;font-weight:700;font-size:16px;
 letter-spacing:-.01em;padding-right:34px}

/* Het nummer wordt een klein merkteken, geen kolom om te lezen. */
.entry tbody td:first-child,
.entry thead th:first-child{width:1%;white-space:nowrap;
 font-family:var(--font-mono);font-size:11px;color:var(--dim,#7B7166);
 padding-right:20px;padding-top:22px}

/* Links binnen de tabel: zoals in de vragenlijst, subtiel. */
.entry tbody td a{color:#fff;border-bottom:1px solid rgba(212,43,34,.45)}
.entry tbody td a:hover{color:var(--deep,#F5442F);border-bottom-color:var(--deep,#F5442F)}

@media (max-width:700px){
 .entry tbody td{padding:15px 18px 15px 0}
 .entry tbody td:nth-child(2){font-size:15px}
 .entry tbody td:first-child{padding-top:18px}
}

/* ===== v2.7: mobiel menu en social =====
   Zonder menu kon een bezoeker vanaf een artikel alleen terug naar de homepage.
   Precies het verkeer dat je wilt houden, verdween daar. */

.navrechts{display:flex;align-items:center;gap:14px}

/* Social: klein en grijs. Ze horen erbij, maar mogen niet concurreren met
   de knop naar het weekendplan. */
.navsocial{display:flex;align-items:center;gap:10px}
.soc{display:flex;align-items:center;justify-content:center;
 width:26px;height:26px;color:var(--dim,#7B7166);transition:color .18s,transform .18s}
.soc svg{width:17px;height:17px;fill:currentColor;display:block}
.soc:hover{color:var(--deep,#F5442F);transform:translateY(-1px)}
.navsocial-mobiel{display:none}

/* De hamburgerknop: drie streepjes die in een kruis veranderen. */
.navtoggle{display:none;background:none;border:none;cursor:pointer;
 width:32px;height:32px;padding:6px;flex-direction:column;justify-content:space-between}
.navtoggle span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;
 transition:transform .26s cubic-bezier(.2,.8,.3,1),opacity .18s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:820px){
 .navtoggle{display:flex}
 .navsocial{display:none}          /* op mobiel in het uitklapmenu */
 .navsocial-mobiel{display:flex;gap:16px;padding-top:18px;margin-top:6px;
  border-top:1px solid var(--line)}
 .navsocial-mobiel .soc{width:34px;height:34px}
 .navsocial-mobiel .soc svg{width:21px;height:21px}

 .navcta{font-size:12px;padding:9px 13px}

 /* Het menu zelf: schuift open onder de balk, geen zwevend paneel. */
 .navlinks{display:block;position:absolute;left:0;right:0;top:100%;
  background:var(--card,#221D19);border-bottom:1px solid var(--line);
  padding:0 26px;max-height:0;overflow:hidden;
  transition:max-height .3s cubic-bezier(.2,.8,.3,1),padding .3s;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.7)}
 .navlinks.open{max-height:70vh;overflow-y:auto;padding:8px 26px 22px}

 .navlinks a{display:block;padding:14px 0;font-size:16px;
  border-bottom:1px solid rgba(255,255,255,.06)}
 .navlinks a:last-of-type{border-bottom:none}
 .navlinks a::after{display:none}   /* de uitschuivende streep past hier niet */
 .navlinks ul{display:block}
 .navlinks li a{display:block}

 header{position:sticky}
 .nav{position:relative}
}

@media (prefers-reduced-motion:reduce){
 .navlinks,.navtoggle span,.soc{transition:none}
}

/* v2.8: social als lijnicoon — fill werkt niet meer, stroke wel */
.soc svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor}
.navsocial-mobiel .soc svg{width:22px;height:22px}

/* ===== v2.9: sneller op mobiel =====
   De hero was op een telefoon 9,3 seconden. Oorzaak: één foto van 1600 pixels
   die volledig gedownload werd voordat er iets in beeld kwam. */

/* Vaste verhoudingen: de browser reserveert de ruimte al vóór het beeld er is,
   zodat de pagina niet verspringt tijdens het laden. */
.hero .frame{aspect-ratio:auto}
.hero .frame img{width:100%;height:100%;object-fit:cover}
.rcard .frame{aspect-ratio:3/2}
.tcard .frame{aspect-ratio:4/5}
.cat .frame{aspect-ratio:3/4}
.reel .frame{aspect-ratio:9/16}
.iggrid .frame{aspect-ratio:1/1}

/* Terwijl een foto laadt: een rustige donkere vlakte in plaats van wit. */
.frame{background:#171310}

/* Op een telefoon is de hero lager, dus hoeft het beeld ook niet zo groot. */
@media (max-width:820px){
 .hero{min-height:520px}
 .hero .frame img{object-position:center 35%}
}

/* ===== v3.1: planner-aanpassingen ===== */

/* Gratis mag duidelijker. Het is het belangrijkste bezwaar dat je wegneemt,
   dus geen grijs labeltje maar een groen vlakje dat opvalt. */
.tag-gratis{background:#2F6B2A;border-color:#3D8A36;color:#DFF5DB;
 font-size:9.5px;letter-spacing:.1em;padding:5px 10px;font-weight:700}
.pc-head{gap:12px}

/* Hoeveel recepten er nog passen. Terughoudend: het is een bijzin,
   geen kop. */
.pc-meer{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.07em;
 text-transform:uppercase;color:var(--dim,#7B7166);
 padding-top:11px;margin-top:9px;border-top:1px dashed var(--line-hi)}
.pc-meer:empty{display:none}

/* Vijf keuzes voor het aantal personen: iets smaller zodat ze op één regel
   blijven staan, ook op een telefoon. */
.opts[data-group="servings"] .opt{min-width:38px;text-align:center;padding-left:9px;padding-right:9px}

/* De knop naar de planner in de balk: gratis er duidelijk bij. */
.navcta{white-space:nowrap}

/* Omschakelaar voor het aantal personen op een receptpagina. */
.pers-kies{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.pers-lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
 text-transform:uppercase;color:var(--dim,#7B7166)}
.pers-knop{font-family:var(--font-mono);font-size:13px;font-weight:700;
 min-width:34px;padding:6px 9px;border-radius:4px;cursor:pointer;
 background:transparent;border:1px solid var(--line-hi);color:var(--soft,#A79C90);
 transition:.15s}
.pers-knop:hover{border-color:var(--ember,#D42B22);color:#fff}
.pers-knop.aan{background:var(--ember,#D42B22);border-color:var(--ember,#D42B22);color:#fff}
#ingLijst{transition:opacity .15s}

/* ===== v3.2: drankadvies =====
   Twee kaarten naast elkaar, gelijkwaardig van formaat. Het onderscheid zit in
   de kleur van het labeltje, niet in de grootte — alcoholvrij is geen bijzin. */

.drank{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.drank-kop{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--deep,#F5442F);margin-bottom:10px}
.drank-waarom{color:var(--soft,#A79C90);font-size:15px;line-height:1.6;
 margin:0 0 16px;max-width:60ch}

.drank-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}

.drank-kaart{position:relative;background:rgba(255,255,255,.03);
 border:1px solid var(--line);border-radius:6px;padding:14px 16px;
 display:flex;flex-direction:column;gap:6px}

.drank-label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
 text-transform:uppercase}
/* Groen voor alcoholvrij, amber voor alcohol. Meteen te onderscheiden,
   ook voor wie kleuren slecht ziet staat het er in woorden. */
.drank-non .drank-label{color:#8FBF7A}
.drank-alc .drank-label{color:#D9A13B}
.drank-non{border-left:3px solid #4F7A41}
.drank-alc{border-left:3px solid #8A6620}

.drank-naam{font-family:var(--font-display);font-weight:700;font-size:17px;
 color:#fff;line-height:1.25}
a.drank-naam{border-bottom:1px solid rgba(212,43,34,.45)}
a.drank-naam:hover{color:var(--deep,#F5442F);border-bottom-color:var(--deep,#F5442F)}

.drank-18{position:absolute;right:12px;top:12px;font-family:var(--font-mono);
 font-size:9px;letter-spacing:.06em;color:var(--dim,#7B7166);
 border:1px solid var(--line-hi);border-radius:20px;padding:2px 7px}

@media (max-width:600px){
 .drank-rij{grid-template-columns:1fr}
}