/* De Politieke Code
   Warm zwart, gebroken wit, één amber accent.
   Uitkomstmotief: de norm is een lijn; een uiting blijft erbinnen of gaat eroverheen. */

:root{
  /* --- oppervlakken: paper → white → ink --- */
  --ink:        #11110F;
  --paper:      #F4F3EE;
  --paper-op:   #EAE9E2;
  --white:      #FFFFFF;

  /* --- interventie: uitsluitend als vlak, lijn, of tekst op donker --- */
  --acid:       #C7F000;
  --acid-diep:  #A9C900;

  /* --- tekst en lijnen --- */
  --grijs:      #63635E;
  --lijn:       #DEDDD6;
  --lijn-donker:rgba(244,243,238,.18);

  /* --- uitkomsten: semantiek, geen merkkleur --- */
  --groen:      #2F6B3E;
  --groen-zacht:#E6EDE6;
  --rood:       #A33322;
  --rood-zacht: #F5E7E4;

  --marge: clamp(1.25rem, 5vw, 4rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Archivo, system-ui, sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.1rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:72rem; margin:0 auto; padding:0 var(--marge)}
.wrap.smal{max-width:46rem}

h1,h2,h3,blockquote{font-family:Fraunces, Georgia, serif; font-weight:300; font-optical-sizing:auto}
h1{font-size:clamp(2.4rem,1.2rem + 4.6vw,4.6rem); line-height:1.02; letter-spacing:-.03em; margin:0 0 1.4rem; max-width:17ch}
h2{font-size:clamp(2rem,1.2rem + 3.2vw,3.4rem); line-height:1.02; letter-spacing:-.032em; margin:0 0 1.1rem; max-width:20ch}
h3{font-family:Archivo, sans-serif; font-weight:600; font-size:1.06rem; letter-spacing:-.005em; margin:0 0 .4rem}
p{margin:0 0 1rem; max-width:38rem}
a{color:inherit}

.klein{font-size:.92rem; color:var(--grijs)}
.lead{font-size:clamp(1.12rem,1rem + .6vw,1.4rem); line-height:1.45; max-width:34rem; color:var(--grijs)}
.onder-kop{color:var(--grijs); margin:-.4rem 0 2.4rem; max-width:40rem}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--acid); outline-offset:2px
}

/* ---------------------------------------------------------- kop */

.top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding:.85rem var(--marge);
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--lijn);
}
.merk{
  display:inline-flex; align-items:center; color:var(--ink); text-decoration:none; flex:none;
}
.merk svg{display:block; height:auto; fill:currentColor}
.merk-breed{display:block; width:190px}
.merk-smal{display:none; width:26px}
@media (max-width:30rem){
  .merk-breed{display:none}
  .merk-smal{display:block}
}
.donker .merk, .onder .merk{color:var(--paper)}

.top nav{display:flex; gap:1.4rem; font-size:.94rem; white-space:nowrap}
@media (max-width:34rem){
  .top{padding:.7rem var(--marge); font-size:.92rem; gap:.8rem}
  .top nav{gap:.85rem; font-size:.86rem}
}
/* bij zeer smalle schermen wijkt de merknaam terug tot alleen het teken */
@media (max-width:25rem){
  .top{gap:.6rem}
  .top nav{gap:.8rem; font-size:.85rem}
}
.top nav a{color:var(--grijs); text-decoration:none; padding-bottom:2px; border-bottom:2px solid transparent}
.top nav a:hover{color:var(--ink); border-bottom-color:var(--ink)}

/* ---------------------------------------------------------- vlakken */

.beat{padding:clamp(4rem,9vw,8rem) 0}
section[id]{scroll-margin-top:4.5rem}
.opening{
  position:relative; overflow:hidden;
  padding:clamp(4rem,12vw,10rem) 0 clamp(3rem,7vw,6rem);
}
/* de norm die dwars door de compositie loopt */
.opening::before{
  content:""; position:absolute; left:-10%; right:-10%;
  top:38%; height:clamp(16px,2.6vw,30px);
  background:var(--acid); transform:rotate(-3deg); transform-origin:center;
  z-index:0; pointer-events:none;
}
/* gestapeld: de band loopt door de kop, niet door de knoppen */
@media (max-width:62rem){
  .opening::before{top:17%; height:18px; transform:rotate(-4deg)}
}

.opening .wrap{position:relative; z-index:1}
.opening h1{position:relative; z-index:2}
.kop-blok{padding:clamp(3rem,7vw,5.5rem) 0 0}
.kop-blok + .beat{padding-top:clamp(2rem,4vw,3rem)}

.wit{background:var(--white)}
.donker{background:var(--ink); color:var(--paper)}
.donker .lead,.donker .klein,.donker p{color:#A8A8A2}
.donker h2,.donker h3{color:var(--paper)}
.donker .constatering{color:var(--paper)}

.aanhef{font-size:.88rem; letter-spacing:.06em; text-transform:uppercase; color:var(--grijs); margin-bottom:1.6rem}

.knoppen{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2.2rem}
.knop{
  display:inline-block; text-decoration:none;
  background:var(--acid); color:var(--ink);
  border:1.5px solid var(--acid);
  padding:.85rem 1.6rem; border-radius:0;
  font-size:.96rem; font-weight:600; letter-spacing:.01em;
}
.knop:hover{background:var(--acid-diep); border-color:var(--acid-diep)}
.knop.leeg{background:transparent; color:var(--ink); border-color:var(--ink)}
.knop.leeg:hover{background:var(--ink); color:var(--paper)}
.donker .knop.leeg{color:var(--paper); border-color:var(--paper)}
.donker .knop.leeg:hover{background:var(--paper); color:var(--ink)}

/* ---------------------------------------------------------- scherm 2 */

.twee{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); margin:2.5rem 0}
@media (max-width:44rem){.twee{grid-template-columns:1fr}}
.twee > div{border-top:2px solid currentColor; padding-top:.9rem}
.donker .twee > div{border-top-color:var(--paper)}

.constatering{
  border-left:4px solid var(--acid);
  padding-left:1.4rem; margin-top:2.8rem;
  font-family:Fraunces, Georgia, serif; font-weight:300;
  font-size:clamp(1.25rem,1.1rem + .7vw,1.65rem); line-height:1.3; max-width:32rem;
}

/* ---------------------------------------------------------- principes */

.principes{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem)}
@media (max-width:60rem){.principes{grid-template-columns:1fr 1fr}}
@media (max-width:40rem){.principes{grid-template-columns:1fr}}
.principe{
  display:block; text-decoration:none; color:inherit;
  border-top:2px solid var(--ink); padding-top:1rem;
}
.principe p{font-size:.98rem; color:var(--grijs); margin:0 0 .7rem}
.principe .hoeveel{font-size:.82rem; color:var(--grijs)}
.principe:hover h3{text-decoration:underline; text-underline-offset:3px}

/* ---------------------------------------------------------- grens */

.grens{background:var(--ink); color:var(--paper)}
.grens h2{color:var(--paper); font-size:clamp(2.2rem,1.3rem + 3.6vw,4rem); max-width:16ch}
.grens p{color:#A8A8A2}
.grens .buiten .etiket{color:#84847E}
.grens .binnen .etiket{color:var(--acid)}
.grens .uitspraakje{color:var(--paper); border-left-color:var(--lijn-donker)}
.grens .binnen .uitspraakje{border-left-color:var(--paper)}
.grens .waarom{color:#84847E}
.drie{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); margin:2.5rem 0}
@media (max-width:52rem){.drie{grid-template-columns:1fr}}
.voorbeelden-grens > div{border-top:none; padding-top:0}
.waarom{font-size:.88rem; color:var(--grijs); margin:.6rem 0 0}
.etiket{font-size:.82rem; letter-spacing:.02em; margin-bottom:.5rem}
.buiten .etiket{color:var(--grijs)}
.binnen .etiket{color:var(--ink)}
.uitspraakje{
  font-family:Fraunces, Georgia, serif; font-size:1.24rem; line-height:1.35;
  padding-left:1rem; border-left:2px solid var(--lijn); margin:0;
}
.binnen .uitspraakje{border-left-color:var(--ink)}

/* ---------------------------------------------------------- de casecomponent */

.kaarten{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:start}
@media (max-width:52rem){.kaarten{grid-template-columns:1fr}}

.case{
  padding:1.6rem 0 0;
  border-top:2px solid var(--ink);
}
.case.ja, .case.nee, .case.open{border-left:none; padding-left:0}

.case header{display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem 1rem; margin-bottom:.9rem}
.case .portret{width:44px; height:44px; border-radius:50%; object-fit:cover; align-self:center}
.case .wie{display:flex; align-items:baseline; gap:.5rem}
.case .naam{font-weight:700; font-size:1.02rem; letter-spacing:-.01em}
.case .partij{font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--grijs)}
.case .bron{
  display:flex; flex-wrap:wrap; gap:.2rem .9rem; width:100%;
  font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--grijs);
}
.case .medium{}
.kijk{color:var(--ink); text-decoration:none; border-bottom:1.5px solid var(--ink)}
.kijk:hover{background:var(--acid)}
.kijk.groot{display:inline-block; margin:-.6rem 0 2rem; font-size:.95rem}

.case blockquote,
.casepagina blockquote.groot{
  position:relative;
  margin:0 0 1.4rem;
  padding:0 0 0 1.4rem;
  border-left:2px solid var(--ink);
  background:none; border-radius:0; box-shadow:none;
  font-family:Fraunces, Georgia, serif; font-weight:300;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.85rem); line-height:1.24; letter-spacing:-.02em;
}
.casepagina blockquote.groot{
  padding-left:2rem; border-left-width:4px;
  font-size:clamp(1.5rem,1.15rem + 1.6vw,2.3rem); line-height:1.2;
  margin:2rem 0 1.6rem; max-width:30ch;
}
/* de aanhaling hangt in de marge, zoals in een redactionele publicatie */
.case blockquote::before,
.casepagina blockquote.groot::before{
  content:none;
}

.meetlat{
  display:flex; flex-direction:column; gap:.15rem;
  padding-bottom:.8rem; border-bottom:1px solid var(--lijn); margin:0 0 1rem;
}
.principe-van{font-size:.95rem; font-weight:500; color:var(--ink)}
.regel-van{font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; color:var(--grijs)}
.regel-van a{color:var(--grijs); text-decoration:none; border-bottom:1px solid var(--lijn)}
.regel-van a:hover{color:var(--ink); border-bottom-color:var(--ink)}

.uitkomst{
  display:flex; align-items:baseline; gap:.55rem; margin:0 0 .5rem;
  font-weight:700; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase;
}
.uitkomst .mark{font-size:1.15em; line-height:1}
.ja .uitkomst{color:var(--groen)}
.nee .uitkomst{color:var(--rood)}
.open .uitkomst{color:var(--grijs)}
/* de uitkomst staat op een eigen regel met een streep in de betekeniskleur */
.uitkomst::after{content:""; flex:1; height:2px; align-self:center; opacity:.28; background:currentColor}
.reden{font-size:.96rem; color:var(--grijs); margin:0}

.verder{
  display:inline-block; margin-top:1rem; font-size:.92rem;
  color:var(--grijs); text-decoration:none; border-bottom:1px solid var(--lijn);
}
.verder:hover{color:var(--ink); border-bottom-color:var(--ink)}
.verder.groot{margin-top:2.6rem; font-size:1rem}

/* ---------------------------------------------------------- filters */

.filters{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.8rem}
.filter{
  font:inherit; font-size:.92rem; font-weight:500; cursor:pointer;
  background:transparent; color:var(--grijs);
  border:1px solid var(--lijn); border-radius:0; padding:.45rem 1.1rem;
}
.filter:hover{border-color:var(--ink); color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--acid); border-color:var(--acid); color:var(--ink)}

/* ---------------------------------------------------------- stappen */

.stappen{counter-reset:s; list-style:none; padding:0; margin:2rem 0; max-width:38rem}
.stappen li{
  counter-increment:s; position:relative; padding-left:2.4rem; margin-bottom:1.1rem;
}
.stappen li::before{
  content:counter(s); position:absolute; left:0; top:-.1rem;
  font-family:Archivo, sans-serif; font-weight:600; font-size:.95rem; color:var(--paper);
}

/* ---------------------------------------------------------- casepagina */

.casepagina{padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,7vw,6rem)}
.kruimel{font-size:.9rem; margin-bottom:2rem}
.kruimel a{color:var(--grijs); text-decoration:none; border-bottom:1px solid var(--lijn)}
.wie-groot{font-size:1.35rem; font-weight:600; margin:0 0 .2rem}
.wie-groot .partij{font-weight:400; color:var(--grijs); font-size:1rem}
.bron-groot{font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grijs); margin-bottom:0}
.partijnoot{
  font-size:.88rem; color:var(--grijs); margin:.7rem 0 0;
  padding-left:.9rem; border-left:2px solid var(--lijn); max-width:34rem;
}

.oordeel{
  padding:1.6rem 0; margin:3rem 0;
  border-top:3px solid var(--ink); border-bottom:1px solid var(--lijn);
}
.oordeel .uitkomst{font-size:.95rem}
.oordeel .uitkomst{font-size:1.14rem}
.oordeel .reden{max-width:36rem}

.analyse{margin:3rem 0}
.analyse h2, .bronnen h2{font-size:1.3rem; margin-bottom:1rem}

.bronnen ul{list-style:none; padding:0; margin:0; border-top:1px solid var(--lijn)}
.bronnen li{
  display:grid; grid-template-columns:7rem 1fr; gap:.2rem 1.2rem;
  padding:.9rem 0; border-bottom:1px solid var(--lijn); font-size:.95rem;
}
@media (max-width:34rem){.bronnen li{grid-template-columns:1fr}}
.bronnen .soort{font-size:.82rem; color:var(--grijs)}
.bronnen .titel a{color:inherit}
.bronnen .vind{grid-column:2; color:var(--grijs); font-size:.9rem}
@media (max-width:34rem){.bronnen .vind{grid-column:1}}

.voetnoot{margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--lijn)}
.voetnoot p{font-size:.92rem; color:var(--grijs)}

/* ---------------------------------------------------------- steun */

.steun{background:var(--white)}
.instemming{border-left:3px solid var(--ink); padding-left:1.3rem; margin:2rem 0}
.instemming p:first-child{margin-bottom:.5rem}
.doel{
  display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap;
  margin:2.5rem 0 1.2rem; padding-bottom:1.1rem; border-bottom:2px solid var(--ink);
}
.doel .getal{
  font-family:Fraunces, Georgia, serif; font-weight:300;
  font-size:clamp(2.4rem,1.6rem + 3vw,3.8rem); line-height:1; letter-spacing:-.03em; margin:0;
}
.doel .getal span{font-size:1.1rem; letter-spacing:0; margin-left:.4rem}
.doel .voor{font-size:1.05rem; color:var(--grijs); margin:0}

.formulier-plek{
  border:1px dashed var(--lijn); padding:2.5rem 1.5rem; text-align:center;
  color:var(--grijs); font-size:.95rem; max-width:none;
}

.verantwoording{background:var(--white)}

/* ---------------------------------------------------------- voet */

.onder{background:var(--ink); color:#A8A8A2; padding:3rem 0 3.5rem; margin-top:0}
.onder .claim{font-family:Fraunces, serif; font-size:1.2rem; color:var(--paper); max-width:34rem; margin-bottom:1.6rem}
.onder nav{display:flex; gap:1.4rem; flex-wrap:wrap; margin-bottom:1.6rem; font-size:.94rem}
.onder nav a{color:#A8A8A2; text-decoration:none}
.onder nav a:hover{color:var(--paper)}
.onder .klein{color:#84847E; max-width:42rem}


/* ---------------------------------------------------------- de codepagina */

.inhoudsopgave{background:var(--white); padding-top:clamp(2rem,4vw,3rem); padding-bottom:clamp(2rem,4vw,3rem)}
.inhoud{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem 2rem; margin-top:1rem}
@media (max-width:56rem){.inhoud{grid-template-columns:1fr 1fr}}
@media (max-width:40rem){.inhoud{grid-template-columns:1fr}}
.inhoud-item h3{font-size:.98rem; margin-bottom:.4rem}
.inhoud-item .nrs{display:flex; gap:.35rem; margin:0}
.inhoud-item .nrs a{
  display:inline-grid; place-items:center; min-width:1.85rem; height:1.85rem;
  border:1px solid var(--lijn); border-radius:3px; background:var(--paper);
  font-size:.88rem; text-decoration:none; color:var(--grijs);
}
.inhoud-item .nrs a:hover{border-color:var(--ink); color:var(--ink); background:var(--acid)}

.regels{display:flex; flex-direction:column; gap:0}
.regel{
  display:grid; grid-template-columns:minmax(0,17rem) minmax(0,1fr);
  gap:.6rem clamp(1.5rem,4vw,3.5rem);
  padding:2rem 0; border-top:1px solid var(--lijn); scroll-margin-top:5rem;
}
@media (max-width:52rem){.regel{grid-template-columns:1fr}}
.regel .nummer{font-size:.82rem; color:var(--grijs); margin:0 0 .2rem}
.regel h2{font-size:1.25rem; margin:0 0 .35rem; max-width:none}
.regel .hoort-bij{font-size:.88rem; color:var(--grijs); margin:0}
.regel-tekst p{font-size:.97rem; margin-bottom:.7rem}
.regel-tekst .tussenkop{
  font-weight:600; font-size:.92rem; color:var(--ink);
  margin:1.4rem 0 .5rem; padding-top:.9rem; border-top:1px solid var(--lijn);
}
.regel-tekst .tussenkop:first-child{margin-top:0; padding-top:0; border-top:none}
.regel-tekst p:last-child{margin-bottom:0}
.regel:target{background:var(--paper-op)}
.regel:target{background:var(--white); box-shadow:-4px 0 0 var(--acid)}

/* ---------------------------------------------------------- het voorstel */

.toc{margin:1rem 0 0; padding:0; list-style:none; columns:2; column-gap:2.5rem}
@media (max-width:44rem){.toc{columns:1}}
.toc li{margin-bottom:.45rem; break-inside:avoid}
.toc a{color:var(--grijs); text-decoration:none}
.toc a:hover{color:var(--ink); text-decoration:underline}

.document{max-width:42rem}
.document h1{font-size:2rem; margin:3rem 0 1rem}
.document h2{
  font-size:1.6rem; margin:3.5rem 0 1rem; padding-top:1.4rem;
  border-top:1px solid var(--lijn); scroll-margin-top:5rem; max-width:none;
}
.document h3{font-size:1.1rem; margin:2rem 0 .5rem; scroll-margin-top:5rem}
.document h4{font-size:1rem; margin:1.5rem 0 .4rem; color:var(--grijs)}
.document p, .document li{font-size:1rem; max-width:none}
.document ul, .document ol{padding-left:1.3rem}
.document li{margin-bottom:.45rem}
.document blockquote{
  margin:1.5rem 0; padding:.2rem 0 .2rem 1.2rem;
  border-left:2px solid var(--lijn);
  font-family:Fraunces, Georgia, serif; font-size:1.1rem; line-height:1.45;
}
.document blockquote p{font-family:inherit; font-size:inherit}
.document table{border-collapse:collapse; width:100%; margin:1.5rem 0; font-size:.94rem}
.document th{text-align:left; border-bottom:2px solid var(--ink); padding:.5rem .6rem .5rem 0}
.document td{border-bottom:1px solid var(--lijn); padding:.5rem .6rem .5rem 0; vertical-align:top}
.document hr{border:0; border-top:1px solid var(--lijn); margin:2.5rem 0}
.document code{background:var(--paper-op); padding:.1rem .3rem; border-radius:2px; font-size:.9em}


/* ---------------------------------------------------------- de opening: een echte toets */

.opening .wrap{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,25rem);
  gap:clamp(2rem,6vw,5.5rem); align-items:start;
}
@media (max-width:62rem){.opening .wrap{grid-template-columns:1fr; gap:3rem}}
/* asymmetrie: de proef zakt weg ten opzichte van de kop */
.proef{margin-top:clamp(0rem,7vw,5.5rem)}
@media (max-width:62rem){.proef{margin-top:0}}
.aanhef-blok h1{margin-bottom:1.2rem}
.aanhef-blok .lead{margin-bottom:0}
.proef .proef-uitleg{
  font-size:.85rem; color:var(--grijs); margin:1.2rem 0 0;
  padding-top:.9rem; border-top:1px solid var(--lijn);
}
.proef .proef-uitleg a{color:var(--grijs); border-bottom:1px solid var(--lijn); text-decoration:none}
.proef .proef-uitleg a:hover{color:var(--ink)}

.proef{margin:0; background:var(--white); padding:clamp(1.5rem,2.8vw,2.2rem)}
.proef figcaption{display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .6rem; margin-bottom:.7rem}
.proef .naam{font-weight:600}
.proef .partij{font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--grijs)}
.proef .bron{font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--grijs); width:100%}

.proef blockquote{
  margin:0 0 1.5rem; padding:0 0 0 1.5rem;
  border-left:3px solid var(--ink);
  background:none; border-radius:0; box-shadow:none;
  font-family:Fraunces, Georgia, serif; font-weight:300;
  font-size:clamp(1.35rem,1.1rem + 1.2vw,1.95rem); line-height:1.2; letter-spacing:-.02em;
}

.proef .toets{border-left:4px solid var(--groen); padding-left:1.2rem}
.proef .meetlat-regel{font-size:.85rem; color:var(--grijs); margin:0 0 .5rem}
.proef .uitkomst{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem;
  background:var(--groen-zacht); color:var(--groen);
  padding:.3rem .8rem .3rem .55rem; border-radius:999px; margin:0 0 .5rem;
}
.proef .reden{font-size:.93rem; color:var(--grijs); margin:0}
.proef .proef-uitleg{animation-delay:1.2s}

/* één orkestratie bij het laden: citaat, dan regel, dan oordeel */
@media (prefers-reduced-motion:no-preference){
  .proef blockquote{animation:opkomen .55s cubic-bezier(.2,.7,.3,1) both}
  .proef .stap{animation:opkomen .45s cubic-bezier(.2,.7,.3,1) both}
  .proef .meetlat-regel{animation-delay:.5s}
  .proef .uitkomst{animation-delay:.85s}
  .proef .reden{animation-delay:1.05s}
}
@keyframes opkomen{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:none}
}

.opening h1{
  font-size:clamp(2.3rem,1rem + 5vw,4.8rem); line-height:.98;
  letter-spacing:-.035em; max-width:13ch; margin-bottom:1.5rem;
}
.aanhef-blok .lead{font-size:clamp(1.05rem,.95rem + .45vw,1.22rem); max-width:30rem}


/* ---------------------------------------------------------- ook onderzocht */

.afgevallen{background:var(--ink)}
.afgevallen h2{color:var(--paper)}
.afgevallen > .wrap > p{color:#A8A8A2}
.afvallers{list-style:none; padding:0; margin:2rem 0 0}
.afvallers li{padding:1.4rem 0; border-top:1px solid var(--lijn-donker)}
.afvallers li:last-child{border-bottom:1px solid var(--lijn-donker)}
.afvallers .wie{display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .6rem; margin:0 0 .5rem; font-weight:600; color:var(--paper)}
.afvallers .partij{font-weight:400; font-size:.88rem; color:#A8A8A2}
.afvallers .onderwerp{font-weight:400; font-size:.92rem; color:#A8A8A2; width:100%}
.afvallers .bronregel{font-size:.85rem; color:#A8A8A2; margin:0 0 .6rem}
.afvallers .waarom{font-size:.95rem; color:#A8A8A2; margin:0; max-width:40rem}


/* ---------------------------------------------------------- de werkwijze */

.wijziging{margin:2rem 0; padding-left:1.2rem; border-left:2px solid var(--lijn)}
.wijziging h3{margin-bottom:.4rem}
.wijziging p{margin:0; font-size:.98rem}

.fouten{counter-reset:f; list-style:none; padding:0; margin:2.5rem 0}
.fouten li{
  counter-increment:f; position:relative; padding:1.4rem 0 1.4rem 3rem;
  border-top:1px solid var(--lijn-donker);
}
.fouten li:last-child{border-bottom:1px solid var(--lijn-donker)}
.fouten li::before{
  content:counter(f); position:absolute; left:0; top:1.4rem;
  font-family:Archivo, sans-serif; font-weight:600; font-size:1rem; color:var(--paper); line-height:1;
}
.fouten h3{margin-bottom:.4rem; color:var(--paper)}
.fouten p{margin:0; font-size:.96rem}

.les{
  font-family:Fraunces, Georgia, serif; font-size:1.15rem; line-height:1.45;
  padding-left:1.2rem; border-left:2px solid var(--ink); margin-top:2rem;
}
.donker .les{color:var(--paper)}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE — manifest/publicatie
   Archivo Black voor structuur en interventie, Fraunces voor citaten
   ═══════════════════════════════════════════════════════════════ */

.kicker, .eyebrow{
  font-family:Archivo, sans-serif; font-weight:800;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  margin:0 0 1.4rem;
}
.kicker{color:var(--grijs)}
.eyebrow{color:var(--ink)}

/* ---------- 1 · HERO ---------- */
.hero{
  position:relative; overflow:hidden; background:var(--paper);
  padding:clamp(3.5rem,9vw,8rem) 0 clamp(3rem,7vw,6rem);
}
/* de norm loopt door "Dan moet het kloppen" — zelfde hoek als de doorsnede in het logo */
.hero .norm{position:relative; display:inline-block}
.hero .norm::before{
  content:""; position:absolute; z-index:-1;
  left:-22vw; right:-22vw; top:54%;
  height:clamp(15px,2.4vw,32px); background:var(--acid);
  transform:translateY(-50%) rotate(-9deg);
}
.hero .wrap{position:relative; z-index:1}
.hero h1{
  position:relative; z-index:1;
  font-family:Archivo, sans-serif; font-weight:900;
  font-size:clamp(2.6rem,1rem + 7.4vw,8rem); line-height:.92;
  letter-spacing:-.045em; max-width:16ch; margin:0 0 clamp(2rem,4vw,3.5rem);
  text-wrap:balance;
}
.hero h1 em{font-family:Fraunces, Georgia, serif; font-weight:300; font-style:italic; letter-spacing:-.03em}
.hero-voet{
  display:grid; grid-template-columns:minmax(0,26rem) minmax(0,auto);
  gap:clamp(1.5rem,4vw,4rem); align-items:end; justify-content:space-between;
}
@media (max-width:52rem){.hero-voet{grid-template-columns:1fr; align-items:start}}
.hero-voet p{font-size:1.05rem; color:var(--grijs); margin:0; max-width:26rem}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:Archivo, sans-serif; font-weight:800;
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  padding:1rem 1.6rem; border-radius:0; text-decoration:none;
  background:var(--acid); color:var(--ink); border:2px solid var(--acid);
}
.knop span{font-weight:700}
.knop:hover{background:var(--acid-diep); border-color:var(--acid-diep)}
.knop.leeg{background:transparent; color:var(--ink); border-color:var(--ink)}
.knop.leeg:hover{background:var(--ink); color:var(--paper)}
.donker .knop.leeg, .manifest .knop.leeg, .procedure .knop.leeg{color:var(--paper); border-color:var(--paper)}
.donker .knop.leeg:hover, .manifest .knop.leeg:hover{background:var(--paper); color:var(--ink)}
.knoppen{display:flex; gap:.7rem; flex-wrap:wrap; margin:0}

/* ---------- navigatie ---------- */
.top{border-bottom:2px solid var(--ink)}
.top nav{gap:1.6rem}
.top nav a{
  font-family:Archivo, sans-serif; font-weight:700;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); border-bottom:none; padding:0;
}
.top nav a:hover{color:var(--ink); box-shadow:inset 0 -.5em 0 var(--acid)}
.top nav a.nav-cta{background:var(--ink); color:var(--paper); padding:.5rem .9rem}
.top nav a.nav-cta:hover{background:var(--acid); color:var(--ink); box-shadow:none}
@media (max-width:64rem){.top nav a:not(.nav-cta):nth-child(3),
                          .top nav a:not(.nav-cta):nth-child(4){display:none}}
@media (max-width:40rem){.top nav{gap:.9rem} .top nav a{font-size:.66rem; letter-spacing:.08em}}

/* ---------- dossier ---------- */
.dossier{border-top:3px solid var(--ink); padding-top:1.4rem}
.d-meta{
  font-family:Archivo, sans-serif; font-weight:600;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grijs); margin:0 0 .5rem;
}
.d-naam{
  font-family:Archivo, sans-serif; font-weight:900;
  font-size:clamp(1.1rem,1rem + .6vw,1.5rem); letter-spacing:-.02em;
  text-transform:uppercase; margin:0 0 1rem; line-height:1;
}
.d-naam span{
  font-weight:600; font-size:.62em; letter-spacing:.1em;
  color:var(--grijs); margin-left:.6rem;
}
.dossier blockquote{
  font-family:Fraunces, Georgia, serif; font-weight:300;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem); line-height:1.22; letter-spacing:-.02em;
  margin:0 0 1.4rem; padding:0; border:none; background:none;
}
.dossier.groot blockquote{font-size:clamp(1.8rem,1.1rem + 3.4vw,3.6rem); line-height:1.1; max-width:19ch}
.d-uitkomst{
  display:flex; align-items:baseline; gap:.5rem; margin:0 0 .5rem;
  font-family:Archivo, sans-serif; font-weight:900;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
}
.dossier.groot .d-uitkomst{font-size:1rem}
.ja .d-uitkomst{color:var(--groen)}
.nee .d-uitkomst{color:var(--rood)}
.open .d-uitkomst{color:var(--grijs)}
.d-uitkomst::after{content:""; flex:1; height:3px; align-self:center; background:currentColor; opacity:.25}
.d-reden{font-size:.96rem; color:var(--grijs); margin:0 0 1rem; max-width:34rem}
.dossier.groot .d-reden{font-size:1.1rem; max-width:40rem}
.d-regel{
  font-family:Archivo, sans-serif; font-weight:600;
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grijs); margin:0 0 1rem;
}
.d-acties{display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.82rem}
.d-acties a{
  font-family:Archivo, sans-serif; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; font-size:.7rem;
  color:var(--ink); text-decoration:none; border-bottom:2px solid var(--ink);
}
.d-acties a:hover{border-bottom-color:var(--acid); box-shadow:inset 0 -.45em 0 var(--acid)}

.bewijs{background:var(--white); padding:clamp(3rem,7vw,6rem) 0}
.dossiers{background:var(--paper); padding:clamp(3.5rem,8vw,7rem) 0}
.d-kop{margin-bottom:clamp(2rem,4vw,3.5rem)}
.d-kop h2{margin:0}
.d-raster{
  display:grid; grid-template-columns:repeat(12,1fr); align-items:start;
  column-gap:clamp(1.5rem,3vw,3rem); row-gap:clamp(2.5rem,5vw,4.5rem);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
/* asymmetrisch: breed, smal, en dan versprongen */
.d-raster > .d-item:nth-child(1){grid-column:1 / span 6}
.d-raster > .d-item:nth-child(2){grid-column:8 / span 5}
.d-raster > .d-item:nth-child(3){grid-column:3 / span 6}
.d-raster > .d-item:nth-child(1) blockquote{font-size:clamp(1.4rem,1.05rem + 1.4vw,2.2rem)}
.d-item .beeld{margin-bottom:1.6rem}
/* alle drie de portretten even zwaar: gelijke verhouding, gelijk gewicht,
   en nooit breder dan de smalste kolom van het asymmetrische raster */
.d-item .beeld{width:100%; max-width:min(100%, 17rem); margin-bottom:1.6rem}
@media (max-width:62rem){.d-item .beeld{max-width:min(100%, 14rem)}}
@media (max-width:44rem){.d-item .beeld{max-width:min(100%, 15rem)}}
@media (max-width:62rem){
  .d-raster{grid-template-columns:repeat(6,1fr)}
  .d-raster > .d-item:nth-child(1){grid-column:1 / span 6}
  .d-raster > .d-item:nth-child(2){grid-column:1 / span 3}
  .d-raster > .d-item:nth-child(3){grid-column:4 / span 3}
}
@media (max-width:44rem){
  .d-raster{grid-template-columns:1fr}
  .d-raster > .d-item{grid-column:1 / -1 !important}
}

/* ---------- 3 · MANIFEST ---------- */
.manifest{background:var(--ink); color:var(--paper); padding:clamp(4rem,10vw,9rem) 0}
.manifest .kicker{color:var(--acid)}
.manifest h2{
  font-family:Archivo, sans-serif; font-weight:900; color:var(--paper);
  font-size:clamp(2.2rem,1rem + 6vw,6.5rem); line-height:.94; letter-spacing:-.04em;
  max-width:none; margin:0 0 clamp(2.5rem,5vw,4.5rem);
}
.manifest h2 em{font-family:Fraunces, Georgia, serif; font-weight:300; font-style:italic}
.manifest-voet{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 3rem; max-width:62rem}
@media (max-width:52rem){.manifest-voet{grid-template-columns:1fr}}
.manifest-voet p{color:#A8A8A2; margin:0; font-size:1.02rem}
.manifest-voet .hard{
  grid-column:1/-1; color:var(--paper);
  font-family:Archivo, sans-serif; font-weight:800;
  font-size:clamp(1rem,.9rem + .5vw,1.3rem); letter-spacing:.02em; margin-top:1rem;
}

/* ---------- 4 · SYSTEEM ---------- */
.systeem{background:var(--white); padding:clamp(3.5rem,8vw,7rem) 0}
.systeem-kop{margin-bottom:clamp(2rem,4vw,3rem)}
.systeem-kop h2{margin:0}
.principes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:2px solid var(--ink); margin-bottom:clamp(2rem,4vw,3rem);
}
@media (max-width:62rem){.principes{grid-template-columns:1fr 1fr}}
@media (max-width:40rem){.principes{grid-template-columns:1fr}}
.p-item{
  display:block; text-decoration:none; color:inherit;
  padding:1.6rem 1.4rem 1.8rem 0; border-bottom:1px solid var(--lijn);
  border-right:1px solid var(--lijn);
}
.p-item:hover{background:var(--acid)}
.p-nr{
  display:block; font-family:Archivo, sans-serif; font-weight:900;
  font-size:1.6rem; letter-spacing:-.04em; margin-bottom:.5rem;
}
.p-titel{
  display:block; font-family:Archivo, sans-serif; font-weight:800;
  font-size:1rem; line-height:1.2; letter-spacing:-.01em; margin-bottom:.45rem;
}
.p-sub{display:block; font-size:.9rem; color:var(--grijs); line-height:1.45; margin-bottom:.7rem}
.p-item:hover .p-sub{color:var(--ink)}
.p-regels{
  display:block; font-family:Archivo, sans-serif; font-weight:700;
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grijs);
}
.p-item:hover .p-regels{color:var(--ink)}

/* ---------- 6 · PROCEDURE ---------- */
.procedure{background:var(--ink); color:var(--paper); padding:clamp(3.5rem,9vw,8rem) 0}
.procedure .kicker{color:var(--acid)}
.procedure h2{
  font-family:Archivo, sans-serif; font-weight:800; color:var(--paper);
  font-size:clamp(1.4rem,1rem + 1.5vw,2.6rem); line-height:1.1; letter-spacing:-.02em;
  max-width:30ch; margin:0 0 clamp(2rem,4vw,3rem);
}
.procedure h2 em{font-size:.92em}
.procedure h2 em{font-family:Fraunces, Georgia, serif; font-weight:300; font-style:italic}
.procedure .stappen{counter-reset:s; list-style:none; padding:0; margin:0 0 3.5rem; max-width:none;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:2px solid var(--paper); border-left:1px solid var(--lijn-donker)}
@media (max-width:62rem){.procedure .stappen{border-left:none}}
@media (max-width:62rem){.procedure .stappen{grid-template-columns:1fr 1fr}}
@media (max-width:40rem){.procedure .stappen{grid-template-columns:1fr}}
.procedure .stappen li{
  counter-increment:s; position:static; padding:2rem 1.6rem 2.4rem 1.6rem; margin:0;
  border-bottom:1px solid var(--lijn-donker); border-right:1px solid var(--lijn-donker);
}
.procedure .stappen li:first-child{padding-left:0}
.procedure .stappen li::before{
  content:counter(s,decimal-leading-zero); position:static; display:block;
  font-family:Archivo, sans-serif; font-weight:900;
  font-size:clamp(2.2rem,1.4rem + 2.2vw,3.4rem); line-height:.9;
  color:var(--paper); margin-bottom:1.2rem; letter-spacing:-.05em;
}
.procedure .stappen li span{font-size:.95rem; color:#A8A8A2; line-height:1.5; display:block}
@media (max-width:62rem){.procedure .stappen li:first-child{padding-left:1.6rem}}
.procedure-voet{
  font-family:Fraunces, Georgia, serif; font-weight:300; color:var(--paper);
  font-size:clamp(1.05rem,.98rem + .5vw,1.3rem); line-height:1.45; max-width:40rem;
  padding-top:1.4rem; border-top:1px solid var(--lijn-donker); margin:0;
}

/* ---------- 7 · OPROEP ---------- */
.oproep{background:var(--paper); padding:clamp(3.5rem,8vw,7rem) 0}
.oproep h2{
  font-family:Archivo, sans-serif; font-weight:900;
  font-size:clamp(1.9rem,1rem + 4vw,4.2rem); line-height:.98; letter-spacing:-.035em;
  max-width:20ch; margin:0 0 clamp(2rem,4vw,3rem);
}
.oproep .doel{
  display:flex; align-items:baseline; gap:1.2rem; flex-wrap:wrap;
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  padding:1.4rem 0; margin:0 0 clamp(2rem,4vw,3rem);
}
.oproep .getal{
  font-family:Archivo, sans-serif; font-weight:900;
  font-size:clamp(3rem,1.5rem + 7vw,8rem); line-height:.82; letter-spacing:-.05em; margin:0;
}
.oproep .doel-bij{
  font-family:Archivo, sans-serif; font-size:.9rem; line-height:1.4; margin:0; color:var(--grijs);
}
.oproep .doel-bij strong{font-weight:800; color:var(--ink); letter-spacing:.06em; text-transform:uppercase; font-size:.8rem}
.oproep-twee{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 3rem; margin-bottom:2.5rem}
@media (max-width:52rem){.oproep-twee{grid-template-columns:1fr}}
.oproep-twee p{margin:0 0 .8rem}
.oproep .formulier-plek{
  border:2px dashed var(--ink); padding:2.5rem 1.5rem; text-align:center;
  font-family:Archivo, sans-serif; font-weight:700; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--grijs); max-width:none;
}

/* voettekst brutaler */
.onder .claim{font-family:Archivo, sans-serif; font-weight:900; font-size:clamp(1.3rem,1rem + 1.4vw,2.2rem);
  line-height:1.05; letter-spacing:-.03em; max-width:24ch}
.onder nav a{font-family:Archivo, sans-serif; font-weight:700; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase}

/* ═══════════════════════════════════════════════════════════════
   REDACTIONEEL BEELD — proef met plaatshouders
   ═══════════════════════════════════════════════════════════════ */

.beeld{margin:0}
/* één portretcomponent: altijd 4:5, nooit opnieuw croppen in CSS */
.beeld img{
  display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  background:#2A2A26;
}
.beeld figcaption{
  font-family:Archivo, sans-serif; font-weight:600; font-size:.6rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--grijs);
  margin-top:.6rem; line-height:1.5;
}
.beeld figcaption a{color:inherit; text-decoration:none; border-bottom:1px solid var(--lijn)}
.beeld figcaption a:hover{color:var(--ink); border-bottom-color:var(--ink)}

/* de spread: beeld links, uitspraak en analyse rechts */
.spread{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(1.5rem,4vw,4rem); align-items:start;
}
@media (max-width:56rem){.spread{grid-template-columns:1fr; gap:2rem}}
/* de lime snijdt langs de rand van het beeld, niet erover */
.spread .beeld{position:relative}
.spread .beeld::after{
  content:""; position:absolute; right:-14px; top:12%; bottom:12%;
  width:clamp(8px,1vw,14px); background:var(--acid);
}
@media (max-width:56rem){
  .spread .beeld::after{right:auto; left:0; top:auto; bottom:-14px;
    width:42%; height:clamp(8px,1.6vw,14px)}
}

/* beeld in het dossierraster */

@media (max-width:62rem){.d-raster > .beeld{grid-column:1 / span 3}}
@media (max-width:44rem){.d-raster > .beeld{grid-column:1 / -1}}
.d-raster > .beeld + .dossier{grid-column:1 / span 7; border-top-width:3px}
@media (max-width:62rem){.d-raster > .beeld + .dossier{grid-column:1 / span 6}}
@media (max-width:44rem){.d-raster > .beeld + .dossier{grid-column:1 / -1}}
.d-raster > *:nth-child(3){grid-column:9 / span 4}
.d-raster > *:nth-child(4){grid-column:4 / span 6}
@media (max-width:62rem){
  .d-raster > *:nth-child(3){grid-column:1 / span 3}
  .d-raster > *:nth-child(4){grid-column:4 / span 3}
}
@media (max-width:44rem){
  .d-raster > *:nth-child(3), .d-raster > *:nth-child(4){grid-column:1 / -1}
}


/* beeld op de casepagina */
.casepagina .beeld{max-width:15rem; margin:0 0 1.8rem}
@media (min-width:64rem){
  .casepagina .wrap.smal{position:relative}
  .casepagina .beeld{
    position:absolute; left:-18rem; top:5.2rem; width:14rem; max-width:none; margin:0;
  }
}
@media (max-width:80rem){
  .casepagina .beeld{position:static; width:auto; max-width:13rem; margin:0 0 1.6rem}
}

/* ---------------------------------------------------------- steunformulier */

.steunform{max-width:34rem; margin:0}
.veld{margin-bottom:1.6rem}
.veld label{
  display:block; font-family:Archivo, sans-serif; font-weight:800;
  font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); margin-bottom:.5rem;
}
.veld label span{font-weight:600; color:var(--grijs); letter-spacing:.09em}
.veld input, .veld textarea{
  display:block; width:100%; font:inherit; font-size:1.05rem; color:var(--ink);
  background:transparent; border:none; border-bottom:2px solid var(--ink);
  border-radius:0; padding:.55rem 0; -webkit-appearance:none;
}
.veld textarea{resize:vertical; line-height:1.5}
.veld input:focus, .veld textarea:focus{outline:none; border-bottom-color:var(--acid-diep); box-shadow:0 2px 0 var(--acid)}
.veld .hint{font-size:.85rem; color:var(--grijs); margin:.5rem 0 0}

.keuzes{border:none; padding:0; margin:0 0 1.8rem}
.keuzes legend{
  font-family:Archivo, sans-serif; font-weight:800;
  font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; padding:0; margin-bottom:.8rem;
}
.keuzes label{
  display:flex; gap:.7rem; align-items:flex-start;
  font-size:.96rem; line-height:1.45; margin-bottom:.6rem; cursor:pointer;
}
.keuzes input[type=checkbox]{
  appearance:none; -webkit-appearance:none; flex:none;
  width:1.15rem; height:1.15rem; margin-top:.15rem;
  border:2px solid var(--ink); background:transparent; border-radius:0; cursor:pointer;
}
.keuzes input[type=checkbox]:checked{background:var(--acid); box-shadow:inset 0 0 0 3px var(--white)}
.keuzes input[type=checkbox]:focus-visible{outline:3px solid var(--acid); outline-offset:2px}

.cf-turnstile{margin:0 0 1.4rem}
.formfout{
  font-family:Archivo, sans-serif; font-weight:700; font-size:.88rem;
  color:var(--rood); border-left:3px solid var(--rood); padding-left:.9rem; margin:0 0 1.2rem;
}
#verstuur{border:none; cursor:pointer; font-family:Archivo, sans-serif}
#verstuur[disabled]{opacity:.55; cursor:progress}
.formvoet{margin:1rem 0 0}

.steundank{border-top:3px solid var(--ink); padding-top:1.4rem; max-width:34rem}
.dank-kop{
  font-family:Archivo, sans-serif; font-weight:900; font-size:1.3rem;
  letter-spacing:-.02em; margin:0 0 .5rem;
}


/* ================================================================
   Ronde 17 september 2026
   ================================================================ */

/* homepage: twee uitspraken naast elkaar, gelijkwaardig */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start}
.duo-item .beeld{position:relative; max-width:22rem; margin-bottom:2rem}
.duo-item .beeld::after{
  content:""; position:absolute; right:-14px; top:12%; bottom:12%;
  width:clamp(8px,1vw,14px); background:var(--acid);
}
.duo .dossier.groot blockquote{font-size:clamp(1.6rem,1rem + 2.2vw,2.8rem); max-width:none}
@media (max-width:52rem){.duo{grid-template-columns:1fr}}

/* casesraster: twee gelijke kolommen */
.d-raster.twee-gelijk > .d-item:nth-child(1){grid-column:1 / span 6}
.d-raster.twee-gelijk > .d-item:nth-child(2){grid-column:7 / span 6}
.d-raster.twee-gelijk > .d-item blockquote{font-size:clamp(1.3rem,1rem + 1vw,1.9rem)}
@media (max-width:62rem){
  .d-raster.twee-gelijk > .d-item:nth-child(1){grid-column:1 / span 3}
  .d-raster.twee-gelijk > .d-item:nth-child(2){grid-column:4 / span 3}
}

/* oordeel als duidelijk label */
.d-uitkomst, .uitkomst{
  display:inline-flex !important; align-items:center; gap:.5rem;
  padding:.45rem .8rem .4rem; color:#fff !important; margin:0 0 1rem;
}
.d-uitkomst::after, .uitkomst::after{display:none !important}
.ja .d-uitkomst, .ja .uitkomst{background:var(--groen)}
.nee .d-uitkomst, .nee .uitkomst{background:var(--rood)}
.open .d-uitkomst, .open .uitkomst{background:var(--grijs)}

/* voorbeeldenpagina: oordeel boven, minder tekst */
.case .uitkomst{margin:0 0 1.1rem}
.case .meetlat{display:none}
.case .reden{margin-top:1rem}

/* afvallers inklapbaar */
.afvallers details summary{cursor:pointer; list-style:none; position:relative; padding-right:2rem}
.afvallers details summary::-webkit-details-marker{display:none}
.afvallers details summary::after{content:"+"; position:absolute; right:0; top:0; font-weight:700; font-size:1.2rem; color:var(--acid)}
.afvallers details[open] summary::after{content:"–"}
.afvallers details summary .wie{margin-bottom:0}
.afvallers details[open] summary .wie{margin-bottom:.4rem}

/* doel duidelijk als doel */
.doel{flex-wrap:wrap}
.doel-label{flex-basis:100%; margin:0 0 -.4rem; font-family:Archivo, sans-serif; font-weight:800;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--grijs)}

/* grote knop */
.knop.groot{font-size:1rem; padding:1.05rem 1.9rem}
.steunform .knop.groot{width:100%; justify-content:center; margin-top:.6rem}

/* beeldmerk */
.voet-merk{display:block; width:clamp(4rem,9vw,6.5rem); height:auto; color:var(--acid); margin:0 0 2.2rem}
.dank-merk{display:block; width:3.2rem; height:auto; color:var(--ink); margin:0 0 1.2rem}

/* beeldverantwoording */
.beeldlijst{list-style:none; margin:0 0 2.5rem; padding:0}
.beeldlijst li{border-top:1px solid var(--lijn); padding:1.2rem 0}
.beeldlijst p{margin:0 0 .25rem}
.bv-wie{font-weight:800}
.bv-bewerkt{color:var(--grijs); font-size:.9rem}

/* header: knop verticaal gecentreerd met de menu-items */
.top nav{align-items:center}
.top nav a{line-height:1}
.top nav a.nav-cta{display:inline-flex; align-items:center; padding:.55rem .9rem .5rem}

/* oordeel: groot en onmiskenbaar (ronde 2) */
.d-uitkomst, .uitkomst{
  display:flex !important; width:100%; box-sizing:border-box; align-items:center; gap:.7rem;
  padding:.85rem 1.1rem .8rem !important; margin:0 0 1.2rem !important;
  font-family:Archivo, sans-serif; font-weight:900 !important;
  font-size:1rem !important; letter-spacing:.06em; text-transform:uppercase; line-height:1.1;
}
.d-uitkomst .mark, .uitkomst .mark{
  display:inline-grid; place-items:center; flex:none;
  width:1.8em; height:1.8em; border-radius:50%;
  background:#fff; font-size:1em; line-height:1;
}
.ja .d-uitkomst .mark, .ja .uitkomst .mark{color:var(--groen)}
.nee .d-uitkomst .mark, .nee .uitkomst .mark{color:var(--rood)}
.open .d-uitkomst .mark, .open .uitkomst .mark{color:var(--grijs)}
.dossier.groot .d-uitkomst{font-size:1.2rem !important; padding:1rem 1.2rem .95rem !important}

/* kaartrand in de kleur van het oordeel */
.dossier.ja, .case.ja{border-top-color:var(--groen) !important}
.dossier.nee, .case.nee{border-top-color:var(--rood) !important}
.case.ja, .case.nee, .case.open, .dossier{border-top-width:5px !important}

/* header: logo en menu uitgelijnd op dezelfde breedte als de inhoud (.wrap, 72rem) */
.top{
  padding-left:max(var(--marge), calc((100% - 72rem) / 2 + var(--marge)));
  padding-right:max(var(--marge), calc((100% - 72rem) / 2 + var(--marge)));
}

/* ronde 3: logo in de hero, header met teken en meeschuivende naam */
.top{align-items:center}
.hero-merk{display:flex; align-items:center; gap:clamp(.8rem,1.4vw,1.2rem); margin:0 0 clamp(1.8rem,3vw,2.6rem); color:var(--ink)}
.hero-merk-teken{display:block; width:clamp(3.4rem,5.5vw,4.8rem); height:auto; flex:none}
.hero-merk-tekst{font-family:Archivo, sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(1rem,.75rem + .9vw,1.45rem); line-height:.95; letter-spacing:.03em}
.home .top .merk-breed{display:none}
.home .top .merk-smal{display:block; width:28px}
.merk-tekst{
  font-family:Archivo, sans-serif; font-weight:700; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap; margin-left:.75rem;
  opacity:0; transform:translateX(-.5rem); transition:opacity .25s ease, transform .25s ease;
}
.home.voorbij .merk-tekst{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.merk-tekst{transition:none}}
@media (max-width:30rem){.merk-tekst{display:none}}
/* alle pagina's: zelfde opbouw teken + naam; alleen op de homepage schuift de naam pas in na de hero */
.top .merk-breed{display:none}
.top .merk-smal{display:block; width:28px}
body:not(.home) .merk-tekst{opacity:1; transform:none}

/* ================================================================
   Beweging (ronde 4)
   ================================================================ */
@media (prefers-reduced-motion:no-preference){
  /* inkomen tijdens het scrollen; alleen actief als beweging.js draait */
  .beweging .r{
    opacity:0; transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
    will-change:opacity, transform;
  }
  .beweging .r.zichtbaar{opacity:1; transform:none}

  /* hero bij het laden: logo, kicker, kop en voet na elkaar, dan trekt de lime lijn erdoor */
  .hero .hero-merk,
  .hero .kicker,
  .hero h1,
  .hero .hero-voet{animation:hero-in .9s cubic-bezier(.2,.7,.2,1) both}
  .hero .kicker{animation-delay:.12s}
  .hero h1{animation-delay:.22s}
  .hero .hero-voet{animation-delay:.55s}
  .hero .norm::before{animation:lijn-in 1s cubic-bezier(.7,0,.2,1) .75s both}

  /* foto's in de voorbeelden: de lime balk schuift achter het portret vandaan */
  .beweging .duo-item.r .beeld::after{transform:translateX(-14px); opacity:0; transition:transform .7s ease .35s, opacity .7s ease .35s}
  .beweging .duo-item.r.zichtbaar .beeld::after{transform:none; opacity:1}

  /* oordeelbalk komt net na de kaart */
  .beweging .r .d-uitkomst{opacity:0; transform:translateX(-10px); transition:opacity .5s ease .45s, transform .5s ease .45s}
  .beweging .r.zichtbaar .d-uitkomst{opacity:1; transform:none}
}
@keyframes hero-in{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
@keyframes lijn-in{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}

/* ================================================================
   Hero-drieslag (ronde 5): premisse, maatstaf, norm
   ================================================================ */
.hero h1.h-drieslag{
  font-size:clamp(2.35rem,.9rem + 5.2vw,6.2rem);
  line-height:.94; max-width:none; text-wrap:balance;
}
.h-drieslag > span, .h-drieslag > em{display:block}
/* de premisse is de aanloop: zelfde zware stem, een maat kleiner, zodat de norm het zwaartepunt blijft */
.h-drieslag .h-premisse{font-size:.56em; line-height:1; letter-spacing:-.03em; margin-bottom:.28em}
.h-drieslag .h-maatstaf{max-width:14ch}
.h-drieslag .norm{display:inline-block; margin-top:.06em; max-width:15ch}
/* de norm-lijn blijft aan de redactionele regel hangen, ook als die over twee regels breekt */
.hero .h-drieslag .norm::before{top:58%}
@media (max-width:40rem){
  .hero h1.h-drieslag{font-size:clamp(2.1rem,.6rem + 8.4vw,3rem)}
  .h-drieslag .h-premisse{font-size:.62em}
  .hero .h-drieslag .norm::before{left:-8vw; right:-8vw; top:52%}
}
/* verfijning: norm op desktop op één regel, geheel iets compacter */
.hero h1.h-drieslag{font-size:clamp(2.35rem,.9rem + 4.6vw,5.4rem)}
.h-drieslag .h-maatstaf{max-width:none}
.h-drieslag .norm{max-width:none}
.hero .h-drieslag .norm::before{top:56%}
@media (max-width:40rem){
  .hero h1.h-drieslag{font-size:clamp(2.1rem,.6rem + 8.4vw,3rem)}
  .h-drieslag .h-maatstaf{max-width:12ch}
  .h-drieslag .norm{max-width:13ch}
  .hero .h-drieslag .norm::before{left:-8vw; right:-8vw; top:52%}
}

/* ================================================================
   Codepagina (ronde 7): ritme en hiërarchie
   ================================================================ */
.codepagina .kop-blok{padding-bottom:clamp(2.5rem,5vw,4rem)}
.codepagina .kop-blok h1{
  font-family:Archivo, sans-serif; font-weight:900; letter-spacing:-.045em; line-height:.95;
  font-size:clamp(2.3rem,1rem + 4.4vw,5rem); max-width:17ch; margin-bottom:1.4rem;
}
.codepagina .kop-blok .lead{color:var(--ink); max-width:38rem}

/* inhoudsopgave: zwart vlak met zes genummerde principes */
.codepagina .inhoudsopgave{background:var(--ink); color:var(--paper); padding:clamp(3rem,6vw,5rem) 0}
.codepagina .inhoudsopgave .onder-kop{color:#A8A8A2; margin:0 0 2rem}
.codepagina .inhoud{counter-reset:pr; gap:0; border-top:1px solid var(--lijn-donker)}
.codepagina .inhoud-item{
  counter-increment:pr; padding:1.4rem 1.4rem 1.6rem 0; border-bottom:1px solid var(--lijn-donker);
}
.codepagina .inhoud-item::before{
  content:counter(pr, decimal-leading-zero); display:block;
  font-family:Archivo, sans-serif; font-weight:900; font-size:clamp(2rem,1.4rem + 1.6vw,2.8rem);
  line-height:1; letter-spacing:-.04em; color:var(--acid); margin-bottom:.6rem;
}
.codepagina .inhoud-item h3{font-family:Archivo, sans-serif; font-weight:800; font-size:1.05rem; line-height:1.25; color:var(--paper); margin:0 0 .8rem; max-width:18rem}
.codepagina .inhoud-item .nrs a{
  background:transparent; color:var(--paper); border:1px solid var(--lijn-donker);
  min-width:2.2rem; height:2.2rem; display:inline-grid; place-items:center; font-weight:700;
}
.codepagina .inhoud-item .nrs a:hover{background:var(--acid); color:var(--ink); border-color:var(--acid)}

/* principe als hoofdstukopening */
.principe-kop{
  position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:clamp(1rem,2.5vw,2rem); align-items:end;
  padding:clamp(3.5rem,7vw,6rem) 0 clamp(1.4rem,2.5vw,2rem); border-bottom:3px solid var(--ink); scroll-margin-top:5rem;
}
.principe-kop:first-child{padding-top:0}
.principe-kop .p-nr{
  grid-row:1 / span 2; font-family:Archivo, sans-serif; font-weight:900; line-height:.8;
  font-size:clamp(4rem,2rem + 7vw,8.5rem); letter-spacing:-.06em; color:var(--ink);
  position:relative;
}
.principe-kop .p-nr::after{
  content:""; position:absolute; left:-6%; right:-6%; top:52%; height:clamp(8px,1vw,14px);
  background:var(--acid); transform:translateY(-50%) rotate(-9deg); z-index:-1;
}
.principe-kop .p-label{font-family:Archivo, sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grijs); margin:0 0 .3rem}
.principe-kop .p-naam{font-family:Fraunces, Georgia, serif; font-style:italic; font-weight:300; font-size:clamp(1.6rem,1rem + 2vw,2.6rem); line-height:1.05; margin:0; max-width:none}

/* regels */
.codepagina .regel{position:relative; padding-top:clamp(2rem,4vw,3rem); padding-bottom:clamp(2rem,4vw,3rem); border-top:1px solid var(--lijn)}
.codepagina .principe-kop + .regel{border-top:none}
.codepagina .regel-kop{align-self:start; position:sticky; top:5.5rem}
.codepagina .regel .nummer{font-family:Archivo, sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grijs); margin:0 0 .5rem}
.codepagina .regel h2{font-family:Archivo, sans-serif; font-weight:800; font-size:clamp(1.3rem,1.05rem + .8vw,1.75rem); line-height:1.12; letter-spacing:-.02em; margin:0 0 .6rem}
.codepagina .regel .hoort-bij{display:none}
/* de eerste alinea is de norm zelf */
.codepagina .regel-tekst > p:first-child{
  font-family:Fraunces, Georgia, serif; font-weight:400; font-size:clamp(1.2rem,1rem + .7vw,1.55rem);
  line-height:1.3; color:var(--ink); margin-bottom:1.2rem; letter-spacing:-.01em;
}
.codepagina .regel-tekst p{color:#3A3A36; line-height:1.6}
.codepagina .regel-tekst .kader{
  background:var(--white); border-left:5px solid var(--acid); padding:1.3rem 1.4rem; margin:1.6rem 0 0;
}
.codepagina .regel-tekst .kader .tussenkop{
  margin:0 0 .8rem; padding:0; border:none;
  font-family:Archivo, sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
}
.codepagina .regel:target{background:transparent; box-shadow:none}
.codepagina .regel:target h2{box-shadow:inset 0 -.45em 0 var(--acid)}
@media (max-width:52rem){
  .codepagina .regel-kop{position:static}
  .principe-kop .p-nr{font-size:clamp(3.4rem,2rem + 8vw,5rem)}
}
.codepagina .kop-blok h1{font-size:clamp(2.2rem,1rem + 3.6vw,4.3rem); max-width:21ch}

/* ================================================================
   Hero (ronde 8): geen doorhaling meer, maar een markering onder de norm
   ================================================================ */
.hero .h-drieslag .norm::before{display:none}
.h-drieslag .norm{display:block; max-width:none}
.h-drieslag .marker{
  background-image:linear-gradient(var(--acid), var(--acid));
  background-repeat:no-repeat;
  background-position:0 88%;
  background-size:100% .32em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding:0 .06em;
}
@media (prefers-reduced-motion:no-preference){
  .h-drieslag .marker{animation:marker-in 1s cubic-bezier(.7,0,.2,1) .75s both}
}
@keyframes marker-in{from{background-size:0% .32em} to{background-size:100% .32em}}