/* De tekstpagina's als artikel: een wit blad op het papier, een leesletter met schreef,
   beeld dat breder mag dan de tekst, citaten, en kitewoorden met een kaartje erachter.

   Waarom een eigen bestand en niet in stijl.css: dit hoort alleen bij /uitleg/. De rekenpagina
   haalt het zo nooit op, en een wijziging hier raakt het cachemerk van stijl.css niet.
   Alles hangt onder main.artikel, dus wat stijl.css voor .uitleg regelt blijft de basis. */

/* De leesletter, van onze eigen server (zie letters/letters.css voor het waarom). */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;
  src:url(../letters/newsreader-latin.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;
  src:url(../letters/newsreader-cursief-latin.woff2) format("woff2")}

:root{--lees:"Newsreader",Georgia,"Times New Roman",serif;--maat:41rem}

/* Breder dan de 820 px van een gewone tekstpagina: het blad heeft lucht nodig om beeld
   buiten de tekstkolom te laten steken. */
@media(min-width:1100px){ body:has(main.artikel) .wrap{max-width:980px} }

/* ── de balk bovenaan: terug naar de wind, en de andere stukken ───────────
   Blijft staan terwijl je leest. In de app op je telefoon is er geen terugknop van de browser, en
   wie halverwege een stuk binnenkomt (de link "indicatie, geen advies") moest anders helemaal
   omhoog scrollen om weg te komen. Op een breed scherm staan de stukken naast elkaar; op een
   telefoon zitten ze achter "Meer uitleg", want een rij die zijwaarts schuift verstopt de helft. */
.artnav{position:sticky;top:0;z-index:30;background:var(--papier);border-bottom:1px solid var(--lijn);padding-top:env(safe-area-inset-top)}
.artnav-in{display:flex;align-items:center;gap:6px 22px;min-height:56px;flex-wrap:wrap}
.terug{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:var(--inkt);margin-right:auto;
  padding-right:8px}
.terug .pijl{font-size:20px;line-height:1;color:var(--zacht);transition:transform var(--t),color var(--t);margin-right:2px}
.terug:hover .pijl{transform:translateX(-3px);color:var(--inkt)}
.terug .merknaam{font-family:var(--kop);font-weight:800;font-size:20px;letter-spacing:-.03em}
.rubrieken{display:flex;gap:0 14px;align-items:center}
/* Zelfde maat, gewicht en kleur als .hoofdnav op de windpagina, zodat het een site blijft. */
.rubrieken a{color:var(--zacht);text-decoration:none;font-size:13.5px;font-weight:600;
  min-height:44px;display:inline-flex;align-items:center;border-bottom:1.5px solid transparent;border-top:1.5px solid transparent;
  transition:color var(--t),border-color var(--t)}
.rubrieken a:hover{color:var(--inkt)}
.rubrieken a[aria-current="page"]{color:var(--inkt);border-bottom-color:var(--inkt)}
/* Met het menu open is de balk dicht: tekst die eronderdoor schemert maakt de links onleesbaar. */
.meerknop{display:none}
@media(max-width:860px){
  .meerknop{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1px solid var(--lijn);
    border-radius:var(--r-pil);background:var(--kaart);color:var(--zacht);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
  .meerknop .wig{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:translateY(-2px) rotate(45deg);transition:transform var(--t)}
  .meerknop[aria-expanded="true"]{border-color:var(--inkt);color:var(--inkt)}
  .meerknop[aria-expanded="true"] .wig{transform:translateY(2px) rotate(-135deg)}
  /* Een laag OVER de pagina, los van de balk: de balk blijft 56 px en de tekst eronder blijft staan.
     Eerst stond het menu in de balk zelf; die werd dan 300 px hoog en duwde de hele pagina omlaag. */
  .artnav-in{position:relative}
  .rubrieken{display:none;position:absolute;left:12px;right:12px;top:calc(100% + 6px);flex-direction:column;align-items:stretch;gap:0;
    padding:4px 16px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);
    box-shadow:0 22px 50px -18px rgba(23,19,15,.4)}
  .rubrieken.open{display:flex}
  .rubrieken a{font-size:15px;min-height:50px;border-top:1px solid var(--lijn-2);border-bottom:0;justify-content:space-between;color:var(--inkt)}
  .rubrieken a:first-child{border-top:0}
  .rubrieken a[aria-current="page"]::after{content:"hier ben je";font-size:11px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--flauw)}
}
/* Zonder script toont een <noscript>-regel in de pagina de stukken gewoon; de knop werkt dan niet. */

/* ── het blad ──────────────────────────────────────────────────────────── */
main.artikel{padding-bottom:24px}
.blad{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);
  box-shadow:var(--schaduw);margin:22px 0 0;padding:clamp(22px,6vw,72px) clamp(18px,6vw,84px) clamp(28px,5vw,64px)}
/* Alles op het blad staat in een middenkolom; beeld en tabellen mogen breder. */
/* Twee klassen diep, want stijl.css zet op .uitleg p en .uitleg h1 een marge van 0 en wint anders. */
.artikel .blad>*{max-width:var(--maat);margin-left:auto;margin-right:auto}
.artikel .blad>.breed{max-width:none}

.artikel .rubriek{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--perfect-t);margin-bottom:14px}
.artikel h1{font-size:clamp(32px,6.2vw,54px);line-height:1.02;letter-spacing:-.035em;margin-top:0;margin-bottom:18px;text-wrap:balance}
.artikel .lead{font-family:var(--lees);font-size:clamp(19px,2.6vw,23px);line-height:1.45;color:var(--inkt);
  max-width:var(--maat);margin-bottom:20px;text-wrap:pretty}
.artikel .blad>p.kopregel{font-family:var(--tekst);display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12.5px;line-height:1.5;color:var(--flauw);
  padding:12px 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);margin-bottom:30px}
.artikel .blad>p.kopregel b{font-size:1em;color:var(--zacht)}

/* De lopende tekst: schreef, ruim gezet. De kolom is 41rem, ongeveer 68 tekens per regel. */
.artikel .blad>p,.artikel .blad>ul li,.artikel .blad>ol li{font-family:var(--lees);font-size:clamp(17.5px,2.1vw,19.5px);
  line-height:1.62;color:var(--inkt)}
.artikel .blad>p{margin-bottom:1.05em;max-width:var(--maat);text-wrap:pretty}
.artikel .blad>p b,.artikel .blad li b{font-family:var(--tekst);font-weight:700;font-size:.92em}
/* De eerste letter van het stuk, drie regels hoog. */
.artikel .blad>p.opening::first-letter{font-family:var(--kop);font-weight:800;float:left;font-size:3.5em;
  line-height:.82;padding:.06em .1em 0 0;color:var(--inkt)}

.artikel h2{font-family:var(--kop);font-weight:800;font-size:clamp(23px,3.4vw,31px);line-height:1.1;
  letter-spacing:-.025em;text-transform:none;color:var(--inkt);margin-top:2.1em;margin-bottom:.55em;
  scroll-margin-top:84px;text-wrap:balance}
.artikel h2 .nr{display:block;font-family:var(--tekst);font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--flauw);margin-bottom:8px}

.artikel .blad>ul,.artikel .blad>ol{padding-left:1.15em;margin-top:0;margin-bottom:1.2em}
.artikel .blad>ul li,.artikel .blad>ol li{margin-bottom:.5em}
.artikel .blad>ul li::marker{color:var(--weinig)}
.artikel .blad>ol li::marker{font-family:var(--kop);font-weight:800;color:var(--flauw)}
.artikel .blad a:not(.cta){color:var(--inkt);text-decoration-color:var(--weinig);transition:text-decoration-color var(--t)}
.artikel .blad a:not(.cta):hover{text-decoration-color:var(--inkt)}

/* ── het korte antwoord en de som ──────────────────────────────────────── */
.artikel .antwoord{box-shadow:none;border:0;border-left:3px solid var(--perfect);border-radius:0;
  background:var(--perfect-v);padding:20px 24px;margin-top:0;margin-bottom:30px}
.artikel .antwoord p{font-family:var(--tekst);font-size:16.5px;line-height:1.55;max-width:none}
.artikel .antwoord.slot{background:var(--papier);border-left-color:var(--inkt);margin-top:2.4em}
.artikel .formule{font-size:clamp(17px,2.4vw,21px);text-align:center;padding:20px 18px;background:var(--papier);
  border:1px solid var(--lijn);margin-top:1.3em;margin-bottom:1.3em;max-width:var(--maat)}
.artikel .klein{font-family:var(--tekst);font-size:13.5px;line-height:1.5;color:var(--zacht)}

/* ── citaat ────────────────────────────────────────────────────────────── */
.citaat{margin-top:2.2em;margin-bottom:2.2em;padding:0;border:0;max-width:calc(var(--maat) + 5rem)}
.citaat p{font-family:var(--lees);font-style:italic;font-size:clamp(23px,3.6vw,33px);line-height:1.22;
  letter-spacing:-.01em;color:var(--inkt);margin:0 0 14px;max-width:none;text-wrap:balance}
.citaat p::before{content:"\201C";font-family:var(--kop);font-style:normal;font-weight:800;display:block;
  font-size:1.9em;line-height:.6;color:var(--perfect);margin-bottom:.12em}
.citaat footer{font-family:var(--tekst);font-size:13px;line-height:1.45;color:var(--zacht)}
.citaat footer b{color:var(--inkt)}

/* ── uit het onderzoek ─────────────────────────────────────────────────── */
.onderzoek{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:start;
  border-top:1px solid var(--inkt);border-bottom:1px solid var(--lijn);padding:18px 0;margin-top:2em;margin-bottom:2em}
.onderzoek .getal{font-family:var(--kop);font-weight:800;font-size:clamp(40px,7vw,60px);line-height:.9;
  letter-spacing:-.04em;color:var(--inkt);grid-row:span 2}
.onderzoek .getal small{display:block;font-family:var(--tekst);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--flauw);margin-top:8px;max-width:14ch;line-height:1.3}
.onderzoek p{font-family:var(--tekst);font-size:15px;line-height:1.55;color:var(--inkt);margin:0;max-width:none}
.onderzoek .herkomst{font-size:12.5px;color:var(--zacht)}
@media(max-width:560px){.onderzoek{grid-template-columns:1fr}.onderzoek .getal{grid-row:auto}}

/* ── beeld ─────────────────────────────────────────────────────────────── */
.beeld{margin-top:2.4em;margin-bottom:2.4em;padding:0}
.beeld img{display:block;width:100%;height:auto;border-radius:6px;background:var(--lijn-2)}
.artikel .blad>.beeld.breed{margin-left:clamp(-84px,-6vw,-18px);margin-right:clamp(-84px,-6vw,-18px)}
.beeld.breed img{border-radius:0}
.beeld.kop{margin-top:0;margin-bottom:34px}
.beeld figcaption{font-family:var(--tekst);font-size:12.5px;line-height:1.5;color:var(--zacht);
  margin:10px auto 0;max-width:var(--maat)}
.beeld.breed figcaption{padding:0 clamp(18px,6vw,84px);max-width:none}
.beeld figcaption .maker{color:var(--flauw)}
.beeld figcaption a{color:inherit}

/* ── tabellen op het blad ──────────────────────────────────────────────── */
.artikel .blad>.scroll{max-width:calc(var(--maat) + 8rem)}
.artikel .maattabel{font-size:14.5px}
.artikel .maattabel th,.artikel .maattabel td{border-width:0 0 1px;padding:10px 10px}
.artikel .maattabel thead th{background:none;border-bottom:1.5px solid var(--inkt);color:var(--inkt);
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.artikel .maattabel tbody th{background:var(--kaart)}
.artikel .woordtabel td{font-family:var(--lees);font-size:16.5px;line-height:1.4}
.artikel .woordtabel tbody th{white-space:nowrap;font-size:14px}
@media(hover:hover){.artikel .maattabel tbody tr{transition:background var(--t)}
  .artikel .maattabel tbody tr:hover,.artikel .maattabel tbody tr:hover th{background:var(--papier)}}

/* ── een kitewoord ─────────────────────────────────────────────────────── */
.woord{position:relative;cursor:help;border-radius:3px;
  background-image:linear-gradient(var(--perfect),var(--perfect)),linear-gradient(var(--weinig),var(--weinig));
  background-repeat:no-repeat;background-position:0 100%,0 100%;background-size:0 1.5px,100% 1px;
  transition:background-size 260ms cubic-bezier(.2,.8,.3,1),color var(--t);padding-bottom:1px}
.woord:hover,.woord:focus-visible,.woord[aria-expanded="true"]{background-size:100% 1.5px,100% 1px;color:var(--perfect-t)}
.woord:focus-visible{outline:2px solid var(--perfect);outline-offset:2px}

.woordkaart{position:absolute;z-index:40;width:min(340px,calc(100vw - 32px));background:var(--inkt);color:var(--papier);
  border-radius:12px;padding:16px 18px 15px;box-shadow:0 18px 40px -14px rgba(23,19,15,.45);
  font-family:var(--tekst);opacity:0;transform:translateY(6px) scale(.97);transform-origin:var(--oorsprong,50%) 0;
  pointer-events:none;transition:opacity 150ms ease,transform 220ms cubic-bezier(.2,.9,.3,1.2)}
.woordkaart.boven{transform-origin:var(--oorsprong,50%) 100%;transform:translateY(-6px) scale(.97)}
.woordkaart.open{opacity:1;transform:none;pointer-events:auto}
.woordkaart .wk-woord{font-family:var(--kop);font-weight:800;font-size:18px;letter-spacing:-.02em;margin:0 0 2px}
.woordkaart .wk-ook{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#B9AFA3;margin:0 0 8px}
.woordkaart .wk-tekst{font-size:14.5px;line-height:1.5;margin:0;color:#F1EBE3}
.woordkaart .wk-meer{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:700;color:#8FD9B8;
  text-decoration:underline;text-underline-offset:3px}
/* Het pijltje wijst naar het woord. */
.woordkaart::before{content:"";position:absolute;left:var(--oorsprong,50%);top:-5px;width:10px;height:10px;
  background:var(--inkt);transform:translateX(-50%) rotate(45deg)}
.woordkaart.boven::before{top:auto;bottom:-5px}
@media(max-width:700px){
  /* Op een telefoon een blad van onderen: een kaartje naast je duim dekt het woord af. */
  .woordkaart{position:fixed;left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto;
    transform:translateY(16px);padding:18px 20px calc(18px + env(safe-area-inset-bottom))}
  .woordkaart.boven{transform:translateY(16px)}
  .woordkaart::before{display:none}
}

/* ── inhoud in de marge, en hoe ver je bent ────────────────────────────── */
.voortgang{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--perfect);transform-origin:0 0;
  transform:scaleX(0);z-index:50;pointer-events:none}
.inhoud{display:none}
@media(min-width:1400px){
  .inhoud{display:block;position:fixed;top:140px;left:max(20px,calc(50vw - 490px - 210px));width:180px;
    font-size:12.5px;line-height:1.35}
  .inhoud b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--flauw);margin-bottom:10px}
  .inhoud a{display:block;color:var(--flauw);text-decoration:none;padding:6px 0 6px 12px;border-left:1.5px solid var(--lijn);
    transition:color var(--t),border-color var(--t)}
  .inhoud a:hover{color:var(--inkt)}
  .inhoud a.hier{color:var(--inkt);border-left-color:var(--inkt);font-weight:700}
}

/* ── woordenlijst en bronnen onderaan ──────────────────────────────────── */
.naslag{border-top:1px solid var(--inkt);margin-top:3em;padding-top:6px}
.naslag h2{font-size:12px;font-family:var(--tekst);letter-spacing:.16em;text-transform:uppercase;color:var(--zacht);
  margin-top:22px;margin-bottom:12px}
.naslag dl{margin:0;display:grid;gap:0}
.naslag dt{font-family:var(--kop);font-weight:800;font-size:16px;letter-spacing:-.01em;padding-top:12px;
  border-top:1px solid var(--lijn-2);scroll-margin-top:84px}
.naslag dt:first-child{border-top:0}
.naslag dd{margin:2px 0 12px;font-family:var(--tekst);font-size:14.5px;line-height:1.55;color:var(--zacht)}
.naslag dt:target{color:var(--perfect-t)}
.naslag ol{margin:0;padding-left:1.4em}
.artikel .blad>.naslag li{font-family:var(--tekst);font-size:13.5px;line-height:1.55;color:var(--zacht);margin-bottom:8px}
.naslag li a{overflow-wrap:anywhere}
/* Een voetnootcijfer in de tekst. */
.artikel sup.noot{font-family:var(--tekst);font-size:.62em;font-weight:700;line-height:0;margin-left:1px}
.artikel sup.noot a{text-decoration:none;color:var(--perfect-t);padding:6px 3px}

.artikel .cta-rij{margin-top:1.4em;margin-bottom:1.6em}

@media(prefers-reduced-motion:reduce){
  .woord,.woordkaart,.rubrieken a,.inhoud a{transition:none}
  .woordkaart,.woordkaart.boven{transform:none}
}
@media print{.artnav,.rubrieken,.inhoud,.voortgang,.woordkaart,.top .cta{display:none}.blad{border:0;box-shadow:none;padding:0}}

/* ── onderdelen waar je aan kunt draaien (onderdelen.js) ───────────────────
   Zonder script blijven ze verborgen: de tekst en de tabel eromheen zeggen hetzelfde. */
.rekenaar,.windhoek,.bereik{display:none}
.rekenaar.leeft,.windhoek.leeft,.bereik.leeft{display:grid}
.artikel .blad>.rekenaar,.artikel .blad>.windhoek,.artikel .blad>.bereik{background:var(--papier);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  margin:2.4em clamp(-84px,-6vw,-18px);padding:clamp(22px,4vw,40px) clamp(18px,6vw,84px);gap:22px 48px;
  font-family:var(--tekst);align-items:center}
@media(min-width:760px){.rekenaar,.windhoek{grid-template-columns:1fr 1fr}}
.rk-kop{grid-column:1/-1;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--zacht);margin:0}
.rk-veld{display:grid;gap:6px;margin:0 0 18px;border:0;padding:0}
.rk-veld label,.rk-veld legend{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;color:var(--zacht);padding:0;width:100%}
.rk-veld output{font-family:var(--kop);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--inkt)}
.rekenaar input[type=range],.windhoek input[type=range],.bereik input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:none;margin:0;cursor:pointer}
.rekenaar input[type=range]::-webkit-slider-runnable-track,.windhoek input[type=range]::-webkit-slider-runnable-track,.bereik input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--lijn);border-radius:2px}
.rekenaar input[type=range]::-moz-range-track,.windhoek input[type=range]::-moz-range-track,.bereik input[type=range]::-moz-range-track{height:3px;background:var(--lijn);border-radius:2px}
.rekenaar input[type=range]::-webkit-slider-thumb,.windhoek input[type=range]::-webkit-slider-thumb,.bereik input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--inkt);border:3px solid var(--kaart);box-shadow:0 1px 4px rgba(23,19,15,.3);margin-top:-11px;transition:transform var(--t)}
.rekenaar input[type=range]::-moz-range-thumb,.windhoek input[type=range]::-moz-range-thumb,.bereik input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--inkt);border:3px solid var(--kaart);box-shadow:0 1px 4px rgba(23,19,15,.3)}
.rekenaar input[type=range]:active::-webkit-slider-thumb,.windhoek input[type=range]:active::-webkit-slider-thumb,.bereik input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.rekenaar input[type=range]:focus-visible,.windhoek input[type=range]:focus-visible,.bereik input[type=range]:focus-visible{outline:0}
.rekenaar input[type=range]:focus-visible::-webkit-slider-thumb,.windhoek input[type=range]:focus-visible::-webkit-slider-thumb,.bereik input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--perfect)}
.rekenaar input[type=range]:focus-visible::-moz-range-thumb,.windhoek input[type=range]:focus-visible::-moz-range-thumb,.bereik input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--perfect)}
.rk-keuze{display:inline-flex;border:1px solid var(--lijn);border-radius:var(--r-pil);padding:3px;background:var(--kaart);margin-top:4px}
.rk-keuze label{display:block;width:auto;position:relative;cursor:pointer}
.rk-keuze input{position:absolute;opacity:0;inset:0}
.rk-keuze span{display:block;padding:9px 16px;border-radius:var(--r-pil);font-size:13.5px;font-weight:700;color:var(--zacht);transition:background var(--t),color var(--t)}
.rk-keuze input:checked+span{background:var(--inkt);color:var(--papier)}
.rk-keuze input:focus-visible+span{outline:2px solid var(--perfect);outline-offset:2px}
.rk-uit{min-width:0}
.rk-groot{font-family:var(--kop);font-weight:800;font-size:clamp(64px,11vw,104px);line-height:.85;letter-spacing:-.05em;color:var(--inkt);
  font-variant-numeric:tabular-nums;margin:0}
.rk-groot small{font-family:var(--tekst);font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--zacht);margin-left:8px}
.rk-zin{font-size:15px;line-height:1.55;color:var(--zacht);margin:14px 0 20px;min-height:4.7em}
.rk-zin b{color:var(--inkt)}
.rk-balk{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--lijn)}
.rk-balk i{flex:0 1 0;min-width:0;transition:flex-grow 320ms cubic-bezier(.2,.8,.3,1)}
.rk-balk i:nth-child(1){background:var(--weinig-v)}
.rk-balk i:nth-child(2){background:var(--matig-v)}
.rk-balk i:nth-child(3){background:var(--goed)}
.rk-balk i:nth-child(4){background:var(--perfect)}
.rk-balk i:nth-child(5){background:var(--matig)}
.rk-balk i:nth-child(6){background:var(--aflandig)}
.rk-merken{position:relative;height:20px;margin-top:5px;font-size:11.5px;font-weight:700;color:var(--flauw);font-variant-numeric:tabular-nums}
.rk-merken span{position:absolute;transform:translateX(-50%);transition:left 320ms cubic-bezier(.2,.8,.3,1)}
.rk-legenda{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--zacht);margin:6px 0 0;padding:0;list-style:none}
.rk-legenda li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--k)}

/* De windhoek: zee boven, zand onder, een pijl die je over het strand draait. */
.wh-beeld{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--lijn);
  background:linear-gradient(#DCEBF0 0 58%,#EFE3CC 58% 100%)}
.wh-beeld::before{content:"zee";position:absolute;left:14px;top:12px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5E8794}
.wh-beeld::after{content:"strand";position:absolute;left:14px;bottom:12px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8C7A55}
/* De pijl draait om het punt waar de kiter staat, op de waterlijn. */
.wh-pijl{position:absolute;left:50%;top:58%;width:0;height:0;transition:transform 260ms cubic-bezier(.2,.8,.3,1)}
.wh-pijl::before{content:"";position:absolute;left:-2px;bottom:14px;width:4px;height:clamp(70px,20vw,120px);border-radius:2px;background:var(--wk,var(--inkt));transition:background var(--t)}
.wh-pijl::after{content:"";position:absolute;left:-9px;bottom:6px;border:9px solid transparent;border-top:14px solid var(--wk,var(--inkt));border-bottom:0;transition:border-color var(--t)}
.wh-kiter{position:absolute;left:50%;top:58%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--inkt);border:3px solid var(--kaart)}
.windhoek[data-soort=perfect]{--wk:var(--perfect)}
.windhoek[data-soort=goed]{--wk:var(--goed)}
.windhoek[data-soort=matig]{--wk:var(--matig)}
.windhoek[data-soort=aflandig]{--wk:var(--aflandig)}
.wh-naam{font-family:var(--kop);font-weight:800;font-size:clamp(28px,4.6vw,40px);line-height:1;letter-spacing:-.03em;color:var(--wk,var(--inkt));margin:0 0 4px;transition:color var(--t)}
.wh-graden{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--flauw);margin:0 0 12px}
.wh-uitleg{font-size:15px;line-height:1.55;color:var(--zacht);margin:0 0 18px;min-height:6.3em}
@media(prefers-reduced-motion:reduce){.rk-balk i,.rk-merken span,.wh-pijl{transition:none}}

@media(min-width:760px){.wh-naam{min-height:2em}}

.blad{margin-top:18px}
/* De knop erft anders de schreefletter van de alinea waar hij in staat. */
.artikel .cta{font-family:var(--tekst);font-weight:700}
/* De keuze tussen planken is zo breed als zijn knoppen, niet zo breed als de kolom. */
.rk-keuze{justify-self:start;width:max-content;max-width:100%}
/* Een voetnoot kun je aanwijzen, net als een kitewoord. */
.artikel sup.noot a{cursor:help;border-radius:3px;transition:background var(--t)}
.artikel sup.noot a:hover,.artikel sup.noot a[aria-expanded="true"]{background:var(--perfect-v)}
.woordkaart .wk-bron{font-size:13.5px;line-height:1.5;margin:0;color:#F1EBE3;overflow-wrap:anywhere}
.woordkaart .wk-bron a{color:#8FD9B8}
/* De tabel onder de rekenaar volgt de schuifjes. */
.volgt td,.volgt th{transition:color var(--t)}


/* ── de som, als breuk gezet ───────────────────────────────────────────────
   Een formule in een grijs vakje las als een foutmelding. Dit is hoe je hem op papier schrijft. */
.som{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 16px;padding:26px 12px;
  margin-top:1.4em;margin-bottom:1.4em;border-top:1px solid var(--inkt);border-bottom:1px solid var(--lijn);
  font-family:var(--kop);font-weight:800;letter-spacing:-.02em;color:var(--inkt);font-size:clamp(17px,2.6vw,22px)}
.som .is{font-family:var(--tekst);font-weight:500;color:var(--zacht)}
.som .breuk{display:inline-grid;text-align:center}
.som .breuk span{padding:4px 12px}
.som .breuk span+span{border-top:2px solid var(--inkt)}
.som small{display:block;font-family:var(--tekst);font-weight:500;font-size:12px;letter-spacing:.02em;color:var(--zacht)}
.antwoord .som{border:0;padding:8px 0 14px;margin:0}

/* ── het bereik per kite ───────────────────────────────────────────────── */
.artikel .blad>.bereik{grid-template-columns:1fr}
.br-in{display:grid;gap:8px 40px;align-items:end}
@media(min-width:760px){.br-in{grid-template-columns:1.4fr 1fr}}
.br-lijst{display:grid;gap:12px;margin:6px 0 0}
.br-rij{display:grid;grid-template-columns:56px 1fr;gap:4px 14px;align-items:center}
.br-maat{font-family:var(--kop);font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--inkt);grid-row:span 2}
.br-maat small{font-family:var(--tekst);font-size:12px;font-weight:700;color:var(--flauw);margin-left:2px}
.br-balk{position:relative;height:12px;border-radius:6px;background:var(--lijn-2);overflow:hidden}
.br-balk i{position:absolute;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,var(--goed),var(--perfect) 45%,var(--matig));
  transition:left 320ms cubic-bezier(.2,.8,.3,1),width 320ms cubic-bezier(.2,.8,.3,1)}
.br-kn{font-size:12.5px;font-weight:700;color:var(--zacht);font-variant-numeric:tabular-nums}
.br-as{display:flex;justify-content:space-between;margin:2px 0 0 70px;font-size:11px;font-weight:700;color:var(--flauw)}
@media(prefers-reduced-motion:reduce){.br-balk i{transition:none}}

/* stijl.css zet op een telefoon overflow-x:hidden op html en body. Dat maakt van body een eigen
   schuifvak, en daarin blijft position:sticky niet plakken. "clip" knipt net zo goed af maar maakt
   geen schuifvak. */
html:has(main.artikel),body:has(main.artikel){overflow-x:clip}
.artikel .scroll:focus-visible{outline:2px solid var(--perfect);outline-offset:2px;border-radius:4px}

/* ── niets mag bewegen terwijl je sleept ───────────────────────────────────
   De vier oordelen van de windhoek liggen alle vier in hetzelfde vakje op elkaar; alleen de
   gekozen is zichtbaar. Het vakje is dus altijd zo hoog als de langste, en de pagina eronder
   blijft staan. De zin van de rekenaar krijgt zijn hoogte van onderdelen.js (de langste variant). */
.wh-staten{display:grid}
.wh-staat{grid-area:1/1;visibility:hidden}
.wh-staat.aan{visibility:visible}
.wh-staat .wh-uitleg,.wh-staat .wh-naam{min-height:0}
.volgt tr.leeg th,.volgt tr.leeg td{color:var(--weinig)}
.artikel .blad>p.wie{white-space:nowrap;margin-bottom:8px}
.volgt tbody th{white-space:nowrap}

/* ── tabellen op een telefoon ──────────────────────────────────────────────
   1. De vaste eerste kolom had geen achtergrond meer (de kop van een artikeltabel is doorzichtig),
      dus de getallen die eronderdoor schoven stonden dwars door het gewicht heen.
   2. Schuift een tabel opzij, dan zie je dat aan een vervagende rechterrand, en er komt een knop
      onder waarmee hij schermvullend opent. */
.artikel .maattabel thead th:first-child,.artikel .maattabel tbody th{background:var(--kaart)}
.artikel .maattabel:not(.woordtabel) thead th:first-child{z-index:3}
.artikel .maattabel:not(.woordtabel) tbody th{z-index:2;box-shadow:1px 0 0 var(--lijn)}
.scroll.schuift{position:relative;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
.scroll.schuift.eind{-webkit-mask-image:none;mask-image:none}
.artikel .blad>.tabelknop{display:flex;justify-content:flex-end;margin-top:-6px;margin-bottom:18px}
.tabelknop button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--lijn);border-radius:var(--r-pil);
  background:var(--kaart);color:var(--inkt);font:inherit;font-family:var(--tekst);font-size:13px;font-weight:700;cursor:pointer;transition:border-color var(--t)}
.tabelknop button:hover{border-color:var(--inkt)}
.tabelknop button::before{content:"";width:11px;height:11px;border:1.5px solid currentColor;border-radius:2px;box-shadow:3px -3px 0 -1.5px var(--kaart),3px -3px 0 0 currentColor}
dialog.tabelgroot{border:0;padding:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;background:var(--kaart);color:var(--inkt)}
dialog.tabelgroot::backdrop{background:rgba(23,19,15,.5)}
.tg-kop{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  background:var(--kaart);border-bottom:1px solid var(--lijn)}
.tg-kop p{margin:0;font-family:var(--tekst);font-size:13px;line-height:1.35;color:var(--zacht);flex:1}
.tg-kop button{flex:none;min-height:40px;padding:0 16px;border:0;border-radius:var(--r-pil);background:var(--inkt);color:var(--papier);
  font:inherit;font-family:var(--tekst);font-size:13px;font-weight:700;cursor:pointer}
.tg-lijf{padding:14px 12px calc(24px + env(safe-area-inset-bottom));overflow:auto;-webkit-overflow-scrolling:touch}
/* Schermvullend past een getallentabel zonder schuiven: vaste kolommen, elke kolom even breed. */
.tg-lijf .maattabel:not(.woordtabel){table-layout:fixed;width:100%;font-size:clamp(12.5px,3.4vw,17px)}
.tg-lijf .maattabel:not(.woordtabel) th,.tg-lijf .maattabel:not(.woordtabel) td{padding:12px 1px;white-space:nowrap}
.tg-lijf .maattabel:not(.woordtabel) tbody th,.tg-lijf .maattabel:not(.woordtabel) thead th:first-child{position:static;box-shadow:none}
.tg-lijf .maattabel thead th{font-size:11px;letter-spacing:.04em}
.tg-lijf .woordtabel{min-width:560px}
.tg-lijf .tg-titel{font-family:var(--tekst);font-size:13px;color:var(--zacht);margin:18px 4px 8px}
.tg-lijf .tg-titel:first-child{margin-top:0}
html:has(dialog.tabelgroot[open]){overflow:hidden}

/* ── de som op een telefoon ────────────────────────────────────────────────
   Naast elkaar persen maakte hem klein en scheef. Onder elkaar: eerst wat je uitrekent, dan de breuk. */
@media(max-width:560px){
  .som{flex-direction:column;flex-wrap:nowrap;gap:6px;font-size:19px;padding:22px 0}
  .som>span:first-child{text-align:center}
  .som .is{font-size:20px;line-height:1}
  .som .breuk span{padding:6px 18px}
  .som small{font-size:12.5px}
}

/* Een getallentabel past op een telefoon gewoon helemaal, als je hem de breedte van het blad geeft
   en de kolommen even breed maakt. Schuiven is dan niet nodig, en de knop "groot" verschijnt niet. */
@media(max-width:700px){
  .artikel .blad>.scroll:has(.maattabel:not(.woordtabel)){margin-left:calc(-1 * clamp(18px,6vw,84px) + 6px);margin-right:calc(-1 * clamp(18px,6vw,84px) + 6px);max-width:none;overflow-x:visible}
  .artikel .maattabel:not(.woordtabel){table-layout:fixed;width:100%;font-size:clamp(11.5px,3.3vw,14px)}
  .artikel .maattabel:not(.woordtabel) th,.artikel .maattabel:not(.woordtabel) td{padding:10px 0;white-space:nowrap}
  .artikel .maattabel:not(.woordtabel) thead th{font-size:10.5px;letter-spacing:.02em}
  .artikel .maattabel:not(.woordtabel) tbody th,.artikel .maattabel:not(.woordtabel) thead th:first-child{position:static;box-shadow:none}
}

/* Een tabel met zinnen erin wordt op een telefoon een stapel kaartjes: de plek als kop, daaronder
   elk vak met zijn kolomnaam ervoor. Drie kolommen tekst naast elkaar op 300 px is niet te lezen. */
@media(max-width:560px){
  .artikel .woordtabel tbody th{white-space:normal}
  .artikel .volgt tbody th{white-space:nowrap}
  .artikel .stapel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .artikel .stapel,.artikel .stapel tbody,.artikel .stapel tr,.artikel .stapel th,.artikel .stapel td{display:block;width:auto}
  .artikel .stapel tr{padding:14px 0;border-bottom:1px solid var(--lijn)}
  .artikel .stapel tr:first-child{border-top:1.5px solid var(--inkt)}
  .artikel .stapel th,.artikel .stapel td{border:0;padding:0}
  .artikel .stapel tbody th{font-family:var(--kop);font-weight:800;font-size:18px;letter-spacing:-.02em;margin-bottom:6px;white-space:normal}
  .artikel .stapel td{font-size:16.5px;line-height:1.45;margin-top:4px}
  .artikel .stapel td[data-kop]::before{content:attr(data-kop);display:block;font-family:var(--tekst);font-size:11px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--flauw);margin-top:8px}
}

/* ── de vier deuren naar de mail ───────────────────────────────────────── */
.artikel .blad>ul.maildeuren{list-style:none;padding:0;display:grid;gap:0;border-top:1.5px solid var(--inkt);margin-top:1.4em;margin-bottom:1.6em}
.artikel .blad>ul.maildeuren li{margin:0;border-bottom:1px solid var(--lijn)}
.artikel .blad .maildeuren a:not(.cta){display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;padding:16px 4px;text-decoration:none;
  min-height:44px;transition:background var(--t),padding var(--t)}
.maildeuren a b{font-family:var(--kop);font-weight:800;font-size:19px;letter-spacing:-.02em;grid-column:1}
.maildeuren a span{font-family:var(--tekst);font-size:14px;line-height:1.45;color:var(--zacht);grid-column:1}
.maildeuren a::after{content:"\2192";grid-column:2;grid-row:1/3;font-family:var(--tekst);font-size:20px;color:var(--flauw);transition:transform var(--t),color var(--t)}
@media(hover:hover){.maildeuren a:hover{background:var(--papier)}.maildeuren a:hover::after{transform:translateX(4px);color:var(--inkt)}}