/* ============================================================
   Nachtploeg - onafhankelijke dagsamenvatting
   ------------------------------------------------------------
   Ontwerptaal: "overworld bij daglicht". De site is gebouwd uit
   blokken, net als het spel waar hij over gaat. Licht als basis,
   verzadigde kleur in de vlakken, en diepte uit vlakken in plaats
   van uit wazigheid.

   DRIE REGELS, EN ZE GELDEN OVERAL

   1. Een vlak is een vlak, geen doos in een doos. Tot 3 oktober
      kreeg elk paneel, elke tegel en elke knop een harde omlijning
      van 2 a 3 px in bijna-zwart plus een ondervlak van 4 px. Op
      een telefoon van 390 px stonden daar tientallen rechthoeken
      in rechthoeken, en de pagina las als een plattegrond. Het
      recept is nu: een zachte lijn (--rand-k), een ronding van
      --r, en een zachte schaduw (--hef) op alles wat je aantikt.
      De holle tegenhanger - een slot waar iets in ligt - krijgt
      --hol in plaats van --hef.

      Wat blijft: het raster, de verzadigde kleurvlakken, de
      blokmaten. Het mag blokkig aanvoelen; het mag niet lezen als
      een screenshot van een 8-bit spel.

   2. Wat je indrukt zakt ook echt in - maar een pixel of twee, niet
      vier. Een knop, een tegel of een kaart verliest bij :active
      zijn schaduw en schuift die afstand naar beneden. Dat is nog
      steeds de hele tactiele woordenschat.

   3. Kleur is datacodering, nooit decoratie:
        noord   = lapisblauw
        zuid    = goud
        signaal = redstone-rood, uitsluitend voor live en vandaag
        diamant = cyaan, uitsluitend voor wat er net bij kwam
      Gras, steen en eik dragen de site zelf (balk, knoppen,
      randen) en betekenen dus nooit iets over de data. Zo kan de
      pagina vrolijk zijn zonder dat de codering vervuilt.

   4. Alles wat je aantikt is minstens --tik (44 px) hoog en breed,
      heeft zichtbare hover EN focus, en komt uit dezelfde
      spatieringsladder (--s1 .. --s6). Een afstand die niet uit
      die ladder komt is een fout, geen smaak.

   De afgeschuinde hoek rechtsonder was het teken voor "hier verlaat
   je de site". Hij is weg: met een ronding op elk vlak werd het een
   derde hoekvorm naast twee andere, en een afgesneden hoek op een
   foto van een gezicht leest als een renderfout. Dat een tegel naar
   buiten leidt staat er al: het is een link met een naam.
   ============================================================ */

/* ---------- 1. Lettertypen (zelf gehost, geen externe aanroep) ---------- */

/*
   DE OMKERING, EN WAAROM

   Tot 3 oktober droeg Silkscreen bijna alles: de navigatie, elke sectiekop,
   elk etiket, elke knop, elk cijferblok. Dat las slecht en het oogde goedkoop
   - een rasterletter over een hele pagina is geen knipoog meer naar het spel,
   het IS het spel naspelen, en dit publiek kent het echte spel. De verdeling
   is sindsdien omgedraaid:

     Rubik       draagt de site        navigatie, sectiekoppen, etiketten,
                                       knoppen, cijfers, en alle leestekst
     Silkscreen  is een accent         precies twee plekken, zie hieronder
     Newsreader  spreekt papier        uitsluitend het corpus van /krant/

   Silkscreen draagt nog twee dingen, en het blijven er twee: het woordmerk
   in de kop (.merk) en het bordje in de muur op de voorpagina (.muur span).
   Allebei zijn het geen zinnen maar beeldmerken, allebei staan ze op een
   vast vlak, en allebei zijn ze er juist om de herkomst van de site te
   tonen. Zet hem nergens anders terug: een etiket, een knop of een kop
   leest in Rubik aantoonbaar beter, en dat was de hele klacht.

   Silkscreen is een echte bitmapletter: hij staat op hele pixels en wordt
   pap op een halve maat. Daarom staan die twee plekken op een vaste
   px-waarde (20 en 10) en niet op een rem-maat. Dat is de enige plek op
   deze site waar een vaste px-maat goed is.

   Newsreader blijft alleen voor de krantpagina. Dat is een gedrukt vel en
   geen scherm; daar hoort een leesschreef. Omdat geen enkele andere pagina
   hem aanroept, wordt hij daar ook niet gedownload.
*/

@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/silkscreen-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/rubik-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/newsreader-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Tokens ---------- */

/*
   De lichte stand is de stand waarvoor ontworpen is: buiten, overdag.
   De donkere stand is dezelfde wereld na zonsondergang - nachtblauw, niet
   zwart - want een site die Nachtploeg heet mag een nachtstand hebben, maar
   grijs op bijna-zwart was precies wat hier weg moest.

   Elke kleur bestaat in twee soorten omdat ze twee banen hebben:
     --noord       inkt: tekst en lijnen, haalt contrast op de achtergrond
     --noord-vlak  verf: een vlak van een paar honderd vierkante pixels
   Zonder die splitsing moet een token allebei kunnen, en dan wordt het goud
   van Zuid ofwel onleesbaar als tekst ofwel modderig als vlak.
*/

:root {
  color-scheme: light dark;

  /* De wereld.
     --bg is de grond waar je op staat en waar tekst op ligt. --lucht is
     de hemel en komt alleen boven de vouw en in de banden van het bord.
     Die twee niet omdraaien: leestekst op lucht leest als een vel dat
     nog niet af is, en dat was precies de staat waar dit uit komt. */
  --bg:      #eef1e2;   /* grond: het leesvlak */
  --lucht:   #cfe3f5;   /* hemel: alleen de kop en de banden van het bord */
  --bg-2:    #f7f9f0;   /* paneel: het vlak waar een blok op ligt */
  --bg-3:    #e3e9d4;   /* paneel, een trap dieper */
  --line:    #bcc8ac;
  --line-2:  #93a283;
  --kader:   #2f3b2a;   /* de harde omlijning van een blok */
  --fg:      #18201a;
  --fg-2:    #414e3e;
  --fg-3:    #5a6755;
  --leeg:    #c6d2b9;   /* een leeg slot */

  /* Datakleuren: inkt en verf */
  --noord:       #1f5cb8;
  --noord-vlak:  #4a86e0;
  --noord-zacht: #c3d8f5;
  --zuid:        #8a5d00;
  --zuid-vlak:   #efb52c;
  --zuid-zacht:  #f6e1ab;
  --signal:      #bf2718;
  --signal-vlak: #cf3124;   /* draagt wit: 5,1:1 */
  --diamant-vlak:#2ec4d4;   /* uitsluitend: wat er in de laatste ronde bij kwam */

  /* De site zelf: nooit datacodering.
     --gras draagt witte tekst (balk, knoppen, etiketten) en is daarom
     bewust donkerder dan de eerste proef: wit op #4e9a2f haalde 3,5:1 en
     moest minstens 4,5. Nu 5,0:1. --gras-l is uitsluitend de lichtvang
     aan de bovenrand en draagt nooit tekst. */
  --gras:    #3f7d22;
  --gras-d:  #2b5717;
  --gras-l:  #76c24c;
  --eik:     #7a4e24;

  --display: 'Rubik', ui-sans-serif, system-ui, sans-serif;
  --lees:    'Rubik', ui-sans-serif, system-ui, sans-serif;
  --mono:    'Rubik', ui-sans-serif, system-ui, sans-serif;
  /* Etiketten, knoppen, cijfers, sectiekoppen: ook Rubik, maar met een
     eigen baan - zwaarder, kleiner en vaak in kapitalen, zodat UI-taal en
     leestekst uit elkaar blijven zonder er een tweede letter bij te halen. */
  --label:   'Rubik', ui-sans-serif, system-ui, sans-serif;
  /* Silkscreen. Draagt nog twee dingen: het woordmerk en het muurbordje. */
  --pix:     'Silkscreen', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --krant:   'Newsreader', Georgia, 'Times New Roman', serif;

  --maat:    1180px;
  --rail:    124px;
  --rand:    clamp(1rem, 4vw, 3rem);
  --rand-l:  max(var(--rand), env(safe-area-inset-left));
  --rand-r:  max(var(--rand), env(safe-area-inset-right));

  /* DE OMLIJNING, EN WAAROM ER TWEE ZIJN.
     --kader is bijna zwart en blijft het VLAK onder witte tekst: het
     woordmerkbordje, het Short-merkje, de duur op een clip. Als LIJN was
     datzelfde bijna-zwart overal te hard: negentig vakjes, veertig tegels en
     een stuk of twintig panelen met een harde omtrek van twee pixels maakten
     van elke pagina een plattegrond. De lijn is nu --rand-k: hij volgt het
     paneel in plaats van erop te schreeuwen, en wat echt een grens is (de
     bovenrand van een blok, de kantkleur van een tegel) komt van de kleur en
     van de maat, niet van een zwarte streep. */
  --rand-k:  #b3c0a5;
  --rand-k2: #94a486;   /* iets sterker, waar een rand wel moet dragen */
  --rand-op: #6f8060;   /* dezelfde lijn, maar aangewezen */

  /* De ronding. Een blokkenspel heeft rechte hoeken, maar een telefoon vol
     rechthoeken-in-rechthoeken leest als een foutmelding. Twee maten: een
     kaart en een chip. Meer dan twee en het wordt willekeur.

     Dit is geen afscheid van de vormtaal. Het raster blijft, de kleurcodering
     blijft, de vlakken blijven verzadigd - maar de omtrek van een kaart hoeft
     niet mee te schreeuwen. Twaalf pixels is precies genoeg om een vlak als
     vlak te lezen en te weinig om als knop uit een ander ontwerp te lezen. */
  --r:       12px;
  --r-s:     8px;

  /* De spatiëringsladder. Elke afstand op deze site komt hieruit; zo staat
     de ene kop niet 1,1rem van zijn blok en de andere 0,9. */
  --s1:      0.25rem;
  --s2:      0.5rem;
  --s3:      0.75rem;
  --s4:      1rem;
  --s5:      1.5rem;
  --s6:      2.25rem;

  /* Diepte. Eén zachte schaduw in plaats van een hard ondervlak van vier
     pixels onder elk element. Hij zit alleen op wat je kunt aantikken. */
  --hef:     0 1px 2px rgb(16 24 16 / 0.07), 0 4px 10px rgb(16 24 16 / 0.08);
  --hef-op:  0 2px 4px rgb(16 24 16 / 0.09), 0 10px 22px rgb(16 24 16 / 0.13);
  /* De holle tegenhanger: iets waar iets in ligt in plaats van op. */
  --hol:     inset 0 1px 2px rgb(16 24 16 / 0.13);

  /* De tikmaat. Niets wat je met een duim moet raken komt hieronder. */
  --tik:     44px;

  /* Stappen in plaats van vloeiend waar het kan: een blok dat inzakt doet
     dat in een tik, niet in een veeg. */
  --snel:    90ms steps(2, end);
  --zacht:   150ms cubic-bezier(0.32, 0.72, 0, 1);
  --traag:   420ms cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #1b2740;   /* grond bij nacht */
    --lucht:   #101b32;   /* nachtlucht, donkerder dan de grond */
    --bg-2:    #26344e;
    --bg-3:    #2f3e5b;
    --line:    #3a4b69;
    --line-2:  #56688a;
    --kader:   #0d1626;
    --fg:      #eef3fa;
    --fg-2:    #bac7da;
    --fg-3:    #9aaac2;
    --leeg:    #2d3d5a;

    --noord:       #8fbdf5;
    --noord-vlak:  #4a86e0;
    --noord-zacht: #2c436b;
    --zuid:        #f3c75c;
    --zuid-vlak:   #efb52c;
    --zuid-zacht:  #4a3f1d;
    --signal:      #ff8c80;   /* lichter dan #ff6a5c: die haalde 3,8:1 op de dagbalk */
    --signal-vlak: #cf3124;
    --diamant-vlak:#2ec4d4;

    /* Gras krijgt in de nachtstand geen eigen waarde. Het droeg hier eerst
       een tint lichter (#46892a) omdat dat beter bij een donkere pagina
       oogde, maar wit haalde daarop 4,3:1 en de eis is 4,5. De dagwaarde
       haalt 5,0:1 in beide standen, dus die erft gewoon door. */
    --eik:     #8a5a2b;

    /* De zachte lijn en de zachte schaduw hadden geen nachtwaarde en erfden
       dus de dagwaarde door: een lichtgroene lijn op nachtblauw, en een
       schaduw in bijna-zwart-op-zwart die je nooit zag. Bij nacht komt
       diepte van een lichtere rand en van een zwaardere schaduw. */
    --rand-k:  #3d5074;
    --rand-k2: #56688a;
    --rand-op: #7c90b4;
    --hef:     0 1px 2px rgb(0 0 0 / 0.34), 0 4px 12px rgb(0 0 0 / 0.30);
    --hef-op:  0 2px 5px rgb(0 0 0 / 0.40), 0 12px 26px rgb(0 0 0 / 0.42);
    --hol:     inset 0 1px 3px rgb(0 0 0 / 0.38);
  }
}

/* ---------- 3. Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }

a, button, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--lees);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

/*
   HET VLAK, EN HET SLOT

   Er staat hier met opzet geen hulpklasse voor. De naam .blok was al bezet
   op de dagpagina (een inhoudelijk blok met .blok-kop), en een tweede
   betekenis op dezelfde naam is precies hoe een stylesheet onbetrouwbaar
   wordt. Elke regel schrijft zijn eigen vlakken dus zelf uit. Het recept
   staat hier, en het is overal hetzelfde:

     vlak (iets dat uitsteekt, een kaart of een paneel)
       background: var(--bg-2);
       border: 1px solid var(--rand-k);
       border-radius: var(--r);
       box-shadow: var(--hef);

     slot (iets dat hol is, waar iets in ligt)
       background: var(--leeg);
       border: 1px solid var(--rand-k);
       border-radius: var(--r-s);
       box-shadow: var(--hol);

     knop / chip (klein, aantikbaar)
       border-radius: var(--r-s);
       min-height: var(--tik);
       box-shadow: var(--hef);

     ingedrukt (bij :active, op alles wat je aantikt)
       box-shadow: none;            schaduw weg
       transform: translateY(2px);  en die afstand omlaag

   De oude regel "nul blur, nergens" is hier bewust losgelaten. Diepte uit
   een hard ondervlak van vier pixels werkt op een enkel element en wordt
   een trillend raster zodra er dertig naast elkaar staan; dat was precies
   wat er mis was. De schaduw is nu zacht, laag en overal dezelfde twee
   tokens, zodat hij verdieping geeft zonder zich te laten zien.
*/

.omhulsel { max-width: var(--maat); margin-inline: auto; padding-left: var(--rand-l); padding-right: var(--rand-r); }

a { color: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 3px;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.overslaan {
  position: absolute; left: var(--rand); top: 0;
  transform: translateY(-120%);
  z-index: 10;
  background: var(--kader); color: #fff;
  border: 2px solid var(--gras-l);
  padding: 0.6rem 1rem;
  font: 600 0.8125rem/1 var(--label);
  text-decoration: none;
  transition: transform var(--snel);
}
.overslaan:focus { transform: translateY(0); }

/* Een etiket is de site die iets benoemt. Het onderscheid met leestekst komt
   van gewicht, maat en kapitalen - niet meer van een tweede lettersoort. De
   extra letterafstand is daar onderdeel van: kapitalen zonder spatiering
   lopen op deze maat aan elkaar vast. */
.etiket {
  font: 600 0.75rem/1.45 var(--label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* ---------- 4. Kop van de site ---------- */

/*
   De balk is een graszode: groen bovenvlak, aarde eronder. Dat is het enige
   plek waar de site een letterlijk blok uit het spel natekent, en hij doet
   het zonder textuur - twee kleuren en een harde grens zijn genoeg, want
   daar bestaat een grasblok uit zodra je er recht tegenaan kijkt.
*/
.plafond {
  background: var(--gras);
  border-bottom: 6px solid var(--eik);
  box-shadow: inset 0 3px 0 var(--gras-l);
}
.plafond > .omhulsel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-block: 0.85rem;
}

/* Het woordmerk hangt aan een donker bordje in de graszode. Dat is niet
   alleen een vorm die bij het spel hoort - het lost ook twee meetbare
   problemen op: wit op gras haalde 3,5:1 en de gouden punt 1,9:1. Op dit
   bordje halen ze 11,7:1 en 6,3:1. */
.merk {
  font-family: var(--pix);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-decoration: none;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  min-height: var(--tik);
  color: #fff;
  background: var(--kader);
  border-radius: var(--r-s);
  box-shadow: var(--hef);
  padding: var(--s2) var(--s4);
}
.merk span { color: var(--zuid-vlak); }

.ondertitel {
  font: 400 0.8125rem/1.4 var(--lees);
  color: #fff;
  margin: 0;
  flex: 1 1 14rem;
}

/* De navigatie was 11px pixelletter in een vak van 26 px hoog. Nu Rubik in
   een vak van --tik: vier items passen op 390 px nog steeds op een eigen
   regel onder het woordmerk, en elk item is een duim breed. */
.hoofdmenu { display: flex; gap: var(--s1); margin-left: auto; }
.hoofdmenu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tik);
  font: 600 0.875rem/1 var(--label);
  text-decoration: none;
  color: #fff;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-s);
  transition: background var(--snel), box-shadow var(--snel);
}
.hoofdmenu a:hover { background: var(--gras-d); }
.hoofdmenu a[aria-current='page'] { background: var(--gras-d); }

/* ---------- 5. De dagbalk: 22 dagen, altijd zichtbaar ---------- */
/* Hoogte van elke streep = aantal verhalen die dag. De balk is
   tegelijk navigatie, kalender en seizoensgrafiek.

   Sinds de verbouwing is een streep geen lijn meer maar een stapel: hij
   staat in een slot en groeit erin omhoog. Dat leest beter dan een haarlijn
   op een lichte ondergrond, en het is dezelfde vorm als het rooster en de
   seizoensklok op het bord - een familie, geen drie uitvindingen.          */

.dagbalk {
  border-bottom: 1px solid var(--rand-k);
  background: var(--bg-3);
  padding-block: var(--s4) var(--s3);
}

/* De dagen voor de start krijgen een eigen groepje, met een echte
   scheiding ervoor: de aanloop is geen seizoensdag. */
.dagbalk-rij { display: flex; align-items: stretch; gap: clamp(0.75rem, 2vw, 1.5rem); }
.groep-aanloop { flex: 0 0 auto; }
.groep-seizoen { flex: 1 1 auto; min-width: 0; }
.dagbalk-rij .groep-aanloop + .groep-seizoen {
  border-left: 1px solid var(--rand-k2);
  padding-left: clamp(0.75rem, 2vw, 1.5rem);
}

.dagbalk ol {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0 clamp(2px, 0.5vw, 5px);
}
.dagbalk .seizoen { grid-template-columns: repeat(22, minmax(0, 1fr)); }
/* De aanloopdagen mogen niet breder uitvallen dan een seizoensdag. */
.dagbalk .aanloop { grid-auto-columns: clamp(14px, 3.4vw, 34px); }
.dagbalk .aanloop .streep .nr { font-size: 9px; }
.dagbalk-voet .aanloop-label { grid-column: span 2; }

.streep {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
  padding-bottom: 0.1rem;
}

/* De staaf staat in een slot en vult het van onderaf.

   De rand van een leeg slot is met opzet licht. Met --line-2 op alle 22
   werd de balk een grijze kam die zwaarder woog dan de dagen die er wel
   waren; een dag met inhoud haalt zijn rand nu zelf op. */
.staaf {
  position: relative;
  display: block;
  height: 34px;
  background: var(--leeg);
  border: 1px solid var(--rand-k);
  border-radius: 4px;
  box-shadow: var(--hol);
  overflow: hidden;
}
.streep[data-kant] .staaf { border-color: var(--line-2); }
.staaf::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100%;
  transform: scaleY(var(--h, 0));
  transform-origin: bottom center;
  background: var(--line-2);
  transition: background var(--snel);
}
a.streep:hover .staaf { border-color: var(--kader); }

.streep[data-kant='noord'] .staaf::after { background: var(--noord-vlak); }
.streep[data-kant='zuid']  .staaf::after { background: var(--zuid-vlak); }
.streep[data-vandaag]      .staaf::after { background: var(--signal-vlak); }
.streep[data-vandaag] .staaf { border-color: var(--signal); }

.streep .nr {
  font: 600 0.6875rem/1 var(--label);
  text-align: center;
  color: var(--fg-2);
}
.streep[data-vandaag] .nr { color: var(--signal); }
a.streep:hover .nr { color: var(--fg); }
@media (max-width: 759px) { .streep .nr { display: none; } }

.streep[data-toekomst] { cursor: default; }

@media (prefers-reduced-motion: no-preference) {
  /* De 22 staven groeien bij het laden, van dag 1 naar dag 22. Vertelt in
     900 ms hoe ver het seizoen is. */
  /* --traag bevat zelf al de easing; er nog een achter zetten maakt de
     hele declaratie ongeldig en dan animeert er niets. */
  .dagbalk-animeer .staaf::after {
    animation: groei var(--traag) backwards;
    animation-delay: calc(var(--i) * 22ms);
  }
  @keyframes groei { from { transform: scaleY(0); } }
}

.voet {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0 clamp(2px, 0.5vw, 5px);
  margin: 0.4rem 0 0;
}
.voet.weken { grid-template-columns: repeat(22, minmax(0, 1fr)); }
.voet span {
  font: 600 0.6875rem/1 var(--label);
  text-transform: uppercase;
  color: var(--fg-2);
  border-top: 1px solid var(--rand-k);
  padding-top: var(--s2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voet.weken span { grid-column: span 7; }
.voet.weken span:last-child { grid-column: span 8; }

/* ---------- 6. De dagkop ---------- */

.dagkop { padding-block: clamp(1.5rem, 3.5vw, 2.5rem) 0; }

.dagkop-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rand-k2);
}
.dagnummer {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg);
}
.dagnummer small {
  display: block;
  font: 600 0.6875rem/1 var(--label);
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 0.45rem;
}
.dagdatum { font: 400 0.875rem/1.45 var(--lees); color: var(--fg-2); margin: 0; }
.dagstempel { font: 400 0.8125rem/1.45 var(--lees); color: var(--fg-3); margin: 0; }
@media (min-width: 760px) { .dagstempel { margin-left: auto; text-align: right; } }

.nepdata p { font-size: 0.6875rem; }
@media (min-width: 760px) { .nepdata p { font-size: 0.75rem; } }

/* De datamotor levert een hele zin als kop, geen krantenkop van vijf woorden.
   De schaal volgt dus de lengte, anders wordt een lange kop een muur.
   Dit is data, dus leesletter en geen pixelletter: een zin van honderdvijftig
   tekens in Silkscreen zou niemand uitlezen. */
h1.dagtitel {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1.dagtitel[data-lengte='kort']   { font-size: clamp(1.9rem, 5.2vw, 3.5rem); max-width: 19ch; }
h1.dagtitel[data-lengte='middel'] { font-size: clamp(1.75rem, 3.8vw, 2.6rem); max-width: 26ch; }
h1.dagtitel[data-lengte='lang']   { font-size: clamp(1.5rem, 2.7vw, 2.05rem); max-width: 34ch; line-height: 1.22; }

.lead {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.55;
  color: var(--fg);
  max-width: 46ch;
  margin: 1.5rem 0 0;
}

/* ---------- 7. Dekkingsgrafiek: 90 vakjes, één per creator ---------- */

.dekking {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rand-k);
  border-bottom: 1px solid var(--rand-k);
  padding-block: var(--s6);
  display: grid;
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) {
  .dekking { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); align-items: start; }
}

.dekking-tekst p { margin: 0.6rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-2); max-width: 44ch; }

/* Het dekkingscijfer staat achter een streep, onder een eigen kop. Die twee
   werden door elkaar gehaald: "Creators in beeld 16 / 90" las als "deze site
   volgt maar 16 van de 90", terwijl het bedoeld was als "16 plaatsten vandaag
   iets". Het dagcijfer heeft nu geen noemer meer, en de dekking heeft een
   eigen groep met een eigen naam. Het kleinere cijfer houdt ze ook visueel
   uit elkaar. */
.volgen {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rand-k);
}
.dekking-tekst .volgen-cijfer {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--fg);
  max-width: 38ch;
}
.volgen-cijfer b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.625rem;
  letter-spacing: -0.02em;
  margin-right: 0.3em;
}
.dekking-tekst .volgen > p + p { margin-top: 0.55rem; font-size: 0.875rem; color: var(--fg-3); }

.raster-noot {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--fg-3);
  max-width: 62ch;
}

/* De cijfers van de dag: elk in zijn eigen blok, net als op het bord. */
.cijfers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin: var(--s4) 0 0;
}
@media (min-width: 560px) {
  .cijfers { grid-template-columns: repeat(4, minmax(0, 11rem)); justify-content: start; }
}
.cijfer {
  margin: 0;
  padding: var(--s3) var(--s4) var(--s4);
  background: var(--bg-2);
  border: 1px solid var(--rand-k);
  border-radius: var(--r);
  box-shadow: var(--hef);
}
.cijfer dt { font: 600 0.6875rem/1.3 var(--label); text-transform: uppercase; color: var(--fg-2); }
.cijfer dd {
  margin: 0.3rem 0 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.625rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.cijfer dd span { font-family: var(--lees); font-size: 0.8125rem; font-weight: 400; color: var(--fg-3); }

.rasters { display: grid; gap: 1.1rem clamp(1rem, 2.5vw, 2rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 540px) { .rasters { grid-template-columns: 1fr 1fr; } }
.rasters h3 {
  font: 600 0.75rem/1.4 var(--label);
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0 0 0.5rem;
}
.rasters h3 b { color: var(--fg); font-weight: 400; }

/* Hetzelfde voorraadvenster als op het bord: een paneel met slots. */
.raster {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: 4px;
  padding: var(--s2);
  background: var(--bg-2);
  border: 1px solid var(--rand-k);
  border-radius: var(--r);
  box-shadow: var(--hef);
}
/* Vier standen per creator. De ramp loopt van vol naar leeg, en gevuld
   tegenover omlijnd verschilt ook zonder kleur - dat is de reden dat
   "alleen op Twitch" een omlijnd vakje in de kleur van zijn kant is en
   niet een derde tint blauw of geel:

     gezien  vol in de kleur van zijn kant   plaatste een video
     stream  omlijnd in die kleur            alleen op Twitch te zien
     stil    omlijnd grijs                   volgen we, niets gezien
     los     vol donkergrijs                 volgen we niet                */
.raster i {
  display: block;
  aspect-ratio: 1;
  background: var(--leeg);
  border-radius: 2px;
  box-shadow: var(--hol);
}
.raster i[data-stand='stil'] { background: none; border: 2px solid var(--line-2); box-shadow: none; }
.raster i[data-kant='noord'] { background: var(--noord-vlak); box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.35); }
.raster i[data-kant='zuid']  { background: var(--zuid-vlak); box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.4); }
.raster i[data-stand='stream'] { background: none; border: 2px solid var(--line-2); box-shadow: none; }
.raster i[data-stand='stream'][data-kant='noord'] { border-color: var(--noord-vlak); }
.raster i[data-stand='stream'][data-kant='zuid']  { border-color: var(--zuid-vlak); }

.legenda li[data-stand='stil'] b { background: none; border: 2px solid var(--line-2); }
.legenda li[data-stand='gezien'] b { background: var(--noord-vlak); }
.legenda li[data-stand='stream'] b { background: none; border: 2px solid var(--noord-vlak); }

.legenda { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.legenda li { display: flex; align-items: center; gap: 0.45rem; font: 600 0.6875rem/1.3 var(--label); color: var(--fg-2); }
.legenda b { display: block; width: 12px; height: 12px; border-radius: 2px; background: var(--leeg); }
.legenda li[data-kant='noord'] b { background: var(--noord-vlak); }
.legenda li[data-kant='zuid'] b  { background: var(--zuid-vlak); }

/* ---------- 8. De meridiaan: Noord links, Zuid rechts ---------- */

.verhalen {
  list-style: none;
  margin: clamp(3rem, 7vw, 5rem) 0 0;
  padding: 0;
  position: relative;
}

.verhaal {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 0 1rem;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px solid var(--rand-k);
}
.verhaal:last-child { border-bottom: 1px solid var(--rand-k); }

@media (min-width: 900px) {
  .verhalen::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: calc(var(--rail) / 2);
    border-left: 1px solid var(--rand-k);
  }
  .verhaal { grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 clamp(1.5rem, 3vw, 3rem); }
}

/* -- de markering in de rail -- */
.rail { position: relative; }

.rail b {
  display: block;
  position: absolute;
  top: 0.72em;
  height: 6px;
  width: 100%;
  background: var(--line-2);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.3);
}
.verhaal[data-kant='noord'] .rail b { background: var(--noord-vlak); }
.verhaal[data-kant='zuid']  .rail b { background: var(--zuid-vlak); }
.verhaal[data-kant='beide'] .rail b { background: linear-gradient(to right, var(--noord-vlak) 50%, var(--zuid-vlak) 50%); }
.verhaal[data-verlies] .rail b { background: var(--signal-vlak); }

.rail i {
  display: none;
  position: absolute;
  top: calc(0.72em + 14px);
  font: 600 0.6875rem/1 var(--label);
  text-transform: uppercase;
  font-style: normal;
  color: var(--fg-2);
}

@media (min-width: 900px) {
  .rail b { width: calc(50% - 6px); }
  .rail i { display: block; }

  .verhaal[data-kant='noord'] .rail b { right: calc(50% + 6px); left: auto; }
  .verhaal[data-kant='noord'] .rail i { right: calc(50% + 6px); }

  .verhaal[data-kant='zuid'] .rail b { left: calc(50% + 6px); right: auto; }
  .verhaal[data-kant='zuid'] .rail i { left: calc(50% + 6px); }

  .verhaal[data-kant='beide'] .rail b,
  .verhaal[data-kant='onbekend'] .rail b { left: 6px; right: 6px; width: auto; }
  .verhaal[data-kant='beide'] .rail i,
  .verhaal[data-kant='onbekend'] .rail i { left: 6px; }

  .verhaal[data-kant='onbekend'] .rail b {
    background: none;
    border-top: 6px dotted var(--line-2);
    height: 0;
  }
}

/* -- de bewering zelf; de datamotor levert een zin, geen kop + tekst -- */
.bewering {
  margin: 0;
  max-width: 58ch;
  color: var(--fg);
  font-size: 1.1875rem;
  line-height: 1.55;
  text-wrap: pretty;
}
/* Twee of meer creators die hetzelfde onderbouwen weegt zwaarder. */
.verhaal[data-zwaarte='groot'] .bewering {
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  line-height: 1.38;
  max-width: 44ch;
}

.blok { margin-top: clamp(3rem, 7vw, 4.5rem); }
.blok-kop {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rand-k2);
}
.blok .verhalen { margin-top: 0; }
.blok .verhaal:first-child { border-top: 0; }

.onzeker-merk {
  display: inline-block;
  font: 600 0.75rem/1.3 var(--label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: var(--bg-3);
  border: 1px solid var(--rand-k);
  border-radius: 999px;
  padding: var(--s1) var(--s3);
  margin: 0 0 var(--s3);
}

/* ---------- 9. Bronnen: het bewijs, niet de voetnoot ---------- */

.bronnen {
  margin: 1.5rem 0 0;
  padding: var(--s4);
  background: var(--bg-2);
  border: 1px solid var(--rand-k);
  border-radius: var(--r);
  box-shadow: var(--hef);
}
.bronnen > p {
  margin: 0 0 0.6rem;
  font: 600 0.6875rem/1 var(--label);
  text-transform: uppercase;
  color: var(--fg-2);
}
.bronnen ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.bron {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  font-family: var(--lees);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.bron .wie { font-weight: 700; color: var(--fg); }
.bron .wat { color: var(--fg-2); text-decoration: none; border-bottom: 1px solid var(--rand-k2); transition: border-color var(--snel), color var(--snel); }
a.wat:hover { color: var(--fg); border-bottom-color: var(--fg); }
.bron .waar {
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bron .nep { color: var(--fg-3); border-bottom: 1px dotted var(--rand-k2); }

.geen-bron {
  font-family: var(--lees);
  font-size: 0.8125rem;
  color: var(--fg-3);
  margin: 0;
}

/* ---------- 10. Gaten in de dekking ---------- */

.gaten {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  background: var(--bg-2);
  border: 1px solid var(--rand-k);
  border-radius: var(--r);
  box-shadow: var(--hef);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.gaten h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}
.gaten ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; max-width: 62ch; }
.gaten li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.6rem; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-2); }
.gaten li::before { content: ''; width: 9px; height: 9px; background: var(--line-2); margin-top: 0.5em; }
/* Hoeveel beweringen de controle heeft afgekeurd. Dit hoort zichtbaar:
   een controle die nooit iets afkeurt, controleert niets. */
.controle {
  margin: var(--s5) 0 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--rand-k);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 62ch;
}
.controle b { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.controle-detail { display: block; margin-top: 0.5rem; color: var(--fg-3); font-size: 0.875rem; }

.archief-kop {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  letter-spacing: -0.02em;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
}
.archief-kop + .archief { margin-top: 1rem; }

.dekking-venster { font-size: 0.8125rem !important; color: var(--fg-3) !important; }

.gaten > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tik);
  margin-top: var(--s5);
  font: 600 0.9375rem/1.2 var(--label);
  color: #fff;
  background: var(--signal-vlak);
  text-decoration: none;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-s);
  box-shadow: var(--hef);
  transition: transform var(--snel), box-shadow var(--snel), filter var(--snel);
}
.gaten > a:hover { filter: brightness(1.12); box-shadow: var(--hef-op); }
.gaten > a:active { box-shadow: none; transform: translateY(2px); }

/* ---------- 11. Vorige/volgende dag ---------- */

.blader {
  display: grid;
  gap: var(--s3);
  margin-top: clamp(3rem, 7vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .blader { grid-template-columns: 1fr 1fr; } }
.blader a, .blader span {
  background: var(--bg-2);
  border: 1px solid var(--rand-k);
  border-radius: var(--r);
  padding: var(--s5) clamp(1rem, 3vw, 1.75rem);
  text-decoration: none;
  display: block;
  transition: background var(--snel), border-color var(--snel), box-shadow var(--snel);
}
.blader a { box-shadow: var(--hef); }
.blader a:hover { background: var(--bg-3); border-color: var(--rand-k2); box-shadow: var(--hef-op); }
.blader span { color: var(--fg-3); }
.blader .richting { display: block; font: 600 0.6875rem/1 var(--label); text-transform: uppercase; color: var(--fg-2); margin-bottom: 0.6rem; }
.blader .titel {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.blader .volgende { text-align: right; }

/* ---------- 12. Archief ---------- */

.pagina-kop { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); }
.pagina-kop h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.25rem, 6.5vw, 4.5rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 17ch;
}
.pagina-kop p { font-size: clamp(1.0625rem, 1.8vw, 1.25rem); color: var(--fg-2); max-width: 52ch; margin: 1.25rem 0 0; }

.archief { list-style: none; margin: 0 0 clamp(3rem, 8vw, 5rem); padding: 0; display: grid; gap: 0.5rem; }
.archief li { background: var(--bg-2); border: 1px solid var(--rand-k); border-radius: var(--r); box-shadow: var(--hef); }
.archief a, .archief .leeg {
  display: grid;
  /* 4rem en niet 3,25: in de aanloop staat hier een datum ("2 okt") en geen
     dagnummer, en die paste alleen in de smalle kolom zolang de spatie eruit
     geknipt werd. Dat las als een zetfout. */
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--s1) var(--s4);
  padding: var(--s4);
  min-height: var(--tik);
  text-decoration: none;
  transition: background var(--snel);
}
@media (min-width: 760px) {
  .archief a, .archief .leeg { grid-template-columns: 5rem minmax(0, 30rem) minmax(0, 1fr); column-gap: var(--s5); align-items: baseline; }
}
.archief li:has(a:hover) { border-color: var(--kader); }
.archief a:hover { background: var(--zuid-zacht); }
.archief .nr {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.archief .leeg .nr { color: var(--fg-3); }
.archief .kop {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
}
.archief .leeg .kop { font-weight: 400; font-size: 0.8125rem; color: var(--fg-3); letter-spacing: 0; }
.archief .bijschrift { font: 600 0.6875rem/1.5 var(--label); color: var(--fg-2); grid-column: 2; }
@media (min-width: 760px) { .archief .bijschrift { grid-column: 3; text-align: right; } }
.archief li[data-vandaag] { border-color: var(--signal); }
.archief li[data-vandaag] .nr { color: var(--signal); }

/* ---------- 13. Tekstpagina (grenzen) ---------- */

.proza { max-width: 62ch; padding-bottom: clamp(3rem, 8vw, 5rem); }
.proza h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 0.85rem;
}
.proza p { margin: 0 0 1.1rem; }
.proza p:last-child { margin-bottom: 0; }

.weten {
  display: grid;
  gap: var(--s4);
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
}
.proza > h2:first-child { margin-top: 0; }
@media (min-width: 720px) { .weten { grid-template-columns: 1fr 1fr; } }
.weten > div {
  background: var(--bg-2);
  border: 1px solid var(--rand-k);
  border-radius: var(--r);
  box-shadow: var(--hef);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.weten h2 {
  font: 600 0.75rem/1.3 var(--label);
  text-transform: uppercase;
  margin: 0 0 var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rand-k);
}
.weten .wel h2 { color: var(--noord); }
.weten .niet h2 { color: var(--signal); }
.weten ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.weten li { font-size: 0.9375rem; line-height: 1.55; display: grid; grid-template-columns: 0.9rem 1fr; gap: 0.55rem; }
.weten li::before { content: ''; width: 9px; height: 9px; margin-top: 0.5em; background: var(--line-2); }
.weten .wel li::before { background: var(--noord-vlak); }
.weten .niet li::before { background: var(--signal-vlak); }

/* ---------- 14. Waarschuwing voorbeelddata ---------- */

.nepdata {
  /* Eigen vaste kleuren, los van het thema: deze balk moet in beide
     standen hetzelfde alarmsignaal zijn en AA halen. */
  background: #b3271a;
  color: #fff;
  padding-block: var(--s3);
}
.nepdata p {
  margin: 0;
  font: 600 0.75rem/1.6 var(--label);
}
.nepdata strong { font-weight: 400; text-transform: uppercase; }

/* ---------- 15. Voet ---------- */

.vloer {
  border-top: 6px solid var(--eik);
  box-shadow: inset 0 6px 0 var(--gras);
  background: var(--bg-3);
  padding-block: clamp(2.5rem, 6vw, 3.5rem);
  margin-top: clamp(3rem, 8vw, 5rem);
}
.vloer > .omhulsel { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .vloer > .omhulsel { grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); } }
.vloer p { margin: 0 0 0.9rem; font-size: 0.875rem; line-height: 1.65; color: var(--fg-2); max-width: 54ch; }
.vloer p:last-child { margin-bottom: 0; }
.vloer .fijn { font-size: 0.8125rem; line-height: 1.7; color: var(--fg-3); }
.vloer nav { display: grid; gap: 0.6rem; align-content: start; }
.vloer nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tik);
  font: 600 0.875rem/1.2 var(--label);
  color: var(--fg);
  text-decoration: none;
  background: var(--bg-2);
  border: 1px solid var(--rand-k);
  border-radius: var(--r-s);
  box-shadow: var(--hef);
  padding: var(--s2) var(--s4);
  justify-self: start;
  transition: background var(--snel), border-color var(--snel), box-shadow var(--snel);
}
.vloer nav a:hover { background: var(--bg-3); border-color: var(--rand-k2); box-shadow: var(--hef-op); }
@media (min-width: 760px) { .vloer nav { justify-items: end; } .vloer nav a { justify-self: end; } }

/* ---------- 16. Lege staat ---------- */

.wachten {
  background: var(--leeg);
  border: 1px solid var(--rand-k);
  border-radius: var(--r-s);
  box-shadow: var(--hol);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}
.wachten .wachten-kop {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 0.6rem;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.wachten p { margin: 0; color: var(--fg-2); font-size: 0.9375rem; max-width: 52ch; }

/* ---------- 17. De krantpagina ----------
   Het enige vel op deze site. De krant houdt Newsreader als leesletter,
   want dit is het stuk dat je afdrukt en opstuurt, en een schreef is op
   papier eenvoudiger te lezen dan een schermletter. De rest van de site
   ziet Newsreader nooit, dus hij wordt daar ook niet gedownload.
   Wat de krant wel overneemt: het palet, de pixelletter voor labels en
   nootnummers, en het woordmerk in de kop.
   ----------

   Dezelfde dag, dezelfde data, dezelfde letters - maar als gedrukt artikel.
   Eén regel bepaalt alles hieronder: binnen de kolommen geldt een vast
   verticaal ritme van --kr-regel. Elke witruimte tussen blokken is een heel
   aantal van die regel, zodat de regels in kolom 1, 2 en 3 op dezelfde hoogte
   liggen. Het notenapparaat staat bewust op een eigen, kleinere maat; dat
   doet een krant ook, omdat apparaat geen lopende tekst is.
   -------------------------------------------------------------------- */

.krant {
  --kr-regel: 1.625rem;
  padding-block: clamp(1.5rem, 4vw, 3rem) 0;
}

/* Hoofd: naam, editie, datum, stempel. Op het scherm staat de naam al in de
   kop van de site, dus hier blijft hij weg; op papier is dit de enige plek
   waar hij kan staan en wordt hij het kopblad. */
.kr-hoofd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.25rem;
  padding-bottom: 0.65rem;
  border-bottom: 3px solid var(--fg);
}
.kr-merk { display: none; }
.kr-editie {
  font-family: var(--krant);
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}
.kr-datum, .kr-stempel {
  font: 400 0.8125rem/1.4 var(--krant);
  margin: 0;
  color: var(--fg-2);
}
.kr-stempel { margin-left: auto; color: var(--fg-3); }

/* Titelblok: kop en onderkop vertellen samen het verhaal. De kop schaalt
   met zijn lengte, net als op de dagpagina - de datamotor levert zinnen,
   geen krantenkoppen van vijf woorden. */
.kr-titelblok {
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
}
.kr-kicker {
  font: 600 0.75rem/1.4 var(--label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  margin: 0 0 0.9rem;
}
.krant h1 {
  font-family: var(--krant);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.krant h1[data-lengte='kort']   { font-size: clamp(2.6rem, 7.4vw, 5.25rem); max-width: 20ch; }
.krant h1[data-lengte='middel'] { font-size: clamp(2.1rem, 5vw, 3.9rem); max-width: 26ch; line-height: 1.0; }
.krant h1[data-lengte='lang']   { font-size: clamp(1.7rem, 3.4vw, 2.75rem); max-width: 34ch; line-height: 1.1; letter-spacing: -0.022em; }

.kr-onderkop {
  font-family: var(--krant);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 58ch;
  margin: 1.1rem 0 0;
  text-wrap: pretty;
}

/* ---- Het corpus: één kolom op de telefoon, twee of drie daarboven ---- */

.kr-corpus {
  font-family: var(--krant);
  font-size: 1.0625rem;
  line-height: var(--kr-regel);
  color: var(--fg);
  padding-top: var(--kr-regel);
  column-gap: clamp(1.5rem, 3vw, 2.75rem);
  column-rule: 1px solid var(--line);
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  orphans: 2;
  widows: 2;
}
@media (min-width: 760px) {
  .kr-corpus { columns: 2; text-align: justify; }
}
@media (min-width: 1040px) {
  .kr-corpus { columns: 3; }
}

.kr-corpus > * { margin: 0; }
/* De lead staat op een grotere maat dan de rest, en een grotere maat in een
   smalle kolom laat zich niet uitvullen: dat geeft rivieren. Dus ragged
   rechts. Uitvullen doen we alleen waar de maat het toelaat, en dat is hier
   de lopende tekst. */
.kr-lead {
  font-size: 1.1875rem;
  line-height: var(--kr-regel);
  font-weight: 500;
  text-align: left;
  text-wrap: pretty;
  margin-bottom: var(--kr-regel);
  break-inside: avoid;
}

/* Een bewering is één modulair blok: tussenkop plus onderbouwing. Niet
   splitsen over een kolomgrens, anders staat de claim los van zijn bewijs. */
.kr-stuk {
  break-inside: avoid;
  margin-bottom: var(--kr-regel);
}
.kr-tussenkop {
  font-family: var(--krant);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: var(--kr-regel);
  letter-spacing: -0.012em;
  margin: 0;
  text-align: left;
  hyphens: manual;
  text-wrap: pretty;
}
.kr-tekst { margin: 0; text-wrap: pretty; }
/* Vervolgalinea's binnen één bewering: inspringen in plaats van wit, de
   drukkersconventie. Na een tussenkop springt niets in. */
.kr-tekst + .kr-tekst { text-indent: 1.15em; }

.kr-kant {
  font: 600 0.6875rem/1 var(--label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 0.6em;
  white-space: nowrap;
  vertical-align: 0.06em;
}
.kr-stuk[data-kant='noord'] .kr-kant { color: var(--noord); }
.kr-stuk[data-kant='zuid']  .kr-kant { color: var(--zuid); }
.kr-stuk[data-kant='beide'] .kr-kant { color: var(--fg-2); }
.kr-stuk[data-kant='onbekend'] .kr-kant { color: var(--fg-3); }

/* Noten in de tekst: hoogliggend, maar zonder het regelritme te verzetten. */
.kr-noot {
  font: 600 0.75rem/0 var(--label);
  vertical-align: super;
  margin-left: 0.12em;
  white-space: nowrap;
}
.kr-noot a {
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1px;
}
.kr-noot a:hover { border-bottom-color: var(--fg); }

.kr-vlag {
  font-style: italic;
  font-size: 0.875em;
  color: var(--fg-3);
}
.kr-geenbron {
  font: 600 0.75rem/1 var(--label);
  color: var(--signal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.kr-rubriek {
  font-family: var(--krant);
  font-weight: 800;
  font-size: 0.875rem;
  line-height: var(--kr-regel);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-2);
  margin: 0 0 0 0;
  padding-top: calc(var(--kr-regel) - 1px);
  border-top: 1px solid var(--line);
  break-after: avoid;
  break-inside: avoid;
}

/* ---- Streamer: uit een videotitel, nooit uit een verzonnen quote ---- */

.kr-streamer {
  break-inside: avoid;
  margin: 0 0 var(--kr-regel);
  padding-block: calc(var(--kr-regel) - 2px) calc(var(--kr-regel) - 1px);
  border-top: 2px solid var(--fg);
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.kr-streamer-kicker {
  font: 600 0.6875rem/1 var(--label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  margin: 0 0 0.7rem;
}
.kr-streamer blockquote { margin: 0; }
.kr-streamer blockquote p {
  font-family: var(--krant);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  hyphens: manual;
}
.kr-streamer blockquote p::before { content: '\201E'; }
.kr-streamer blockquote p::after  { content: '\201D'; }
.kr-streamer figcaption {
  font: 600 0.75rem/1.4 var(--label);
  color: var(--fg-2);
  margin-top: 0.7rem;
}

/* ---- Kader met de cijfers van de dag ---- */

.kr-cijfers {
  break-inside: avoid;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  padding: calc(var(--kr-regel) - 0.4rem) 1rem;
  margin-bottom: var(--kr-regel);
  text-align: left;
}
.kr-cijfers h2 {
  font-family: var(--krant);
  font-weight: 800;
  font-size: 1rem;
  line-height: var(--kr-regel);
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.kr-cijfers dl { margin: 0; }
.kr-cijfers div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.28rem 0;
  border-bottom: 1px solid var(--line);
}
.kr-cijfers div:last-of-type { border-bottom: 0; }
.kr-cijfers dt {
  font: 600 0.75rem/1.3 var(--label);
  color: var(--fg-2);
}
.kr-cijfers dd {
  margin: 0;
  font-family: var(--krant);
  font-weight: 800;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}
.kr-cijfers-dekking {
  margin: 0.7rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line-2);
  font-family: var(--krant);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--fg-2);
}
.kr-cijfers-dekking b {
  font-family: var(--krant);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--fg);
}
.kr-cijfers-noot {
  font: 600 0.75rem/1.5 var(--label);
  color: var(--fg-3);
  margin: 0.7rem 0 0;
}

/* ---- Noten onderaan de kolom. Eigen maat, eigen ritme: apparaat. ---- */

.kr-noten {
  break-inside: auto;
  padding-top: calc(var(--kr-regel) - 2px);
  border-top: 2px solid var(--fg);
  text-align: left;
}
.kr-noten h2 {
  font: 600 0.75rem/1 var(--label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  margin: 0 0 0.75rem;
}
/* Ruim genoeg voor een nummer van twee cijfers: bij 1.5em hing de "10."
   buiten de kolom en sneed de paginarand hem af. */
.kr-noten ol {
  margin: 0;
  padding-left: 2.2em;
  font-size: 0.8125rem;
  line-height: 1.35;
}
.kr-noten li {
  margin-bottom: 0.5rem;
  break-inside: avoid;
  hyphens: none;
}
.kr-noten li::marker {
  font: 600 0.75rem var(--label);
  color: var(--fg-3);
}
.kr-wie { font-family: var(--krant); font-size: 0.8125rem; }
.kr-wanneer { font-family: var(--label); font-weight: 600; font-size: 0.75rem; color: var(--fg-3); white-space: nowrap; }
.kr-noten a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.kr-nep { color: var(--fg-3); }

/* ---- Gaten, colofon, wissel ---- */

.kr-gaten {
  margin-top: clamp(2rem, 4vw, 3.25rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.kr-gaten h2 {
  font: 600 0.75rem/1 var(--label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  margin: 0 0 0.9rem;
}
.kr-gaten ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-family: var(--krant);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 78ch;
}
.kr-gaten li { padding-left: 1.1rem; position: relative; }
.kr-gaten li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 0.5rem; height: 1px;
  background: var(--line-2);
}

.kr-colofon {
  font: 600 0.75rem/1.6 var(--label);
  color: var(--fg-3);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  max-width: 86ch;
}

.kr-wissel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  margin: 1.5rem 0 clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font: 600 0.75rem/1 var(--label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.kr-wissel a { color: var(--fg-2); text-decoration: none; transition: color var(--snel); }
.kr-wissel a:hover { color: var(--fg); }
.kr-terug { color: var(--fg) !important; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.kr-buren { margin-left: auto; display: flex; gap: 1.25rem; }

/* Doorverwijzing op de dagpagina naar deze weergave. */
.naar-krant {
  margin: 0;
  flex-basis: 100%;
  font: 600 0.75rem/1 var(--label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.naar-krant a {
  color: var(--fg-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition: color var(--snel), border-color var(--snel);
}
.naar-krant a:hover { color: var(--fg); border-bottom-color: var(--fg); }
@media (min-width: 760px) {
  .naar-krant { flex-basis: auto; margin-left: auto; }
  .dagkop-meta .dagstempel { margin-left: auto; }
}

/* ---------- 18. Papier ----------

   De krantpagina is pas af als hij als PDF klopt: dat is het bestand dat je
   naar een organisator stuurt. Drie kolommen op A4, 9,5pt op 13pt, en de
   bronlinks krijgen hun URL erachter - op papier kun je niet klikken.
   -------------------------------------------------------------------- */

@page {
  size: A4;
  margin: 14mm 14mm 12mm;
}

/* ============================================================
   12. Het bord - de voorpagina
   ------------------------------------------------------------
   De dagpagina en de krant zijn om te lezen; dit is om te kijken.
   Blokken van een schermhoogte, beeld eerst, met de duim door te
   lopen. Dezelfde taal als de rest van de site - Noord blauw, Zuid
   geel, haarlijnen - maar in posterformaat in plaats van
   kolombreedte.

   Wat een tegel naar buiten laat wijzen is zijn naam en zijn link,
   niet zijn vorm. De afgeschuinde hoek rechtsonder die dat ooit
   deed is weg: naast een ronding op elk vlak werd het een derde
   hoekvorm, en over een foto van een gezicht las hij als een
   renderfout.
   ============================================================ */

/* De blokken wisselen van ondergrond: lucht, paneel, lucht. Een pagina die
   over de hele lengte dezelfde kleur houdt leest als een document, en dat
   was precies de klacht. Het blijft wel een stand: licht is licht, de
   donkere stand draait nergens halverwege om. */
.bord { padding-block: clamp(1.75rem, 6vw, 3rem); }
.bord-clip    { background: var(--lucht); border-block: 1px solid var(--rand-k); }
.bord-verhaal { background: var(--lucht); border-bottom: 1px solid var(--rand-k); }
.bord-beeld   { border-bottom: 1px solid var(--rand-k); }

.bord-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin-bottom: 1.1rem;
}
/* Een sectiekop is de site die iets benoemt, dus pixelletter, en met de
   harde schaduw van een pixel naar rechtsonder. Hele px-maten: Silkscreen
   staat op een raster en een halve pixel maakt hem vaag. */
.bord-kop h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.375rem, 5.2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.bord-stand {
  margin: 0;
  font: 600 0.8125rem/1.3 var(--label);
  color: var(--fg-2);
  padding: var(--s1) var(--s3);
  background: var(--bg-3);
  border: 1px solid var(--rand-k);
  border-radius: 999px;
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.bord-noot {
  margin: 1.1rem 0 0;
  font: 400 0.8125rem/1.6 var(--lees);
  color: var(--fg-2);
  max-width: 62ch;
}

/* Lege staat. Een lege dag is nieuws en geen storing, dus hij krijgt de
   vorm die het spel daarvoor heeft: een leeg slot. Hol, met een rand en
   een schaduw aan de bovenkant, zodat je ziet dat er plek is waar nu
   niets ligt. Dat is iets anders dan een stuk dat niet geladen is. */
.leegte,
.clip-leeg {
  margin: 0;
  padding: clamp(1.25rem, 5vw, 2rem);
  background: var(--leeg);
  border: 1px solid var(--rand-k);
  border-radius: var(--r-s);
  box-shadow: var(--hol);
  font: 400 0.9375rem/1.6 var(--lees);
  color: var(--fg-2);
}
.clip-leeg p { margin: 0; max-width: 46ch; }

/* ---------- 12a. De kop: klok, muur, rooster ---------- */

/* Lucht. Boven lichter dan beneden, zoals een hemel bij de horizon. Twee
   harde kleurstops en geen verloopruis: dit is nog steeds een blokkenspel. */
.kop-bord {
  background: linear-gradient(color-mix(in srgb, var(--lucht) 55%, var(--bg-2)) 0%, var(--lucht) 70%);
  border-bottom: 1px solid var(--rand-k);
}
.kop-rij {
  display: grid;
  gap: 0.9rem;
  padding-block: clamp(1rem, 4vw, 1.75rem) clamp(1.25rem, 4vw, 1.75rem);
}

/* De teller staat op een gouden plaat, zoals een scorebord in het spel.
   Het getal is het eerste wat iemand ziet, dus het krijgt het meeste blok. */
.kop-tel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s4);
  row-gap: var(--s1);
  padding: var(--s4) var(--s5);
  background: var(--zuid-vlak);
  border: 1px solid rgb(0 0 0 / 0.16);
  border-radius: var(--r);
  box-shadow: var(--hef);
}
.kop-groot {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  line-height: 1;
  color: #2b1d00;
}
.kop-dag {
  font: 600 0.8125rem/1 var(--label);
  color: #4a3400;
  align-self: center;
}
.kop-groot .tel {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.5rem, 17vw, 5.75rem);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kop-onder {
  margin: 0;
  font: 600 1rem/1.3 var(--label);
  color: #4a3400;
}

/* De klok van het seizoen: 22 blokken die zich vullen. Geen staafdiagram
   maar een rij slots, dezelfde vorm als het rooster eronder, zodat de twee
   als een familie lezen. */
.kop-klok { align-self: center; }
/* Het paneel is donker en de segmenten liggen erin als losse blokjes. Eerder
   stond een lichte rij op een lichte ondergrond en werd de hele balk een
   vage streep: voor de start is elk vakje leeg, en dan moet je juist kunnen
   zien dat er tweeentwintig lege vakjes staan te wachten. */
.klok-segmenten {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 26px;
  padding: 3px;
  background: var(--line-2);
  border: 1px solid var(--rand-k2);
  border-radius: var(--r-s);
  box-shadow: var(--hol);
}
.klok-segmenten i {
  flex: 1;
  min-width: 4px;
  background: var(--leeg);
  border-radius: 2px;
  transform-origin: bottom;
}
.klok-segmenten i[data-stand='geweest'] {
  background: var(--gras);
  box-shadow: inset 0 2px 0 var(--gras-l), inset 0 -2px 0 var(--gras-d);
}
.klok-segmenten i[data-stand='nu'] {
  background: var(--signal-vlak);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.45), inset 0 -2px 0 var(--signal);
}
.klok-regel {
  display: flex;
  justify-content: space-between;
  gap: 0.15rem 1.25rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.klok-regel h1 { margin: 0; font: 700 0.875rem/1.3 var(--label); color: var(--fg); }
.klok-regel span { margin: 0; font: 400 0.8125rem/1.3 var(--lees); color: var(--fg-2); }

/* --- Teams met namen en leesbare Twitch-status, zonder knipperen --- */
.rooster [hidden] { display: none !important; }
.rooster-titel { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); }
.rooster-titel h2 { margin: 0; font: 700 1.25rem/1.3 var(--lees); }
.rooster-titel a { min-height: var(--tik); display: inline-flex; align-items: center; color: var(--fg); font-size: 0.875rem; }
.rooster-uitleg, .rooster-meting { margin: var(--s2) 0 var(--s3); max-width: 85ch; font: 400 0.875rem/1.55 var(--lees); color: var(--fg-2); }
.rooster-meting { font-weight: 600; }
.rooster { display: grid; gap: var(--s4); }
.rooster-team { min-width: 0; padding: var(--s4); border: 1px solid var(--rand-k); border-top: 4px solid var(--noord-vlak); border-radius: var(--r); background: var(--bg-2); }
.rooster-team[data-kant='zuid'] { border-top-color: var(--zuid-vlak); }
.rooster-team-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.rooster-team-kop h3 { margin: 0; font: 700 1.125rem/1.3 var(--lees); }
.rooster-team-kop span { font-size: 0.8125rem; color: var(--fg-2); }
.rooster-team-kop strong { margin-inline-start: auto; font-size: 0.875rem; }
.rooster-live-namen { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s3); padding-block: var(--s2); }
.rooster-live-namen a { display: inline-flex; align-items: center; min-height: var(--tik); color: var(--fg); font-size: 0.875rem; overflow-wrap: anywhere; }
.rooster-live-namen p { margin: var(--s2) 0; color: var(--fg-2); font-size: 0.875rem; }
.rooster-team summary { cursor: pointer; min-height: var(--tik); padding-block: var(--s3); font-weight: 600; font-size: 0.875rem; }
.rooster-namen { display: grid; gap: var(--s2); padding: 0; margin: var(--s2) 0 0; list-style: none; }
.rooster-namen li { min-width: 0; }
.rooster-persoon { display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding: var(--s3); border: 1px solid var(--rand-k); border-radius: var(--r-s); text-decoration: none; color: var(--fg); overflow-wrap: anywhere; }
.rooster-persoon:hover { background: var(--bg-3); }
.rooster-persoon strong { font-size: 0.875rem; }
.rooster-persoon span, .rooster-persoon small { color: var(--fg-2); font-size: 0.75rem; line-height: 1.55; }
.rooster-persoon[data-stand='live'] { border-inline-start: 4px solid var(--signal); }
.rooster-persoon[data-stand='live'] [data-persoon-status] { color: var(--fg); font-weight: 600; }
@media (min-width: 760px) { .rooster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rooster-namen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* De muur. Een echte stenen band: twee grijstinten in een halfsteens
   verband, gezet met harde kleurstops. Geen afbeelding, geen textuur,
   een gradient van zeven regels. */
.muur {
  position: relative;
  height: 18px;
  margin-block: var(--s2);
  border-radius: 3px;
  background-color: #8d9389;
  background-image:
    linear-gradient(90deg, rgb(0 0 0 / 0.22) 0 2px, transparent 2px),
    linear-gradient(#a7ad9f 0 50%, #7f857c 50% 100%);
  background-size: 22px 100%, 100% 100%;
  background-position: 0 0, 0 0;
  display: grid;
  place-items: center;
}
.muur span {
  background: var(--kader);
  color: #e7efe0;
  border-radius: 3px;
  padding: 2px 0.5rem;
  font: 400 10px/1 var(--pix);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kop-voet {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  margin: 0;
  font: 400 0.8125rem/1.4 var(--lees);
  color: var(--fg-2);
}
.kop-voet b { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.kop-voet a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tik);
  color: var(--fg);
  font: 600 0.875rem/1.2 var(--label);
  text-decoration: none;
  padding: var(--s2) var(--s4);
  background: var(--bg-2);
  border: 1px solid var(--rand-k);
  border-radius: var(--r-s);
  box-shadow: var(--hef);
  transition: background var(--snel), box-shadow var(--snel), transform var(--snel);
}
.kop-voet a:hover { background: var(--bg-3); border-color: var(--rand-k2); box-shadow: var(--hef-op); }
.kop-voet a:active { box-shadow: none; transform: translateY(2px); }

@media (min-width: 900px) {
  .kop-rij {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 2rem;
    align-items: stretch;
  }
  .kop-tel { grid-row: 1; }
  .kop-klok { grid-row: 1; }
  .rooster-blok, .officieel-blok { grid-column: 1 / -1; }
  .kop-voet { grid-column: 1 / -1; }
}

/* ---------- 12b. Wie is er live ---------- */
.officieel-blok {
  min-width: 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--rand-k);
  border-radius: var(--r);
  background: var(--bg-2);
  color: var(--fg);
  overflow-wrap: anywhere;
}
.officieel-blok h2 { margin: 0 0 0.6rem; font: 700 1.25rem/1.3 var(--lees); }
.officieel-status { font-weight: 600; }
.officieel-blok dl { display: grid; gap: 0.3rem 1rem; margin-block: 1rem; }
.officieel-blok dt { font-weight: 600; }
.officieel-blok dd { margin: 0 0 0.6rem; }
.officieel-blok a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.officieel-blok [hidden], .officieel-blok ul:empty { display: none; }
.officieel-blok li { margin-block: 0.75rem; }
.officieel-blok li p { margin: 0.2rem 0; }
@media (min-width: 600px) { .officieel-blok dl { grid-template-columns: max-content minmax(0,1fr); } }

/* Rood is gereserveerd voor live en voor "vandaag". De stip is nu een
   vierkantje: op deze site is niets rond. */
.stip {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  background: var(--signal-vlak);
  border-radius: 2px;
  margin-right: 0.5em;
  vertical-align: 0.06em;
}
@keyframes puls { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.2; } }

.bord-balans {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font: 600 0.75rem/1 var(--label);
  color: var(--fg-2);
}
.bord-balans b { font-weight: 400; font-size: 14px; }
.bord-balans b[data-kant='noord'] { color: var(--noord); }
.bord-balans b[data-kant='zuid'] { color: var(--zuid); }
.bord-balans i { width: 2px; height: 0.9em; background: var(--line-2); margin-inline: 0.3rem; }

/* De rij loopt tot aan de schermrand door: een tegel die half buiten
   beeld valt is het enige eerlijke teken dat er meer naast staat. */
.live-spoor,
.clip-spoor {
  /* Houd absoluut geplaatste sr-tekst binnen het eigen scrollvlak. */
  position: relative;
  display: flex;
  gap: 0.6rem;
  margin: 0;
  padding: 0 var(--rand) 0.7rem;
  margin-inline: calc(var(--rand) * -1);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Zonder dit valt de snap-positie samen met de rand van het scrollvlak
     en niet met de rand van de inhoud: de rij sprong bij het laden een
     gutter naar links en de eerste tegel stond half buiten beeld. */
  scroll-padding-inline: var(--rand);
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.live-spoor > li,
.clip-spoor > li { scroll-snap-align: start; flex: 0 0 auto; }

.live-tegel {
  display: grid;
  gap: 0.4rem;
  width: 6.75rem;
  text-decoration: none;
}
/* Een gezicht ligt in een slot. De kant bepaalt de kleur van de rand,
   zoals overal op deze site. */
.live-foto {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-3);
  border: 2px solid var(--rand-k2);
  border-radius: var(--r);
  box-shadow: var(--hef);
  transition: transform var(--snel), box-shadow var(--snel);
}
.live-tegel[data-kant='noord'] .live-foto { border-color: var(--noord-vlak); }
.live-tegel[data-kant='zuid'] .live-foto { border-color: var(--zuid-vlak); }
.gezicht-foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.gezicht-mono {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--fg-2);
}
.live-tegel[data-kant='noord'] .gezicht-mono { color: var(--noord); }
.live-tegel[data-kant='zuid'] .gezicht-mono { color: var(--zuid); }

/* Het kijkersgetal stond als losse badge in de hoek van de foto: een kaal
   rood cijfer zonder woord erbij, dat niemand kon plaatsen. Het staat nu met
   zijn eenheid erbij als chip ONDER de naam, in de gewone letter. Daarmee is
   het ook geen absoluut geplaatst element meer - stond het dat nog, dan zocht
   het de dichtstbijzijnde geplaatste ouder en stapelden alle acht badges zich
   bovenop de sectiekop. Dat gebeurde op 3 oktober echt. */
.live-kijkers {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  align-self: start;
  padding: 0.25em 0.55em;
  border-radius: var(--r-s);
  background: var(--signal-vlak);
  color: #fff;
  font: 600 0.75rem/1.3 var(--label);
  white-space: nowrap;
}
.live-kijkers i {
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: #fff;
  flex: none;
}

.live-naam {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-tag {
  font: 600 0.6875rem/1.4 var(--label);
  color: var(--fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-tag[data-op-server] {
  color: #fff;
  background: var(--gras);
  border-radius: var(--r-s);
  padding: 0.25em 0.5em;
  justify-self: start;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.live-tegel:hover .live-foto { transform: translateY(-2px); box-shadow: var(--hef-op); }
.live-tegel:hover .live-naam { text-decoration: underline; text-underline-offset: 2px; }

.live-samen {
  margin: 1rem 0 0;
  font: 400 1rem/1.55 var(--lees);
  color: var(--fg-2);
}
.live-samen b { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }

@media (min-width: 760px) {
  .live-spoor { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .live-tegel { width: 7.5rem; }
}

/* ---------- 12c. De clip ---------- */

.clip-speler {
  aspect-ratio: 16 / 9;
  background: #0b1018;
  border: 1px solid var(--rand-k2);
  border-radius: var(--r);
  box-shadow: var(--hef);
  overflow: hidden;
}
.clip-speler iframe { width: 100%; height: 100%; border: 0; display: block; }

.clip-onder {
  margin-top: 1.1rem;
  padding: var(--s4);
  background: var(--bg-2);
  border: 1px solid var(--rand-k);
  border-radius: var(--r);
  box-shadow: var(--hef);
  border-left: 6px solid var(--rand-k2);
}
.clip-onder[data-kant='noord'] { border-left-color: var(--noord-vlak); }
.clip-onder[data-kant='zuid'] { border-left-color: var(--zuid-vlak); }
.clip-hoofdtitel {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 4.4vw, 1.3125rem);
  line-height: 1.25;
}
.clip-hoofdwie { margin: 0.4rem 0 0; font: 400 0.8125rem/1.5 var(--lees); color: var(--fg-2); }
.clip-hoofdwie b { color: var(--fg); font-weight: 700; }
.clip-geknipt { margin: 0.2rem 0 0; font: 400 0.8125rem/1.5 var(--lees); color: var(--fg-2); }
.clip-uit { margin: 0.75rem 0 0; }
.clip-uit a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tik);
  font: 600 0.9375rem/1.2 var(--label);
  text-decoration: none;
  color: #fff;
  background: var(--eik);
  padding: var(--s3) var(--s5);
  border-radius: var(--r-s);
  box-shadow: var(--hef);
  transition: filter var(--snel), transform var(--snel), box-shadow var(--snel);
}
.clip-uit a:hover { filter: brightness(1.12); box-shadow: var(--hef-op); }
.clip-uit a:active { box-shadow: none; transform: translateY(2px); }

.clip-meer { margin-top: var(--s6); }
/* Deze kop en dit getal hadden geen enkele regel in de stylesheet: een h3 op
   standaardmaat en een los getal zonder eenheid. De kop is nu een etiket, en
   "23 in totaal" staat erachter als telling en niet als deel van de zin. */
.clip-meer-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s2);
  margin: 0 0 var(--s3);
  font: 600 0.75rem/1.45 var(--label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.clip-meer-kop span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--fg-3);
}
.clip-kijk { font: 500 0.75rem/1.4 var(--lees); color: var(--fg-3); }

.clip-kaart { display: grid; gap: 0.4rem; width: 10.5rem; text-decoration: none; }
/* Een clip ligt in een slot, net als alles wat je kunt oppakken. */
.clip-beeld {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--bg-3);
  border: 2px solid var(--rand-k2);
  border-radius: var(--r);
  box-shadow: var(--hef);
  overflow: hidden;
  transition: transform var(--snel), box-shadow var(--snel);
}
.clip-kaart[data-kant='noord'] .clip-beeld { border-color: var(--noord-vlak); }
.clip-kaart[data-kant='zuid'] .clip-beeld { border-color: var(--zuid-vlak); }
.clip-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-kaart:hover .clip-beeld { transform: translateY(-2px); box-shadow: var(--hef-op); }
.clip-duur {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.25em 0.55em;
  background: rgb(0 0 0 / 0.78);
  color: #fff;
  border-start-end-radius: var(--r-s);
  font: 600 0.75rem/1.3 var(--label);
}
.clip-titel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.3;
}
.clip-wie { font: 600 0.6875rem/1.4 var(--label); color: var(--fg-2); }
.clip-wie i { font-style: normal; opacity: 0.85; }
.clip-kaart:hover .clip-titel { text-decoration: underline; text-underline-offset: 2px; }

/* Op een breed scherm werd de speler 1180 px breed en at hij de pagina op.
   Twee kolommen: de clip links, de volgende clips rechts als lijst - dat
   leest als "en hierna", en het is de hoogte van de speler die de lijst
   begrenst in plaats van andersom. */
@media (min-width: 980px) {
  .bord-clip > .omhulsel {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start;
  }
  /* Expliciet plaatsen. Met automatische plaatsing viel het bijschrift van
     de clip in de rechterkolom en de lijst eronder in de linker. */
  .bord-clip .bord-kop { grid-column: 1 / -1; grid-row: 1; }
  .clip-speler { grid-column: 1; grid-row: 2; }
  .clip-onder { grid-column: 1; grid-row: 3; }
  .clip-meer { grid-column: 2; grid-row: 2 / 4; margin-top: 0; }
  .bord-clip .bord-noot { grid-column: 1 / -1; grid-row: 4; }
  .clip-spoor {
    flex-direction: column;
    overflow: visible;
    margin-inline: 0;
    padding: 0;
    gap: 0.75rem;
  }
  .clip-kaart {
    width: 100%;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    min-width: 0;
    column-gap: var(--s4);
    row-gap: var(--s1);
    align-items: start;
  }
  .clip-kaart .clip-beeld { grid-row: 1 / span 3; }
  .clip-kaart .clip-titel,
  .clip-kaart .clip-wie,
  .clip-kaart .clip-kijk { grid-column: 2; }
}

/* De uitgang uit de speler staat bij het blok zelf, niet bovenaan de
   pagina: hij is pas nuttig als je er met Tab vlak voor staat.
   Wegschuiven met transform werkt hier niet: de omhulsel knipt niets af,
   dus de link bleef gewoon staan. Hij wordt dus echt weggehaald en komt
   pas terug als hij de focus krijgt. */
.overslaan-hier {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  transform: none;
}
.overslaan-hier:focus {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  display: inline-block;
  margin-bottom: 0.6rem;
}
#na-de-clip { scroll-margin-top: 2rem; }

/* ---------- 12d. Het verhaal, als blok ---------- */

/* Vier cijfers, vier blokken. Dit is het anker van het verhaalblok: je
   leest in een halve seconde of het een drukke dag was. */
.verhaal-cijfers {
  margin: 0 0 1.4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
/* Niet over de volle breedte uitrekken: op 1180 px werd elk blok bijna drie
   keer zo breed als het getal erin en dreef het cijfer in het midden van een
   leeg vlak. Vier blokken van hooguit 11rem naast elkaar, links uitgelijnd. */
@media (min-width: 560px) {
  .verhaal-cijfers {
    grid-template-columns: repeat(4, minmax(0, 11rem));
    justify-content: start;
  }
}
.verhaal-cijfers > div {
  display: grid;
  gap: 0.1rem;
  align-content: start;
  padding: var(--s3) var(--s4) var(--s4);
  background: var(--bg-2);
  border: 1px solid var(--rand-k);
  border-radius: var(--r);
  box-shadow: var(--hef);
}
.verhaal-cijfers dt {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.verhaal-cijfers dd {
  margin: 0;
  font: 600 0.6875rem/1.4 var(--label);
  text-transform: uppercase;
  color: var(--fg-2);
}

.verhaal-lead {
  margin: 0 0 1.4rem;
  text-wrap: pretty;
  font: 400 clamp(1.0625rem, 4.2vw, 1.1875rem)/1.55 var(--lees);
  color: var(--fg);
  max-width: 52ch;
}

/* Een bewering met zijn bron. De kantkleur is een dikke blokrand links,
   niet een haarlijn: je moet van drie meter kunnen zien of dit Noord of
   Zuid is. */
.verhaal-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.verhaal-mini li {
  padding: var(--s4);
  background: var(--bg-2);
  border: 1px solid var(--rand-k);
  border-radius: var(--r);
  box-shadow: var(--hef);
  border-left: 6px solid var(--rand-k2);
}
.verhaal-mini li[data-kant='noord'] { border-left-color: var(--noord-vlak); }
.verhaal-mini li[data-kant='zuid'] { border-left-color: var(--zuid-vlak); }
.verhaal-mini li[data-kant='beide'] {
  border-left-color: var(--noord-vlak);
  background-image: linear-gradient(var(--noord-vlak) 50%, var(--zuid-vlak) 50%);
  background-size: 6px 100%;
  background-position: -6px 0;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box;
}
.verhaal-mini p { margin: 0; font: 400 1rem/1.55 var(--lees); max-width: 56ch; }
.mini-bronnen { margin-top: 0.45rem !important; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.mini-bron {
  display: inline-flex;
  align-items: center;
  min-height: var(--tik);
  font: 600 0.8125rem/1.2 var(--label);
  color: var(--fg);
  text-decoration: none;
  padding: var(--s2) var(--s3);
  background: var(--bg-3);
  border: 1px solid var(--rand-k);
  border-radius: var(--r-s);
  transition: background var(--snel), border-color var(--snel);
}
.mini-bron:hover { background: var(--bg-2); border-color: var(--rand-op); }
.mini-geen { color: var(--fg-3); background: none; border-style: dashed; }
.mini-plus { font: 500 0.8125rem/1.2 var(--label); color: var(--fg-2); }

.verhaal-deur { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }

/*
   De knop. Een grasblok dat je indrukt: groen vlak, harde omlijning, een
   ondervlak van vier pixels. Bij :active verdwijnt dat ondervlak en zakt
   de knop die vier pixels naar beneden - precies wat een knop in het spel
   doet, en het is het enige wat deze site aan tactiele taal heeft.
*/
.deur {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tik);
  padding: var(--s3) var(--s5);
  background: var(--gras);
  color: #fff;
  border-radius: var(--r-s);
  box-shadow: var(--hef);
  font: 600 1rem/1.2 var(--label);
  text-decoration: none;
  transition: background var(--snel), transform var(--snel), box-shadow var(--snel);
}
/* Doorzichtig wit haalde AA niet op het groen; het onderscheid komt nu
   van de maat en niet van de dekking. */
.deur span { color: #fff; font-size: 0.8125rem; opacity: 0.9; }
.deur:hover { background: var(--gras-d); box-shadow: var(--hef-op); }
.deur:active { box-shadow: none; transform: translateY(2px); }
.deur-fijn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tik);
  font: 500 0.9375rem/1.2 var(--lees);
  color: var(--fg-2);
  text-underline-offset: 4px;
}
.deur-fijn:hover { color: var(--fg); }

/* ---------- 12e. Het beeld ---------- */

.vid-raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 0.7rem;
}
@media (min-width: 620px) { .vid-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 1rem; } }
@media (min-width: 980px) { .vid-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.vid { display: grid; gap: 0.45rem; text-decoration: none; align-content: start; }
.vid-beeld {
  position: relative;
  display: block;
  /* hqdefault is 480x360; het beeld zelf is 16:9 met zwarte balken boven
     en onder. Door de tegel op 16:9 te zetten en te laten vullen snijden
     we precies die balken weg. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-3);
  border: 2px solid var(--rand-k2);
  border-radius: var(--r);
  box-shadow: var(--hef);
  transition: transform var(--snel), box-shadow var(--snel);
}
.vid[data-kant='noord'] .vid-beeld { border-color: var(--noord-vlak); }
.vid[data-kant='zuid'] .vid-beeld { border-color: var(--zuid-vlak); }
.vid-val {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--fg-2);
}
/* Geen eigen achtergrond op de afbeelding zelf: een nog niet geladen img
   schildert die wel degelijk en dekte daarmee de initialen eronder af -
   precies in het geval waarvoor ze bedoeld waren. De achtergrond hoort bij
   het vlak, de afbeelding legt zich erbovenop zodra hij er is. */
.vid-beeld img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Een tegel komt bij aanwijzen een paar pixels omhoog en zijn ondervlak
   groeit mee: het blok steekt uit de muur. Geen inzoomen op het beeld -
   dat is een filmische beweging en die hoort hier niet. */
.vid:hover .vid-beeld { transform: translateY(-2px); box-shadow: var(--hef-op); }
@media (prefers-reduced-motion: reduce) { .vid:hover .vid-beeld { transform: none; box-shadow: var(--hef-op); } }

/* Een short is een vorm, geen gebeurtenis. Rood is op deze site voorbehouden
   aan live en aan vandaag, dus dit merkje staat op het donkere kader - dat
   haalt bovendien 13:1 in plaats van de 4,2:1 die rood haalde. */
.vid-merk {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0.25em 0.55em;
  background: rgb(0 0 0 / 0.78);
  color: #fff;
  border-end-start-radius: var(--r-s);
  font: 600 0.75rem/1.3 var(--label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vid-titel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vid-wie {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font: 600 0.6875rem/1.4 var(--label);
  color: var(--fg-2);
}
.vid-wie i { font-style: normal; flex: 0 0 auto; }
.vid:hover .vid-titel { text-decoration: underline; text-underline-offset: 2px; }

/* Binnen de dagpagina staat het raster in het artikel: geen eigen
   buitenmarge, wel dezelfde scheiding als de blokken eromheen. */
.bord-in-artikel { padding-block: clamp(1.75rem, 5vw, 2.5rem) 0; background: none; border: 0; }

/* ---------- 12f. De grens, kort ---------- */

/* Het eerlijkste blok van de site staat op steen: een vlak dat opzettelijk
   kouder is dan de rest, zodat het niet meelacht met de rest van de pagina. */
.bord-grens {
  background: var(--bg-3);
  border-top: 1px solid var(--rand-k);
}
.grens-rij { display: grid; gap: 1.5rem; }
@media (min-width: 820px) { .grens-rij { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem; } }
.grens-lead { margin: 0; font: 400 1rem/1.6 var(--lees); color: var(--fg-2); max-width: 58ch; }
.grens-cijfer { margin: 0.9rem 0 0; font: 400 0.9375rem/1.6 var(--lees); color: var(--fg-2); max-width: 58ch; }
.grens-cijfer b { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.grens-deur { margin: 1.2rem 0 0; }
.grens-vragen .etiket { margin: 0 0 0.6rem; }
.grens-vragen ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.grens-vragen li {
  padding: var(--s3) var(--s4);
  background: var(--bg-2);
  border: 1px solid var(--rand-k);
  border-radius: var(--r);
  box-shadow: var(--hef);
  font: 400 0.9375rem/1.55 var(--lees);
  color: var(--fg-2);
}

/* ---------- 12g. Het ritme: de dagen hiervoor, als landschap ---------- */

/*
   Het bord zei alleen iets over nu. Dit blok zegt iets over de aanloop, en
   het is de enige plek op de voorpagina waar meer dan een dag tegelijk te
   zien is.

   DE VORM IS DE VORM VAN DE REST
     Een kolom is dezelfde staaf-in-een-slot als in de dagbalk: een hol vakje
     met een blok erin dat van onderaf vult. Een lege dag blijft een leeg
     slot en wordt nooit een streep van nul pixels, want dat leest als een
     renderfout in plaats van als nieuws.

   DE BODEM IS CHROOM, GEEN DATA
     Onder de drie stroken ligt aarde en daaronder steen. Die twee vlakken
     zijn zestien bij zestien pixels, getekend tijdens het bouwen (zie
     blokken.mjs) en dus van ons - geen textuur uit de game-jar, want die is
     van Mojang en heeft geen vrije licentie. Steen en aarde dragen hier het
     blok en betekenen nooit iets over de cijfers; dat is dezelfde regel als
     voor gras en eik in de rest van de site.

   WAAROM DE KOLOMMEN GEEN LINKS ZIJN
     Vijftien kolommen maal drie stroken is vijfenveertig tabstops op een
     pagina die er nu vierentwintig heeft. Elke strook is daarom een
     role="img" met zijn samenvatting in het label, net als het rooster en
     het dekkingsraster. Navigeren doe je in de kalender eronder.
*/

.bord-ritme {
  background: var(--lucht);
  border-block: 1px solid var(--rand-k);
}

.ritme-lead {
  margin: 0 0 1.5rem;
  text-wrap: pretty;
  font: 400 1rem/1.6 var(--lees);
  color: var(--fg-2);
  max-width: 60ch;
}

/* Het landschap is één blok: drie stroken, de datums, en daaronder de
   grond. De onderdelen sluiten op elkaar aan zonder tussenruimte, want het
   is een doorsnede en geen stapeltje kaartjes. */
.landschap { margin: 0 0 1.75rem; }

.strook + .strook { margin-top: 1rem; }

.strook-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  margin: 0 0 0.45rem;
}
.strook-kop b {
  font: 700 0.9375rem/1 var(--label);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.strook-kop i {
  font: 400 0.8125rem/1.3 var(--lees);
  font-style: normal;
  color: var(--fg-3);
}

.kolommen {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(2px, 0.7vw, 6px);
  height: clamp(52px, 12vw, 86px);
}

/* Het holle vakje. De kolom zelf is altijd vol hoog: dat is het aanwijsvlak,
   zodat ook een dag met drie clips een vlak van tweeenveertig pixels heeft
   om op te blijven staan met de muis. Wat je ziet zit in ::after. */
.kolom {
  position: relative;
  background: var(--leeg);
  border: 1px solid var(--rand-k);
  border-radius: 4px;
  box-shadow: var(--hol);
}
.kolom::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  /* --h is de waarde gedeeld door de hoogste dag in diezelfde strook. De
     twee pixels erbij zijn de randen die dit blok over het slot heen legt;
     zonder die correctie staat een kolom van 100% net te laag. */
  height: calc(var(--h, 0) * 100% + 2px);
  background: var(--line-2);
  border-radius: 4px;
  transform-origin: bottom center;
}
/* Een dag zonder een enkele telling houdt zijn lege slot. */
.kolom[data-leeg]::after { content: none; }

.kolom[data-kant='noord']::after { background: var(--noord-vlak); }
.kolom[data-kant='zuid']::after { background: var(--zuid-vlak); }
.kolom[data-vandaag] { border-color: var(--signal); }
.kolom[data-vandaag]::after { background: var(--signal-vlak); }

/* De datums. Op een telefoon passen vijftien pixellabels niet naast elkaar
   en worden het vijftien grijze vegen; het bereik staat dan al in de kop
   van het blok ("19 sep tot 3 okt"). Zelfde afweging als bij .streep .nr. */
.as {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(2px, 0.7vw, 6px);
  margin: 0.4rem 0 0;
  padding: 0;
}
.as li {
  font: 600 0.6875rem/1.2 var(--label);
  text-align: center;
  color: var(--fg-3);
  overflow: hidden;
}
.as li[data-vandaag] { color: var(--signal); }
@media (max-width: 759px) { .as { display: none; } }

/* De grond. Twee banden van zestien bij zestien pixels, 1:2 geschaald zodat
   een getekende pixel twee schermpixels wordt en je ziet dat het pixelwerk
   is. image-rendering: pixelated, want interpolatie maakt er precies de waas
   van die op deze site nergens voorkomt. */
.aardlaag,
.steenlaag {
  margin: 0;
  border: 1px solid var(--rand-k);
  image-rendering: pixelated;
}
.aardlaag {
  height: 16px;
  margin-top: var(--s2);
  border-bottom: 0;
  border-start-start-radius: var(--r-s);
  border-start-end-radius: var(--r-s);
  background: url('/assets/img/aarde.svg') 0 0 / 32px 32px repeat;
  box-shadow: inset 0 3px 0 rgb(255 255 255 / 0.14);
}
.steenlaag {
  height: 30px;
  border-top: 0;
  border-end-start-radius: var(--r-s);
  border-end-end-radius: var(--r-s);
  background: url('/assets/img/steen.svg') 0 0 / 32px 32px repeat;
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.3);
}
/* Bij nacht staat de hele pagina op nachtblauw; steen op daglichtsterkte
   is daar een lamp. Een vaste verdonkering, geen animatie, geen blur. */
@media (prefers-color-scheme: dark) {
  .aardlaag, .steenlaag { filter: brightness(0.62); }
}

/* --- De kalender --- */

.kalender-blok { max-width: 34rem; }
.kalender-dagen,
.kalender-raster {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 2.75rem));
  justify-content: start;
  gap: var(--s1);
}
.kalender-dagen span {
  font: 600 0.6875rem/1.6 var(--label);
  text-align: center;
  color: var(--fg-3);
}
.kalender-raster { margin-top: 2px; }
.kalender-raster > * {
  aspect-ratio: 1;
  display: block;
  text-decoration: none;
}

/* Vier standen, en ze moeten alle vier van elkaar te onderscheiden zijn -
   in beide kleurstanden, want dat is waar dit raster de eerste keer op
   stukging.

   De intensiteit loopt over INKT en niet over een datakleur: noord en zuid
   zeggen "kant", en dat zou hier een bewering zijn die dit raster niet doet.
   Inkt die oploopt zegt alleen "meer", en dat is precies wat het is. Let op
   dat inkt bij dag donker is en bij nacht licht: de ladder loopt dus van de
   achtergrond weg, niet naar zwart toe. Daarom staat er in het bijschrift
   "hoe sterker het opvalt" en niet "hoe donkerder" - dat laatste klopte
   alleen in de lichte stand. */
.kalender-raster > * { border-radius: var(--r-s); }
.kalender-raster [data-stand='gemeten'] {
  background: var(--leeg);
  border: 1px solid var(--rand-k);
  box-shadow: var(--hol);
}
.kalender-raster [data-trap='1'] { background: var(--line-2); }
.kalender-raster [data-trap='2'] { background: var(--fg-3); }
.kalender-raster [data-trap='3'] { background: var(--fg-2); }
.kalender-raster [data-trap='4'] { background: var(--fg); }

/* Een seizoensdag die nog moet komen: een leeg vak met een harde omlijning,
   zoals een slot waar nog niets in ligt.

   Dit stond eerst op --leeg, dezelfde verf als de laagste trap van de
   ladder hierboven. Gevolg: een dag die nog moet gebeuren zag er precies
   uit als een dag met een beetje activiteit - en dat is nou net het verschil
   waar dit raster over gaat. Nu is het paneelkleur: lichter dan elke
   gemeten dag, in allebei de standen. */
.kalender-raster [data-stand='komt'] {
  background: var(--bg-3);
  border: 1px solid var(--rand-k2);
  box-shadow: var(--hol);
}
/* Niet afgezocht. Alleen een lijn: er is hier geen vakje, er is hier geen
   meting. Dat is iets anders dan een dag waarop niets gebeurde. */
.kalender-raster [data-stand='buiten'] {
  background: none;
  border: 1px dashed var(--rand-k2);
}
.kalender-raster [data-vandaag] {
  background: var(--signal-vlak);
  border-color: var(--signal);
}
.kalender-raster a:hover { border-color: var(--rand-op); box-shadow: var(--hef); }
.kalender-raster a:active { box-shadow: none; transform: translateY(2px); }

.kalender-noot {
  margin: 0.7rem 0 0;
  font: 400 0.8125rem/1.6 var(--lees);
  color: var(--fg-2);
  max-width: 54ch;
}

/* Op papier gaan de twee grondbanden eruit. Het zijn twee verzadigde
   vlakken van een paar duizend vierkante pixels die niets zeggen over de
   cijfers; ze dragen de doorsnede op het scherm en kosten op papier alleen
   toner. Dezelfde afweging als bij de vlakkleuren verderop in @media print.
   De kolommen, de datums en de kalender blijven wel staan. */
@media print {
  .aardlaag, .steenlaag { display: none; }
  .landschap { padding-bottom: 0.5rem; border-bottom: 1pt solid #000; }
}

@media (min-width: 900px) {
  /* Op een breed scherm staat de kalender naast de voet van het blok in
     plaats van eronder: anders eindigt een blok van een schermhoogte met
     een halve meter wit naast een raster van zeven kolommen. */
  .bord-ritme > .omhulsel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 2.5rem;
  }
  .bord-ritme .bord-kop,
  .bord-ritme .ritme-lead { grid-column: 1 / -1; }
  .landschap { grid-column: 1; }
  .kalender-blok { grid-column: 2; grid-row: 3 / span 2; }
  .bord-ritme .bord-noot { grid-column: 1; margin-top: 1.25rem; }
}

/* ---------- 12h. Kop van de site op het bord ---------- */

/* Vier menu-items passen niet op 390 px naast het woordmerk. Ze krijgen daar
   hun eigen regel eronder, een maat kleiner, en ze nemen de volle breedte:
   met "Wat we niet weten" erbij past dat precies. Eerder schoven ze weg en
   stond er een half afgekapt woord in de kop, wat als kapot las in plaats
   van als scrollbaar. Het scrollen blijft als vangnet voor schermen onder
   de 360 px.

   10px is geen willekeurige maat: Silkscreen is een bitmapletter en staat op
   hele pixels. 10 en 11 zijn scherp, alles ertussenin wordt vaag. */
@media (max-width: 560px) {
  .hoofdmenu {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    margin-left: 0;
    width: 100%;
    gap: 0.15rem;
  }
  .hoofdmenu::-webkit-scrollbar { display: none; }
  .hoofdmenu a { white-space: nowrap; font-size: 10px; padding: 0.5rem 0.35rem; }
  .bord-pagina .ondertitel { display: none; }
}

@media print {
  /* Op papier is zowel de nacht- als de dagstand zinloos: wit vel, zwarte
     inkt, en Noord/Zuid in tinten die ook in grijs te onderscheiden zijn.
     Ook de vlakkleuren gaan mee terug, anders drukt een verzadigd blok als
     een grijze pleur af en kost het alleen maar toner. */
  :root {
    --bg:          #fff;
    --lucht:       #fff;
    --bg-2:        #f4f5f4;
    --bg-3:        #ebedec;
    --line:        #c3c8c6;
    --line-2:      #8d9693;
    --kader:       #000;
    --fg:          #000;
    --fg-2:        #333a37;
    --fg-3:        #555d5a;
    --noord:       #15476b;
    --noord-vlak:  #15476b;
    --noord-zacht: #dfe6ec;
    --zuid:        #6f4a00;
    --zuid-vlak:   #9a7320;
    --zuid-zacht:  #f0eadc;
    --signal:      #9b1c10;
    --signal-vlak: #9b1c10;
    --diamant-vlak:#cfe3e6;
    --gras:        #3c5a2c;
    --gras-d:      #2a4020;
    --gras-l:      #6c8a5c;
    --eik:         #5a4228;
    --leeg:        #d6dad8;
    --rand-k:      #9aa2a0;
    --rand-k2:     #6f7a77;
    --rand-op:     #000;
    /* Op papier bestaat een slagschaduw niet; hij kost alleen toner. */
    --hef:         none;
    --hef-op:      none;
    --hol:         none;
  }

  html { background: #fff; }
  body { background: #fff; color: #000; }

  .overslaan,
  .plafond,
  .dagbalk,
  .hoofdmenu,
  .blader,
  .vloer nav,
  .kr-wissel,
  .naar-krant,
  .gaten > a { display: none !important; }

  /* De waarschuwing bij voorbeelddata print mee. Een afdruk van nepdata
     zonder dat label is misleidend, en dat weegt zwaarder dan de opmaak. */
  .nepdata {
    border: 2px solid var(--signal) !important;
    background: #fff !important;
    color: var(--signal) !important;
    padding: 2mm 0;
  }
  .nepdata p { font-size: 8pt; color: var(--signal) !important; }

  .omhulsel { max-width: none; padding-inline: 0; }
  a { color: #000; }

  /* --- Het kopblad: op papier draagt de krantpagina zelf de naam --- */
  .blad .kr-hoofd {
    display: block;
    border-bottom: 2.5pt solid #000;
    padding-bottom: 2mm;
    margin-bottom: 0;
  }
  .blad .kr-merk {
    display: block;
    font-family: var(--display);
    font-weight: 800;
    font-size: 28pt;
    line-height: 0.88;
    letter-spacing: -0.03em;
    margin: 0 0 1.2mm;
  }
  .blad .kr-merk span { color: var(--signal); }
  .blad .kr-editie,
  .blad .kr-datum,
  .blad .kr-stempel {
    display: inline;
    font-size: 7.5pt;
    color: #000;
  }
  .blad .kr-editie::after,
  .blad .kr-datum::after { content: ' \00b7 '; }
  .blad .kr-stempel { color: var(--fg-2); }

  .blad .krant { padding-block: 0; }
  .blad .kr-titelblok { padding-block: 4mm 3mm; }
  .blad .kr-kicker { font-size: 7pt; margin-bottom: 2.5mm; }
  .blad .krant h1 { max-width: none; }
  .blad .krant h1[data-lengte='kort']   { font-size: 40pt; }
  .blad .krant h1[data-lengte='middel'] { font-size: 31pt; }
  .blad .krant h1[data-lengte='lang']   { font-size: 23pt; }
  .blad .kr-onderkop { font-size: 12pt; line-height: 1.38; max-width: 62ch; margin-top: 3mm; }

  /* --- Drie kolommen, 9,5pt op 13pt. Vanaf hier is --kr-regel 13pt. --- */
  /* 8,75pt op 12pt geeft in een kolom van 56mm zo'n 44 tekens. Dat is de
     krantenmaat, en belangrijker: het geeft genoeg afbreekpunten per regel
     om uitvullen schoon te houden. Bij 9,5pt werden regels met een geciteerde
     titel in hoofdletters - die breken nergens - één groot gat. In print
     breken we daarom ook agressiever af dan op het scherm: een staart van
     twee letters mag, zoals in elke krant. */
  .blad .kr-corpus {
    --kr-regel: 12pt;
    columns: 3;
    column-gap: 6mm;
    font-size: 8.75pt;
    line-height: 12pt;
    text-align: justify;
    hyphenate-limit-chars: 6 3 2;
    padding-top: 10pt;
    orphans: 3;
    widows: 3;
  }
  .blad .kr-lead { font-size: 10pt; line-height: 12pt; }
  .blad .kr-tussenkop { font-size: 9.25pt; line-height: 12pt; }
  .blad .kr-kant { font-size: 6pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .blad .kr-vlag { font-size: 0.88em; }
  .blad .kr-noot { font-size: 6.5pt; }
  .blad .kr-noot a { border-bottom: 0; }
  .blad .kr-rubriek { font-size: 7.5pt; line-height: 12pt; }

  .blad .kr-streamer { border-top: 1.5pt solid #000; }
  .blad .kr-streamer-kicker { font-size: 6pt; }
  .blad .kr-streamer blockquote p { font-size: 15pt; }
  .blad .kr-streamer figcaption { font-size: 7pt; }

  .blad .kr-cijfers {
    background: var(--bg-2);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: 3mm 3mm 2.5mm;
  }
  .blad .kr-cijfers h2 { font-size: 10pt; }
  .blad .kr-cijfers dt { font-size: 7pt; }
  .blad .kr-cijfers dd { font-size: 9.5pt; }
  .blad .kr-cijfers-dekking { font-size: 7.5pt; }
  .blad .kr-cijfers-dekking b { font-size: 9.5pt; }
  .blad .kr-cijfers-noot { font-size: 6.5pt; }

  .blad .kr-noten { border-top: 1.5pt solid #000; }
  .blad .kr-noten h2 { font-size: 6.5pt; }
  .blad .kr-noten ol { font-size: 7.5pt; line-height: 1.3; }
  .blad .kr-wie { font-size: 7pt; }
  .blad .kr-wanneer { font-size: 6.5pt; }
  /* Op papier kun je niet klikken: de URL moet erbij staan. */
  .blad .kr-noten a { text-decoration: none; }
  .blad .kr-noten a[href^='http']::after {
    content: ' ' attr(href);
    font: 6pt/1.3 var(--krant);
    color: var(--fg-2);
    word-break: break-all;
  }

  /* Gaten en colofon horen bij elkaar: samen op één vel, of samen door
     naar het volgende. Een colofon zonder zijn blok is een weesregel. */
  .blad .kr-gaten { margin-top: 4mm; padding-top: 2.5mm; break-inside: avoid; }
  .blad .kr-gaten h2 { font-size: 6.5pt; margin-bottom: 2mm; }
  .blad .kr-gaten ul { font-size: 8.5pt; line-height: 1.4; gap: 1mm; max-width: none; }
  .blad .kr-colofon { font-size: 6.5pt; margin-top: 3.5mm; max-width: none; break-before: avoid; }
  .blad .vloer { display: none; }
}


/* ============================================================
   13. De bewegingslaag
   ------------------------------------------------------------
   Beweging is hier geen versiering. Elk stuk hieronder vertelt
   iets dat anders stilstaat:

     de teller loopt op     -> de klok van dit seizoen loopt
     de segmenten vullen    -> zoveel dagen zijn er geweest
     secties komen opzetten -> volgorde van lezen
     een blok zakt in       -> je hebt hem echt ingedrukt

   De vorm van de beweging hoort bij de vorm van de site. Waar het
   kan loopt een animatie in stappen (steps()) in plaats van
   vloeiend: een blokkenspel vervaagt niet, het schakelt. Vloeiend
   blijft alleen waar iets zich verplaatst, want een sprong zou
   daar als een storing lezen.

   Wat er NIET beweegt: een vakje dat "afvalt". Deze site weet
   niet wie er nog leeft; dat verzinnen zou de hele belofte van
   /grenzen/ breken. Zie de notitie in voorpagina.mjs.

   Alles staat uit onder prefers-reduced-motion: reduce, en alles
   animeert alleen transform, opacity en geregistreerde custom
   properties. Geen layout-eigenschappen, geen scroll-luisteraars.
   ============================================================ */

/* Een geregistreerde property is nodig: zonder @property is een
   custom property een string en interpoleert de browser hem niet. */
@property --tel {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.tel > i { font-style: normal; }

@keyframes optellen {
  from { --tel: 0; }
  to   { --tel: var(--doel); }
}
@keyframes opkomen {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes staafje {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
/* Een blok verschijnt niet, het wordt geplaatst: van te klein naar net te
   groot naar goed, in drie stappen. Dat leest als neerzetten. */
@keyframes vakje {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: none; }
}
@keyframes flitsen {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  /* De teller. De statische <i> blijft in de stroom staan zodat de
     breedte klopt en er niets verspringt; de geanimeerde telling ligt
     er met ::after overheen. Valt @property of de telling weg, dan
     blijft het echte getal gewoon staan. */
  .tel {
    position: relative;
    counter-reset: tel var(--tel);
    animation: optellen 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .tel > i { visibility: hidden; }
  .tel::after {
    content: counter(tel);
    position: absolute;
    inset: 0;
    visibility: visible;
  }

  /* De 22 dagen vullen zich van dag 1 naar dag 22, in stappen: elk segment
     is een dag, en een dag gebeurt in een keer. */
  .klok-segmenten i {
    animation: staafje 180ms steps(2, end) both;
    animation-delay: calc(var(--i) * 34ms);
  }

  .stip { animation: puls 1.6s steps(1, end) 12; }

  /* Secties komen op zodra ze in beeld schuiven. Scroll-driven CSS:
     geen luisteraar, geen JavaScript, en de browser doet het op de
     compositor. De begintoestand staat alleen aan waar het werkt,
     anders zou de inhoud onzichtbaar blijven in oudere browsers.

     De regels staan twee keer, en dat is geen slordigheid:

       @supports        de browser kan het zelf (Chrome 115+, Safari 26+)
       html.heeft-tijdlijn   de polyfill is geladen en heeft het overgenomen

     Waarom niet één keer? De polyfill van flackr hangt zich aan het
     animationstart-event. Een regel binnen @supports matcht in een browser
     zonder ondersteuning per definitie niet, die animatie start dus nooit,
     en dan ziet de polyfill hem ook nooit. Het overriden van CSS.supports()
     dat de polyfill doet verandert daar niets aan: dat is de JavaScript-
     functie, niet de at-regel die de CSS-parser al heeft afgewezen. Zie
     assets/vendor/scroll-timeline/HERKOMST.md. */
  @supports (animation-timeline: view()) {
    .bord > .omhulsel,
    .bord > .grens-rij {
      animation: opkomen 620ms cubic-bezier(0.32, 0.72, 0, 1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
  .heeft-tijdlijn .bord > .omhulsel,
  .heeft-tijdlijn .bord > .grens-rij {
    animation: opkomen 620ms cubic-bezier(0.32, 0.72, 0, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 42%;
  }

  /* De kolommen van het ritmeblok groeien uit de grond terwijl je erlangs
     scrollt. Dit is de enige beweging op deze site die aan de scrollpositie
     hangt in plaats van aan de tijd, en dat is precies de bedoeling: het
     landschap bouwt zich op in het tempo waarin je kijkt.

     De vertraging zit in animation-range en niet in animation-delay. Op een
     scroll-tijdlijn bestaat "wachten" niet - er is geen klok, er is alleen
     een positie - dus een delay zou domweg genegeerd worden. Elke kolom
     krijgt zijn eigen stukje van de doorloop via --i. */
  @supports (animation-timeline: view()) {
    .kolom::after {
      animation: staafje 1ms linear both;
      animation-timeline: view();
      animation-range: entry calc(12% + var(--i) * 1.6%) entry calc(46% + var(--i) * 1.6%);
    }
  }
  .heeft-tijdlijn .kolom::after {
    animation: staafje 1ms linear both;
    animation-timeline: view();
    animation-range: entry calc(12% + var(--i) * 1.6%) entry calc(46% + var(--i) * 1.6%);
  }
}

/*
   Indrukken. Elk aantikbaar blok verliest zijn ondervlak en zakt precies
   die afstand weg. Dat is geen schaalsprong en geen schaduwpuls maar
   hetzelfde gebaar als een knop in het spel, en het werkt ook zonder
   prefers-reduced-motion: het is feedback, geen animatie.
*/
.live-tegel:active .live-foto {
  transform: translateY(2px);
  box-shadow: none;
}
.clip-kaart:active .clip-beeld,
.vid:active .vid-beeld {
  transform: translateY(2px);
  box-shadow: none;
}

/* De telling is ook in de leestekst en in de cijferrij bruikbaar; de
   vorm van .tel is overal dezelfde, alleen de maat verschilt. */
.live-samen .tel { font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.verhaal-cijfers dt .tel { font: inherit; letter-spacing: inherit; }

/*
   Wat er in de laatste ronde bijkwam. Diamant, en die kleur betekent op
   deze site uitsluitend dit. Let op de formulering: een statische pagina
   kent geen vorig bezoek, wel de vorige ronde. Maak er dus nooit "nieuw
   sinds je vorige bezoek" van - dat zouden we niet waar kunnen maken.
*/
.vers {
  display: inline-block;
  margin-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  background: var(--bg-2);
  border: 1px solid var(--rand-k);
  border-left: 4px solid var(--diamant-vlak);
  border-radius: var(--r-s);
  font: 600 0.875rem/1.45 var(--label);
  color: var(--fg);
}
.vers::before {
  content: '';
  flex: none;
  width: 0.55em;
  height: 0.55em;
  border-radius: 2px;
  background: var(--diamant-vlak);
}

@media (prefers-reduced-motion: reduce) {
  .tel::after { content: none; }
  .tel > i { visibility: visible; }
  .live-tegel:hover .live-foto,
  .vid:hover .vid-beeld,
  .clip-kaart:hover .clip-beeld { transform: none; }
}

/* Scroll-driven animaties hebben op papier geen tijdlijn: zonder deze
   regel kan een blok dat bij het afdrukken nooit "in beeld geschoven" is
   als leeg vlak op het vel belanden. */
@media print {
  .bord > .omhulsel,
  .bord > .grens-rij,
  .klok-segmenten i,
  .kolom::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .tel::after { content: none !important; }
  .tel > i { visibility: visible !important; }
}

/* ---------- 15. Deelnemers: dezelfde vlakken, kleuren en tikmaat ---------- */
.profielen [hidden] { display: none !important; }
.deelnemers-pagina { padding-block: var(--s6); }
.profielen-kop { margin-bottom: var(--s6); }
.profielen-kop h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.15; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.profielen-kop h1 span { color: var(--fg-2); }
.profielen-kop p { max-width: 65ch; margin-block: var(--s3); }
.profiel-filters { display: flex; align-items: end; flex-wrap: wrap; gap: var(--s4); padding: var(--s5); background: var(--bg-2); border: 1px solid var(--rand-k); border-radius: var(--r); }
.profiel-filters label { display: flex; flex-direction: column; gap: var(--s2); font-size: 1rem; font-weight: 500; }
.profiel-zoek { flex: 1 1 17rem; }
.profiel-filters input[type="search"], .profiel-filters select { box-sizing: border-box; width: 100%; min-height: var(--tik); min-width: 0; padding: var(--s2) var(--s3); border: 1px solid var(--rand-op); border-radius: var(--r-s); background: var(--bg); color: var(--fg); font: inherit; }
.profiel-filters .profiel-favorieten-filter { flex-direction: row; align-items: center; min-height: var(--tik); cursor: pointer; }
.profiel-favorieten-filter input { width: 24px; height: 24px; margin: 0; accent-color: var(--gras); }
.profiel-knop { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); box-sizing: border-box; min-width: var(--tik); min-height: var(--tik); padding: var(--s2) var(--s3); border: 1px solid var(--rand-k); border-radius: var(--r-s); background: var(--bg-2); color: var(--fg); box-shadow: var(--hef); font: 500 0.9375rem/1.4 var(--label); text-decoration: none; cursor: pointer; overflow-wrap: anywhere; }
.profiel-knop:hover { border-color: var(--rand-op); background: var(--bg-3); }
.profiel-knop:active, .profiel-media-link:active, .deelnemer-kaart:has(.deelnemer-link:active) { box-shadow: none; transform: translateY(2px); }
.favoriet-knop[aria-pressed="true"] { background: var(--gras); border-color: var(--gras); color: #fff; }
.favoriet-knop[aria-pressed="true"]:hover { background: var(--gras-d); }
.profiel-resultaat { font-weight: 600; margin-block: var(--s5); }
.deelnemers-raster { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin: 0 0 var(--s6); padding: 0; }
.deelnemer-kaart { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--rand-k); border-top: 4px solid var(--noord-vlak); border-radius: var(--r); background: var(--bg-2); box-shadow: var(--hef); }
.deelnemer-kaart[data-kant="zuid"] { border-top-color: var(--zuid-vlak); }
.deelnemer-link { display: flex; flex: 1; align-items: center; gap: var(--s4); padding: var(--s4); border-radius: var(--r-s); text-decoration: none; }
.deelnemer-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--r); }
.deelnemer-voet .favoriet-knop { position: relative; z-index: 1; }
.deelnemer-link:hover h2 { text-decoration: underline; text-underline-offset: 0.18em; }
.deelnemer-link > div { min-width: 0; }
.deelnemer-link h2 { margin: var(--s1) 0; font-size: 1.125rem; line-height: 1.3; overflow-wrap: anywhere; }
.profiel-team { display: block; color: var(--noord); font: 600 0.8125rem/1.5 var(--label); }
[data-kant="zuid"] .profiel-team { color: var(--zuid); }
.profiel-gezicht { display: grid; place-items: center; position: relative; flex: 0 0 64px; width: 64px; height: 64px; border-radius: var(--r-s); overflow: hidden; background: var(--noord-zacht); color: var(--fg); font-size: 1.5rem; font-weight: 600; }
[data-kant="zuid"] .profiel-gezicht { background: var(--zuid-zacht); }
.profiel-gezicht img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.deelnemer-voet { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 0 var(--s4) var(--s4); }
.deelnemer-voet > span { font-size: 0.8125rem; color: var(--fg-2); }
.profiel-noot { color: var(--fg-2); font-size: 0.875rem; }
.profiel-noot a { display: inline-flex; align-items: center; min-height: var(--tik); text-underline-offset: 0.2em; }
.profiel-noot a:hover, .profiel-terug:hover { color: var(--fg); text-decoration-thickness: 2px; }
.profiel-leeg { padding: var(--s5); background: var(--bg-3); border-radius: var(--r); }
.profiel-terug { display: inline-flex; align-items: center; min-height: var(--tik); margin-bottom: var(--s5); text-underline-offset: 0.2em; }
.profiel-kop { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s5); }
.profiel-kop .profiel-gezicht { flex-basis: 96px; width: 96px; height: 96px; font-size: 2rem; }
.profiel-kop > div { flex: 1; min-width: min(16rem, 100%); }
.profiel-sectie { margin-block: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--rand-k); }
.profiel-sectie h2 { margin: 0 0 var(--s4); font-size: clamp(1.375rem, 3vw, 1.75rem); line-height: 1.3; }
.profiel-sectie > p { max-width: 75ch; }
.profiel-kanalen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--s4); list-style: none; padding: 0; }
.profiel-kanalen li { padding: var(--s5); background: var(--bg-2); border: 1px solid var(--rand-k); border-radius: var(--r); min-width: 0; overflow-wrap: anywhere; }
.profiel-kanalen h3 { margin: 0 0 var(--s3); }
.profiel-kanalen p { font-size: 0.9375rem; }
.profielen summary { box-sizing: border-box; min-height: var(--tik); padding-block: var(--s3); cursor: pointer; border-radius: var(--r-s); }
.profielen summary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.profiel-kanalen details { margin-top: var(--s3); }
.profiel-media { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); padding: 0; }
.profiel-media > li { background: var(--bg-2); border: 1px solid var(--rand-k); border-radius: var(--r); min-width: 0; box-shadow: var(--hef); }
.profiel-media-link { display: block; border-radius: var(--r); text-decoration: none; min-height: var(--tik); }
.profiel-media-link:hover strong { text-decoration: underline; text-underline-offset: 0.2em; }
.profiel-media-link img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r) var(--r) 0 0; }
.profiel-media-tekst { display: grid; gap: var(--s2); padding: var(--s4); overflow-wrap: anywhere; }
.profiel-media > li > p { padding: 0 var(--s4) var(--s4); margin: 0; }
.profiel-aanloop { margin-block: var(--s5); }
.profiel-aanloop > summary { font-weight: 600; }
@media (max-width: 960px) {
  .deelnemers-raster, .profiel-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .deelnemers-raster, .profiel-media { grid-template-columns: 1fr; }
  .profiel-filters { padding: var(--s4); }
  .profiel-filters > label { flex: 1 1 100%; }
}
@media print {
  .profiel-filters, .favoriet-knop, [data-opslag], .deelnemer-voet { display: none !important; }
  .deelnemer-kaart, .profiel-kanalen li, .profiel-media li { break-inside: avoid; box-shadow: none; }
}

/* Kijken en tijdlijn: dezelfde kleuren, bediening en maatvoering als profielen. */
.kijk-pagina [hidden] { display: none !important; }
.kijk-filters input::placeholder { color: var(--fg-2); opacity: 1; }
.kijk-pagina { padding-block: var(--s6); }
.kijk-intro { max-width: 78ch; margin-bottom: var(--s6); }
.kijk-intro h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.2; }
.kijk-pagina a { text-underline-offset: .2em; }
.kijk-pagina a:hover { text-decoration-thickness: 2px; }
.kijk-pagina p a, .kijk-staten a { display: inline-flex; align-items: center; min-height: var(--tik); }
.kijk-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s4); padding: var(--s5); background: var(--bg-3); border-radius: var(--r); }
.kijk-filters label { display: flex; flex-direction: column; gap: var(--s2); flex: 1 1 12rem; min-width: 0; font-weight: 500; }
.kijk-filters input, .kijk-filters select { box-sizing: border-box; width: 100%; min-height: var(--tik); border: 1px solid var(--rand-op); border-radius: var(--r-s); padding: var(--s2); background: var(--bg-2); color: var(--fg); font: inherit; }
.kijk-filters .kijk-favorieten { flex-direction: row; align-items: center; min-height: var(--tik); }
.kijk-favorieten input { width: 24px; min-height: 24px; height: 24px; accent-color: var(--gras); }
.kijk-filters button, [data-meer], .kijkvenster button { cursor: pointer; min-height: var(--tik); min-width: var(--tik); border: 1px solid var(--rand-op); border-radius: var(--r-s); padding: var(--s2) var(--s4); font: inherit; background: var(--bg-2); color: var(--fg); }
.kijk-filters button:hover, [data-meer]:hover, .kijkvenster button:hover { background: var(--bg-3); }
.kijk-lijst { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-block: var(--s5); }
.kijk-kaart { min-width: 0; padding: var(--s5); background: var(--bg-2); border: 1px solid var(--rand-k); border-left: 4px solid var(--noord-vlak); border-radius: var(--r); overflow-wrap: anywhere; }
.kijk-kaart[data-team='zuid'] { border-left-color: var(--zuid-vlak); }
.kijk-kaart[data-team='beide'] { border-left-color: var(--gras); }
.kijk-kaart h3 { margin: 0; font-size: 1.125rem; line-height: 1.5; }
.kijk-kaart h3 a { display: flex; align-items: center; min-height: var(--tik); }
.kijk-kaart p { margin-block: var(--s2); }
.kijk-toelichting, .speler-uitleg { color: var(--fg-2); font-size: .9375rem; }
.kijk-dekking { max-width: 80ch; margin-top: var(--s6); border-top: 1px solid var(--rand-k); padding-top: var(--s5); }
.kijk-ontwikkelingen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-block: var(--s6); }
.kijk-staten { border: 1px solid var(--rand-k); border-radius: var(--r); padding: var(--s5); background: var(--bg-3); }
.kijk-staten h2 { margin-top: 0; }
.kijk-tijdlijn { grid-template-columns: 1fr; max-width: 85ch; }
.kijkvenster { box-sizing: border-box; width: min(960px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: var(--s5); border: 1px solid var(--rand-op); border-radius: var(--r); color: var(--fg); background: var(--bg-2); }
.kijkvenster::backdrop { background: rgb(0 0 0 / .72); }
.speler-kop { display: flex; align-items: start; justify-content: space-between; gap: var(--s4); }
.speler-kop button { flex-shrink: 0; }
.speler-kop h2 { min-width: 0; margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.speler-vak iframe { display: block; border: 0; width: 100%; aspect-ratio: 16 / 9; min-height: 300px; }
.kijkvenster a { display: inline-flex; min-height: var(--tik); align-items: center; }
.speler-start { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--s4); min-height: 240px; padding: var(--s5); text-align: center; font-size: 1.5rem; background: var(--bg-3); border-radius: var(--r); }
.speler-start span { font-size: 1rem; }
.clip-speler:has(.speler-start) { aspect-ratio: auto; background: var(--bg-3); }
[data-oud] .stip { animation: none; background: var(--fg-2); }
@media (max-width: 700px) {
  .kijk-lijst, .kijk-ontwikkelingen { grid-template-columns: 1fr; }
  .kijkvenster { padding: var(--s3); }
  .kijk-filters { padding: var(--s4); }
}
@media print {
  .kijk-filters, [data-meer], .kijkvenster { display: none !important; }
  .kijk-kaart { break-inside: avoid; }
}