/* Ubely — gedeelde stijl voor content-/gidspagina's. Zelfde tokens als index.html. */
@font-face { font-family:"Bricolage"; src:url("/assets/fonts/BricolageGrotesque.woff2") format("woff2"); font-weight:200 800; font-display:swap; }
@font-face { font-family:"Hanken"; src:url("/assets/fonts/HankenGrotesk.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Caveat"; src:url("/assets/fonts/Caveat-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }

:root {
  --ink:#1A0730; --bg:#23093B; --surface:#2E1150; --surface-2:#150523; --grape:#3A1163;
  --cream:#F4ECDD; --cream-dim:#C7B4DC; --lilac:#C6A0FF; --lilac-bright:#DcC6FF;
  --orchid:#B983FF; --gold:#E7C79A; --line:#3d2258;
  --sans:"Hanken","Helvetica Neue",system-ui,-apple-system,Arial,sans-serif;
  --display:"Bricolage","Hanken",system-ui,sans-serif;
  --script:"Caveat","Segoe Script",cursive;
  --wrap:820px;
  --s0:clamp(1rem,0.95rem + 0.25vw,1.14rem);
  --s1:clamp(1.2rem,1.05rem + 0.6vw,1.5rem);
  --s2:clamp(1.5rem,1.25rem + 1.1vw,2.1rem);
  --s3:clamp(2rem,1.5rem + 2.2vw,3.1rem);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--cream); font-family:var(--sans); font-size:var(--s0); line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
img { max-width:100%; display:block; border-radius:18px; }
a { color:var(--lilac-bright); text-underline-offset:3px; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 clamp(1.2rem,5vw,2rem); }

/* topbar */
.topbar { border-bottom:1px solid var(--line); }
.topbar .inner { max-width:var(--wrap); margin:0 auto; padding:1rem clamp(1.2rem,5vw,2rem); display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.brand { display:inline-flex; align-items:baseline; gap:.55rem; text-decoration:none; }
.brand .mk { font-family:var(--script); font-weight:700; font-size:1.9rem; line-height:1; color:var(--cream); }
.brand .tag { font-size:.58rem; letter-spacing:.32em; text-transform:uppercase; color:var(--lilac); }
.nav-cta { text-decoration:none; font-weight:700; font-size:.82rem; padding:.55rem 1.05rem; border-radius:999px; border:1px solid var(--line); color:var(--cream); white-space:nowrap; transition:background .25s,color .25s,transform .4s cubic-bezier(.16,1,.3,1); }
.nav-cta:hover { background:var(--lilac); color:var(--ink); transform:translateY(-2px); }

/* article */
.article { padding:clamp(2.2rem,6vw,4rem) 0 clamp(2.6rem,7vw,5rem); }
.crumb { font-size:.82rem; color:var(--cream-dim); margin-bottom:1.4rem; }
.crumb a { color:var(--cream-dim); }
.kicker { font-family:var(--script); font-weight:700; font-size:var(--s1); color:var(--lilac); margin:0 0 .3rem; }
h1.title { font-family:var(--display); font-weight:900; letter-spacing:-.02em; line-height:1.02; font-size:var(--s3); margin:0 0 1rem; text-wrap:balance; }
.lead { font-size:var(--s1); color:var(--cream-dim); margin:0 0 2rem; text-wrap:pretty; }

.prose h2 { font-family:var(--display); font-weight:800; letter-spacing:-.015em; font-size:var(--s2); margin:2.6rem 0 .8rem; }
.prose h3 { font-family:var(--display); font-weight:700; font-size:1.2rem; margin:1.8rem 0 .5rem; }
.prose p { margin:0 0 1.05rem; }
.prose strong { color:var(--cream); font-weight:700; }
.prose ul,.prose ol { margin:0 0 1.2rem; padding-left:1.3rem; }
.prose li { margin:.35rem 0; }
.prose a { color:var(--lilac-bright); }

/* answer-first / tip callout */
.answer { background:var(--surface); border:1px solid var(--orchid); border-radius:14px; padding:1.1rem 1.3rem; margin:0 0 2rem; color:var(--cream); }
.answer p { margin:0; }
.tip { background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.3rem; margin:1.6rem 0; }
.tip b { color:var(--lilac-bright); }

/* table */
.tbl-wrap { overflow-x:auto; margin:1.4rem 0; }
table { border-collapse:collapse; width:100%; font-size:.96rem; min-width:420px; }
th,td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); }
th { color:var(--lilac); font-family:var(--display); font-weight:700; }

/* recipe steps */
.recipe { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:1.4rem 1.5rem; margin:1.8rem 0; }
.recipe h3 { margin-top:0; }
.recipe ol { counter-reset:step; list-style:none; padding-left:0; }
.recipe ol li { counter-increment:step; position:relative; padding-left:2.4rem; margin:.7rem 0; }
.recipe ol li::before { content:counter(step); position:absolute; left:0; top:-.1rem; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--lilac); color:var(--ink); font-family:var(--display); font-weight:800; font-size:.9rem; display:grid; place-items:center; }
.meta { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; font-size:.85rem; color:var(--cream-dim); margin:.2rem 0 1rem; }

/* faq */
.faq { margin:2.4rem 0 0; }
.faq-item { border-top:1px solid var(--line); }
.faq-item:last-child { border-bottom:1px solid var(--line); }
.faq-item summary { cursor:pointer; padding:1rem 0; font-family:var(--display); font-weight:700; font-size:1.08rem; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; color:var(--lilac); font-weight:700; }
.faq-item[open] summary::after { content:"\2013"; }
.faq-item p { margin:0 0 1.1rem; color:var(--cream-dim); }

/* related + cta */
.cta-card { background:linear-gradient(155deg,var(--grape),var(--ink)); border:1px solid var(--line); border-radius:22px; padding:clamp(1.6rem,4vw,2.4rem); margin:2.8rem 0 0; text-align:center; }
.cta-card h2 { font-family:var(--display); font-weight:900; font-size:var(--s2); margin:0 0 .5rem; }
.cta-card p { color:var(--cream-dim); margin:0 0 1.3rem; }
.btn { display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; font-family:var(--display); font-weight:800; font-size:.92rem; letter-spacing:.03em; text-transform:uppercase; padding:.95rem 1.6rem; border-radius:999px; background:var(--lilac); color:var(--ink); box-shadow:0 16px 36px -16px rgba(198,160,255,.6); transition:transform .5s cubic-bezier(.16,1,.3,1),background .3s; }
.btn:hover { transform:translateY(-3px); background:var(--lilac-bright); }
.related { display:flex; flex-wrap:wrap; gap:.6rem; margin:2.2rem 0 0; }
.related a { text-decoration:none; font-size:.9rem; color:var(--cream); padding:.5rem 1rem; border:1px solid var(--line); border-radius:999px; background:var(--surface); transition:background .25s,color .25s; }
.related a:hover { background:var(--lilac); color:var(--ink); }

#toTop { position:fixed; right:20px; bottom:20px; z-index:60; width:48px; height:48px; border:none; border-radius:50%; background:var(--lilac); color:var(--ink); font-size:1.5rem; line-height:1; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .3s,transform .3s,background .3s; box-shadow:0 10px 28px -10px rgba(0,0,0,.6); }
#toTop.show { opacity:1; pointer-events:auto; transform:translateY(0); }
#toTop:hover { background:var(--lilac-bright); }

footer { border-top:1px solid var(--line); margin-top:clamp(2.6rem,7vw,5rem); }
footer .fl { display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; align-items:center; padding:1.6rem 0; font-size:.9rem; color:var(--cream-dim); }
footer .mk { font-family:var(--script); font-weight:700; font-size:1.5rem; color:var(--cream); }