/* Exhala site: rustig, veel ruimte, leesbare kolom. Zelfde kleuren als de app. */
:root{
  --bg:#EEF2F1; --surface:#FFFFFF; --line:#D3DDDB; --fg:#13262B; --muted:#4A5E63;
  --accent:#1F6F8B; --accent-fg:#FFFFFF; --chip:#E2EAE8; --deep:#0F2328; --deep-fg:#EAF1F0;
  --in:#4A9BD1; --hold:#8FB3BF; --out:#E0A050;
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B1A1E; --surface:#12262B; --line:#24414A; --fg:#E6EFEE; --muted:#9DB4B8;
  --accent:#5FB0DC; --accent-fg:#06161B; --chip:#1B3740; --deep:#081417; --deep-fg:#EAF1F0; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B1A1E; --surface:#12262B; --line:#24414A; --fg:#E6EFEE; --muted:#9DB4B8;
  --accent:#5FB0DC; --accent-fg:#06161B; --chip:#1B3740; --deep:#081417; --deep-fg:#EAF1F0; color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:17px;line-height:1.6}
a{color:var(--accent)}
a:hover{color:var(--fg)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);line-height:1.12;text-wrap:balance;margin:0}
img{max-width:100%}

.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.top{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding-block:18px}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none}
.brand b{font-family:var(--f-display);font-size:23px;letter-spacing:-.01em}
.nav{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:16px}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:10px;background:var(--accent);color:var(--accent-fg)!important;text-decoration:none;font-weight:600;border:0;font-size:16px}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--fg)!important;border:1px solid var(--line)}

/* artikels */
.crumbs{font-size:14px;color:var(--muted);padding-block:8px 0}
.crumbs a{color:var(--muted)}
.article{max-width:70ch;padding-block:20px 64px;display:flex;flex-direction:column;gap:18px}
.article h1{font-size:clamp(32px,5vw,48px)}
.article h2{font-size:26px;margin-top:18px}
.article h3{font-size:20px;margin-top:6px}
.article p,.article ul,.article ol{margin:0}
.article ul,.article ol{padding-left:22px;display:flex;flex-direction:column;gap:6px}
.lead{font-size:20px;color:var(--muted)}
.meta{font-family:var(--f-mono);font-size:13px;color:var(--muted);letter-spacing:.02em}
.try{background:var(--deep);color:var(--deep-fg);border-radius:16px;padding:22px 24px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.try p{margin:0;max-width:46ch}
.try strong{font-family:var(--f-display);font-size:20px;display:block}
.recipe{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.recipe div{display:flex;flex-direction:column;gap:2px}
.recipe span{font-size:13px;color:var(--muted)}
.recipe b{font-family:var(--f-mono);font-weight:500;font-size:18px;font-variant-numeric:tabular-nums}
.note{background:var(--chip);border-radius:12px;padding:14px 18px;font-size:15px}
.sources{font-size:15px;color:var(--muted)}
.sources ol{gap:4px}
.faq details{border-top:1px solid var(--line);padding-block:12px}
.faq summary{cursor:pointer;font-weight:600}
.faq details p{margin-top:8px}

/* kaarten met gidsen */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--fg)}
.card:hover{border-color:var(--muted)}
.card h3,.card .t{font-size:20px}
.card .t{display:block;font-family:var(--f-display);font-weight:700;line-height:1.15}
.card p{margin:0;color:var(--muted);font-size:15px}
.card .meta{margin-top:auto}

.foot{border-top:1px solid var(--line);margin-top:24px;padding-block:28px 40px;font-size:15px;color:var(--muted);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.foot a{color:var(--muted)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.foot b{color:var(--fg);display:block;margin-bottom:6px}