:root{--paper:#F1FAEE;--ink:#1D3557;--ink2:#2F4561;--muted:#5D7186;--line:#CFDDD9;--accent:#E63946;--steel:#457B9D;--deep:#1D3557;--frost:#A8DADC;--accent-ink:#F1FAEE;--font:Archivo,"Helvetica Neue",Arial,sans-serif;--max:1240px;--gut:clamp(20px,4vw,56px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.02em;line-height:1.1}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.c1-4{grid-column:1/5}.c5-12{grid-column:5/13}.c6-12{grid-column:6/13}.c1-5{grid-column:1/6}.c7-12{grid-column:7/13}
.s{padding:clamp(72px,9vw,128px) 0;border-top:1px solid var(--line)}
.s h2{font-size:clamp(26px,2.6vw,34px);max-width:14ch}
.lead{font-size:clamp(20px,1.6vw,23px);line-height:1.45;font-weight:500}
.small{font-size:14px;color:var(--muted)}
.body{font-size:18px;line-height:1.65;color:var(--ink2);max-width:60ch}
.body p+p{margin-top:18px}
/* header */
.top{position:absolute;top:0;left:0;right:0;z-index:5;color:#fff}
.top .wrap{display:flex;justify-content:space-between;align-items:center;height:72px}
.top a{text-decoration:none;font-weight:600;font-size:15px}
.top nav{display:flex;gap:28px}.top nav a{font-weight:500;opacity:.85}.top nav a:hover,.top nav a.on{opacity:1;text-decoration:underline;text-underline-offset:6px}
.top.dark{position:static;color:var(--ink);border-bottom:1px solid var(--line)}
/* hero */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;isolation:isolate;color:#fff}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 60%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(16,30,50,.85) 0%,rgba(16,30,50,.45) 40%,rgba(16,30,50,0) 72%),linear-gradient(to bottom,rgba(16,30,50,.35) 0%,rgba(16,30,50,0) 18%)}
.hero .wrap{padding-top:34vh;padding-bottom:clamp(40px,6vw,88px);width:100%}
.hero .kop{font-size:clamp(40px,6vw,82px);font-weight:600;letter-spacing:-0.035em;line-height:.98;max-width:12ch}
.hero .sub{margin-top:28px;font-size:clamp(18px,1.5vw,22px);max-width:46ch;line-height:1.45;opacity:.95}
.hero .rol{margin-top:14px;font-size:15px;opacity:.8}
.knop{display:inline-block;margin-top:34px;padding:14px 22px;background:#fff;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;border-radius:2px}
.knop{color:var(--deep)}.knop:hover{background:var(--accent);color:#fff}
.knop.inv{background:var(--ink);color:#fff}.knop.inv:hover{background:var(--accent)}
/* intro */
.intro .body{max-width:62ch}
/* lijsten met lijnen */
.lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lijst li{padding:18px 0;border-bottom:1px solid var(--line);font-size:18px;line-height:1.5;display:grid;grid-template-columns:40px 1fr;gap:12px}
.lijst li::before{content:counter(n,decimal-leading-zero);counter-increment:n;color:var(--muted);font-size:14px;padding-top:4px;font-variant-numeric:tabular-nums}
.lijst{counter-reset:n}
.stappen{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);counter-reset:n}
.stappen li{display:grid;grid-template-columns:40px 220px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.stappen li::before{content:counter(n,decimal-leading-zero);counter-increment:n;color:var(--muted);font-size:14px;padding-top:4px}
.stappen b{font-weight:600;font-size:19px;line-height:1.3}
.stappen p{color:var(--ink2);font-size:17px}
.stappen .meta{display:block;margin-top:8px;font-size:14px;color:var(--muted)}
.cite{font-size:clamp(21px,1.8vw,26px);line-height:1.4;font-weight:500;max-width:none;margin-top:40px;letter-spacing:-0.01em}
.claim{font-size:clamp(24px,2.4vw,34px);line-height:1.25;font-weight:600;letter-spacing:-0.02em;max-width:24ch;color:var(--steel)}
/* cases lijst */
.cl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cl li{border-bottom:1px solid var(--line)}
.cl a{display:grid;grid-template-columns:48px 1fr 2fr;gap:24px;padding:26px 0;text-decoration:none;align-items:baseline}
.cl a:hover .t{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent)}
.cl .n{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.cl .t{font-size:clamp(20px,1.7vw,24px);font-weight:600;letter-spacing:-0.015em;line-height:1.2}
.cl .m{display:block;margin-top:8px;font-size:14px;color:var(--muted)}
.cl .d{color:var(--ink2);font-size:17px;line-height:1.5}
.cl.kort a{grid-template-columns:48px 1fr}
.cl.kort .d{display:none}
.meer{display:inline-block;margin-top:28px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--ink)}
.meer:hover{color:var(--accent);border-color:var(--accent)}
.groep{margin-top:56px}.groep:first-of-type{margin-top:0}
.groep h2{font-size:15px;font-weight:600;color:var(--muted);margin-bottom:12px;max-width:none}
/* voor wie */
.nomatch{padding-top:12px}
.nomatch b{display:block;font-weight:600;margin-bottom:8px}
/* contact */
.contact{padding:clamp(80px,10vw,150px) 0;border-top:1px solid var(--line)}
.contact h2{font-size:clamp(34px,4.6vw,64px);letter-spacing:-0.03em;max-width:12ch}
.contact .body{margin-top:24px}
.contact .lines{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px 36px;font-size:17px}
.contact .lines a{text-decoration:none;border-bottom:1px solid var(--ink)}
footer{padding:28px 0 44px;font-size:13px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:inherit;text-decoration:none}
/* case pagina */
.ch{padding:clamp(56px,8vw,112px) 0 clamp(32px,4vw,56px)}
.ch .small{margin-bottom:22px}
.ch h1{font-size:clamp(34px,4.8vw,66px);letter-spacing:-0.03em;line-height:1.02;max-width:18ch}
.ch .shows{margin-top:28px;font-size:clamp(19px,1.6vw,23px);line-height:1.45;max-width:60ch;color:var(--ink2);font-weight:500}
.cb{padding:0 0 clamp(72px,9vw,120px)}
.side{position:sticky;top:32px;align-self:start}
.side dl{margin:0;border-top:1px solid var(--line)}
.side dt{font-size:13px;color:var(--muted);padding-top:14px}
.side dd{margin:4px 0 14px;font-size:16px;line-height:1.4;border-bottom:1px solid var(--line);padding-bottom:14px}
.side dd.num{font-size:26px;font-weight:600;letter-spacing:-0.02em;line-height:1.1}
.side dd.num small{display:block;font-size:14px;font-weight:400;color:var(--muted);margin-top:4px;letter-spacing:0}
.art{font-size:19px;line-height:1.7;color:var(--ink2);max-width:62ch}
.art p+p{margin-top:22px}
.art .q{font-size:clamp(24px,2.2vw,32px);line-height:1.3;font-weight:500;color:var(--ink);margin:44px 0;letter-spacing:-0.015em;max-width:26ch}
.art .kort{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.next{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:15px;font-weight:500}
.next a{text-decoration:none}.next a:hover{color:var(--accent)}
/* kleurvlakken */
.donker,.staal{--ink:#F1FAEE;--ink2:rgba(241,250,238,.86);--muted:#A8DADC;--line:rgba(241,250,238,.2);color:var(--ink);border-top:0}
.donker{background:var(--deep)}.staal{background:var(--steel);--muted:#E3F2F1;--ink2:#fff}
.donker+section,.staal+section{border-top:0}
.donker .claim,.staal .claim{color:var(--frost)}

footer.donker{color:var(--frost);border-top:1px solid rgba(241,250,238,.12)}
.vragen li::before{background:var(--accent)}
/* over mij */
.om-intro{padding-bottom:clamp(72px,9vw,120px)}
.om-intro .grid{align-items:center}
.portret{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;display:block}
.om-tekst h1{font-size:clamp(40px,5.4vw,76px)}
.qt{margin:0;padding:34px 0;border-top:1px solid var(--line)}
.qt:first-child{border-top:0;padding-top:0}
.qt blockquote{margin:0;font-size:clamp(24px,2.4vw,34px);line-height:1.25;font-weight:600;letter-spacing:-0.02em;position:relative}
.qt blockquote::before{content:"“";color:var(--accent);display:block;font-size:64px;line-height:.6;margin-bottom:10px}
.qt figcaption{margin-top:16px;font-size:16px;color:var(--ink2)}
.qt figcaption b{display:block;color:var(--frost);font-weight:600;margin-bottom:4px}
.om-hob{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:start}.hob{display:grid;gap:36px}
.hob h3{font-size:22px;margin-bottom:10px}
.hob .tn::before{content:"";display:block;width:32px;height:3px;background:var(--accent);margin-bottom:14px}
.tocht{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}
@media(max-width:860px){.om-hob{grid-template-columns:1fr}.portret{max-width:420px;margin-bottom:32px}}
.top a{white-space:nowrap}.top .wrap{gap:16px}
@media(max-width:600px){
 .top .wrap{flex-wrap:wrap;height:auto;padding-top:16px;padding-bottom:12px;row-gap:8px}
 .top .wrap>a{flex-basis:100%}
 .top nav{gap:18px;flex-wrap:wrap}.top nav a{font-size:14px}
 .hero .kop{font-size:clamp(26px,9vw,44px)}.hero{grid-template-columns:minmax(0,1fr)}
 .hero .wrap{padding-top:30vh}
}
html,body{overflow-x:hidden}
.hero .kop,.ch h1,.om-tekst h1,.thema h3{overflow-wrap:break-word;hyphens:auto}
.top nav a.on{text-decoration-color:var(--accent)}
.qt figcaption a{color:var(--frost)}
.knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}.knoppen .knop{margin-top:0}
.knop.licht{background:var(--frost);color:var(--deep)}.knop.licht:hover{background:#fff;color:var(--deep)}
.regels{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:var(--ink2);font-size:17px}
.stappen .regels li{display:block;position:relative;padding:0 0 0 20px;border:0;line-height:1.5}
.stappen .regels li::before{content:"";counter-increment:none;padding:0;position:absolute;left:0;top:.75em;width:10px;height:2px;background:var(--accent)}
.s h2.rood{color:var(--accent)}
/* muziektip */
.tip{background:var(--accent);color:#fff;padding:clamp(56px,7vw,96px) 0}
.tip-l{font-size:15px;font-weight:600;letter-spacing:.02em;padding-top:10px}
.tip h2{font-size:clamp(30px,3.6vw,52px);letter-spacing:-0.03em;max-width:none}
.tip p:not(.tip-l){margin-top:18px;font-size:clamp(18px,1.5vw,21px);line-height:1.5;max-width:56ch;font-weight:500}
.tip+.contact{border-top:0}
/* rode accenten */
.knop{background:var(--accent);color:#fff}.knop:hover{background:#fff;color:var(--deep)}
.knop.inv{background:var(--accent)}.knop.inv:hover{background:var(--deep)}
.thema .tn,.cl .n,.lijst li::before,.stappen li::before{color:var(--accent);font-weight:600}
.thema .tn::before{content:"";display:block;width:32px;height:3px;background:var(--accent);margin-bottom:14px}
.meer{border-bottom:2px solid var(--accent)}.meer:hover{color:var(--accent)}
.tc a{border-bottom-color:rgba(230,57,70,.45)}.tc a:hover{border-color:var(--accent)}
.contact .lines a{border-bottom:2px solid var(--accent)}
.next a:hover,.cl a:hover .t{color:var(--accent)}
.side dt::before{content:"";display:inline-block;width:8px;height:8px;background:var(--accent);margin-right:8px;vertical-align:1px}
.ch .small{color:var(--accent);font-weight:600}
.staal .stappen li::before{color:#fff}
/* thema's */
.thema{padding:40px 0;border-top:1px solid var(--line);margin-top:0}
#themas .grid:first-child{margin-bottom:56px}
.thema .tn{display:block;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums;margin-bottom:10px}
.thema h3{font-size:clamp(26px,2.6vw,36px);letter-spacing:-0.025em}
.thema .vak{margin-top:8px;font-size:15px;color:var(--muted)}
.vragen{list-style:none;margin:24px 0 0;padding:0}
.vragen li{padding:10px 0 10px 22px;position:relative;font-size:17px;font-weight:500;color:var(--ink)}
.vragen li::before{content:"";position:absolute;left:0;top:21px;width:10px;height:1px;background:var(--accent)}
.tc{margin-top:20px;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px}
.tc span{font-weight:600;color:var(--ink)}
.tc a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--line)}
.tc a:hover{color:var(--accent);border-color:var(--accent)}
.hero .kop{max-width:none}.hero .kop span{display:block;opacity:.75}
@media(max-width:860px){.thema .c1-4{margin-bottom:16px}}
@media(max-width:860px){
 .grid{grid-template-columns:1fr}.c1-4,.c5-12,.c6-12,.c1-5,.c7-12{grid-column:1/-1}
 .grid>h2{margin-bottom:24px}
 .hero .wrap{padding-top:40vh}.hero img{object-position:62% 60%}
 .stappen li{grid-template-columns:40px 1fr}.stappen p,.stappen .regels{grid-column:2}
 .cl a{grid-template-columns:40px 1fr}.cl .d{grid-column:2;margin-top:8px}
 .side{position:static;margin-bottom:40px}
 .top nav{gap:18px}.top nav a{font-size:14px}
 .cb .grid{row-gap:0}
}