/* blog.css, het enige dat de blog bovenop site.css nodig heeft.

   HERSCHREVEN op 14 aug 2026. De eerste versie definieerde een eigen kaartstijl
   (.kaart, .kaarten) terwijl site.css al `card story-card` heeft. Daardoor
   leek de blog op de site zonder het te zijn, en dat was precies Lane's klacht.
   Die klassen zijn hier weg: de sjablonen gebruiken nu de kaarten van de site
   zelf.

   Wat overblijft is klein en echt ontbrekend, nagemeten in site.css:
   - `.lede` bestaat wel, `.lead` niet. Dat was een typfout van mij en is weg.
   - opmaak voor wat uit markdown komt, want de statische pagina's zijn met de
     hand geschreven en hadden nooit een lijst of citaat uit markdown
   - de datumregel onder een titel
   - de bladering onderaan de berichten
*/

/* ---------- de titel van een bericht ----------

   De koppen van de site zijn met de hand geschreven en kort. De vijftien
   blogtitels komen uit Wix en zijn dat geen van beide, en het Nederlands maakt
   er samenstellingen van die niet breken.

   GEMETEN op 14 aug 2026 op 320px, de smalste breedte die deze site moet halen:
   vijf van de vijftien titels lopen buiten beeld. 'Druk' als communicatiemiddel
   het ergst, 114px eroverheen, want 'communicatiemiddel' is één woord van 394px
   in een doos van 280px. site.css laat h1 op `hyphens:manual` staan en dat klopt
   voor een kop die iemand zelf geschreven heeft.

   Afbreken mag hier dus wel, en alleen hier: `.bericht` staat om de detailpagina
   van een blogbericht en om niets anders. `hyphens:auto` werkt omdat de pagina
   `lang="nl"` draagt. `break-word` erachter voor het geval een woord geen enkel
   afbreekpunt heeft, want dan is een lelijke breuk nog altijd beter dan een
   halve titel. Allebei springen ze pas aan als het echt niet past. */

.bericht .page-hero h1{
  hyphens:auto;
  -webkit-hyphens:auto;
  overflow-wrap:break-word;
}

/* ---------- de tekst van een bericht ---------- */

/* De maat van de site, niet een eigen maat.

   Stond op 44rem. GEMETEN in de browser op 14 aug 2026, /de-spiegel naast een
   bericht op 1280px: een alinea daar is 630px breed, want site.css zet
   `p{max-width:var(--measure)}` en --measure is 66ch. 44rem is 704px, dus de
   lijsten en de koppen van een bericht staken 74px buiten de alinea's uit
   terwijl ze op een filosofiepagina precies uitlijnen.

   Met --measure meet de doos exact hetzelfde als de alinea erin: 630px, beide. */
.bericht__tekst{max-width:var(--measure)}
.bericht__tekst > * + *{margin-top:1em}

.bericht__tekst ul,
.bericht__tekst ol{
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.bericht__tekst ol{padding-left:1.4rem}
.bericht__tekst ul{list-style:none;padding-left:0}
.bericht__tekst ul > li{position:relative;padding-left:1.15rem}
.bericht__tekst ul > li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:.42rem;
  height:1px;
  background:var(--olive);
  /* een streepje en geen bolletje: de site gebruikt nergens ronde vormen */
}

/* Ingesprongen subpunten. Patrick gebruikt ze in 'Leiderschap met paarden':
   vijf pijlers met elk twee punten eronder. Tien subpunten die de eerste
   import plat sloeg tot een enkele lijst, waardoor de vijf pijlers hun eigen
   inhoud kwijt waren. Het streepje wordt hier een stip zodat de twee niveaus
   uit elkaar te houden zijn zonder een tweede kleur. */
.bericht__tekst li > ul,
.bericht__tekst li > ol{margin-top:.45rem;padding-left:1.15rem}
.bericht__tekst li > ul > li::before{
  width:3px;
  height:3px;
  top:.66em;
  background:var(--ink-soft);
}

/* De aanhef van een lijstpunt, 'Zelfregulatie:' en zo. Die staat in de bron
   vet en soms ook cursief; op deze site doet de kleur dat werk, want vet plus
   cursief in een leestekst is twee keer roepen. */
.bericht__tekst li > strong:first-child,
.bericht__tekst li > em > strong:first-child{color:var(--ink)}
.bericht__tekst li em{font-style:normal}

.bericht__tekst h2{font-size:var(--step-2);margin-top:1.6em}
.bericht__tekst h3{font-size:var(--step-1);margin-top:1.4em}

/* ---------- de uitgelichte zin ----------

   Patrick licht zinnen uit door ze midden uit te lijnen en vet te zetten.
   Gemeten in de Wix-bron op 14 aug 2026: 18 van die zinnen over de vijftien
   berichten, en de eerste import maakte er allemaal gewone alinea's van. Dat
   was Lane's klacht: "de quote die anders is vormgegeven dan lopende tekst".

   De vorm hier is NIET die van Wix maar die van de site: `.pullquote` in
   site.css bestaat al precies hiervoor, "uitgelichte zin midden in een tekst",
   met het hek als kantlijn en de displayletter. Gebruik het ontwerp, maak het
   niet na.

   Deze regels moeten gelijk blijven aan `.pullquote`. `_controleer.py` meet
   dat, punt 7, en wordt rood zodra er een uit de pas loopt. */
.bericht__tekst blockquote{
  margin:clamp(2rem,4vw,3.5rem) 0;
  padding-left:clamp(1rem,2.5vw,2rem);
  border-left:0;
  position:relative;
  max-width:min(34rem,92%);
}
.bericht__tekst blockquote::before{
  content:"";
  position:absolute;
  left:0;
  top:.35em;
  bottom:.35em;
  width:5px;
  background:linear-gradient(90deg,var(--olive) 0 1px,
    transparent 1px 4px,var(--olive) 4px 5px);
}
.bericht__tekst blockquote p{
  font-family:var(--display);
  font-size:var(--step-2);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0;
  max-width:none;
}
.band--deep .bericht__tekst blockquote p{color:var(--ink)}
.band--night .bericht__tekst blockquote p{color:var(--paper)}
.band--night .bericht__tekst blockquote::before{
  background:linear-gradient(90deg,var(--olive-bright) 0 1px,
    transparent 1px 4px,var(--olive-bright) 4px 5px);
}

.bericht__tekst img{max-width:100%;height:auto}
.bericht__tekst a{overflow-wrap:anywhere}

/* ---------- datum en auteur ---------- */

.bericht__meta{
  font-size:var(--step--1);
  color:var(--ink-soft);
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin:0;
}
.bericht__meta span::before{content:"\00b7\00a0"}
.page-hero .bericht__meta{margin-top:.6rem}
.band--night .bericht__meta{color:var(--sand)}

/* De kaarten van de site hebben geen datumregel, dus die krijgt hier zijn
   plaats binnen story-card__text zonder aan de rest te raken. */
.story-card__text .bericht__meta{margin-bottom:.35rem}

/* ---------- bladeren ----------

   Opgezet tegen de eisen uit het onderzoek naar pagineringspatronen:
   raakvlakken van minstens 44px, de huidige pagina nooit alleen aan kleur
   herkenbaar, en een leesbare stand eronder. De eerste versie was twee
   knoppen naast elkaar en dat trok op niets.

   Bewust GEEN carrousel met javascript. Deze bolletjes zijn echte links met
   een eigen adres, dus ze werken zonder javascript, ze zijn deelbaar, en
   een zoekmachine bereikt alle vijftien berichten. Een carrousel kan dat
   geen van drieën.
*/

/* Een raster van drie kolommen en niet een gecentreerde rij.

   GEMETEN op 14 aug 2026, avond, op 1280px: de nummers stonden 243px links van
   het midden van de pagina. Met `justify-content:center` op een flexrij wordt de
   HELE groep gecentreerd, pijl inbegrepen, en op pagina 1 is er alleen een
   pijl naar rechts. De nummers schuiven dan precies de breedte van die ene pijl
   naar links, en per pagina een ander eind.

   Met vaste kolommen staan de nummers altijd in het midden, of er nu nul, een
   of twee pijlen naast staan. Dat is wat Lane vroeg: "de pagina selecties
   gecentreerd op de pagina".

   In dezelfde meting stond "15 berichten" NAAST de nummers in plaats van
   eronder: `flex-basis:100%` mag krimpen en paste dus nog op dezelfde regel.
   Als eigen rasterrij over alle kolommen kan dat niet meer. */
.pager{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  row-gap:.4rem;
  margin-top:var(--gap);
}
.pager__pijl--vorige{grid-column:1;justify-self:end}
.pager__lijst{grid-column:2}
.pager__pijl--volgende{grid-column:3;justify-self:start}

.pager__lijst{
  display:flex;
  align-items:center;
  gap:.35rem;
  list-style:none;
  margin:0;
  padding:0;
}

/* 44px raakvlak, ook al ziet de stip er kleiner uit */
.pager__stip,
.pager__pijl{
  display:grid;
  place-items:center;
  min-width:44px;
  min-height:44px;
  font-family:var(--text);
  font-size:var(--step--1);
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
  text-decoration:none;
  border-radius:2px;
  transition:color .2s ease, background-color .2s ease, border-color .2s ease;
}

/* de stip zelf, een klein vierkant binnen dat raakvlak, in de lijn van de
   site: geen ronde vormen, die gebruikt de site nergens */
.pager__stip{position:relative}
.pager__stip::before{
  content:"";
  position:absolute;
  inset:calc(50% - 11px);
  border:1px solid var(--line);
  background:transparent;
  transition:inherit;
}
.pager__stip > *{position:relative}

.pager__stip:hover::before,
.pager__stip:focus-visible::before{border-color:var(--olive)}
.pager__stip:hover{color:var(--ink)}

/* huidige pagina: donkerder vlak EN vette tekst, dus niet alleen kleur */
.pager__stip.is-nu{
  color:var(--paper);
  font-weight:600;
  cursor:default;
}
.pager__stip.is-nu::before{
  background:var(--olive);
  border-color:var(--olive);
}

.pager__pijl{
  font-size:var(--step-0);
  color:var(--ink-soft);
}
.pager__pijl:hover{color:var(--olive)}

.pager__stand{
  grid-column:1 / -1;
  text-align:center;
  margin:.4rem 0 0;
  font-size:var(--step--2);
  color:var(--ink-soft);
  /* site.css zet `p{max-width:var(--measure)}` op ELKE alinea, en dat is hier
     425px in een rasterrij van 1152. De tekst werd dan netjes gecentreerd in die
     425px en stond dus links op de pagina, 363px naast het midden. Gemeten op
     14 aug 2026. Een leesmaat hoort bij lopende tekst, niet bij een telling. */
  max-width:none;
}

/* op de donkere banden, mocht de bladering daar ooit staan */
.band--night .pager__stip,
.band--night .pager__pijl,
.band--night .pager__stand{color:var(--sand)}
.band--night .pager__stip::before{border-color:var(--line-night)}
.band--night .pager__stip.is-nu{color:var(--night)}
.band--night .pager__stip.is-nu::before{background:var(--sand);border-color:var(--sand)}

@media (prefers-reduced-motion:reduce){
  .pager__stip,.pager__pijl,.pager__stip::before{transition:none}
}

/* ---------- klein en ontbrekend ---------- */

.skiplink{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--night);
  color:var(--paper);
  padding:.6rem 1rem;
  z-index:100;
}
.skiplink:focus{left:0}