/* ======================================================================
   Knoppen · 28-09 · één stijl op alle pagina's: een vlak met een dunne
   binnenlijn op 3 px van de rand (zoals een gedrukt kaartje).
   - Op beige: nachtblauwe knop met een beige binnenlijn (--sand).
   - Op nachtblauw: beige knop met een blauwe binnenlijn (--delft).
   Volle kleuren, geen transparantie: half-doorzichtig beige op nachtblauw
   (en andersom) mengt tot grijs, en dan leest de lijn niet als beige/blauw.
   De lijn is een ::after; hij blijft staan als de knop bij hover kleurt
   (nachtblauw -> delft, beige -> riviera) en blijft daarop goed zichtbaar.
   ====================================================================== */
.btn{position:relative;isolation:isolate}
.btn::after{
  content:"";position:absolute;inset:3px;pointer-events:none;
  border:1px solid var(--sand)}
.btn.light::after{border-color:var(--delft)}
.btn.btn-frame,.btn.btn-frame:hover{box-shadow:none}   /* oude binnenlijn van de voetknop vervalt */

/* Knop in het mobiele menu: alleen als het menu ook echt als overlay open
   staat (< 900 px). Zonder deze grens krijgt de tekstlink "Plan je merkscan" in
   de desktopkop een los kader als je het menu opent en het venster verbreedt. */
@media(max-width:899px){
  .top.open .navlinks .check{position:relative;isolation:isolate}
  .top.open .navlinks .check::after{
    content:"";position:absolute;inset:3px;pointer-events:none;
    border:1px solid var(--sand)}
}


/* ######################################################################
   VOET · "Een tafel voor twee." (optie A, verfijnd, keuzeronde 28-09)
   Staat hier en niet in v6.css: de voet (FOOT_TOP in _build.py) staat op
   elke pagina behalve Contact (foot="kort"), en knoppen.css laadt ook op
   elke pagina. Bron: v6-lab/port/voet/section.css.
   ###################################################################### */
/* ======================================================================
   Voet · Een tafel voor twee (optie A, verfijnd) · 28-09
   Alles onder .h-voet. Bouwt voort op de bestaande voetregels in v6.css
   (.foot-center, .foot-label, .foot-pitch, .duo, .duo-foot, .duo-line) en
   op de knop uit knoppen.css; hier alleen wat deze versie nieuw maakt:
   - de pitch: de belofte (eerste zin) in on-ink, de onderbouwing in
     on-ink-soft, zodat de belofte als eerste leest; regels in balans;
   - de knopregel en de geruststelling eronder;
   - de twee portretten na elkaar (150 ms), zoals in optie A;
   - de knop wijst naar de twee mensen: hover of focus op de knop kleurt
     beide portretten in (dezelfde overgang als hover op een portret).
   Beweging: [data-in]/[data-stagger] uit v6.js; zonder beweging staat alles er.
   ====================================================================== */
.h-voet .h1{text-wrap:balance}
.h-voet .foot-pitch{max-width:39em!important;text-wrap:balance}
.h-voet .h-voet-nb{white-space:nowrap}   /* "Instagram-advies" breekt nooit op het streepje */
.h-voet .foot-pitch strong{font-weight:600;color:var(--on-ink)}
.h-voet .h-voet-cta{margin:0}
.h-voet .h-voet-note{margin-top:16px;font-size:.86rem;line-height:1.5;letter-spacing:.02em;color:var(--on-ink-soft)}

/* portretten na elkaar: 150 ms in plaats van de gewone 80 ms */
.motion .h-voet .duo-p.pre.in{transition-delay:calc(var(--i,0) * 150ms)}

/* de knop wijst naar Stefan en Wouter */
.h-voet:has(.btn:hover) .duo-ring img,
.h-voet:has(.btn:focus-visible) .duo-ring img{filter:none}

@media(max-width:599px){
  .h-voet .foot-pitch{text-wrap:pretty}
  .h-voet .duo-line span{display:block}   /* één zin per regel */
  /* gereedschap (28-09, 21st.dev "Call to Action": gecentreerd, gebalanceerd, met lucht tot de rand):
     op 390 px liepen de titels onder de portretten tot de schermrand; nu blijven ze binnen de goot */
  .h-voet .duo-foot{gap:28px}
  .h-voet .duo-p{max-width:calc(50% - 14px)}
  .h-voet .duo-p figcaption span{text-wrap:balance;line-height:1.35}
}
/* minder beweging (UI/UX Pro Max "Reduced Motion"): de portretten kleuren direct in, zonder overgang */
@media(prefers-reduced-motion:reduce){.h-voet .duo-ring img{transition:none}}

/* voetkolommen: de koppen zijn h3 (was h4; na de h2 "Een tafel voor twee." sloeg de volgorde een niveau over) */
.foot-cols h3{font-size:.84rem;color:var(--on-ink-soft);margin-bottom:10px;font-weight:400}

/* telefoon: raakvlakken van minstens 44 px in de voet (brief). Alleen rijen met een link worden hoger;
   rijen met gewone tekst houden hun ruimte. */
@media(max-width:599px){
  .foot-cols li:has(> a){padding:0}
  .foot-cols a{display:inline-flex;align-items:center;min-height:44px}
}
/* het woordmerk in de voet: raakvlak van 44 px op elke breedte (14-10 mobieltest: was op desktop 16 px hoog) */
.foot-wm{padding-block:14px;margin-block:-14px}


/* ######################################################################
   TOETSENBORD (controle 28-09) · geldt op elke pagina
   - Wat nog moet opkomen (.pre) en de focus krijgt, staat er meteen: de browser schuift een link
     tegen de onderrand, waar hij anders onzichtbaar bleef (WCAG 2.4.7).
   - Een link, knop of veld met focus schuift nooit onder de menubalk (72 px) of tegen de onderrand
     (WCAG 2.4.11). :where() houdt de specificiteit op nul, dus eigen scroll-margins winnen.
   ###################################################################### */
.motion .pre:focus-within{opacity:1;transform:none;transition:none}
:where(a[href],button,input,select,textarea,summary){scroll-margin-top:88px;scroll-margin-bottom:64px}


/* ######################################################################
   ANSICHTKAART (eigenaar 29-09): "alle foto's weer met zo'n witte lijn, zoals bij Rouchelli.com".
   Elke inhoudsfoto ligt als een afdruk op het beige: een warmwitte rand (dezelfde kleur als de
   Rouchelli-villa op werk.html, #FBF7F0) en een lage, zachte schaduw. Zonder draaiing: rustig en
   symmetrisch. Hoeken recht, zoals een afdruk.
   Techniek: de rand is een ::after-laag over de foto (inset box-shadow), dus de maat van het blok
   verandert niet, object-fit en parallax van de img blijven zoals ze waren, en bij een clip-path-
   onthulling komt de rand mee met de foto. De schaduw staat op het blok zelf. Na een onthulling laat
   Motion "clip-path: inset(0%)" inline staan, wat de schaduw zou afknippen; alleen in die rusttoestand
   zetten we clip-path uit (tijdens de animatie staat er iets anders inline, dus die blijft intact).
   Wel:  home      .h-zaak .hz-img (3), .h-zaak .hz-mimg (telefoon), .h-maken .hm-sk-ph
         werk      .wk-kop__ph (2), .wk-studie__ph (3), .wk-zaak__win   (.wk-case__ph had het al)
         rouchelli .case-img .frame, zonder .screen (schermbeelden), .need (plaatshouder) en .eigen (merkgids in eigen verhouding, 14-10)
         aanpak    .ad-stack (dagfoto's), .wie-frame, .begin-fr, .vrg-fr
         studio    .st-duo/.st-trio .st-ph (rechthoekige portretten), .st-card .st-ph (Stapel), .st-werk .st-fig, .st-stage .st-th
         journal   .jn-wide
         studies   .st-beeld .st-beeld__f, .st-paar .st-foto__f
   Niet: de hero's, laptop/telefoon/e-reader/browser en hun schermen, merkgids/boek/menu/papier
         (.ak-fr, .atl-ph, .st-gids, .bh-richt, .jn-scherm, .st-tegel), ronde portretten, logo's,
         iconen, video's.
   ###################################################################### */
:root{--pk-c:#FBF7F0;--pk-w:clamp(8px,calc(.45vw + 5px),13px);
  --pk-s:0 1px 2px rgba(22,32,48,.10),0 22px 34px -22px rgba(22,32,48,.42)}
:is(.h-zaak .hz-img,.h-zaak .hz-mimg,.h-maken .hm-sk-ph,
    .wk-kop__ph,.wk-studie__ph,.wk-zaak__win,
    .case-img .frame:not(.screen):not(.need):not(.eigen),
    .ad-stack,.wie-frame,.begin-fr,.vrg-fr,
    .st-duo .st-ph,.st-trio .st-ph,.st-card .st-ph,.st-werk .st-fig,.st-stage .st-th,
    .jn-wide,
    .st-beeld .st-beeld__f,.st-paar .st-foto__f){
  position:relative;border-radius:0;box-shadow:var(--pk-s)}
:is(.h-zaak .hz-img,.h-zaak .hz-mimg,.h-maken .hm-sk-ph,
    .wk-kop__ph,.wk-studie__ph,.wk-zaak__win,
    .case-img .frame:not(.screen):not(.need):not(.eigen),
    .ad-stack,.wie-frame,.begin-fr,.vrg-fr,
    .st-duo .st-ph,.st-trio .st-ph,.st-card .st-ph,.st-werk .st-fig,.st-stage .st-th,
    .jn-wide,
    .st-beeld .st-beeld__f,.st-paar .st-foto__f)::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  box-shadow:inset 0 0 0 var(--pk-w) var(--pk-c),inset 0 0 0 calc(var(--pk-w) + 1px) rgba(22,32,48,.07)}
/* kleine afdrukken (portretten en duimnagels op Studio): smallere rand, kortere schaduw */
:is(.st-duo .st-ph,.st-trio .st-ph,.st-stage .st-th){
  --pk-w:clamp(5px,calc(.3vw + 3px),8px);--pk-s:0 1px 2px rgba(22,32,48,.10),0 14px 22px -14px rgba(22,32,48,.40)}
/* Aanpak op de telefoon: de dagfoto wordt een duimnagel van 56-76 px */
@media(max-width:899px){.ad-stack{--pk-w:3px;--pk-s:0 1px 2px rgba(22,32,48,.12),0 8px 12px -8px rgba(22,32,48,.35)}}
/* rusttoestand na de onthulling: clip-path uit, zodat de schaduw zichtbaar is */
:is(.h-maken .hm-sk-ph,.wk-kop__ph,.wk-studie__ph,.case-img .frame,.st-paar .st-foto__f)[style*="clip-path: inset(0%)"]{clip-path:none!important}

/* ######################################################################
   29-09 · ruimte boven de voet: één maat op elke pagina (eigenaar: "tussen de testimonials en
   de blauwe voet is te veel beige ruimte"). Gemeten van de onderkant van de laatste inhoud
   (tekst, knop, beeld, kaart) tot de bovenkant van de nachtblauwe voet:
   ± 120-132 px op desktop, ± 96 px op 1280, 68 px op de telefoon.
   - vervangt de maat uit v6.css (main>:last-child, clamp(80px,9vw,136px));
   - home (Ervaringen) en studies (Bronnen): de binnenste .sec gaf er nog een tweede
     onderpadding bij (± 158 px), die vervalt;
   - journal-artikel: de marge onder het laatste bronitem vervalt.
   Raakt alleen het laatste blok voor de voet.
   ###################################################################### */
main>:last-child{padding-bottom:clamp(68px,calc(15vw - 96px),132px)!important}
main>.h-ervaringen:last-child>.sec,
main>.st:last-child>.st-bronnen:last-child{padding-bottom:0!important}
main>article:last-child .bronnen>li:last-child{margin-bottom:0}


/* ######################################################################
   VOET · NIEUWSBRIEF "De Journal per e-mail" (29-09, vraag eigenaar)
   Eigen rij tussen de voetkolommen en de onderregel, op elke pagina (ook foot="kort").
   Links kop en zin, rechts het veld met knop. Beige tekst en lijnen op nachtblauw;
   de knop is de lichte voetknop (beige vlak, delft binnenlijn). Gedrag: nieuwsbrief.js
   ###################################################################### */
.foot-nb{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:24px;align-items:start;margin-top:clamp(48px,5vw,72px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(244,238,228,.18)}
.foot-nb__tekst{grid-column:1/6}
.foot-nb__h{margin:0;font-family:var(--f-display);font-style:normal;font-weight:700;font-stretch:90%;letter-spacing:-.02em;text-transform:none;font-size:clamp(1.35rem,1.15rem + .6vw,1.75rem);line-height:1.15;color:var(--on-ink)}
.foot-nb__s{margin:10px 0 0;max-width:30em;font-size:.98rem;line-height:1.6;color:var(--on-ink-soft)}
.foot-nb__form{grid-column:7/13;margin:0}
.foot-nb__label{display:block;margin-bottom:8px;font-size:.84rem;color:var(--on-ink-soft)}
.foot-nb__rij{display:flex;gap:10px}
.foot-nb__rij input{flex:1;min-width:0;height:50px;padding:0 16px;border:1px solid rgba(244,238,228,.62);border-radius:0;background:#0F1826;color:var(--on-ink);font-family:var(--f-body);font-style:normal;font-size:16px;-webkit-appearance:none;appearance:none;transition:border-color .2s var(--ease,ease)}
.foot-nb__rij input::placeholder{color:var(--on-ink-soft);opacity:.85}
.foot-nb__rij input:hover{border-color:var(--on-ink)}
.foot-nb__rij input:focus-visible{outline:2px solid var(--riviera);outline-offset:2px;border-color:var(--on-ink)}
.foot-nb__rij input[aria-invalid="true"]{border-color:var(--riviera)}
.foot-nb__rij .btn{flex:none;min-height:50px;border:0;cursor:pointer;font-family:var(--f-body)}
.foot-nb__rij .btn:focus-visible{outline:2px solid var(--riviera);outline-offset:3px}
.foot-nb__ok{margin:10px 0 0;font-size:.9rem;line-height:1.5;color:var(--riviera);min-height:1.5em}
.foot-nb__ok:empty{min-height:0;margin:0}
.foot-nb.is-klaar .foot-nb__ok,.foot-nb__form.is-klaar .foot-nb__ok{color:var(--on-ink)}
.foot-nb__p{margin:12px 0 0;max-width:34em;font-size:.8rem;line-height:1.5;color:var(--on-ink-soft)}
@media(max-width:899px){
  .foot-nb__tekst,.foot-nb__form{grid-column:1/-1}
}
@media(max-width:599px){
  .foot-nb__rij{flex-direction:column}
  .foot-nb__rij input{flex:none}
  .foot-nb__rij .btn{justify-content:center}
}

/* 29-09 · op de Journal-pagina's staat het aanmeldblok al in de pagina zelf: geen tweede in de voet */
body[data-page="journal"] .foot-nb{display:none}

/* 14-10 mobieltest: op telefoons van ~320 px brak "App Stefan voor je merkscan →" over twee regels (MERKSCAN los, pijl
   ernaast). Iets minder binnenruimte en letterafstand houdt hem op één regel; de knop blijft 50 px hoog. */
@media(max-width:359px){.btn{padding-inline:16px;gap:8px;letter-spacing:.03em}}

/* 14-10 mobieltest: geen losse woorden op de laatste regel in de voet (nieuwsbrief, kolommen, onderregel) */
.foot :is(p,li,figcaption,span){text-wrap-style:pretty}

/* 14-10 ronde 2: woorden met een streepje die niet mogen afbreken (e-book, e-books) */
.nw{white-space:nowrap}

/* 20-10 mobieltest (eigenaar: "Sowieso moeten de CTA's op mobiel in het midden staan"): op de telefoon staat elke knop
   in het midden van de kolom, en de korte regel die bij de knop hoort gaat mee. Langere tekst rond een knop (het verhaal
   bij de zaken, het slot van het artikel, de tekst bij "Jouw zaak") blijft links lezen; alleen de knop zelf staat in het midden. */
@media(max-width:599px){
  a.btn,button.btn{display:flex;width:fit-content;max-width:100%;margin-inline:auto}
  /* :root body ervoor: weegt zwaarder dan de oudere mobiele regels per pagina (bijv. .h-werk .h-werk__cta{text-align:left}) */
  :root body :is(.hb-cta,.h-intro-cta,.wm-cta,.h-werk__cta,.ai-cta,.ad-end,.wie-cta,.atl-cta,.vrg-end,.st-werk-act,.nf-cta),
  :root body :is(.hb-cta,.h-intro-cta,.wm-cta,.h-werk__cta,.ai-cta,.ad-end,.wie-cta,.atl-cta,.vrg-end,.st-werk-act,.nf-cta)>*{text-align:center;align-items:center}
  /* de privacylink in de onderregel van de voet: raakvlak van 44 px (was 17 px) */
  .foot-pv{display:inline-block;padding-block:13px;margin-block:-13px}
}

/* 20-10 mobieltest, ronde 2 (review van alle pagina's op 390 px) */
@media(max-width:599px){
  /* geen losse woorden op de laatste regel */
  main :is(p,li,figcaption,dd){text-wrap:pretty}
  /* telefoonkaders op een telefoon: kleiner, zodat je ze als beeld leest en niet als echte knoppen */
  .frame.tel{width:min(100%,280px)}
  /* artikel: de regel onder de knop staat mee in het midden */
  .ja-cta__n{text-align:center}
  /* voet: gewone tekst (geen link) rustiger dan de links ernaast, met wat lucht tussen regels van twee regels hoog */
  .foot-cols li:not(:has(a)){color:var(--on-ink-soft);padding-block:5px}
}
/* voet zonder de pitch erboven (Contact, Privacy, 404): geen lege band en geen losse lijn bovenaan */
.foot .inner>.foot-cols:first-child{margin-top:0;padding-top:0;border-top:0}
.foot .inner:has(>.foot-cols:first-child){padding-top:clamp(56px,7vw,96px)}

/* ######################################################################
   20-10 · SYMMETRIE OP DE TELEFOON (eigenaar: "daaronder zie je heel veel ruimte en daarboven maar een klein beetje;
   ga elke sectie langs of er symmetrie in terugkomt, op alle pagina's"). Op de telefoon heeft elk blok evenveel ruimte
   boven als onder: één maat tussen alle blokken, KORT (68 px op 390), dezelfde maat als boven de voet. Gemeten van inkt tot
   inkt met scratchpad/mobiel/ritme.cjs. Home houdt de lijn in het midden (48 | lijn | 48); daar alleen hero en brief.
   ###################################################################### */
@media(max-width:599px){
  /* alle pagina's behalve home: elke .sec draagt de helft van KORT boven en onder zich */
  :root body:not([data-page="home"]) .sec{--r-boven:var(--ritme-kort)!important;--r-onder:var(--ritme-kort)!important}
  :root body:not([data-page="home"]) .page-head{padding-bottom:calc(var(--ritme-kort) / 2)}
  :root body:not([data-page="home"]) .page-head:has(+ .case-img,+ .case-pair){padding-bottom:var(--ritme-kort)}
  /* Portfolio: de explicite RUIM-maten vervallen */
  :root body .wk-zaak>.sec{padding-top:calc(var(--ritme-kort) / 2)}
  /* cases: na de openingsfoto en tussen de beeldparen dezelfde maat */
  :root body .case-img+.case-text,:root body .case-pair+.case-text{padding-top:calc(var(--ritme-kort) - 4px)}
  :root body .case-text+.case-pair,:root body .case-pair+.case-pair{margin-top:calc(var(--ritme-kort) - 34px)}
  :root body .case-pair+.case-pair{margin-top:calc(var(--ritme-kort) - 2px)}
  :root body .case-text+.case-pair{margin-top:calc(var(--ritme-kort) / 2)}
  :root body .case-pair+.sec{padding-top:calc(var(--ritme-kort) - 2px)}
  :root body section:has(>.next-case){padding-top:calc(var(--ritme-kort) / 2)}
  /* Werkwijze: begin- en vragenblok hadden expliciete maten */
  :root body .begin>.sec{padding-block:calc(var(--ritme-kort) / 2)}
  /* Privacy: kop en tekst horen bij elkaar, de tekst houdt de maat tot de voet */
  :root body .pv{padding-bottom:calc(var(--ritme-kort) - 19px)!important}
  :root body section:has(>.next-case)+.sec{padding-top:var(--ritme-kort)}
  :root body .aw+section.wrap{padding-block:calc(var(--ritme-kort) / 2)}   /* Werkwijze: blok zonder .sec tussen "Wat je krijgt" en het advies */
  :root body .page-head:has(+ .pv){padding-bottom:calc(var(--ritme-kort) - 6px)}
  /* home: de tekst onder de hero-foto staat in het midden tussen foto en brief (48 | tekst | 48) */
  :root body[data-page="home"] #main>.h-brief{padding-top:47px}
}