/* Gedeeld over de hele site: tokens, header, mobiel menu, footer, knoppen, mail-melding.
   Concept 2026-09-27. Tokens gelijk aan het web-register in visual-identity.md. */
:root{
  --ink:#1F1D1C; --ink-soft:#6A635C; --paper:#FFFFFF; --paper2:#F6F5F4;
  --line:#EAE3DC; --red:#B23A2E; --coral:#E0694B; --amber:#E9A043; --rose:#F4D3C6;
  --warm:linear-gradient(120deg,#B23A2E 0%,#E0694B 45%,#E9A043 100%);
  --warmtxt:linear-gradient(120deg,#9A2E23 0%,#B23A2E 50%,#C9493B 100%);
  --fn:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --bd:"Source Serif 4",Georgia,serif;
  --gut:clamp(20px,5vw,80px); --maxw:1200px;
  --side:max(var(--gut),calc((100vw - var(--maxw)) / 2));
  --vrit:clamp(52px,7vh,96px);
  --navh:60px;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--navh) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--fn);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}

/* header */
#nav{position:fixed;top:0;left:0;right:0;height:var(--navh);display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:0 var(--side);z-index:50;
  background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(234,227,220,.8)}
#nav a{color:inherit;text-decoration:none}
#nav .brand{font-weight:700;display:flex;align-items:center;gap:10px;font-size:15px;letter-spacing:-.005em;white-space:nowrap}
#nav .brand i{width:10px;height:10px;border-radius:3px;background:var(--warm);flex:0 0 auto}
#nav .brand small{font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
#nav .right{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}
#nav .links{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)}
#nav .links a{color:var(--ink-soft);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:6px 0;border-bottom:2px solid transparent}
#nav .links a:hover{color:var(--ink)}
#nav .links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--coral)}
.pill{display:inline-flex;align-items:center;gap:8px;color:var(--red)!important;border:1.5px solid var(--red);border-radius:10px;
  padding:8px 16px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;white-space:nowrap;
  transition:background .2s,color .2s;background:#fff}
.pill:hover{background:var(--red);color:#fff!important}
.pill svg{width:14px;height:14px}
#menuBtn{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;
  cursor:pointer;align-items:center;justify-content:center;padding:0}
#menuBtn span{display:block;width:16px;height:2px;border-radius:2px;background:var(--ink);position:relative}
#menuBtn span::before,#menuBtn span::after{content:"";position:absolute;left:0;width:16px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s}
#menuBtn span::before{top:-5px} #menuBtn span::after{top:5px}
body.menu-open #menuBtn span{background:transparent}
body.menu-open #menuBtn span::before{transform:translateY(5px) rotate(45deg)}
body.menu-open #menuBtn span::after{transform:translateY(-5px) rotate(-45deg)}

#sheet{position:fixed;top:var(--navh);left:0;right:0;z-index:49;background:#fff;border-bottom:1px solid var(--line);
  padding:8px var(--side) 22px;display:none;box-shadow:0 24px 40px -30px rgba(120,60,30,.4)}
#sheet a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);
  color:var(--ink);text-decoration:none;font-size:20px;font-weight:700}
#sheet a[aria-current="page"]{color:var(--red)}
#sheet a::after{content:"→";color:var(--coral);font-weight:600}
#sheet .mailrow{margin-top:18px;font-family:var(--bd);font-size:15px;color:var(--ink-soft)}
body.menu-open #sheet{display:block}

main{display:block}

/* gedeelde typografie */
.sec{position:relative;padding:var(--vrit) var(--side)}
.blk{position:relative;overflow:hidden}
.blk.alt{background:var(--paper2)}
.blk.glow::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;
  background:radial-gradient(ellipse 50% 40% at 50% 55%,rgba(233,160,67,.20),transparent 70%),
             radial-gradient(ellipse 35% 30% at 35% 60%,rgba(224,105,75,.16),transparent 70%),
             radial-gradient(ellipse 30% 30% at 68% 45%,rgba(178,58,46,.10),transparent 70%);
  pointer-events:none}
.blk.glow.soft::before{opacity:.4}
.eyebrow{font-size:clamp(14px,1.1vw,18px);font-weight:700;margin:0 0 10px;letter-spacing:-.005em;
  background:var(--warmtxt);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.nw{white-space:nowrap}
p.cat,.cat,.mini p.n{font-family:var(--fn)!important}
p.eyebrow,.eyebrow{font-family:var(--fn)!important;color:transparent!important}
.grad{background:var(--warmtxt);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--warmtxt);color:#fff;text-decoration:none;font-weight:700;
  font-size:clamp(15px,1.2vw,18px);padding:15px 30px;border-radius:12px;box-shadow:0 4px 10px -4px rgba(178,58,46,.35);border:0;cursor:pointer;font-family:var(--fn)}
.btn.ghost{background:#fff;color:var(--red);border:1.5px solid var(--red);box-shadow:none}
.btn.ghost:hover{background:#FBEDE9}
.btn .ext{font-size:.9em;opacity:.85}
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

/* concept-markering: wat nog niet vastligt */
.todo{display:inline-block;font-family:var(--fn);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:#7A5A2A;background:#F7F3EE;border:1px dashed #CFC6BD;border-radius:6px;padding:3px 8px;vertical-align:middle}

/* footer */
#foot{border-top:1px solid var(--line);padding:clamp(40px,6vh,72px) var(--side) clamp(28px,4vh,44px);background:#fff}
#foot .fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,60px)}
#foot .fname{font-size:clamp(18px,1.5vw,24px);font-weight:700;margin:0 0 4px}
#foot .frole{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin:0}
#foot .fline{font-family:var(--bd);font-size:15px;line-height:1.5;color:var(--ink-soft);margin:14px 0 0;max-width:34ch}
#foot .fhead{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);margin:0 0 12px}
#foot ul{list-style:none;margin:0;padding:0} #foot li{margin:0 0 9px}
#foot a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500}
#foot a:hover{color:var(--red)}
#foot .copy{border:0;background:none;padding:0;margin-left:6px;cursor:pointer;font-family:var(--fn);font-size:12px;
  color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
#foot .fbase{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(32px,5vh,56px);
  padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-soft)}

/* melding na klik op mail */
#toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:80;
  background:var(--ink);color:#fff;font-size:14px;font-weight:600;padding:12px 18px;border-radius:12px;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.4);transition:opacity .25s,transform .25s;max-width:calc(100vw - 32px);text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1000px){
  #foot .fgrid{grid-template-columns:1fr 1fr 1fr} #foot .fid{grid-column:1/-1}
}
@media (max-width:820px){
  #nav .links{display:none}
  #menuBtn{display:inline-flex}
  #nav .brand small{display:none}
}
@media (max-width:760px){
  :root{--vrit:44px;--navh:58px}
}
@media (max-width:520px){
  #foot .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:380px){
  #foot .fgrid{grid-template-columns:1fr}
  .pill{padding:7px 11px}
  #nav .brand{font-size:14px}
  #nav .right{gap:8px}
  #nav .brand{gap:8px}
}
@media (max-width:340px){
  #nav .brand{font-size:13px}
  .pill{padding:7px 9px;letter-spacing:.06em}
}