@font-face{font-family:"LAI Bricolage";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-standard-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"LAI Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader-latin-wght-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"LAI Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/*@@FONTS@@*/

:root{
  --kast:#1D4038; --kast-diep:#14302A; --kast-licht:#4C7A6C;
  --geel:#F4DC6A; --roze:#F1B4BE; --blauw:#A8CDE6; --wit:#FAFAF6; --vel:#E7EBE5;
  --inkt:#000; --rood:#D6382C; --lijn:rgba(40,96,146,.46); --metaal:#B9C4BB;
  --grotesk:"LAI Bricolage","Bricolage Grotesque","Arial Narrow",Arial,sans-serif;
  --serif:"LAI Newsreader","Newsreader",Georgia,"Times New Roman",serif;
  --gutter:clamp(20px,4vw,56px);
  --max:1400px;
  --step:50px;
  --ease:cubic-bezier(.22,.8,.24,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--kast);color:var(--wit);font-family:var(--serif);font-size:19px;line-height:1.58;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ol,ul,figure,blockquote{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ui{font-family:var(--grotesk);font-stretch:100%;font-weight:500;font-size:16px;line-height:1.3}
.num{font-variant-numeric:tabular-nums}

/* ---------- kop ---------- */
.kop{position:relative;z-index:30}
.kop__rij{display:flex;align-items:flex-start;gap:28px}
.merk{display:inline-block;background:var(--wit);color:var(--inkt);text-decoration:none;padding:26px 20px 12px;border-radius:0 0 8px 8px;font-family:var(--grotesk);font-stretch:75%;font-weight:800;font-size:30px;line-height:1;letter-spacing:-.01em}
.merk i{font-family:var(--serif);font-style:italic;font-weight:500;font-stretch:100%;letter-spacing:0;margin-right:1px}
.merk:hover{background:var(--geel)}
.nav{margin-left:auto;display:flex;align-items:center;gap:30px;padding-top:24px}
.nav a{text-decoration:none;padding-block:4px;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--rood)}
.zoek{display:flex;align-items:center;border-bottom:2px solid var(--kast-licht)}
.zoek:focus-within{border-bottom-color:var(--wit)}
.zoek input{background:none;border:0;padding:6px 8px 6px 0;width:190px;outline-offset:6px}
.zoek input::placeholder{color:#A9C3BA;opacity:1}
.zoek button{background:none;border:0;padding:6px 0 6px 10px;cursor:pointer;font-weight:600}
.zoek button:hover{color:var(--geel)}
.menuknop{display:none}
.menu{display:none}

/* ---------- la (hero) ---------- */
.la{padding-block:clamp(36px,5vw,72px) clamp(96px,9vw,150px)}
.la__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:end}
.woorden{display:flex;flex-direction:column;align-items:flex-start}
.woord{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;font-family:var(--grotesk);font-stretch:75%;font-weight:800;font-size:clamp(84px,10.6vw,158px);line-height:.9;letter-spacing:-.02em;color:var(--kast-licht);transition:color .18s linear}
.woord:hover{color:var(--wit)}
.woord[aria-selected="true"]{color:var(--tint)}
.woord[data-groep="hoe"]{--tint:var(--geel)}
.woord[data-groep="waarom"]{--tint:var(--roze)}
.woord[data-groep="wat"]{--tint:var(--blauw)}
.woord[data-groep="zo"]{--tint:var(--wit);font-size:clamp(50px,6.2vw,92px);margin-top:.18em}
.la__groot{display:none}
.la__uitleg{max-width:30ch;margin-top:clamp(22px,2.6vw,40px);font-size:21px;line-height:1.45;color:#D6E3DD}

.lade[hidden]{display:none}
.la__grid > *{min-width:0}
.stapel{display:grid;grid-template-columns:minmax(0,1fr);padding-top:calc((var(--n) - 1) * var(--step))}
.kaart{grid-area:1/1;min-width:0;position:relative;display:flex;flex-direction:column;min-height:clamp(400px,34vw,480px);color:var(--inkt);background:var(--tint);border-radius:8px 8px 0 0;transform-origin:50% 0;transform:translateY(calc(var(--i) * var(--step) * -1)) scale(calc(1 - var(--i) * .034)) rotate(var(--r,0deg));z-index:calc(20 - var(--i));transition:transform .42s var(--ease);box-shadow:0 -2px 0 rgba(0,0,0,.16)}
.lade[data-groep="hoe"] .kaart{--tint:var(--geel)}
.lade[data-groep="waarom"] .kaart{--tint:var(--roze)}
.lade[data-groep="wat"] .kaart{--tint:var(--blauw)}
.lade[data-groep="zo"] .kaart{--tint:var(--wit)}
.kaart:not([data-voor])::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(20,48,42,calc(var(--i) * .07));pointer-events:none;z-index:1}
.kaart__strook{display:flex;align-items:center;gap:16px;min-height:var(--step);padding:0 24px;border-bottom:2px solid var(--rood);font-family:var(--grotesk);font-weight:600;font-size:16px;line-height:1.2}
.kaart__kies{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;flex:1;min-width:0;text-align:left;font-family:var(--serif);font-style:italic;font-weight:500;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kaart__kies::after{content:"";position:absolute;inset:0 0 auto 0;height:var(--step);z-index:2}
.kaart__kies:hover{text-decoration:underline;text-decoration-color:var(--rood);text-decoration-thickness:2px;text-underline-offset:4px}
.kaart__datum{margin-left:auto}
.kaart[data-voor] .kaart__kies{display:none}
.kaart:not([data-voor]) .kaart__datum{display:none}
.kaart__lijf{flex:1;display:flex;flex-direction:column;padding:clamp(22px,2.4vw,34px) clamp(24px,2.6vw,40px) 54px}
.kaart__vraag{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(32px,3.9vw,58px);line-height:1.04;letter-spacing:-.014em;max-width:16ch;text-wrap:balance}
.kaart__vraag--lang{font-size:clamp(28px,2.9vw,42px);line-height:1.1;max-width:24ch}
.kaart__vraag a{text-decoration:none}
.kaart__vraag a:hover{text-decoration:underline;text-decoration-color:var(--rood);text-decoration-thickness:3px;text-underline-offset:6px}
.kaart__begin{margin-top:auto;padding-top:26px;min-height:calc(26px + 32px * 4);max-width:none;padding-right:12%;font-size:19px;line-height:32px;background-image:repeating-linear-gradient(to bottom,transparent 0 31px,var(--lijn) 31px 32px);background-position:0 26px;background-repeat:no-repeat;background-size:100% calc(100% - 26px)}
.kaart__voet{display:flex;align-items:center;gap:20px;margin-top:22px}
.kaart::after{content:"";position:absolute;left:50%;bottom:16px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--kast)}
.knop{display:inline-block;background:var(--inkt);color:var(--wit);text-decoration:none;border:0;border-radius:3px;padding:13px 20px;font-family:var(--grotesk);font-weight:600;font-size:16px;line-height:1.2;cursor:pointer}
.knop:hover{background:var(--rood)}
.knop:focus-visible{outline-color:var(--inkt)}
.lade__bediening{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px;color:#D6E3DD}
.tekstknop{appearance:none;background:none;border:0;padding:4px 0;cursor:pointer;color:var(--wit);font-family:var(--grotesk);font-weight:600;font-size:16px;border-bottom:2px solid var(--rood)}
.tekstknop:hover{color:var(--geel)}
.tekstknop[hidden]{display:none}

/* ---------- vellen met tab ---------- */
.vel{position:relative;color:var(--inkt)}
.vel__tab{position:absolute;bottom:100%;left:calc(max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter)) + var(--tabx,0px));background:inherit;border-radius:8px 8px 0 0;padding:13px 26px 9px;font-family:var(--grotesk);font-stretch:75%;font-weight:800;font-size:26px;line-height:1;letter-spacing:-.005em}

/* register */
.register{background:var(--wit);padding-block:clamp(56px,6vw,96px) clamp(64px,7vw,110px)}
.register__grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(28px,4vw,72px);align-items:start}
.register__intro{font-size:clamp(24px,2.1vw,30px);line-height:1.25;max-width:14ch;position:sticky;top:32px}
.register__intro small{display:block;margin-top:22px;font-size:17px;line-height:1.5;max-width:26ch;color:#3A3A36}
.regels{border-top:2px solid var(--rood)}
.regel{display:grid;grid-template-columns:8.4rem 7.6rem minmax(0,1fr) 10.5rem;gap:0 20px;align-items:baseline;padding:17px 12px 15px;border-bottom:1px solid var(--lijn);position:relative}
.regel:hover{background:color-mix(in srgb,var(--tint) 42%,transparent)}
.regel[data-groep="hoe"]{--tint:var(--geel)}
.regel[data-groep="waarom"]{--tint:var(--roze)}
.regel[data-groep="wat"]{--tint:var(--blauw)}
.regel[data-groep="zo"]{--tint:#DDE3DC}
.regel__datum{font-family:var(--grotesk);font-weight:500;font-size:16px}
.chip{justify-self:start;background:var(--tint);border-radius:5px 5px 0 0;padding:4px 10px 3px;font-family:var(--grotesk);font-stretch:75%;font-weight:800;font-size:17px;line-height:1.1;white-space:nowrap}
.regel__titel{font-size:clamp(21px,1.7vw,25px);line-height:1.24}
.regel__titel a{text-decoration:none}
.regel__titel a::after{content:"";position:absolute;inset:0}
.regel:hover .regel__titel a{text-decoration:underline;text-decoration-color:var(--rood);text-decoration-thickness:2px;text-underline-offset:4px}
.regel__rubriek{font-family:var(--grotesk);font-weight:500;font-size:16px;text-align:right}
.register__meer{margin-top:30px}
.link{font-family:var(--grotesk);font-weight:600;font-size:17px;text-decoration:underline;text-decoration-color:var(--rood);text-decoration-thickness:2px;text-underline-offset:5px}
.link:hover{text-decoration-thickness:4px}

/* uitgelicht */
.uitgelicht{padding-block:clamp(72px,8vw,130px) clamp(120px,11vw,180px)}
.groot{position:relative;overflow:hidden;background:var(--wit);color:var(--inkt);border-radius:8px 8px 0 0;transform:rotate(-.7deg);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:clamp(460px,40vw,580px)}
.groot__strook{grid-column:1/-1;display:flex;gap:16px;align-items:center;min-height:54px;padding:0 clamp(24px,3vw,48px);border-bottom:2px solid var(--rood);font-family:var(--grotesk);font-weight:600;font-size:16px}
.groot__strook span:last-child{margin-left:auto}
.groot__tekst{padding:clamp(30px,3.4vw,56px) clamp(24px,3vw,48px) clamp(40px,4vw,64px);display:flex;flex-direction:column;position:relative;z-index:1}
.groot__citaat{font-style:italic;font-weight:400;font-size:clamp(28px,3vw,45px);line-height:1.2;letter-spacing:-.008em;max-width:21ch;text-wrap:pretty}
.groot__bron{margin-top:auto;padding-top:36px;font-size:19px;line-height:1.45;max-width:40ch}
.groot__bron .knop{margin-top:20px}
.groot__beeld{position:relative;min-height:280px}
.groot__beeld svg{position:absolute;width:min(640px,125%);aspect-ratio:1;right:-22%;bottom:-30%;color:#9A4A1F}

/* rubrieken */
.rubrieken{background:var(--vel);padding-block:clamp(64px,7vw,104px) clamp(72px,8vw,120px)}
.letters{position:absolute;bottom:100%;left:0;right:0;pointer-events:none}
.letters ol{display:flex;gap:4px;align-items:flex-end;justify-content:flex-end}
.letters li{flex:0 1 74px}
.letters a{pointer-events:auto;display:block;text-align:center;text-decoration:none;color:var(--inkt);border-radius:7px 7px 0 0;font-family:var(--grotesk);font-stretch:75%;font-weight:800;font-size:26px;line-height:1;padding-top:11px;height:var(--h,42px)}
.letters li:nth-child(3n+1) a{--h:42px}
.letters li:nth-child(3n+2) a{--h:54px}
.letters li:nth-child(3n) a{--h:66px}
.letters li:nth-child(4n+1) a{background:var(--geel)}
.letters li:nth-child(4n+2) a{background:var(--roze)}
.letters li:nth-child(4n+3) a{background:var(--blauw)}
.letters li:nth-child(4n) a{background:var(--wit)}
.letters a:hover{padding-top:5px}
.rubrieken .vel__tab{--tabx:0px}
.rubrieken__kop{font-weight:400;font-size:clamp(24px,2.1vw,30px);line-height:1.25;max-width:26ch;margin-bottom:clamp(36px,4vw,64px)}
.index{display:flex;flex-wrap:wrap;gap:.1em .44em;font-family:var(--grotesk);font-stretch:75%;font-weight:800;font-size:clamp(46px,5.9vw,88px);line-height:1.06;letter-spacing:-.018em}
.index li{display:flex;align-items:flex-start;gap:.1em;scroll-margin-top:110px}
.index li[data-letter]::before{content:attr(data-letter);flex:none;margin-top:.62em;min-width:1.7em;text-align:center;background:var(--tab);border-radius:5px 5px 0 0;padding:.42em .4em .3em;font-size:.25em;line-height:1;letter-spacing:0}
.index a{text-decoration:none}
.index a:hover{text-decoration:underline;text-decoration-color:var(--rood);text-decoration-thickness:.07em;text-underline-offset:.1em}
.index li:target a{background:var(--wit);box-shadow:0 0 0 .08em var(--wit)}

/* archief */
.archief{padding-block:clamp(72px,8vw,120px) clamp(80px,9vw,140px)}
.archief__kop{display:flex;align-items:baseline;gap:28px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,72px)}
.archief__kop h2{font-family:var(--grotesk);font-stretch:75%;font-weight:800;font-size:clamp(48px,5.4vw,80px);line-height:.9;letter-spacing:-.015em}
.archief__kop p{max-width:44ch;color:#D6E3DD}
.liniaal-rol{overflow-x:auto;padding-bottom:12px;scrollbar-color:var(--kast-licht) transparent}
.liniaal{display:grid;grid-template-columns:repeat(21,minmax(50px,1fr)) 96px;min-width:1150px;padding-top:70px;position:relative}
.maand{position:relative;border-left:2px solid var(--kast-licht);height:96px;border-top:3px solid var(--wit)}
.maand--eind{border-top-color:transparent}
.maand--jan{border-left-color:var(--wit);height:168px}
.maand__naam{position:absolute;left:8px;top:14px;font-family:var(--grotesk);font-weight:500;font-size:16px;line-height:1;color:#A9C3BA}
.maand--vol .maand__naam{color:var(--wit)}
.maand__jaar{position:absolute;left:9px;top:112px;font-family:var(--grotesk);font-stretch:75%;font-weight:800;font-size:52px;letter-spacing:-.01em;line-height:1;color:var(--wit)}
.maand--start{height:168px;border-left-color:var(--wit)}
.vlag{position:absolute;left:-2px;bottom:100%;display:block;width:calc(100% - 6px);min-width:40px;height:var(--vh,48px);background:var(--tint,var(--wit));color:var(--inkt);border-radius:6px 6px 0 0;text-decoration:none;font-family:var(--grotesk);font-stretch:75%;font-weight:800;font-size:20px;line-height:1;padding:11px 0 0 9px}
.vlag:hover{--vh:62px}
.vlag--geel{--tint:var(--geel)} .vlag--roze{--tint:var(--roze)} .vlag--blauw{--tint:var(--blauw)} .vlag--wit{--tint:var(--wit)}

/* voet: ladefront */
.voet{background:var(--kast-diep);padding-block:clamp(64px,7vw,110px) 40px}
.voet__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);gap:clamp(32px,4vw,72px);align-items:start}
.houder{display:inline-block;border:4px solid var(--metaal);padding:7px;border-radius:2px;max-width:100%}
.houder__etiket{background:var(--wit);color:var(--inkt);padding:18px 26px 16px}
.houder__naam{font-family:var(--grotesk);font-stretch:75%;font-weight:800;font-size:clamp(40px,4.6vw,68px);line-height:.92;letter-spacing:-.015em}
.houder__naam i{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:0}
.houder__regel{margin-top:8px;font-style:italic;font-size:21px;line-height:1.3;border-top:2px solid var(--rood);padding-top:8px}
.greep{width:min(260px,70%);height:46px;margin:34px 0 0 36px;border:12px solid var(--metaal);border-top:0;border-radius:0 0 46px 46px}
.voet h3{font-family:var(--grotesk);font-stretch:75%;font-weight:800;font-size:24px;line-height:1;margin-bottom:16px}
.voet li{padding-block:5px;font-size:19px;line-height:1.3}
.voet li a{text-decoration:none;border-bottom:2px solid transparent}
.voet li a:hover{border-bottom-color:var(--rood)}
.voet__slot{margin-top:clamp(56px,6vw,96px);padding-top:18px;border-top:2px solid var(--kast-licht);display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap;color:#C4D6CE}

/* ---------- tablet en mobiel ---------- */
@media (max-width:1080px){
  .nav .alleen-breed{display:none}
  .regel{grid-template-columns:7.6rem 6.6rem minmax(0,1fr)}
  .regel__rubriek{display:none}
  .voet__grid{grid-template-columns:1fr 1fr}
  .voet__grid > :first-child{grid-column:1/-1}
}
@media (max-width:900px){
  :root{--step:44px}
  body{font-size:18px}
  .nav{display:none}
  .kop__rij{justify-content:space-between}
  .merk{font-size:26px;padding:20px 16px 10px}
  .menuknop{display:inline-block;appearance:none;border:0;cursor:pointer;background:var(--kast-licht);color:var(--wit);padding:22px 18px 11px;border-radius:0 0 8px 8px;font-family:var(--grotesk);font-stretch:75%;font-weight:800;font-size:22px;line-height:1}
  .menuknop[aria-expanded="true"]{background:var(--wit);color:var(--inkt)}
  .menu{display:block;position:absolute;left:0;right:0;top:0;z-index:-1;background:var(--wit);color:var(--inkt);padding:92px var(--gutter) 34px;border-bottom:3px solid var(--rood);transform:translateY(-102%);visibility:hidden;transition:transform .34s var(--ease),visibility 0s .34s}
  .menu[data-open]{transform:none;visibility:visible;transition:transform .34s var(--ease)}
  .menu li{border-bottom:1px solid var(--lijn)}
  .menu li a{display:block;padding:14px 0;text-decoration:none;font-family:var(--grotesk);font-stretch:75%;font-weight:800;font-size:34px;line-height:1}
  .menu .zoek{margin-top:26px;border-bottom-color:var(--inkt)}
  .menu .zoek input{flex:1;width:auto;padding-block:10px}
  .menu .zoek input::placeholder{color:#4A4A45}
  .menu .zoek button:hover{color:var(--rood)}

  .la{padding-block:30px 96px}
  .la__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .woorden{flex-direction:row;align-items:stretch;gap:4px;border-bottom:3px solid var(--tintnu,var(--roze))}
  .woord,.woord[data-groep="zo"]{font-size:21px;line-height:1;letter-spacing:0;margin:0;padding:12px 11px 9px;border-radius:7px 7px 0 0;color:var(--wit);white-space:nowrap}
  .woord[aria-selected="true"]{background:var(--tint);color:var(--inkt)}
  .la__groot{display:block;font-family:var(--grotesk);font-stretch:75%;font-weight:800;font-size:clamp(84px,27vw,190px);line-height:.86;letter-spacing:-.025em;color:var(--tintnu,var(--roze));margin-top:22px}
  .la__groot[data-lang]{font-size:clamp(60px,18.5vw,132px)}
  .la__uitleg{margin-top:16px;font-size:19px;max-width:34ch}
  .kaart{min-height:0}
  .kaart__strook{padding-inline:18px;font-size:15px}
  .kaart__kies{font-size:17px}
  .kaart__lijf{padding:22px 18px 52px}
  .kaart__vraag{font-size:clamp(30px,8.6vw,44px)}
  .kaart__vraag--lang{font-size:clamp(25px,6.9vw,34px)}
  .kaart__begin{font-size:18px}
  .kaart__rubriek{display:none}
  .kaart[data-voor] .kaart__rubriek{display:inline}

  .vel__tab{font-size:22px;padding:11px 20px 8px}
  .register__grid{grid-template-columns:minmax(0,1fr)}
  .register__intro{position:static;max-width:22ch}
  .register__intro small{max-width:36ch}
  .regel{grid-template-columns:auto minmax(0,1fr);gap:8px 14px;padding:16px 4px 14px}
  .regel__datum{order:2;align-self:center}
  .chip{order:1}
  .regel__titel{order:3;grid-column:1/-1;font-size:22px}

  .uitgelicht{padding-block:64px 120px}
  .groot{grid-template-columns:minmax(0,1fr);transform:rotate(-.5deg);min-height:0}
  .groot__tekst{padding-bottom:8px}
  .groot__beeld{min-height:0;height:230px;overflow:hidden}
  .groot__beeld svg{width:460px;right:auto;left:50%;margin-left:-150px;bottom:auto;top:26px}
  .groot__citaat{font-size:clamp(27px,7.4vw,38px)}

  .letters{overflow-x:auto;scrollbar-width:none}
  .letters ol{justify-content:flex-start;padding-inline:var(--gutter);width:max-content}
  .letters li{flex:0 0 50px}
  .rubrieken .vel__tab{display:none}
  .index{font-size:clamp(40px,11.4vw,64px);gap:.06em .4em}

  .archief__kop{gap:14px}
  .liniaal-rol{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .voet__grid{grid-template-columns:minmax(0,1fr)}
  .greep{margin-left:24px}
}
@media (max-width:420px){
  .woord,.woord[data-groep="zo"]{font-size:19px;padding-inline:9px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kaart,.menu,.woord{transition:none !important}
}

/* ---- Afgeleide pagina's: artikel, lijst, losse pagina. Alleen bestaande variabelen. ---- */
.blad{background:var(--vel);color:var(--inkt);padding-block:clamp(40px,7vw,96px)}
.blad__strook{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;font-family:var(--grotesk);
  font-stretch:75%;font-weight:800;font-size:17px;text-transform:uppercase;letter-spacing:.04em}
.blad__strook a{color:inherit}
.blad h1{font-family:var(--grotesk);font-stretch:75%;font-weight:800;line-height:.96;
  font-size:clamp(34px,6vw,68px);margin:18px 0 0;max-width:22ch}
.blad__lood{font-size:22px;line-height:1.5;margin:18px 0 0;max-width:62ch}
.blad__lijf{max-width:68ch;margin-top:40px;border-top:2px solid var(--inkt);padding-top:34px}
.blad__lijf h2,.blad__lijf h3{font-family:var(--grotesk);font-stretch:75%;font-weight:800;
  line-height:1.05;margin:44px 0 12px}
.blad__lijf h2{font-size:clamp(25px,3.4vw,36px)}
.blad__lijf h3{font-size:clamp(21px,2.6vw,27px)}
.blad__lijf p,.blad__lijf li{font-size:19px;line-height:1.62}
.blad__lijf a{color:var(--inkt);text-underline-offset:3px}
.blad__lijf figure{margin:34px 0}
.blad__lijf img{max-width:100%;height:auto;display:block;border-radius:3px}
.blad__lijf figcaption{font-family:var(--grotesk);font-size:15px;margin-top:8px;color:#3d4a44}
.blad__voet{margin-top:52px;border-top:2px solid var(--inkt);padding-top:22px;display:flex;
  flex-wrap:wrap;gap:14px 26px;align-items:center;font-family:var(--grotesk);font-size:16px}
.blad__voet a{color:var(--inkt)}
.lijst__kop{padding-block:clamp(34px,6vw,72px)}
.lijst__kop h1{font-family:var(--grotesk);font-stretch:75%;font-weight:800;line-height:.98;
  font-size:clamp(38px,8vw,88px);margin:0;color:var(--wit)}
.lijst__kop p{margin:14px 0 0;max-width:56ch;color:var(--metaal)}
.bladeren{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;font-family:var(--grotesk);font-size:16px}
.bladeren a,.bladeren span{padding:9px 15px;border-radius:3px;text-decoration:none}
.bladeren a{background:var(--inkt);color:var(--wit)}
.bladeren span{background:var(--metaal);color:var(--inkt)}
@media (prefers-reduced-motion:no-preference){.blad__lijf{scroll-behavior:smooth}}

/* ---- Rubrieksbalk en rubrieken in het uitklappaneel. ----
   De tabjes zijn `.chip` uit de levering: dezelfde vorm, dezelfde tinten, dezelfde letter. Ze
   liggen op de kast en steken met hun ronde bovenhoeken omhoog, zoals de kaarttabs in een la.
   De balk scrollt zijwaarts wanneer hij niet past; dat is hetzelfde gedrag als de maandliniaal. */
.rubrieksbalk{background:var(--kast);border-bottom:2px solid var(--kast-licht)}
.rubrieksbalk__rol{display:flex;gap:4px;align-items:flex-end;list-style:none;margin:0;
  padding:16px 0 0;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-color:var(--kast-licht) transparent}
.rubrieksbalk__rol::-webkit-scrollbar{height:6px}
.rubrieksbalk__rol::-webkit-scrollbar-thumb{background:var(--kast-licht);border-radius:3px}
.rubrieksbalk__rol li{flex:0 0 auto}
.rubrieksbalk .chip,.menu__rubrieken .chip{display:inline-flex;align-items:baseline;gap:7px;
  text-decoration:none;color:var(--inkt);white-space:nowrap;padding:8px 13px 7px}
.rubrieksbalk .chip .num,.menu__rubrieken .chip .num{font-size:14px;font-weight:600;opacity:.6}
.rubrieksbalk .chip[aria-current="page"]{padding-bottom:13px;margin-bottom:-2px}
.rubrieksbalk .chip:focus-visible,.menu__rubrieken .chip:focus-visible{outline:3px solid var(--rood);outline-offset:2px}
.menu__kop{margin:22px 0 8px;font-family:var(--grotesk);font-stretch:75%;font-weight:800;
  font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--metaal)}
.menu__rubrieken{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}

/* ---- Diepte van de stapel begrenzen. ----
   De levering rekent met een la van vier a vijf kaarten: `--n` bepaalt de aanloop boven de stapel
   en `--i` schuift elke kaart 50px omhoog en krimpt hem 3,4%. Deze site heeft er veertien in de
   grootste la, en dan loopt de stapel het scherm uit en is de achterste kaart tot een streep
   gekrompen. De kaarten zelf blijven allemaal staan — ze zijn stuk voor stuk een link naar een
   artikel — maar de VORM van de stapel wordt afgetopt. Dat gebeurt hier en niet in de opmaak,
   omdat het geleverde script `--i` bij het laden zelf opnieuw zet. */
.stapel{padding-top:calc((min(var(--n),6) - 1) * var(--step))}
.kaart{transform:translateY(calc(min(var(--i),5) * var(--step) * -1))
  scale(calc(1 - min(var(--i),5) * .034)) rotate(var(--r,0deg))}
.kaart:not([data-voor])::before{background:rgba(20,48,42,calc(min(var(--i),5) * .07))}