/* FNDR Studio, gedeelde schil voor de hele site.
 * Waarden komen uit /brand/tokens.css, dat is de SSOT. Inline hier nooit een token.
 * Paginaspecifieke regels horen in een <style> op de pagina zelf, niet hier.
 */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body),system-ui,sans-serif;font-weight:var(--w-body);font-size:var(--t-body);
  line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
::selection{background:var(--blue);color:#fff}

/* ── letter ─────────────────────────────────────────── */
.disp{font-family:var(--display),sans-serif;font-weight:var(--w-display);font-size:var(--t-display);
  letter-spacing:-.038em;line-height:.95;margin:0;text-wrap:balance}
.h2{font-family:var(--display),sans-serif;font-weight:var(--w-head);font-size:var(--t-h2);
  letter-spacing:-.032em;line-height:1.08;margin:0;text-wrap:balance}
.h3{font-weight:500;font-size:1.06rem;letter-spacing:-.016em;line-height:1.3;margin:0}
.lead{font-weight:var(--w-lead);font-size:var(--t-lead);line-height:1.55;letter-spacing:-.01em;
  max-width:44ch;margin:0}
.body{font-size:.97rem;line-height:1.68;color:var(--ink-70);max-width:64ch;margin:0}
strong{font-weight:500;color:var(--ink)}
.sm{font-size:.87rem;line-height:1.6;color:var(--ink-70);margin:0}
.tag{font-size:var(--t-label);color:var(--ink-45);margin:0}
.mono{font-family:var(--mono),monospace;font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ── raamwerk ───────────────────────────────────────── */
.wrap{padding-inline:var(--gut);max-width:calc(var(--content-max) + 13rem);margin-inline:auto;width:100%}
section{padding-block:var(--section);scroll-margin-top:var(--s8)}
.head{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:clamp(1.6rem,3.5vw,2.6rem)}
.intro{position:fixed;inset:0;z-index:200;background:var(--paper);display:grid;place-items:center;
  transition:opacity .7s var(--ease)}
.intro p{font-family:var(--display),sans-serif;font-weight:var(--w-head);
  font-size:clamp(1.05rem,.85rem + .9vw,1.55rem);letter-spacing:-.03em;margin:0;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .8s var(--ease)}
.intro.on p{opacity:1;transform:none}
.intro.out{opacity:0;pointer-events:none}
.intro.out p{transform:translateY(-18px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:.6rem;z-index:99;background:var(--paper);padding:.6rem 1rem;
  border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line-strong)}

/* ── binnenkomen ────────────────────────────────────── */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;
  transition:opacity var(--d-reveal) var(--ease) var(--rvd,0ms),
             transform var(--d-reveal) var(--ease) var(--rvd,0ms)}
/* cascade: kinderen van een groep komen na elkaar binnen. Zelfde reveal, zelfde duur,
   alleen een vertraging afgeleid van de motion-tokens. Niet als losse regel in de gids;
   gemeld als afgeleide van "binnenkomen 800 ms". */
.cascade>.rv:nth-child(2){--rvd:calc(var(--d-micro)*.7)}
.cascade>.rv:nth-child(3){--rvd:calc(var(--d-micro)*1.4)}
.cascade>.rv:nth-child(4){--rvd:calc(var(--d-micro)*2.1)}
.cascade>.rv:nth-child(5){--rvd:calc(var(--d-micro)*2.8)}

/* ── knop, radial reveal ────────────────────────────── */
.btn{position:relative;overflow:hidden;border:0;cursor:pointer;border-radius:var(--r-pill);
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-strong);padding:.9rem 1.6rem;
  display:inline-block;text-align:center}
.btn::before{content:"";position:absolute;inset:0;z-index:1;background:var(--blue);
  clip-path:circle(0% at var(--mx,50%) var(--my,50%));transition:clip-path var(--d-comp) var(--ease)}
.btn:hover::before,.btn:focus-visible::before{clip-path:circle(142% at var(--mx,50%) var(--my,50%))}
.btn:active::before{background:var(--blue-dk)}
.btn span{position:relative;z-index:2;font-size:.94rem;font-weight:500;letter-spacing:-.01em;
  color:var(--ink);transition:color var(--d-micro) var(--ease)}
.btn:hover span,.btn:focus-visible span{color:#fff}

/* ── liquid carve, alleen de hero-knop (gids §7) ────── */
.lqc{position:relative;display:inline-block;border:0;padding:0;background:none;cursor:pointer;
  font-family:inherit;line-height:0;border-radius:var(--r-pill)}
.lqc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lqc .sizer{display:block;padding:.95rem 1.7rem;font-size:.94rem;font-weight:500;
  letter-spacing:-.01em;line-height:1.2;color:transparent}
/* het gat: gedeeld door de hero-knop en de contactpil, zodat de duren uit paragraaf 7
   (erin in 300 ms, eruit in 500 ms) maar op één plek staan */
.lqc .hole,.pill .hole{transform-box:fill-box;transform-origin:center}
.lqc .hole-scale,.pill .hole-scale{transform:scale(0);transition:transform .5s cubic-bezier(.4,0,.6,1)}
.lqc.on .hole-scale,.pill.on .hole-scale{transform:scale(1);transition:transform .3s cubic-bezier(.18,.9,.28,1)}
.lqc rect.under{fill:var(--blue)}
.lqc rect.over{fill:var(--paper)}
.lqc .lq-w{fill:#fff}
.lqc .lq-i{fill:var(--ink)}

/* ── link ───────────────────────────────────────────── */
.swp{position:relative;display:inline-block;padding-bottom:3px}
.swp::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform var(--d-comp) var(--ease)}
.swp:hover::after,.swp:focus-visible::after{transform:scaleX(1)}

/* ── hero, met de navigatie erin ────────────────────── */
.hero{position:relative;isolation:isolate;overflow:hidden;
  height:calc(100svh - 42px);min-height:440px;
  display:flex;flex-direction:column;justify-content:center;
  --edge:calc((100% - min(100%, calc(var(--content-max) + 13rem))) / 2 + var(--gut))}
/* Descendant, niet direct kind: de hero staat sinds de AVIF-varianten in een <picture>,
   en dan is de img geen direct kind van .hero meer. Met > erin verliest het beeld zijn
   positionering en valt de hele hero uit elkaar. */
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 0%;z-index:0}
.hero::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.38;
  mix-blend-mode:overlay;pointer-events:none;z-index:2}
/* sluier vanaf links: de tekst staat links, de warme streep rechts blijft onaangeraakt */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,13,22,.74) 0%,rgba(10,13,22,.60) 26%,
    rgba(10,13,22,.28) 50%,transparent 72%)}
@media(max-aspect-ratio:13/10){
  .hero::before{background:linear-gradient(165deg,rgba(10,13,22,.26) 0%,rgba(10,13,22,.60) 34%,
    rgba(10,13,22,.74) 60%,rgba(10,13,22,.44) 100%)}
}
.hnav{position:absolute;top:0;left:0;right:0;z-index:4;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--s5);padding:var(--s4) var(--edge);color:#fff}
.hmark{display:flex;align-items:center;gap:.55rem;font-family:var(--display),sans-serif;
  font-weight:500;letter-spacing:-.02em;font-size:1rem;justify-self:start}
.hmark svg{width:19px;height:19px}
.hlinks{display:flex;gap:var(--s6);font-size:.9rem;justify-self:center}
.hlinks a{opacity:.82;transition:opacity var(--d-micro) var(--ease)}
.hlinks a:hover{opacity:1}
.hlinks .swp::after{background:#fff}
.hnav .hcta{justify-self:end;font-size:.9rem}
.hnav .hcta::after{background:#fff}
@media(max-width:860px){
  .hlinks{display:none}
  .hnav{grid-template-columns:1fr auto}
}
/* De leesmaat hangt aan de tekst, niet aan de marge. Dit stond op border-box met
   max-width:min(100%,64ch), en dan gaat de padding-inline van --edge er twee keer vanaf.
   Boven 1568 px groeit --edge elf keer zo hard als eronder ((w-1568)/2 + 5vw in plaats
   van 5vw), dus vanaf daar kromp de tekstkolom in plaats van te blijven staan: 433 px op
   1568, 288 op 1700, 68 op 1900. De lead viel uiteen in losse woorden en de knop kromp
   tot een cirkel. 48ch is wat de kolom op elk normaal desktopformaat toch al was, nu als
   maat van de tekst zelf; alleen een smallere viewport knijpt hem nog af. */
.heroin{box-sizing:content-box;position:relative;z-index:3;color:#fff;
  padding-inline:var(--edge);padding-block:var(--s7);
  display:flex;flex-direction:column;gap:var(--s5);align-items:flex-start;
  max-width:min(48ch,calc(100% - var(--edge)*2))}
.heroin .disp{max-width:12ch}
.heroin .lead{opacity:.88;color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
/* binnenkomen van de hero: verborgen zolang het intro er staat, en zodra dat wegvalt
   komt de tekst met de standaard-reveal omhoog, kop eerst, dan lead, dan knop, dan nav */
.hnav,.heroin>*{transition:opacity var(--d-reveal) var(--ease),transform var(--d-reveal) var(--ease)}
body:not(.go) .hnav{opacity:0}
body:not(.go) .heroin>*{opacity:0;transform:translateY(18px)}
.heroin>:nth-child(2){transition-delay:calc(var(--d-micro)*.9)}
.heroin>:nth-child(3){transition-delay:calc(var(--d-micro)*1.8)}
.hnav{transition-delay:calc(var(--d-micro)*2.4)}

/* ── manifesto ──────────────────────────────────────── */
/* De pauze na de hero: één gedachte, ruim gezet, rechts van het midden zodat de pagina
   niet elke sectie tegen de linkerrand hangt. Maat en toon van het citaatblok in de gids
   (1.3rem), gewicht 300 voor grote citaten, nadruk via strong op 500. */
#aanpak{padding-block:calc(var(--section)*1.3)}
.mani{margin:0;max-width:58ch;color:var(--ink);font-weight:var(--w-lead);
  font-size:clamp(1.08rem,.98rem + .55vw,1.3rem);line-height:1.6;letter-spacing:-.01em}
@media(min-width:900px){.mani{margin-left:auto}}

/* ── founder ────────────────────────────────────────── */
/* eigen --edge, zelfde berekening als de hero, zodat het portret tot de schermrand loopt */
.fnd-sec{--edge:calc((100% - min(100%, calc(var(--content-max) + 13rem))) / 2 + var(--gut))}
.fnd{display:grid;grid-template-columns:1fr;gap:var(--s6);padding-inline:var(--edge)}
.fnd-copy{display:flex;flex-direction:column;gap:var(--s5);justify-content:center}
.fnd-copy .body{max-width:none}
.fnd-copy .lead{max-width:52ch}
.fnd-fig{display:flex;flex-direction:column;gap:var(--s3)}
.fig{border-radius:var(--r-cell);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);
  aspect-ratio:4/5}
/* 112% hoog zodat de foto bij het maximale verschuif van 9% de onderrand nog dekt:
   1.12 - (0.09 x 1.12) = 1.019. Vooraf gereserveerd, zoals BRAND §7 eist. */
.fig img{width:100%;height:112%;object-fit:cover;object-position:58% 34%;will-change:transform}
@media(prefers-reduced-motion:reduce){.fig img{height:100%;transform:none !important}}
@media(min-width:900px){
  /* copy links, portret rechts en doorlopend tot de rand van het scherm */
  .fnd{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:var(--s8);
    align-items:center;padding-right:0}
  .fnd-copy{max-width:72ch}
  /* height, niet min-height: de img rekent zijn 100% tegen een definitieve hoogte af */
  .fig{aspect-ratio:auto;height:clamp(420px,44vw,620px);
    border-radius:var(--r-cell) 0 0 var(--r-cell)}
}

/* ── wat er misgaat: de numgrid uit de gids ─────────── */
/* Grote mono-cijfers boven kleine tekst, cellen met haarlijnen. Drie duidelijke stappen:
   kop 32, cijfer 24 mono, tekst 14 met een strong-aanzet op 500. */
.numgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-cell);
  overflow:hidden;list-style:none;margin:0;padding:0}
.numgrid li{background:var(--paper);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
/* het cijfer is een klein merkteken, niet de kop. De kop is de zin eronder. */
.numgrid .n{font-family:var(--mono),monospace;font-size:var(--t-label);color:var(--ink-45);
  letter-spacing:.01em;margin:0}
.numgrid .h3{margin:0}
.numgrid .sm{margin:0}

/* ── wat je nog tegenhoudt: kop links, bezwaren rechts ─ */
.obj{display:grid;grid-template-columns:1fr;gap:var(--s6)}
@media(min-width:900px){.obj{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:var(--s8)}}
.obj .head{margin:0}
/* de kop plakt terwijl de bezwaren eronderdoor schuiven, en laat vanzelf los aan de
   onderkant van de sectie: gewoon sticky binnen de natuurlijke hoogte, geen opgerekte
   scrolltrack. Onder 900 px en bij reduced motion staat alles gewoon gestapeld. */
@media(min-width:900px) and (prefers-reduced-motion:no-preference){
  .obj .head{position:sticky;top:clamp(96px,20vh,200px);align-self:start}
}
/* de kolom moet hoger zijn dan het scherm, anders heeft de sticky kop niets om
   langs te schuiven en past de hele sectie in één beeld. Dit is echte ruimte
   tussen de items, geen opgerekte lege track. */
/* De ruimte zit in de blokken, niet ertussen. Zelfde kolomhoogte (dus de sticky kop
   houdt nog steeds vast), maar de haarlijnen breken hem op zodat het niet als leegte leest. */
.obj-list{display:flex;flex-direction:column;gap:0}
.obj-it{border-top:1px solid var(--line);padding-block:var(--s6) var(--s8);
  display:flex;flex-direction:column;gap:var(--s2)}
.obj-it .body{max-width:56ch}

/* ── de vier lagen, met het sleepbeeld van de veldnotities ─────────── */
.rl{position:relative}
.rl-row{display:flex;justify-content:space-between;gap:var(--s5);align-items:baseline;
  padding:var(--s5) 0;border-bottom:1px solid var(--line);
  transition:opacity var(--d-comp) var(--ease)}
.rl-row:first-of-type{border-top:1px solid var(--line)}
.rl.hot .rl-row{opacity:.3}
.rl.hot .rl-row.on{opacity:1}
.rl .nm{font-family:var(--display),sans-serif;font-weight:500;letter-spacing:-.03em;
  font-size:clamp(1.25rem,2.9vw,2rem);line-height:1.06}
.rl .rt{font-size:var(--t-body);color:var(--ink-70);text-align:right;max-width:34ch;flex:none}
.reveal-img{position:absolute;top:0;left:0;width:min(28vw,240px);aspect-ratio:4/5;
  border-radius:var(--r-cell);overflow:hidden;pointer-events:none;opacity:0;z-index:5;
  will-change:transform;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);
  transition:opacity .55s var(--ease)}
.reveal-img.on{opacity:1}
.reveal-img canvas{width:100%;height:100%;display:block}
@media(max-width:860px){
  .reveal-img{display:none}
  .rl-row{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .rl .rt{text-align:left;max-width:none}
}

/* ── bento, drie surfaces ───────────────────────────── */
.bento{display:grid;gap:var(--bento-gap);grid-template-columns:1fr}
@media(min-width:900px){
  .bento{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
  .c-lead{grid-row:span 2}
}
.cell{position:relative;overflow:hidden;
  border-radius:var(--r-cell);box-shadow:inset 0 0 0 1px var(--line);background:var(--paper);
  padding:clamp(24px,2.4vw,38px);display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--s5);min-height:200px;
  transition:background var(--d-comp) var(--ease),box-shadow var(--d-comp) var(--ease)}
/* halftone: de enige plek waar blauw stil mag staan, want het is textuur en geen vlak */
.cell::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(circle,var(--blue) 1.4px,transparent 1.6px);
  background-size:8px 8px;
  -webkit-mask-image:radial-gradient(130% 110% at 100% 100%,#000 0%,transparent 68%);
  mask-image:radial-gradient(130% 110% at 100% 100%,#000 0%,transparent 68%);
  opacity:.22;transition:opacity var(--d-comp) var(--ease)}
.cell>*{position:relative;z-index:1}
.cell .h3,.cell .sm,.cell .tag{transition:color var(--d-micro) var(--ease)}
.cell:hover{box-shadow:inset 0 0 0 1px var(--blue)}
.cell:hover .h3,.cell:hover .sm,.cell:hover .tag{color:#fff}
/* radial reveal: het blauwe vlak groeit vanaf de cursor */
.cell::after{content:"";position:absolute;inset:0;z-index:0;background:var(--blue);
  clip-path:circle(0% at var(--mx,50%) var(--my,50%));
  transition:clip-path var(--d-comp) var(--ease)}
.cell:hover::after,.cell:focus-visible::after{clip-path:circle(142% at var(--mx,50%) var(--my,50%))}
/* en de stippen keren mee om: zelfde raster, zelfde masker, zelfde opacity, alleen wit */
.cell .tex{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle,#fff 1.4px,transparent 1.6px);
  background-size:8px 8px;
  -webkit-mask-image:radial-gradient(130% 110% at 100% 100%,#000 0%,transparent 68%);
  mask-image:radial-gradient(130% 110% at 100% 100%,#000 0%,transparent 68%);
  opacity:.22;
  clip-path:circle(0% at var(--mx,50%) var(--my,50%));
  transition:clip-path var(--d-comp) var(--ease)}
.cell:hover .tex,.cell:focus-visible .tex{clip-path:circle(142% at var(--mx,50%) var(--my,50%))}
.c-lead{min-height:340px;justify-content:flex-end;gap:var(--s5);
  box-shadow:inset 0 0 0 1px var(--blue);
  /* zachtere haarlijn, kleur blijft uit het token komen */
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--blue) 38%, transparent)}
.c-lead::before{opacity:.4}
/* de hoofdcel draagt de gedachte: kop op 1.25rem, zoals de grote bentocel in de gids */
.c-lead .h3{font-size:1.25rem}
.c-lead .sm{max-width:38ch}
.usp{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3);max-width:40ch}
.usp li{border-top:1px solid var(--line);padding-top:var(--s2);
  font-size:.87rem;line-height:1.5;color:var(--ink-70);
  transition:color var(--d-micro) var(--ease),border-color var(--d-micro) var(--ease)}
.cell:hover .usp li{color:#fff;border-color:rgba(255,255,255,.32)}

/* ── formulier ──────────────────────────────────────── */
/* Eén gecentreerde kolom. De gesplitste variant kreeg de twee kolommen nooit
   uitgelijnd: de textarea begon op kophoogte en de knop hing los onder de velden. */
.ask{max-width:660px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--s7)}
.ask .head{margin:0;align-items:center;text-align:center}
.ask .head .body{max-width:54ch;margin-inline:auto}
.ask-fields{display:flex;flex-direction:column;gap:var(--s4)}
.ask-foot{display:flex;flex-direction:column;align-items:center;gap:var(--s5)}
.alt{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center;
  justify-content:center;font-size:var(--t-body);color:var(--ink-70);margin:0}
/* baseline, niet center: .swp draagt 3px onderruimte voor het onderstreepje */
.alt{align-items:baseline}
.alt a{color:var(--ink)}
.field{position:relative}
.field input,.field textarea{font-family:inherit;font-size:var(--t-body);color:var(--ink);
  background:var(--paper-2);border:0;box-shadow:inset 0 0 0 1px transparent;border-radius:var(--r-cell);
  padding:1.05rem 1rem;width:100%;display:block;
  transition:background var(--d-comp) var(--ease),box-shadow var(--d-comp) var(--ease)}
.field textarea{min-height:clamp(160px,22vw,220px);resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus{outline:0;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--blue)}
/* label ligt in het veld en verdwijnt zodra er iets staat, niet al bij focus.
   De for/id-koppeling blijft intact, dus screenreaders houden het label. */
.field label{position:absolute;left:1rem;top:1.05rem;font-size:var(--t-body);
  line-height:1.6;color:var(--ink-45);pointer-events:none;
  transition:opacity var(--d-micro) var(--ease)}
.field input:not(:placeholder-shown)+label,
.field textarea:not(:placeholder-shown)+label{opacity:0}
.row2{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media(min-width:620px){.row2{grid-template-columns:1fr 1fr}}

/* het honeypot-veld staat in het formulier maar nergens in beeld */
.gotcha{display:none}

/* ── versturen (gids §9) ─────────────────────────────
   Blauw vollopen, label weg, spinner, spinner wordt een vinkje, daarna de toast.
   De maat ligt vooraf vast (§7): het label blijft in de flow en gaat alleen op
   opacity, spinner en vinkje liggen er absoluut overheen. De vulling loopt hier
   vanuit het midden en niet vanaf de cursor, want tijdens het versturen mag het
   effect niet meebewegen met wat het zelf verandert. */
/* stretch, niet krimpen op de inhoud: anders is het blok tijdens het versturen zo
   breed als de knop en na een fout zo breed als de melding, en dan meet site.js de
   ene breedte terwijl de andere in beeld moet komen. De kinderen blijven gecentreerd,
   dus het ziet er hetzelfde uit. */
.ask-send{display:flex;flex-direction:column;align-items:center;align-self:stretch}
.btn.sub{min-width:var(--s10)}
.btn.sub .lbl{transition:opacity var(--d-micro) var(--ease),color var(--d-micro) var(--ease)}
.btn.sub.busy .lbl,.btn.sub.done .lbl{opacity:0;color:var(--paper)}
.btn.sub.busy::before,.btn.sub.done::before{clip-path:circle(142% at 50% 50%)}
.btn.sub .spin,.btn.sub .tick{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  opacity:0;pointer-events:none;transition:opacity var(--d-micro) var(--ease)}
.btn.sub.busy .spin,.btn.sub.done .tick{opacity:1}
/* geen token voor een doorlopende ronde, dus afgeleid van de standaardduur */
.btn.sub .spin i{display:block;width:var(--s4);height:var(--s4);border-radius:var(--r-pill);
  border:2px solid rgba(255,255,255,.32);border-top-color:var(--paper);
  animation:spin calc(var(--d-comp)*1.5) linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.sub .tick svg{width:var(--s5);height:var(--s5);fill:none;stroke:var(--paper);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22}
.btn.sub.done .tick svg{stroke-dashoffset:0;
  transition:stroke-dashoffset var(--d-comp) var(--ease) calc(var(--d-micro)*.3)}

/* de uitkomst in tekst, ook voor wie de knop niet ziet bewegen */
.ask-msg{margin:0;max-width:44ch;text-align:center;
  font-size:var(--t-label);line-height:1.5;color:var(--ink-70)}
.ask-msg:not(:empty){margin-top:var(--s3)}
.ask-msg.bad{color:var(--err)}
/* Vanaf de eerste verzending staat de hoogte van de melding vast op twee regels,
   de langste die hij kan worden. Zonder die reservering groeit "Bezig met versturen."
   naar een foutmelding van twee regels en schuift de rest eronder weg, precies wat
   BRAND paragraaf 7 verbiedt. In rust reserveert hij niets, dus het formulier houdt
   zijn rustige vorm. Pas als de maat vaststaat mag site.js één keer meten of het
   blok nog in beeld staat. */
.ask-send.live .ask-msg{min-height:3em}

/* fout: paragraaf 9 schrijft deze 500 ms en deze versoepeling letterlijk voor,
   allebei staan ze niet in tokens.css */
.field.bad input,.field.bad textarea{box-shadow:inset 0 0 0 1px var(--err)}
.field.bad{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}
  40%,60%{transform:translateX(7px)}
}

/* De toast staat bovenaan en niet onderaan. Onderin zitten de cookiemelding (links,
   tot 360 breed) en de contactpil (rechts) al vast op dezelfde onderlijn, dus onder
   ongeveer 900 px viewportbreedte liep een gecentreerde toast altijd over een van
   die twee heen. Boven is de enige band die op elke breedte vrij is: de navigatie
   scrollt weg en er staat verder niets vast. */
.toast{position:fixed;left:50%;top:var(--s5);z-index:90;pointer-events:none;
  transform:translate(-50%,calc(var(--s4)*-1)) scale(.96);opacity:0;filter:blur(6px);
  background:var(--ink);color:var(--paper);border-radius:var(--r-pill);
  padding:var(--s3) var(--s5);font-size:var(--t-body);font-weight:var(--w-head);
  transition:opacity var(--d-comp) var(--ease),transform var(--d-comp) var(--ease),
             filter var(--d-comp) var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0) scale(1);filter:blur(0)}

/* ── faq ────────────────────────────────────────────── */
/* zelfde volle-breedte lijstidioom als de veldnotities, het antwoord blijft leesbaar smal */
.faq{max-width:none}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:var(--s5);align-items:flex-start;
  justify-content:space-between;padding:var(--s5) 0;
  font-weight:500;font-size:1.06rem;letter-spacing:-.016em;line-height:1.4;
  transition:color var(--d-micro) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;margin-top:.42rem;
  background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
             linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;
  color:var(--ink-45);
  transition:background-size var(--d-comp) var(--ease),color var(--d-micro) var(--ease)}
.faq details[open] summary::after{background-size:100% 1px,1px 0}
/* alleen de decoratieve marker wordt blauw. Blauw vervangt wit, nooit inkt (§2). */
.faq summary:hover::after{color:var(--blue)}
.faq .ans{padding:0 0 var(--s5);max-width:64ch}
/* het antwoord vouwt open in plaats van te ploffen. Progressief: browsers zonder
   ::details-content of interpolate-size houden het huidige gedrag. */
@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}}
.faq details::details-content{opacity:0;transform:translateY(6px);block-size:0;overflow:clip;
  transition:content-visibility var(--d-comp) allow-discrete,
             opacity var(--d-comp) var(--ease),transform var(--d-comp) var(--ease),
             block-size var(--d-comp) var(--ease)}
.faq details[open]::details-content{opacity:1;transform:none;block-size:auto}
/* de faq hoort bij het formulier erboven, dus hij staat er dichter op */
#faq{padding-top:calc(var(--section)*.45)}

/* ── cookiemelding ──────────────────────────────────────
   consent.js is gedeeld met de hele site en schrijft Tailwind-klassen. Deze pagina laadt
   styles.css niet, dus zonder dit blok staat de melding ongestyled onderin de footer en
   doet `hidden` niets, waardoor hij na een keuze blijft staan. Hieronder alleen de zes
   klassen die consent.js zelf aan- en uitzet, plus de vorm in de huidige merkstijl.
   consent.js zelf blijft ongemoeid, die is van de rest van de site.

   De melding en de contactpil delen de onderrand, dus één knip bepaalt allebei hun
   plaats: passen ze naast elkaar, of stapelen ze. Die knip ligt op 700 px, want dat
   is de smalste ruimte waarin een kaart van 360 naast de pil past met lucht ertussen
   (24 marge + 360 kaart + 24 tussenruimte + 249 pil + 16 pilmarge).
   Hiervoor stonden er twee queries op 640: de ene tilde de melding boven de pil,
   de andere maakte hem smal. Tussen 641 en 665 gold alleen de tweede en lag de kaart
   over de pil heen. */
#fndr-consent{position:fixed;z-index:70;left:var(--s4);right:var(--s4);bottom:var(--s4);
  transition:opacity var(--d-comp) var(--ease),transform var(--d-comp) var(--ease),
             filter var(--d-comp) var(--ease)}
/* smaller dan de knip: volle breedte, en boven de pil in plaats van ernaast */
body:has(.pillzone) #fndr-consent{bottom:calc(var(--s4) + 68px)}
@media(min-width:700px){
  #fndr-consent,body:has(.pillzone) #fndr-consent{
    left:var(--s5);bottom:var(--s5);right:auto;max-width:360px}
}
#fndr-consent.hidden{display:none}
#fndr-consent.opacity-0{opacity:0}
#fndr-consent.translate-y-3{transform:translateY(12px)}
#fndr-consent.blur-md{filter:blur(6px)}
#fndr-consent>div{background:var(--paper);border-radius:var(--r-cell);padding:var(--s5);
  box-shadow:inset 0 0 0 1px var(--line-strong)}
#fndr-consent p{margin:0;font-size:var(--t-label);line-height:1.6;color:var(--ink-70)}
#fndr-consent p a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
#fndr-consent>div>div{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);margin-top:var(--s4)}
[data-consent-decline],[data-consent-open]{background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:var(--t-label);color:var(--ink-45);
  transition:color var(--d-micro) var(--ease)}
[data-consent-open]{text-decoration:underline;text-underline-offset:2px}
[data-consent-decline]:hover,[data-consent-open]:hover{color:var(--ink)}
[data-consent-accept]{border:0;cursor:pointer;font-family:inherit;border-radius:var(--r-pill);
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-strong);
  padding:.6rem 1.15rem;font-size:var(--t-label);font-weight:500;color:var(--ink);
  transition:background var(--d-comp) var(--ease),color var(--d-micro) var(--ease),
             box-shadow var(--d-comp) var(--ease)}
[data-consent-accept]:hover,[data-consent-accept]:focus-visible{background:var(--blue);color:#fff;
  box-shadow:inset 0 0 0 1px var(--blue)}
[data-consent-accept]:active{background:var(--blue-dk);box-shadow:inset 0 0 0 1px var(--blue-dk)}
footer>div:has([data-consent-open]){text-align:center;padding-block:0 var(--s5)}

/* ── footer ─────────────────────────────────────────── */
.foot{position:relative;isolation:isolate;overflow:hidden}
#foottex{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.72}
.footin{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s6);
  padding-block:clamp(4rem,11vw,9rem)}
.footin .disp{max-width:19ch;font-size:calc(var(--t-display) * .68)}
.footbar{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:baseline;
  font-size:var(--t-label);color:var(--ink-45);padding-block:var(--s5);border-top:1px solid var(--line)}
.footbar .grow{margin-right:auto}

/* ── navigatie op pagina's zonder fotohero ───────────
   Zelfde raster, zelfde maten en dezelfde --edge als over de foto, alleen in inkt.
   Hij loopt mee met de pagina in plaats van als losse witte balk erboven te plakken:
   op de homepage scrolt de navigatie ook gewoon weg, dus doet hij dat hier ook.
   Geen achtergrond en geen haarlijn, want dan is het een balk en geen navigatie. */
.hnav.plain{position:relative;z-index:3;color:var(--ink);background:none;box-shadow:none;
  opacity:1;--edge:calc((100% - min(100%, calc(var(--content-max) + 13rem))) / 2 + var(--gut))}
.hnav.plain .hlinks a{opacity:1;color:var(--ink-70);
  transition:color var(--d-micro) var(--ease)}
.hnav.plain .hlinks a:hover{color:var(--ink)}
.hnav.plain .hlinks .swp::after,.hnav.plain .hcta::after{background:var(--blue)}
.hnav.plain .hcta{color:var(--ink)}
/* de pagina waar je nu bent, gemarkeerd in inkt. Blauw is voor interactie (§2),
   dus de markering van de huidige pagina mag het niet gebruiken. */
.hnav.plain .hlinks a[aria-current]{color:var(--ink)}
.hnav.plain .hlinks a[aria-current]::before{content:"";position:absolute;
  left:0;bottom:0;height:1px;width:100%;background:var(--ink-22)}

/* ── paginakop ───────────────────────────────────────
   De opening van elke pagina zonder fotohero, en het antwoord op dezelfde vraag
   die de hero op de homepage beantwoordt: waar ben ik en waarom zou ik doorlezen.
   Daar hoort textuur bij. De gids noemt halftone het grafische gereedschap en de
   enige plek waar blauw stil mag staan, omdat het textuur is en geen vlak (§6),
   dus draagt een halftone-plaat het beeld waar geen foto is. De plaat wordt in
   site.js uit /brand/img/atmos-plate.webp gerekend, hetzelfde beeld als de hero, zodat
   de subpagina's uit dezelfde hand komen zonder de foto vijf keer te tonen.
   Korter dan de hero: dit is een hoofdstukopening, niet de voordeur. */
.phead{position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;min-height:clamp(400px,62svh,640px);
  --edge:calc((100% - min(100%, calc(var(--content-max) + 13rem))) / 2 + var(--gut))}
/* de plaat komt op zodra hij getekend is, zodat het wisselen van generatief verloop
   naar de foto-halftone geen sprong is */
.plate{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  opacity:0;transition:opacity var(--d-reveal) var(--ease)}
.plate.on{opacity:1}
/* De compositie zit in het masker, niet in het canvas: hetzelfde radiale verloop dat
   de bentocellen op de homepage over hun halftone leggen, alleen groter. Zo neemt de
   dichtheid af richting de tekst en houdt de plaat een vorm in plaats van een vlak. */
/* Twee maskers over elkaar: het radiale verloop maakt de vorm, het lineaire houdt de
   navigatie bovenin vrij en laat de plaat oplossen voor hij de onderrand raakt. Zonder
   dat tweede masker eindigt de textuur in een rechte lijn dwars over de pagina. */
.phead .plate,.stmt .plate{-webkit-mask-composite:source-in;mask-composite:intersect;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
[data-plate="right"] .plate{
  -webkit-mask-image:radial-gradient(102% 132% at 100% 56%,#000 0%,#000 14%,transparent 66%),
                     linear-gradient(180deg,transparent 0%,transparent 7%,#000 24%,#000 58%,transparent 97%);
          mask-image:radial-gradient(102% 132% at 100% 56%,#000 0%,#000 14%,transparent 66%),
                     linear-gradient(180deg,transparent 0%,transparent 7%,#000 24%,#000 58%,transparent 97%)}
[data-plate="low"] .plate{
  -webkit-mask-image:radial-gradient(96% 124% at 92% 100%,#000 0%,#000 10%,transparent 66%),
                     linear-gradient(180deg,transparent 0%,transparent 8%,#000 26%,#000 100%);
          mask-image:radial-gradient(96% 124% at 92% 100%,#000 0%,#000 10%,transparent 66%),
                     linear-gradient(180deg,transparent 0%,transparent 8%,#000 26%,#000 100%)}
/* horizon: een lage, brede koepel die onder de tekst opkomt. De rustigste van de vier,
   voor de pagina die het portret er meteen onder heeft staan. De extra onderruimte in
   .pheadin hoort erbij: zonder die ruimte staat de horizon in de tekst. */
[data-plate="wide"] .plate{
  -webkit-mask-image:radial-gradient(118% 58% at 62% 116%,#000 0%,#000 12%,transparent 74%),
                     linear-gradient(90deg,transparent 0%,transparent 8%,#000 34%,#000 92%,transparent 100%),
                     linear-gradient(180deg,transparent 40%,#000 72%,#000 86%,transparent 100%);
          mask-image:radial-gradient(118% 58% at 62% 116%,#000 0%,#000 12%,transparent 74%),
                     linear-gradient(90deg,transparent 0%,transparent 8%,#000 34%,#000 92%,transparent 100%),
                     linear-gradient(180deg,transparent 40%,#000 72%,#000 86%,transparent 100%)}
.phead[data-plate="wide"] .pheadin{padding-bottom:clamp(5.5rem,13vw,10rem)}
[data-plate="corner"] .plate{
  -webkit-mask-image:radial-gradient(86% 116% at 100% 40%,#000 0%,#000 8%,transparent 64%),
                     linear-gradient(180deg,transparent 0%,transparent 7%,#000 25%,#000 48%,transparent 90%);
          mask-image:radial-gradient(86% 116% at 100% 40%,#000 0%,#000 8%,transparent 64%),
                     linear-gradient(180deg,transparent 0%,transparent 7%,#000 25%,#000 48%,transparent 90%)}
/* De uitspraak staat bovenin, de stippen komen als een horizon van onderen op.
   Het derde masker houdt de tekst vrij: eronder textuur, erachter niets. */
[data-plate="band"] .plate{
  -webkit-mask-image:radial-gradient(76% 128% at 50% 152%,#000 0%,#000 12%,transparent 72%),
                     linear-gradient(90deg,transparent 0%,#000 13%,#000 87%,transparent 100%),
                     linear-gradient(180deg,transparent 30%,#000 74%);
          mask-image:radial-gradient(76% 128% at 50% 152%,#000 0%,#000 12%,transparent 72%),
                     linear-gradient(90deg,transparent 0%,#000 13%,#000 87%,transparent 100%),
                     linear-gradient(180deg,transparent 30%,#000 74%)}
.pheadin{position:relative;z-index:2;margin-top:auto;
  padding-inline:var(--edge);padding-block:var(--s7) clamp(2.5rem,6vw,4.5rem);
  display:flex;flex-direction:column;gap:var(--s5);align-items:flex-start}
/* de displaymaat blijft binnen de 44 tot 112 px van de gids, maar onder die van de
   homepage: de voordeur schreeuwt het hardst, en de afsluiter in de footer staat
   op .68 van de homepage-maat, dus de paginakop moet daarboven uitkomen. */
.pheadin .disp{font-size:clamp(2.75rem,1.2rem + 4.6vw,5.6rem);max-width:15ch}
.pheadin .lead{max-width:46ch}
.phead+section{padding-top:calc(var(--section)*.85)}

/* Op een smal scherm is er geen kolom naast de tekst, dus daar krijgt elke plaat
   dezelfde compositie: het zwaartepunt rechtsonder, oplossend omhoog door de tekst
   heen. Lichter gezet, want op 375 px loopt de tekst over de volle breedte en moet
   de halftone achtergrondraster blijven in plaats van beeld. */
@media(max-width:760px){
  .plate.on{opacity:.72}
  /* de horizon staat op desktop in een klein gemaskerd vlak en is daarom dichter gezet;
     op mobiel deelt hij het masker met de rest, dus die extra dekking moet eraf */
  .phead[data-plate="wide"] .plate.on{opacity:.55}
  .phead[data-plate] .plate{
    -webkit-mask-image:radial-gradient(124% 70% at 88% 98%,#000 0%,#000 10%,transparent 76%),
                       linear-gradient(180deg,transparent 0%,transparent 8%,#000 30%,#000 84%,transparent 100%);
            mask-image:radial-gradient(124% 70% at 88% 98%,#000 0%,#000 10%,transparent 76%),
                       linear-gradient(180deg,transparent 0%,transparent 8%,#000 30%,#000 84%,transparent 100%)}
  .phead[data-plate="wide"] .pheadin{padding-bottom:clamp(2.5rem,6vw,4.5rem)}
  /* de uitspraakband is smal geworden, dus de koepel wordt breder en vlakker,
     anders blijft er een postzegel stippen onder de tekst staan */
  .stmt[data-plate="band"] .plate{
    -webkit-mask-image:radial-gradient(148% 104% at 50% 146%,#000 0%,#000 12%,transparent 74%),
                       linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%),
                       linear-gradient(180deg,transparent 32%,#000 76%);
            mask-image:radial-gradient(148% 104% at 50% 146%,#000 0%,#000 12%,transparent 74%),
                       linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%),
                       linear-gradient(180deg,transparent 32%,#000 76%)}
}

/* ── uitspraak, volle breedte ────────────────────────
   De pauze halverwege een pagina: één zin, ruim gezet, met dezelfde halftone
   eronder. Geen vlak, alleen textuur, dus blauw blijft aan de regel uit §6 voldoen. */
.stmt{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(3rem,6.5vw,5rem) clamp(4.5rem,11vw,8.5rem);
  border-block:1px solid var(--line)}
.stmt .wrap{position:relative;z-index:1}
.stmt p{margin:0 auto;max-width:24ch;text-align:center;text-wrap:balance;
  font-family:var(--display),sans-serif;font-weight:var(--w-head);font-size:var(--t-h2);
  letter-spacing:-.032em;line-height:1.12}
.stmt .sub{margin:var(--s4) auto 0;max-width:52ch;font-family:var(--body),sans-serif;
  font-weight:var(--w-body);font-size:var(--t-body);letter-spacing:0;line-height:1.68;
  color:var(--ink-70)}
.stmt .sub a{color:var(--ink)}

/* ── mobiel menu ─────────────────────────────────────
   Onder 860 px verdwijnen de links uit de balk. Op een site van acht pagina's kan dat
   niet zonder alternatief, dus daar komt een paneel voor in de plaats. */
.navtoggle{display:none;justify-self:end;background:none;border:0;cursor:pointer;
  width:40px;height:40px;padding:0;position:relative;color:inherit}
.navtoggle span{position:absolute;left:9px;width:22px;height:1.5px;background:currentColor;
  border-radius:2px;transition:transform var(--d-comp) var(--ease),opacity var(--d-micro) var(--ease)}
.navtoggle span:first-child{top:16px}
.navtoggle span:last-child{top:23px}
.navtoggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.navpanel{position:fixed;inset:0;z-index:60;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s5);
  padding:var(--s9) var(--gut);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--d-comp) var(--ease),transform var(--d-comp) var(--ease),
             visibility 0s linear var(--d-comp)}
.navpanel.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* Het paneel dekt de knop af die het opende, dus het draagt zijn eigen balk: de wordmark
   links, de sluitknop rechts, op precies de plek waar de hamburger stond. Zonder die
   knop kwam je er alleen uit met Escape, en dat weet een bezoeker niet. */
.navpanel-top{position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) var(--gut);color:var(--ink)}
/* De sluitknop komt binnen als hamburger en draait pas daarna naar het kruisje, zodat je
   ziet dat het dezelfde knop is als die je net indrukte. De vertraging is er zodat het
   paneel er eerst staat: draait hij tegelijk met het opkomen, dan mis je de beweging. */
.navclose{display:block}
.navpanel.open .navclose span{transition-delay:var(--d-micro)}
.navpanel.open .navclose span:first-child{transform:translateY(3.5px) rotate(45deg)}
.navpanel.open .navclose span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.navpanel-links{display:flex;flex-direction:column;gap:var(--s5)}
.navpanel-links a{font-family:var(--display),sans-serif;font-weight:var(--w-head);
  font-size:var(--t-h2);letter-spacing:-.03em;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:var(--s4)}
.navpanel-links a:last-child{border-bottom:0}
body.menu-open{overflow:hidden}
@media(max-width:860px){
  .navtoggle{display:block}
  .hnav{grid-template-columns:1fr auto}
  .hnav .hcta{display:none}
}
@media(min-width:861px){.navpanel{display:none}}

/* ── zwevende contactpil ─────────────────────────────
   Overgenomen van de oude site. De vorm is opnieuw gebouwd op tokens, de vertraagde
   blur-reveal en de cursor-tilt komen 1-op-1 mee. Blauw alleen bij interactie: de
   helft waar je op staat loopt vol en de inhoud wordt wit, precies als de knop. */
/* Gelijke marge rondom: rechts dezelfde --s4 als onder, zodat de pil in de hoek hangt
   in plaats van scheef. Stond hier eerst op de rand van de contentkolom (BRAND paragraaf
   9), maar die is boven 1568 px een veelvoud van de ondermarge en dan leest de pil als
   losgeslagen. Onder blijft --s4 sowieso staan, want de hero rekent daarmee zijn hoogte
   uit (calc(100svh - 42px)).
   De zone vangt geen klikken: hij is groter dan de pil en die onzichtbare marge lag over
   echte links heen, die dan niet meer reageerden. De tilt hangt aan de zone en blijft
   werken, want mouseenter, mousemove en mouseleave lopen ook over een ouder zonder
   pointer-events. */
.pillzone{position:fixed;right:0;bottom:0;z-index:50;pointer-events:none;
  padding:var(--s4);
  animation:pill-in .9s var(--ease) 1.6s both}
.pill{pointer-events:auto;display:flex;align-items:stretch;height:52px;border-radius:var(--r-pill);
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-strong),0 10px 30px -12px rgba(10,13,22,.22);
  overflow:hidden;transform-style:preserve-3d;backface-visibility:hidden;
  transition:box-shadow var(--d-comp) var(--ease)}
.pill.leaving{transition:transform var(--d-comp) var(--ease),box-shadow var(--d-comp) var(--ease)}
.pill a{position:relative;overflow:hidden;
  display:flex;align-items:center;gap:.5rem;padding-inline:var(--s5);
  font-size:var(--t-label);font-weight:500;color:var(--ink-70);
  transition:background var(--d-comp) var(--ease),color var(--d-micro) var(--ease)}
.pill a:hover,.pill a:focus-visible{background:var(--blue);color:#fff}
/* Liquid carve over de hele pil (BRAND paragraaf 7). De pil is blauw met witte inhoud,
   daar bovenop ligt precies dezelfde pil in papier met inkt, en daar wordt een gat uit
   gesneden dat de cursor volgt. Door het gat zie je het blauw met de witte inhoud, dus
   er staat nooit inkt op blauw.

   In rust tekent de SVG de pil, en de HTML eronder is doorzichtig maar staat er nog voor
   screenreaders en voor het klikgebied. Draait site.js niet, dan blijft carve-on uit en
   staat de gewone vulling hierboven gewoon te werken. */
/* overflow hidden op de SVG zelf, want .pill klemt niet: transform-style preserve-3d
   voor de tilt zet overflow daar buitenspel. */
.pill>svg.carve{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  overflow:hidden}
.pill rect.under{fill:var(--blue)}
.pill:has(a:active) rect.under{fill:var(--blue-dk)}
.pill rect.over{fill:var(--paper)}
.pill.carve-on a{position:relative;z-index:1;color:transparent}
.pill.carve-on a:hover,.pill.carve-on a:focus-visible{background:transparent;color:transparent}
.pill.carve-on .pilldiv{opacity:0}
.pill a>svg{width:17px;height:17px;flex:none}
.pilldiv{align-self:center;width:1px;height:20px;background:var(--line)}
@keyframes pill-in{
  from{opacity:0;transform:translateY(16px) scale(.96);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@media(max-width:520px){
  .pill a span{display:none}
  .pill a{padding-inline:var(--s4)}
}
/* de cookiemelding wijkt voor de pil, zie de knip bij `── cookiemelding` hierboven */

/* ── veldnotitie, de leeslaag ────────────────────────
   Lopende tekst op leadformaat: deze pagina's zijn duizend woorden en worden echt gelezen,
   niet gescand. De kop staat ver van de tekst af zodat de secties uit elkaar vallen. */
.art{max-width:68ch}
.art>p{font-size:var(--t-lead);font-weight:var(--w-body);line-height:1.72;
  color:var(--ink-70);margin:0 0 var(--s5)}
.art>p:last-child{margin-bottom:0}
.art>p strong{font-weight:500;color:var(--ink)}
.art>p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--ink-22);transition:text-decoration-color var(--d-micro) var(--ease)}
.art>p a:hover{text-decoration-color:var(--blue)}
.art>h2{font-family:var(--display),sans-serif;font-weight:var(--w-head);font-size:var(--t-h2);
  letter-spacing:-.032em;line-height:1.1;margin:var(--s8) 0 var(--s4);color:var(--ink)}
.artmeta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:baseline;
  font-size:var(--t-label);color:var(--ink-45);margin:0}
.artend{margin-top:var(--s9);padding-top:var(--s6);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start;max-width:58ch}
/* verwante notities: de stille uitgang onder de luide. Geen tweede haarlijn, want de
   rand van .artend hierboven scheidt het staartstuk al van de tekst. */
.artmore{margin-top:var(--s5);max-width:58ch;
  display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
  .pillzone{animation:none;opacity:1}
  .pill{transform:none !important}
  /* geen draaiende spinner en geen schud. De knop houdt zijn label, de toestand
     staat voluit in de tekst onder de knop. */
  .btn.sub .spin,.btn.sub .tick{display:none}
  .btn.sub.busy .lbl,.btn.sub.done .lbl{opacity:1}
  .field.bad{animation:none}
}