/* ---------------------------------------------------------------------------
 * single.css — losse berichten (single.php), baserules 8
 *
 * HET LEESBLAD
 * ------------
 * De homepage is een technische tekening. Dit blad trekt die taal door en zet
 * hem aan het werk: het artikel wordt een tekening van zichzelf.
 *
 * 1. DE MAATLIJN. De tussenkoppen zijn maatstreepjes op een lijn naast de
 *    tekst, op de plek waar ze écht in het stuk zitten. Zo zie je aan de
 *    streepjes hoe lang een paragraaf is. De lijn is tegelijk inhoudsopgave,
 *    voortgangsbalk en positieaanwijzer — één element, drie antwoorden op
 *    "waar ben ik en hoeveel komt er nog". Dat is waarom het geen versiering is.
 *
 *    De lijn kantelt mee met de ruimte: staat hij naast de tekst, dan staat hij
 *    verticaal met de koppen erbij; is die kantlijn er niet, dan gaat hij plat
 *    onder de header liggen als de maatbalk van de homepage, met de kop waar je
 *    nu bent ernaast. Dat is een breedtekwestie en dus CSS — geen
 *    domZichtbaarheid.
 *
 * 2. HET TITELBLOK. Een bouwtekening heeft een stempel met de gegevens van het
 *    blad; de footer heeft er al een (main.css). Boven de tekst staat dezelfde:
 *    label, waarde, haarlijn ertussen, cijfers op tabelbreedte.
 *
 * 3. PAPIER, DAN WIT. De kop staat op --kleurPapier, net als de header, zodat
 *    balk en kop één oppervlak zijn. De haarlijn onder de foto is de naad; wat
 *    erna komt is wit, want dat leest het rustigst. Twee streepjes onder die
 *    naad geven de breedte van de foto aan, zoals een maatlijn dat doet.
 *
 * Nergens een schaduw, nergens een afgeronde hoek om een foto — dezelfde
 * afspraak als op de homepage.
 *
 * Klassenamen in camelCase (baserules 2).
 * --------------------------------------------------------------------------- */

.artikel {
    /* Waar een anker onder uit moet komen: de hele plakkende header — niet
       alleen de hoofdbalk, want de navigatiebalk plakt mee. Zonder dit
       verdwijnt een aangeklikte kop erachter. Er stond 4,75rem extra bij voor
       de inhoudsopgave die hier plakte; die plakt niet meer (zie onder). */
    --artikelAnker: calc(var(--hoogteHeaderPlak) + var(--ruimte5));
}

/* --------------------------------------------------------------------------
 * Het papier: kop, titelblok en de foto
 * -------------------------------------------------------------------------- */

.artikelBlad {
    position: relative;
    background: var(--kleurPapier);
    border-block-end: 1px solid var(--kleurRand);
}

.artikelKop {
    display: grid;
    justify-items: start;
    row-gap: var(--ruimte4);
    padding-block: var(--ruimte7) var(--ruimte6);
}

/* De rubriek, klein kapitaal aan een streepje — hetzelfde label als op de
   homepage, zodat een bezoeker het herkent. */
.artikelLabel {
    display: flex;
    align-items: center;
    gap: var(--ruimte3);
    font-size: var(--maatMini);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

.artikelLabel::before {
    content: '';
    width: 2.25rem;
    height: 2px;
    flex: none;
    background: var(--kleurAccent);
}

.artikelLabelLink {
    color: inherit;
    text-decoration: none;
    transition: color var(--overgang);
}

.artikelLabelLink:hover {
    color: var(--kleurAccentDonker);
}

.artikelTitel {
    /* Een titel over de volle 1370px leest niet. Op deze maat vallen de meeste
       koppen in twee of drie regels. */
    max-width: 26ch;
    font-size: var(--maatH1);
    font-weight: 700;
    letter-spacing: -.02em;
}

.artikelKop .paginaKopIntro {
    max-width: 58ch;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--kleurTekstZacht);
}

.artikelKop .paginaKopIntro p + p {
    margin-top: var(--ruimte3);
}

/* Het titelblok. De cellen hugen hun inhoud en krijgen een haarlijn ertussen,
   net als de stempel in de footer. */
.artikelStempel {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte4) 0;
    margin: var(--ruimte3) 0 0;
    padding-block-start: var(--ruimte5);
    border-block-start: 1px solid var(--kleurRand);
    width: 100%;
}

.artikelCel + .artikelCel {
    padding-inline-start: var(--ruimte5);
    margin-inline-start: var(--ruimte5);
    border-inline-start: 1px solid var(--kleurRand);
}

.artikelCelLabel {
    font-family: var(--fontKop);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

/* De marge komt van de UA-stijl voor <dd> af; daarna pas de eigen ruimte. */
.artikelCelWaarde {
    margin: var(--ruimte2) 0 0;
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: var(--kleurTekstSterk);
}

/* De foto staat op de naad tussen papier en wit: de haarlijn van .artikelBlad
   loopt precies langs zijn onderrand. Twee streepjes eronder geven zijn
   breedte aan — een maatlijn, zoals overal op deze site. */
.artikelBeeld {
    position: relative;
    margin: 0 auto;
}

/**
 * De foto is een band en geen kolom.
 *
 * bgHero is 1280 × 960, dus 4:3. Met alleen width: 100% werd dat op de volle
 * bladbreedte (1322px) een foto van 991 pixels hoog — op een laptop het hele
 * venster onder de header, met de eerste regel tekst eronder.
 *
 * LET OP: GEEN max-height OP EEN <img>
 * ------------------------------------
 * Hier stond eerst aspect-ratio met max-height: 26rem, en dat doet niet wat je
 * denkt. Bij een replaced element rekent de browser een geschonden max-height
 * terug naar de bréédte om de verhouding te bewaren (CSS 2.1 §10.4). De foto
 * werd dus geen band van 1322 × 416 maar een blok van 416 × 16/10 = 665 pixels
 * breed, en stond daarmee links in het blad in plaats van over de volle
 * breedte — met de rechterstreepje van de maatlijn een halve pagina ernaast.
 *
 * Een vaste hoogte heeft dat probleem niet: breedte en hoogte zijn dan beide
 * bepaald, dus er valt niets terug te rekenen en de foto blijft 100% breed.
 * clamp() laat hem meelopen met het venster — 30vw, met een ondergrens zodat
 * hij op een telefoon geen streepje wordt en een bovengrens van 26rem = 416px
 * zodat hij op een laptop niet het hele venster vult. object-fit: cover snijdt
 * het teveel van boven en onder gelijk af, dus het bed blijft in beeld.
 *
 * Geen verschuiving tijdens het laden: de hoogte staat vast voordat de foto
 * binnen is. En één regel CSS in plaats van een nieuw beeldformaat, dus de 127
 * geïmporteerde afbeeldingen hoeven niet opnieuw gegenereerd te worden.
 */
.artikelBeeldFoto {
    display: block;
    width: 100%;
    height: clamp(14rem, 30vw, 26rem);
    object-fit: cover;
    object-position: center;
    /* Vangnet: mocht er ooit tóch iets aan de breedte knagen, dan staat de foto
       gecentreerd in het blad en niet links tegen de rand. */
    margin-inline: auto;
}

/* De twee streepjes die de breedte van de foto aangeven. */
.artikelBeeld::before,
.artikelBeeld::after {
    content: '';
    position: absolute;
    bottom: calc(var(--ruimte4) * -1);
    width: 1px;
    height: var(--ruimte4);
    background: var(--kleurRand);
}

/**
 * Op de rand van de foto zelf, en die staat op de padding van .omhulsel. Hier
 * stond --ruimte4, en dat is de padding alleen onder 48rem; daarboven is het
 * --ruimte5, en zaten de streepjes acht pixels binnen de foto in plaats van
 * eronder. Vandaar --omhulselPad (main.css): één waarde die met de padding
 * meedraait, zodat ze niet meer los van elkaar kunnen lopen.
 */
.artikelBeeld::before { left: var(--omhulselPad); }
.artikelBeeld::after { right: var(--omhulselPad); }

.artikelBeeldBijschrift {
    padding-block: var(--ruimte3);
    font-size: var(--maatMini);
    letter-spacing: .04em;
    color: var(--kleurTekstZacht);
}

/* --------------------------------------------------------------------------
 * Het leesvlak
 * -------------------------------------------------------------------------- */

.artikelBody {
    padding-block: var(--ruimte6) var(--ruimte8);
}

/* Onder de foto hangen de maatstreepjes; die ruimte moet erbij. */
.artikelBodyNaBeeld {
    padding-block-start: var(--ruimte7);
}

/* --------------------------------------------------------------------------
 * De inhoudsopgave — smal: een lijst
 *
 * WAT ER STOND, EN WAAROM HET WEG IS
 * ----------------------------------
 * Hier lag de maatlijn plat als een plakkende balk onder de header: één
 * haarlijn met per tussenkop een streepje van één pixel, elk op de plek waar
 * die kop echt in het stuk zit. De koppen zelf stonden er niet bij — die waren
 * met clip-path uit het beeld gehaald, want ze passen daar niet naast elkaar.
 *
 * Op een telefoon was de inhoudsopgave daarmee een rij stipjes met
 * onzichtbare raakvlakken eromheen. Aantikken kon, maar je kon niet zien waar
 * je heen ging; en de balk plakte de rest van het artikel boven de tekst,
 * bovenop een header die daar al 62 pixels heeft. Een schaal die je niet kunt
 * lezen is geen schaal, en dan is het een balk die alleen ruimte kost.
 *
 * Hetzelfde soort slimmigheid is op /blog/ al weggehaald: daar stonden een
 * regelnummer en een streepje zo lang als het artikel duurt, en niemand kiest
 * een artikel op streepjeslengte (inc/parts/lijst.php).
 *
 * WAT ER NU STAAT
 * ---------------
 * Een lijst met de koppen erin, genummerd met dezelfde teller als de secties
 * in de tekst, elk op een haarlijn. Te lezen, aan te tikken (een regel van
 * 44 pixels in plaats van een streepje van één) en niet plakkend — hij staat
 * één keer boven de tekst en gaat dan uit de weg. De maat en de voortgang
 * blijven een kantlijnverhaal: vanaf 76rem staat de schaal ernaast en zijn de
 * koppen te lezen, en dáár klopt de tekening (zie het volgende blok).
 * -------------------------------------------------------------------------- */

.artikelMaatlijn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--ruimte4);
    margin-block-end: var(--ruimte6);
    /* Een haarlijn boven en onder, zodat het een blok is en niet een lijst die
       in de tekst overloopt. De regels binnenin hangen aan hun eigen haarlijn;
       de laatste sluit tegen deze onderrand aan. */
    border-block: 1px solid var(--kleurRand);
    background: var(--kleurPapier);
    /* Tot de rand van het venster, terug over de padding van .omhulsel heen.
       Geen 100vw, dus ook geen horizontale schuifbalk. --omhulselPad draait mee
       met die padding; met --ruimte4 bleef er boven 48rem acht pixels wit aan
       weerszijden staan. */
    margin-inline: calc(var(--omhulselPad) * -1);
    padding-inline: var(--omhulselPad);
}

.artikelMaatlijnKop {
    padding-block: var(--ruimte3);
    font-size: var(--maatMini);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

.artikelMaatlijnMeter {
    font-size: var(--maatMini);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
    white-space: nowrap;
}

.artikelMaatlijnGetal {
    font-family: var(--fontKop);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kleurAccentDonker);
}

.artikelMaatlijnSchaal {
    position: relative;
    grid-column: 1 / -1;
}

/* Smal is dit een lijst en geen liniaal: geen doorlopende lijn eronder en geen
   groene voortgang erover. Beide horen bij een schaal, en die staat pas vanaf
   76rem in de kantlijn. */
.artikelMaatlijnVoortgang {
    display: none;
}

.artikelMaatlijnLijst {
    counter-reset: maatlijn;
    list-style: none;
}

.artikelMaatlijnItem {
    counter-increment: maatlijn;
    border-block-start: 1px solid var(--kleurRand);
}

/* De hele regel is het raakvlak, niet een streepje erin. */
.artikelMaatlijnLink {
    display: flex;
    align-items: baseline;
    gap: var(--ruimte3);
    min-height: 2.75rem;
    padding-block: var(--ruimte3);
    text-decoration: none;
    transition: color var(--overgang);
}

/* Het nummer uit de teller, zoals 01, 02, 03 boven de secties in de tekst en
   01 t/m 04 in de footer. */
.artikelMaatlijnLink::before {
    content: counter(maatlijn, decimal-leading-zero);
    flex: none;
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kleurAccent);
}

.artikelMaatlijnTekst {
    font-family: var(--fontKop);
    font-size: var(--maatBasis);
    font-weight: 600;
    line-height: 1.35;
    color: var(--kleurTekstSterk);
    text-wrap: pretty;
    transition: color var(--overgang);
}

.artikelMaatlijnLink:hover .artikelMaatlijnTekst,
.artikelMaatlijnLink:focus-visible .artikelMaatlijnTekst {
    color: var(--kleurAccentDonker);
}

.artikelMaatlijnLink:focus-visible {
    outline: 2px solid var(--kleurAccentDonker);
    outline-offset: 2px;
}

/* Waar je nu bent, ook in de lijst: het nummer wordt donkerder en de regel
   krijgt het streepje dat op de homepage het actieve item aanwijst. */
.artikelMaatlijnItem.isHier .artikelMaatlijnLink::before {
    color: var(--kleurAccentDonker);
}

.artikelMaatlijnItem.isHier .artikelMaatlijnTekst {
    color: var(--kleurAccentDonker);
}

/* --------------------------------------------------------------------------
 * De maatlijn — overeind, in de kantlijn
 *
 * Vanaf deze maat is er naast de tekst een kantlijn van 68ch + 2×(15rem + 3rem)
 * ≈ 76rem. Dan wordt de lijst een maatlijn: de koppen staan als streepjes op
 * een schaal die met de tekst meeloopt, elk op de plek waar die kop écht in het
 * stuk zit, met de leesvoortgang erover en de resterende tijd erboven.
 *
 * Hier mág dat, want hier is er ruimte voor de koppen naast de streepjes — en
 * dat is precies het verschil met smal, waar dezelfde tekening een rij
 * naamloze stipjes was. De schaal is te lezen, dus hij vertelt iets.
 * -------------------------------------------------------------------------- */

@media (min-width: 76rem) {
    .artikelBody {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, var(--breedteTekst))
            minmax(0, 1fr);
        column-gap: var(--ruimte7);
    }

    .artikelMaatlijn {
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        /* Plakt mee zolang je in het artikel bent; align-self: start houdt hem
           boven in zijn rasterveld in plaats van uitgerekt. */
        position: sticky;
        align-self: start;
        display: flex;
        flex-direction: column;
        row-gap: var(--ruimte3);
        width: 15rem;
        /* dvh voor de adresbalk van een telefoon in landschap; vh als terugval
           voor browsers die dvh niet kennen. */
        height: min(38rem, calc(100vh - var(--hoogteHeaderPlak) - var(--ruimte9)));
        height: min(38rem, calc(100dvh - var(--hoogteHeaderPlak) - var(--ruimte9)));
        top: calc(var(--hoogteHeaderPlak) + var(--ruimte5));
        margin: 0;
        padding: 0;
        background: none;
        border: 0;
    }

    .artikelMaatlijnKop {
        padding: 0;
    }

    .artikelMaatlijnSchaal {
        flex: 1;
        min-height: 10rem;
    }

    /* De liniaal: één doorlopende haarlijn van boven naar onder. Smal staat hij
       er niet, want daar is de inhoudsopgave een lijst en geen schaal. */
    .artikelMaatlijnSchaal::before {
        content: '';
        position: absolute;
        inset-block: 0;
        left: 0;
        width: 1px;
        background: var(--kleurRand);
    }

    /* De groene lijn die met de leesvoortgang meeschuift. */
    .artikelMaatlijnVoortgang {
        display: block;
        position: absolute;
        inset-block: 0;
        left: 0;
        width: 1px;
        background: var(--kleurAccent);
        transform: scaleY(var(--voortgang, 0));
        transform-origin: top center;
    }

    /**
     * Zonder script staan de koppen gelijk verdeeld over de lijn; dat is een
     * nette inhoudsopgave. artikel.js zet .isGemeten en dan gaat elk item op
     * de hoogte waar zijn kop echt staat — zie onderaan dit blok. Geen enkel
     * element heeft dus een begintoestand die JS moet weghalen.
     */
    .artikelMaatlijnLijst {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    /* Blijft relatief: het streepje hoort bij dít item, niet bij de schaal
       eromheen. De haarlijn boven elke regel is een lijstding en gaat hier
       eraf — hier scheidt de schaal ze. */
    .artikelMaatlijnItem {
        position: relative;
        padding-inline-start: var(--ruimte5);
        border-block-start: 0;
        font-size: .8125rem;
        line-height: 1.4;
    }

    /* Het streepje aan de lijn, op de eerste regel van het label. */
    .artikelMaatlijnItem::before {
        content: '';
        position: absolute;
        top: .7em;
        left: 0;
        width: var(--ruimte3);
        height: 1px;
        background: var(--kleurRand);
        transition: width var(--overgangTraag), background-color var(--overgang);
    }

    .artikelMaatlijnLink {
        display: block;
        min-height: 0;
        padding-block: 0;
    }

    /* Het nummer staat hier vóór de kop op dezelfde regel in plaats van in een
       eigen kolom: de kantlijn is 15rem en elke pixel is er tekst. */
    .artikelMaatlijnLink::before {
        margin-inline-end: var(--ruimte2);
        font-size: inherit;
    }

    .artikelMaatlijnTekst {
        font-size: inherit;
        font-weight: 400;
        line-height: inherit;
        color: var(--kleurTekstZacht);
        /* Twee regels is genoeg; de langste kop op deze site is 62 tekens. */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    .artikelMaatlijnItem:hover::before,
    .artikelMaatlijnItem:has(.artikelMaatlijnLink:focus-visible)::before {
        width: var(--ruimte6);
        background: var(--kleurAccent);
    }

    /* Gehad en nu: de streepjes voor de leeslijn uit lopen mee met de groene
       lijn, en het streepje van de sectie waar je in zit wordt langer. */
    .artikelMaatlijnItem.isGehad::before {
        background: var(--kleurAccentLicht);
    }

    .artikelMaatlijnItem.isHier::before {
        width: var(--ruimte6);
        background: var(--kleurAccent);
    }

    .artikelMaatlijnItem.isHier .artikelMaatlijnTekst {
        font-weight: 600;
        color: var(--kleurTekstSterk);
    }

    /**
     * Gemeten: elk item op de hoogte waar zijn kop echt in het artikel staat.
     * Pas hier krijgt de lijn een schaal — dit is waar de tekening klopt, en
     * daarom staat het alleen in dit blok. Smal is de inhoudsopgave een lijst,
     * en dan zouden absolute posities de regels op elkaar leggen.
     */
    .isGemeten .artikelMaatlijnLijst {
        display: block;
    }

    .isGemeten .artikelMaatlijnItem {
        position: absolute;
        /* Het streepje ligt .7em onder de bovenkant van het item; zo komt het
           op de gemeten hoogte te liggen in plaats van eronder. */
        top: var(--positie, 0%);
        left: 0;
        width: 100%;
        transform: translateY(-.7em);
    }

    .artikelInhoud {
        grid-column: 2;
        grid-row: 1;
    }

    .artikelVoet {
        grid-column: 2;
        grid-row: 2;
    }
}

/* --------------------------------------------------------------------------
 * De tekst
 *
 * Eén kolom van 68ch, en verder de tekening: een haarlijn boven elke sectie
 * met het nummer eruit, een streepje voor een tussenkopje, een streepje in
 * plaats van een bolletje voor een opsomming.
 * -------------------------------------------------------------------------- */

.artikelInhoud {
    counter-reset: sectie;
    max-width: var(--breedteTekst);
    font-size: 1.0625rem;
    line-height: 1.75;
}

.artikelInhoud > * + * {
    margin-block-start: var(--ruimte4);
}

/* Een sectie begint op een lijn, met haar nummer erboven. */
.artikelInhoud h2 {
    counter-increment: sectie;
    margin-block-start: var(--ruimte8);
    padding-block-start: var(--ruimte5);
    border-block-start: 1px solid var(--kleurRand);
    font-size: var(--maatH2);
    font-weight: 700;
    letter-spacing: -.015em;
    scroll-margin-block-start: var(--artikelAnker);
}

/* De eerste kop staat al onder de padding van het leesvlak; nog een marge
   erbij zet de tekst onnodig laag op het blad. */
.artikelInhoud > h2:first-child {
    margin-block-start: 0;
}

.artikelInhoud h2::before {
    content: counter(sectie, decimal-leading-zero);
    display: block;
    margin-block-end: var(--ruimte2);
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    letter-spacing: .18em;
    font-variant-numeric: tabular-nums;
    color: var(--kleurAccent);
}

.artikelInhoud h3 {
    margin-block-start: var(--ruimte6);
    font-size: var(--maatH3);
    font-weight: 600;
    scroll-margin-block-start: var(--artikelAnker);
}

.artikelInhoud h3::before {
    content: '';
    display: block;
    width: 1.75rem;
    height: 2px;
    margin-block-end: var(--ruimte3);
    background: var(--kleurAccent);
}

.artikelInhoud h4 {
    margin-block-start: var(--ruimte5);
    font-size: var(--maatH4);
    font-weight: 600;
}

/* De koppen uit de doelsite staan vol <strong>; dat zou er twee keer vet van
   maken. Het gewicht komt van de kop, niet van de inhoud. */
.artikelInhoud h2 strong,
.artikelInhoud h3 strong,
.artikelInhoud h4 strong {
    font-weight: inherit;
}

.artikelInhoud p {
    text-wrap: pretty;
}

/* Een opsomming krijgt een streepje in plaats van een bolletje: één pixel, net
   als alle andere scheiding op deze site. */
.artikelInhoud ul {
    padding-inline-start: 0;
    list-style: none;
}

.artikelInhoud ul > li {
    position: relative;
    padding-inline-start: var(--ruimte5);
}

.artikelInhoud ul > li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: .85em;
    width: .625rem;
    height: 1px;
    background: var(--kleurAccent);
}

/* Een genummerde lijst houdt zijn cijfers, op tabelbreedte en met een nul
   ervoor, zodat 01 t/m 10 in één kolom recht onder elkaar staat. */
.artikelInhoud ol {
    counter-reset: punt;
    padding-inline-start: 0;
    list-style: none;
}

.artikelInhoud ol > li {
    counter-increment: punt;
    position: relative;
    padding-inline-start: var(--ruimte6);
}

.artikelInhoud ol > li::before {
    content: counter(punt, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.9;
    color: var(--kleurAccent);
}

.artikelInhoud li + li {
    margin-block-start: var(--ruimte2);
}

.artikelInhoud li > ul,
.artikelInhoud li > ol {
    margin-block-start: var(--ruimte2);
}

/* Een link in de tekst is altijd te zien: onderstreept met een haarlijn in het
   accent, ruim onder de letters door. Een link die je alleen bij hover ziet is
   geen link. */
.artikelInhoud a {
    color: var(--kleurTekstSterk);
    text-decoration: underline;
    text-decoration-color: var(--kleurAccent);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: color var(--overgang), text-decoration-color var(--overgang);
}

.artikelInhoud a:hover {
    color: var(--kleurAccentDonker);
    text-decoration-color: var(--kleurAccentDonker);
}

/* Een citaat tussen twee haarlijnen, met een streepje erboven. Geen dikke balk
   aan de zijkant: dat is een ander soort tekening. */
.artikelInhoud blockquote {
    margin-block: var(--ruimte6);
    padding-block: var(--ruimte5);
    border-block: 1px solid var(--kleurRand);
    font-family: var(--fontKop);
    font-size: var(--maatH4);
    font-weight: 500;
    line-height: 1.55;
    color: var(--kleurTekstSterk);
}

.artikelInhoud blockquote::before {
    content: '';
    display: block;
    width: 2.25rem;
    height: 2px;
    margin-block-end: var(--ruimte4);
    background: var(--kleurAccent);
}

.artikelInhoud blockquote p + p {
    margin-block-start: var(--ruimte3);
}

/* Beeld in de tekst: geen kader en geen afgeronde hoek, zoals overal. */
.artikelInhoud img {
    display: block;
    max-width: 100%;
    height: auto;
}

.artikelInhoud figure {
    margin-block: var(--ruimte6);
}

.artikelInhoud figcaption,
.artikelInhoud .wp-caption-text {
    margin-block-start: var(--ruimte3);
    padding-block-start: var(--ruimte3);
    border-block-start: 1px solid var(--kleurRand);
    font-size: var(--maatMini);
    letter-spacing: .04em;
    color: var(--kleurTekstZacht);
}

.artikelInhoud hr {
    height: 1px;
    margin-block: var(--ruimte7);
    border: 0;
    background: var(--kleurRand);
}

.artikelInhoud table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--maatKlein);
    font-variant-numeric: tabular-nums;
}

.artikelInhoud th,
.artikelInhoud td {
    padding: var(--ruimte3) var(--ruimte4) var(--ruimte3) 0;
    border-block-end: 1px solid var(--kleurRand);
    text-align: start;
}

.artikelInhoud th {
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

/* --------------------------------------------------------------------------
 * Onder de tekst: de onderwerpen
 * -------------------------------------------------------------------------- */

.artikelVoet {
    max-width: var(--breedteTekst);
    margin-block-start: var(--ruimte8);
    padding-block-start: var(--ruimte5);
    border-block-start: 1px solid var(--kleurRand);
}

.artikelVoetLabel {
    font-family: var(--fontKop);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

.artikelTags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte2) var(--ruimte4);
    margin-block-start: var(--ruimte4);
    list-style: none;
}

/* Geen grijze pil: een label met een haarlijn eronder die bij hover groen wordt
   en meebeweegt met de rest van de tekening. */
.artikelTag {
    display: inline-block;
    padding-block-end: var(--ruimte1);
    border-block-end: 1px solid var(--kleurRand);
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 600;
    color: var(--kleurTekstSterk);
    text-decoration: none;
    transition: color var(--overgang), border-color var(--overgang);
}

.artikelTag:hover {
    color: var(--kleurAccentDonker);
    border-color: var(--kleurAccent);
}

/* --------------------------------------------------------------------------
 * De link met de pijl
 *
 * Dezelfde als 'Lees dit artikel' op /blog/ (.blogMeer in archive.css). Staat
 * hier apart omdat elke template zijn eigen CSS-bestand heeft (baserule 8);
 * main.css tekent de iconenset alleen in de header, de footer en de USP-balk,
 * dus het lijnwerk moet hier zelf gezet worden — anders vult de browser het
 * pad op tot een vlek.
 * -------------------------------------------------------------------------- */

.artikelMeer {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte2);
    padding-block-end: var(--ruimte1);
    border-block-end: 1px solid var(--kleurRand);
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 600;
    color: var(--kleurTekstSterk);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--overgang), border-color var(--overgang);
}

.artikelMeer svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--overgang);
}

.artikelMeer:hover {
    color: var(--kleurAccentDonker);
    border-color: var(--kleurAccent);
}

.artikelMeer:hover svg {
    transform: translateX(.1875rem);
}

/* --------------------------------------------------------------------------
 * Uit de winkel
 *
 * WAAROM DIT BLOK BESTAAT
 * -----------------------
 * Dit is het blog van een webshop, en aan een uitgelezen artikel was dat niet
 * te zien: er stond geen product, geen categorie en geen prijs op de pagina.
 * Zie inc/parts/artikelShop.php voor wat er in staat en inc/blog.php voor hoe
 * de categorieën erbij komen.
 *
 * DE TEKENING
 * -----------
 * Een band in papierkleur — dezelfde --kleurPapier als de header en de kop van
 * het artikel, zodat het als één ander oppervlak leest dan de witte tekst
 * erboven. Verder de taal van de rest van de site: haarlijnen in plaats van
 * kaders, geen schaduw, geen afgeronde hoek om een foto, en de categorieën als
 * liniaal — één doorlopende lijn met een streepje per categorie, precies de
 * maatbalk van de homepage.
 * -------------------------------------------------------------------------- */

.artikelShop {
    display: block;
    background: var(--kleurPapier);
    border-block: 1px solid var(--kleurRand);
}

.artikelShopBinnen {
    padding-block: var(--ruimte7) var(--ruimte8);
}

.artikelShopKop {
    display: grid;
    row-gap: var(--ruimte3);
}

.artikelShopTitel {
    max-width: 34ch;
    font-size: var(--maatH2);
    font-weight: 700;
    letter-spacing: -.015em;
    text-wrap: balance;
}

.artikelShopAlles {
    margin-block-start: var(--ruimte1);
}

/* De koptekst en de link ernaast zodra er ruimte voor twee kolommen is. */
@media (min-width: 48rem) {
    .artikelShopKop {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: var(--ruimte5);
    }

    .artikelShopAlles {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: end;
        margin: 0;
    }
}

/* --- de producten ----------------------------------------------------------
 * Elk product hangt aan een haarlijn in plaats van in een doosje te staan,
 * zoals de kaarten in het categorieoverzicht (shop.css). Er staan er maximaal
 * drie; auto-fit laat ze op een telefoon onder elkaar zakken.
 * ------------------------------------------------------------------------- */

.artikelShopProducten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0 var(--ruimte5);
    margin-block-start: var(--ruimte6);
    list-style: none;
}

.artikelShopProduct {
    border-block-start: 1px solid var(--kleurRand);
    transition: border-color var(--overgang);
}

.artikelShopProduct:hover {
    border-color: var(--kleurZwart);
}

.artikelShopProductLink {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    column-gap: var(--ruimte4);
    align-items: start;
    padding-block: var(--ruimte4);
    text-decoration: none;
}

.artikelShopProductPlaat {
    display: block;
    overflow: hidden;
    background: var(--kleurWit);
}

/* 4:3 is de verhouding van bgKaart (640×480), dus er wordt niets bijgesneden. */
.artikelShopProductPlaat img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--overgangTraag);
}

.artikelShopProduct:hover .artikelShopProductPlaat img {
    transform: scale(1.04);
}

.artikelShopProductTekst {
    display: grid;
    row-gap: var(--ruimte2);
    min-width: 0;
}

.artikelShopProductTitel {
    font-family: var(--fontKop);
    font-size: var(--maatBasis);
    font-weight: 600;
    line-height: 1.3;
    color: var(--kleurTekstSterk);
    transition: color var(--overgang);
}

.artikelShopProduct:hover .artikelShopProductTitel {
    color: var(--kleurAccentDonker);
}

.artikelShopProductPrijs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ruimte2);
    font-variant-numeric: tabular-nums;
}

.artikelShopAdvies {
    font-size: var(--maatKlein);
    color: var(--kleurTekstZacht);
}

.artikelShopBedrag {
    font-family: var(--fontKop);
    font-size: var(--maatBasis);
    font-weight: 700;
    color: var(--kleurTekstSterk);
}

/* --- de categorieën, als liniaal ---------------------------------------- */

.artikelShopRail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    margin-block-start: var(--ruimte6);
    border-block-start: 1px solid var(--kleurRand);
    list-style: none;
}

.artikelShopRailItem {
    position: relative;
}

/* Het streepje onder de lijn, op de linkerrand van elke cel — zo staan ze op
   regelmatige afstand en is de rij een schaal en geen rij knopjes. */
.artikelShopRailItem::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: var(--ruimte3);
    background: var(--kleurRand);
    transition: height var(--overgangTraag), background-color var(--overgang);
}

.artikelShopRailItem:hover::before,
.artikelShopRailItem:has(.artikelShopTerm:focus-visible)::before {
    height: var(--ruimte5);
    background: var(--kleurAccent);
}

.artikelShopTerm {
    display: grid;
    row-gap: var(--ruimte1);
    padding-block: var(--ruimte4) var(--ruimte3);
    padding-inline-end: var(--ruimte4);
    text-decoration: none;
}

.artikelShopTermNaam {
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 600;
    line-height: 1.3;
    color: var(--kleurTekstSterk);
    transition: color var(--overgang);
}

.artikelShopTerm:hover .artikelShopTermNaam {
    color: var(--kleurAccentDonker);
}

.artikelShopTermAantal {
    font-size: var(--maatMini);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: var(--kleurTekstZacht);
}

/* --- de zekerheden -------------------------------------------------------
 * De USP's uit Instellingen → Site-instellingen, dezelfde als in de balk
 * bovenaan de site (baserule 13). Waarom je hier zou kopen hoort naast wat er
 * te koop is te staan.
 * ------------------------------------------------------------------------- */

.artikelShopZeker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte3) var(--ruimte6);
    margin-block-start: var(--ruimte6);
    padding-block-start: var(--ruimte5);
    border-block-start: 1px solid var(--kleurRand);
    list-style: none;
}

.artikelShopZekerItem {
    display: flex;
    align-items: center;
    gap: var(--ruimte2);
    font-size: var(--maatKlein);
    color: var(--kleurTekst);
}

.artikelShopZekerItem svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    fill: none;
    stroke: var(--kleurAccent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
 * Verder lezen
 *
 * Dezelfde regels als het register op /blog/ (inc/parts/lijst.php): plaat,
 * titel, datum en leestijd, op een haarlijn. Dezelfde informatie hoort er
 * hetzelfde uit te zien — wie van het overzicht komt herkent de regel.
 *
 * Waarom náást 'vorige / volgende': die twee zijn de buren in de tijd en dat
 * is geen verband. Zie inc/parts/artikelVerder.php.
 * -------------------------------------------------------------------------- */

.artikelVerder {
    padding-block: var(--ruimte7) var(--ruimte6);
}

.artikelVerderKop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ruimte3) var(--ruimte5);
}

.artikelVerderTitel {
    font-size: var(--maatH3);
    font-weight: 700;
    letter-spacing: -.015em;
}

.artikelVerderLijst {
    margin-block-start: var(--ruimte5);
}

.artikelVerderRij {
    /* position: relative voor het streepje op de haarlijn (::before). De
       z-index: 0 die hier stond hoorde bij het hovervlak eronder; dat is weg. */
    position: relative;
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    column-gap: var(--ruimte4);
    align-items: start;
    padding-block: var(--ruimte4);
    border-block-start: 1px solid var(--kleurRand);
}

.artikelVerderRij:last-child {
    border-block-end: 1px solid var(--kleurRand);
}

/* Zonder uitgelichte afbeelding schuift de tekst op in plaats van dat er een
   leeg vak blijft staan. */
.artikelVerderRij:not(:has(.artikelVerderPlaat)) {
    grid-template-columns: minmax(0, 1fr);
}

/* De aanwijzer: bij hover trekt de haarlijn zich groen uit, van links naar
   rechts — hetzelfde streepje als op een regel van /blog/. */
.artikelVerderRij::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--kleurAccent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--overgangTraag);
}

/**
 * Geen vlak dat oplicht bij hover. Dat stond hier wel — overgenomen van een
 * regel op /blog/, waar de lijst over de volle breedte loopt en de tekst ruim
 * binnen het vlak valt. Hier staan de drie regels in een raster van drie
 * kolommen zonder eigen padding, dus het vlak sloot precies om de letters:
 * een grijs blok dat de tekst aan alle kanten raakt. Met padding erbij zou het
 * bij hover gaan verspringen, en een kader om een link is de taal van deze
 * site niet. De haarlijn die zich groen uittrekt en de titel die van kleur
 * verandert wijzen genoeg aan.
 */
.artikelVerderRij:hover::before,
.artikelVerderRij:focus-within::before {
    transform: scaleX(1);
}

.artikelVerderPlaat {
    display: block;
    overflow: hidden;
}

.artikelVerderPlaat img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--overgangTraag);
}

.artikelVerderRij:hover .artikelVerderPlaat img {
    transform: scale(1.04);
}

.artikelVerderTekst {
    display: grid;
    row-gap: var(--ruimte2);
    min-width: 0;
}

.artikelVerderRijTitel {
    font-size: var(--maatH4);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
    text-wrap: pretty;
}

.artikelVerderRijTitel a {
    color: var(--kleurTekstSterk);
    text-decoration: none;
    transition: color var(--overgang);
}

.artikelVerderRijTitel a:hover {
    color: var(--kleurAccentDonker);
}

.artikelVerderMaat {
    font-size: var(--maatKlein);
    font-variant-numeric: tabular-nums;
    color: var(--kleurTekstZacht);
}

.artikelVerderMaat > * + *::before {
    content: '·';
    margin-inline: .4375rem;
    color: var(--kleurRand);
}

@media (min-width: 40rem) {
    .artikelVerderRij {
        grid-template-columns: 8rem minmax(0, 1fr);
        column-gap: var(--ruimte5);
    }
}

/* Vanaf hier passen de drie regels naast elkaar, en dan is het geen lijst meer
   maar een rij van drie — met de plaat boven de titel, want naast een titel is
   op een derde van de breedte geen plek voor allebei. */
@media (min-width: 64rem) {
    .artikelVerderLijst {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--ruimte6);
    }

    .artikelVerderRij {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--ruimte4);
        padding-block: var(--ruimte5) var(--ruimte6);
    }

    .artikelVerderRij:last-child {
        border-block-end: 0;
    }
}

/* --------------------------------------------------------------------------
 * Veelgestelde vragen
 *
 * Dezelfde uitklaplijst als op de homepage: een plus van twee haarlijnen die
 * bij het openklappen een min wordt. Staat hier ook omdat elke template zijn
 * eigen CSS-bestand heeft (baserules 8) en single.php dit blok kan renderen.
 * -------------------------------------------------------------------------- */

.paginaFaq {
    max-width: var(--breedteMax);
    padding-block: var(--ruimte7) var(--ruimte8);
    border-block-start: 1px solid var(--kleurRand);
}

.paginaFaqTitel {
    font-size: var(--maatH2);
    font-weight: 700;
    letter-spacing: -.015em;
}

.paginaFaqLijst {
    max-width: 76ch;
    margin-block-start: var(--ruimte6);
    border-block-start: 1px solid var(--kleurRand);
}

.paginaFaqItem {
    border-block-end: 1px solid var(--kleurRand);
}

.paginaFaqItem summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte5);
    padding-block: var(--ruimte5);
    font-family: var(--fontKop);
    font-size: var(--maatH4);
    font-weight: 600;
    color: var(--kleurTekstSterk);
    cursor: pointer;
    list-style: none;
    transition: color var(--overgang);
}

.paginaFaqItem summary::-webkit-details-marker {
    display: none;
}

.paginaFaqItem summary:hover {
    color: var(--kleurAccentDonker);
}

.paginaFaqItem summary::after {
    content: '';
    width: .875rem;
    height: .875rem;
    flex: none;
    background:
        linear-gradient(var(--kleurAccent), var(--kleurAccent)) center center / 100% 1px no-repeat,
        linear-gradient(var(--kleurAccent), var(--kleurAccent)) center center / 1px 100% no-repeat;
    transition: background-size var(--overgangTraag);
}

.paginaFaqItem[open] summary::after {
    background-size: 100% 1px, 1px 0;
}

.paginaFaqAntwoord {
    max-width: 64ch;
    padding-block-end: var(--ruimte5);
}

.paginaFaqAntwoord p + p {
    margin-block-start: var(--ruimte3);
}

/* --------------------------------------------------------------------------
 * Vorige en volgende
 *
 * Twee cellen met een haarlijn ertussen, en het streepje aan de kant waar je
 * heen gaat. Geen kaartjes met een schaduw.
 * -------------------------------------------------------------------------- */

.artikelNav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--ruimte6) var(--ruimte8);
    border-block-start: 1px solid var(--kleurRand);
}

.artikelNavLink {
    position: relative;
    display: block;
    padding-block: var(--ruimte5);
    text-decoration: none;
}

.artikelNavLink + .artikelNavLink {
    border-block-start: 1px solid var(--kleurRand);
}

.artikelNavLabel {
    display: flex;
    align-items: center;
    gap: var(--ruimte3);
    font-size: var(--maatMini);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
    transition: color var(--overgang);
}

/* Het streepje wijst de kant op waar de link heen gaat, en loopt bij hover uit
   — dezelfde beweging als de streepjes op de maatbalk. */
.artikelNavLabel::before {
    content: '';
    width: 1.5rem;
    height: 1px;
    flex: none;
    background: var(--kleurRand);
    transition: width var(--overgangTraag), background-color var(--overgang);
}

.artikelNavVolgende .artikelNavLabel {
    flex-direction: row-reverse;
}

.artikelNavTitel {
    display: block;
    margin-block-start: var(--ruimte3);
    font-family: var(--fontKop);
    font-size: var(--maatH3);
    font-weight: 600;
    line-height: 1.25;
    color: var(--kleurTekstSterk);
    transition: color var(--overgang);
}

.artikelNavLink:hover .artikelNavLabel::before {
    width: 2.75rem;
    background: var(--kleurAccent);
}

.artikelNavLink:hover .artikelNavLabel,
.artikelNavLink:hover .artikelNavTitel {
    color: var(--kleurAccentDonker);
}

@media (min-width: 48rem) {
    .artikelNav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--ruimte7);
    }

    .artikelNavVolgende {
        text-align: end;
    }

    /* De haarlijn staat nu tussen de twee cellen in plaats van eronder. */
    .artikelNavLink + .artikelNavLink {
        padding-inline-start: var(--ruimte7);
        border-block-start: 0;
        border-inline-start: 1px solid var(--kleurRand);
    }

    /* Staat er alleen een 'volgende', dan hoort die in de tweede kolom. */
    .artikelNavVolgende:first-child {
        grid-column: 2;
    }
}

/* --------------------------------------------------------------------------
 * Wie beweging heeft afgezet
 *
 * De maatlijn blijft doen wat hij moet doen — hij wijst nog steeds aan waar je
 * bent — maar zonder dat er iets uitloopt of meeschuift.
 * -------------------------------------------------------------------------- */

/* Een sprong naar een sectie glijdt, zodat je ziet dat je verplaatst en niet
   ineens ergens anders staat. Alleen op een blad met een artikel erop, en
   alleen als beweging welkom is. */
@media (prefers-reduced-motion: no-preference) {
    html:has(.artikel) {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    .artikelMaatlijnItem::before,
    .artikelMaatlijnTekst,
    .artikelMaatlijnVoortgang,
    .artikelMeer,
    .artikelMeer svg,
    .artikelNavLabel::before,
    .artikelShopProductPlaat img,
    .artikelShopRailItem::before,
    .artikelTag,
    .artikelVerderPlaat img,
    .artikelVerderRij::before,
    .paginaFaqItem summary,
    .paginaFaqItem summary::after {
        transition: none;
    }
}