/*
 * De artikelpagina (/website-vernieuwen/ en /responsive-webdesign/) —
 * CLAUDE.md §32.
 *
 * Alleen hier geladen (R8). Wat erin staat: het raster met de twee kolommen, de
 * kop met de auteursregel, de inhoudsopgave, de typografie van het artikel, en
 * de twee afwijkingen van "Gerelateerde artikelen" ten opzichte van diezelfde
 * sectie op de homepage.
 *
 * Alle maten zijn gemeten op https://www.samdesign.nl/website-vernieuwen/ en
 * /responsive-webdesign/ op 1440, 1024, 767 en 390px. Het is niet dezelfde
 * maatvoering als een berichtpagina: de kolom is hier 655 in plaats van 855
 * breed, de lopende tekst 17/30 in plaats van 15/25 en een h2 59/59 in plaats
 * van 40/60. Neem dus niets over uit pages/post.css zonder het na te meten.
 *
 * De lijst in de inhoudsopgave is gemeten door er zelf een lijstitem in te
 * hangen en af te lezen wat de pagina ermee doet (/root/samshots/artikel/
 * tocEcht.js) — de widget van Elementor bouwt die lijst met JavaScript, dus in
 * headless staat er niets om na te meten.
 */

/* ==================================================================
   Tokens
   ================================================================== */

.artikelArticle {
  /*
   * Het roze schuine streepje voor een h2 en een h3 in het artikel, en als
   * markering in de inhoudsopgave. Dezelfde SVG als op het portfolio-archief,
   * in een bericht en in een begrip; de vulling is #dc0356, nét een andere roze
   * dan --colorPink en --colorPinkDeep — zo staat het in de bron van
   * samdesign.nl.
   */
  --artikelMark: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29.085' height='28.859' viewBox='0 0 29.085 28.859'%3E%3Cpath d='M2.862-8.921l.251-2.438a.951.951,0,0,1,.311-.974L21.01-29.725c.284-.237.608-.208,1.11-.18l.458.06,1.894.157a.956.956,0,0,1,.217,1.6L4.4-8.428a.956.956,0,0,1-1.541-.493' transform='matrix(0.914,-0.407,0.407,0.914,9.556,37.517)' fill='%23dc0356'/%3E%3C/svg%3E");

  /* Hetzelfde streepje kleiner en doorzichtig, voor een regel in de
     inhoudsopgave waar je niet bent. De doorzichtigheid zit in de SVG zelf en
     niet in opacity: alleen de background-image wisselt straks. */
  --artikelMarkFaint: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.971' height='14.854' viewBox='0 0 14.971 14.854'%3E%3Cpath d='M2.862-19.113l.129-1.255a.489.489,0,0,1,.16-.5L12.2-29.821c.146-.122.313-.107.571-.092l.236.031.975.081a.492.492,0,0,1,.112.824L3.655-18.859a.492.492,0,0,1-.793-.254' transform='matrix(0.914,-0.407,0.407,0.914,9.556,33.141)' fill='%23dc0356' opacity='0.3'/%3E%3C/svg%3E");

  --artikelMetaColor: #848fa0;
  --artikelMetaLine: #848fa033;

  /* De rand van een tabel in het artikel; zie daar. */
  --artikelTableBorder: rgba(0, 0, 0, 0.1);

  margin-block: 50px;
}

/* ==================================================================
   Het raster: artikel links, inhoudsopgave rechts
   ------------------------------------------------------------------
   De container is hier 1080px breed en niet de 1280 van de rest van de site:
   zo staat het op samdesign.nl, waar deze sectie zijn eigen max-width heeft.
   Daarbinnen 655 + 75 + 350; de linkerkolom is dus geen vaste maat maar wat er
   overblijft.

   Vier of vijf vakken. `open` is er alleen op een pagina waar de inhoud met de
   markering uit samdesign-artikel zegt waar de inhoudsopgave onder 1025px hoort
   te staan; staat die markering er niet, dan is dat vak leeg en blijft de lijst
   tot de rechterkolom beperkt. De inhoudsopgave beslaat alle rijen, zodat hij
   naast het hele artikel staat en niet alleen naast de kop.
   ================================================================== */

.artikelLayout {
  max-width: calc(1080px + var(--containerPadding) * 2);
  display: grid;
  grid-template-areas:
    'head toc'
    'meta toc'
    'open toc'
    'body toc';
  grid-template-columns: minmax(0, 1fr) 350px;
  grid-template-rows: auto auto auto 1fr;
  column-gap: 75px;
}

.artikelHeader {
  grid-area: head;
}

.artikelMetaList {
  grid-area: meta;
}

.artikelOpening {
  grid-area: open;
}

/*
 * De inhoudsopgave schuift mee met het artikel. Op samdesign.nl is de kolom wél
 * als sticky ingesteld (`data-jet-settings`, topSpacing 50), maar de bibliotheek
 * die dat uitvoert staat op geen enkele pagina in de bundel, dus doet die
 * instelling daar niets. Op verzoek van de gebruiker doen wij het wél: bewuste
 * afwijking van R9, zie docs/beslissingen.md. align-self blijft staan, anders
 * rekt het vak zich over alle rijen uit en heeft sticky niets om binnen te
 * schuiven.
 *
 * flow-root houdt de witregel onder het laatste lijstitem binnen het blok. Op
 * samdesign.nl doet `overflow: hidden` op het vak van de widget hetzelfde, en
 * dat scheelt onder 1025px — waar de lijst in de tekst staat — precies die
 * halve regel (7,5px op mobiel, 10 op desktop).
 */
.artikelToc {
  display: flow-root;
  grid-area: toc;
  align-self: start;
}

/*
 * Onze eigen header is 134px hoog en staat vanaf 500px scrollen vast, dus
 * parkeert het vak daar 30px onder — dezelfde rekensom als op een berichtpagina
 * en in de index van de sitemap (§35). max-height plus overflow houdt een lange
 * inhoudsopgave binnen het scherm; /website-vernieuwen/ heeft er tien regels
 * staan en die passen op een laag venster anders niet.
 *
 * Alleen boven 1024px: daaronder staat de lijst in de tekst.
 */
@media (min-width: 1025px) {
  .artikelToc {
    position: sticky;
    top: calc(var(--headerStickyHeight) + 30px);
    max-height: calc(100vh - var(--headerStickyHeight) - 60px);
    overflow-y: auto;
  }
}

.artikelBody {
  grid-area: body;
}

/*
 * Het laatste blok van het artikel houdt 5,5px onder zich in plaats van 25,5:
 * op samdesign.nl trekt elk inhoudsblok 20px terug om de vaste tussenruimte van
 * Elementor te compenseren, en bij het laatste blok is er geen volgend blok waar
 * die 20 naartoe gaat. Op het blok zelf en niet als negatieve marge op
 * .artikelBody — dat is een rasteritem in een 1fr-rij, en daar rekent de browser
 * een negatieve marge niet altijd mee.
 */
.artikelBody > :last-child {
  margin-bottom: 5.5px;
}

/* ==================================================================
   De kop
   ------------------------------------------------------------------
   De maten komen helemaal van .sectionTitleSmall: 59/66 op desktop, 50/55 vanaf
   1024 en 35/35 onder 768. Anders dan op een berichtpagina hoeft er dus geen
   regelhoogte over — en er staat hier géén roze streepje voor.
   ================================================================== */

.artikelTitle {
  margin-bottom: 20px;
}

/* ==================================================================
   De auteursregel
   ------------------------------------------------------------------
   De foto, "Auteur: …", de datum en de leestijd op één regel, met de tekst
   verticaal in het midden van de foto. Een lijst en geen dl: alleen de eerste
   regel is een naam-waardepaar, de andere twee staan er zonder label — zo staat
   het op samdesign.nl, anders dan op een bericht of een begrip.

   De maat staat op de tekst en niet op het vak eromheen: het vak houdt zo de
   regelhoogte van de body (1,5 × 17px = 25,5px) als ondergrens, en dat is
   precies wat een regel op samdesign.nl 26px hoog maakt zodra de tekst naar
   15/25 zakt. Zet je de maat op het vak, dan wordt het daar 25 en loopt alles
   eronder 1px per regel mis.
   ================================================================== */

.artikelMetaList {
  display: flex;
  flex-wrap: wrap;
  color: var(--artikelMetaColor);
}

/*
 * Elk item is zelf een flexbox, zodat het de hoogte van de rij krijgt — 64px,
 * de foto — en zijn tekst daarin centreert. Dat is wat de drie vakken op
 * samdesign.nl op élke breedte doen.
 *
 * De 20px eronder staat op het item en niet op de lijst: dat is tegelijk de
 * ruimte tussen twee regels als ze onder elkaar staan en de ruimte tot het
 * artikel, precies zoals de marge van een widget daar werkt.
 */
.artikelMetaItem {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

/*
 * 27px tussen de foto en de tekst. Als column-gap en niet als marge op een van
 * de twee: zonder foto is er één vak in dit item en dus ook geen gat.
 */
.artikelMetaAuthor {
  column-gap: 27px;
}

.artikelMetaAuthor,
.artikelMetaDate {
  margin-right: 20px;
}

.artikelMetaText {
  font-size: 16px;
  line-height: 33px;
  letter-spacing: -0.05em;
}

/*
 * Een dun streepje tussen de regels, niet ervoor: de eerste heeft er geen. Het
 * staat op de tekst en niet op het vak eromheen, dus is de streep zo hoog als de
 * letters — op samdesign.nl staat hij daar ook op de span.
 */
.artikelMetaDate .artikelMetaText,
.artikelMetaReading .artikelMetaText {
  border-left: 1px solid var(--artikelMetaLine);
  padding-left: 20px;
}

/* Drie classes in de selector, want de reset heeft img[width][height] { height:
   auto } staan en dat weegt zwaarder dan één class. */
.artikelArticle .artikelMetaAuthor .artikelMetaPhoto {
  flex: none;
  width: 64px;
  height: 64px;
  object-fit: cover;
}

/* ==================================================================
   De inhoudsopgave
   ================================================================== */

.artikelTocTitle {
  /*
   * 23px eronder. Op samdesign.nl is dat een rand van 23px onder de kop van het
   * vak in de kleur van dat vak — op een witte pagina dus ruimte en geen lijn.
   */
  margin-bottom: 23px;
  color: var(--colorNavy);
  font-size: 22px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: -0.05em;
}

/*
 * De regel staat 30px naar binnen. Die inspring staat op het lijstitem en niet
 * als marge op de link: op samdesign.nl staat hij op de link, en een link is
 * inline, dus geldt hij daar alleen voor de eerste regel. Een kop die afbreekt
 * begint op zijn tweede regel dan tegen de linkerrand, dwars door de kolom
 * streepjes heen. Op het item geldt hij voor elke regel. Bewuste afwijking van
 * R9, zie docs/beslissingen.md.
 */
.artikelTocItem {
  /*
   * Een halve regel tussen twee koppen: 10px bij 20px tekst en 7,5 bij 15.
   * Gemeten op samdesign.nl op 1440 en 767px; het viel eerder niet op omdat de
   * lijst daar in de rechterkolom staat en die de hoogte van de sectie niet
   * bepaalt. Op /wat-kost-een-webshop-laten-bouwen/ (§36) staat hij onder
   * 1025px in de tekst, en dan schuift alles eronder mee.
   */
  margin-bottom: 0.5em;
  padding-left: 30px;
  font-size: 20px;
  line-height: 33px;
}

/*
 * De link heeft de kleur van de lopende tekst en geen streep: op verzoek van de
 * gebruiker is de inhoudsopgave geen rij roze links meer, maar een lijst die
 * leest als de koppen waar hij naar wijst. Bewuste afwijking van R9, zie
 * docs/beslissingen.md. Onder de muis en bij toetsenbordfocus komt de streep
 * terug — dat is dan de enige aanwijzing dat het een link is.
 *
 * Het streepje hangt aan de link en niet aan het lijstitem, ook al is de
 * inspring hierboven verhuisd. Het staat 23px voor de tekst, dus 7px vanaf de
 * rand — en die 7px is gemeten vanaf de bovenkant van de létter, niet vanaf die
 * van de regel.
 */
.artikelTocLink {
  position: relative;
  color: var(--colorNavy);
  text-decoration: none;
}

.artikelTocLink:hover,
.artikelTocLink:focus-visible {
  text-decoration: underline;
}

.artikelTocLink::before {
  content: '';
  position: absolute;
  top: 7px;
  left: -23px;
  width: 11px;
  height: 19px;
  background: var(--artikelMarkFaint) center / cover no-repeat;
}

/* De kop waar je nu bent krijgt het volle streepje. aria-current en geen eigen
   class: er is een attribuut dat precies dit betekent (§6). */
.artikelTocLink[aria-current]::before {
  background-image: var(--artikelMark);
}

/* ==================================================================
   Het artikel
   ------------------------------------------------------------------
   De lopende tekst is hier 17/30 met gewicht 200 — dat laatste staat zo in de
   bron van samdesign.nl, en Artegra houdt daar net als bij ons op bij 300, dus
   is dát wat er te zien is. Het eerste blok van het artikel staat op 18/30 met
   gewicht 500 en heeft daarvoor een wrapper in de inhoud (.artikelLead).

   De witregel onder een alinea en een lijst is 1,5em: 25,5px bij 17px en 27 bij
   18. Op geen enkele breedte verandert de tekstmaat, dus staat er hieronder
   niets over in een media query.
   ================================================================== */

.artikelOpening,
.artikelBody {
  color: var(--colorNavy);
  font-size: 17px;
  font-weight: 300;
  line-height: 30px;
}

/*
 * Het eerste blok van het artikel. Op samdesign.nl is dat een eigen widget met
 * eigen typografie; bij ons een div in de inhoud, zodat de koppen erin gewoon
 * in de inhoudsopgave meekomen en er geen tweede inhoudsveld voor nodig is.
 */
.artikelLead {
  font-size: 18px;
  font-weight: 500;
}

.artikelOpening p,
.artikelBody p,
.artikelOpening ul,
.artikelBody ul,
.artikelOpening ol,
.artikelBody ol {
  margin: 0 0 1.5em;
}

.artikelOpening h2,
.artikelBody h2,
.artikelOpening h3,
.artikelBody h3,
.artikelOpening h4,
.artikelBody h4,
.artikelOpening h5,
.artikelBody h5,
.artikelOpening h6,
.artikelBody h6 {
  margin: 0 0 20px;
  color: var(--colorNavy);
}

/*
 * Een h2 loopt mee met .sectionTitleSmall — 59px, vanaf 1024 50/55 en onder 768
 * 35/35 — met als enige verschil dat de regelhoogte hier 59 is in plaats van
 * 66. Springen vanuit de inhoudsopgave mag niet onder de vastgezette header
 * eindigen; die spronghoogte staat als scroll-padding-top op html in main.css
 * en dus niet ook nog eens als scroll-margin hier.
 */
.artikelOpening h2,
.artikelBody h2 {
  font-size: 59px;
  font-weight: 500;
  line-height: 59px;
  letter-spacing: -0.05em;
}

/* Een h3 houdt zijn maat op élke breedte: samdesign.nl zet daar geen mobiele
   variant op (gemeten op 1440, 1024, 767 en 390px). */
.artikelOpening h3,
.artikelBody h3 {
  font-size: 30px;
  font-weight: 500;
  line-height: 66px;
  letter-spacing: -0.05em;
}

/*
 * Een h4 staat op /wat-kost-een-webshop-laten-bouwen/ (§36) boven elk CMS —
 * "WordPress (met WooCommerce)", "Shopify:", "Magento". Nagemeten op
 * samdesign.nl: 24/40 op 1440 en 1024, 22/40 vanaf 767 naar beneden, en het
 * gewicht van de lopende tekst en niet dat van een kop. De andere twee
 * artikelpagina's hebben er geen.
 */
.artikelOpening h4,
.artikelBody h4 {
  font-size: 24px;
  font-weight: 300;
  line-height: 40px;
}

.artikelOpening h5,
.artikelBody h5,
.artikelOpening h6,
.artikelBody h6 {
  font-size: 20px;
  font-weight: 400;
  line-height: 25px;
}

/*
 * Het roze streepje voor een h2 en een h3. Als inline-block en niet absoluut: de
 * tekst begint erachter en loopt bij een tweede regel wél door tot de
 * linkerrand — zo staat het op samdesign.nl. De 7px naar links zet het streepje
 * met zijn tekening op de rooilijn van de pagina.
 */
.artikelOpening h2::before,
.artikelBody h2::before,
.artikelOpening h3::before,
.artikelBody h3::before {
  content: '';
  display: inline-block;
  position: relative;
  margin-left: -7px;
  background: var(--artikelMark) center / cover no-repeat;
}

.artikelOpening h2::before,
.artikelBody h2::before {
  width: 35px;
  height: 40px;
}

.artikelOpening h3::before,
.artikelBody h3::before {
  width: 23px;
  height: 22px;
}

/*
 * Opsommingen: de reset haalt de bolletjes van alle lijsten, hier komen ze
 * terug. 20px naar binnen zonder padding, dus het bolletje staat in die marge.
 */
.artikelOpening ul,
.artikelBody ul,
.artikelOpening ol,
.artikelBody ol {
  margin-left: 20px;
  padding-left: 0;
}

.artikelOpening ul,
.artikelBody ul {
  list-style-type: disc;
}

.artikelOpening ol,
.artikelBody ol {
  list-style-type: decimal;
}

.artikelOpening li,
.artikelBody li {
  margin: 0;
}

/*
 * Het bolletje voor een regel is roze en niet de kleur van de tekst. Dat is op
 * samdesign.nl een regel voor de hele site (gemeten op deze twee pagina's, op
 * een bericht en op een begrip); bij ons staat hij hier, want dit is de eerste
 * plek waar we hem tegenkwamen — pages/post.css en pages/faqItem.css missen hem
 * nog (docs/openstaand.md).
 */
.artikelOpening li::marker,
.artikelBody li::marker {
  color: var(--colorPinkDeep);
}

/*
 * Een link in de tekst is roze en zonder streep — net als in een begrip en
 * anders dan in een bericht. Zo staat het op samdesign.nl; de streep bij hover
 * en focus is er wél bij ons, want kleur alleen is een zwakke aanwijzing dat er
 * iets aanklikbaar is (docs/beslissingen.md).
 */
.artikelOpening a,
.artikelBody a {
  color: var(--colorPink);
  text-decoration: none;
}

.artikelOpening a:hover,
.artikelBody a:hover,
.artikelOpening a:focus-visible,
.artikelBody a:focus-visible {
  text-decoration: underline;
}

.artikelOpening strong,
.artikelBody strong,
.artikelOpening b,
.artikelBody b {
  font-weight: 700;
}

/* ==================================================================
   Een tabel in het artikel
   ------------------------------------------------------------------
   Alleen /wat-kost-een-webshop-laten-bouwen/ heeft er een (§36), en die staat
   op samdesign.nl zonder een enkele eigen regel: hij krijgt daar de tabelstijl
   van het thema. Vandaar dat het geen ontwerpkeuze van ons is maar een meting —
   nagemeten op 1440, 1024, 767 en 390px:

     tabel   border-collapse: separate, rand 1px links en boven, 1,5em eronder
     cel     8px padding, rand 1px rechts en onder, verticaal gecentreerd

   Samen leveren die twee randen precies één raster van 1px op. Niet
   `border-collapse: collapse` met een rand rondom: dan valt de rand tussen twee
   cellen samen en wordt de tabel 1px smaller per kolom, en dát is te zien.

   Het is niet dezelfde tabel als in een bericht: `pages/post.css` heeft een
   gekleurde kop, gestreepte rijen en een min-width van 750px. Neem daar dus
   niets van over (§32).
   ================================================================== */

.artikelOpening table,
.artikelBody table {
  width: 100%;
  margin: 0 0 1.5em;
  border-collapse: separate;
  border-spacing: 0;
  border: solid var(--artikelTableBorder);
  border-width: 1px 0 0 1px;
}

.artikelOpening th,
.artikelOpening td,
.artikelBody th,
.artikelBody td {
  padding: 8px;
  border: solid var(--artikelTableBorder);
  border-width: 0 1px 1px 0;
  vertical-align: middle;
}

/* ==================================================================
   De afbeeldingen in het artikel
   ------------------------------------------------------------------
   Elk beeld staat in een eigen figure met 20px eronder — op samdesign.nl is
   dat de vaste tussenruimte van een widget. De breedte staat als attribuut op
   de img (dat is de maat die de sectie daar per beeld meegeeft) en de reset
   knijpt hem af op de kolom.
   ================================================================== */

.artikelFigure {
  margin: 0 0 20px;
}

/*
 * Het eerste beeld van het artikel staat gecentreerd en de rest links. Zo staat
 * het op samdesign.nl: een beeldwidget is daar standaard gecentreerd en bij alle
 * andere beelden is dat op links gezet. Te zien vanaf 1024px naar beneden, waar
 * de kolom breder is dan het beeld; op 1440 knijpt de kolom het beeld af en valt
 * er niets te centreren. margin-inline en geen text-align: de reset maakt van
 * een img een blok.
 */
.artikelFigureCenter img {
  margin-inline: auto;
}

/*
 * Eén beeld op /wat-kost-een-webshop-laten-bouwen/ (§36) krijgt op samdesign.nl
 * de halve kolom in plaats van een vaste breedte: er staat daar `max-width: 50%`
 * op de img van dat ene blok. Gemeten is dat 327,5 — 492 — 363,5 — 175 op 1440,
 * 1024, 767 en 390px, dus precies de helft op alle vier. Vandaar een percentage
 * en geen maat in het width-attribuut; dat attribuut blijft de bronmaat, zodat
 * de verhouding klopt en de ruimte gereserveerd is (§9).
 */
.artikelFigureHalf img {
  max-width: 50%;
}

/*
 * Twee beelden die naast elkaar mogen staan zolang ze samen passen — 250 + 550
 * past in de 984 van een tablet maar niet in de 655 van een breed scherm, en
 * dan komen ze onder elkaar. Op samdesign.nl staat er `width: auto` op de twee
 * blokken en zijn het flexitems in de kolom; hier is het een eigen rij, zodat
 * de rest van het artikel gewoon een blokstroom blijft.
 *
 * Geen gat ertussen: op samdesign.nl staat het tweede beeld tegen het eerste
 * aan. De 20px onder een figure zorgt voor de ruimte als ze omvouwen.
 */
.artikelFigureRow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.artikelFigureRow .artikelFigure {
  max-width: 100%;
}

/*
 * Het bijschrift van drie van de vier beelden op /responsive-webdesign/. De
 * vierde houdt op samdesign.nl de standaardtypografie van Elementor en staat
 * gecentreerd; die heeft daarom een class in de inhoud en niet deze maat.
 */
.artikelBody figcaption,
.artikelOpening figcaption {
  padding-top: 5px;
  font-size: 13px;
  font-weight: 300;
  line-height: 30px;
}

.artikelBody .artikelCaptionLarge,
.artikelOpening .artikelCaptionLarge {
  font-size: 20px;
  font-weight: 400;
  line-height: 33px;
  text-align: center;
}

/* ==================================================================
   Gerelateerde artikelen
   ------------------------------------------------------------------
   Dezelfde sectie als "Tips & trends" op de homepage, hier als raster
   (components/blogSlider.css). Twee dingen wijken per instantie af en staan
   daarom hier: de kop is 70px in plaats van 100px, en de link staat op de
   onderrand van de inleiding in plaats van op de bovenrand. De lucht om de
   sectie — 150px, onder 768px 40 — is die van het component zelf.

   Onopgesmukt .blogSlider en niet iets met een eigen class erbij: dit bestand
   laadt alleen op een artikelpagina, en daar is die sectie er maar één. Dat het
   ná components/blogSlider.css staat regelt inc/assets.php met een dependency.
   ================================================================== */

@media (min-width: 1025px) {
  .blogSlider .sectionTitle {
    font-size: 70px;
    line-height: 90px;
    letter-spacing: -0.05em;
  }
}

/* Tot 768px: de link zakt hier niet onder de kaarten maar blijft rechts staan,
   op de onderrand van de inleiding zolang hij ernaast past. */
@media (min-width: 768px) {
  .blogSliderHeader > .textLink {
    align-self: flex-end;
  }
}

/* ==================================================================
   Onder 1025px: één kolom
   ================================================================== */

@media (max-width: 1024px) {
  .artikelLayout {
    grid-template-areas:
      'head'
      'meta'
      'open'
      'toc'
      'body';
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
  }

  /*
   * De lijst staat nu in de tekst, met 20px eronder — en alleen op een pagina
   * die met de markering in de inhoud zegt waar dat is. Op
   * /website-vernieuwen/ staat op samdesign.nl geen tweede widget, dus staat de
   * lijst daar onder 1025px niet in de pagina.
   */
  .artikelToc {
    margin-bottom: 20px;
  }

  .artikelLayout:not(:has(.artikelOpening)) .artikelToc {
    display: none;
  }

  /*
   * De kop van de inhoudsopgave loopt hier mee met .sectionTitleSmall en is op
   * tablet dus veel groter dan op desktop. Dat is geen vergissing in onze CSS:
   * op samdesign.nl hangt hij aan dezelfde typografie-instelling als de
   * paginakop, en die staat op 50/55.
   */
  .artikelTocTitle {
    font-size: 50px;
    line-height: 55px;
  }

  .artikelOpening h2,
  .artikelBody h2 {
    font-size: 50px;
    line-height: 55px;
  }
}

/* ==================================================================
   Onder 768px
   ================================================================== */

@media (max-width: 767px) {
  .artikelTocTitle {
    font-size: 35px;
    line-height: 35px;
  }

  .artikelTocItem {
    font-size: 15px;
    line-height: 25px;
  }

  .artikelMetaText {
    font-size: 15px;
    line-height: 25px;
  }

  .artikelOpening h2,
  .artikelBody h2 {
    font-size: 35px;
    line-height: 35px;
  }

  /* Een h4 zakt hier naar 22px; de regelhoogte blijft 40. Zie daar. */
  .artikelOpening h4,
  .artikelBody h4 {
    font-size: 22px;
  }

  .artikelBody .artikelCaptionLarge,
  .artikelOpening .artikelCaptionLarge {
    font-size: 15px;
    line-height: 25px;
  }
}

/*
 * Onder 691px passen de foto en de drie regels niet meer naast elkaar. De
 * eerste regel blijft naast de foto staan; de andere twee nemen elk een hele
 * regel. Die 691 is een eigen grens van samdesign.nl en geen van de twee
 * gebruikelijke — precies dezelfde als op een berichtpagina en bij een begrip,
 * en op beide pagina's dezelfde, ook al zijn de teksten er verschillend lang.
 */
@media (max-width: 690px) {
  .artikelMetaDate,
  .artikelMetaReading {
    flex-basis: 100%;
    margin-right: 0;

    /*
     * En 26px hoog en niet 25. Op samdesign.nl staat de tekst in een blok dat de
     * regelhoogte van de body (1,5 × 17px = 25,5px) als ondergrens houdt; de
     * omhullende van die strut en een regel van 15/25 is 26. Onze tekst is zelf
     * een vak in de flexbox en heeft die ondergrens niet, dus zetten we hem er
     * bij — zonder deze regel loopt alles eronder 1px per regel mis. Dezelfde
     * valkuil als in pages/post.css, met dezelfde uitkomst: de letters staan
     * 4px onder de bovenkant van de regel.
     */
    min-height: 26px;
  }

  /* De regels staan nu onder elkaar, dus is er niets meer te scheiden. */
  .artikelMetaDate .artikelMetaText,
  .artikelMetaReading .artikelMetaText {
    border-left: 0;
    padding-left: 0;
  }
}