:root{
  /* Kalksteen: de gedeelde ondergrond van beide mozaieken. */
  --tessera:#E4DACA; --tessera-2:#D5C8B3; --stone:#F1EBDD; --stone-2:#F8F4EA;
  /* Inkt uit de voegen van het gladiatorenmozaiek. */
  --ink:#2E2120; --ink-soft:#57453F; --ink-mute:#897566; --ink-faint:#B4A491;
  /* Turkoois uit het badwater; de enige interactiekleur. */
  --teal:#2F6265; --teal-lift:#245053; --teal-soft:#7DABAC;
  /* Ossenbloed uit het gladiatorenmozaiek; spaarzaam, en alleen waar het brandt. */
  --hot:#7A3B2E;
  /* Oker uit de randen van beide beelden. */
  --gold:#8F6B3C; --gold-light:#C09A63;
  --rule:rgba(46,33,32,.17); --rule-faint:rgba(46,33,32,.075);
  --grout:rgba(46,33,32,.022);
  --lift:0 1px 0 rgba(255,255,255,.55),0 12px 30px -20px rgba(46,33,32,.55);

  --canvas:var(--tessera); --surface:var(--stone); --surface-2:var(--stone-2);
  --parchment-2:var(--tessera-2); --vellum:var(--stone);
  --text:var(--ink); --muted:var(--ink-soft); --dim:var(--ink-mute);
  --crimson:var(--teal); --crimson-deep:var(--teal-lift);
  --gilt:var(--gold); --gilt-deep:var(--gold);
  --column:var(--tessera-2);
  --blad:1240px; --tempo:.2s;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --tessera:#1B1916; --tessera-2:#262219; --stone:#221F1A; --stone-2:#2B2721;
  --ink:#EAE1CF; --ink-soft:#C7B8A0; --ink-mute:#95826C; --ink-faint:#6E5F4C;
  --teal:#7DB2B3; --teal-lift:#9ACACB; --teal-soft:#4E8184;
  --hot:#C87257;
  --gold:#C09A63; --gold-light:#DBBB84;
  --rule:rgba(192,154,99,.22); --rule-faint:rgba(192,154,99,.10);
  --grout:rgba(192,154,99,.028);
  --lift:0 1px 0 rgba(255,255,255,.04),0 16px 36px -22px #000;

  --canvas:var(--tessera); --surface:var(--stone); --surface-2:var(--stone-2);
  --parchment-2:var(--tessera-2); --vellum:var(--stone);
  --text:var(--ink); --muted:var(--ink-soft); --dim:var(--ink-mute);
  --crimson:var(--teal); --crimson-deep:var(--teal-lift);
  --gilt:var(--gold); --gilt-deep:var(--gold);
  --column:var(--tessera-2);
}}
:root[data-theme="dark"]{
  --tessera:#1B1916; --tessera-2:#262219; --stone:#221F1A; --stone-2:#2B2721;
  --ink:#EAE1CF; --ink-soft:#C7B8A0; --ink-mute:#95826C; --ink-faint:#6E5F4C;
  --teal:#7DB2B3; --teal-lift:#9ACACB; --teal-soft:#4E8184;
  --hot:#C87257;
  --gold:#C09A63; --gold-light:#DBBB84;
  --rule:rgba(192,154,99,.22); --rule-faint:rgba(192,154,99,.10);
  --grout:rgba(192,154,99,.028);
  --lift:0 1px 0 rgba(255,255,255,.04),0 16px 36px -22px #000;

  --canvas:var(--tessera); --surface:var(--stone); --surface-2:var(--stone-2);
  --parchment-2:var(--tessera-2); --vellum:var(--stone);
  --text:var(--ink); --muted:var(--ink-soft); --dim:var(--ink-mute);
  --crimson:var(--teal); --crimson-deep:var(--teal-lift);
  --gilt:var(--gold); --gilt-deep:var(--gold);
  --column:var(--tessera-2);
}
*,*::before,*::after{box-sizing:border-box}
body{
  background:var(--canvas);
  /* Een tesserae-raster van 22px met een haarfijne voeg. Twee lagen, geen beeldbestand.
     Bewust bijna onzichtbaar: het moet het papier tekenen, niet de tekst opeten. */
  background-image:
    repeating-linear-gradient(0deg,transparent 0 25px,var(--grout) 25px 26px),
    repeating-linear-gradient(90deg,transparent 0 25px,var(--grout) 25px 26px);
  color:var(--text);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:17.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.blad{width:min(var(--blad),100%);margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gilt);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:640;font-variation-settings:"SOFT" 22,"WONK" 1;letter-spacing:-.004em;margin:0}
.mono{font-family:"Geist Mono",ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums}

/* Labellaag. De assen staan hier een keer; per selector alleen de maat. opsz 9 omdat
   Fraunces per optische grootte anders getekend is en de 144-tekening zijn haarlijnen
   verliest onder ongeveer 14px. Afgesteld door Ben op docs/caps-lab.html. */
.bar .mark,.eyebrow,.welcome .salve,.starthere .badge,.sechead,.rail h3,.grouplabel{
  font-family:"Fraunces",Georgia,serif;
  font-weight:400;
  font-variation-settings:"opsz" 9,"wght" 600,"SOFT" 22,"WONK" 1;
  text-transform:uppercase}

/* Metadata: een jaartal of een looptijd leest mee met de zin, dus oude proportionele
   cijfers. Staat na .mono zodat een element met beide klassen hier uitkomt. */
.era-meta,.dur,.starthere .meta,.rail .c{
  font-family:"Source Serif 4",Georgia,serif;
  font-variant-numeric:oldstyle-nums proportional-nums;}

/* ---------- balk ---------- */
.bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:20px;
  height:58px;padding:0 28px;background:color-mix(in srgb,var(--canvas) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--rule)}
.bar .mark{font-size:12.5px;letter-spacing:.24em;
  text-transform:uppercase;white-space:nowrap;color:var(--text)}
.bar .mark b{color:var(--crimson);font-weight:600}
.bar .spacer{flex:1}
.bar .hint{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  font-family:"Geist Mono",monospace}
.bar .hint kbd{border:1px solid var(--rule);border-bottom-width:2px;border-radius:3px;
  padding:1px 5px;background:var(--surface)}
.themetoggle{width:32px;height:32px;cursor:pointer;display:grid;place-items:center;font-size:14px}


/* ---------- titelblok ---------- */
.mast{position:relative;padding:64px 0 40px;text-align:center}
.mast::before,.mast::after{content:"";position:absolute;top:52px;bottom:44px;width:10px;
  background:linear-gradient(90deg,var(--column) 0%,var(--ink-mute) 50%,var(--column) 100%);
  border-radius:2px;opacity:.55}
.mast::before{left:8px} .mast::after{right:8px}
@media(max-width:820px){.mast::before,.mast::after{display:none}}
.eyebrow{font-size:11px;letter-spacing:.30em;color:var(--crimson);
  text-transform:uppercase;margin:0 0 18px}
h1.title{font-size:clamp(38px,7.4vw,86px);line-height:.98;letter-spacing:-.008em;
  text-wrap:balance;margin:0 0 8px}
.motto{font-style:italic;color:var(--gilt-deep);font-size:clamp(15px,2vw,20px);margin:0 0 14px}
.sub{color:var(--muted);font-size:clamp(15px,1.7vw,18.5px);max-width:56ch;margin:0 auto}
.rule{height:0;border:0;border-top:1px solid var(--gilt);width:min(560px,86%);margin:32px auto 0;opacity:.75}

/* ---------- welkom ---------- */
.welcome{max-width:60ch;margin:34px auto 0;text-align:center;color:var(--muted);font-size:17px}
.welcome .salve{color:var(--crimson);letter-spacing:.2em;
  text-transform:uppercase;font-size:12px;display:block;margin-bottom:12px}
.counter{margin-top:18px;font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:.06em;
  color:var(--dim)}
.counter b{color:var(--crimson);font-weight:500}

/* ---------- cijfers ---------- */
.figures{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin:40px 0 0;
  border-top:1px solid var(--rule-faint);border-bottom:1px solid var(--rule-faint)}
.fig{flex:1 1 130px;padding:16px 18px;text-align:center;border-right:1px solid var(--rule-faint)}
.fig:last-child{border-right:0}
.fig b{display:block;font-family:"Geist Mono",monospace;font-size:21px;color:var(--crimson);
  font-weight:500;font-variant-numeric:tabular-nums}
.fig span{font-size:11.5px;letter-spacing:.07em;color:var(--dim);text-transform:uppercase}

/* ---------- start here ---------- */
.starthere{margin:52px 0 0;padding:30px 32px;background:var(--surface);
  border:1px solid var(--rule);border-left:4px solid var(--hot);box-shadow:var(--lift);
  display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
@media(max-width:700px){.starthere{grid-template-columns:1fr;gap:16px;padding:24px}}
.starthere .badge{font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:#F6F0E4;background:var(--hot);padding:7px 12px;
  white-space:nowrap;align-self:start}

.starthere h2{font-size:26px;margin:0 0 4px}
.starthere .meta{font-size:15px;color:var(--dim);
  letter-spacing:.05em;margin:0 0 12px}
.starthere p{margin:0 0 16px;color:var(--muted);max-width:70ch}

/* ---------- pick one for me ---------- */
.pick{margin:44px 0 0;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.pickbtn{display:flex;flex-direction:column;gap:3px;align-items:flex-start;padding:20px 30px;cursor:pointer;font:inherit;text-align:left}

.pickbtn:hover{transform:translateY(-2px)}
.pickbtn:active{transform:translateY(0)}
.pickbtn-k{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;opacity:.8}
.pickbtn-v{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:640;font-variation-settings:"SOFT" 22,"WONK" 1;font-size:23px;letter-spacing:-.004em;line-height:1.1}
.pick-note{margin:0;flex:1 1 240px;color:var(--dim);font-size:14px;max-width:44ch}

/* ---------- kopjes tussen de blokken ---------- */
.sechead{font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);margin:52px 0 14px}

/* ---------- categorieknoppen ---------- */
.formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.fmt{display:flex;flex-direction:column;gap:4px;align-items:flex-start;cursor:pointer;font:inherit;text-align:left;padding:24px 22px 22px;position:relative}

.fmt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;transform:scaleX(0);transform-origin:left}

.fmt[aria-pressed="true"]::after{transform:scaleX(1)}
.fmt-n{font-family:"Geist Mono",monospace;font-size:30px;line-height:1;color:var(--crimson);
  font-variant-numeric:tabular-nums;font-weight:500}
.fmt-t{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:640;font-variation-settings:"SOFT" 22,"WONK" 1;font-size:19px;letter-spacing:-.002em}
.fmt-s{font-size:13px;color:var(--dim)}

/* ---------- gereedschap ---------- */
.tools{position:sticky;top:58px;z-index:50;margin:44px 0 0;padding:14px 0 12px;
  background:color-mix(in srgb,var(--canvas) 92%,transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule)}
.searchrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#q{flex:1 1 260px;padding:12px 15px;font:inherit;font-size:16px;color:var(--text);
  background:var(--surface);border:1px solid var(--rule);border-radius:3px;
  transition:border-color var(--tempo),box-shadow var(--tempo)}
#q:focus{border-color:var(--gilt);box-shadow:0 0 0 3px rgba(184,146,60,.16);outline:none}
#q::placeholder{color:var(--ink-faint)}
.timerow{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:12px}
.timerow-k{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-right:4px}
.chip{font-size:12px;padding:11px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}



.chip-n{font-size:11px;opacity:.6;font-variant-numeric:tabular-nums}
.chip-strong{padding:12px 20px;font-size:13px;border-width:2px;border-color:var(--gilt);
  color:var(--text);white-space:nowrap}
.chip-clear{border-style:dashed;margin-left:auto}

/* De filterrij met thema's en periodes. Stond tot 2026-09-09 in het inline blok van
   build_pages.py; daar won hij van de mobiele overschrijving hieronder, omdat een inline
   <style> na de gekoppelde bestanden komt en de media-query geen extra gewicht geeft.
   Alle filterrijen horen nu in dit bestand. */
.voicerow{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:9px 0 0}
.voicelabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  margin-right:2px}

/* ---------- gereedschap op een smal scherm ---------- */
/* Gemeten 2026-09-09 op 375 bij 812 beeldpunten: deze balk was 668 hoog en stond sticky op
   58, dus hij hield 82% van het scherm bezet en ving elke tik die voor de lijst eronder
   bedoeld was. Op de Ancients-pagina was daardoor geen enkele aflevering aan te raken.
   Onder 960 plakt daarom alleen nog de bovenbalk van 58, en worden de filterrijen
   horizontale schuivers, zodat tien thema's op een regel blijven in plaats van te wikkelen
   tot zeven. De sprongdoelen krijgen dan ook hun eigen marge, want die 150 rekende op een
   plakkende balk die er niet meer is. */
@media(max-width:960px){
  .tools{position:static;top:auto;margin-top:26px;padding-top:12px}
  .timerow,.voicerow{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:3px}
  .timerow::-webkit-scrollbar,.voicerow::-webkit-scrollbar{display:none}
  .timerow>*,.voicerow>*{flex:0 0 auto}
  .chip-clear{margin-left:0}
  .era{scroll-margin-top:72px}
}

/* ---------- indeling ---------- */
.cols{display:grid;grid-template-columns:212px minmax(0,1fr);gap:52px;align-items:start;margin-top:8px}
@media(max-width:960px){.cols{grid-template-columns:1fr;gap:22px}}
.rail{position:sticky;top:136px;padding-top:34px}
@media(max-width:960px){.rail{display:none}}
.rail h3{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0 0 10px}
.rail a{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:baseline;
  padding:6px 0;border-bottom:1px solid var(--rule-faint);color:var(--muted);
  transition:color var(--tempo)}
.rail a:hover,.rail a.on{color:var(--crimson)}
.rail a.on{font-weight:600}
.rail .n{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:600;font-variation-settings:"SOFT" 22,"WONK" 1;font-size:11px;color:var(--gilt-deep)}
.rail .t{font-size:13.5px}
.rail .c{font-size:13.5px;color:var(--ink-faint)}

/* ---------- tijdvak ---------- */
.era{margin-top:54px;scroll-margin-top:150px;
  content-visibility:auto;
  /* Per as, en dat is de hele grap. "auto 900px" gaf een nog niet getekend tijdvak ook een
     BREEDTE van 900, waardoor main op een telefoon 900 breed werd en de pagina zijwaarts
     schoof; gemeten 2026-09-09 op all.html, scrollbreedte 936 op een scherm van 375. Met
     "none" op de breedte-as houdt alleen de hoogte zijn schatting, wat het enige is waar de
     schuifbalk hem voor nodig heeft. Een browser die de vorm niet kent laat de hele regel
     vallen en tekent gewoon door. */
  contain-intrinsic-size:auto none auto 900px}
.era-head{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:baseline;
  padding-bottom:12px;border-bottom:2px solid var(--ink)}
@media(max-width:640px){.era-head{grid-template-columns:auto 1fr}.era-meta{grid-column:2}}
.era-num{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:600;font-variation-settings:"SOFT" 22,"WONK" 1;font-size:30px;color:var(--gilt);line-height:1;min-width:54px}
.era h2{font-size:23px}
.era-note{margin:5px 0 0;font-size:14px;color:var(--dim);max-width:64ch}
.era-meta{text-align:right;font-size:14.5px;color:var(--dim);
  white-space:nowrap}
.era-span{color:var(--crimson);display:block}

.grouplabel{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);margin:26px 0 8px;display:flex;align-items:center;gap:12px}
.grouplabel::after{content:"";flex:1;height:1px;background:var(--rule-faint)}

/* ---------- item ---------- */
.item{border-bottom:1px solid var(--rule-faint)}
.item summary{display:grid;grid-template-columns:66px minmax(0,1fr) auto;gap:16px;
  align-items:baseline;padding:11px 0;cursor:pointer;list-style:none;
  transition:background var(--tempo)}
.item summary::-webkit-details-marker{display:none}
.item summary:hover{background:var(--surface-2)}
.item summary:hover .it{color:var(--crimson)}
.dur{font-size:15px;color:var(--dim);white-space:nowrap}
.it{font-size:16.5px;transition:color var(--tempo)}
.it .show{color:var(--dim);font-size:13.5px}
.tags{display:flex;gap:7px;align-items:center;white-space:nowrap}
.tag{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--rule-faint);padding:2px 6px;border-radius:2px}
.tag.canon{color:var(--hot);border-color:var(--hot);letter-spacing:.1em}
.body{padding:2px 0 20px 82px;max-width:74ch}
@media(max-width:640px){.item summary{grid-template-columns:56px 1fr}.tags{grid-column:2}
  .body{padding-left:0}}
.body p{margin:0 0 14px;color:var(--muted)}
.body .noverdict{font-style:italic;color:var(--ink-faint)}
.where{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.where a{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  padding:7px 12px;border:1px solid var(--rule);color:var(--muted);border-radius:2px;
  transition:var(--tempo)}
.where a:hover{background:var(--crimson);border-color:var(--crimson);color:var(--vellum);
  transform:translateY(-1px)}
:root[data-theme="dark"] .where a:hover,
:root:not([data-theme="light"]) .where a:hover{color:#1B1916}

.copy{background:transparent;cursor:pointer;font:inherit}
details[open] > summary .it{color:var(--crimson)}
/* ---------- genestelde reeks ---------- */
.run{margin:16px 0 0;border-top:1px solid var(--rule-faint);padding-top:12px}
.runlink{display:inline-block;margin-top:14px;font-family:"Geist Mono",monospace;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--teal);border-bottom:1px solid var(--teal);
  padding-bottom:2px}
.runlink:hover{color:var(--crimson-deep)}
.runlist-page{max-height:none;border-left:0;padding-left:0;margin-top:26px}
/* ---------- tijdvak- en seriekaarten op de voorpagina ---------- */
.eracards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-bottom:8px}
.eracard{display:flex;flex-direction:column;gap:4px;background:var(--surface);padding:20px 18px;
  transition:background var(--tempo)}
.eracard:hover{background:var(--surface-2)}
.eracard-n{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:600;font-variation-settings:"SOFT" 22,"WONK" 1;font-size:20px;color:var(--gold);line-height:1}
.eracard-t{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:640;font-variation-settings:"SOFT" 22,"WONK" 1;font-size:16px;letter-spacing:-.004em}
.eracard-s{font-size:13px;color:var(--teal)}
.eracard-c{font-size:11px;color:var(--dim)}
.mast-sub{padding:44px 0 26px}
.title-sub{font-size:clamp(30px,5vw,58px);letter-spacing:-.014em}
.eyebrow a{border-bottom:1px solid var(--rule)}
.run-head{cursor:pointer;list-style:none;font-family:"Geist Mono",monospace;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--teal);padding:4px 0}
.run-head::-webkit-details-marker{display:none}
.run-head::before{content:"+ ";font-weight:600}
.run[open] .run-head::before{content:"\2212 "}
.runlist{list-style:none;margin:10px 0 0;padding:0;max-height:460px;overflow-y:auto;
  content-visibility:auto;contain-intrinsic-size:auto 400px;
  border-left:2px solid var(--rule-faint);padding-left:14px}
.runrow{display:grid;grid-template-columns:38px minmax(0,1fr) 56px;gap:12px;align-items:baseline;
  padding:5px 0;border-bottom:1px solid var(--rule-faint)}
.runrow-n{font-size:11px;color:var(--ink-faint);text-align:right}
.runrow-t{font-size:14.5px;color:var(--muted)}
.runrow-t:hover{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.runrow-t-plat{color:var(--dim);cursor:default}
.runrow-t-plat::before{content:"";display:inline-block;width:5px;height:5px;margin:0 9px 3px 0;
  border:1px solid var(--gold);border-radius:50%;opacity:.7}
.runrow-t-plat:hover{color:var(--dim);text-decoration:none}
.runrow-d{font-size:11px;color:var(--dim);text-align:right}
.runrow.hide{display:none}

/* GEWIJZIGD DOOR CLAUDE, 2026-09-10, buiten zijn eigen paden.
   Reden: Ben meldde twee keer dat de filters op /rome/podcasts niets deden. Gemeten in de
   browser op de live pagina: klikken zette class="hide" op de juiste negen kaarten en alle
   vierentwintig bleven op display:flex staan, want de verbergregel somde .item, .era en
   .group op en .rank stond er niet bij. Codex' thread reageerde tien uur niet, dus dit is
   niet gevraagd maar genomen; draai het terug of herschrijf het zoals je wilt.
   De opsomming zelf is de fout: elke nieuwe filterbare elementsoort faalt hier stil tot
   iemand het merkt. Een enkele regel op .hide zou dat wegnemen. */
.item.hide,.era.hide,.group.hide,.rank.hide,.bk.hide,.book-group.hide{display:none}
.item.flash > summary{background:var(--parchment-2);box-shadow:inset 3px 0 0 var(--hot)}

/* ---------- voet ---------- */
.foot{margin-top:80px;padding:26px 0 60px;border-top:1px solid var(--rule);
  font-size:13.5px;color:var(--dim);max-width:74ch}
.foot a{color:var(--crimson);text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* BEGIN generator CSS handoff: ART, THEME, IFL; 2026-09-10.
   Preserve source order. Theme selectors also outrank the later pages.css rules;
   page-specific globals are restricted to the existing .thead / .ifl markup. */
/* Dichter op elkaar. Een rij was 44 beeld plus twee keer 11 ruimte, dus 66 pixels; met
   36 en twee keer 7 is dat 50. Op een themapagina van 180 regels scheelt dat 2.880 pixels,
   bijna een kwart van de scrollhoogte, zonder dat de cover onherkenbaar wordt. */
.item summary{grid-template-columns:36px 58px minmax(0,1fr) auto;gap:13px;align-items:center;
  padding:7px 0}
.thumb{width:36px;height:36px;border-radius:4px;display:block;
  background:var(--surface-2);border:1px solid var(--rule-faint);
  /* contain en niet cover: een 16:9-thumbnail en een 2:3-poster passen zo heel in het
     vierkante vak, met een strook grond ernaast. Cover zou ze bijsnijden. */
  object-fit:contain}
.thumb-x{display:grid;place-items:center;font-family:Fraunces,serif;font-weight:600;
  font-size:19px;color:var(--gilt);line-height:1;background:var(--parchment-2);
  border-color:var(--rule)}
.eracard .thumb{width:38px;height:38px;margin:0 0 8px}
/* Het merk. Naar het model van History Hit: een regel die zegt van wie dit is, groot
   genoeg om te lezen en klein genoeg om niet met de inhoud te concurreren. */
.merk{margin:0 0 4px;font-family:"Source Serif 4",Georgia,serif;font-size:17px;color:var(--text)}
.merk-w{color:var(--dim)}
.merk-n{font-family:Fraunces,serif;font-weight:600;letter-spacing:-.006em;
  color:var(--text);text-decoration:none;border-bottom:1px solid var(--rule)}
.merk-n:hover{color:var(--crimson);border-bottom-color:var(--crimson)}
.merk-p{margin:0 0 18px;font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gilt)}
.foot-fijn{margin:0}
.merk-mast{margin:14px 0 0;text-align:center;font-size:16px}
@media(max-width:640px){
  .item summary{grid-template-columns:32px 46px minmax(0,1fr);gap:9px;padding:6px 0}
  .thumb{width:32px;height:32px}
  .thumb-x{font-size:15px}
  .tags{grid-column:3}
}

/* De kop van een themapagina stond op 1009 pixels voordat de eerste regel begon, dus een
   heel scherm lezen voor je iets ziet. De inleiding en het gereedschap staan nu naast
   elkaar op een breed scherm en de witruimte eromheen is teruggebracht. Alles blijft
   staan; het staat alleen niet meer onder elkaar. */
body:has(.thead) .mast-sub{padding:10px 0 4px}
body:has(.thead) .mast-sub .eyebrow{margin-bottom:6px}
body:has(.thead) .mast-sub .title-sub{font-size:clamp(29px,4.2vw,42px)}
body:has(.thead) .mast-sub .sub{max-width:52ch;margin-left:auto;margin-right:auto}
body:has(.thead) .mast-sub .figrow{margin-top:8px}
body:has(.thead) .crumbs{margin-top:12px}
.thead .prose{margin:0;max-width:56ch}
.thead .pills{margin:0 0 12px}
.thead .tools{margin-top:0}
@media (min-width:900px){
  .thead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
    gap:12px 40px;align-items:start;margin:6px 0 12px}
  .thead .pills{justify-content:flex-start}
}
@media (max-width:899px){
  /* Op een telefoon kost de kop twee schermen voordat er iets in beeld komt. De
     inleiding blijft staan, want die is het onderwerp van de pagina; de meubels eromheen
     gaan eraf. De accentverdeling verdwijnt uit de cijferregel omdat die als knoppen
     verderop staat, en de deurbeschrijving in de bovenregel is dubbel met de inleiding. */
  .thead{display:flex;flex-direction:column}
  .thead .tcol{order:-1}
  .thead .prose{margin:16px 0 0;font-size:15.5px;line-height:1.5}
  /* Acht showlinks stapelden zich op een telefoon tot acht regels en duwden de lijst
     zeshonderd pixels naar beneden. Ze staan nu op een rij die zijwaarts schuift, dus ze
     blijven allemaal bereikbaar en kosten een regel. */
  .thead .pills{margin:0 -18px 10px;padding:0 18px;display:flex;flex-wrap:nowrap;
    overflow-x:auto;gap:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .thead .pills::-webkit-scrollbar{display:none}
  .thead .pills>*{flex:0 0 auto}
  body:has(.thead) .mast-sub .eyebrow .deurtekst{display:none}
  body:has(.thead) .mast-sub .figrow .stemtelling{display:none}
}

.ifl{max-width:980px;margin:0 auto}
.ifl-h1{font-family:Fraunces,serif;font-optical-sizing:auto;font-variation-settings:"SOFT" 40,"WONK" 1;
  font-weight:600;font-size:clamp(30px,5.4vw,52px);letter-spacing:-.008em;line-height:1.04;
  color:var(--text);margin:6px 0 22px}
.ifl-soort{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.ifl-s{font-size:11.5px;cursor:pointer;padding:6px 13px;display:inline-flex;gap:7px;align-items:center}


.ifl-sn{color:var(--ink-faint);font-variant-numeric:tabular-nums}
.ifl-s[aria-pressed="true"] .ifl-sn{color:inherit;opacity:.75}
.ifl-b.leeg{display:none}
.ifl-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px}
.ifl-k{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin:0 0 8px;padding:0 2px}
.ifl-b{display:flex;align-items:baseline;gap:10px;padding:7px 10px;text-decoration:none}
.ifl-t{font-family:"Source Serif 4",Georgia,serif;font-size:17px;line-height:1.25;flex:1}
.ifl-n{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;color:var(--ink-faint);
  font-variant-numeric:tabular-nums}

.ifl-b:hover .ifl-t,.ifl-b:focus-visible .ifl-t{color:var(--crimson)}
:where(body:has(.ifl)) .blad{padding-bottom:134px}
.ifl-p{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
  background:var(--surface-2);border-top:1px solid var(--rule);box-shadow:var(--lift);
  padding:14px 22px 16px}
.ifl-b:hover .ifl-p,.ifl-b:focus-visible .ifl-p{display:block}
.ifl-in{max-width:980px;margin:0 auto;display:block}
.ifl-pt{display:block;font-family:Fraunces,serif;font-weight:600;font-size:19px;
  letter-spacing:-.006em;color:var(--text)}
.ifl-pm{display:block;font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.05em;color:var(--dim);margin:3px 0 6px}
.ifl-ps{display:block;font-family:"Source Serif 4",Georgia,serif;font-size:15px;
  line-height:1.45;color:var(--muted);max-width:70ch}
/* Op een aanraakscherm bestaat zweven niet en is een tik een navigatie, dus daar vervalt
   het venster; het zou bij eenentwintig regels toch altijd iets bedekken. De kolommen
   blijven wel naast elkaar staan, want een enkele kolom maakt er een scrolllijst van. */
@media (max-width:640px){
  .ifl-cols{gap:6px 12px}
  .ifl-b{padding:6px 6px;gap:6px}
  .ifl-t{font-size:14px;line-height:1.2}
  .ifl-n{display:none}
  :where(body:has(.ifl)) .blad{padding-bottom:0}
  .ifl-p{display:none!important}
}
@media (prefers-reduced-motion:reduce){}
/* END generator CSS handoff */

/* Editorial choices. Render semantic HTML from keuze.json in the generator.
   Links remain ordinary links; this component needs no JavaScript. */
.keuze{margin:20px 0 36px;padding:24px 0 20px;border-top:2px solid var(--gilt);
  border-bottom:1px solid var(--rule);scroll-margin-top:120px}
.keuze-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px 32px;
  flex-wrap:wrap;margin-bottom:22px}
.keuze h2{font-size:clamp(23px,3vw,32px);line-height:1.15}
.keuze-intro{margin:0;color:var(--muted);font-size:16px;max-width:54ch}
.keuze-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  list-style:none;padding:0;margin:0;counter-reset:keuze}
.keuze-item{min-width:0;display:flex;flex-direction:column;padding:0 26px;
  border-left:1px solid var(--rule);counter-increment:keuze}
.keuze-item:first-child{border-left:0;padding-left:0}
.keuze-item:last-child{padding-right:0}
.keuze-meta{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:13px;
  color:var(--muted);font-variant-numeric:tabular-nums}
.keuze-meta::before{content:counter(keuze,decimal-leading-zero);font-family:"Geist Mono",monospace;
  font-size:11px;color:var(--gilt);border-bottom:1px solid var(--rule);padding-bottom:3px}
.keuze h3{font-size:clamp(20px,2.15vw,27px);line-height:1.2;margin:0 0 12px;
  overflow-wrap:anywhere}
.keuze-reason{margin:0 0 20px;color:var(--muted);font-size:16px;line-height:1.55;max-width:44ch}
.keuze-action{display:inline-flex;align-items:center;align-self:flex-start;gap:10px;margin-top:auto;min-height:44px;padding:8px 0;font-size:15px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--teal-soft)}
.keuze-action:hover{text-decoration-thickness:2px}

.keuze-footer{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--rule-faint)}
.keuze-all{display:inline-flex;align-items:center;min-height:44px;font-size:15px;text-decoration:underline;text-underline-offset:4px}
.keuze ~ .prose{margin-top:28px}
#all-episodes{scroll-margin-top:128px}
@media(max-width:760px){
  .keuze{padding-top:18px;margin-top:12px}
  .keuze-head{display:block;margin-bottom:18px}
  .keuze-intro{margin-top:9px;font-size:15px}
  .keuze-list{grid-template-columns:1fr}
  .keuze-item,.keuze-item:first-child,.keuze-item:last-child{padding:18px 0;
    border-left:0;border-top:1px solid var(--rule-faint)}
  .keuze-item:first-child{padding-top:0;border-top:0}
  .keuze h3{font-size:23px;margin-bottom:8px}
  .keuze-meta{margin-bottom:8px}
  .keuze-reason{font-size:15.5px;margin-bottom:7px;max-width:100%}
  .keuze-footer{margin-top:0}
}

/* Filter matrix. Theme is the broad entry point; the remaining axes refine it below.
   Keep the grouping visible without turning the filters into a second card wall. */
.kies{margin:34px 0 38px;padding:22px 0 18px;border-top:2px solid var(--gilt);
  border-bottom:1px solid var(--rule);scroll-margin-top:92px}
.kies-lead{margin:0 0 16px;font-family:"Fraunces",Georgia,serif;font-size:clamp(22px,3vw,30px);
  font-weight:600;letter-spacing:-.01em;line-height:1.1;color:var(--text)}
/* Six-row matrix. The mark is a quiet instrument key, not a decorative badge: it stays
   monochrome, inherits the theme, and leaves the controls as the visual action. */
.kies-rijen{border-top:1px solid var(--rule-faint)}
.kies-rij{border-bottom:1px solid var(--rule-faint)}
/* De trigger. Dicht is dit de hele as: pictogram, naam, en rechts wat er gekozen is. Dat
   laatste is het verschil tussen een knop die zegt WAAR hij over gaat en een knop die zegt
   WAT hij doet; Baymard's bevinding over zichtbare toegepaste filters, hier op celniveau. */
.kies-trigger{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;
  column-gap:18px;padding:17px 0;cursor:pointer;list-style:none}
.kies-trigger::-webkit-details-marker{display:none}
.kies-trigger:hover .kies-kop{color:var(--crimson)}
.kies-trigger:focus-visible{outline:2px solid var(--gilt);outline-offset:3px}
.kies-keuze{font-size:11.5px;letter-spacing:.06em;color:var(--dim);white-space:nowrap;
  display:flex;align-items:center;gap:8px;justify-self:end}
.kies-keuze::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .2s}
.kies-rij[open] .kies-keuze::after{transform:rotate(-135deg) translateY(-1px)}
.kies-rij[data-gekozen] .kies-keuze{color:var(--crimson)}
.kies-paneel{padding:0 0 17px 60px}
.kies-icoon{display:grid;place-items:center;width:40px;height:40px;margin-top:1px;
  color:var(--teal);border:1px solid var(--rule);border-radius:50%;background:var(--surface)}
.kies-icoon svg{display:block;width:24px;height:24px;stroke-width:1.5}
.kies-plaats{display:grid;place-items:center;width:40px;height:40px;margin-top:1px;
  color:var(--teal);border:1px solid var(--rule);border-radius:50%;background:var(--surface)}
@supports ((mask-image:url("")) or (-webkit-mask-image:url(""))){
  .kies-icoon svg{display:none}
  .kies-icoon::before{content:"";display:block;width:24px;height:24px;background:currentColor;
    -webkit-mask:var(--matrix-icon) center/contain no-repeat;
    mask:var(--matrix-icon) center/contain no-repeat}
  .kies-icoon[data-icon="brein"]{--matrix-icon:url("icons/matrix/brein.svg")}
  .kies-icoon[data-icon="hart"]{--matrix-icon:url("icons/matrix/hart.svg")}
  .kies-icoon[data-icon="handen"]{--matrix-icon:url("icons/matrix/handen.svg")}
  .kies-icoon[data-icon="zuil"]{--matrix-icon:url("icons/matrix/zuil.svg")}
  .kies-icoon[data-icon="golf"]{--matrix-icon:url("icons/matrix/golf.svg")}
  .kies-icoon[data-icon="zand"]{--matrix-icon:url("icons/matrix/zand.svg")}
  /* A missing mask stays an empty outlined place, never a coloured fallback square. */
  .kies-plaats[data-icon="masker"]::before{content:"";display:block;width:24px;height:24px;background:currentColor;
    -webkit-mask:url("icons/matrix/narrator-mask.svg") center/contain no-repeat;
    mask:url("icons/matrix/narrator-mask.svg") center/contain no-repeat}
}
.kies-kop{font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.3;color:var(--text);min-width:0}
.kies-vraag{margin:0 0 10px;font-family:"Source Serif 4",Georgia,serif;font-size:15px;
  letter-spacing:0;text-transform:none;font-weight:400;color:var(--muted)}
.kies-knoppen{display:flex;flex-wrap:wrap;gap:7px;min-width:0}
.kies-knoppen .chip{min-height:38px;padding:9px 12px;white-space:nowrap}
@media(max-width:640px){
  .bar{gap:10px;padding:0 16px}
  .bar .mark{font-size:10px;letter-spacing:.16em}
  .bar .hint{display:none}
  .mast:not(.mast-sub){padding:28px 0 18px}
  .mast:not(.mast-sub) .rule{margin-top:20px}
  /* Boven de keuze stond op 2026-09-18 zo'n 520 beeldpunten tekst voordat er iets te doen
     viel: eyebrow, kop, ondertitel, telling, dan een alinea. Ben zag dat als het probleem
     naast de omslagenmuur. De kop blijft, want die zegt waar je bent; de rest staat verderop
     op de pagina, waar hij gelezen wordt door wie al gekozen heeft. De alinea blijft in de
     DOM (geen inhoud weg, alleen niet als eerste scherm) voor wie zonder stijl leest. */
  .mast-sub{padding-bottom:8px}
  .mast-sub .eyebrow,.mast-sub .tally{display:none}
  .mast-sub .sub{font-size:15.5px;margin-top:6px}
  .mast-finder{padding:18px 0 4px}
  .mast-finder .title-sub{font-size:clamp(29px,10vw,40px);line-height:1}
  .mast-finder .sub{display:none}
  .prose:not(.closing):has(+ .tools),
  .prose:not(.closing):has(+ .kies){display:none}
  .kies{margin:12px 0 26px;padding-top:12px}
  .kies-lead{margin-bottom:8px}
  .kies-trigger{grid-template-columns:32px minmax(0,1fr) auto;column-gap:10px;padding:12px 0}
  .kies-paneel{padding:0 0 15px 42px}
  .kies-icoon{width:32px;height:32px}
  .kies-icoon svg{width:19px;height:19px}
  .kies-icoon::before{width:19px;height:19px}
  .kies-plaats{width:32px;height:32px}
  .kies-plaats[data-icon="masker"]::before{width:19px;height:19px}
  .kies-vraag{font-size:14px;line-height:1.35}
  .kies-knoppen{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .kies-knoppen::-webkit-scrollbar{display:none}
  .kies-knoppen .chip{flex:0 0 auto}
}
@media(prefers-reduced-motion:reduce){.kies-icoon{transition:none}}

/* The accepted podcast finder: one continuous, literal sequence. JavaScript moves the
   existing generated controls into this presentation, so exact episode matching and the
   no-JS details fallback still have one source of truth. */
.podcast-picker-live.has-podcast-wall{display:block;max-width:720px;margin:34px auto 42px;padding-top:0}
.podcast-picker-live>.kies-lead{margin:0;padding:24px 0 14px;font-size:clamp(30px,5vw,46px)}
.podcast-picker-nav{position:sticky;top:58px;z-index:50;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2px;padding:6px 0;background:color-mix(in srgb,var(--canvas) 92%,transparent);backdrop-filter:blur(12px);border-block:1px solid var(--rule)}
.podcast-picker-nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:7px 5px;text-align:center;
  font:500 10px/1.25 "Geist Mono",monospace;letter-spacing:.05em;color:var(--dim)}
.podcast-picker-nav a:hover,.podcast-picker-nav a:focus-visible{color:var(--teal)}
.podcast-picker-step{padding:34px 0 42px;border-bottom:1px solid var(--rule);scroll-margin-top:118px}
.podcast-picker-step:last-of-type{border-bottom:0}
.podcast-picker-step.is-arriving>h2{animation:picker-arrive .34s cubic-bezier(.22,1,.36,1)}
@keyframes picker-arrive{from{opacity:.52;transform:translateY(9px)}to{opacity:1;transform:none}}
.picker-number{margin:0 0 6px;color:var(--gilt);font-size:10px;letter-spacing:.14em}
.podcast-picker-step>h2{margin:0 0 20px;font-size:clamp(25px,4vw,36px);line-height:1.12}
.podcast-picker-step>h2:focus{outline:0}
.picker-moods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.picker-mood{min-height:104px;padding:16px;text-align:left;border:1px solid var(--rule);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer}
.picker-mood strong{display:block;font:640 25px/1.1 "Fraunces",Georgia,serif}
.picker-mood span{display:block;margin-top:7px;color:var(--dim);font:10px/1.45 "Geist Mono",monospace}
.picker-mood[aria-pressed="true"]{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.picker-wheel-shell{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--rule);border-radius:16px;background:var(--surface);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 7%,transparent)}
.picker-wheel{position:relative;z-index:1;height:264px;overflow-y:auto;overflow-x:hidden;padding:100px 0;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none}
.picker-wheel::-webkit-scrollbar{display:none}
.picker-wheel-option,.podcast-picker-live .picker-wheel-option{display:flex;width:100%;height:64px;min-height:64px;align-items:center;justify-content:center;flex-direction:column;gap:2px;margin:0;padding:0 24px;scroll-snap-align:center;cursor:pointer;font:640 clamp(25px,5vw,32px)/1.15 "Fraunces",Georgia,serif;transform:scale(var(--wheel-scale,.82))}
.picker-wheel-option .chip-n{font:10px/1.3 "Geist Mono",monospace;color:var(--muted)}
.picker-wheel-option small{font:10px/1.3 "Geist Mono",monospace;color:var(--muted)}
:root .podcast-picker-live .picker-wheel-option[aria-pressed="true"],:root .podcast-picker-live .picker-wheel-option.is-current{opacity:1}

.picker-wheel-option[hidden]{display:none}
.picker-wheel-band{position:absolute;z-index:0;left:10px;right:10px;top:100px;height:64px;border:1px solid var(--rule);border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--surface-2) 90%,transparent),color-mix(in srgb,var(--teal) 7%,var(--surface)));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 10%,transparent),0 3px 12px color-mix(in srgb,var(--text) 4%,transparent);pointer-events:none}
.picker-wheel-shell::before,.picker-wheel-shell::after{content:"";position:absolute;left:0;right:0;height:80px;z-index:2;pointer-events:none}
.picker-wheel-shell::before{top:0;background:linear-gradient(var(--surface),transparent)}
.picker-wheel-shell::after{bottom:0;background:linear-gradient(transparent,var(--surface))}
/* Onderaan elk wiel en onderaan Podcast form, Ben 2026-09-23: een uitweg die niet wacht op
   een keuze. Dezelfde monospace-link-look als .runlink, twee naast elkaar waar er twee zijn. */
.picker-wheel-voet{display:flex;justify-content:space-between;gap:12px;margin-top:10px;flex-wrap:wrap}
.picker-wheel-terug,.picker-wheel-verder{font-size:11.5px;padding:4px 0;cursor:pointer}

.picker-wheel-verder{margin-left:auto}

.picker-col-terug{display:none}
/* De themawielen hebben hun band bovenin (64px) en niet in het midden, maar de rijen klikten
   vast op het midden van het wiel. Gemeten 2026-09-23 op 375px: het wiel kon niet verder dan
   scrollTop 249 terwijl de laatste rij pas op 384 in de band staat, dus de laatste twee à drie
   rijen van elk wiel (ook "Any topic") waren alleen met een tik te kiezen. Vastklikken op de
   band zelf. Het periodewiel heeft zijn band wel in het midden en blijft zoals het was. */
.picker-topic-columns .picker-wheel{scroll-padding-top:var(--wheel-band-top,64px)}
.picker-topic-columns .picker-wheel-option{scroll-snap-align:start}

/* De topic-stap als drie kolommen. De wielhoogte is altijd een heel aantal rijen van 64px
   plus de halve rij lucht erboven en eronder die de middenband op zijn plaats houdt:
   hoogte = n*64, padding = (hoogte - 64)/2, band-top = diezelfde padding. Loopt dat uit de
   pas, dan staat de gekozen rij niet meer in de band. */
.picker-topic-columns{display:grid;gap:14px}
.picker-col-head{display:block;width:100%;margin:0 0 6px;padding:0;text-align:left;font:640 20px/1.15 "Fraunces",Georgia,serif}
/* De plaatsaanduiding is geen keuze, dus hij draagt ook niet het gewicht van een keuze. */


/* De vinger die zegt: dit ding draait. Klein, traag en maar één keer; hij zit in de
   middelste kolom, op de band, en verdwijnt zodra iemand iets doet. */
.picker-scroll-hint{position:absolute;z-index:3;left:50%;top:var(--wheel-band-top,192px);
  height:64px;display:grid;place-items:center;transform:translateX(-50%);
  color:var(--teal);pointer-events:none;animation:picker-hint-rise 2.1s ease-in-out infinite}
.picker-scroll-hint-arrow{opacity:.55}
.hint-done .picker-scroll-hint{opacity:0;animation:none;transition:opacity .28s}
/* In de middelste kolom staat de vinger op de plek van het opschrift, dus dat opschrift
   wacht even; zodra de vinger weg is komt "Pick a topic" er alsnog te staan. */
.picker-topic-col.has-hint .picker-placeholder>span{visibility:hidden}
.hint-done .picker-topic-col.has-hint .picker-placeholder>span{visibility:visible}
@keyframes picker-hint-rise{
  0%,100%{transform:translateX(-50%) translateY(7px);opacity:.45}
  45%{transform:translateX(-50%) translateY(-7px);opacity:1}
  70%{transform:translateX(-50%) translateY(-7px);opacity:.75}
}
@media(prefers-reduced-motion:reduce){.picker-scroll-hint{animation:none;transform:translateX(-50%)}}

/* Vanaf tablet in liggende stand drie kolommen. De bak eronder is toch op breedte
   begrensd, dus een kolom is hier even breed als op een groot scherm. */
@media(min-width:768px){
  .picker-topic-columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
  /* Op een breed scherm is de kop een opschrift en geen menu-ingang: hij opent niets, want
     alle drie de kolommen staan er al. */
  .picker-col-head{cursor:default}
  /* De band staat hoog in plaats van in het midden: hoog = één lege rij boven de keuze in
     plaats van drie, en daaronder meteen vijf thema's. De drie maten horen bij elkaar,
     want de eerste rij kan de band alleen raken als de bovenruimte gelijk is aan de
     band-hoogte, en de laatste alleen als de onderruimte de rest is. */
  .picker-topic-columns .picker-wheel{--wheel-band-top:64px;height:448px;padding:64px 0 320px}
  .picker-topic-columns .picker-wheel-band{top:64px}
  .picker-topic-columns{--wheel-band-top:64px}
  /* Een kolom is een derde zo breed, dus de maat van het volle wiel past hier niet: op
     1280px liep "Law and punishment" over twee regels de rij uit en tegen de regel eronder.
     Twee regels mogen, maar ze moeten samen met het aantal binnen de 64px blijven. */
  .picker-topic-columns .picker-wheel-option{padding:0 12px;font-size:clamp(17px,1.5vw,21px);line-height:1.12;overflow-wrap:break-word}
  .picker-topic-col.is-muted{display:block}
}
/* Op een telefoon is dit een menu, net als Listening/Watching/Reading een niveau hoger:
   onder "I feel like" staan Thinking, Feeling en Doing, en pas na een tik komt het wiel.
   Dan hoort er niets meer boven te staan: je weet net zelf wat je koos. Ben, 2026-09-21. */
@media(max-width:767px){
  .picker-topic-col.is-muted{display:block}
  .picker-topic-columns{--wheel-band-top:64px;gap:10px}
  .picker-topic-columns .picker-wheel-band{top:64px}
  .picker-col-head{margin:0;padding:18px 16px;font-size:27px;cursor:pointer}
  .picker-topic-col .picker-wheel-shell{display:none}
  /* In het menu (geen kolom open) is "Back to topics" onder elke rij een knop die nergens
     heen gaat; de uitwegen horen bij het open wiel. Ben, 2026-09-23. */
  .picker-topic-col:not(.is-open) .picker-wheel-voet{display:none}
  /* Na de keuze: alleen dit wiel, zo hoog als er over is naast de spelerbalk en de
     matchbalk. De onderruimte volgt de hoogte, want de laatste rij moet de band nog kunnen
     halen: onderruimte = hoogte min de band min een rij. */
  .picker-topic-columns[data-mood] .picker-col-head{display:none}
  .picker-topic-columns[data-mood] .picker-topic-col:not(.is-open){display:none}
  .picker-topic-columns[data-mood] .picker-topic-col.is-open .picker-wheel-shell{display:block}
  .picker-topic-columns[data-mood] .picker-topic-col.is-open .picker-col-terug{display:flex;align-items:center;gap:6px;min-height:44px;margin:0 0 6px;padding:0 2px;cursor:pointer;font-size:12px}
  .picker-topic-columns[data-mood] .picker-wheel{--h:calc(100dvh - 350px);height:var(--h);
    min-height:280px;padding:64px 0 calc(var(--h) - 128px)}
  /* "I feel like" en het stapnummer horen bij het menu, niet bij het wiel. */
  .podcast-picker-step.has-open-column>h2,
  .podcast-picker-step.has-open-column>.picker-number{display:none}
}
.picker-format-intro{margin:-8px 0 18px;color:var(--dim);font-size:15px}
.picker-format-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.picker-format-group{min-width:0;margin:0;padding:14px;border:1px solid var(--rule);border-radius:8px;background:var(--surface)}
.picker-format-group legend{float:left;width:100%;margin:0 0 10px;padding:0;font:500 12px/1.3 "Geist Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.picker-format-group legend span{display:block;margin-top:4px;color:var(--dim);font-size:9px;letter-spacing:0;text-transform:none}
.picker-format-group>div{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.picker-format-group .chip{display:flex;justify-content:space-between;gap:6px;align-items:center;min-width:0;min-height:46px;padding:8px 9px;white-space:normal;text-align:left;line-height:1.25}
.picker-format-group .chip-n{flex:0 0 auto}
.podcast-picker-live>.podcast-wall{position:static;margin:10px 0 0;padding:16px}
.podcast-picker-live .podcast-wall-field{height:clamp(300px,56vw,460px)}
@media(max-width:640px){
  .podcast-picker-live.has-podcast-wall{margin-top:12px}
  .podcast-picker-live>.kies-lead{padding:16px 0 10px;font-size:32px}
  .podcast-picker-nav{position:static;margin-inline:-16px;padding-inline:12px}
  .podcast-picker-nav a{font-size:9px;letter-spacing:0}
  .podcast-picker-step{padding:28px 0 34px;scroll-margin-top:8px}
  .podcast-picker-step>h2{font-size:27px}
  .picker-moods{grid-template-columns:1fr;gap:7px}
  .picker-mood{min-height:74px;padding:12px 14px}
  .picker-mood strong{font-size:23px}
  .picker-mood span{margin-top:4px}
  .picker-format-grid{grid-template-columns:1fr}
  .picker-format-group{padding:12px}
  .podcast-picker-live>.podcast-wall{margin-top:4px;padding:8px}
}
@media(prefers-reduced-motion:reduce){.podcast-picker-live .picker-wheel-option{transform:none}.podcast-picker-step.is-arriving>h2{animation:none}}

/* Match field. JavaScript groups the existing cards without changing their source order:
   perfect, one miss, two misses. Every visible card explains its own band. */
.match-stage{display:block;min-height:var(--match-stage-height,0)}
.match-band{margin:30px 0 0}
.match-band:first-child{margin-top:12px}
.match-band-title{display:flex;align-items:center;gap:12px;margin:0 0 6px;
  font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.match-band-title::after{content:"";height:1px;flex:1;background:var(--rule-faint)}
.match-band[data-band="perfect"] .match-band-title{color:var(--teal)}
.match-band-items{display:block}
.match-reason{display:block;margin:6px 0 0;font-size:10.5px;line-height:1.45;
  letter-spacing:.04em;color:var(--dim)}
.item>summary>.match-reason{grid-column:2/-1}
.rank .match-reason{margin:8px 0 0;color:var(--teal)}
.bk .match-reason{margin:5px 0 0;color:var(--teal);font-size:10px}
.item .thumb,.rank .rank-art{transform:scale(var(--match-scale,1));transform-origin:center;
  transition:transform 320ms cubic-bezier(.22,1,.36,1),opacity 220ms ease}
.item[data-match-band="almost"] .thumb,.rank[data-match-band="almost"] .rank-art{opacity:.88}
.item[data-match-band="near"] .thumb,.rank[data-match-band="near"] .rank-art{opacity:.72}
@media(max-width:640px){
  .match-band{margin-top:24px}
  .match-band-title{margin-bottom:4px}
  .item>summary>.match-reason{grid-column:2}
}
@media(prefers-reduced-motion:reduce){
  .item .thumb,.rank .rank-art{transition:none}
}

/* A bounded listening room: filtering changes its contents, never its dimensions. */
.has-podcast-wall{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.3fr);gap:0 32px;align-items:start}
.has-podcast-wall>.kies-lead{grid-column:1/-1}
body:has(.has-podcast-wall) .tools{position:static}
.has-podcast-wall .kies-knoppen{gap:5px}
.has-podcast-wall .kies-knoppen .chip{font-size:11px;padding:8px;min-height:38px}
.has-podcast-wall .kies-trigger{column-gap:10px;grid-template-columns:32px minmax(0,1fr) auto;padding:13px 0}
.has-podcast-wall .kies-icoon,.has-podcast-wall .kies-plaats{width:30px;height:30px}
.podcast-wall{position:sticky;top:86px;min-width:0;padding:18px;border:1px solid var(--rule);background:var(--stone,var(--surface));box-shadow:0 6px 22px #3422230a}
.podcast-wall-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.podcast-wall-head h2{font-family:"Fraunces",Georgia,serif;font-size:21px;font-weight:500;line-height:1.15;margin:0}
.podcast-wall-count{flex-shrink:0;font:11px "Geist Mono",monospace;color:var(--teal)}
.podcast-wall-field{position:relative;height:520px}
.podcast-wall-grid{height:100%;display:grid;grid-template-columns:repeat(var(--wall-cols,6),var(--wall-size,70px));grid-template-rows:repeat(var(--wall-rows,4),calc(var(--wall-size,70px) + 22px));gap:8px;place-content:center}
.podcast-tile{display:flex;flex-direction:column;min-width:0;text-decoration:none;align-self:start;overflow:hidden}
.podcast-tile img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid var(--rule);background:var(--surface);filter:saturate(.85)}
.podcast-tile span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:10px/22px "Geist Mono",monospace}
.podcast-tile:hover img,.podcast-tile:focus-visible img{filter:saturate(1.1);border-color:var(--teal)}

.podcast-wall-empty{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:22px}
.podcast-wall-empty h3{font:500 25px/1.2 "Fraunces",Georgia,serif;margin:0 0 14px}
.podcast-wall-empty p{max-width:28ch;color:var(--dim)}
.podcast-wall-empty button,.podcast-reviews-toggle{text-decoration:underline;cursor:pointer;min-height:44px;padding:8px 0;font:inherit}
.podcast-wall-foot{border-top:1px solid var(--rule-faint);margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--dim)}
.podcast-wall-foot p{margin:0}
.podcast-wall-empty[hidden],#all-episodes[hidden]{display:none}.podcast-tile[hidden]{display:none}
@media(max-width:900px){
  /* Leave the narrow viewport available for the actual episode results. Ben, 2026-09-18: the
     wall of 24 unfiltered covers was the first thing on the screen and did nothing until a
     choice existed. The axes come first now, closed, so choosing costs one screen instead of
     three; the wall follows and only earns its space once it can show a filtered result. */
  .podcast-wall{position:static}
  .has-podcast-wall{grid-template-columns:1fr;gap:0}
  .has-podcast-wall>.kies-lead{grid-row:1}
  .has-podcast-wall>.kies-rijen{grid-row:2}
  .has-podcast-wall>.podcast-wall{grid-row:3;top:86px;z-index:12;margin-top:16px;margin-bottom:18px;padding:12px}
  .podcast-wall-field{height:clamp(220px,34svh,340px)}
  .podcast-wall-head{margin-bottom:8px}
  .podcast-wall-head h2{font-size:19px}
  .podcast-wall-foot{margin-top:6px;font-size:11px}
  .podcast-wall-foot p{max-width:22ch;line-height:1.35}
  .has-podcast-wall .kies-knoppen{flex-wrap:wrap;overflow:visible}
  .has-podcast-wall .kies-knoppen .chip{min-height:44px;scroll-margin-top:100px;scroll-margin-bottom:24px}
}
@media(max-width:640px){body:has(.has-podcast-wall) .blad{padding-right:16px;padding-left:16px}.has-podcast-wall>.podcast-wall{padding:8px}}
@media(prefers-reduced-motion:reduce){.podcast-tile img{transition:none}}

/* Exact episode results stay HTML, outside the bounded cover field. */
.episode-results{margin:32px 0;scroll-margin-top:100px;clear:both}
.episode-results[hidden]{display:none}.episode-results button[hidden]{display:none}
.episode-results-head{border-top:2px solid var(--rule);padding:20px 0 12px}
.episode-results-head h2{font:500 clamp(25px,4vw,36px)/1.15 "Fraunces",Georgia,serif;margin:0 0 10px}
.episode-results-head p{color:var(--dim);font-size:14px}
.episode-results-actions{display:flex;flex-wrap:wrap;gap:8px 18px}
.episode-add-all{font-weight:650!important;color:var(--text)!important;text-decoration:none!important;border-bottom:2px solid var(--gold)!important}
.episode-results-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.episode-result{padding:20px 0;border-top:1px solid var(--rule);min-width:0}
.episode-result h3{font:500 21px/1.3 "Fraunces",Georgia,serif;margin:0 0 6px;overflow-wrap:anywhere}
.episode-meta{font:11px/1.6 "Geist Mono",monospace;color:var(--dim);margin:0 0 10px}
.episode-links{display:flex;flex-wrap:wrap;gap:6px 16px}
.episode-links a{color:var(--teal);font:inherit;min-height:44px;display:inline-flex;align-items:center;background:none;border:0;padding:4px 0;text-decoration:underline;cursor:pointer}.episode-results button,.episode-jump{font:inherit;min-height:44px;display:inline-flex;align-items:center;padding:4px 0;text-decoration:underline;cursor:pointer}
.episode-links a:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.podcast-tile.selected img{border:3px solid var(--teal)}
.episode-results-head h2:focus{outline:none}
@media(max-width:640px){.episode-results-list{grid-template-columns:1fr}.episode-result h3{font-size:20px}}

/* Titus Retro Player. Eén native audio-element houdt Safari's gebruikershandeling geldig
   wanneer de bron wisselt. De queue is lokaal; de uitgever blijft de audiobron. */
.player-add{min-height:42px;padding:8px 12px;font:650 11px/1.25 "Geist Mono",monospace;cursor:pointer;text-decoration:none!important}
.player-add:hover,.player-add:focus-visible{transform:translateY(-1px)}
.player-add.is-queued{transform:none}
.player-add-compact{min-height:30px;padding:3px 7px;font-size:9px;white-space:nowrap}
.runrow:has(.player-add-compact){grid-template-columns:38px minmax(0,1fr) auto 56px}
.episode-add-all{padding:10px 14px!important;border:1px solid var(--teal)!important;border-radius:4px;background:var(--teal)!important;color:var(--surface)!important;text-decoration:none!important}
.episode-add-all:hover,.episode-add-all:focus-visible{background:var(--teal-lift)!important;border-color:var(--teal-lift)!important}
body.has-titus-player{padding-bottom:112px}
body.has-titus-queue{padding-bottom:150px}
.titus-player{position:fixed;z-index:85;left:50%;bottom:12px;transform:translateX(-50%);width:min(980px,calc(100% - 24px));
  color:var(--text);background:var(--surface);border:2px solid var(--gold);border-radius:8px;box-shadow:0 18px 54px rgba(35,25,20,.34);overflow:visible;
  transition:box-shadow .25s ease,border-color .25s ease}
.titus-player::before{content:"";display:block;height:4px;background:repeating-linear-gradient(90deg,var(--gold) 0 8px,var(--teal) 8px 16px,var(--hot) 16px 24px,var(--tessera-2) 24px 32px)}
.titus-player[hidden]{display:none}
.titus-player audio{display:none}
.titus-player-main{display:grid;grid-template-columns:54px minmax(180px,1fr) auto minmax(180px,1.2fr) auto;gap:10px 14px;align-items:center;padding:11px 14px}
.titus-cover{grid-row:1/3;position:relative;width:50px;height:50px;padding:0;overflow:hidden;font:650 12px "Fraunces",Georgia,serif;cursor:pointer}
.titus-cover img{display:block;width:100%;height:100%;object-fit:cover}.titus-cover img[hidden]{display:none}
.titus-now{min-width:0}.titus-now p,.titus-now strong,.titus-now span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.titus-kicker{margin:0 0 1px;font-size:8px;letter-spacing:.13em;color:var(--gold);text-transform:uppercase}
.titus-title{font:650 16px/1.25 "Fraunces",Georgia,serif}.titus-show{font-size:11px;color:var(--dim)}
.titus-tags{font-size:9.5px;letter-spacing:.04em;color:var(--muted)}
/* Gastnaam als ingang, Ben 2026-09-23: in de speler en in de resultaten dezelfde tekstlink-
   vorm, geen knopvak. Tikvlak minstens 24px hoog (WCAG 2.2, 2.5.8). */
.titus-guests{font-size:10.5px;color:var(--dim)}
.titus-guest,.episode-guest{font:inherit;color:var(--teal);background:none;border:0;padding:4px 0;
  min-height:24px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.titus-guest:hover,.episode-guest:hover{color:var(--crimson-deep)}
.titus-guest:focus-visible,.episode-guest:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}
.episode-guests{margin:4px 0 0;color:var(--dim)}
@media(max-width:430px){.titus-tags{display:none}}
.titus-controls{display:flex;gap:4px}.titus-queue-toggle,.titus-details-current,.titus-queue-close{
  min-height:38px;padding:5px 8px;border:1px solid var(--rule);border-radius:4px;background:var(--canvas);color:var(--text);font:600 9px "Geist Mono",monospace;cursor:pointer}.titus-controls button,.titus-find,.titus-clear,.titus-queue-tools button{min-height:38px;padding:5px 8px;font:600 9px "Geist Mono",monospace;cursor:pointer}
.titus-controls .titus-play{position:relative;display:inline-grid;place-items:center;flex:0 0 48px;width:48px;height:48px;min-width:48px;min-height:48px;padding:0;border-radius:50%;background:var(--teal);border-color:var(--teal);color:var(--surface);box-shadow:0 4px 14px rgba(47,98,101,.26)}
.titus-play-symbol{position:relative;display:block;width:16px;height:18px}.titus-play-symbol::before{content:"";position:absolute;left:4px;top:2px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid currentColor}
.titus-play.is-playing .titus-play-symbol::before{left:2px;top:1px;width:4px;height:16px;border:0;background:currentColor;box-shadow:8px 0 currentColor}
.titus-play-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.titus-progress{display:grid;grid-template-columns:auto minmax(110px,1fr) auto;gap:8px;align-items:center;min-width:0}
.titus-progress span{font-size:9px;color:var(--dim)}.titus-progress input{width:100%;accent-color:var(--teal)}
.titus-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap}
.titus-actions label{font-size:9px;color:var(--dim)}.titus-actions select{margin-left:4px;padding:5px}
.titus-source{font-size:11px;color:var(--teal);text-decoration:underline;text-underline-offset:3px}.titus-source[hidden]{display:none}
.titus-details-current{font-size:9px}
.listen-fallback{min-height:42px;padding:8px 12px;border:1px solid var(--rule);border-radius:4px;background:var(--canvas);color:var(--teal);font:600 10px "Geist Mono",monospace;cursor:pointer}.episode-details{min-height:42px;padding:8px 12px;font:600 10px "Geist Mono",monospace;cursor:pointer}
.listen-fallback{display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:3px}.episode-details-compact,.listen-fallback-compact{min-height:30px;padding:3px 7px;font-size:9px}
.runrow-actions{display:flex;align-items:center;gap:5px}.runrow:has(.runrow-actions){grid-template-columns:38px minmax(0,1fr) auto 56px}
.titus-dossier{position:fixed;z-index:110;top:10vh;left:50%;transform:translateX(-50%);width:min(720px,calc(100% - 24px));max-height:80vh;overflow:auto;overscroll-behavior:contain;padding:22px;border:1px solid var(--gold);border-radius:10px;background:var(--surface);color:var(--text);box-shadow:0 24px 80px rgba(28,24,21,.48)}
.titus-dossier[hidden]{display:none}.titus-dossier-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:14px;border-bottom:1px solid var(--rule)}.titus-dossier-head p{margin:0 0 4px;color:var(--gold);font-size:9px;text-transform:uppercase;letter-spacing:.1em}.titus-dossier-head h2{font-size:clamp(24px,4vw,38px);line-height:1.08}.titus-dossier-head h2:focus{outline:0}.titus-dossier-close{min-width:44px;min-height:44px;border:1px solid var(--rule);border-radius:4px;background:var(--canvas);color:var(--text)}
.titus-dossier-body{padding-top:16px}.titus-dossier-attribution,.titus-dossier-tags{margin:0 0 8px;color:var(--dim)}.titus-dossier-tags{font-size:10px}.titus-dossier-body section{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-faint)}.titus-dossier-body h3{margin:0 0 8px;font-size:16px}.titus-dossier-body p{line-height:1.55}.titus-dossier-guests button{text-decoration:underline;text-underline-offset:2px;cursor:pointer}.titus-dossier-body ul{list-style:none;margin:0;padding:0}.titus-dossier-body li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule-faint)}
.titus-find{display:none;font-size:10px;min-height:42px;padding-inline:14px}
.titus-queue-toggle{display:inline-flex;align-items:center;gap:7px}.titus-queue-toggle strong{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border-radius:50%;background:var(--gold);color:var(--surface);font:700 10px "Geist Mono",monospace}
.titus-queue-toggle:disabled{cursor:default;opacity:.62}
.titus-player.is-empty .titus-player-main{grid-template-columns:58px minmax(180px,1fr) auto;padding-top:13px;padding-bottom:13px}
.titus-player.is-empty .titus-cover{grid-row:1;width:52px;height:52px}
.titus-player.is-empty .titus-controls,.titus-player.is-empty .titus-progress,.titus-player.is-empty .titus-actions label,.titus-player.is-empty .titus-source{display:none}
.titus-player.is-empty .titus-actions{display:flex;grid-column:3;grid-row:1}.titus-player.is-empty .titus-find{display:inline-flex;align-items:center;justify-content:center}
.titus-player.is-empty .titus-queue-toggle{display:none}
.titus-queue{height:min(58vh,calc(332px + var(--queue-growth,52px)));max-height:520px;overflow:hidden;border-top:1px solid var(--rule);background:var(--canvas)}
.titus-queue[hidden]{display:none}.titus-queue:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) 292px;grid-template-rows:auto minmax(0,1fr);border-radius:0 0 6px 6px}
.titus-queue-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;background:var(--canvas);border-bottom:1px solid var(--rule)}
.titus-queue-head p{margin:0 0 2px;color:var(--gold);font-size:8px;letter-spacing:.12em;text-transform:uppercase}.titus-queue-head h2{font-size:24px}.titus-queue-head h2:focus{outline:0}.titus-queue-count{display:block;margin-top:2px;color:var(--dim);font-size:9px}.titus-queue-head-actions{display:flex;gap:6px}
.titus-queue ol{grid-column:1;grid-row:2;min-height:0;overflow:auto;list-style:none;margin:0;padding:4px 18px 18px;overscroll-behavior:contain}
.titus-queue li{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule-faint)}
.titus-queue li[aria-current="true"]{margin-inline:-10px;padding-inline:10px;background:var(--surface-2);box-shadow:inset 3px 0 0 var(--teal)}
.titus-queue-art{display:grid;place-items:center;width:44px;height:44px;overflow:hidden;border:1px solid var(--rule);border-radius:3px;background:var(--surface);color:var(--gold);font:650 9px "Fraunces",Georgia,serif;letter-spacing:.08em}.titus-queue-art img{display:block;width:100%;height:100%;object-fit:cover}
.titus-queue-track{min-width:0;padding:0;border:0;background:none;color:var(--text);text-align:left;cursor:pointer}
.titus-queue-track strong,.titus-queue-track span,.titus-queue-track small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.titus-queue-track strong{font:600 15px "Fraunces",Georgia,serif}.titus-queue-track span{font-size:11px;color:var(--dim)}.titus-queue-track small{margin-top:1px;color:var(--teal);font:600 8px "Geist Mono",monospace;text-transform:uppercase;letter-spacing:.06em}
.titus-queue-tools{display:grid;grid-template-columns:44px;grid-template-rows:44px 44px;gap:4px;align-self:stretch;align-content:space-between}.titus-queue-tools button:disabled{opacity:.3;cursor:default}
.titus-queue-tools button.titus-remove-track,.titus-queue-tools button.titus-drag-handle{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;border-radius:50%}
.titus-queue-tools .titus-remove-track{color:var(--hot)}
.titus-queue-tools button.titus-drag-handle{cursor:grab;color:var(--muted)}.titus-queue-tools button.titus-drag-handle:active{cursor:grabbing}
.titus-remove-track svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;pointer-events:none}
.titus-remove-track svg circle{fill:currentColor;fill-opacity:.1;stroke-opacity:.65}.titus-remove-track svg path{stroke-linecap:round;stroke-opacity:.8}


.titus-drag-handle{display:inline-grid;place-items:center;min-width:40px;padding:4px;cursor:grab;touch-action:none}.titus-drag-handle:active{cursor:grabbing}.titus-drag-handle svg{width:22px;height:22px;fill:currentColor;pointer-events:none}
.titus-sort-ghost{opacity:.28;background:var(--surface-2);outline:1px dashed var(--teal)}.titus-sort-chosen{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--teal)}.titus-sort-drag{border:1px solid var(--gold);background:var(--surface);box-shadow:var(--lift)}
.titus-queue-discovery{grid-column:2;grid-row:2;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:24px;border-left:1px solid var(--gold);background:var(--surface-2)}
.titus-queue-discovery p{margin:0 0 12px;color:var(--gold);font-size:8px;letter-spacing:.12em;text-transform:uppercase}.titus-queue-discovery strong,.titus-queue-discovery span{display:block}.titus-queue-discovery strong{font:650 22px/1.15 "Fraunces",Georgia,serif}.titus-queue-discovery span{margin-top:8px;color:var(--dim);font-size:13px;line-height:1.4}
.titus-discovery-actions{display:grid;gap:8px}.titus-add-more,.titus-discover{min-height:44px;padding:9px 12px;border-radius:4px;font:650 10px/1.25 "Geist Mono",monospace;cursor:pointer}
.titus-add-more{border:1px solid var(--teal);background:var(--teal);color:var(--surface)}.titus-add-more:hover,.titus-add-more:focus-visible{background:var(--teal-lift);border-color:var(--teal-lift)}
.titus-discover{display:inline-flex;align-items:center;border:1px solid var(--rule);background:var(--canvas);color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.titus-status{position:absolute;z-index:2;left:50%;top:0;transform:translate(-50%,-110%);width:max-content;max-width:calc(100% - 24px);margin:0;padding:8px 13px;border:1px solid var(--teal);border-radius:4px;background:var(--surface);color:var(--text);box-shadow:var(--lift);font-size:10px;text-align:center;white-space:normal;opacity:1;transition:opacity .18s ease,transform .18s ease}
.titus-status:not([data-tone]),.titus-status[data-tone="quiet"]{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0}
.titus-status[data-tone="success"]{border-color:var(--teal)}.titus-status[data-tone="error"]{border-color:var(--hot)}
.titus-player.just-added{animation:titus-added .68s cubic-bezier(.2,.85,.25,1)}
@keyframes titus-added{0%{transform:translateX(-50%) scale(1)}35%{transform:translateX(-50%) scale(1.018);box-shadow:0 18px 60px rgba(47,98,101,.38)}100%{transform:translateX(-50%) scale(1)}}
.has-titus-player .match-sticky{bottom:104px}.has-titus-queue .match-sticky{bottom:142px}
@media(max-width:760px){
  body.titus-queue-open{overflow:hidden}
  body.has-titus-player{padding-bottom:116px}body.has-titus-queue{padding-bottom:184px}
  .titus-player{bottom:8px;width:calc(100% - 16px)}
  .titus-player.is-queue-open{top:8px;bottom:8px;height:auto;max-height:none;display:flex;flex-direction:column}
  .titus-player.is-queue-open::before{flex:0 0 4px}.titus-player.is-queue-open .titus-player-main{flex:0 0 auto}
  .titus-player-main{grid-template-columns:42px minmax(0,1fr) auto;gap:8px;padding:9px}
  .titus-cover{grid-row:1;width:44px;height:44px}.titus-now{grid-column:2}.titus-actions{grid-column:3;grid-row:1}.titus-source,.titus-actions label{display:none}
  .titus-controls{grid-column:1/4;justify-content:center;align-items:center}.titus-controls button{flex:1;max-width:62px;min-height:44px}.titus-controls .titus-play{flex:0 0 58px;width:58px;height:58px;min-width:58px;min-height:58px;max-width:58px}
  .titus-progress{grid-column:1/4}.titus-queue-toggle{min-height:44px}.titus-find{min-height:44px}
  .titus-queue-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .titus-player.is-empty .titus-player-main{grid-template-columns:46px minmax(0,1fr) auto;padding:9px}
  .titus-player.is-empty .titus-cover{width:44px;height:44px}
  .titus-player.is-empty .titus-title{font-size:15px}.titus-player.is-empty .titus-show{font-size:10px}
  .titus-player.is-empty .titus-actions{gap:6px}.titus-player.is-empty .titus-find{padding-inline:10px}
  .titus-player.is-queue-open .titus-queue:not([hidden]){flex:1;min-height:0;height:auto;max-height:none}
  .titus-queue:not([hidden]){grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto}
  .titus-queue-head{grid-column:1;grid-row:1;gap:8px;padding:8px 10px}.titus-queue-head>div:first-child{min-width:0}.titus-queue-head p{display:none}.titus-queue-head h2{font-size:17px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.titus-queue-count{margin-top:1px}.titus-queue-head-actions{align-self:center;gap:4px}
  .titus-queue ol{grid-column:1;grid-row:2;padding:3px 12px 16px;scrollbar-gutter:stable}
  .titus-queue li{grid-template-columns:46px minmax(0,1fr) auto;gap:10px}.titus-queue-tools{grid-column:3;grid-row:1;justify-content:flex-end}.titus-queue-close{min-height:44px}.titus-queue-tools button,.titus-clear,.player-add{min-height:44px}.titus-drag-handle{min-width:44px}
  .titus-queue-discovery{grid-column:1;grid-row:3;display:block;padding:8px 10px;border-left:0;border-top:1px solid var(--gold);background:var(--canvas)}.titus-queue-discovery>div:first-child{display:none}.titus-discovery-actions{grid-template-columns:1fr 1fr;margin:0}.titus-add-more,.titus-discover{min-height:44px;justify-content:center;text-align:center;padding-inline:8px}
  .has-titus-player .match-sticky{bottom:110px}.has-titus-queue .match-sticky{bottom:178px}
  .runrow:has(.player-add-compact){grid-template-columns:30px minmax(0,1fr) auto}.runrow:has(.player-add-compact) .runrow-d{display:none}
  .runrow:has(.runrow-actions){grid-template-columns:30px minmax(0,1fr) auto}.runrow:has(.runrow-actions) .runrow-d{display:none}.runrow-actions{flex-wrap:wrap;justify-content:flex-end}
  .titus-dossier{top:8px;max-height:calc(100dvh - 16px);padding:16px}.titus-dossier-head h2{font-size:25px}
}
@media(max-width:430px){.titus-player.is-empty .titus-show{display:none}.titus-player.is-empty .titus-player-main{grid-template-columns:46px minmax(0,1fr) auto}.titus-player.is-empty .titus-find{font-size:9px;padding-inline:8px}}
@media(prefers-reduced-motion:reduce){.titus-player,.titus-status{transition:none}.titus-player.just-added{animation:none}}

/* Het matchmoment (2026-09-17, uitgebreid 2026-09-18). Eén accent per scherm: het getal dat
   raak is. Ben vroeg om meer viering; het getal krijgt daarom een korte pop zodra het
   verandert (JS zet .match-bump, deze regel tekent hem), naast de klim die tikOp al deed. */
.match-pulse{margin:0;font-size:12px;color:var(--dim);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.match-pulse[hidden]{display:none}
.match-n{font-family:"Fraunces",Georgia,serif;font-size:26px;font-weight:600;line-height:1;color:var(--dim);
  font-variant-numeric:tabular-nums;display:inline-block}
.match-raak .match-n{color:var(--crimson)}
.match-bump .match-n{animation:match-bump .42s cubic-bezier(.22,1.4,.36,1)}
@keyframes match-bump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.match-bump .match-n{animation:none}}
.podcast-wall-head{flex-wrap:wrap}
.podcast-wall-head .match-pulse{flex-basis:100%}
.chip-leeg{opacity:.38}
.chip-leeg:hover{opacity:.7}
.match-exits{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:0 0 12px}
.match-sticky{display:none}
@media(max-width:640px){
  .match-sticky{display:block;position:fixed;left:16px;right:16px;bottom:14px;z-index:70;min-height:48px;padding:12px 16px;
    border:0;border-radius:6px;background:var(--crimson);color:var(--vellum);font:600 14px "Geist Mono",monospace;letter-spacing:.04em;
    box-shadow:0 8px 24px #34222333;cursor:pointer}
  .match-sticky[hidden],.match-sticky.match-sticky-weg{display:none}
  /* Groter dan op desktop, met opzet: dit is het scherm waar Ben de viering miste. */
  .match-n{font-size:34px}
}