/* ======================================================================
   Merkfundatie v6 · merkbureau voor de hospitality
   Rustig, werk voorop, echte beelden. Eén klassieke letter voor koppen
   (Baskervville), één stille schreefloze voor tekst en gegevens.
   Wat we bewust níet doen: labels in spatiëring boven elke kop, gekleurde
   cursieve accentwoorden, zegels, sterretjes, schaduwkaarten, bogen,
   een geruststellingsregel onder elke knop.
   ====================================================================== */
:root{
  --paper:#FBF6EE; --paper-2:#F4ECDF; --sand:#E9DFCE; --line:#DDD3C2;
  --ink:#162030; --ink-soft:#56607A; --delft:#2F4A7A; --brass:#B08D57; --riviera:#A9C1E3;
  --on-ink:#F4EEE4; --on-ink-soft:#B6C0D0;
  --f-display:"Baskervville",Baskerville,"Libre Baskerville",Georgia,serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-label:"Hanken Grotesk",system-ui,sans-serif;
  --d-weight:400; --d-weight-hero:400; --d-scale:1; --d-track:-.01em;
  --ease:cubic-bezier(.4,0,.2,1);
  --m:clamp(20px,3.2vw,48px);           /* paginamarge */
  --g:clamp(16px,1.8vw,28px);           /* goot */
  --sec:clamp(96px,11vw,176px);
  --max:1680px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--delft);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:100}
.skip:focus{left:8px}

/* ---------- raster ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--m)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.rule{border-top:1px solid var(--ink)}

/* ---------- letters ---------- */
.d{font-family:var(--f-display);font-weight:var(--d-weight);letter-spacing:var(--d-track);line-height:1.08}
.d em{font-style:italic}
.statement{font-family:var(--f-display);font-size:clamp(2.1rem,1.1rem + 3.3vw,4.6rem);line-height:1.08;letter-spacing:-.015em;text-wrap:pretty}
.h1{font-size:clamp(2.6rem,1.2rem + 4.4vw,6rem);line-height:1.02;letter-spacing:-.02em}
.h2{font-size:clamp(2rem,1.2rem + 2.3vw,3.6rem);line-height:1.08}
.h3{font-size:clamp(1.45rem,1.15rem + .8vw,2rem);line-height:1.15}
.lead{font-size:clamp(1.12rem,1rem + .4vw,1.35rem);line-height:1.55;max-width:34em}
.muted{color:var(--ink-soft)}
.small{font-size:.9rem;line-height:1.5}
.label{font-family:var(--f-label);font-size:.88rem;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.4}
.num{font-family:var(--f-display);font-variant-numeric:lining-nums tabular-nums}

/* sectiekop: klein, in de linkerkolom, zoals in een drukproef */
.side-h{grid-column:1/4;font-size:.95rem;font-weight:500;padding-top:.5em}
.side-h small{display:block;font-weight:400;color:var(--ink-soft);margin-top:2px}
.side-body{grid-column:4/13}

/* ---------- links en knoppen ---------- */
.tl{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(47,74,122,.4);transition:color .25s var(--ease),text-decoration-color .25s var(--ease)}
.tl:hover,.tl:focus-visible{text-decoration-color:currentColor}
.btn{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 24px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:.95rem;font-weight:500;transition:background .25s}
.btn:hover{background:var(--delft)}
.btn.light{background:var(--paper);color:var(--ink)}
.btn.light:hover{background:var(--riviera)}
.arr{display:inline-block;transition:transform .25s var(--ease)}
a:hover .arr{transform:translateX(4px)}

/* ---------- kop ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--paper);transition:box-shadow .25s var(--ease)}
.top.scrolled{box-shadow:0 1px 0 var(--line)}
.top .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none}
.brand svg{width:20px;height:25px;color:var(--ink)}
.brand span{font-family:var(--f-display);font-size:1.4rem;letter-spacing:-.01em;line-height:1}
.navlinks{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);font-size:.98rem}
.navlinks a{position:relative;display:inline-flex;align-items:center;gap:.35em;min-height:44px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:transparent;transition:color .25s var(--ease),text-decoration-color .25s var(--ease)}
.navlinks a[aria-current="page"]{text-decoration-color:currentColor}
.navlinks a:hover,.navlinks a:focus-visible{color:var(--delft);text-decoration-color:currentColor}
.navlinks .check{padding-left:clamp(18px,2.4vw,36px);border-left:1px solid var(--line);font-weight:500}
.menu-toggle{display:none;min-height:44px;padding:0 4px;font-size:.98rem;font-weight:500}
@media(max-width:899px){
  .navlinks{display:none}
  .menu-toggle{display:inline-block}
  .top.open .navlinks{display:flex;position:fixed;inset:72px 0 0 0;background:var(--paper);flex-direction:column;align-items:flex-start;gap:6px;padding:24px var(--m);font-family:var(--f-display);font-size:2.2rem}
  .top.open .navlinks .check{display:inline-flex;align-items:center;gap:12px;min-height:50px;margin-top:18px;padding:0 24px;border:0;background:var(--ink);color:var(--paper);font-family:var(--f-body);font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:background .25s var(--ease)}
  .top.open .navlinks .check:hover,.top.open .navlinks .check:focus-visible{background:var(--delft);color:var(--paper)}
  .page-head .aside{margin-top:16px}
}

/* ---------- home: opening ---------- */

/* ---------- werk ---------- */
.work-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-bottom:18px;margin-bottom:clamp(28px,3vw,44px);border-bottom:1px solid var(--ink)}
.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:clamp(48px,6vw,96px)}
.work{display:block;text-decoration:none}
.work .frame{overflow:hidden;background:var(--sand);position:relative}
.work .frame img{width:100%;height:100%;object-fit:cover}
.work .meta{display:grid;grid-template-columns:1fr auto;gap:4px 16px;margin-top:16px}
.work .name{font-family:var(--f-display);font-size:clamp(1.4rem,1.1rem + .8vw,2rem);line-height:1.1}
.work .what{grid-column:1/-1;color:var(--ink-soft);max-width:36em}
.work .tag{color:var(--ink-soft);font-size:.88rem;align-self:baseline;white-space:nowrap}
.work.big{grid-column:1/9}.work.big .frame{aspect-ratio:4/3}
.work.tall{grid-column:9/13;margin-top:clamp(80px,12vw,200px)}.work.tall .frame{aspect-ratio:3/4}
.work.third{grid-column:span 4}.work.third .frame{aspect-ratio:4/5}
@media(max-width:899px){
  .work.big,.work.tall,.work.third{grid-column:1/-1;margin-top:0}
}

/* ---------- waarom: de welkomstzin met drie cijfers ---------- */
.waarom .statement{grid-column:4/13}
.facts{grid-column:1/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);margin-top:clamp(56px,7vw,110px);border-top:1px solid var(--line)}
.fact{padding:30px var(--g) 8px 0;display:grid;gap:12px;align-content:start}
.fact+.fact{border-left:1px solid var(--line);padding-left:var(--g)}
.fact .num{font-size:clamp(3.4rem,2.4rem + 3vw,5.6rem);line-height:.9}
.fact p{max-width:22em}
.fact .src{font-size:.8rem;color:var(--ink-soft)}
.fact .src a{color:inherit}
@media(max-width:899px){.waarom .statement{grid-column:1/-1}.facts{grid-template-columns:1fr}.fact+.fact{border-left:0;border-top:1px solid var(--line);padding-left:0}}

/* ---------- diensten ---------- */
.disciplines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);border-top:1px solid var(--ink)}
.disc-col{padding-top:22px;padding-right:var(--g)}
.disc-col h3{margin-bottom:12px}
.disc-col p{color:var(--ink-soft);max-width:26em}
.disc-col ul{margin-top:18px;border-top:1px solid var(--line)}
.disc-col li{padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
@media(max-width:899px){.disciplines{grid-template-columns:1fr}.disc-col{padding-bottom:28px}}

/* ---------- vier gangen ---------- */
.gang{padding-top:22px;padding-right:var(--g)}
.gang h3{margin-bottom:12px}
.gang p:last-child{color:var(--ink-soft);font-size:.98rem}

/* ---------- zaaksectie (zaak.css) op de v6-grond ---------- */
#zaak .zk{padding-block:0}
#zaak .zk-head .label{display:none}
.zk-h{font-size:clamp(2rem,1.2rem + 2.3vw,3.6rem)!important;line-height:1.06}
.zk-seen{font-family:var(--f-display);font-style:italic;font-size:1.2rem;line-height:1.45;margin-top:22px;max-width:30em;padding-left:18px;border-left:1px solid var(--line)}
.zk-atelier{margin-top:14px;font-size:.92rem;color:var(--ink-soft)}
.zk-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.zk-btn{font-family:var(--f-display)!important}

/* ---------- paginakop (subpagina's) ---------- */

.page-head .h1{grid-column:1/10}
.page-head .lead{grid-column:1/8;margin-top:28px;color:var(--ink-soft)}
.page-head .aside{grid-column:10/13;align-self:end;color:var(--ink-soft);font-size:.92rem}

/* ---------- casepagina ---------- */
.case-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--g);border-top:1px solid var(--ink);padding-top:16px;margin-top:clamp(36px,4vw,56px)}
.case-meta dt{font-size:.84rem;color:var(--ink-soft)}
.case-meta dd{margin:4px 0 0;font-size:.98rem}
.case-img{margin:0}
.case-img .frame{overflow:hidden;background:var(--sand)}
.case-img img{width:100%;height:100%;object-fit:cover}
.case-img figcaption{margin-top:10px;font-size:.86rem;color:var(--ink-soft)}

.case-text h2{grid-column:1/4;font-size:.95rem;font-weight:500;padding-top:.4em}
.case-text .body{grid-column:4/11;display:grid;gap:1em}
.case-text .body p{font-size:clamp(1.12rem,1rem + .35vw,1.3rem);line-height:1.6}
.case-pair{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:start}
.case-pair .a{grid-column:1/7}.case-pair .b{grid-column:8/13;margin-top:clamp(60px,8vw,140px)}
.case-result{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);border-top:1px solid var(--ink);padding-top:22px}
.case-result .k{grid-column:1/4;font-size:.95rem;font-weight:500}
.case-result .v{grid-column:4/13;font-family:var(--f-display);font-size:clamp(3rem,1.8rem + 4vw,6.4rem);line-height:1}
.case-result .n{grid-column:4/10;margin-top:14px;color:var(--ink-soft)}
.next-case{display:flex;justify-content:space-between;align-items:baseline;gap:24px;border-top:1px solid var(--ink);padding-top:22px;text-decoration:none}
.next-case .d{font-size:clamp(2rem,1.2rem + 2.6vw,4rem)}
@media(max-width:899px){
  .case-meta{grid-template-columns:1fr 1fr;row-gap:16px}
  .case-text h2,.case-text .body,.case-pair .a,.case-pair .b,.case-result .k,.case-result .v,.case-result .n{grid-column:1/-1}
  .case-pair .b{margin-top:24px}
}
/* 14-10 mobieltest (casepagina's Rouchelli, Ferdasco, Salento) */
/* beeld in zijn eigen verhouding (merkgids, webshop): woordmerk, logovlakken en winkelmand vallen niet meer aan de rand weg */
.frame.eigen{aspect-ratio:auto}
.case-img .frame.eigen img{display:block;width:100%;height:auto}
.frame.screen.eigen img{position:static;max-height:none}
/* de site op de telefoon: een eenvoudig toestelkader zoals .st-phone op Over ons, gecentreerd en hooguit 360 px breed */
.case-img .frame.tel{width:min(100%,360px);margin-inline:auto;border:10px solid var(--ink);border-radius:34px;background:var(--ink)}
.case-img .frame.screen.tel img{position:static;display:block;width:100%;height:auto;max-height:none;border:0;border-radius:24px}
.case-img:has(.frame.tel) figcaption{text-align:center}
.case-img figcaption{text-wrap:pretty}   /* geen los woord op de laatste regel (320/375) */
@media(max-width:899px){
  /* staande beelden (stories van 386 px breed, plaatshouders) niet breder dan de bron, gecentreerd */
  .case-pair .b:has(>.frame.r45){width:min(100%,386px);margin-inline:auto}
}
@media(max-width:599px){
  /* "Ook van ons" / "Volgende case": het label boven de naam in plaats van in een smalle kolom ernaast */
  .next-case{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ---------- studio ---------- */
.team{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--g);row-gap:40px}
.person .ph{aspect-ratio:4/5;overflow:hidden;background:var(--sand)}
.person .ph img{width:100%;height:100%;object-fit:cover}
.person h3{font-family:var(--f-display);font-size:1.35rem;margin-top:14px}
.person .role{color:var(--ink-soft);font-size:.9rem}
.person p{margin-top:8px;font-size:.95rem}
@media(max-width:899px){.team{grid-template-columns:1fr 1fr}}

/* ---------- lijsten: vragen, journal ---------- */
.qa-list{border-top:1px solid var(--ink)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:20px 0;font-family:var(--f-display);font-size:clamp(1.2rem,1rem + .5vw,1.5rem)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--f-body);font-weight:300;font-size:1.4rem;line-height:1;transition:transform .25s var(--ease)}
.qa[open] summary::after{transform:rotate(45deg)}
.qa .ans{padding:0 0 24px;max-width:44em;color:var(--ink-soft)}
.jlist{border-top:1px solid var(--ink)}
.jrow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;align-items:baseline}
.jrow .r{grid-column:1/3;color:var(--ink-soft);font-size:.9rem}
.jrow .t{grid-column:3/9;font-family:var(--f-display);font-size:clamp(1.3rem,1.05rem + .7vw,1.8rem);line-height:1.2}
.jrow .s{grid-column:9/12;color:var(--ink-soft);font-size:.95rem}
.jrow .st{grid-column:12/13;text-align:right;font-size:.85rem;color:var(--ink-soft)}
a.jrow .t{text-decoration:underline;text-decoration-thickness:max(1px,.03em);text-underline-offset:.2em;text-decoration-color:transparent;transition:color .25s var(--ease),text-decoration-color .25s var(--ease)}
a.jrow:hover .t,a.jrow:focus-visible .t{color:var(--delft);text-decoration-color:currentColor}
@media(max-width:899px){.jrow .r,.jrow .t,.jrow .s,.jrow .st{grid-column:1/-1;text-align:left}}

/* ---------- formulier ---------- */
.form{display:grid;gap:18px;max-width:560px}
.field{display:grid;gap:6px}
.field label{font-size:.9rem;font-weight:500}
.field input,.field select{font:inherit;font-size:1rem;padding:14px 14px;border:1px solid var(--delft);background:var(--paper);color:var(--ink);border-radius:0}
.field input:focus,.field select:focus{outline:2px solid var(--delft);outline-offset:0;border-color:var(--delft)}
.field .hint{font-size:.84rem;color:var(--ink-soft)}
.field .err{font-size:.86rem;color:#9B2C2C;min-height:1em}
.seg{display:flex;gap:8px}
.seg button{padding:10px 16px;border:1px solid var(--delft);background:var(--paper);min-height:44px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.form-done{padding:28px;background:var(--paper-2)}

/* ---------- voet ---------- */
.foot{background:var(--ink);color:var(--on-ink);margin-top:var(--sec)}
.foot a{color:inherit}
.foot .inner{padding-block:clamp(80px,9vw,140px) 36px}
.foot-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:40px}
.foot-top .h1{grid-column:1/8;color:var(--on-ink)}
.foot-top .who{grid-column:9/13;align-self:end;display:grid;gap:16px}
.foot-top .who .p{display:flex;gap:14px;align-items:center}
.foot-top .who img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.foot-top .who p{color:var(--on-ink-soft)}
.foot-top .who b{color:var(--on-ink);font-weight:500}
.foot-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);margin-top:clamp(72px,8vw,120px);padding-top:22px;border-top:1px solid rgba(244,238,228,.18);font-size:.94rem}
.foot-cols div{grid-column:span 3}
.foot-cols h4{font-size:.84rem;color:var(--on-ink-soft);margin-bottom:10px;font-weight:400}
.foot-cols li{padding:3px 0}
.foot-cols li{padding:6px 0}
.foot-cols a{display:inline-block;min-height:24px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:transparent;transition:text-decoration-color .25s var(--ease)}
.foot-cols a:hover,.foot-cols a:focus-visible{text-decoration-color:currentColor}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;font-size:.82rem;color:var(--on-ink-soft)}
.todo{display:inline-block;margin:.3em 0;padding:1px 8px;font-family:var(--f-body);font-size:.86rem;font-weight:400;font-style:normal;line-height:1.45;letter-spacing:0;text-transform:none;color:var(--ink-soft);border:1px dashed currentColor}
.foot .todo,.band-ink .todo{color:var(--on-ink-soft)}
@media(max-width:899px){.foot-top .h1,.foot-top .who{grid-column:1/-1}.foot-cols div{grid-column:span 6;margin-bottom:24px}}
@media(max-width:359px){.foot-cols div{grid-column:1/-1}}   /* 14-10 mobieltest: op 320 px past info@merkfundatie.nl niet in een halve kolom */

/* ---------- beweging: weinig en rustig ---------- */
.motion .pre{opacity:0;transform:translateY(12px)}
.motion .pre.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
@media(max-width:899px){
  .grid>*{grid-column:1/-1!important}
  .side-h{padding-bottom:10px}
}

/* het wisselende woord: een invulplek, zoals op een reserveringskaart */
.roll{display:inline-grid;vertical-align:bottom;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em;border-bottom:1px solid var(--line);white-space:nowrap}
.roll-w{grid-area:1/1;display:inline-block;padding-right:.02em}
/* tweede beeld bij hover */
.work .frame{position:relative}
.work .frame .alt{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease)}
a.work:hover .frame .alt,a.work:focus-visible .frame .alt{opacity:1}

/* ---------- werkoverzicht: cases als grote rijen ---------- */
.caselist{display:grid;gap:clamp(72px,9vw,150px);margin-bottom:0}
.caserow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);text-decoration:none;align-items:end}
.caserow .frame{grid-column:1/9;aspect-ratio:4/3;overflow:hidden;background:var(--sand);position:relative}
.caserow .frame img{width:100%;height:100%;object-fit:cover}
.caserow .frame .alt{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease)}
a.caserow:hover .frame .alt,a.caserow:focus-visible .frame .alt{opacity:1}
.caserow .txt{grid-column:9/13;display:grid;gap:16px;align-content:end}
.caserow.flip .frame{grid-column:5/13;order:2}
.caserow.flip .txt{grid-column:1/5}
.caserow .nr{font-size:.9rem;color:var(--ink-soft)}
.caserow p{color:var(--ink-soft)}
.caserow dl{margin:0;border-top:1px solid var(--line)}
.caserow dl div{display:grid;grid-template-columns:8.5em 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.94rem}
.caserow dt{color:var(--ink-soft)}
.caserow dd{margin:0}
.caserow .tl{justify-self:start}
.vrij{padding-top:22px}
@media(max-width:899px){.caserow .frame,.caserow .txt,.caserow.flip .frame,.caserow.flip .txt{grid-column:1/-1;order:0}.caserow .txt{margin-top:20px}}

/* ---------- aanpak ---------- */
.ast{font-size:.4em;vertical-align:top;position:relative;top:.35em;margin-left:.04em;color:var(--delft)}
.huis{margin-top:clamp(64px,7vw,110px);padding-top:22px;border-top:1px solid var(--line)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--g);border-top:1px solid var(--ink)}
.two>div{padding:22px var(--g) 0 0;display:grid;gap:12px;align-content:start}
.two>div+div{border-left:1px solid var(--line);padding-left:var(--g)}
.two p{color:var(--ink-soft);max-width:34em}
.atlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--g);border-top:1px solid var(--ink)}
.atlist li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.atlist b{font-family:var(--f-display);font-weight:700;font-size:1.2rem}
.atlist span{color:var(--ink-soft)}
.gang .by{display:block;margin-top:12px;font-size:.86rem;color:var(--ink)}
.stap{margin-top:clamp(64px,7vw,110px);padding-top:22px}
/* een dag: tabel, de rij van nu licht op */
.dag{border-top:1px solid var(--ink)}
.dag li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.dag .t{grid-column:1/3;font-size:clamp(1.6rem,1.2rem + 1vw,2.4rem);line-height:1}
.dag .p{grid-column:3/5;font-weight:500}
.dag .g{grid-column:5/9;font-family:var(--f-display);font-size:1.12rem;line-height:1.45}
.dag .h{grid-column:9/13;color:var(--ink-soft);font-size:.94rem}
.dag li.now{background:var(--paper-2);box-shadow:-12px 0 0 var(--paper-2),12px 0 0 var(--paper-2)}
.dag li.now .t::after{content:" · nu";font-family:var(--f-body);font-size:.8rem;color:var(--delft);vertical-align:middle}
.nu{display:block;margin-top:8px;font-size:.95rem;color:var(--delft)}
@media(max-width:899px){
  .parts,.two,.atlist{grid-template-columns:1fr}
  .part+.part,.two>div+div{border-left:0;padding-left:0;border-top:1px solid var(--line);margin-top:24px}
  .dag .t,.dag .p,.dag .g,.dag .h{grid-column:1/-1}
  .atlist li{grid-template-columns:1fr}
}

/* ---------- artikel ---------- */
.prose{padding-bottom:var(--sec)}
.prose .pull{align-self:start;position:sticky;top:110px;display:grid;gap:6px;color:var(--ink-soft);font-weight:400}
.prose .pull .num{font-size:2.4rem;color:var(--ink);line-height:1}
.prose .body{max-width:40em}
.prose .body p,.prose .body li{font-size:1.12rem;line-height:1.7;margin-bottom:1em}
.prose .body h2{font-family:var(--f-display);font-size:1.7rem;margin:1.6em 0 .5em}
.prose .body ul{list-style:disc;padding-left:1.2em}
.prose blockquote{margin:1.6em 0;padding:0;font-family:var(--f-display);font-size:clamp(1.8rem,1.3rem + 1.4vw,2.6rem);line-height:1.2}
.prose blockquote cite{display:block;margin-top:12px;font-family:var(--f-body);font-style:normal;font-size:.9rem;color:var(--ink-soft)}
.prose .bronnen{list-style:decimal;padding-left:1.2em;margin-top:48px;padding-top:16px;border-top:1px solid var(--line)}
.prose .bronnen li{font-size:.9rem;margin-bottom:.4em}
.prose .cta-line{margin-top:2em}
/* ---------- contact ---------- */
.sig-block{display:flex;gap:14px;align-items:center}
.sig-block img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.sig-block .d{font-size:1.5rem;color:var(--ink)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);padding-top:22px;border-top:1px solid var(--ink);padding-bottom:var(--sec)}
.direct ul{margin-top:16px;display:grid;gap:10px}
.jrow.soon .t{color:var(--ink-soft)}
@media(max-width:899px){.contact-grid{grid-template-columns:1fr}.prose .pull{position:static}}

/* twee eigen merken: gelijk, naast elkaar, zelfde verhouding (keuze eigenaar 27-09) */
.work.half{grid-column:span 6}
.work.half .frame{aspect-ratio:4/3}
@media(max-width:899px){.work.half{grid-column:1/-1}}

/* ---------- hero: volle breedte, menu erover, beeld wisselt met het woord ---------- */
/* menubalk blijft zichtbaar, ook boven de hero (keuze eigenaar) */
.hero{position:relative;height:calc(100svh - 72px);min-height:600px;overflow:hidden;background:var(--ink);color:var(--paper)}
.hero-media{position:absolute;inset:0}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);will-change:transform,mask-image}
.hero-img.on{opacity:1}
.hero-shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(22,32,48,.62) 0%,rgba(22,32,48,0) 22%,rgba(22,32,48,0) 42%,rgba(22,32,48,.62) 72%,rgba(22,32,48,.86) 100%),
  radial-gradient(90% 70% at 0% 100%,rgba(22,32,48,.45),rgba(22,32,48,0) 70%)}
.hero-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(28px,5vh,60px)}
.hero-h{font-family:var(--f-display);font-weight:400;font-size:clamp(2.5rem,1.1rem + 4.9vw,6.8rem);line-height:1.02;letter-spacing:-.022em;max-width:13.5em;color:var(--paper);text-wrap:balance}
.hero .roll{border-bottom-color:rgba(251,246,238,.6)}
.hero-lead{margin-top:18px;max-width:30em;font-size:clamp(1.08rem,1rem + .35vw,1.3rem);line-height:1.5;color:var(--paper)}
.hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:22px 32px;margin-top:clamp(26px,4vh,44px);padding-top:clamp(18px,2.4vh,26px);border-top:1px solid rgba(251,246,238,.28)}
.hero-ctrl{display:flex;align-items:center;gap:18px}
.hero-cap{font-size:.86rem;color:var(--paper);min-width:13.5em;text-align:right;font-variant-numeric:tabular-nums}
.hero-segs{display:flex;gap:6px}
.hero-seg{position:relative;width:clamp(18px,2.4vw,34px);height:30px;display:flex;align-items:center}
.hero-seg::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(251,246,238,.32)}
.hero-seg i{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--paper);transform:scaleX(0);transform-origin:left}
.hero-seg[aria-current="true"] i{transform:scaleX(1)}
.hero-seg:hover::before{background:rgba(251,246,238,.7)}
.hero-pause{width:34px;height:34px;border-radius:50%;border:1px solid rgba(251,246,238,.6);display:grid;place-items:center;grid-auto-flow:column;gap:4px;color:var(--paper);transition:background .25s}
.hero-pause:hover{background:rgba(251,246,238,.14)}
.hero-pause i{display:block;width:2px;height:10px;background:currentColor}
.hero-pause[aria-pressed="true"] i{display:none}
.hero-pause[aria-pressed="true"]::after{content:"";border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
@media(max-width:899px){
  .hero-cap{display:none}
  .hero-foot{align-items:stretch}
  .hero-ctrl{width:100%;justify-content:space-between}
  .hero-segs{flex:1;gap:4px}.hero-seg{flex:1;width:auto}
}

/* ---------- blauw als chique accent (keuze eigenaar 27-09): één nachtblauwe band, verder subtiel diepblauw ---------- */
.band-ink{background:var(--ink);color:var(--on-ink)}
.band-ink .side-h{color:var(--riviera)}
.band-ink .side-h small{color:var(--on-ink-soft)}
.band-ink .statement{color:var(--on-ink)}
.band-ink .facts{border-top-color:rgba(244,238,228,.2)}
.band-ink .fact+.fact{border-left-color:rgba(244,238,228,.2)}
.band-ink .fact .num{color:var(--riviera)}
.band-ink .fact p{color:var(--on-ink)}
.band-ink .fact .src{color:var(--on-ink-soft)}
.band-ink a{color:inherit}

@media(max-width:899px){.band-ink .fact+.fact{border-top-color:rgba(244,238,228,.2)}}
/* subtiele accenten op ivoor */
.side-h{color:var(--delft)}
.side-h small{color:var(--ink-soft)}
.work .tag{color:var(--delft)}
.navlinks .check{color:var(--delft)}
.tl{color:var(--delft)}
.foot .tl,.hero .tl{color:inherit}
a.work:hover .name,a.work:focus-visible .name,a.caserow:hover h3,a.caserow:focus-visible h3{color:var(--delft)}
.case-result .v{color:var(--delft)}
/* intro */
.intro2 .statement{margin-bottom:clamp(36px,4vw,60px)}
.intro-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--g) clamp(28px,4vw,64px);color:var(--ink-soft);font-size:1.06rem;line-height:1.65}
.intro-links{display:flex;gap:28px;flex-wrap:wrap;margin-top:32px}
@media(max-width:899px){.intro-cols{grid-template-columns:1fr}}

/* ---------- studies als lijst: grote namen, het beeld zweeft mee met de muis ---------- */
.study-index{margin-top:clamp(88px,10vw,150px);position:relative}
.si-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);margin-bottom:22px;align-items:baseline}
.si-head .side-h{grid-column:1/4;padding-top:0}
.si-head p{grid-column:4/13}
.si-list{border-top:1px solid var(--ink)}
.si-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:baseline;padding:clamp(22px,2.6vw,36px) 0;border-bottom:1px solid var(--line);text-decoration:none}
.si-n{grid-column:1/2;color:var(--ink-soft);font-size:1rem}
.si-name{grid-column:2/7;font-size:clamp(2rem,1.1rem + 2.8vw,4.2rem);line-height:1;text-decoration:underline;text-decoration-thickness:max(1px,.03em);text-underline-offset:.2em;text-decoration-color:transparent;transition:color .25s var(--ease),text-decoration-color .25s var(--ease)}
.si-line{grid-column:7/12;color:var(--ink-soft)}
.si-tag{grid-column:12/13;text-align:right;font-size:.84rem;color:var(--delft)}
.si-row:hover .si-name,.si-row:focus-visible .si-name{color:var(--delft);text-decoration-color:currentColor}
.si-thumb{display:none}
.si-float{position:fixed;left:0;top:0;width:clamp(240px,21vw,330px);aspect-ratio:4/5;object-fit:cover;pointer-events:none;opacity:0;z-index:30;transition:opacity .25s var(--ease);will-change:transform}
.si-float.show{opacity:1}
@media (hover:none),(max-width:899px){
  .si-float{display:none}
  .si-row{grid-template-columns:88px minmax(0,1fr);column-gap:16px;row-gap:6px}
  .si-thumb{display:block;grid-column:1;grid-row:1/4;width:88px;height:110px;object-fit:cover}
  .si-n{display:none}
  .si-name,.si-line,.si-tag{grid-column:2;text-align:left}
}
/* smalle telefoons (360px): "Strandpaviljoen" past anders net niet naast de foto en geeft zijwaartse scroll */
@media (max-width:389px){.si-name{font-size:7.4vw}}

/* ---------- wat we maken: drie grote regels, ernaast de film van het echte werk ---------- */
.make{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:start}
.make-list{grid-column:1/8;border-top:1px solid var(--ink)}
.mk-row{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:var(--g);padding:clamp(22px,2.4vw,32px) 0;border-bottom:1px solid var(--line)}
.mk-row[data-film]{cursor:pointer}
.mk-n{font-size:1rem;color:var(--delft);padding-top:.9em}
.mk-t{font-size:clamp(2rem,1.1rem + 2.8vw,4.2rem);line-height:1;margin-bottom:12px;text-decoration:underline;text-decoration-thickness:max(1px,.03em);text-underline-offset:.2em;text-decoration-color:transparent;transition:color .25s var(--ease),text-decoration-color .25s var(--ease)}
.mk-row p{color:var(--ink-soft);max-width:34em}
.mk-row.on .mk-t{color:var(--delft)}
.make-media{grid-column:9/13;position:sticky;top:104px;margin:0}
.mm-frame{position:relative;aspect-ratio:4/5;background:var(--paper-2);overflow:hidden}
.mm-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s var(--ease)}
.mm-v.on{opacity:1}
.make-media figcaption{margin-top:10px;font-size:.86rem;color:var(--ink-soft)}
@media(max-width:899px){.make-list,.make-media{grid-column:1/-1}.make-media{position:static;margin-top:28px;max-width:420px}}

/* ---------- vier gangen als menukaart ---------- */
.mc-top{display:flex;justify-content:space-between;font-size:.84rem;color:var(--delft);padding-bottom:16px;border-bottom:1px solid var(--line)}
.mc-list .gang{padding:24px 0;border-bottom:1px solid var(--line)}
.mc-list .gang:last-child{border-bottom:0}
.mc-line{display:flex;align-items:baseline;gap:14px}
.mc-course{font-size:clamp(1.55rem,1.2rem + 1vw,2.2rem);white-space:nowrap}
.mc-dots{flex:1;min-width:24px;border-bottom:1px dotted var(--line);transform:translateY(-7px)}
.mc-when{font-size:.92rem;color:var(--ink-soft);white-space:nowrap}
.mc-list .gang:first-child .mc-when{color:var(--delft);font-weight:500}
.mc-t{font-size:1.04rem;font-weight:500;margin-top:10px}
.mc-d{color:var(--ink-soft);margin-top:4px;max-width:36em}
.mc-foot{text-align:center;font-family:var(--f-display);font-style:italic;font-size:1.15rem;color:var(--delft);margin-top:14px;padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:560px){.mc-line{flex-wrap:wrap}.mc-dots{display:none}.mc-when{width:100%}}

/* ---------- voet: de belofte onder "Een tafel voor twee." ---------- */
.foot-claim{grid-column:1/8;display:grid;gap:20px;align-content:start}
.foot-pitch{font-size:clamp(1.45rem,1.1rem + 1.1vw,2.2rem);line-height:1.2;color:var(--riviera);max-width:20em}
.foot-sub{color:var(--on-ink-soft);max-width:38em;font-size:1.02rem}
@media(max-width:899px){.foot-claim{grid-column:1/-1}}
.mc-d .by{display:block;margin-top:8px;font-size:.84rem;color:var(--delft)}
.foot-claim{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,3vw,48px)}
.foot-claim .h1{grid-column:1/-1}
@media(max-width:899px){.foot-claim{grid-template-columns:1fr}}
/* voet: één pitch onder de kop, iets kleiner en uitgebreider (keuze eigenaar) */
.foot-claim{grid-template-columns:1fr!important}
.foot-pitch{font-size:clamp(1.18rem,1rem + .55vw,1.55rem)!important;line-height:1.5!important;max-width:34em!important}

/* ======================================================================
   Letter (keuze eigenaar 27-09): de letter van de eerste Merkfundatie-site.
   Archivo voor koppen: groot = smal, zwaar en in kapitalen; lange zinnen in
   gewone kast. DM Sans voor tekst, menu en gegevens.
   ====================================================================== */
:root{--f-display:"Archivo","Helvetica Neue",Arial,sans-serif;--f-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--f-label:"DM Sans",system-ui,sans-serif}
.d,.hero-h,.zk-h,.si-name,.mk-t,.mc-course,.fact .num,.case-result .v,.next-case .d,.dag .t,.brand span,.bw-big{font-family:var(--f-display);font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.005em}
.d em{font-style:normal}
.hero-h{line-height:.96;font-size:clamp(2.6rem,1.2rem + 5.2vw,7.2rem)}
.h1{line-height:.96}
.h2{line-height:1}
.zk-h{line-height:.98!important}
.si-name,.mk-t{line-height:.95}
.fact .num,.case-result .v{font-weight:800;letter-spacing:-.01em}
/* lange zinnen: gewone kast, halfsmal, rustig gewicht */
.statement,.side-body.d.h2,.foot-pitch,.jrow .t,.prose blockquote,.at-story{font-family:var(--f-display);font-weight:500;font-stretch:90%;text-transform:none;letter-spacing:-.02em}
.statement{line-height:1.08}
.side-body.d.h2{font-size:clamp(1.9rem,1.2rem + 2vw,3.2rem);line-height:1.08}
.foot-pitch{font-weight:400!important;font-stretch:100%!important;letter-spacing:-.01em}
/* tussenkoppen: Archivo 700, normale breedte, gewone kast (zoals op de eerste site) */
.h3,.d.h3,.person h3,.mc-t,.part .pl,.caserow .d.h2{font-family:var(--f-display);text-transform:none;font-stretch:100%;font-weight:700;letter-spacing:-.015em}
.caserow .d.h2{font-size:clamp(1.8rem,1.2rem + 1.6vw,2.8rem)}
.part .pl{font-style:normal;font-weight:600;font-size:1.1rem;color:var(--delft)}
/* cursief waar het een stem is: DM Sans cursief */
.zk-seen,.mc-foot,.sig .d,.sig-block .d,.prose blockquote cite{font-family:var(--f-body);font-style:italic;text-transform:none;font-stretch:100%;font-weight:400}
.mc-foot{font-size:1.05rem}
/* menu en merknaam zoals op de eerste site: kapitalen met spatiëring */
.navlinks{font-family:var(--f-body);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.menu-toggle{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.brand span{font-size:1.25rem;font-weight:900;letter-spacing:.01em}
.btn{font-family:var(--f-body);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem}
/* de zaaksectie gebruikt dezelfde rollen */
.zk-btn{font-family:var(--f-display)!important;text-transform:none;font-weight:600;font-stretch:100%}
/* geen dunne koppen meer (keuze eigenaar): alles wat in Archivo staat, staat stevig */
.statement,.side-body.d.h2,.jrow .t,.prose blockquote,.at-story{font-weight:700!important}
.foot-pitch{font-weight:600!important}
.zk-btn{font-weight:700!important}
.zk-seen,.mc-foot,.sig .d,.sig-block .d{font-weight:500!important}
.work .name,.mc-course{font-weight:800}
.work .name{font-family:var(--f-display);font-stretch:72%;text-transform:uppercase}
:root{--d-weight:700;--d-weight-hero:800}

/* ---------- rustige hero (keuze eigenaar): ivoor, veel ruimte, alleen de kop ---------- */
.hero2{background:var(--paper);min-height:calc(100svh - 72px);display:flex;align-items:flex-end}
.hero2-in{width:100%;padding-top:clamp(56px,10vh,120px);padding-bottom:clamp(40px,7vh,88px)}
.hero2-h{font-family:var(--f-display);font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(3rem,1rem + 7.4vw,10rem);line-height:.9;color:var(--ink)}
.hero2-h .hl{display:block}
.hero2 .roll{color:var(--delft);border-bottom:3px solid var(--delft);padding-bottom:0;margin-bottom:0;vertical-align:baseline;line-height:1}
.hero2-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:end;margin-top:clamp(36px,5vh,64px);padding-top:clamp(20px,2.4vh,28px);border-top:1px solid var(--ink)}
.hero2-lead{grid-column:1/7;font-size:clamp(1.08rem,1rem + .35vw,1.3rem);line-height:1.55;color:var(--ink-soft);max-width:32em}
.hero2-cta{grid-column:8/13;display:flex;justify-content:flex-end;align-items:center;gap:26px;flex-wrap:wrap}
@media(max-width:899px){.hero2-lead,.hero2-cta{grid-column:1/-1}.hero2-cta{justify-content:flex-start;margin-top:20px}.hero2{min-height:calc(88svh - 72px)}}
/* laatste sectie → voet: één maat ruimte, niet twee (keuze eigenaar) */
.foot{margin-top:0}
main>:last-child{padding-bottom:clamp(80px,9vw,136px)!important;margin-bottom:0!important}
main>:last-child .contact-grid,main>:last-child.prose,main>article:last-child .prose{padding-bottom:0!important}
/* hero in nachtblauw met witte letters; het woord op een eigen regel, niets verspringt (keuze eigenaar) */
.hero2{background:var(--ink);color:var(--on-ink)}
.hero2-h{color:var(--paper)}
.hero2-h .hl-word{white-space:nowrap}
.hero2 .roll{display:inline-grid;color:var(--riviera);border:0;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.hero2 .roll-w{grid-area:1/1;text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.1em;text-decoration-color:rgba(169,193,227,.7)}
.hero2-foot{border-top-color:rgba(244,238,228,.25)}
.hero2-lead{color:var(--on-ink-soft)}
.hero2 .tl{color:var(--paper)}
@media(max-width:599px){.hero2-h{font-size:clamp(2.1rem,9.4vw,2.9rem)}}
/* voettekst: kleiner, gewoon gewicht, korter (keuze eigenaar) */
.foot-pitch{font-family:var(--f-body)!important;font-weight:400!important;font-stretch:100%!important;text-transform:none!important;letter-spacing:0!important;font-size:clamp(1.05rem,.98rem + .3vw,1.22rem)!important;line-height:1.6!important;max-width:36em!important;color:var(--on-ink-soft)!important}
/* schone films: het object staat los op de pagina, geen kader eromheen */
.mm-frame{background:var(--paper)}
.mm-v{object-fit:cover}
.mm-v{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-composite:intersect}

/* ---------- logo: MERK·FUNDATIE (richting III, keuze jury) ---------- */
.brand .wm{display:block;height:18px;width:auto;color:var(--ink)}
@media(max-width:899px){.brand .wm{height:15px}}
.foot-base{align-items:center}
.foot-wm{display:inline-flex;color:var(--on-ink);margin-right:auto}
.foot-wm .wm{height:16px;width:auto;display:block}
.foot-wm{color:var(--paper)}

/* ======================================================================
   de menukaart op tafel (Zo begin je)
   Doel: de vier gangen voelen als een echte gedrukte kaart. Een wit linnen
   bord met een blauwe foliedubbellijn, MENU in delftblauwe folie, het M▪F-
   monogram blind geperst en een blauw geschilderde snede. De kaart ligt op
   het ivoor, komt omhoog, klapt met gewicht open en ligt daarna stil, vlak en
   scherp open. De tekst beweegt nooit: alleen het object en het licht.
   Standen (data-mt op <html>, gezet door v6.js):
     geen / static  open en vlak, niet vastgezet (geen JS, minder beweging, ?still)
     3d             vastgezette bühne, scroll bestuurt de kaart
     flip           telefoon: eerst de voorkant, die één keer omslaat
     flat           telefoon zonder beweging: meteen de bladzijden
   ====================================================================== */
.mt{
  --pg-w:min(max(470px, calc((100svh - 118px) / 1.25)), calc(50vw - var(--m)), 780px);
  --pg-h:calc(var(--pg-w) * 1.25);
  --board:#FFFDF8;            /* wit linnen */
  --sheet:#FFFEFA;            /* wit papier */
  --t-ink:22,32,48;
  --t-shade:52,48,44;          /* schaduw op papier: warm, niet blauw */
  --painted:#243C66,#2F4A7A 45%,#35528A 60%,#27416E;   /* de geschilderde snede */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .31 0 0 0 0 .25 2.6 0 0 0 -1.18'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  --linen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='w' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62 .022' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .35 0 0 0 0 .28 3 0 0 0 -1.35'/%3E%3C/filter%3E%3Cfilter id='f' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022 .62' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .35 0 0 0 0 .28 3 0 0 0 -1.35'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23w)'/%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3C/svg%3E");
  --deckle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='160' viewBox='0 0 7 160'%3E%3Cpath d='M0 0L4.6 0L5.5 1.4L6.0 3.1L5.9 3.9L4.8 5.3L5.1 6.5L3.8 7.8L5.4 8.8L4.6 9.7L3.8 11.1L3.8 12.7L4.4 14.5L5.2 16.3L5.8 17.2L5.5 19.0L4.5 20.1L5.0 20.8L4.7 21.5L5.4 22.6L5.6 23.6L4.9 24.4L5.2 25.9L5.8 27.5L4.3 28.2L4.9 29.9L4.8 31.7L5.5 32.8L5.8 33.6L5.4 35.2L4.6 36.0L4.9 37.7L3.7 39.0L2.9 39.9L3.7 41.4L5.1 42.1L4.8 43.3L4.4 44.9L4.3 45.6L4.8 46.9L6.2 48.4L5.1 50.0L5.2 50.8L6.6 52.0L5.8 53.8L5.3 55.3L4.8 56.4L5.8 58.2L4.5 59.5L6.2 60.5L6.2 61.6L6.3 63.0L5.5 64.1L6.4 65.4L6.6 66.4L5.6 67.7L5.5 68.7L6.2 70.3L6.1 71.4L5.9 73.0L6.3 74.7L5.4 76.4L6.5 77.3L6.2 78.5L5.7 80.0L5.2 81.4L5.8 82.8L4.2 84.2L4.5 85.4L4.3 86.9L3.8 88.1L3.8 89.0L3.7 89.9L4.2 91.0L3.8 91.9L4.2 93.1L4.6 93.9L4.2 94.7L4.8 96.0L5.0 97.7L5.0 99.3L5.4 100.2L6.0 101.9L5.3 103.0L6.2 103.8L6.6 104.7L5.2 105.8L5.9 106.8L6.6 108.6L6.6 109.5L6.6 110.7L5.7 111.9L5.6 112.8L6.5 113.8L5.4 114.5L5.5 116.2L6.2 117.2L5.3 118.3L5.8 119.7L5.3 120.5L4.9 121.8L4.8 123.1L4.3 124.6L5.8 125.6L4.1 127.2L5.0 128.8L5.0 130.3L4.6 132.0L4.0 133.6L4.4 135.2L3.4 136.7L3.8 138.3L4.6 139.5L4.3 140.5L3.1 142.1L4.4 143.7L5.4 144.5L4.0 146.3L4.7 147.9L4.1 149.6L4.6 150.7L4.4 152.0L3.7 153.4L3.0 154.5L4.9 155.9L3.9 156.7L5.1 158.1L4.6 160L0 160Z'/%3E%3C/svg%3E");
  position:relative}

/* ---------- het decor: een verlichte plek op het ivoor ---------- */
/* de track loopt tot de rand van het venster, zodat de snede en de schaduw van een brede kaart niet tegen de paginamarge worden afgeknipt */
.mt-track{position:relative;overflow-x:clip;margin-inline:calc(-1 * var(--m));padding-inline:var(--m)}
.mt-stage{position:relative;padding:clamp(12px,2vw,28px) 0 clamp(28px,3vw,44px);background:radial-gradient(ellipse 58% 52% at 50% 54%,#FEFCF7 0%,rgba(251,246,238,0) 100%)}
.mt-scene{position:relative;display:grid;place-items:center;perspective:calc(var(--pg-w) * 3.84);perspective-origin:50% 22%}
.mt-world{position:relative;width:calc(var(--pg-w) * 2);height:var(--pg-h);transform-style:preserve-3d;transform:none}
.mt-book{position:absolute;inset:0;transform-style:preserve-3d}

/* ---------- schaduw op tafel: vooraf getekend, alleen opacity en transform bewegen ---------- */
.mt-ts{position:absolute;top:0;width:50%;height:100%;pointer-events:none;transform:translateZ(-5.5px)}
.mt-ts.r{left:50%}
.mt-ts.l{left:0;transform-origin:100% 50%}
.mt-ts i{position:absolute;inset:0;border-radius:6px;background:rgb(var(--t-ink))}
.mt-ts .amb{inset:3% 1% -1.5% 3%;filter:blur(30px);opacity:.30;transform:translate(14px,30px)}
.mt-ts .mid{filter:blur(9px);opacity:.16;transform:translate(4px,9px)}
.mt-ts .tight{filter:blur(2px);opacity:.22;transform:translate(1px,2px)}

/* ---------- de snede: het karton is blauw geschilderd, zichtbaar zodra de kaart draait ---------- */
.mt-edge{position:absolute;pointer-events:none}
.mt-base .bot{left:0;top:100%;width:100%;height:5px;transform-origin:50% 0;transform:rotateX(-90deg);background:linear-gradient(180deg,#F4EFE6 0 1.4px,#DCD4C5 1.4px 1.8px,var(--painted))}
.mt-base .fore{left:100%;top:0;width:5px;height:100%;transform-origin:0 50%;transform:rotateY(90deg);background:linear-gradient(90deg,#F4EFE6 0 1.4px,#DCD4C5 1.4px 1.8px,var(--painted))}
.mt-leaf .fore{left:100%;top:0;width:4px;height:100%;transform-origin:0 50%;transform:translateZ(4.5px) rotateY(90deg);background:linear-gradient(90deg,var(--painted))}
.mt-leaf .bot{left:0;top:100%;width:100%;height:4px;transform-origin:50% 0;transform:translateZ(4.5px) rotateX(-90deg);background:linear-gradient(180deg,var(--painted))}

/* ---------- de vlakken ---------- */
.mt-base{position:absolute;left:50%;top:0;width:50%;height:100%;transform-style:preserve-3d}
.mt-face{position:absolute;inset:0;border-radius:3px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--board)}
.mt-face::before{content:"";position:absolute;inset:0;background:var(--linen),var(--grain);opacity:.06;pointer-events:none}
.mt-rpage{border-radius:0 3px 3px 0;transform:translateZ(0)}

/* de vellen: drie op elkaar, bovenste met een geschept randje aan de snijkant */
.mt-sheets{position:absolute;inset:14px 20px 20px 12px;filter:drop-shadow(0 .5px .5px rgba(var(--t-ink),.22)) drop-shadow(1px 3px 4px rgba(var(--t-ink),.10))}
.mt-sheets::before,.mt-sheets::after{content:"";position:absolute;inset:0;-webkit-mask:linear-gradient(#000 0 0) 0 0/calc(100% - 7px) 100% no-repeat,var(--deckle) 100% 37px/7px 160px repeat-y;mask:linear-gradient(#000 0 0) 0 0/calc(100% - 7px) 100% no-repeat,var(--deckle) 100% 37px/7px 160px repeat-y}
.mt-sheets::before{background:#ECE7DD;transform:translate(3.2px,3px)}
.mt-sheets::after{background:#F6F2EA;transform:translate(1.6px,1.5px);-webkit-mask-position:0 0,100% 91px;mask-position:0 0,100% 91px}
.mt-sheet{position:absolute;inset:0;z-index:1;background:var(--sheet);-webkit-mask:linear-gradient(#000 0 0) 0 0/calc(100% - 7px) 100% no-repeat,var(--deckle) 100% 0/7px 160px repeat-y;mask:linear-gradient(#000 0 0) 0 0/calc(100% - 7px) 100% no-repeat,var(--deckle) 100% 0/7px 160px repeat-y}
.mt-sheet::before,.mt-liner::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.08;pointer-events:none}

/* ---------- de voorkant (de klep) ---------- */
.mt-leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;transform:rotateY(-180deg)}
@media (hover:hover) and (pointer:fine){.mt.closed .mt-leaf{cursor:pointer}}
.mt-front{border-radius:0 3px 3px 0;transform:translateZ(4.5px);display:flex;flex-direction:column;align-items:center;text-align:center}
.mt-front::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%,rgba(var(--t-ink),.025) 72%,rgba(var(--t-ink),.05) 100%)}
.mt-back{border-radius:3px 0 0 3px;transform:rotateY(180deg)}

/* foliedubbellijn in delftblauw, met één glans die eroverheen trekt */
.mt-foil{position:absolute;inset:calc(var(--pg-w) * .04);border:1.75px solid var(--delft);border-radius:1px;pointer-events:none}
.mt-foil::after{content:"";position:absolute;inset:5px;border:.75px solid var(--delft)}
.mt-glint{border-color:rgba(255,255,255,.95);-webkit-mask:linear-gradient(105deg,transparent 42%,#000 50%,transparent 58%) 0 0/300% 100% no-repeat;mask:linear-gradient(105deg,transparent 42%,#000 50%,transparent 58%) 0 0/300% 100% no-repeat;opacity:0}
.mt-glint::after{border-color:rgba(255,255,255,.95)}

.mt-cover-in{position:relative;z-index:1;height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--pg-w) * .12) 0 calc(var(--pg-w) * .1)}
/* blindpreeg: het monogram in de kleur van het bord, alleen licht en schaduw; het vierkantje in messing */
.mt-cmark{display:block;width:calc(var(--pg-w) * .2);color:#FCFAF5;filter:drop-shadow(-.9px -1px 0 rgba(var(--t-ink),.30)) drop-shadow(1px 1.2px 0 #fff) drop-shadow(-.4px -.6px 1.6px rgba(var(--t-ink),.14));margin-top:auto}
.mt-cmark svg{display:block;width:100%;height:auto}
/* MENU in folie, iets in het bord gedrukt */
.mt-cmenu{position:relative;font-family:var(--f-display);font-weight:800;font-stretch:72%;text-transform:uppercase;font-size:calc(var(--pg-w) * .25);line-height:.8;letter-spacing:.02em;padding:.1em 0 0 .02em;margin-top:calc(var(--pg-w) * .075);color:var(--delft)}
.mt-ctitle{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.34em;font-size:max(10px,calc(var(--pg-w) * .021));color:var(--delft);margin-top:calc(var(--pg-w) * .065);padding-left:.34em}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .mt-cmenu{color:transparent;-webkit-text-fill-color:transparent;background:linear-gradient(100deg,rgba(255,255,255,0) 0 43%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 57% 100%) var(--gl,100%) 0/300% 100% no-repeat,linear-gradient(174deg,#4464A2 0%,#2F4A7A 40%,#213760 63%,#38568F 100%);-webkit-background-clip:text;background-clip:text}
  .mt-cmenu::before{content:attr(data-t);position:absolute;inset:0;z-index:-1;padding:inherit;background:none;color:transparent;-webkit-text-fill-color:transparent;text-shadow:-.8px -1px .4px rgba(var(--t-ink),.34),.9px 1px .3px rgba(255,255,255,.95)}
  .mt-ctitle{background:linear-gradient(100deg,var(--delft) 0 44%,#AFC0DC 50%,var(--delft) 56% 100%) var(--gl,100%) 0/300% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.mt-crule{display:block;width:calc(var(--pg-w) * .07);height:0;border-top:.75px solid var(--delft);margin:calc(var(--pg-w) * .035) auto 0;opacity:.9}
.mt-chouse{font-family:var(--f-body);font-weight:600;font-size:max(10px,calc(var(--pg-w) * .016));letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);margin-top:auto;padding-left:.3em}

/* ---------- het licht op elk vlak: overlays, alleen opacity beweegt ---------- */
.mt-shade,.mt-cast,.mt-spec,.mt-gutter{position:absolute;inset:0;pointer-events:none;z-index:3}
.mt-shade{background:rgb(var(--t-shade));opacity:0}
.mt-cast{right:auto;width:100%;transform-origin:0 50%;background:linear-gradient(90deg,rgba(var(--t-shade),.95) 0%,rgba(var(--t-shade),.75) 45%,rgba(var(--t-shade),0) 100%);opacity:0}
.mt-spec{background:radial-gradient(circle at var(--sx,30%) var(--sy,20%),rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 42%),radial-gradient(circle at var(--sx,30%) var(--sy,20%),rgba(var(--t-ink),0) 35%,rgba(var(--t-ink),.05) 110%);opacity:0;transition:opacity .5s}
.mt.tilting .mt-spec{opacity:1}
/* de vouw: een dal met een lichtrandje waar het papier bolt */
.mt-gutter.r{right:auto;width:10%;background:linear-gradient(90deg,rgba(var(--t-ink),.15) 0,rgba(var(--t-ink),.07) 3px,rgba(var(--t-ink),.035) 14px,rgba(var(--t-ink),.012) 55%,rgba(var(--t-ink),0) 100%)}
.mt-gutter.l{left:auto;width:10%;background:linear-gradient(270deg,rgba(var(--t-ink),.17) 0,rgba(var(--t-ink),.08) 3px,rgba(var(--t-ink),.04) 14px,rgba(var(--t-ink),.014) 55%,rgba(var(--t-ink),0) 100%)}
/* licht over de hele spreiding: linksboven helder, rechtsonder iets dieper */
.mt-light{position:absolute;inset:0;pointer-events:none;z-index:2}
.mt-back .mt-light{z-index:0;background:linear-gradient(128deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 45%,rgba(var(--t-ink),.015) 100%)}
.mt-rpage .mt-light{background:linear-gradient(128deg,rgba(var(--t-ink),0) 0%,rgba(var(--t-ink),.015) 50%,rgba(var(--t-ink),.045) 100%)}

/* ---------- binnenkant voorkant: linnen omslag + gladde schutbladzijde ---------- */
.mt-liner{position:absolute;inset:12px;background:var(--sheet);border-radius:1px;box-shadow:0 0 0 .5px rgba(var(--t-ink),.10),0 1px 1.5px rgba(var(--t-ink),.10)}

/* ---------- de drukvorm: gecentreerd, stil, veel lucht ---------- */
.mt-print{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(var(--pg-h) * .056) 7% calc(var(--pg-h) * .028);font-size:clamp(13.5px,calc(var(--pg-w) * .026),17.5px);line-height:1.5;color:var(--ink)}
.mt-head{display:flex;flex-direction:column;align-items:center;gap:.6em;min-height:2.95em;justify-content:flex-end}
.mt-head svg{display:block;width:2.1em;height:auto;color:var(--delft)}
.mt-head p{font-family:var(--f-body);font-weight:600;font-size:max(10px,.72em);letter-spacing:.28em;text-transform:uppercase;color:var(--delft);padding-left:.28em}
.mt-hair{width:2.6em;border-top:.75px solid rgba(47,74,122,.45);margin-top:.85em}
.mt-courses{display:flex;flex-direction:column;align-items:center;margin-top:1.15em}
.mt-course{display:flex;flex-direction:column;align-items:center}
.mt-n{font-family:var(--f-display);font-weight:700;font-size:max(10px,.78em);letter-spacing:.24em;text-transform:uppercase;color:var(--delft);padding-left:.24em}
.mt-t{font-family:var(--f-display);font-weight:800;font-stretch:72%;text-transform:uppercase;font-size:1.98em;line-height:.95;letter-spacing:-.003em;color:var(--ink);margin-top:.32em;text-wrap:balance;max-width:9.5em}
.mt-meta{font-size:.9em;color:var(--ink-soft);margin-top:.55em;letter-spacing:.01em}
.mt-meta b{font-weight:600;color:var(--delft)}
.mt-d{font-size:1em;line-height:1.5;color:var(--ink-soft);max-width:27.5em;margin-top:.55em;text-wrap:pretty}
.mt-by{font-style:italic;font-size:.95em;color:var(--delft);margin-top:.55em}
/* tussen de gangen: het vierkantje uit het logo, in messing */
.mt-orn{display:block;width:4.6em;height:.8em;margin:.95em auto;color:var(--brass)}
.mt-foot{margin-top:auto;padding-top:.8em;font-style:italic;font-size:1.02em;color:var(--delft)}
.mt-folio{font-size:max(10px,.68em);letter-spacing:.24em;color:var(--ink-soft);margin-top:.9em}
.mt-print.l .mt-folio{margin-top:auto}

/* ---------- het koord in de vouw, met een knoop en twee losse eindjes ---------- */
.mt-cord{position:absolute;left:50%;top:0;height:100%;width:0;transform:translateZ(1.5px);pointer-events:none}
.mt-cord-line{position:absolute;left:-1.4px;width:2.8px;top:-2px;bottom:-2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0) 40%,rgba(255,255,255,.22) 55%,rgba(0,0,0,.25)),repeating-linear-gradient(-58deg,#2F4A7A 0 1.7px,#243C66 1.7px 2.5px,#3B5A90 2.5px 3.4px);
  box-shadow:1.2px .8px 1.4px rgba(var(--t-ink),.2)}
.mt-tails{position:absolute;left:0;top:calc(100% + 1px);width:0;height:0;transform-origin:0 0;filter:drop-shadow(2px 3px 2px rgba(var(--t-ink),.2))}
.mt-knot{position:absolute;left:-6.5px;top:-3px;width:13px;height:11px;border-radius:48% 52% 50% 50%;background:radial-gradient(circle at 34% 30%,#5372A8 0,#2F4A7A 46%,#1E3356 100%);box-shadow:inset -1px -1px 1px rgba(0,0,0,.2)}
.mt-knot::before{content:"";position:absolute;left:3px;top:2px;width:7px;height:2px;border-radius:2px;background:rgba(255,255,255,.18);transform:rotate(-28deg)}
.mt-tail{position:absolute;left:-1.8px;top:3px;width:3.6px;border-radius:2px 2px 1px 1px;transform-origin:50% 0;-webkit-mask-image:linear-gradient(180deg,#000 72%,rgba(0,0,0,.35) 90%,transparent);mask-image:linear-gradient(180deg,#000 72%,rgba(0,0,0,.35) 90%,transparent);
  background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0) 40%,rgba(255,255,255,.2) 55%,rgba(0,0,0,.25)),repeating-linear-gradient(-58deg,#2F4A7A 0 1.7px,#243C66 1.7px 2.5px,#3B5A90 2.5px 3.4px)}
.mt-tail.a{height:23px;transform:rotate(11deg)}
.mt-tail.b{height:19px;transform:rotate(-7deg)}

/* ---------- 3D: vastgezette bühne, het script bestuurt alles ---------- */
[data-mt="3d"] .mt-track{height:220svh}
[data-mt="3d"] .mt-stage{position:sticky;top:0;height:100svh;padding:72px 0 14px;display:grid;align-items:center}
[data-mt="3d"] .mt-back{transform:translateZ(1.5px) rotateY(180deg)}
[data-mt="3d"] .mt-rest .mt-back{transform:rotateY(180deg)}
.mt-live .mt-world,.mt-live .mt-leaf{will-change:transform}
/* in 3D komt het koord pas in beeld als de klep opengaat */
[data-mt="3d"] .mt-cord-line{opacity:0}

/* lage schermen: iets strakker zetten zodat alles op de bladzijde past */
@media (min-width:1000px) and (max-height:820px){
  .mt{--pg-w:min(max(470px, calc((100svh - 112px) / 1.18)), calc(50vw - var(--m)), 780px);--pg-h:calc(var(--pg-w) * 1.18)}
}
/* en op smalle vensters (1000-1199px breed, zoals een iPad Pro staand) is de bladzijde smal: dezelfde strakkere zetting */
@media (min-width:1000px) and (max-height:820px),(min-width:1000px) and (max-width:1199px){
  .mt-t{font-size:1.8em}
  .mt-d{line-height:1.45}
  .mt-orn{margin:.75em auto}
  .mt-courses{margin-top:.9em}
  .mt-head{min-height:0}
  .mt-by,.mt-meta,.mt-d{margin-top:.45em}
}

/* ---------- telefoon en smalle vensters (onder 1000px): de voorkant slaat één keer om, daarna de bladzijden onder elkaar ---------- */
@media (max-width:999px){
  .mt{--pg-w:min(calc(100vw - 2 * var(--m)), 520px)}
  .mt-stage{padding:8px 0 0;background:none}
  .mt-scene{perspective:none;display:block}
  .mt-world{width:100%;max-width:520px;margin:0 auto;height:auto;transform:none!important}
  .mt-book{position:relative;display:grid;gap:22px;transform:none!important;perspective:1800px}
  .mt-ts,.mt-edge,.mt-shade,.mt-cast,.mt-spec,.mt-gutter,.mt-glint,.mt-cord{display:none!important}
  .mt-leaf,.mt-base{position:relative;left:auto;width:auto;height:auto;transform:none;cursor:auto}
  .mt-leaf{display:grid}
  .mt-leaf>.mt-face{grid-area:1/1}
  .mt-face{position:relative;inset:auto;transform:none;backface-visibility:visible;-webkit-backface-visibility:visible;box-shadow:0 1px 2px rgba(22,32,48,.12),0 3px 8px rgba(22,32,48,.07),0 26px 40px -26px rgba(22,32,48,.30)}
  .mt-front{display:none}
  .mt-cover-in{height:auto;flex:1;padding:calc(var(--pg-w) * .2) 0 calc(var(--pg-w) * .12)}
  .mt-liner,.mt-sheets{position:relative;inset:auto;margin:10px}
  .mt-sheet{position:relative}
  .mt-sheets::before,.mt-sheets::after{z-index:0}
  .mt-print{height:auto;padding:36px 22px 22px;font-size:15.5px}
  .mt-t{font-size:2.1em}
  .mt-head{min-height:0}
  .mt-foot{margin-top:1.6em}
  .mt-print.l .mt-folio{margin-top:1.5em}
  /* de omslag: wit bord, blauwe lijn, blauwe snede; draait om zijn midden naar bladzijde 2 */
  [data-mt="flip"] .mt-leaf{transform-style:preserve-3d;transform-origin:50% 50%;transform:rotateY(0deg)}
  [data-mt="flip"] .mt-front{display:flex;transform:translateZ(1px);backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px 3px 3px 2px;box-shadow:1.5px 2px 0 #2F4A7A,0 1px 2px rgba(22,32,48,.12),0 3px 8px rgba(22,32,48,.07),0 26px 40px -26px rgba(22,32,48,.30)}
  [data-mt="flip"] .mt-back{transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden}
  [data-mt="flip"] .mt-open .mt-leaf{animation:mt-flip .95s cubic-bezier(.55,0,.3,1) both}
  [data-mt="flip"] .mt-done .mt-leaf{animation:none;transform:none}
  [data-mt="flip"] .mt-done .mt-back{transform:none}
  [data-mt="flip"] .mt-done .mt-front{display:none}
}
@keyframes mt-flip{
  0%{transform:rotateY(0deg)}
  74%{transform:rotateY(-186deg);animation-timing-function:cubic-bezier(.3,0,.35,1)}
  100%{transform:rotateY(-180deg)}
}

/* hoog contrast: folie en preeg worden gewone tekst */
@media (forced-colors:active){
  .mt-ctitle,.mt-cmenu{color:CanvasText;background:none;-webkit-text-fill-color:currentColor}
  .mt-cmenu::before{display:none}
  .mt-cmark{filter:none;color:CanvasText}
}
@media (forced-colors:active){.brand .wm,.foot-wm .wm{color:CanvasText}}

/* ======================================================================
   Plan v6 · ronde 2 (28-09): systemen. Eigenaarsblokken hierboven blijven.
   Rollen, beeld, hover, beweging en plaatshouders. Zie plan.md, hoofdstuk 5, 6 en 8.
   ====================================================================== */

/* cijfers: één regel voor elk getal op de site (Archivo 800, smal) */
.num,.zk-big,.zk-step .t,.prose .pull .num{font-family:var(--f-display);font-weight:800;font-stretch:72%;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
/* overige tekst in de koppenletter: 700, gewone kast (keuze 13: geen dunne koppen) */
.qa summary,.atlist b,.dag .g,.prose .body h2{font-family:var(--f-display);font-weight:700;font-stretch:100%;text-transform:none;letter-spacing:-.01em}

/* sectiekoppen en rijen: vaste maten in plaats van inline stijlen */
.sec-head{margin-bottom:clamp(36px,4vw,60px)}
.sec-head.gap-top{margin-top:clamp(96px,11vw,170px)}
.lead-under{margin-top:16px}
.cta-row{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:clamp(48px,5vw,72px)}
.cta-note{margin-top:12px}
.page-head .back{grid-column:1/13;align-self:start;margin-bottom:28px}
.page-head .case-meta{grid-column:1/13}

/* home: de intro tussen twee nachtblauwe vlakken is op een breed scherm minstens één scherm hoog (B19) */
.intro2 .side-body.d.h2{margin-bottom:clamp(36px,4vw,60px)}
@media(min-width:900px){.intro2{min-height:calc(100svh - 72px);align-content:center}}

/* Aanpak: kop en "Wat je krijgt" in één raster; de film staat vanaf de eerste regel rechts */
.make-head{padding-top:clamp(56px,7vw,112px)}
.make-intro{grid-column:1/8}
.make-intro .h1{max-width:9em}
.make-intro .lead{margin-top:28px;color:var(--ink-soft)}
.make-intro .note{margin-top:16px;max-width:34em;font-size:.92rem;color:var(--ink-soft)}
.make-intro .side-h{display:block;margin:clamp(48px,5vw,72px) 0 14px;padding-top:0}
@media(max-width:899px){.make-intro{grid-column:1/-1}}

/* films: onderschrift met pauzeknop; op de telefoon een eigen film onder elke regel */
.make-media[hidden]{display:none}
.make-media figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.film-toggle{font-size:.86rem;white-space:nowrap}
.mk-row .make-media.own{position:static;grid-column:auto;margin:20px 0 4px;max-width:420px}
.mk-row .pl{font-family:var(--f-body);font-weight:600;font-size:1.05rem;color:var(--ink);margin-bottom:8px}
.mk-row ul,.two ul{margin-top:12px;border-top:1px solid var(--line)}
.mk-row li,.two li{padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--ink)}
.mk-row .tl{display:inline-block;margin-top:14px}
.huis ul{display:grid}
.huis li{padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.huis li:first-child{padding-top:0}

/* nachtblauwe band voor "Een dag" (Aanpak) */
.band-ink .d,.band-ink .h2{color:var(--on-ink)}
.band-ink .lead.muted{color:var(--on-ink-soft)}
.band-ink .nu{color:var(--riviera)}
.band-ink .dag{border-top-color:rgba(244,238,228,.2)}
.band-ink .dag li{border-bottom-color:rgba(244,238,228,.14)}
.band-ink .dag .t,.band-ink .dag .g,.band-ink .dag .p{color:var(--on-ink)}
.band-ink .dag .h{color:var(--on-ink-soft)}
.band-ink .dag li.now{background:rgba(244,238,228,.07);box-shadow:-12px 0 0 rgba(244,238,228,.07),12px 0 0 rgba(244,238,228,.07)}
.band-ink .dag li.now .t::after{color:var(--riviera)}

/* beeld: drie verhoudingen; schermen staan los op ivoor met een lijn van 1px; plaatshouders met een stippellijn */
.frame.r43{aspect-ratio:4/3}
.frame.r45{aspect-ratio:4/5}
.frame.r169{aspect-ratio:16/9}
.frame.screen{position:relative;background:var(--paper)}
.frame.screen img{position:absolute;top:0;bottom:0;left:0;right:auto;margin:auto 0;width:auto;height:auto;max-width:100%;max-height:100%;border:1px solid var(--line)}  /* links uitgelijnd: de linkerrand van het scherm staat op de lijn van het onderschrift */
.frame.need{display:grid;place-items:center;padding:24px;background:var(--paper);border:1px dashed var(--ink-soft);text-align:center}
.frame.need p{max-width:24em;font-size:.86rem;line-height:1.5;color:var(--ink-soft)}
.frame.need b{display:block;margin-bottom:6px;font-weight:600;color:var(--ink)}

@media(max-width:899px){.frame.need.r169{aspect-ratio:4/5}}  /* plaatshouder F5: op de telefoon staand, zoals de foto die komt */

/* één hoverstijl: delftblauw (op ivoor) + lijn van 1px op .2em + pijl 4px; geen zoom, geen verschuiven, geen dimmen */
a.work .name,a.caserow h3,.next-case .d,.qa summary span{text-decoration:underline;text-decoration-thickness:max(1px,.03em);text-underline-offset:.2em;text-decoration-color:transparent;transition:color .25s var(--ease),text-decoration-color .25s var(--ease)}
a.work:hover .name,a.work:focus-visible .name,a.caserow:hover h3,a.caserow:focus-visible h3,.next-case:hover .d,.next-case:focus-visible .d,.qa summary:hover span,.qa summary:focus-visible span,.mk-row[data-film]:hover .mk-t,.mk-row[data-film]:focus-visible .mk-t{color:var(--delft);text-decoration-color:currentColor}
button:hover .arr,button:focus-visible .arr,a:focus-visible .arr{transform:translateX(4px)}
.foot .tl,.hero2 .tl,.band-ink .tl{text-decoration-color:rgba(244,238,228,.45)}
.foot .tl:hover,.hero2 .tl:hover,.band-ink .tl:hover,.foot .tl:focus-visible,.hero2 .tl:focus-visible,.band-ink .tl:focus-visible{text-decoration-color:currentColor}

/* focus op nachtblauw: riviera (8,9:1) */
.foot :focus-visible,.band-ink :focus-visible,.hero2 :focus-visible,.zk-know :focus-visible{outline-color:var(--riviera)}

/* minder beweging: een volwaardig alternatief (vangnet; JS doet de rest) */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}}

/* Groep A · aanvullingen bij ronde 2 (28-09)
   Het woord: een kleine pauzeknop op de lijn van de hero-voet, rechts (WCAG 2.2.2; het rollen blijft, keuze 12; B11 blijft open).
   v6.js maakt hem alleen bij volledige beweging. Hij staat absoluut, dus er verspringt niets; tikzone 44px, zichtbaar 28px. */
.hero2-foot{position:relative}
.roll-toggle{position:absolute;top:0;right:-8px;z-index:1;display:grid;place-items:center;width:44px;height:44px;transform:translateY(-50%);color:var(--on-ink-soft);transition:color .25s var(--ease)}
.roll-ico{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(244,238,228,.45);border-radius:50%;background:var(--ink);transition:border-color .25s var(--ease)}
.roll-ico::before{content:"";box-sizing:border-box;width:8px;height:10px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.roll-toggle[aria-pressed="true"] .roll-ico::before{width:0;height:0;margin-left:3px;border-right:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.roll-toggle:hover,.roll-toggle:focus-visible{color:var(--on-ink)}
.roll-toggle:hover .roll-ico,.roll-toggle:focus-visible .roll-ico{border-color:currentColor}
.roll-toggle:focus-visible{outline:0}
.roll-toggle:focus-visible .roll-ico{outline:2px solid var(--riviera);outline-offset:3px}
/* films: het onderschrift mag afbreken naast de knop; de knop in een eigen film op de telefoon krijgt geen marge van .mk-row .tl */
.mm-cap{flex:1 1 auto;min-width:0}
.film-toggle[hidden]{display:none}
.mk-row .film-toggle{margin-top:0}

/* Controle na de bouw (28-09): kleine reparaties, geen nieuwe kleuren of letters
   - studies op de home: kop en zin onder elkaar op de telefoon (zoals elke andere sectiekop), anders breekt het label over vijf regels
   - "Al het werk →" en "Naar het werk →": de pijl blijft bij de tekst
   - bronnen (Waarom, artikel) en de keuzeknoppen op Contact krijgen dezelfde hover als de rest (6c) */
@media(max-width:899px){.si-head{grid-template-columns:minmax(0,1fr)}.si-head .side-h,.si-head p{grid-column:1/-1}.si-head .side-h{padding-bottom:10px}}
.work-head .tl{white-space:nowrap}
.fact .src a,.prose .bronnen a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(47,74,122,.4);transition:color .25s var(--ease),text-decoration-color .25s var(--ease)}
.band-ink .fact .src a{text-decoration-color:rgba(244,238,228,.45)}
.prose .bronnen a:hover,.prose .bronnen a:focus-visible{color:var(--delft);text-decoration-color:currentColor}
.band-ink .fact .src a:hover,.band-ink .fact .src a:focus-visible{text-decoration-color:currentColor}
.seg button{transition:color .25s var(--ease),border-color .25s var(--ease)}
.seg button:not([aria-pressed="true"]):hover,.seg button:not([aria-pressed="true"]):focus-visible{color:var(--delft);border-color:var(--delft);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.si-float{height:auto}   /* het zwevende beeld heeft nu width/height in de HTML; de hoogte volgt de 4:5 */

/* ---------- voet: Stefan en Wouter samen, gecentreerd (keuze eigenaar, naar voorbeeld Rouchelli) ---------- */
.foot-center{display:flex!important;flex-direction:column;align-items:center;text-align:center}
.foot-center .foot-label{color:var(--riviera);font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.foot-center .h1{color:var(--on-ink)}
.foot-center .foot-pitch{margin:22px auto 0;text-align:center}
.duo{display:flex;justify-content:center;gap:clamp(36px,7vw,96px);margin-top:clamp(40px,5vw,64px)}
.duo-p{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.duo-ring{display:block;width:clamp(104px,10vw,128px);aspect-ratio:1;padding:5px;border:1px solid rgba(169,193,227,.6);border-radius:50%}
.duo-ring img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.duo-p:hover .duo-ring img{filter:none}
.duo-p figcaption{display:grid;gap:2px}
.duo-p b{font-family:var(--f-display);font-weight:700;font-size:1.15rem;color:var(--on-ink)}
.duo-p figcaption span{font-size:.86rem;color:var(--on-ink-soft)}
.duo-line{margin:28px 0 26px;color:var(--on-ink-soft);font-size:1.05rem}
.btn.btn-frame{box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px rgba(22,32,48,.4)}
.btn.btn-frame:hover{box-shadow:inset 0 0 0 3px var(--riviera),inset 0 0 0 4px rgba(22,32,48,.4)}
@media(max-width:599px){.duo{gap:28px}.duo-ring{width:96px}}
@media(prefers-reduced-motion:reduce){.duo-ring img{transition:none}}
/* Stefan en Wouter onder de intro op ivoor (keuze eigenaar): links uitgelijnd, blauwe ring */
.duo.duo-light{justify-content:flex-start;gap:clamp(32px,5vw,64px);margin-top:clamp(40px,5vw,64px)}
.duo-light .duo-ring{border-color:rgba(47,74,122,.45)}
.duo-light .duo-p b{color:var(--ink)}
.duo-light .duo-p figcaption span{color:var(--ink-soft)}
.foot-center .duo-line{margin-top:34px}
/* klein, als contactpersonen (keuze eigenaar) */
.duo-wrap{margin-top:clamp(36px,4vw,56px);padding-top:20px;border-top:1px solid var(--line)}
.duo-label{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--delft);margin-bottom:14px}
.duo.duo-light{margin-top:0;gap:18px 40px;flex-wrap:wrap}
.duo-light .duo-p{flex-direction:row;gap:14px;align-items:center;text-align:left}
.duo-light .duo-ring{width:64px;padding:3px}
.duo-light .duo-p b{font-size:1rem}
.duo-light .duo-p figcaption span{font-size:.84rem}
/* hospitality-adviseurs iets groter (keuze eigenaar) */
.duo-label{font-size:.84rem}
.duo-light .duo-ring{width:88px;padding:4px}
.duo-light .duo-p{gap:18px}
.duo-light .duo-p b{font-size:1.2rem}
.duo-light .duo-p figcaption span{font-size:.95rem}
.duo.duo-light{gap:22px 56px}
@media(max-width:599px){.duo-light .duo-ring{width:76px}}
/* voet: Stefan en Wouter terug, compacter en in logische volgorde (keuze eigenaar) */
.foot-center .foot-label{margin-bottom:12px}
.foot-center .foot-pitch{margin-top:16px!important}
.duo.duo-foot{margin-top:clamp(28px,3vw,40px);gap:clamp(32px,5vw,64px)}
.duo-foot .duo-ring{width:96px}
.duo-foot .duo-p{gap:10px}
.foot-center .duo-line{margin:18px 0 22px!important}
@media(max-width:599px){.duo-foot .duo-ring{width:84px}}
.foot-center{gap:0!important;row-gap:0!important}
.foot-center .h1{margin-top:0}
/* voet: iets meer lucht rond de regel onder Stefan en Wouter (28-09) */
.foot-center .duo-line{margin:30px 0 32px!important}
.foot-center .foot-pitch{max-width:36em!important}

/* ======================================================================
   28-09 · Beige en blauw. Alle lichte vlakken krijgen de beige van v4/v5
   (#F4ECDF) in plaats van ivoor. De menukaart en invulvelden blijven wit.
   paper-2 schuift een tint dieper, zodat accentvlakken op beige zichtbaar blijven.
   ====================================================================== */
:root{--paper:#F4ECDF;--paper-2:#F4ECDF;--sand:#F4ECDF;--line:#D6CAB5}   /* 29-09 KLEUR (eigenaar): één beige; paper-2 en sand vallen samen met paper */

/* Contact: Stefan (eerste aanspreekpunt) groot bovenaan, Wouter kleiner eronder (28-09) */
.duo.duo-light.cd{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:22px;margin:0}
.cd .cd-tag{display:block;font-style:normal;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--delft);margin-bottom:6px}
.cd .cd-main .duo-ring{width:96px}
.cd .cd-sec .duo-ring{width:64px;padding:3px}
.cd .cd-sec b{font-size:1.05rem}
.cd .cd-sec figcaption span{font-size:.88rem}
.cd .duo-p figcaption span{max-width:17em}
.cd .cd-sec .duo-ring{margin-inline:16px}   /* ring onder die van Stefan, tekst op één lijn */
@media(max-width:899px){.page-head .aside.cd{margin-top:36px}}

/* ======================================================================
   28-09 beige: fixes (na de contrast- en beeldaudit van de beige omzetting)
   ====================================================================== */
/* hero: de kop weer wit zoals goedgekeurd (was var(--paper), werd daardoor beige) */
.hero2-h,.hero2 .tl{color:#FBF6EE}
/* menukaart-decor: het lichte plekje loopt nu binnen het podium uit, geen naden aan de zijkant, zachter op beige */
@media (min-width:1000px){
  .mt-stage{background:radial-gradient(closest-side at 50% 54%,rgba(251,246,238,.75),rgba(251,246,238,0))}
}
/* contact: na versturen verdwijnt het formulier echt; het bedankvlak neemt zijn plek in */
.form[hidden]{display:none}
.form-done{align-self:start}
/* contact: voorbeeldtekst in het witte veld ruim leesbaar (6.3:1 in plaats van 4.6:1) */
.field input::placeholder{color:var(--ink-soft);opacity:1}
/* contact-kop: de ringen krimpen niet mee, zodat Stefan 96px blijft en de tekst van Wouter op één lijn staat */
.cd .duo-ring{flex:none}
/* korte voet (contact): geen lege nachtblauwe strook boven de kolommen */
.foot .inner>.foot-cols:first-child{margin-top:0}

/* ======================================================================
   28-09 · Ervaringen op de home (keuze eigenaar 25). Nachtblauwe band tussen
   "wat we maken" en "Zo begin je", zodat het ritme donker, licht, donker wordt.
   Zelfde bouw als Waarom: label links, zin rechts in dezelfde maat, daaronder
   drie gelijke kolommen van precies vier rasterkolommen, bovenaan gelijk, elk
   onder een dunne lijn in de lijnkleur van de band. De reactie houdt rechts een
   goot vrij, zoals de cijfers. Archivo 700 in gewone kast (vet, zoals elke zin
   in Archivo, keuze 13), tussen „ ” in riviera; de „ hangt in de goot, zodat de tekst op
   de lijn begint. De afzender in twee regels, zoals het sectielabel: de rol in
   riviera, de zaak en de stad in on-ink-soft; de afzenders staan op één hoogte.
   Geen namen, foto's of cijfers. Nu voorbeeldteksten (B25).
   Beweging: [data-in] + [data-stagger] (80 ms per kolom); zonder beweging staat alles er meteen.
   ====================================================================== */
.ervaringen .statement{grid-column:4/13;text-wrap:balance}
.quotes{grid-column:1/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);row-gap:44px;margin-top:clamp(56px,7vw,110px)}
.quote{margin:0;display:flex;flex-direction:column;padding-top:28px;border-top:1px solid rgba(244,238,228,.2)}
.quote blockquote{margin:0;padding-right:var(--g)}
.quote p{font-family:var(--f-display);font-weight:700;font-stretch:90%;text-transform:none;letter-spacing:-.012em;font-size:clamp(1.2rem,.7rem + 1.05vw,1.6rem);line-height:1.38;color:var(--on-ink);max-width:21em;text-wrap:pretty}
.q-o{margin-left:-.42em}
.q-o,.q-c{color:var(--riviera)}
.quote figcaption{margin-top:auto;padding-top:28px;display:grid;gap:3px;font-family:var(--f-body);font-size:.78rem;font-weight:600;line-height:1.45;letter-spacing:.16em;text-transform:uppercase}
.q-who{color:var(--riviera)}
.q-where{color:var(--on-ink-soft)}
.quotes-todo{grid-column:1/13;margin-top:clamp(36px,4vw,56px)}
@media(max-width:899px){
  .quotes{grid-template-columns:minmax(0,1fr)}
  .quote blockquote{padding-right:0}
  .quote p{font-size:1.3rem}
  .quote figcaption{padding-top:18px}
}

/* ======================================================================
   29-09 · MOBIELE REVIEW (drie testers: responsive, functioneel, a11y/kleur)
   ====================================================================== */
/* ankers: elk doel met een id valt onder de menubalk (72 px) in plaats van eronder
   (o.a. "wat jij zelf doet" → #zelf op Aanpak). :where() = specificiteit nul, eigen scroll-margins winnen */
:where([id]){scroll-margin-top:88px}

/* telefoonmenu: past ook liggend (390 px hoog), scrolt zelf, de pagina erachter staat stil (v6.js zet html.menu-open) */
@media(max-width:899px){
  .top.open .navlinks{overflow-y:auto;overscroll-behavior:contain}
  html.menu-open{overflow:hidden}
}
@media(max-width:899px) and (max-height:500px){
  .top.open .navlinks{font-size:1.5rem;gap:0;padding-block:10px}
  .top.open .navlinks a:not(.check){display:flex;align-items:center;min-height:44px}
  .top.open .navlinks .check{margin-top:8px}
}

/* koppen: geen los woord op de laatste regel; lopende tekst iets rustiger afgebroken */
h1,h2,h3,.d,.h1,.h2,.vrg-q,.st-sh{text-wrap:balance}
.lead,.st-what,.st-kop-lead,.st-rest-t,blockquote{text-wrap:pretty}

/* raakvlakken op aanraakschermen (ook tablet en telefoon liggend): voetlinks en woordmerk minstens 44 px */
@media(pointer:coarse){
  .foot-cols li:has(> a){padding:0}
  .foot-cols a{display:inline-flex;align-items:center;min-height:44px}
  .foot-wm{padding-block:14px;margin-block:-14px}
}
.foot-cols a{min-width:44px}
/* losse tekstlinks (terug, website van de zaak, "Zo gaat het advies"): 44 px hoog zonder dat de regel verspringt */
p.back>a.tl,dd>a.tl,li>a.tl{display:inline-block;padding-block:11px;margin-block:-11px}
/* bronnen onder het artikel: iets meer lucht en een hoger raakvlak */
.prose .bronnen li{margin-bottom:1.4em}
.prose .bronnen a{display:inline-block;padding-block:10px;margin-block:-10px}



/* ======================================================================
   29-09 · alles beige, alleen de voet blauw (eigenaar, bindend; zie
   v6-lab/home-opties/_brief.md "KLEUR" + "Aanvulling" + "Correctie").
   - Alle secties, banden en panelen: de lichte beige --paper (#F4ECDF).
     Alleen de voet (.foot / .h-voet) blijft nachtblauw; die staat hier niet in.
   - Accenten alleen in blauwtinten: nachtblauw (tekst), delft (accenten,
     links, lijnen), ink-soft (bijtekst). Riviera alleen nog op de voet.
   - Geen messing meer: het token --brass wijst voortaan naar delft.
   - Foto's, films, toestellen (telefoon, laptop, e-reader) en de eigen
     huisstijlen in mock-ups (Rouchelli, Salento, de merken in de studies)
     houden hun kleuren. Tekst op de donkere hero-foto blijft licht.
   Dit blok staat in v6.css, dat als eerste laadt: elke regel heeft daarom
   :root ervoor, zodat hij wint van dezelfde regel in knoppen.css, home.css
   en pages/*.css (zonder !important).
   ====================================================================== */
:root{--brass:var(--delft)}

/* ---------- 1 · voormalige nachtblauwe banden en panelen worden beige ----------
   .band-ink: home Waarom en Ervaringen, Aanpak "Een dag", Studio "Hoe we werken";
   .st-band: de studies ("Wat we zagen" en het slot).
   De lichte tokens wijzen binnen deze vlakken naar de donkere, zodat elke regel
   met var(--on-ink) / var(--on-ink-soft) / var(--riviera) vanzelf klopt. */
:root .band-ink,:root .st-band{
  --on-ink:var(--ink);--on-ink-soft:var(--ink-soft);--riviera:var(--delft);
  background:var(--paper);color:var(--ink)}

/* lijnen: de lichte haarlijnen worden delft, zacht */
:root .band-ink .facts{border-top-color:rgba(47,74,122,.22)}
:root .band-ink .fact+.fact{border-left-color:rgba(47,74,122,.22)}
@media(max-width:899px){:root .band-ink .fact+.fact{border-top-color:rgba(47,74,122,.22)}}
:root .band-ink .dag{border-top-color:rgba(47,74,122,.22)}
:root .band-ink .dag li{border-bottom-color:rgba(47,74,122,.16)}
:root .band-ink .dag li.now{background:rgba(47,74,122,.06);box-shadow:-12px 0 0 rgba(47,74,122,.06),12px 0 0 rgba(47,74,122,.06)}
:root .band-ink .tl,:root .band-ink .fact .src a{text-decoration-color:rgba(47,74,122,.4)}
:root .band-ink .tl:hover,:root .band-ink .tl:focus-visible,:root .band-ink .fact .src a:hover,:root .band-ink .fact .src a:focus-visible{text-decoration-color:currentColor}
:root .band-ink .duo-ring,:root .st-band .duo-ring{border-color:rgba(47,74,122,.35)}

/* knoppen: de lichte knop (.btn.light) in een voormalige band wordt de gewone
   nachtblauwe knop met de beige binnenlijn */
:root .band-ink .btn.light,:root .st-band .btn.light{background:var(--ink);color:var(--paper)}
:root .band-ink .btn.light:hover,:root .st-band .btn.light:hover,
:root .band-ink .btn.light:focus-visible,:root .st-band .btn.light:focus-visible{background:var(--delft);color:var(--paper)}
:root .band-ink .btn.light::after,:root .st-band .btn.light::after{border-color:var(--sand)}

/* home · Waarom: haarlijnen tussen de cijfers; het scherm krijgt een lijn van 1px in plaats van het donkere vlak */
:root .h-waarom .wm-rows{border-top-color:rgba(47,74,122,.22)}
:root .h-waarom .wm-row{border-bottom-color:rgba(47,74,122,.22)}
:root .h-waarom .wm-screen{background:var(--paper);box-shadow:0 0 0 1px rgba(47,74,122,.2)}
/* home · Waarom: het onderschrift onder de Rouchelli-telefoon groter en duidelijker (eigenaar 29-09) */
:root .h-waarom .wm-fig figcaption{margin-top:18px;font-size:clamp(1rem,.95rem + .22vw,1.12rem);font-weight:500;line-height:1.45;color:var(--ink)}

/* home · Ervaringen: kolomlijnen */
:root .h-ervaringen .er-cols{border-top-color:rgba(47,74,122,.22)}
:root .h-ervaringen .er-col+.er-col{border-left-color:rgba(47,74,122,.22)}
@media(max-width:899px){:root .h-ervaringen .er-col+.er-col{border-top-color:rgba(47,74,122,.22)}}

/* Aanpak · Een dag: het fotovlak en de plakkende klok op de telefoon beige, lijnen delft */
:root .ad-stack{background:var(--paper)}
:root .ad-rows li{border-bottom-color:rgba(47,74,122,.16)}
@media(max-width:899px){
  :root .ad-stick{background:var(--paper);border-bottom-color:rgba(47,74,122,.2)}
}

/* Studio · Hoe we werken: de tijdlijn in delft, de ring om de portretjes beige */
:root .st-vrail{background:rgba(47,74,122,.18)}
:root .st-tlw img{background:var(--paper);box-shadow:0 0 0 4px var(--paper)}

/* Aanpak · Een dag: de rijen die je niet leest staan op 70 % (aanpak-1.js). Op beige haalt ink-soft
   dan geen AA meer (3,0:1); de bijtekst in deze rijen is daarom nachtblauw: gedimd 5,7:1, actief 15:1. */
:root .ad .ad-t,:root .ad .ad-hh{color:var(--ink)}
/* Studies: pages/studie.css zet .st-band zelf op beige (29-09); hier alleen het vangnet hierboven. */

/* Journal: de nachtblauwe plaat achter het scherm wordt beige met een lijn van 1px */
:root .jn-plate{background:var(--paper);border:1px solid rgba(47,74,122,.2)}
:root .jn-scherm img{outline-color:rgba(22,32,48,.1)}
:root .jn-wide{background:var(--paper)}

/* ---------- 2 · home-hero op de telefoon en staand: zin en knop onder de foto op beige ---------- */
@media (max-width:699px),(max-aspect-ratio:4/5){
  :root .h-hero{background:var(--paper);color:var(--ink)}
  :root .h-hero .h-hero-scrim{background:
    linear-gradient(to bottom,rgba(var(--sc),.62) 0,rgba(var(--sc),.46) 16%,rgba(var(--sc),.18) 28%,rgba(var(--sc),0) 36%),
    linear-gradient(to top,var(--paper) 0,rgba(244,236,223,.7) 5%,rgba(244,236,223,.25) 12%,rgba(244,236,223,0) 20%)}
  :root .h-hero .h-hero-foot{--on-ink:var(--ink);color:var(--ink)}
  :root .h-hero .h-hero-foot .h-hero-lead{color:var(--ink)}
  :root .h-hero .h-hero-foot .tl{color:var(--ink);text-decoration-color:rgba(47,74,122,.4)}
  :root .h-hero .h-hero-foot .tl:hover,:root .h-hero .h-hero-foot .tl:focus-visible{color:var(--delft);text-decoration-color:currentColor}
  :root .h-hero .h-hero-foot :focus-visible{outline-color:var(--delft)}
  :root .h-hero .h-hero-foot .btn.light{background:var(--ink);color:var(--paper)}
  :root .h-hero .h-hero-foot .btn.light:hover,:root .h-hero .h-hero-foot .btn.light:focus-visible{background:var(--delft)}
  :root .h-hero .h-hero-foot .btn.light::after{border-color:var(--sand)}
}

/* ---------- 3 · home: een korte, dunne scheidingslijn tussen de secties (eigenaar 29-09) ----------
   Midden tussen twee secties, met evenveel ruimte erboven als eronder (--hs = helft van --ritme-std).
   Niet tussen hero en brief (de hero loopt over in de brief) en niet boven de voet. */
body[data-page="home"]{--hs:calc(var(--ritme-std) / 2)}
:root body[data-page="home"] #main>.h-brief{padding-bottom:var(--hs)}
:root body[data-page="home"] #main>.h-intro.sec,
:root body[data-page="home"] #main>.h-werk.sec,
:root body[data-page="home"] #main>.h-zaak.sec,
:root body[data-page="home"] #main>.h-maken.sec{padding-block:var(--hs)}
:root body[data-page="home"] #main>.h-waarom>.sec{padding-block:var(--hs)}
:root body[data-page="home"] #main>.h-ervaringen>.sec{padding-top:var(--hs)}
:root body[data-page="home"] #main>section:not(.h-hero):not(.h-brief){position:relative}
:root body[data-page="home"] #main>section:not(.h-hero):not(.h-brief)::before{
  content:"";position:absolute;z-index:1;top:-2px;left:50%;width:clamp(64px,6.67vw,96px);height:1px;
  transform:translateX(-50%);background:rgba(47,74,122,.35);pointer-events:none}

/* ######################################################################
   RITME · 29-09 · één logica voor de ruimte tussen secties
   Spec: concepts/v6-plan/ritme-secties.md
   Gemeten van inkt tot inkt (tekst, beeld, knop, kopregel of kader).
     KORT       120 px op 1440 ·  68 px op 390   het blok zet hetzelfde doel voort
     STANDAARD  160 px op 1440 ·  96 px op 390   ander doel (de gewone maat)
     RUIM       216 px op 1440 · 128 px op 390   na een openingsfoto, rond de slot-oproep
   Elke .sec draagt de helft boven en de helft onder zich. Twee secties samen
   maken zo precies één maat, ook als .sec genest zit (section > .wrap.sec).
   Kies de maat per overgang met --r-boven / --r-onder op de sectie.
   Onder de menubalk: --ritme-kop (= KORT). Boven de voet: blok in knoppen.css.
   ###################################################################### */
:root{
  --ritme-kort:clamp(68px,calc(48.7px + 4.95vw),120px);
  --ritme-std:clamp(96px,calc(72.2px + 6.1vw),160px);
  --ritme-ruim:clamp(128px,calc(95.3px + 8.38vw),216px);
  --ritme-kop:var(--ritme-kort);
}
.sec{padding-block:calc(var(--r-boven,var(--ritme-std)) / 2) calc(var(--r-onder,var(--ritme-std)) / 2)}
.sec+.sec,.band-ink+.sec,.band-ink+section .sec{padding-top:calc(var(--r-boven,var(--ritme-std)) / 2)}

/* opening */
.page-head{padding-top:var(--ritme-kop);padding-bottom:calc(var(--ritme-std) / 2)}
.page-head .case-meta{margin-bottom:0}
.page-head:has(+ .case-img,+ .st-beeld){padding-bottom:var(--ritme-kort)}   /* foto hoort bij de opening */

/* case-pagina's (Rouchelli, Salento) */
.case-text{--r-boven:var(--ritme-kort);--r-onder:calc(var(--ritme-kort) - 6px)}   /* - 6px: 3 px eigen onderlucht van de laatste tekstregel (U4) */
.case-text+.case-text{--r-boven:calc(var(--ritme-kort) - 6px)}                  /* - 6px: 3 px eigen bovenlucht van de eerste regel (U4) */
.case-img+.case-text{padding-top:var(--ritme-ruim)}                           /* na de openingsfoto */
.case-text+.case-pair{margin-top:calc(var(--ritme-kort) / 2)}
.case-pair+.case-pair{margin-top:var(--ritme-kort)}
.case-pair+.sec{padding-top:var(--ritme-std)}                                 /* fotopaar heeft geen eigen helft */
section:has(>.next-case){padding-top:calc(var(--ritme-std) / 2)}
section:has(>.next-case)+.sec{padding-top:var(--ritme-ruim)}                  /* Salento: slot-oproep */
@media(max-width:899px){.case-text h2{padding-top:0}}

/* 20-10: case met één beeld (Ferdasco, lege Instagram-plek eruit): het beeld breed en in het midden */
@media(min-width:900px){.case-pair--een .a{grid-column:2/12}}