/* ==========================================================================
   VRIESMEDIA · vriesmedia.nl
   Vormgeving volgens het merkhandboek "Huisstijl Mediakompas Vriesmedia":
   systeemrood #E30613, ink #111111, papier #F5F5F5, Poppins + Space Mono,
   en de vijf merktekens (rode stip, kort streepje, diagonaal, arcering, chip).
   ========================================================================== */

/* --- Fonts, self-hosted, geen externe CDN -------------------------------- */
@font-face{font-family:"Poppins";src:url("../fonts/poppins-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"SpaceMono";src:url("../fonts/space-mono-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* --- Tokens -------------------------------------------------------------- */
:root{
  /* Kleur, handboek pagina 10 */
  --red:#E30613;          /* systeemrood */
  --red-hover:#B8050F;
  --ink:#111111;
  --paper:#F5F5F5;
  --white:#FFFFFF;
  /* Op ink haalt #E30613 net geen 4.5:1 voor kleine tekst. Dezelfde tint,
     iets opgelicht, houdt de merkkleur en de leesbaarheid allebei overeind. */
  --red-onink:#F5271A;
  --grey:#545454;         /* bodytekst op papier */
  --grey-onink:#A4A4A4;   /* bodytekst op ink */
  --line:rgba(17,17,17,.15);
  --line-onink:rgba(255,255,255,.16);

  /* Typografie, handboek pagina 11 */
  --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"SpaceMono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-display:clamp(2.1rem,3.9vw,3.3rem);
  --fs-display-sm:clamp(1.75rem,2.9vw,2.6rem);
  --fs-lead:clamp(1rem,1.05vw,1.15rem);
  --fs-body:clamp(.9rem,.9vw,.98rem);
  --fs-mono:clamp(.6rem,.66vw,.7rem);

  --bar:60px;
  --ease:cubic-bezier(.22,.7,.24,1);
}

@media (max-height:880px){
  :root{--fs-display:clamp(1.9rem,3.3vw,2.8rem);--fs-lead:1rem;--bar:54px}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,address{margin:0}
ul,ol{list-style:none;padding:0}

:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.panel--ink :focus-visible,.bar--bottom :focus-visible{outline-color:var(--red-onink)}

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.skip{
  position:fixed;top:.5rem;left:.5rem;z-index:60;background:var(--ink);color:var(--white);
  padding:.6rem 1rem;font:500 .8rem/1 var(--sans);text-decoration:none;
  transform:translateY(-160%);transition:transform .18s var(--ease);
}
.skip:focus{transform:none}

/* --- Merktekens ---------------------------------------------------------- */

/* 1. De rode stip: staat altijd voor een mono-kicker. */
.dot{width:.85em;height:.85em;border-radius:50%;background:var(--red);flex:none}
.kicker--onink .dot,.panel--ink .dot{background:var(--red-onink)}

/* 2. Het korte streepje: 64 x 4 px, direct onder een kop. */
.rule{display:block;width:64px;height:4px;background:var(--red);margin:0 0 .9rem}
.panel--ink .rule{background:var(--red-onink)}

/* 3. De diagonaal: een rode lijn die een donker vlak snijdt. Een per vlak. */
.diagonaal{
  position:absolute;top:0;right:4%;width:2px;height:38%;
  background:var(--red);transform:rotate(22deg);transform-origin:top center;
  pointer-events:none;opacity:.6;z-index:0;
}
/* De inhoud staat er altijd bovenop, zodat de lijn nooit door tekst snijdt. */
.panel__inner{z-index:1}

/* --- Balken -------------------------------------------------------------- */
.bar{
  position:fixed;left:0;right:0;z-index:40;height:var(--bar);
  display:flex;align-items:center;gap:1.2rem;
  padding:0 clamp(1.1rem,3vw,2.6rem);background:var(--paper);
}
.bar--top{top:0;border-bottom:1px solid var(--ink);justify-content:space-between}
.bar--bottom{bottom:0;border-top:1px solid var(--line);justify-content:space-between}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand .dot{width:9px;height:9px}
.brand__mark{width:auto;height:15px}
.bar__meta{
  font-family:var(--mono);font-weight:700;font-size:var(--fs-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);white-space:nowrap;
}

.chapters-nav{display:flex;flex:none}
.chapters{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,2.2rem)}
.chapters a{
  display:flex;align-items:baseline;gap:.5rem;text-decoration:none;
  font-family:var(--mono);font-weight:700;font-size:var(--fs-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey);padding:.45rem .1rem;
  transition:color .25s var(--ease);
}
.chapters a b{font-weight:700;color:var(--ink)}
.chapters a:hover{color:var(--ink)}
.chapters a[aria-current="true"]{color:var(--ink)}
.chapters a[aria-current="true"] b{color:var(--red)}

/* De balk is verdeeld in evenveel segmenten als er schermen zijn, zodat je
   ziet dat je op 1 van 4 staat en niet op het einde van een gewone pagina. */
.progress{position:absolute;top:-1px;left:0;right:0;height:3px;background:var(--line)}
.progress__fill{display:block;height:100%;width:25%;background:var(--red);
  transition:width .45s var(--ease)}
.progress::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    transparent 0 calc(var(--stap,25%) - 3px),
    var(--paper) calc(var(--stap,25%) - 3px) var(--stap,25%));
}

/* --- Bladerknoppen aan de zijkanten --------------------------------------
   Het duidelijkste signaal dat er naar links en rechts meer staat: een chip
   die het volgende hoofdstuknummer toont en er ook heen navigeert.
------------------------------------------------------------------------- */
.nudge{
  position:fixed;top:50%;transform:translateY(-50%);z-index:45;
  display:flex;align-items:center;gap:.5rem;cursor:pointer;
  background:var(--paper);border:1px solid var(--ink);color:var(--ink);
  padding:.75rem .85rem;
  font-family:var(--mono);font-weight:700;font-size:var(--fs-mono);letter-spacing:.1em;
  transition:background-color .22s var(--ease),color .22s var(--ease),
             border-color .22s var(--ease),gap .22s var(--ease);
}
.nudge[hidden]{display:none}
.nudge--vorige{left:clamp(.5rem,1.2vw,1.1rem)}
.nudge--volgende{right:clamp(.5rem,1.2vw,1.1rem)}
.nudge__pijl{font-size:1.05rem;line-height:1}
.nudge:hover{background:var(--red);border-color:var(--red);color:var(--white);gap:.85rem}

/* Op het donkere scherm draaien de kleuren om. */
body[data-vlak="ink"] .nudge{background:var(--ink);border-color:rgba(255,255,255,.45);color:var(--white)}
body[data-vlak="ink"] .nudge:hover{background:var(--red-onink);border-color:var(--red-onink);color:var(--ink)}

/* Tot de eerste keer bladeren wipt de pijl zachtjes, als uitnodiging. */
.nudge--volgende.is-nieuw .nudge__pijl{animation:nudge 2.6s var(--ease) infinite}

/* 5. De chip: vierkant omlijnd, scherpe hoeken. */
.chip{
  display:inline-flex;align-items:center;flex:none;
  border:1px solid var(--ink);padding:.5rem .85rem;text-decoration:none;
  font-family:var(--mono);font-weight:700;font-size:var(--fs-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);
  transition:background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.chip:hover{background:var(--red);border-color:var(--red);color:var(--white)}

/* --- Deck: horizontaal scrollen met snapping ----------------------------- */
.deck{
  position:fixed;top:var(--bar);bottom:var(--bar);left:0;right:0;
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
}
.deck::-webkit-scrollbar{display:none}

.panel{
  position:relative;flex:0 0 100vw;height:100%;overflow:hidden auto;
  scroll-snap-align:start;scroll-snap-stop:always;
}
.panel--paper{background:var(--paper);color:var(--ink)}
.panel--ink{background:var(--ink);color:var(--white)}

.panel__inner{
  position:relative;min-height:100%;max-width:1500px;margin-inline:auto;
  padding:clamp(1rem,1.7vw,1.9rem) clamp(1.3rem,3.6vw,4rem);
  display:grid;align-content:center;
}
.panel__inner--split{
  grid-template-columns:minmax(0,1.3fr) minmax(0,.84fr);
  gap:clamp(1rem,1.9vw,2.1rem) clamp(1.8rem,4.4vw,5rem);align-items:start;
}
.panel__inner--split > .col--clients{grid-column:1 / -1}
/* Contactscherm: gesprek links, onderwerpen in het midden, colofon rechts. */
#contact .panel__inner--split{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,.72fr)}
.panel__inner--triple{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.6rem,3vw,3.4rem);align-items:start;
}

/* --- Typografie ---------------------------------------------------------- */
.kicker{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-weight:700;font-size:var(--fs-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);margin-bottom:.85rem;
}
.kicker--onink{color:var(--red-onink)}
.kicker--sub{margin-top:1rem;margin-bottom:.6rem}

.display{
  font-size:var(--fs-display);font-weight:700;line-height:1;letter-spacing:-.02em;
  margin-bottom:.8rem;text-wrap:balance;
}
.display--sm{font-size:var(--fs-display-sm)}
/* Precies een woord per kop is rood. Handboek pagina 11. */
.display em{font-style:normal;color:var(--red)}
.panel--ink .display em{color:var(--red-onink)}

.lead{
  font-size:var(--fs-lead);font-weight:500;line-height:1.45;letter-spacing:-.01em;
  max-width:34em;margin-bottom:.75rem;
}
.body{color:var(--grey);max-width:38em;margin-bottom:.7rem}
.body--tight{margin-bottom:0}
.panel--ink .body{color:var(--grey-onink)}

/* De tweeslag: eerste zin stelt vast, tweede kantelt hem. Handboek pagina 13. */
.turn{
  font-size:var(--fs-lead);font-weight:500;line-height:1.45;letter-spacing:-.01em;
  max-width:32em;margin:.8rem 0 .1rem;
}
.turn b{font-weight:600;color:var(--red)}
.panel--ink .turn b{color:var(--red-onink)}

.dashlist{display:grid;gap:.4rem;max-width:40em;margin-top:.2rem}
.dashlist li{display:grid;grid-template-columns:1.4rem 1fr;align-items:baseline;line-height:1.5}
.dashlist li::before{
  content:"";display:block;width:12px;height:2px;background:var(--red);
  transform:translateY(-.35em);
}
.dashlist--onink li::before,.panel--ink .dashlist li::before{background:var(--red-onink)}

.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem}
.tag{
  display:inline-block;border:1px solid var(--line);padding:.34rem .6rem;
  font-family:var(--mono);font-weight:700;font-size:calc(var(--fs-mono) * .95);
  letter-spacing:.09em;text-transform:uppercase;color:var(--grey);
}
.tag--actief{background:var(--red);border-color:var(--red);color:var(--white)}

.throughline{
  margin-top:1.3rem;padding-top:1rem;border-top:2px solid var(--ink);
  font-size:var(--fs-lead);font-weight:500;line-height:1.45;letter-spacing:-.01em;max-width:30em;
}
.aside-note{margin-top:1rem;font-size:calc(var(--fs-body) * .95);color:var(--grey);max-width:34em}
.panel--ink .aside-note{color:var(--grey-onink)}

/* Cijfers zijn groot, rood en zonder opsmuk. Handboek pagina 13. */
.cijfer{margin-bottom:1.3rem}
.cijfer b{
  display:block;font-size:clamp(2.4rem,3.6vw,3.4rem);font-weight:700;line-height:.95;
  letter-spacing:-.03em;color:var(--red-onink);
}
.cijfer--sm{margin:.9rem 0 0;padding-top:.8rem;border-top:1px solid var(--line-onink)}
.cijfer--sm b{font-size:clamp(1.7rem,2.1vw,2.1rem);color:var(--red-onink)}
.cijfer--sm span{letter-spacing:.09em}
.cijfer span{
  display:block;margin-top:.35rem;font-family:var(--mono);font-weight:700;
  font-size:var(--fs-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--grey-onink);
}

/* --- Lockup A: woordmerk met endorsement eronder. Handboek pagina 08. ----- */
.lockup{margin-bottom:1.4rem}
.lockup__mark{width:clamp(190px,17vw,250px);height:auto}
.lockup__endorsement{
  margin-top:.5rem;font-family:var(--mono);font-weight:700;font-size:var(--fs-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey-onink);
}
.lockup__endorsement span{color:var(--white)}

/* --- Call to action ------------------------------------------------------ */
.cta{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:1rem;
  font-family:var(--mono);font-weight:700;font-size:var(--fs-mono);letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  padding:.7rem 0 .45rem;border-bottom:2px solid var(--red);
  transition:gap .25s var(--ease),color .2s var(--ease);
}
.cta:hover{gap:1.05rem;color:var(--red-hover)}
.cta__arrow{transition:transform .25s var(--ease)}
.cta:hover .cta__arrow{transform:translateX(2px)}
.cta--onink{color:var(--white);border-bottom-color:var(--red-onink)}
.cta--onink:hover{color:var(--red-onink)}
.cta--sm{margin-top:1rem}

/* --- Kaarten en portretten ----------------------------------------------- */
.card--ink{background:var(--ink);color:var(--white)}
.panel--ink .card--ink{background:#1B1B1B}
.card__body{padding:clamp(1.1rem,1.5vw,1.5rem)}

/* Portret: ronde uitsnede met rode ring. Handboek pagina 18. */
.portret{
  width:clamp(96px,9vw,128px);aspect-ratio:1;border-radius:50%;object-fit:cover;
  object-position:50% 30%;border:3px solid var(--red);margin:0 auto .9rem;
}
.panel--ink .portret{border-color:var(--red-onink)}
.portret--lg{object-position:50% 22%}
.portret--contact{width:clamp(88px,7.5vw,116px);margin:0 0 1rem}

/* Profielkaart staat gecentreerd; dat geeft rust naast de linkerkolom die
   volledig links uitgelijnd is. */
.card--person{text-align:center}
.card--person .kicker{justify-content:center}
.card--person .card__text{margin-inline:auto;max-width:26em}

.card__name{
  font-size:clamp(1.2rem,1.5vw,1.5rem);font-weight:600;letter-spacing:-.01em;
  line-height:1.15;margin-bottom:.5rem;
}
.card__text{color:var(--grey-onink);font-size:calc(var(--fs-body) * .96);margin-bottom:.9rem}
.card__text b{color:var(--white);font-weight:600}
.card__text--tight{margin-bottom:0}

/* Kerncijfers in de tabelbehandeling van de media kit: klein, met een label
   in mono eronder, tussen twee haarlijnen. */
.kpi{
  display:flex;gap:.9rem;padding:.7rem 0;margin:.9rem 0 .7rem;
  border-top:1px solid var(--line-onink);border-bottom:1px solid var(--line-onink);
}
.kpi li{flex:1;min-width:0}
.kpi b{
  display:block;font-size:clamp(1rem,1.15vw,1.2rem);font-weight:700;
  letter-spacing:-.02em;line-height:1.05;color:var(--red-onink);
}
.kpi span{
  display:block;margin-top:.28rem;font-family:var(--mono);font-weight:700;
  font-size:calc(var(--fs-mono) * .88);letter-spacing:.07em;text-transform:uppercase;
  color:var(--grey-onink);line-height:1.35;
}
.voetnoot{
  margin-top:.7rem;font-family:var(--mono);font-weight:700;
  font-size:calc(var(--fs-mono) * .88);letter-spacing:.06em;text-transform:uppercase;
  color:var(--grey-onink);line-height:1.6;
}

/* --- Recente edities ----------------------------------------------------- */
.editions{border-top:1px solid var(--line-onink)}
.edition{border-bottom:1px solid var(--line-onink)}
.edition a{display:block;text-decoration:none;padding:.75rem .4rem .85rem 0;
  transition:padding-left .3s var(--ease),background-color .3s var(--ease)}
.edition a:hover{padding-left:.6rem;background:rgba(255,255,255,.05)}
.edition__meta{
  display:flex;gap:.9rem;align-items:baseline;font-family:var(--mono);font-weight:700;
  font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey-onink);margin-bottom:.3rem;
}
.edition__nr{color:var(--red-onink)}
.edition__title{font-size:calc(var(--fs-body) * 1.02);font-weight:600;line-height:1.3;
  letter-spacing:-.005em;margin-bottom:.25rem}
.edition__desc{
  font-size:calc(var(--fs-body) * .88);line-height:1.45;color:var(--grey-onink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* --- Logoband opdrachtgevers ---------------------------------------------
   Handboek pagina 08: logo's van derden staan gescheiden door een haarlijn,
   in wit of zwart, en altijd na de eigen lockup. Twee identieke banen die
   naast elkaar doorschuiven; de tweede staat op aria-hidden.
-------------------------------------------------------------------------- */
.col--clients{border-top:1px solid var(--line);padding-top:.9rem}
.marquee{
  --gap:clamp(2rem,4vw,3.4rem);
  display:flex;gap:var(--gap);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.marquee__track{display:flex;align-items:center;gap:var(--gap);flex:0 0 auto;
  animation:schuif 52s linear infinite}
.marquee__track li{flex:none;display:flex;align-items:center}
.logo{height:var(--logo-h,30px);width:auto}
.logo--raster{filter:brightness(0)}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes schuif{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--gap)))}}

/* --- Scrollhint ---------------------------------------------------------- */
.hint{
  display:flex;align-items:center;gap:.55rem;margin-right:auto;
  padding-left:clamp(1rem,2.4vw,2.2rem);
  font-family:var(--mono);font-weight:700;font-size:var(--fs-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey);transition:opacity .5s var(--ease);
}
.hint[hidden]{display:none}
.hint.is-gone{opacity:0;pointer-events:none}
.hint b{color:var(--red);animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,60%,100%{transform:none}75%{transform:translateX(4px)}}

/* --- Colofon ------------------------------------------------------------- */
/* --- Contactscherm ------------------------------------------------------- */

/* Het e-mailadres als statement, niet als knopje. */
.mailto{
  display:inline-block;margin-top:1.2rem;
  font-size:clamp(1.15rem,1.7vw,1.7rem);font-weight:600;letter-spacing:-.02em;
  color:var(--white);text-decoration:none;
  border-bottom:2px solid var(--red-onink);padding-bottom:.15rem;
  transition:color .22s var(--ease);
}
.mailto:hover{color:var(--red-onink)}

/* Vier ingangen, elk met een eigen onderwerpregel in de mail. */
.routes{border-top:1px solid var(--line-onink)}
.routes li{border-bottom:1px solid var(--line-onink)}
.routes a{
  display:block;text-decoration:none;padding:.7rem .4rem .75rem 0;
  transition:padding-left .3s var(--ease),background-color .3s var(--ease);
}
.routes a:hover{padding-left:.6rem;background:rgba(255,255,255,.05)}
.routes b{
  display:block;font-size:calc(var(--fs-body) * 1.02);font-weight:600;
  line-height:1.3;margin-bottom:.15rem;
}
.routes a:hover b{color:var(--red-onink)}
.routes span{display:block;font-size:calc(var(--fs-body) * .88);color:var(--grey-onink);line-height:1.4}

.colofon{border-top:1px solid var(--line-onink);padding-top:1rem}
.colofon__mark{width:150px;height:auto;margin-bottom:1.1rem}
.zakelijk > div{padding:.5rem 0;border-bottom:1px solid var(--line-onink)}
.zakelijk dt{
  font-family:var(--mono);font-weight:700;font-size:calc(var(--fs-mono) * .92);
  letter-spacing:.1em;text-transform:uppercase;color:var(--grey-onink);margin-bottom:.15rem;
}
.zakelijk dd{font-size:calc(var(--fs-body) * .92);font-weight:500;line-height:1.4}

.credit{
  margin-top:.9rem;font-size:calc(var(--fs-body) * .85);line-height:1.45;
  color:var(--grey-onink);
}
.credit a{
  color:var(--white);text-decoration:none;
  border-bottom:1px solid var(--red-onink);
  transition:color .2s var(--ease);
}
.credit a:hover{color:var(--red-onink)}

/* --- Reveal, alleen met JS; zonder JS is alles gewoon zichtbaar ---------- */
.js .reveal > *{opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.is-in > *{opacity:1;transform:none}
.js .reveal.is-in > *:nth-child(2){transition-delay:.05s}
.js .reveal.is-in > *:nth-child(3){transition-delay:.1s}
.js .reveal.is-in > *:nth-child(4){transition-delay:.15s}
.js .reveal.is-in > *:nth-child(5){transition-delay:.2s}
.js .reveal.is-in > *:nth-child(6){transition-delay:.25s}
.js .reveal.is-in > *:nth-child(n+7){transition-delay:.3s}

/* Iets lagere vensters: een milde stap compacter. */
@media (max-height:880px){
  .lead,.body,.turn{margin-bottom:.6rem}
  .kicker--sub{margin-top:.9rem}
  .cta{margin-top:.9rem}
  .col--clients{padding-top:.75rem}
  .logo{height:calc(var(--logo-h,30px) * .9)}
  .display{margin-bottom:.7rem}
}

@media (max-height:790px){
  :root{
    --fs-display:clamp(1.75rem,2.9vw,2.4rem);
    --fs-display-sm:clamp(1.6rem,2.4vw,2.1rem);
    --fs-lead:.97rem;--fs-body:.88rem;--bar:50px;
  }
  .lead,.body,.turn{margin-bottom:.55rem}
  .turn{margin-top:.6rem}
  .kicker{margin-bottom:.6rem}
  .kicker--sub{margin-top:.8rem;margin-bottom:.45rem}
  .rule{margin-bottom:.7rem;height:3px;width:56px}
  .cta{margin-top:.8rem;padding:.55rem 0 .35rem}
  .tags{margin-top:.8rem;gap:.3rem}
  .tag{padding:.26rem .5rem}
  .portret{width:clamp(84px,7vw,104px);margin-bottom:.6rem}
  .cijfer{margin-bottom:.9rem}
  .lockup{margin-bottom:.9rem}
  .colofon,.throughline{margin-top:.8rem;padding-top:.7rem}
  .card__body{padding:1rem}
  .kpi{padding:.45rem 0;margin:.6rem 0 .45rem}
  .kpi b{font-size:1rem}
  .voetnoot{margin-top:.5rem;line-height:1.45}
  .card__text{margin-bottom:.55rem}
  .cta--sm{margin-top:.7rem}
  .mailto{margin-top:.8rem}
  .portret--contact{width:80px;margin-bottom:.7rem}
  /* Scherm 03 is het langst: kaart van Marcel een tandje compacter. */
  .card--marcel .portret{width:88px;margin-bottom:.5rem}
  .card--marcel .card__name{margin-bottom:.35rem}
  .dashlist--onink{gap:.26rem}
  .kpi b{font-size:.95rem}
  .routes a{padding:.5rem .4rem .55rem 0}
  .zakelijk > div{padding:.38rem 0}
  .colofon{padding-top:.8rem}
  .credit{margin-top:.6rem}
  .dashlist{gap:.32rem}
  .display{margin-bottom:.6rem}
  .card__text{margin-bottom:.7rem}
  .aside-note{margin-top:.7rem}
  .col--clients{padding-top:.6rem}
  .logo{height:calc(var(--logo-h,30px) * .68)}
  .col--clients{padding-top:.5rem}
  .col--clients .kicker{margin-bottom:.45rem}
  .editions .edition__desc{-webkit-line-clamp:1}
  .edition a{padding:.55rem .4rem .6rem 0}
  .cijfer b{font-size:clamp(2rem,2.8vw,2.6rem)}
}


/* ==========================================================================
   Mobiel en tablet: verticaal stapelen. Horizontaal swipen naast verticaal
   scrollen binnen een scherm levert op touch conflicterende gebaren op.
   De hoofdstuknummers 01/02/03 blijven staan als orientatie.
   ========================================================================== */
@media (max-width:1023px){
  .deck{position:static;display:block;overflow:visible;scroll-snap-type:none}
  .panel{width:auto;height:auto;overflow:visible;min-height:auto;scroll-snap-align:none}
  .panel__inner{display:block;min-height:0;
    padding:clamp(2.2rem,7vw,3.4rem) clamp(1.15rem,5vw,2.2rem) clamp(2.6rem,8vw,3.6rem)}
  .panel__inner > .col + .col{margin-top:2rem}

  html{scroll-padding-top:var(--bar)}
  body{padding-top:var(--bar);padding-bottom:var(--bar)}
  .bar--top{position:sticky;top:0}
  .bar--bottom{gap:.6rem}
  .bar__meta{display:none}
  .chapters{gap:.85rem}
  .chapters a span{display:none}
  .chapters a b{color:var(--grey)}
  .chapters a[aria-current="true"] b{color:var(--red)}
  .chapters a[aria-current="true"] span{display:inline}
  .hint{display:none}
  .nudge{display:none}
  .chip{padding:.45rem .6rem;font-size:.58rem;letter-spacing:.06em}

  /* Het paneel is op mobiel niet scrollbaar, dus clip mag: zo blijft de
     diagonaal binnen het donkere vlak. */
  .panel{overflow:clip}
  .diagonaal{height:13%;right:4%}
  #contact .panel__inner--split{grid-template-columns:1fr}
  .colofon__mark{width:130px}
  .col--clients{margin-top:2rem}
  .marquee{--gap:2.2rem}
  .display{font-size:clamp(2rem,8vw,2.8rem)}
  .display--sm{font-size:clamp(1.8rem,7vw,2.4rem)}
  .lockup__mark{width:200px}
}

/* --- Bewegingsvoorkeur --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .marquee{overflow:visible;-webkit-mask-image:none;mask-image:none;flex-wrap:wrap}
  .marquee__track{animation:none;flex-wrap:wrap;row-gap:1.1rem}
  .marquee__track[aria-hidden="true"]{display:none}

  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .js .reveal > *{opacity:1;transform:none}
}

/* --- Printen ------------------------------------------------------------- */
@media print{
  .bar,.hint,.skip,.diagonaal{display:none}
  .deck{position:static;display:block;overflow:visible}
  .panel{width:auto;height:auto;overflow:visible;page-break-after:always}
  .panel--ink{background:#fff;color:#000}
  .js .reveal > *{opacity:1;transform:none}
  .marquee{overflow:visible}
  .marquee__track{animation:none}
  .marquee__track[aria-hidden="true"]{display:none}
}