/*
Theme Name: Marnix
Theme URI: https://marnix.nl/
Author: Marnix Pauwels
Description: Eigen, lichtgewicht thema voor marnix.nl. 1.1.0: de vormgeving van de nieuwe coachinghomepage (Newsreader, Source Sans 3, warm wit, groen en terracotta) voor de hele site, zonder pagebuilders of frameworks.
Version: 1.1.4
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marnix
*/

:root{color-scheme:light;
--bg:#FBF8F3;--paper:#FBF8F3;--cream:#F3ECE1;--band:#E5ECE2;--line:#E2D9CB;--line-band:#C9D6C5;
--ink:#1F2621;--soft:#4F5852;--rule:rgba(31,38,33,.13);
--pink:#C47A50;--pt:#9A4F2A;--hl:rgba(154,79,42,.13);--tint:rgba(196,122,80,.10);
--act:#2E4636;--act-2:#3D5B47;--sand:#F1D8B5;--err:#A3221B;
--col:12.5rem;--gap:3rem;--m:clamp(1.25rem,5.2vw,3rem);--wrap:1120px;
--serif:'Newsreader',Georgia,'Times New Roman',serif;--sans:'Source Sans 3','Segoe UI',system-ui,-apple-system,sans-serif;--mono:var(--sans);
--hd-h0:72px;--hd-h1:60px;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

*,*:before,*:after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.1rem/1.62 var(--sans);font-optical-sizing:auto;hyphens:auto;hyphenate-limit-chars:7 3 3;overflow-wrap:break-word}
@media(min-width:860px){body{font-size:1.1875rem}}
p{margin:0 0 1em;text-wrap:pretty}
a{color:inherit;text-decoration-color:var(--pink);text-decoration-thickness:1.5px;text-underline-offset:.22em}
a:hover{color:var(--pt)}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
::selection{background:var(--hl)}
.mono{font:400 .7rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.09em}
main{max-width:1120px;margin:0 auto;padding:0 var(--m)}
.view{display:none}.view.show{display:block}
section{padding:0 0 clamp(3rem,7vw,5.5rem)}
/* raster: label | tekst */
.g{display:grid;gap:.5rem;align-items:baseline}
@media(min-width:860px){.g{grid-template-columns:var(--col) minmax(0,1fr);column-gap:var(--gap)}}
.l{color:var(--pt)}
.t{max-width:31em}
.t>*:last-child{margin-bottom:0}
/* koppen */
h1{margin:0;font-weight:500;font-size:clamp(2.2rem,4.9vw,4.3rem);line-height:1.05;letter-spacing:-.022em;max-width:13.5em;text-wrap:balance}
h1 em{font-style:italic}
.k{color:var(--pt)}
h2{margin:0 0 .7rem;font-weight:600;font-size:clamp(1.4rem,2.3vw,1.8rem);line-height:1.2;letter-spacing:-.012em;text-wrap:balance}
.lead{font-size:clamp(1.2rem,1.9vw,1.4rem);line-height:1.5;max-width:28em}
.small{font-size:.9rem;color:var(--soft)}
/* home: kop, dan de zes gedachten */
.hero{padding:clamp(3rem,9vw,7.5rem) 0 clamp(2.6rem,6vw,4.6rem)}
.w{list-style:none;margin:0;padding:0}
.w li{position:relative;padding:.3rem 0;font-size:clamp(1.15rem,1.7vw,1.3rem);line-height:1.5}
.w i{display:block;font-style:normal;color:var(--pt);margin-bottom:.1rem}
@media(min-width:860px){.w i{position:absolute;right:calc(100% + 1.4rem);top:.55rem;width:var(--col);text-align:right;margin:0}}
/* verder: rijen */
.rows .g{padding:1.15rem 0 1.25rem;border-top:1px solid var(--rule);align-items:start}
.rows .g:last-child{border-bottom:1px solid var(--rule)}
.rows .l{padding-top:.35rem}
.rows .t{font-size:1rem;line-height:1.55}
@media(min-width:860px){.rows .t{font-size:1.0625rem}}
.mail{font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.2;letter-spacing:-.01em}
/* coaching */
.pick{margin:0 0 .8rem;border-top:1px solid var(--rule)}
.pick button,.pick li{display:block;width:100%;text-align:left;font:400 clamp(1.15rem,1.7vw,1.3rem)/1.4 var(--serif);color:inherit;background:none;border:0;border-bottom:1px solid var(--rule);padding:.6rem .35rem;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:background .15s}
.cta{font-size:clamp(1.2rem,1.9vw,1.4rem);text-decoration-thickness:2px}

/* boeken */
.bk{display:grid;grid-template-columns:minmax(0,1fr);row-gap:.9rem;grid-template-areas:"cv" "hd" "mr" "lk";padding-bottom:clamp(3.4rem,7vw,5.2rem)}
.bk.pos-m{grid-template-areas:"hd" "cv" "mr" "lk"}
.cover{grid-area:cv;width:var(--wm);margin:.2rem 0 .3rem;justify-self:start}
.bk.al-r .cover{justify-self:end}
.cover img{display:block;width:100%;height:auto}
.cover img.pf{mix-blend-mode:multiply}

.bk .hd{grid-area:hd;max-width:31em}.bk .mr{grid-area:mr;max-width:31em}.bk .lk{grid-area:lk;max-width:31em}
.bk .hd p{margin:0 0 .7em}.bk .hd p:last-child{margin:0}
@media(min-width:860px){
 .bk,.bk.pos-m{grid-template-columns:var(--col) minmax(0,1fr);column-gap:var(--gap);row-gap:.4rem;grid-template-areas:"cv hd" "cv mr" "cv lk";align-items:start}
 .bk .cover,.bk.al-r .cover{width:var(--w);justify-self:start;margin:.35rem 0 0}
}
.bk details{margin:.6rem 0 .4rem}
.bk summary{cursor:pointer;list-style:none;font:400 .7rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--pt)}
.bk summary::-webkit-details-marker{display:none}
.bk details[open] summary{margin-bottom:1rem}
.bk details ul{margin:0 0 1em;padding-left:1.1rem}.bk details li{margin-bottom:.3em}
.bk .q{font-style:italic}
.bk .lk p{margin:0}
/* bio */
.car{display:grid;gap:.4rem;padding-bottom:clamp(3.5rem,8vw,6rem);align-items:start}
@media(min-width:860px){.car{grid-template-columns:var(--col) minmax(0,1fr);column-gap:var(--gap)}}
.car h2{margin:.3rem 0 0}
.car .note{display:block;margin-top:.8rem;font-style:italic;color:var(--pt);font-size:.95rem;line-height:1.4}
.car .bd{max-width:31em}
.car .bd>*:last-child{margin-bottom:0}
.em{font-weight:600}

br.m3{display:none}
@media(max-width:859px){br.m3{display:inline}#home h1{white-space:nowrap}}
/* Home, desktop: het roze woord nooit afbreken en de regel na het roze woord laten eindigen (zoals de regeleinden op mobiel) */
@media(min-width:860px){#home h1 .k{hyphens:none}#home h1 .k+br.m3{display:inline}}

/* blogs */
.bq{font:400 1.1rem/1.4 var(--serif);color:var(--ink);background:none;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:.35rem 0;width:100%;outline:0}
.bq:focus{border-bottom-color:var(--pink)}
.bl{padding:0}
.bl .it{display:grid;gap:.35rem;padding:1.15rem 0 1.35rem;border-top:1px solid var(--rule);align-items:start}
.bl .it:last-child{border-bottom:1px solid var(--rule)}
.bl .it[hidden]{display:none}
.bl .dt{color:var(--soft);padding-top:.3rem}
.bl .yr{display:none}
.bl .tt{margin:0 0 .35rem;font:600 clamp(1.25rem,2vw,1.5rem)/1.25 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.bl .tt a{text-decoration:none}
.bl .tt a:hover{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:1.5px;text-underline-offset:.2em}
.bl .ex{margin:0;font-size:1rem;line-height:1.55;color:var(--soft);max-width:31em}
.bl{margin:0 auto}
.bpn{display:flex;flex-wrap:wrap;gap:.4rem 1.8rem}
@media(min-width:860px){
 .bl{max-width:1120px}
 .bl .it{grid-template-columns:var(--col) minmax(0,1fr);column-gap:var(--gap)}
 .bl .yy{display:none}
 .bl .it.ys .yr{display:block;color:var(--pt);margin-bottom:.2rem}
 .bl .dt{padding-top:.4rem}
}
@media(max-width:859px){#blogs h1{white-space:nowrap}}

/* blogpost */
.art p{font-size:1.125rem;line-height:1.65;margin:0 0 1.1em}
.art{max-width:30em}
.art .lead,.art>p:first-child{font-size:clamp(1.3rem,2vw,1.5rem);line-height:1.45;margin-bottom:1.2em}
.art .lead strong,.art>p:first-child strong{font-weight:600}
.pm{display:flex;flex-direction:row;gap:.3rem 1.5rem;flex-wrap:wrap}
.pm a{color:var(--pt);text-decoration:none}
.pm a:hover{text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:.2em}
.pm time{color:var(--soft)}
.cats{display:flex;flex-wrap:wrap;gap:.45rem 1.15rem}
.cats a{color:var(--soft);text-decoration:none;border-bottom:1px solid transparent}
.cats a:hover{color:var(--ink);border-bottom-color:var(--pink)}
@media(min-width:860px){.art p{font-size:1.25rem}.pm{flex-direction:column;gap:.5rem}}
@media(max-width:859px){.art p{font-size:1.05rem;line-height:1.6;margin-bottom:1.2375rem}.art .lead,.art>p:first-child{font-size:1.2rem;margin-bottom:1.56rem}}

/* interviews */
.ivs{display:grid;gap:0;padding-bottom:clamp(1rem,3vw,2rem)}
@media(min-width:860px){.ivs{grid-template-columns:var(--col) minmax(0,1fr);column-gap:var(--gap)}.ivs>.sh{grid-column:1;align-self:start;position:static;margin:0 0 3rem}.ivs>.iv{grid-column:1/-1}}
.sh{margin:0 0 2.2rem;font:400 .7rem/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.iv{display:grid;gap:.5rem 0;grid-template-columns:minmax(0,1fr);grid-template-areas:"tt" "im" "tx";padding-bottom:clamp(2.8rem,6vw,4.4rem)}
.iv .tt{grid-area:tt;margin:0 0 .3rem;font-weight:600;font-size:clamp(1.4rem,2.3vw,1.8rem);line-height:1.2;letter-spacing:-.012em;text-wrap:balance;max-width:20em}
.iv .tx{grid-area:tx;max-width:31em}
.iv .tx p{margin:0 0 .85em}
.iv .tx .ld{font-size:clamp(1.15rem,1.7vw,1.3rem);line-height:1.45}
.iv .tx .lkx{margin:.2rem 0 0}
.iv .im{grid-area:im;margin:.3rem 0 .6rem;width:min(var(--wm,13rem),100%)}
.iv .im a{display:block}
.iv .im img{display:block;width:100%;height:auto}
@media(min-width:860px){
 .iv{grid-template-columns:var(--col) minmax(0,1fr);column-gap:var(--gap);grid-template-areas:"im tt" "im tx";align-items:start}
 .iv:not(.has){grid-template-areas:". tt" ". tx"}
 .iv .im{width:var(--w,12.5rem);margin:.4rem 0 0}
}
@media(max-width:859px){
 #interviews .g .lead{font-size:1.05rem;line-height:1.6}
 #interviews .iv .tx p{font-size:1.05rem;line-height:1.6}
 #interviews .iv .tx p:not(.lkx){margin-bottom:.935rem}
 #interviews .iv .tx p.ld{font-size:1.2rem;line-height:1.45}
}

/* cursus */
.ldx{font-size:clamp(1.2rem,1.9vw,1.4rem);font-weight:600;line-height:1.4;max-width:28em}
.wa .t>h2{margin-bottom:.9rem}
.wb .l{align-self:start}
.prop{margin:.2rem 0 .8rem;width:6.5rem}
.prop img{display:block;width:100%;height:auto;mix-blend-mode:multiply}

.cl{display:grid;grid-template-columns:minmax(0,1fr);padding-bottom:clamp(3rem,7vw,5rem)}
.cl>.sh{margin:0 0 1.6rem;font:400 .7rem/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.cs{display:grid;grid-template-columns:2.2rem minmax(0,1fr);column-gap:.6rem;padding:1.05rem 0 1.15rem;border-top:1px solid var(--rule);align-items:baseline}
.cl .cs:last-child{border-bottom:1px solid var(--rule)}
.cs .no{color:var(--pt)}
.cs .tt{margin:0;font:600 clamp(1.3rem,2.1vw,1.7rem)/1.2 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.cs .ct{margin:.35rem 0 0}
.cs .pl{color:var(--pt);text-decoration:none;border-bottom:1px solid var(--pink)}
.cs .pl:hover{color:var(--ink)}
.cs .pn{grid-column:1/-1;margin-top:1.1rem}
.vw{position:relative;aspect-ratio:16/9;max-width:36em;background:rgba(127,127,127,.12)}
.vw iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nx{margin:.8rem 0 0}
.nx a{color:var(--pt);text-decoration:none}
.nx a:hover{color:var(--ink)}
/* audio: soberder */
.cs.au{border-top:0;border-bottom:0;padding:.4rem 0}
.cs.au:first-of-type{border-top:0}
.cl .cs.au:last-child{border-bottom:0}
.cs.au .tt{font:400 1.05rem/1.5 var(--serif);letter-spacing:0}
.cs.au .bd{display:flex;flex-wrap:wrap;gap:.1rem 1.4rem;align-items:baseline}
@media(min-width:860px){
 .cl{grid-template-columns:var(--col) minmax(0,1fr);column-gap:var(--gap)}
 .cl>.sh{grid-column:1;align-self:start;margin:0 0 2rem}
 .cl>.cs{grid-column:1/-1;grid-template-columns:var(--col) minmax(0,1fr);column-gap:var(--gap)}
 .cs .pn{grid-column:2}
 .cs.au .tt{font-size:1.1rem}
}
@media(max-width:859px){
 #cursus .t p:not(.lead):not(.ldx){font-size:1.05rem;line-height:1.6}
 #cursus .ldx{font-size:1.2rem;line-height:1.45}
 #cursus .cs.au .tt{font-size:1.05rem}
}

/* contact */
@media(min-width:860px){.gc{grid-template-columns:var(--col) minmax(0,31em) minmax(0,1fr)}}
.pt{margin:1.2rem 0 0;width:6.5rem}
.pt img{display:block;width:100%;height:auto}
@media(min-width:860px){.pt{margin:.3rem 0 0;width:100%;max-width:9rem;justify-self:end}}
@media(max-width:859px){#contact .t p:not(.lead){font-size:1.05rem;line-height:1.6}}
.formw{padding:clamp(.5rem,2vw,1.5rem) 0 clamp(3rem,7vw,5rem)}
.shf{margin:0 0 1.8rem;font:400 .7rem/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.fm{display:grid;gap:0}
.fr{display:grid;grid-template-columns:minmax(0,1fr);gap:.1rem;padding:0 0 1.7rem}
.fr label{color:var(--pt)}
.fr input,.fr textarea{font:400 1.05rem/1.5 var(--serif);color:var(--ink);background:none;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:.4rem 0 .45rem;width:100%;outline:0;-webkit-appearance:none;appearance:none;resize:none}
.fr textarea{overflow:hidden;min-height:2.6rem}
.fr input:focus,.fr textarea:focus{border-bottom:2px solid var(--pink);padding-bottom:calc(.45rem - 1px)}
.fr input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 1000px var(--bg) inset}
.fr input:user-invalid,.fr textarea:user-invalid{border-bottom-color:var(--pt)}
.sb{font:600 clamp(1.3rem,2vw,1.5rem)/1.2 var(--serif);color:var(--ink);background:none;border:0;border-bottom:2px solid var(--pink);border-radius:0;padding:.1rem 0;cursor:pointer;letter-spacing:-.01em}
.sb:hover{color:var(--pt)}
.fs{padding-top:.8rem}
@media(min-width:860px){
 .fr{grid-template-columns:var(--col) minmax(0,31em);column-gap:var(--gap);align-items:baseline;padding-bottom:1.9rem}
 .fr input,.fr textarea{font-size:1.2rem}
}
.pt img{mix-blend-mode:multiply}

@media(min-width:860px){.gc .pt{align-self:start}}

/* english */
.cup{margin:.2rem 0 .8rem;width:6rem}
.cup img{display:block;width:100%;height:auto;mix-blend-mode:multiply}

.enx{padding:clamp(1rem,3vw,2rem) 0 clamp(3rem,7vw,5rem)}
#english .enx .iv{padding-bottom:0}
@media(max-width:859px){#english .sp{padding-top:.2rem!important}}
@media(max-width:859px){
 #english .t p:not(.lead),#english .iv .tx p{font-size:1.05rem;line-height:1.6}
}
.cup img{mix-blend-mode:normal}
@media(min-width:860px){#english .cup{width:7.5rem;margin-bottom:-3.9rem}}


/* experiment: één grote schoen */
.shoe{padding:clamp(.5rem,2vw,1.5rem) 0 clamp(3rem,6vw,5rem)}
.shoe img{display:block;width:100%;height:auto}

@media(min-width:860px){.shoe img{width:min(56rem,62vw);margin-left:calc(var(--m) * -1)}}
@media(max-width:859px){.shoe img{width:calc(100% + 2 * var(--m));margin-left:calc(var(--m) * -1);max-width:none}}

/* hero-illustratie Home */
.blower{padding:0 0 clamp(.5rem,2vw,1.5rem);margin-top:-1.4rem}
.blower img{display:block;width:100%;height:auto}
@media(min-width:860px){.blower{margin-top:-2.4rem}.blower img{width:min(48rem,64vw);margin-left:max(-4rem,calc(var(--m) * -1))}}
@media(max-width:859px){.blower img{width:calc(100% + 2 * var(--m));margin-left:calc(var(--m) * -1);max-width:none}}
/* naar boven: groter raakvlak, safe-area, niet over formulierveld */

/* naar boven: klein, rechthoekig, dun kader, alleen een chevron */
.up{--ln:rgba(31,38,33,.42);position:fixed;right:calc(8px + env(safe-area-inset-right,0px));bottom:calc(1.4rem + env(safe-area-inset-bottom,0px));z-index:20;width:48px;height:48px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:0;color:var(--ink);cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.up .upb{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--ln);box-sizing:border-box;transition:border-color .2s}
.up.on{opacity:1;visibility:visible}
.up.ov{opacity:0;visibility:hidden}
.up:hover .upb{border-color:var(--ink)}
.up:focus-visible{outline:2px solid var(--pink);outline-offset:-2px}

@media(prefers-reduced-motion:reduce){.up,.up .upb{transition:none}}

/* ==== WordPress-aanvullingen (geen herontwerp) ==== */
.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.fb{margin:0;color:var(--pt)}
.bq{-webkit-appearance:none;appearance:none}
.bq::-webkit-search-cancel-button,.bq::-webkit-search-decoration{-webkit-appearance:none}
/* artikel: openingsalinea (eerste alinea) semibold, ook zonder <strong> */
.art>p:first-child{font-weight:600}
/* artikel: robuust voor Gutenberg en oude inhoud */
.art h2,.art h3,.art h4{margin:1.8em 0 .6em;font-weight:600;line-height:1.2;letter-spacing:-.012em;text-wrap:balance}
.art h2{font-size:clamp(1.4rem,2.3vw,1.8rem)}
.art h3{font-size:1.3rem}
.art h4{font-size:1.1rem}
.art ul,.art ol{margin:0 0 1.1em;padding-left:1.2em;font-size:1.125rem;line-height:1.65}
.art li{margin-bottom:.35em}
.art blockquote{margin:1.6em 0;padding:0 0 0 1.2rem;font-style:italic}
.art blockquote p{margin-bottom:.6em}
.art img,.art video,.art iframe,.art embed{max-width:100%;height:auto}
.art figure{margin:1.6em 0}
.art figcaption{margin-top:.4rem;font-size:.9rem;color:var(--soft)}
.art table{display:block;max-width:100%;overflow-x:auto}
.art pre{overflow-x:auto}
.art pre,.art code{font-family:var(--mono);font-size:.9em}
.art hr{border:0;border-top:1px solid var(--rule);margin:2em 0}
.art .alignleft,.art .alignright{float:none;margin:1.2em 0}
.art .aligncenter{margin-left:auto;margin-right:auto}
.art>*:last-child{margin-bottom:0}
@media(min-width:860px){.art ul,.art ol{font-size:1.25rem}}
@media(max-width:859px){.art ul,.art ol{font-size:1.05rem;line-height:1.6}}
.wp-block-embed iframe{max-width:100%}

/* Interviews: rustig monochroom met een subtiele warme tint (1.1.0: terracotta in plaats van roze); bij hover (desktop) vloeiend naar de originele kleuren.
   Alleen op de pagina Interviews (#interviews); de originele bestanden blijven ongewijzigd. */
#interviews .iv .im img{filter:grayscale(1) sepia(.22) saturate(1.15);transition:filter .45s ease}
@media(hover:hover) and (pointer:fine){#interviews .iv .im:hover img{filter:none}}
@media(prefers-reduced-motion:reduce){#interviews .iv .im img{transition:none}}

/* Coaching: vetgedrukte tekst uit de bewerkbare velden krijgt hetzelfde gewicht als in het ontwerp */
#coaching .t strong,#coaching .t b{font-weight:600}

/* Interviews: halfvette regel uit de bewerkbare tekst (was <span class="em">) */
#interviews .iv .tx b{font-weight:600}

/* Cursus: audio-speler (gewoon <audio>) onder de rij */
.cs .pn audio{display:block;width:100%;max-width:36em}

/* Bio: vet uit de bewerkbare tekst is halfvet (zoals de bestaande .em); geldt ook voor links met vet eromheen */
#bio .bd b,#bio .bd strong{font-weight:600}

/* Boeken: vet uit de bewerkbare tekst is halfvet (zoals de bestaande .em) */
#boeken .bk b,#boeken .bk strong{font-weight:600}

/* Home: vet uit de bewerkbare tekst is halfvet (zoals op de andere pagina's) */
#home .t strong,#home .t b{font-weight:600}
/* Home: een kop zonder roze woord heeft op mobiel geen vaste regeleinden en mag dus doorlopen (anders loopt hij buiten beeld) */
#home h1.hm-vrij{white-space:normal}

/* English: vet uit de bewerkbare tekst is halfvet (zoals de bestaande strong/.em in het ontwerp) */
#english .t strong,#english .t b,#english .tx strong,#english .tx b{font-weight:600}

/* ==== Themapagina's: Heerlijk helder leven (#hhl), Een leven zonder angst (#angst), Hoe vind ik rust? (#rust) en Verslaafd aan de top (#verslaafd) — inc/themapagina.php ====
   Alles hieronder geldt alleen binnen #hhl, #angst, #rust en #verslaafd. Raster (.g), letters, kleuren, .lead, .mono, h2 en links komen uit de rest van dit bestand.
   Eerst de gedeelde opmaak, daarna per pagina de plaatsing van de beelden. */
html:has(#hhl,#angst,#rust,#verslaafd){overflow-x:hidden}
:is(#hhl,#angst,#rust,#verslaafd) section{padding:0}
:is(#hhl,#angst,#rust,#verslaafd) h1,:is(#hhl,#angst,#rust,#verslaafd) h2,:is(#hhl,#angst,#rust,#verslaafd) .q,:is(#hhl,#angst,#rust,#verslaafd) .state,:is(#hhl,#angst,#rust,#verslaafd) .hhl-sub{hyphens:manual}
:is(#hhl,#angst,#rust,#verslaafd) .m{color:var(--pt)}
:is(#hhl,#angst,#rust,#verslaafd) .t{max-width:none}
:is(#hhl,#angst,#rust,#verslaafd) .hhl-body{max-width:31em;margin-top:clamp(.55rem,1.2vw,1.05rem)}
:is(#hhl,#angst,#rust,#verslaafd) .hhl-body>*:last-child{margin-bottom:0}
@media(min-width:860px){:is(#hhl,#angst,#rust,#verslaafd) .hhl-body{font-size:1.25rem}}
/* hero */
:is(#hhl,#angst,#rust,#verslaafd) .hhl-hero{padding-top:clamp(5rem,10.5vw,9.375rem)}
:is(#hhl,#angst,#rust,#verslaafd) .hhl-hero h1{font-weight:500;font-size:clamp(3.5rem,8.5vw,6.75rem);line-height:.98;letter-spacing:-.025em;max-width:none;text-wrap:wrap}
#hhl .hhl-sub{margin:clamp(1.375rem,2.1vw,1.875rem) 0 0;font-size:clamp(1.4375rem,2.6vw,2.125rem);line-height:1.22;max-width:24em}
#hhl .hhl-intro{margin-top:clamp(2.5rem,4.9vw,4.375rem)}
:is(#hhl,#angst,#rust,#verslaafd) .hhl-intro .hhl-body{margin-top:0}
:is(#hhl,#angst,#rust,#verslaafd) .hhl-mail{margin:1.5rem 0 0}
:is(#hhl,#angst,#rust,#verslaafd) .hhl-mail .cta{font-weight:600}
/* hoofdstukken: label | cursieve vraag, kop, tekst */
:is(#hhl,#angst,#rust,#verslaafd) .hhl-s{position:relative;padding-top:clamp(8.125rem,14.6vw,13.125rem)}
:is(#hhl,#angst,#rust,#verslaafd) .q{margin:0;font-style:italic;font-weight:400;font-size:clamp(2rem,3.4vw,3rem);line-height:1.13;letter-spacing:-.01em;max-width:17em;text-wrap:balance}
:is(#hhl,#angst,#rust,#verslaafd) .q.s{font-size:clamp(1.625rem,2.6vw,2.25rem);max-width:none;margin:.6em 0 .7em}
:is(#hhl,#angst,#rust,#verslaafd) .t>h2{margin:clamp(2.9rem,4.7vw,4.25rem) 0 .7rem;max-width:21em}
:is(#hhl,#angst,#rust,#verslaafd) .t>h2.first{margin-top:0}
:is(#hhl,#angst,#rust,#verslaafd) .hhl-marnix .t>h2{font-weight:500;font-size:clamp(2rem,2.8vw,2.5rem);line-height:1.12}
:is(#hhl,#angst,#rust,#verslaafd) .strong{font-weight:600}
:is(#hhl,#angst,#rust,#verslaafd) .state{font-weight:500;font-size:clamp(1.4375rem,2vw,1.75rem);line-height:1.3;margin:1.15em 0 .8em}
:is(#hhl,#angst,#rust,#verslaafd) .lines span{display:block;padding:.1em 0}
:is(#hhl,#angst,#rust,#verslaafd) .list{list-style:none;margin:0 0 1em;padding:0;border-top:1px solid var(--rule);font-style:italic}
:is(#hhl,#angst,#rust,#verslaafd) .list li{border-bottom:1px solid var(--rule);padding:.6em .2em}
:is(#hhl,#angst,#rust,#verslaafd) strong,:is(#hhl,#angst,#rust,#verslaafd) b{font-weight:600}
/* even belangrijk */
:is(#hhl,#angst,#rust,#verslaafd) .hhl-veilig{padding-top:clamp(6.25rem,9.7vw,8.75rem)}
:is(#hhl,#angst,#rust,#verslaafd) .hhl-veilig .g{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:clamp(1.6rem,2.4vw,2.1rem) 0 clamp(1.9rem,2.6vw,2.4rem)}
:is(#hhl,#angst,#rust,#verslaafd) .hhl-veilig h2.l{margin:0}
:is(#hhl,#angst,#rust,#verslaafd) .hhl-veilig .t{max-width:31em;font-size:1.0625rem;line-height:1.65}
:is(#hhl,#angst,#rust,#verslaafd) .hhl-veilig .t>*:last-child{margin-bottom:0}
@media(min-width:860px){:is(#hhl,#angst,#rust,#verslaafd) .hhl-veilig .t{font-size:1.1875rem}}
/* slot */
:is(#hhl,#angst,#rust,#verslaafd) .hhl-slot{padding:clamp(8.125rem,13.9vw,12.5rem) 0}
:is(#hhl,#angst,#rust,#verslaafd) .hhl-slot .t>h2{margin:0 0 clamp(1.75rem,2.8vw,2.5rem);font-weight:500;font-size:clamp(2.375rem,4.6vw,4rem);line-height:1.05;letter-spacing:-.02em;max-width:12em}
/* beelden: vrijstaand, de lichte achtergrond van het beeld valt weg tegen de pagina */
:is(#hhl,#angst,#rust,#verslaafd) .hhl-img{display:block;height:auto;max-width:none;mix-blend-mode:darken;pointer-events:none}
#hhl .hhl-magneet,#hhl .hhl-theezakje,#hhl .hhl-rolfluit{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);mask-composite:intersect}

/* Heerlijk helder leven — telefoon en tablet (tot 1180px): beelden in de witruimte tussen de hoofdstukken en in de tekststroom */
#hhl .hhl-magneet{width:min(18.5625rem,76%);margin:.625rem calc(-1 * var(--m)) 0 auto}
#hhl .hhl-theezakje{position:absolute;top:.625rem;right:calc(-1 * var(--m));width:9.6875rem}
#hhl .hhl-portret{width:min(16.25rem,75%);margin:.25rem calc(10px - var(--m)) 1.25rem auto}
#hhl .hhl-rolfluit{position:absolute;top:100%;left:calc(-1 * var(--m) - 22px);width:12.5rem}
@media(min-width:860px){
 #hhl .hhl-magneet{width:100%;max-width:38.125rem;margin:2.125rem max(-100px,-7vw,calc(-1 * var(--m) - max(0px,(100vw - 1120px) / 2))) 0 auto}
}
/* Heerlijk helder leven — desktop (vanaf 1180px): theezakje en portret rechts naast de tekst, rolfluit deels onder de tekstkolom */
@media(min-width:1180px){
 #hhl .hhl-body{position:relative}
 #hhl .hhl-theezakje{top:-2.3rem;right:auto;left:calc(100% + .9rem);width:min(16.875rem,calc((100vw - 1120px) / 2 + 190px))}
 #hhl .hhl-portret{position:absolute;left:calc(100% + .75rem);margin:0;width:min(21.875rem,calc((100vw - 1120px) / 2 + 190px));transform:translateY(-17.5rem)}
 #hhl .hhl-rolfluit{top:calc(100% - 2rem);left:1.5rem;width:25rem}
}

/* Een leven zonder angst — eigen typografische momenten */
#angst .hhl-sub{margin:clamp(1.375rem,2.1vw,1.875rem) 0 0;font-size:clamp(1.4375rem,2.6vw,2.125rem);line-height:1.22;max-width:21em}
#angst .hhl-intro{margin-top:.9rem}
#angst .tp-trap{margin-top:clamp(2.4rem,3.4vw,3.4rem);font-weight:500;font-size:clamp(1.75rem,2.3vw,2.25rem);line-height:1.15;hyphens:manual}
#angst .tp-trap p{margin:0}
#angst .tp-trap .trap-2{margin:.15em 0 0 1.2em}
#angst .tp-trap .trap-3{margin:.55em 0 0 2.1em}
#angst .tp-trap .klein{font-size:clamp(1.1rem,1.3vw,1.25rem);font-weight:400;line-height:1.5;max-width:22em}
#angst .tp-trap+.hhl-body{margin-top:clamp(2.2rem,3vw,3rem)}
#angst .state.xl{font-size:clamp(1.75rem,2.3vw,2.25rem);margin:.3em 0 .7em}
#angst .state.sm{font-size:clamp(1.2rem,1.4vw,1.35rem);letter-spacing:.01em}
#angst .strong+.state{margin-top:.2em}
#angst .sub{margin-top:1.4rem}
#angst .hhl-zelf{padding-top:clamp(6.25rem,9.7vw,8.75rem)}
@media(min-width:860px){#angst .tp-trap .trap-2{margin-left:1.6em}#angst .tp-trap .trap-3{margin-left:3.2em}}
/* Een leven zonder angst — beelden. Noodknop: alleen het rechterdeel van het beeld (40–100%) is zichtbaar, via een omhullend vak. */
#angst .hhl-noodknop,#angst .hhl-helm,#angst .hhl-shuttle{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);mask-composite:intersect}
#angst .hhl-noodknop{width:226px;height:320px;overflow:hidden;margin:0 calc(-1 * var(--m)) 1.6rem auto}
#angst .hhl-noodknop img{display:block;width:480px;height:320px;max-width:none;margin-left:-192px}
#angst .hhl-helm{position:absolute;top:.9rem;left:calc(-1 * var(--m) + 4px);width:190px}
#angst .hhl-portret{width:min(250px,75%);margin:.2rem 0 1.1rem -10px}
#angst .hhl-shuttle{position:absolute;top:calc(100% + 1.4rem);right:calc(-1 * var(--m));width:150px}

/* desktop (vanaf 1180px): noodknop rechts naast de openingstekst, helm rechts naast de tekst, portret links in de witruimte, shuttle klein rechts.
   Van noodknop en helm wordt alleen het lege papier aan de rechterkant weggesneden, zodat niets buiten het scherm valt. */

@media(min-width:1180px){
 #angst .hhl-intro{margin-top:6.5rem}
 #angst .hhl-intro .hhl-body,#angst .hhl-normaal .hhl-body,#angst .hhl-endan .hhl-body{position:relative}
 #angst .hhl-noodknop{--w:min(740px,calc((50vw - 362px) / .48));position:absolute;left:calc(100% + 4px);top:calc(var(--w) * -.173);margin:0;width:calc(var(--w) * .48);height:calc(var(--w) * .6667)}
 #angst .hhl-noodknop img{width:var(--w);height:calc(var(--w) * .6667);margin-left:calc(var(--w) * -.4)}
 #angst .hhl-helm{--w:min(380px,calc((50vw - 366px) / .75));top:18.2rem;left:calc(100% + .6rem);width:calc(var(--w) * .75);height:calc(var(--w) * .6667);object-fit:cover;object-position:0 50%}
 #angst .hhl-portret{position:absolute;top:calc(clamp(8.125rem,14.6vw,13.125rem) + 8.375rem);left:max(-152px,calc(8px - (100vw - 1120px) / 2 - 48px));margin:0;width:min(330px,calc(266px + (100vw - 1120px) / 2 - max(8px,(100vw - 1120px) / 2 - 104px)))}
 #angst .hhl-shuttle{top:auto;right:auto;left:calc(100% + 3.6rem);margin-top:-100px;width:min(200px,calc((50vw - 434px) / .94))}
}
/* header van de themapagina's: naam + "marnix.nl →" (header.php) */
/* Hoe vind ik rust? en Verslaafd aan de top — typografie volgens de goedgekeurde ontwerpen (compacter ritme dan de eerste twee pagina's).
   Regels met :is(#rust,#verslaafd) gelden voor beide; #rust of #verslaafd alleen voor die pagina. */
:is(#rust,#verslaafd) .hhl-hero{position:relative;padding-top:clamp(4.5rem,10.5vw,9.375rem)}
:is(#rust,#verslaafd) .hhl-hero h1{font-size:clamp(3.75rem,8.5vw,6.75rem)}
:is(#rust,#verslaafd) .hhl-sub{margin:clamp(1.3rem,2.1vw,1.875rem) 0 0;font-size:clamp(1.5rem,2.6vw,2.125rem);line-height:1.22;max-width:21em}
:is(#rust,#verslaafd) .hhl-intro{margin-top:1.2rem}
#rust .hhl-intro .lines{font-size:clamp(1.2rem,1.9vw,1.4rem);line-height:1.5}
#rust .hhl-intro .state{margin-top:1.9em}
:is(#rust,#verslaafd) .state{text-wrap:balance}
:is(#rust,#verslaafd) .hhl-s{padding-top:clamp(6.25rem,10.6vw,9.5rem)}
#rust .hhl-ruimte,#rust .hhl-samen{padding-top:clamp(7.5rem,13.4vw,12rem)}
:is(#rust,#verslaafd) .q+.hhl-body{margin-top:clamp(1.4rem,2.2vw,2rem)}
:is(#rust,#verslaafd) .hhl-body>.state:first-child{margin-top:0}
:is(#rust,#verslaafd) .q.s{font-size:clamp(1.35rem,1.9vw,1.6rem);line-height:1.3;margin:1.3em 0 .5em}
#rust .hhl-ruimte .t>h2{margin:0;font-weight:500;font-size:clamp(2.25rem,3.6vw,3.25rem);line-height:1.08;letter-spacing:-.02em;max-width:13em}
#rust .hhl-ruimte .t>h2+.hhl-body{margin-top:clamp(1.6rem,2.4vw,2.2rem)}
#rust .hhl-ruimte .lines+.state{margin:2.2em 0 1.8em}
:is(#rust,#verslaafd) .sub{margin-top:1.4rem}
#rust .hhl-slot{padding:4.25rem 0 clamp(6.5rem,11vw,10rem)}
:is(#rust,#verslaafd) .hhl-slot .t>h2{font-size:clamp(2.5rem,4.6vw,4rem)}
@media(max-width:859px){
 :is(#rust,#verslaafd) .hhl-hero h1{line-height:1.02}
 :is(#rust,#verslaafd) .sub a{display:inline-block;padding:.4rem 0}
}
@media(min-width:860px){
 #rust .hhl-ruimte .lines+.state{margin:2.6em 0 2.2em}
 #rust .hhl-slot{padding-top:clamp(6.25rem,10.6vw,9.5rem)}
}
/* Hoe vind ik rust? — beelden. Van beide beelden valt alleen lege papierrand weg (omhullend vak); het hele voorwerp blijft zichtbaar.
   Boeddha: telefoon en tablet tussen ondertitel en openingstekst (rechts), desktop (vanaf 1180px) rechts naast kop en ondertitel.
   Strandstoel: bij het slot; telefoon vlak boven label en kop, vanaf 860px in de linkerkolom onder het label. */
#rust .hhl-boeddha,#rust .hhl-strandstoel{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);mask-composite:intersect}
#rust .hhl-boeddha img,#rust .hhl-strandstoel img{display:block;max-width:none}
#rust .hhl-boeddha{--w:clamp(286px,34vw,360px);width:var(--w);height:calc(var(--w) * .82203);margin:.9rem -14px 0 auto}
#rust .hhl-boeddha img{width:calc(var(--w) * 1.30169);height:calc(var(--w) * .8678);margin:calc(var(--w) * -.033898) 0 0 calc(var(--w) * -.025424)}
#rust .hhl-strandstoel{--w:236px;width:var(--w);height:calc(var(--w) * .74219);margin:0 0 .7rem -12px}
#rust .hhl-strandstoel img{width:calc(var(--w) * 1.2);height:calc(var(--w) * .8);margin:calc(var(--w) * -.039063) 0 0 calc(var(--w) * -.0625)}
#rust .hhl-slot-l{display:flex;flex-direction:column-reverse;align-items:flex-start}
@media(min-width:860px){
 #rust .hhl-slot-l{flex-direction:column;align-self:start;padding-top:.55rem}
 #rust .hhl-strandstoel{--w:232px;margin:1.6rem 0 0 -12px}
}
@media(min-width:1180px){
 #rust .hhl-intro{margin-top:8.5rem}
 #rust .hhl-boeddha{--w:min(520px,36.11vw);position:absolute;top:1.6rem;right:calc(-1 * min(158px,var(--m) + max(0px,(100vw - 1120px) / 2) - 40px));margin:0}
}

/* Verslaafd aan de top — eigen momenten */
#verslaafd .state:has(+.state){margin-bottom:.1em}
#verslaafd .state+.state{margin-top:0}
#verslaafd .hhl-sub{text-wrap:balance}
#verslaafd .hhl-body>.state:last-child{margin-bottom:.8em}
@media(max-width:859px){
 #verslaafd .g{row-gap:.9rem}
 #verslaafd .hhl-intro>.l{display:none}
}
#verslaafd .hhl-oplossen,#verslaafd .hhl-kanten{padding-top:clamp(7.5rem,13.4vw,12rem)}
#verslaafd .hhl-oplossen .t>h2{margin:0;font-weight:500;font-size:clamp(2.25rem,3.6vw,3.25rem);line-height:1.08;letter-spacing:-.02em;max-width:13em}
#verslaafd .hhl-oplossen .t>h2+.hhl-body{margin-top:clamp(1.6rem,2.4vw,2.2rem)}
#verslaafd .hhl-oplossen .lines{font-size:clamp(1.2rem,1.9vw,1.4rem);line-height:1.5}
#verslaafd .hhl-veilig{padding-top:clamp(5rem,8.3vw,7.5rem)}
#verslaafd .hhl-slot{padding:clamp(5.5rem,8.9vw,8rem) 0 clamp(6.5rem,11vw,10rem)}
/* Verslaafd aan de top — de rozet. Alleen lege papierrand valt weg (omhullend vak); het hele voorwerp blijft zichtbaar.
   Telefoon en tablet: onder de ondertitel, rechts. Desktop (vanaf 1180px): rechts naast kop en ondertitel, met ruimte na het roze woord. */
#verslaafd .hhl-rozet{--w:clamp(176px,19vw,210px);width:var(--w);height:calc(var(--w) * 1.3012);margin:1rem -4px 0 auto;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);mask-composite:intersect}
#verslaafd .hhl-rozet img{display:block;max-width:none;width:calc(var(--w) * 1.51084);height:calc(var(--w) * 1.51084);margin:calc(var(--w) * -.114458) 0 0 calc(var(--w) * -.325301)}
#verslaafd .hhl-intro{margin-top:1.2rem}
@media(min-width:1180px){
 #verslaafd .hhl-intro{margin-top:5.5rem}
 #verslaafd .hhl-rozet{--w:256px;position:absolute;top:8.6rem;right:calc(-1 * min(92px,var(--m) + max(0px,(100vw - 1120px) / 2) - 40px));margin:0}
}

/* ==== De mier en de vlinder (#mier) — inc/mier.php: hoofdpagina (template-parts/pages/mier.php) en verhalen (single-mier_verhaal.php) ====
   Eén smalle, gecentreerde kolom als een klein verhalenboek; geen raster met kantlijnlabels. */
html:has(#mier){overflow-x:hidden}
#mier section,#mier article{padding:0}
#mier .mier-hero{padding-top:clamp(2rem,3.9vw,3.5rem);text-align:center}
#mier .mier-hek{--w:clamp(330px,39vw,560px);width:var(--w);max-width:100%;height:calc(var(--w) * .37458);margin:0 auto;overflow:hidden;pointer-events:none;mix-blend-mode:darken;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 90%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 90%,transparent 100%);mask-composite:intersect}
#mier .mier-hek img{display:block;max-width:none;width:calc(var(--w) * 1.02742);height:calc(var(--w) * .68495);margin:calc(var(--w) * -.207358) 0 0 calc(var(--w) * -.013378)}
#mier .mier-title{margin:clamp(.6rem,1vw,.9rem) auto 0;max-width:none;text-align:center;font-weight:500;font-size:clamp(3.1rem,6.3vw,5.25rem);line-height:1;letter-spacing:-.025em;text-wrap:balance;hyphens:manual}
#mier .mier-sub{margin:.75rem 0 0;text-align:center;font-style:italic;font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.3;color:var(--soft)}
#mier .mier-story,#mier .mier-list{max-width:34rem;margin-left:auto;margin-right:auto}
#mier .mier-featured{padding-top:clamp(3.4rem,5.3vw,4.75rem)}
#mier .mier-story h2,#mier .mier-story h1{margin:0 0 2.4rem;max-width:none;font-weight:500;line-height:1.05;letter-spacing:-.015em;text-wrap:balance;hyphens:manual}
#mier .mier-story h2{font-size:clamp(2.1rem,3.06vw,2.75rem)}
#mier .mier-story h2 a{text-decoration:none}
#mier .mier-story h1{font-size:clamp(2.6rem,5vw,4.5rem);letter-spacing:-.025em}
#mier .mier-tx{font-size:clamp(1.25rem,1.67vw,1.5rem);line-height:1.6}
#mier .mier-tx p{margin:0 0 1.05em;text-wrap:pretty}
#mier .mier-tx>*:last-child{margin-bottom:0}
#mier .mier-tx em,#mier .mier-tx i{font-style:italic}
#mier .mier-more{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:3.2rem}
#mier .mier-more a{display:inline-block;padding:.35rem 0}
#mier .mier-list{padding:clamp(5rem,7.8vw,7rem) 0}
#mier .mier-list>h2{margin:0 0 1.2rem;font-weight:500;font-size:clamp(1.45rem,2.3vw,1.8rem);letter-spacing:-.012em}
#mier .mier-list-first{padding-top:clamp(3.4rem,5.3vw,4.75rem)}
#mier .list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
#mier .list li{border-bottom:1px solid var(--rule)}
#mier .list a{display:block;padding:1.15rem 0 1.25rem;text-decoration:none}
#mier .list .t{display:block;font-weight:500;font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.25}
#mier .list .o{display:block;margin-top:.3rem;font-style:italic;color:var(--soft);line-height:1.5}
#mier .list a:hover .t{color:var(--pt)}
#mier .mier-pages{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:2rem}
#mier .mier-pages a{display:inline-block;padding:.35rem 0;color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:1.5px;text-underline-offset:.22em;border-bottom:0}
#mier .mier-pages a:hover{color:var(--pt)}
#mier .mier-pages .next{margin-left:auto}
/* vervolgpagina's van de lijst: bescheiden rubriektitel en teruglink, geen hekje of uitgelicht verhaaltje */
#mier .mier-head{max-width:34rem;margin:0 auto;padding-top:clamp(3rem,6.1vw,5.5rem)}
#mier .mier-head .mier-back{margin-bottom:clamp(2rem,3.5vw,3rem)}
#mier .mier-rubriek{margin:0;max-width:none;font-weight:500;font-size:clamp(2.1rem,3.06vw,2.75rem);line-height:1.05;letter-spacing:-.015em}
#mier.mier-paged .mier-list{padding-top:clamp(2.4rem,4vw,3.5rem)}
#mier.mier-single .mier-story{padding:clamp(3rem,6.1vw,5.5rem) 0 clamp(5rem,7.8vw,7rem)}
#mier .mier-back{margin:0 0 clamp(3rem,5vw,4.5rem)}
#mier .mier-back a{color:var(--soft);text-decoration:none;border-bottom:1px solid var(--pink);display:inline-block;padding:.2rem 0}
@media(min-width:860px){
 #mier.mier-single .mier-story h1{margin-bottom:3.75rem}
 /* desktop: bredere kolom voor het verhaaltje (uitgelicht en los); de lijst blijft 34rem */
 #mier .mier-story{max-width:40rem}
 /* desktop: het slot van het verhaaltje laten uitklinken vóór de links eronder */
 #mier .mier-more{margin-top:5rem}
}
#mier>.mier-featured:last-child,#mier>.mier-hero:last-child{padding-bottom:clamp(5rem,7.8vw,7rem)}

/* ==== Boeken: geïllustreerde boeken (1.0.30) ====
   Elke afbeelding bevat witruimte en een zachte schaduw. --bl/--br/--bt/--bb = waar het boek zelf in de afbeelding staat (fracties),
   --ar = hoogte/breedte van de afbeelding. --w (desktop) en --wm (mobiel) zijn de zichtbare breedte van het BOEK, niet van het bestand.
   De afbeelding wordt zo geschaald dat het boek die breedte krijgt; de witruimte valt weg in de marge (negatieve marges), zonder bijsnijden.
   --sl = linkerrand van de schaduw: op mobiel schuift het boek zo nodig iets naar rechts (--so), zodat de schaduw nooit tegen de schermrand wordt afgesneden. */
html:has(#boeken){overflow-x:hidden}
@media(max-width:859px){main:has(#boeken){overflow-x:clip}} /* mobiel: de witruimte van de afbeeldingen mag tot de schermrand lopen, maar nooit horizontaal scrollen. Niet vanaf 860px: daar sneed deze rand (met het papierfilter, op scherpe schermen) het boek af dat in de marge hangt; html:has(#boeken) voorkomt daar het scrollen. */
/* het papier van de afbeelding (±253,253,250) precies wit maken, zodat het via multiply exact de paginakleur krijgt; het boek zelf verandert onmerkbaar (2,5%) */
/* 1.0.31: geen mix-blend-mode meer (Safari op iPhone mengt niet met de paginakleur, waardoor een licht vlak zichtbaar bleef).
   Een SVG-filter in de pagina (#marnix-papier, zie marnix_bk_page_html) doet hetzelfde als 'multiply op de paginakleur', maar op de afbeelding zelf:
   eerst 2,5% lichter (papier wordt precies wit), dan per kleurkanaal vermenigvuldigd met #fbfaf6. Papier = exact de paginakleur; covers en schaduwen
   krijgen dezelfde, nauwelijks merkbare tint als in het goedgekeurde voorstel. Werkt zonder achterliggende laag, dus in elke browser gelijk. */
#boeken .bk.has-ins .cover img.pf{mix-blend-mode:normal;filter:url(#marnix-papier)}
/* de witruimte van de afbeelding mag onder de tekst doorlopen: tekst altijd erboven */
#boeken .bk.has-ins>.hd,#boeken .bk.has-ins>.mr,#boeken .bk.has-ins>.lk{position:relative;z-index:1}
#boeken .bk.has-ins .cover{--vw0:min(var(--wm),calc(100vw - 2 * var(--m)));--so:max(0px,calc(var(--vw0) / (var(--br) - var(--bl)) * (var(--bl) - var(--sl)) - var(--m) + 4px));--vw:min(var(--wm),calc(100vw - 2 * var(--m) - var(--so)));--iw:calc(var(--vw) / (var(--br) - var(--bl)));--ih:calc(var(--iw) * var(--ar));width:var(--iw);max-width:none;justify-self:start;margin:calc(var(--ih) * var(--bt) * -1 + .2rem) 0 calc(var(--ih) * (1 - var(--bb)) * -1 + .5rem) calc(var(--iw) * var(--bl) * -1 + var(--so))}
/* zachte rand (--fl/--fr/--ft/--fb in %) zodat de rand van het papier nergens zichtbaar wordt; nooit breder dan de witruimte naast het boek */
#boeken .bk.has-ins .cover img{width:100%;height:auto;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 calc(var(--fl,5) * 1%),#000 calc(100% - var(--fr,5) * 1%),transparent 100%),linear-gradient(to bottom,transparent 0,#000 calc(var(--ft,4) * 1%),#000 calc(100% - var(--fb,4) * 1%),transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 calc(var(--fl,5) * 1%),#000 calc(100% - var(--fr,5) * 1%),transparent 100%),linear-gradient(to bottom,transparent 0,#000 calc(var(--ft,4) * 1%),#000 calc(100% - var(--fb,4) * 1%),transparent 100%);mask-composite:intersect}
#boeken .bk.has-ins.nm .cover img{-webkit-mask-image:none;mask-image:none}
/* mobiel, rechts uitgelijnd (instelling per boek): rechterkant van het boek op de tekstrand */
@media(max-width:859px){#boeken .bk.has-ins.al-r .cover{--so:0px;justify-self:end;margin-left:0;margin-right:calc(var(--iw) * (1 - var(--br)) * -1)}}
/* tablet (860–1279px): boek boven de tekst, uitgelijnd op de tekstkolom; desktopformaat */
@media(min-width:860px) and (max-width:1279px){
 #boeken .bk.has-ins{grid-template-columns:minmax(0,1fr);grid-template-areas:"cv" "hd" "mr" "lk";row-gap:.9rem;padding-left:calc(var(--col) + var(--gap))}
 #boeken .bk.has-ins .cover{--vw:min(var(--w),calc(100vw - 2 * var(--m) - var(--col) - var(--gap)));justify-self:start;margin:calc(var(--ih) * var(--bt) * -1 + .2rem) 0 calc(var(--ih) * (1 - var(--bb)) * -1 + .5rem) calc(var(--iw) * var(--bl) * -1)}
}
/* desktop (vanaf 1280px): boek links naast de tekst; de rechterkant van het boek lijnt uit op de labelkolom, de witruimte valt in de marge */
@media(min-width:1280px){
 #boeken .bk.has-ins .cover{--vw:min(var(--w),calc(var(--col) + max(0px,(100vw - 1120px) / 2) + var(--m) - 1.5rem));justify-self:end;margin:calc(var(--ih) * var(--bt) * -1 + .35rem) calc(var(--iw) * (1 - var(--br)) * -1) calc(var(--ih) * (1 - var(--bb)) * -1) 0}
}

/* ==== Ontwaken is kut (#ontwaken) — inc/ontwaken-data.php (pagina /non-dualiteit/) ====
   Alles hieronder geldt alleen binnen #ontwaken. Raster (.g), letters, kleuren, .lead, .mono en links komen uit de rest van dit bestand.
   Vaste ritmiek: alinea's staan 1,3rem uit elkaar (op elk scherm gelijk); uitsmijters hebben royalere, onderling gelijke ruimte erboven en eronder. */
#ontwaken h1,#ontwaken h2,#ontwaken .ow-dag,#ontwaken .ow-pull,#ontwaken .ow-mm b,#ontwaken .ow-een b,#ontwaken .ow-re{hyphens:manual}
#ontwaken section{padding:0 0 clamp(3.4rem,7.5vw,6rem)}
/* kop + warme regel */
#ontwaken .ow-hero{padding:clamp(3.4rem,10vw,8.4rem) 0 clamp(3rem,6vw,5rem)}
#ontwaken .ow-hero h1{max-width:none;margin:0;font-weight:500;font-size:clamp(2.7rem,8.6vw,7.4rem);line-height:.98;letter-spacing:-.03em;text-wrap:balance}
#ontwaken .ow-hero h1 .k{color:var(--pt);font-style:italic}
#ontwaken .ow-sub{margin:clamp(1.2rem,2.6vw,2rem) 0 0;display:flex;align-items:baseline;gap:.9rem;max-width:none;font-style:italic;font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.4;color:var(--soft)}
#ontwaken .ow-sub:before{content:"";flex:none;width:2.4rem;height:2px;background:var(--pink);transform:translateY(-.3em)}
/* tekst */
#ontwaken .g{row-gap:.7rem}
#ontwaken .t p{margin:0 0 1.3rem}
#ontwaken .t>*:last-child{margin-bottom:0}
#ontwaken .t h2{margin:0 0 1.3rem;font-weight:600;font-size:clamp(1.75rem,3.1vw,2.6rem);line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
#ontwaken .t .lead{max-width:none;font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.48}
#ontwaken .t .q{font-style:italic;font-weight:500;font-size:clamp(1.25rem,1.9vw,1.45rem);line-height:1.4}
#ontwaken .t .stil{color:var(--soft)}
#ontwaken .t strong,#ontwaken .t b{font-weight:600}
#ontwaken .t .ow-een b,#ontwaken .t .ow-mm b{font-weight:500}
#ontwaken .t .list{margin:0 0 1.3rem;padding-left:1.1rem}
/* uitsmijters: elk met een eigen vorm; gelijke ruimte erboven en eronder */
#ontwaken .ow-dag{margin:clamp(1.8rem,4vw,2.8rem) 0;font-weight:500;font-style:italic;font-size:clamp(2.2rem,5.4vw,4.3rem);line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
#ontwaken .ow-dag i{font-style:normal;color:var(--pink)}
#ontwaken .t .ow-stamp{display:block;width:fit-content;max-width:100%;margin:clamp(1.8rem,3.4vw,2.4rem) 0 clamp(1.8rem,3.4vw,2.4rem) .2rem;padding:.55rem .95rem .5rem;border:2px solid var(--pt);outline:1px solid var(--pt);outline-offset:3px;border-radius:3px;color:var(--pt);font:400 .82rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.14em;transform:rotate(-2deg);background:rgba(196,122,80,.07)}
#ontwaken .ow-een{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1.2rem;margin:clamp(1.8rem,3.4vw,2.4rem) 0}
#ontwaken .ow-een b{font-style:italic;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.05;letter-spacing:-.02em}
#ontwaken .ow-een .mono{color:var(--soft)}
#ontwaken .ow-mm{display:block;width:fit-content;max-width:100%;margin:clamp(1.8rem,3.4vw,2.4rem) 0}
#ontwaken .ow-mm b{display:block;font-style:italic;font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.1;letter-spacing:-.015em}
#ontwaken .ow-mm i{display:block;height:15px;margin-top:.55rem;border-top:1px solid var(--ink);background:repeating-linear-gradient(90deg,rgba(31,38,33,.55) 0 1px,transparent 1px 3.78px) 0 0/100% 6px no-repeat,repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 37.8px) 0 0/100% 15px no-repeat}
/* slotzin: bescheiden, zodat hij niet concurreert met de volgende kop */
#ontwaken .t .ow-pull{margin:clamp(1.8rem,3.4vw,2.4rem) 0 0;font-weight:500;font-size:clamp(1.25rem,1.9vw,1.45rem);line-height:1.4;text-wrap:balance}
/* keerpunt: roze vlak over de volle breedte (zonder horizontaal scrollen), grote kop, zachte reactie */
#ontwaken .ow-band{background:var(--tint);box-shadow:0 0 0 100vmax var(--tint);clip-path:inset(0 -100vmax);padding:clamp(3rem,6.5vw,5.5rem) 0;margin:0 0 clamp(3.4rem,7.5vw,6rem)}
#ontwaken .ow-band .t h2{margin:0;font-weight:500;font-size:clamp(2.5rem,6.4vw,5.2rem);line-height:1;letter-spacing:-.03em}
#ontwaken .t .ow-re{margin:clamp(.9rem,1.8vw,1.4rem) 0 clamp(1.6rem,3vw,2.4rem) clamp(0rem,2.2vw,2rem);display:flex;align-items:baseline;gap:.8rem;font-style:italic;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.25;color:var(--pt);letter-spacing:-.01em;text-wrap:balance}
#ontwaken .ow-re:before{content:"";flex:none;width:1.6rem;height:2px;background:var(--pink);transform:translateY(-.25em)}
@media(max-width:859px){#ontwaken .t .ow-stamp{transform:rotate(-1.5deg)}#ontwaken .t .ow-re{margin-left:0}}
/* slot */
#ontwaken .ow-slot{border-top:1px solid var(--rule);padding-top:clamp(3rem,6vw,5rem)}
#ontwaken .ow-slot a.cta{display:inline-block;margin-top:.6rem;font-weight:600;font-size:clamp(1.6rem,3.2vw,2.3rem);letter-spacing:-.02em;text-decoration-thickness:2px}
#ontwaken .ow-slot a.cta .ow-bij{font-size:.6em;font-weight:400;letter-spacing:0}

/* =====================================================================================================================
   1.1.0 — vormgeving van de nieuwe coachinghomepage voor de hele site
   Newsreader voor koppen, uitgelichte zinnen en verhalen; Source Sans 3 voor lopende tekst, labels en knoppen.
   Warm wit, groen (#2E4636) voor knoppen, terracotta (#9A4F2A) voor labels en kleine accenten.
   De indeling (raster, maten, boekafmetingen, beelden) van de bestaande pagina's is ongewijzigd.
   ===================================================================================================================== */

/* ---- basis ---- */
html{scroll-padding-top:calc(var(--hd-h1) + 18px)}
body.hd-simpel{--hd-h1:0px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media(min-width:860px){body{font-size:1.125rem}}
h1,h2,h3,h4,.lead,.ldx,.mail,.w li,.q,.state{font-family:var(--serif)}
h1{font-weight:500}
h2{font-weight:500;letter-spacing:-.01em}
.lead{line-height:1.45}
.mono{font:700 .74rem/1.45 var(--sans);text-transform:uppercase;letter-spacing:.12em}
a{text-decoration-color:var(--pink);text-decoration-thickness:1.5px}
a:hover{color:var(--pt)}
:focus-visible{outline:3px solid var(--pt);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none}
.skip:focus{left:12px}
.ic{width:1.05em;height:1.05em;flex:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--m)}
main{max-width:var(--wrap)}
body.home main{max-width:none;padding:0}
.hero{padding:clamp(2.6rem,7vw,6rem) 0 clamp(2.4rem,5vw,4.2rem)}
.hero h1{letter-spacing:-.02em}
.l{color:var(--pt)}

/* knoppen en links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font:600 1rem/1.15 var(--sans);min-height:44px;padding:.85em 1.4em;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s;text-align:center}
.btn .ic{transition:transform .2s}
.btn:hover .ic{transform:translateX(3px)}
.btn-primary{background:var(--act);color:#fff}
.btn-primary:hover{background:var(--act-2);color:#fff}
.btn-small{min-height:40px;padding:.6em 1.1em;font-size:.95rem}
.btn[disabled]{opacity:.65;cursor:progress}
.link-arrow{font:600 1rem/1.4 var(--sans);color:var(--act);text-decoration:none;border-bottom:2px solid var(--line-band);padding-bottom:2px}
.link-arrow:hover{color:var(--act);border-color:var(--act)}
.eyebrow{display:block;margin:0 0 .9rem;font:700 .78rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--pt)}
@media(prefers-reduced-motion:reduce){.btn,.btn .ic{transition:none}}

/* ---- header: vaste balk, compacter na scrollen ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,248,243,.97);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.site-header.scrolled{border-color:var(--line);box-shadow:0 8px 24px -20px rgba(20,20,20,.45)}
.site-header.hd-tp{position:static;background:none}
.bar{display:flex;align-items:center;gap:20px;height:var(--hd-h0);transition:height .2s}
.site-header.scrolled .bar{height:var(--hd-h1)}
.brand{display:flex;flex-direction:column;flex-shrink:0;line-height:1.15;text-decoration:none;margin-right:auto;color:var(--ink)}
.brand b{font:600 1.32rem/1.15 var(--serif);white-space:nowrap;transition:font-size .2s}
.brand span{font-size:.82rem;color:var(--soft);white-space:nowrap;margin-top:2px}
.brand:hover{color:var(--ink)}
.hd-site{font:600 .95rem/1.4 var(--sans);color:var(--act);text-decoration:none;border-bottom:2px solid var(--line-band);white-space:nowrap}
.hd-site:hover{color:var(--act);border-color:var(--act)}
.primary ul{list-style:none;margin:0;padding:0}
.primary a,.more-btn{font:400 1rem/1.2 var(--sans);color:var(--ink);text-decoration:none}
.menu-toggle,.nav-cta-m{display:none}
.bar-cta{white-space:nowrap}
@media(min-width:1024px){
 .primary #menu{display:flex;align-items:center;gap:2px}
 .primary #menu>li>a,.more-btn{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 11px;border-radius:999px;background:none;border:0;cursor:pointer}
 .primary #menu>li>a:hover,.more-btn:hover{background:#EEF2EC;color:var(--ink)}
 .primary #menu>li>a[aria-current="page"]{background:var(--band);font-weight:600}
 .nav-english{margin-left:8px;padding-left:10px;border-left:1px solid var(--line)}
 .nav-more{position:relative;display:none}
 .more-btn .ic{width:16px;height:16px;transition:transform .2s}
 .more-btn[aria-expanded="true"] .ic{transform:rotate(180deg)}
 .more-list{position:absolute;top:calc(100% + 6px);left:0;min-width:190px;list-style:none;margin:0;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px -18px rgba(20,20,20,.4)}
 .more-list a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px}
 .more-list a:hover,.more-list a[aria-current="page"]{background:var(--band)}
}
@media(min-width:1024px) and (max-width:1279px){.nav-more{display:block}.primary #menu>li.in-more{display:none}}
@media(min-width:1024px) and (max-width:1199px){.site-header:not(.hd-tp) .brand span{display:none}}
@media(max-width:1023px){
 :root{--hd-h0:64px;--hd-h1:54px}
 .bar{gap:10px}
 .menu-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 14px;font:600 1rem var(--sans);color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:999px;cursor:pointer}
 .menu-toggle .bars{position:relative;width:18px;height:12px}
 .menu-toggle .bars::before,.menu-toggle .bars::after,.menu-toggle .bars i{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px}
 .menu-toggle .bars::before{top:0}.menu-toggle .bars i{top:5px}.menu-toggle .bars::after{bottom:0}
 .bar-cta{min-height:44px;padding:.6em 1em;font-size:.95rem}
 .nav-more{display:none}
 .primary #menu{display:none;position:fixed;left:0;right:0;top:calc(var(--hd-h0) + 1px);bottom:0;overflow:auto;flex-direction:column;padding:16px var(--m) 32px;background:var(--paper);border-top:1px solid var(--line)}
 .site-header.scrolled .primary #menu{top:calc(var(--hd-h1) + 1px)}
 .primary #menu.open{display:flex}
 .primary #menu>li{order:3}
 .primary #menu>li>a{display:flex;align-items:center;min-height:48px;padding:0 4px;border-bottom:1px solid var(--line);font-size:1.12rem}
 .primary #menu>li>a[aria-current="page"]{font-weight:700}
 .primary #menu>li.nav-cta-m{display:block;order:0;margin-bottom:10px}
 .primary #menu>li.nav-cta-m a{width:100%;border-bottom:0;color:#fff;justify-content:center}
 .primary #menu>li.nav-coaching{order:1}.primary #menu>li.nav-contact{order:2;margin-bottom:18px}
 .primary #menu>li.nav-english{order:9;margin-top:18px}
 body.menu-open{overflow:hidden}
 .site-header.open{background:var(--paper)}
 .site-header.scrolled .brand span{display:none}
 .site-header.scrolled .brand b{font-size:1.12rem}
}
@media(max-width:599px){.bar-cta{display:none}}
@media(max-width:380px){.site-header:not(.hd-tp) .brand span{display:none}}
@media(prefers-reduced-motion:reduce){.bar,.brand b,.site-header{transition:none}}

/* ---- footer ---- */
.site-footer{margin-top:clamp(2rem,5vw,4rem);background:#263B2D;color:#D9DED7;padding:clamp(40px,5vw,64px) 0 28px}
body.home .site-footer{margin-top:0}
.site-footer .brand{color:#fff}.site-footer .brand b{color:#fff}.site-footer .brand span{color:#B9C4B8}
.site-footer .btn-primary{background:var(--sand);color:#2a2018}
.site-footer .btn-primary:hover{background:#f7e5cc;color:#2a2018}
.site-footer :focus-visible{outline-color:var(--sand)}
.foot{display:grid;grid-template-columns:1.2fr 2fr;gap:32px 48px}
.foot-brand{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.foot-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.foot-nav ul{list-style:none;margin:0;padding:0}
.foot-nav a{display:inline-flex;align-items:center;min-height:36px;color:#EEF1EC;text-decoration:none}
.foot-nav a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--sand)}
.foot-h{margin:0 0 6px;font:700 .76rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#B9C4B8}
.foot-legal{grid-column:1/-1;margin:8px 0 0;font-size:.9rem;color:#B9C4B8}
.foot-simpel{padding:24px 0}
.foot-s{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.95rem}
.foot-s a{color:#EEF1EC;text-decoration-color:var(--sand)}
@media(max-width:760px){.foot{grid-template-columns:1fr}.foot-nav{grid-template-columns:1fr 1fr}.foot-nav a{min-height:44px}}
.up .upb{background:var(--paper)}
.up:focus-visible{outline:3px solid var(--pt)}

/* ---- homepage (#home.vp) ---- */
.vp section{padding:0}
.vp .wrap{max-width:var(--wrap)}
.vp-section{padding:clamp(52px,6vw,84px) 0!important}
.vp h1,#home.vp h1{max-width:none;white-space:normal}
.vp h2{margin:0 0 1rem;font-weight:500;font-size:clamp(2rem,2.6vw + 1rem,3rem);line-height:1.1;max-width:none}
.vp h3{margin:0 0 .8rem;font-weight:500;font-size:clamp(1.5rem,1vw + 1.1rem,1.9rem);line-height:1.15}
.vp p{max-width:40rem}
.vp-lead{font:400 clamp(1.3rem,.7vw + 1.05rem,1.6rem)/1.38 var(--serif);color:var(--ink)}
.vp-split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,80px);align-items:start}
@media(max-width:880px){.vp-split{grid-template-columns:1fr;gap:18px}}
/* opening: de foto staat in haar eigen verhouding (1672:941), even hoog als de header en rechts verankerd;
   zo wordt ze op brede schermen nooit in de hoogte bijgesneden. Mobiel: de goedgekeurde uitsnede en hoogte. */
.vp-hero{position:relative;overflow:hidden;background:var(--paper)}
.vp-hero-media img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
@media(min-width:881px){
 .vp-hero-media{position:absolute;top:0;bottom:0;right:0;height:100%;aspect-ratio:1672/941;max-width:100%}
 .vp-hero-media img{object-position:right 30%}
 .vp-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 0%,rgba(251,248,243,.88) 14%,rgba(251,248,243,.4) 30%,rgba(251,248,243,0) 44%)}
 .vp-hero-inner{position:relative;min-height:clamp(560px,40vw,720px);display:flex;align-items:center;padding-top:40px;padding-bottom:48px}
 .vp-hero-text{max-width:33rem}
}
@media(min-width:881px) and (max-width:1279px){
 .vp-hero-text{max-width:29rem}
 .vp-hero-media::after{background:linear-gradient(90deg,var(--paper) 0%,rgba(251,248,243,.92) 38%,rgba(251,248,243,.6) 50%,rgba(251,248,243,0) 62%)}
}
@media(max-width:880px){
 .vp-hero-media{position:relative;aspect-ratio:4/3.4;max-height:62vh;width:100%}
 .vp-hero-media img{object-position:72% 20%}
 .vp-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(251,248,243,0) 70%,var(--paper) 100%)}
 .vp-hero-inner{padding-top:8px;padding-bottom:48px}
 .vp-actions .btn{flex:1 1 auto}
}
.vp-hero h1{margin:0 0 1.3rem;font-weight:500;font-size:clamp(2.6rem,3.6vw + 1rem,4.4rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.vp-hero h1 em{color:var(--act)}
.vp-hero-lead{font-size:1.12em}
.vp-hero-sub{color:var(--soft)}
.vp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:1.8rem}
/* herkenning: één lijst met dunne lijnen en een klein terracotta streepje */
.vp-situations{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.vp-situations li{position:relative;padding:15px 0 15px 30px;border-bottom:1px solid var(--line);font:400 clamp(1.15rem,.5vw + 1rem,1.35rem)/1.35 var(--serif)}
.vp-situations li::before{content:"";position:absolute;left:0;top:calc(15px + .68em);width:14px;height:2px;border-radius:1px;background:var(--pt)}
.vp-tired{margin:1.4rem 0 0;font:italic 400 clamp(1.2rem,.6vw + 1rem,1.45rem)/1.4 var(--serif);color:var(--act)}
.vp-start{margin-top:clamp(24px,3vw,36px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line)}
.vp-start p{margin:0;max-width:34rem}
.vp-start strong{font-weight:600}
/* werkwijze: één doorlopende tekstkolom naast de kop */
.vp-band{background:var(--band)}
@media(min-width:881px){.vp-sticky{position:sticky;top:calc(var(--hd-h1) + 32px)}}
.vp-conv{max-width:40rem}
.vp-conv .vp-lead{margin:0 0 1.1rem}
.vp-step{margin:0;padding:14px 0;border-top:1px solid var(--line-band)}
.vp-step:last-of-type{border-bottom:1px solid var(--line-band)}
.vp-conv strong{font-weight:600;color:var(--act)}
.vp-close{margin:1.6rem 0 0;padding-left:20px;border-left:3px solid var(--pt);font:400 clamp(1.25rem,.7vw + 1.05rem,1.55rem)/1.35 var(--serif);color:var(--act)}
/* gedachten */
.vp-moments{list-style:none;margin:1.2rem 0;padding:0}
.vp-moments li{position:relative;padding:12px 0 12px 28px;border-top:1px solid var(--line);font:400 clamp(1.15rem,.4vw + 1rem,1.3rem)/1.35 var(--serif)}
.vp-moments li:last-child{border-bottom:1px solid var(--line)}
.vp-moments li::before{content:"";position:absolute;left:0;top:calc(12px + .68em);width:14px;height:2px;background:var(--pt)}
/* over mij */
.vp-about{background:var(--cream)}
.vp-about-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,72px);align-items:center}
.vp-portrait{margin:0;overflow:hidden;aspect-ratio:4/5;border-radius:14px}
.vp-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:73% 40%}
@media(max-width:880px){.vp-about-grid{grid-template-columns:1fr}.vp-portrait{max-width:420px;aspect-ratio:1/1}}
/* praktisch */
.vp-prac{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,5vw,80px);align-items:start}
.vp-offer{border-top:3px solid var(--act);padding-top:20px}
.vp-offer-intro{border-top-color:var(--pt)}
.vp-offer h2{max-width:18ch}
.vp-price{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;margin:1.2rem 0 1rem;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:40rem}
.vp-price-l{font-weight:600}
.vp-price-l small{display:block;font-weight:400;color:var(--soft);font-size:.9rem}
.vp-price-v{font:400 clamp(1.7rem,1vw + 1.3rem,2.2rem)/1 var(--serif);color:var(--act)}
.vp-note{color:var(--soft)}
.vp-note a{color:var(--act);font-weight:600;text-decoration-color:var(--line-band);text-decoration-thickness:2px;text-underline-offset:.2em}
@media(max-width:880px){.vp-prac{grid-template-columns:1fr}.vp-offer-intro .btn{width:100%}}
/* kennismaken */
.vp-contact{background:var(--act);color:#F4F1EA}
.vp-contact h2{color:#fff}
.vp-contact .eyebrow{color:var(--sand)}
.vp-contact .vp-main p{color:#EAE6DD}
.vp-ct-lead{font-size:1.15em;color:#fff!important}
.vp-contact-intro{margin-bottom:clamp(24px,3vw,36px)}
.vp-contact :focus-visible{outline-color:var(--sand)}
.vp-form{scroll-margin-top:calc(var(--hd-h1) + 16px)}
.vp-form .kz,.vp-form .kz-done{background:var(--paper);color:var(--ink);border-radius:14px;padding:clamp(22px,3.2vw,40px);max-width:820px}
.vp-form .kz :focus-visible{outline-color:var(--pt)}

/* ---- kennismakingsformulier (home en Contact) ---- */
.kz{max-width:820px}
.kz-row{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.kz-field{margin:0 0 22px}
.kz-field fieldset{border:0;margin:0;padding:0;min-width:0}
.kz-field>label,.kz-field legend{display:block;margin:0 0 7px;padding:0;font:600 1rem/1.35 var(--sans);color:var(--ink)}
.kz-hint{font-weight:400;color:var(--soft);font-size:.92rem}
.kz input[type=text],.kz input[type=email],.kz input[type=tel],.kz textarea{width:100%;font:400 1.05rem/1.4 var(--sans);color:var(--ink);background:#fff;padding:12px 14px;border:1.5px solid #B8AE9F;border-radius:10px;-webkit-appearance:none;appearance:none}
.kz textarea{min-height:120px;resize:vertical}
.kz input:focus,.kz textarea:focus{outline:none;border-color:var(--act);box-shadow:0 0 0 3px rgba(46,70,54,.18)}
.kz [aria-invalid="true"]{border-color:var(--err)!important}
.kz-error{display:block;margin-top:6px;color:var(--err);font:600 .95rem/1.35 var(--sans)}
.kz-error:empty{display:none}
.kz-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kz-choice{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border:1.5px solid #CFC6B8;border-radius:10px;background:#fff;cursor:pointer;font-weight:500;line-height:1.3}
.kz-choice:hover{border-color:var(--act)}
.kz-choice input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--act)}
.kz-choice:has(input:checked){border-color:var(--act);background:var(--band)}
.kz-choice:has(input:focus-visible){outline:3px solid var(--pt);outline-offset:2px}
.kz-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:8px}
.kz-onder{margin:0;max-width:28rem;color:var(--soft);font-size:.95rem}
.kz-status{margin:18px 0 0;padding:12px 16px;border-radius:10px;font:400 1rem/1.45 var(--sans)}
.kz-status:empty{display:none}
.kz-status.is-error{background:#F8E7E3;color:#7E1A14;margin:0 0 22px}
#kz-live.is-error{margin:18px 0 0}
.kz-done{max-width:820px;outline:none}
.kz-done-t{margin:0 0 .6rem;font:400 clamp(1.3rem,.7vw + 1.05rem,1.6rem)/1.38 var(--serif);color:var(--act)}
.kz-done-s{margin:0}
.kz-done-s a{color:var(--act);font-weight:600}
@media(max-width:640px){.kz-row,.kz-choices{grid-template-columns:1fr}.kz-foot .btn{width:100%}}

/* ---- Contact ---- */
#contact .formw{scroll-margin-top:calc(var(--hd-h1) + 16px)}
#contact .formw .shf{margin:.35rem 0 0;font:700 .74rem/1.45 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--pt)}
#contact .kz-wrap{max-width:none}
#contact .kz,#contact .kz-done{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(20px,3vw,34px)}

/* ---- Coaching ---- */
.pick{border-top:1px solid var(--line)}
.pick button,.pick li{position:relative;font:400 clamp(1.15rem,.5vw + 1rem,1.35rem)/1.35 var(--serif);border-bottom:1px solid var(--line);padding:.7rem .4rem .7rem 30px}
.pick button::before,.pick li::before{content:"";position:absolute;left:2px;top:calc(.7rem + .68em);width:14px;height:2px;background:var(--pt)}
#coaching .co-cta{margin-top:1.8rem}
#coaching .t>h2{margin-top:.2rem}

/* ---- Bio ---- */
.car h2{font-weight:500;font-size:clamp(1.55rem,1.2vw + 1.1rem,2rem)}
.car .note{color:var(--pt)}
#bio .bio-mail a{font-weight:600}

/* ---- Blogs en berichten: rustige leesbreedte, duidelijke openingsalinea ---- */
.bl .tt{font-family:var(--serif);font-weight:500}
.bl .ex{color:var(--soft)}
.art{max-width:34em}
.art p{font-size:1.125rem;line-height:1.7}
@media(min-width:860px){.art p,.art ul,.art ol{font-size:1.1875rem}}
.art>p:first-child,.art .lead{font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,1.2vw + .95rem,1.5rem);line-height:1.42}
.art>p:first-child strong,.art .lead strong{font-weight:600}
.art h2,.art h3,.art h4{font-family:var(--serif);font-weight:500}
.art blockquote{border-left:3px solid var(--pt);padding-left:1.1rem;font-family:var(--serif);font-size:1.15em}
.art .has-medium-font-size{font-size:inherit}

/* ---- Cursus en Interviews ---- */
.cs .tt,.iv .tt{font-weight:500}
.cs .pl{border-bottom-color:var(--pink)}
.ldx{font-weight:500}

/* ---- leesvormen die bij een verhaal horen: verhaaltjes en themapagina's in Newsreader ---- */
#mier,#hhl,#angst,#rust,#verslaafd,#ontwaken{font-family:var(--serif)}
#mier .mier-tx{font-size:clamp(1.2rem,1.4vw,1.4rem)}
:is(#hhl,#angst,#rust,#verslaafd) .hhl-mail .cta,#ontwaken .ow-slot a.cta{color:var(--act);text-decoration-color:var(--line-band)}
#ontwaken .ow-hero h1 .k{color:var(--pt)}

/* =====================================================================================================================
   1.1.1
   ===================================================================================================================== */

/* ---- koppen: nooit automatisch afbreken; ze lopen door tussen hele woorden ---- */
h1,h2,h3,h4,.tt,.kz-done-t,.pick li,.q,.state{-webkit-hyphens:manual;hyphens:manual}
#blogs h1{white-space:normal}
/* tekstkolom mag nooit breder worden dan het scherm (ook niet door een lange URL of oude Divi-code) */
.g>.t{min-width:0}

/* ---- Bio: opening met foto (zoals Richting 1) ---- */
#bio .bio-hero{padding-bottom:clamp(2.6rem,5.5vw,4.6rem)}
.bio-hg{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.6rem,5vw,4.5rem);align-items:center}
.bio-ht .eyebrow{margin-bottom:1rem}
.bio-ht h1{font-size:clamp(2.4rem,3.4vw + 1rem,4.2rem);margin:0 0 1.2rem;max-width:none}
.bio-ht .lead{margin:0 0 .7rem;max-width:26em;font-size:clamp(1.25rem,.7vw + 1.05rem,1.55rem);line-height:1.4}
.bio-ht .small{margin:0}
.bio-foto{margin:0;overflow:hidden;aspect-ratio:4/5;border-radius:14px;background:var(--band)}
.bio-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:73% 40%}
@media(min-width:860px){.bio-hg{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.bio-hero-zf .bio-hg{grid-template-columns:minmax(0,1fr)}}
@media(max-width:859px){.bio-foto{aspect-ratio:1/1;max-width:420px}}

/* ---- Bio: de schoen ongeveer 20% kleiner, helemaal in beeld ---- */
@media(min-width:860px){.shoe img{width:min(44.8rem,49.6vw)}}
@media(max-width:859px){.shoe img{width:calc((100% + 2 * var(--m)) * .8);margin-left:calc(var(--m) * -1 + (100% + 2 * var(--m)) * .1)}}

/* ---- Contact: inleiding sluit direct aan op het formulier ---- */
#contact .ct-intro{padding-bottom:clamp(1.4rem,3vw,2.2rem)}
#contact .ct-intro .t{max-width:34em}
#contact .formw{padding-top:0}


/* =====================================================================================================================
   1.1.3
   ===================================================================================================================== */

/* ---- Coaching: de herkenningsregels zijn een gewone lijst (geen klikwerking) ---- */
ul.pick{list-style:none;padding:0}
.pick li{cursor:auto;-webkit-user-select:auto;user-select:auto;margin:0}

/* ---- Homepage: lopende tekst loopt natuurlijk door (geen gedwongen balans, geen automatische woordafbreking) ---- */
.vp p,.vp li,.vp .vp-lead{text-wrap:wrap;-webkit-hyphens:manual;hyphens:manual}

/* ---- Homepage: aanbod ---- */
.vp-offer h2{margin-bottom:clamp(1.4rem,1.2vw + .9rem,1.75rem)}
.vp-offer h3{margin:0 0 .8rem}
.vp-offer>*:last-child{margin-bottom:0}

/* ---- Formulier: rechtstreeks mailen ---- */
.kz-direct{margin:1rem 0 0;font-size:.95rem;line-height:1.5;color:var(--soft)}
.kz-direct a{white-space:nowrap;color:var(--act);font-weight:600;text-decoration-color:var(--line-band);text-decoration-thickness:2px;text-underline-offset:.2em}
.kz-direct a:hover{color:var(--act);text-decoration-color:var(--act)}
.vp-contact .kz-direct{color:#EAE6DD;max-width:820px}
.vp-contact .vp-main .kz-direct{color:#EAE6DD}
.vp-contact .kz-direct a{color:#fff;text-decoration-color:var(--sand)}
.vp-contact .kz-direct a:hover{color:#fff;text-decoration-color:#fff}
.kz[hidden],.kz-done[hidden]{display:none}

/* ---- Interviews: opening met podcastfoto (liggend) ---- */
.iv-hero .bio-ht .lead{font-size:clamp(1.2rem,.6vw + 1rem,1.45rem);line-height:1.42;max-width:30em}
.iv-hero .bio-ht .lead+.lead{margin-top:.8rem}
.iv-hero .bio-ht h1{font-size:clamp(2.3rem,3vw + 1rem,3.9rem)}
.iv-foto{margin:0;overflow:hidden;aspect-ratio:3/2;border-radius:14px;background:var(--band)}
.iv-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:70% 45%}
@media(min-width:860px){.iv-hg{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}.iv-hero.bio-hero-zf .iv-hg{grid-template-columns:minmax(0,1fr)}}
@media(max-width:859px){.iv-foto{max-width:560px}}

/* =====================================================================================================================
   1.1.4
   ===================================================================================================================== */

/* ---- Paginaopening: klein paginalabel boven de grote titel (zelfde afstand als Bio en Interviews) ---- */
.page-hero .eyebrow{margin:0 0 1rem}
@media(max-width:859px){.page-intro>.l:empty{display:none}}

/* ---- Boeken: opening met foto (staand 3:4, bescheiden formaat) ---- */
@media(min-width:860px){.bk-hg{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}.bk-hero.bio-hero-zf .bk-hg{grid-template-columns:minmax(0,1fr)}}
.bk-hero .bio-ht p:not(.lead):not(.eyebrow){margin:0 0 1em;max-width:31em}
.bk-hero .bio-ht>*:last-child{margin-bottom:0}
.bk-foto{margin:0;overflow:hidden;aspect-ratio:3/4;border-radius:14px;background:var(--band);width:100%;max-width:360px;justify-self:end}
.bk-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media(max-width:859px){.bk-foto{max-width:320px;justify-self:start}}

/* ---- afdrukken ---- */
@media print{.site-header,.site-footer,.up,.menu-toggle{display:none!important}.vp-hero-media{display:none}}