/* ============================================================
   aiboys.nl — stylesheet
   Kleuren en effecten komen uit brand/thumbnail-system/tokens.css.
   Bewust temperder dan het thumbnail-systeem: dat is afgesteld op een
   klikvanger van 168px, een leespagina heeft rust nodig. Glitch alleen op
   het wordmark, scanlines alleen in de hero, cyaan als enige klikkleur.
   ============================================================ */

@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --void:#0A0B0D;
  --void-2:#111419;
  --void-3:#171B22;
  --line:#242A33;
  --chrome:#F3F6FC;
  --chrome-dim:#9AA6B6;
  /* Was #5D6675, en dat haalde 3,40:1 op de achtergrond en 3,18:1 op een kaart
     terwijl kleine tekst 4,5:1 nodig heeft. Deze kleur draagt de samenvatting
     onder elke aflevering, datum en duur, alle labels, de tijdstempels in het
     transcript en de hele footer, dus dat is geen detail. Zelfde tint, lichter:
     4,86:1 en 4,56:1. */
  --chrome-mute:#747F91;
  --cyan:#00E8FF;
  --magenta:#FF2D6A;

  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:56rem;
  --pad:clamp(1.25rem,5vw,2.5rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--chrome);
  font-family:var(--font);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  font-feature-settings:"kern","liga","calt";
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan);text-decoration-color:color-mix(in srgb,var(--cyan) 40%,transparent);text-underline-offset:.2em}
a:hover{text-decoration-color:var(--cyan)}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem);font-weight:800}
h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);font-weight:700}
h3{font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1.1em}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap-wide{width:100%;max-width:74rem;margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--chrome-mute);margin:0 0 .9rem;
}
.lead{font-size:1.15em;color:var(--chrome-dim)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;position:fixed;z-index:9;background:var(--cyan);color:var(--void);padding:.6rem 1rem;border-radius:6px}

/* ---- kop ---- */
.top{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.1rem var(--pad);max-width:var(--wrap);margin-inline:auto;
}
.top img{width:104px}
.nav{display:flex;gap:clamp(.9rem,3vw,1.6rem);font-size:.9rem}
.nav a{color:var(--chrome-dim);text-decoration:none;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:var(--chrome)}
/* Op een telefoon past de balk niet naast elkaar: wordmark boven, nav eronder. */
@media (max-width:34rem){
  .top{flex-direction:column;gap:.7rem;padding-bottom:.3rem}
  .nav{gap:1.15rem;font-size:.85rem}
  /* Gestapeld staat het wordmark gecentreerd, dus ook hier de midden-correctie. */
  .top a:has(img){--wm-shift:var(--wm-shift-midden,0%)}
}

/* ---- hero ---- */
.hero{position:relative;isolation:isolate;overflow:hidden;text-align:left;padding-bottom:clamp(3rem,7vw,4.5rem)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:var(--hero-img) center/cover no-repeat,var(--void);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 45%,var(--void) 100%),
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.4) 3px 4px);
  opacity:.88;
}
.hero-in{
  /* Alleen padding-top zetten: de shorthand zou de zijmarge van .wrap-wide wissen. */
  padding-top:clamp(1.75rem,5vw,3.5rem);
  display:grid;gap:clamp(2rem,4vw,3.25rem);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
}
.hero-copy img.mark{width:min(28rem,82%);margin:0 0 1.4rem}
.hero-copy h1{
  font-size:clamp(1.6rem,1rem + 2.1vw,2.5rem);font-weight:700;letter-spacing:-.03em;
  line-height:1.08;margin:0 0 .8rem;text-wrap:balance;
}
.hero-copy h1 span{color:var(--chrome-dim)}
.hero .sub{margin:0 0 .4rem;color:var(--chrome-dim);font-size:1.02rem}
.hero .cta{justify-content:flex-start;margin:1.5rem 0 .9rem}

/* De nieuwste aflevering als kaart: de thumbnail is het beeld, zoals op YouTube. */
.hero-card{
  display:block;text-decoration:none;color:inherit;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:var(--void-2);
  box-shadow:0 18px 50px rgba(0,0,0,.55);transition:transform .14s ease,border-color .14s ease;
}
.hero-card:hover{transform:translateY(-2px);border-color:var(--chrome-mute)}
.hero-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hero-card .hc-meta{
  display:block;padding:.9rem 1.1rem .1rem;font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
}
.hero-card .hc-titel{display:block;padding:.15rem 1.1rem 1.1rem;font-weight:600;letter-spacing:-.01em}
.hero-card.player{box-shadow:none}

@media (max-width:52rem){
  .hero{text-align:center}
  .hero-in{grid-template-columns:1fr;gap:2rem}
  .hero .cta{justify-content:center}
  .hero-card{text-align:left}
  /* Het wordmark is display:block, dus text-align doet er niets mee: zonder
     auto-marges hangt het links terwijl de rest in het midden staat. En de
     linkse optische verschuiving is hier fout; gecentreerd hoort het halve
     verschil tussen de twee flarden, zie build.py. */
  .hero-copy img.mark{margin-inline:auto;--wm-shift:var(--wm-shift-midden,0%)}
}

/* ---- knoppen ---- */
/* Links uitlijnen zoals alle tekst; alleen de hero op een smal scherm centreert. */
.cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-start;margin:2.1rem 0 1rem}
.btn{
  display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.35rem;border-radius:999px;
  font-size:.95rem;font-weight:600;text-decoration:none;border:1px solid transparent;
  transition:transform .12s ease,background .12s ease,border-color .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--cyan);color:#04252b}
.btn-primary:hover{background:#5cf2ff}
.btn-ghost{border-color:var(--line);color:var(--chrome);background:rgba(17,20,25,.72);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--chrome-mute)}
.btn svg{width:1.05em;height:1.05em;flex:none;fill:currentColor}
.meta{color:var(--chrome-mute);font-size:.85rem;margin:0}

/* ---- secties ---- */
section{padding-block:clamp(2.75rem,6vw,4.25rem)}
section+section{border-top:1px solid var(--line)}
.sec-head{margin-bottom:1.6rem}
.sec-head p{margin:0;color:var(--chrome-dim)}

/* ---- speler ---- */
.player{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--void-2)}
.player iframe{display:block;width:100%;height:152px;border:0}

/* ---- afleveringlijst ---- */
.eps{list-style:none;margin:0;padding:0}
.eps li{border-top:1px solid var(--line)}
.eps li:last-child{border-bottom:1px solid var(--line)}
.ep{
  display:grid;grid-template-columns:1fr auto;gap:.35rem 1.5rem;align-items:baseline;
  padding:1.05rem .25rem;text-decoration:none;color:inherit;
}
.ep:hover{background:var(--void-2)}
.ep .t{font-weight:600;letter-spacing:-.01em}
.ep:hover .t{color:var(--cyan)}
.ep .d{grid-column:1/-1;color:var(--chrome-mute);font-size:.85rem;margin:0}
.ep .n{color:var(--chrome-mute);font-size:.82rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.ep .c{color:var(--chrome-dim);font-weight:600}
.na-lijst{margin:1.4rem 0 0}
@media (max-width:34rem){
  .ep{grid-template-columns:1fr;gap:.25rem}
}

/* ---- kaarten ---- */
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:0;padding:0;list-style:none}
.card{background:var(--void-2);border:1px solid var(--line);border-radius:14px;padding:1.35rem}
.card h3{margin-bottom:.35rem}
.card p{margin:0;color:var(--chrome-dim);font-size:.95rem}
.card .num{
  font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--cyan);
  display:block;margin-bottom:.6rem;
}

/* ---- citaat ---- */
.pull{
  margin:2rem 0;padding:1.4rem 1.6rem;border-left:2px solid var(--cyan);background:var(--void-2);
  border-radius:0 12px 12px 0;font-size:1.1em;color:var(--chrome);
}
.pull p{margin:0}
.pull cite{display:block;margin-top:.6rem;font-size:.85rem;font-style:normal;color:var(--chrome-mute)}

/* ---- voet ---- */
footer{border-top:1px solid var(--line);padding-block:2.5rem;color:var(--chrome-mute);font-size:.88rem}
footer .cols{display:flex;flex-wrap:wrap;gap:2rem 3rem;margin-bottom:2rem}
footer h2{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-mute);font-weight:600;margin-bottom:.7rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
footer a{color:var(--chrome-dim);text-decoration:none}
footer a:hover{color:var(--chrome)}
footer .fine{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;border-top:1px solid var(--line);padding-top:1.4rem}
footer .fine p{margin:0}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Mailadres groot en selecteerbaar: een mailto-link doet niets als iemand
   geen mailprogramma heeft ingesteld, dus het adres moet ook te kopieren zijn. */
.adres{
  font-size:clamp(1.1rem,1rem + .8vw,1.5rem);font-weight:600;letter-spacing:-.01em;
  margin:0 0 1.4rem;user-select:all;
}

/* Wordmark in de voet, zodat de pagina met het merk eindigt. */
.foot-mark{width:96px;margin:0 0 1.75rem;opacity:.8}

/* Het wordmark in de balk is een link naar huis. Zonder hover-cue ziet niemand dat. */
.top a:has(img){display:inline-flex;transition:opacity .12s ease}
.top a:has(img):hover{opacity:.7}

/* Op de homepage staat het grote wordmark direct onder de balk. Op een telefoon
   stapelen die twee pal op elkaar, dus daar tonen we alleen de grote. */
@media (max-width:34rem){
  .top.home a:has(img){display:none}
}

/* ---- beweging ---------------------------------------------------------
   De klasse .reveal wordt door JS gezet. Draait het script niet, dan krijgt
   niets deze klasse en blijft alles gewoon zichtbaar. */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* Voortgangsbalk in de merkkleur, bovenaan het scherm. */
#voortgang{
  position:fixed;inset:0 0 auto 0;height:2px;z-index:9;pointer-events:none;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  transform:scaleX(0);transform-origin:0 50%;opacity:.9;
}

/* Parallax: de achtergrond loopt trager dan de tekst. Het vlak is bewust hoger
   dan de hero, anders valt er bij het verschuiven een gat aan de bovenkant. */
.hero::before{inset:-25% 0;transform:translateY(var(--py,0))}

/* Neonrand als echte lijn onderaan de hero, zodat hij altijd precies op de rand
   valt. In het bannerdecor zat hij ingebakken en dan klopt hij nooit. */
.hero{border-bottom:1px solid var(--line)}

/* Eenmalige flikkering op het wordmark, zoals de glitch in het logo zelf. */
/* De verschuiving zit in elke keyframe verwerkt. Animeerde deze alleen
   translateX(0), dan sprong het logo de eerste 2,6 seconden uit de optische
   uitlijning die .hero-copy img.mark met hetzelfde transform zet. */
@keyframes ab-flikker{
  0%,100%{opacity:1;transform:translateX(calc(-1 * var(--wm-shift,0%)))}
  5%{opacity:.45;transform:translateX(calc(-1 * var(--wm-shift,0%) - 3px))}
  8%{opacity:1;transform:translateX(calc(-1 * var(--wm-shift,0%) + 2px))}
  11%{opacity:.7;transform:translateX(calc(-1 * var(--wm-shift,0%) - 1px))}
  15%{opacity:1;transform:translateX(calc(-1 * var(--wm-shift,0%)))}
}
.hero-copy img.mark{animation:ab-flikker 2.6s steps(1,end) 1}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .hero::before{transform:none}
  .hero-copy img.mark{animation:none}
  #voortgang{display:none}
}

/* ---- afleveringpagina ---- */
.ep-beeld{border-radius:14px;border:1px solid var(--line);margin:0 0 1.4rem}
.buren{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-bottom:1.4rem}
.buur{
  display:block;padding:1rem 1.15rem;border:1px solid var(--line);border-radius:12px;
  background:var(--void-2);text-decoration:none;color:inherit;transition:border-color .12s ease;
}
.buur:hover{border-color:var(--chrome-mute)}
/* .eyebrow staat inline, dus op een <span> pakt de marge niet en plakt het
   labeltje tegen de titel: "VOLGENDEJe Spotify zit vol met nepartiesten". */
.buur .eyebrow{display:block;margin:0 0 .3rem}
.buur span:last-child{display:block;font-weight:600;letter-spacing:-.01em}
.buur.volgend{text-align:right}

/* Transcript staat open. Het is waar de aflevering echt in staat, en dichtgeklapt
   oogde die sectie leeg. Het blijft een details-element zodat je het weg kunt
   klappen; Google indexeert de inhoud sowieso, open of dicht. */
.transcript{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.2rem 0}
.transcript summary{cursor:pointer;font-weight:600;letter-spacing:-.01em}

/* 32rem was te krap: een aflevering van drie kwartier is bijna 7000 woorden en
   14.000 pixels, en die door een kier van 512 px schuiven leest niet. Nu bijna
   het hele scherm, met een ondergrens voor korte vensters. */
.transcript .tekst{
  margin-top:1.4rem;max-height:max(28rem,72vh);overflow-y:auto;
  padding-right:1rem;overscroll-behavior:contain;scrollbar-width:thin;
}
/* Zonder deze rand lijkt de tekst onderin gewoon op te houden in plaats van door
   te lopen. */
.transcript .tekst::after{
  content:"";position:sticky;bottom:-1px;display:block;height:3rem;margin-top:-3rem;
  background:linear-gradient(transparent,var(--void));pointer-events:none;
}
/* Op een telefoon is dat vakje een val: het beslaat driekwart van het scherm, je
   vinger landt er altijd in en overscroll-behavior houdt het scrollen binnen het
   vak. Daar laten we het transcript dus gewoon meelopen in de pagina; wie het te
   lang vindt klapt het dicht. */
@media (max-width:48rem){
  .transcript .tekst{max-height:none;overflow:visible;padding-right:0}
  .transcript .tekst::after{display:none}
}
.transcript .tekst p{color:var(--chrome-dim);font-size:.95rem;line-height:1.5;margin:0 0 .5rem}
.transcript .tt{color:var(--chrome-mute);font-variant-numeric:tabular-nums;font-size:.85em;margin-right:.4rem}
.transcript .tekst b{color:var(--chrome);font-weight:600}

/* ---- zoeken over alle afleveringen ---- */
.zoek-uitleg{color:var(--chrome-dim);max-width:44rem;margin:0 0 1.2rem}
.zoek-veld input{
  width:100%;padding:.9rem 1.1rem;font:inherit;font-size:1.05rem;color:var(--chrome);
  background:var(--void-2);border:1px solid var(--line);border-radius:12px;
  -webkit-appearance:none;appearance:none;
}
.zoek-veld input::placeholder{color:var(--chrome-mute)}
.zoek-veld input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-color:transparent}
.zoek-status{color:var(--chrome-mute);font-size:.88rem;margin:.7rem 0 0;min-height:1.2em}
.zoek-uit{list-style:none;margin:1.2rem 0 0;padding:0}
.zu-afl{border-top:1px solid var(--line);padding:1.1rem 0}
.zu-afl h3{font-size:1.02rem;letter-spacing:-.01em;margin:0 0 .5rem}
.zu-afl h3 a{color:var(--chrome);text-decoration:none}
.zu-afl h3 a:hover{color:var(--cyan)}
.zu-rijen{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.zu-rijen a{
  display:block;padding:.5rem .7rem;border-radius:9px;text-decoration:none;
  color:var(--chrome-dim);font-size:.93rem;background:var(--void-2);
}
.zu-rijen a:hover{background:var(--void-3);color:var(--chrome)}
.zu-tijd{color:var(--cyan);font-variant-numeric:tabular-nums;font-size:.85em;margin-right:.15rem}
.zu-spreker{color:var(--chrome);font-weight:600}
.zu-meer{margin:.55rem 0 0;font-size:.88rem}
mark{background:rgba(0,232,255,.22);color:var(--chrome);border-radius:3px;padding:0 .12em}

/* ---- filter op co-host ---- */
.cohost-filter{display:flex;flex-wrap:wrap;gap:.5rem}
.cohost-filter button{
  font:inherit;font-size:.9rem;color:var(--chrome-dim);cursor:pointer;
  padding:.5rem .9rem;border-radius:999px;border:1px solid var(--line);
  background:var(--void-2);transition:border-color .12s ease,color .12s ease;
}
.cohost-filter button:hover{border-color:var(--chrome-mute);color:var(--chrome)}
.cohost-filter button[aria-pressed="true"]{border-color:var(--cyan);color:var(--chrome)}
.cohost-filter .n{color:var(--chrome-mute);font-variant-numeric:tabular-nums;margin-left:.3rem}
.cohost-filter button[aria-pressed="true"] .n{color:var(--cyan)}

/* ---- zoeken binnen een aflevering ---- */
.tr-zoek{display:flex;align-items:center;gap:.75rem;margin-top:1.1rem;flex-wrap:wrap}
.tr-zoek input{
  flex:1 1 14rem;padding:.55rem .8rem;font:inherit;font-size:.95rem;color:var(--chrome);
  background:var(--void-2);border:1px solid var(--line);border-radius:9px;
  -webkit-appearance:none;appearance:none;
}
.tr-zoek input::placeholder{color:var(--chrome-mute)}
.tr-zoek input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-color:transparent}
.tr-status{color:var(--chrome-mute);font-size:.85rem;white-space:nowrap}
/* Aankomen vanaf een treffer: even oplichten, dan weer gewoon. */
.transcript .tekst p.gevonden{
  background:rgba(0,232,255,.10);border-radius:8px;
  box-shadow:0 0 0 .5rem rgba(0,232,255,.10);transition:background .5s ease,box-shadow .5s ease;
}

/* ---- terug naar de lijst, boven de titel ---- */
.kruimel{margin:0 0 .9rem;font-size:.88rem}
.kruimel a{color:var(--chrome-mute);text-decoration:none}
.kruimel a:hover{color:var(--chrome)}

/* ---- hero-kaart met de speler erin ---- */
.hero-card .hc-link{display:block;text-decoration:none;color:inherit}
.hero-card .hc-speler iframe{display:block;width:100%;height:80px;border:0;border-top:1px solid var(--line)}
.hero-card.kaal .hc-speler iframe{height:180px;border-top:0}

/* De standaarddriehoek gaat op een eigen regel staan zodra er een kop in de
   summary zit. Eigen teken dus, rechts uitgelijnd op de kop zelf. */
.transcript summary{list-style:none;display:block}
.transcript summary::-webkit-details-marker{display:none}
.transcript summary .eyebrow{display:block;margin:0 0 .3rem}
.transcript summary h2{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0;
}
.transcript summary h2::after{
  content:"Verbergen";flex:none;font-size:.8rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--chrome-mute);
}
.transcript:not([open]) summary h2::after{content:"Tonen"}
.transcript summary:hover h2::after{color:var(--chrome)}
.transcript summary .eyebrow{margin:0 0 .3rem}

/* De regel waar de speler nu staat. Alleen zichtbaar als de speler ook echt
   bestuurbaar bleek; anders belooft een markering iets wat niet gebeurt. */
.transcript .tekst p.speelt{
  background:rgba(0,232,255,.08);border-radius:8px;
  box-shadow:0 0 0 .5rem rgba(0,232,255,.08);
}
.transcript .tekst p.speelt .tt{color:var(--cyan);font-weight:600}
/* Zolang de speler alleen een link is, ziet het tijdstempel er ook als een link
   uit. Wordt hij bestuurbaar, dan is het een knop naar dat moment. */
.player.bestuurbaar~*  .tt,
body:has(.player.bestuurbaar) .transcript .tt{text-decoration:none;cursor:pointer}
body:has(.player.bestuurbaar) .transcript .tt:hover{color:var(--cyan);text-decoration:underline}

/* Alleen tonen als gemeten is dat Spotify een voorbeeld serveert. Het staat er
   dus nooit als een belofte vooraf, alleen als uitleg achteraf. */
.speler-hint{display:none;color:var(--chrome-mute);font-size:.88rem;margin:.7rem 0 0}
body:has(.player.voorbeeld) .speler-hint{display:block}
body:has(.player.voorbeeld) .transcript .tt{text-decoration:underline;cursor:pointer}

/* De hele transcriptregel is de knop, niet alleen het tijdstempel. Alleen tonen
   als de speler ook echt bestuurbaar bleek, anders belooft een handje iets wat
   niet gebeurt. */
body:has(.player.bestuurbaar) .transcript .tekst p{
  cursor:pointer;border-radius:8px;transition:background .12s ease;
  margin-inline:-.5rem;padding:.1rem .5rem;
}
body:has(.player.bestuurbaar) .transcript .tekst p:hover{background:var(--void-2)}
body:has(.player.bestuurbaar) .transcript .tekst p:hover .tt{color:var(--cyan)}

/* Het wordmark optisch uitlijnen op de letters in plaats van op de rand van het
   plaatje. --wm-shift wordt bij het bouwen gemeten uit het bestand zelf, dus dit
   blijft kloppen als het logo ooit verandert. Percentages in translate gaan over
   de eigen breedte, in margin niet, vandaar deze weg. */
.hero-copy img.mark{transform:translateX(calc(-1 * var(--wm-shift,0%)))}
.top a:has(img){transform:translateX(calc(-1 * var(--wm-shift,0%)))}

/* ---- afleveringpagina: minder lucht ---- */
/* De sectiemarges kloppen op de homepage, waar elk blok een eigen onderwerp is.
   Op een afleveringpagina horen kop, speler en transcript bij elkaar, en dan
   valt er ruim een schermhoogte leegte tussen de knoppen en het transcript. */
.ep-pagina section{padding-block:clamp(1.75rem,3vw,2.5rem)}
.ep-pagina section:first-of-type{padding-top:clamp(1.25rem,2vw,2rem)}
.ep-pagina .cta{margin:1.6rem 0 0}
.ep-pagina .transcript{padding-top:.6rem}

/* ---- speler laadt pas na een klik ---- */
/* De terugval-link (aflevering zonder eigen id) ziet er precies zo uit als de
   knop, anders staat er een kale onderstreepte regel in een leeg kader. */
.speler-start,.ss-terugval{
  display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;width:100%;
  padding:1.1rem 1.25rem;font:inherit;text-align:left;cursor:pointer;color:inherit;
  background:none;border:0;text-decoration:none;
}
.speler-start:hover .ss-play,.ss-terugval:hover .ss-play{background:#5cf2ff}
.ss-play{
  width:2.4rem;height:2.4rem;border-radius:999px;background:var(--cyan);flex:none;
  position:relative;transition:background .12s ease;
}
.ss-play::after{
  content:"";position:absolute;top:50%;left:56%;transform:translate(-50%,-50%);
  border-left:.7rem solid #04252b;border-top:.45rem solid transparent;
  border-bottom:.45rem solid transparent;
}
.ss-tekst{font-weight:600;letter-spacing:-.01em}
.ss-fijn{color:var(--chrome-mute);font-size:.8rem;line-height:1.4;max-width:34rem}
.player.bezig .ss-play,.hc-speler.bezig .ss-play{opacity:.4}
.hc-speler .speler-start{border-top:1px solid var(--line)}

/* Waarschuwing boven een transcript. Moet opvallen zonder de tekst te overstemmen. */
.tr-let-op{
  margin:1.1rem 0 0;padding:.7rem .9rem;border-radius:9px;
  background:var(--void-2);border:1px solid var(--line);
  color:var(--chrome-mute);font-size:.83rem;line-height:1.5;
}
/* Het co-hostfilter hoefde geen eigen sectie met kop vóór het archief. */
section.smal{padding-block:clamp(1.5rem,3vw,2.25rem)}
section.smal .eyebrow{margin-bottom:.7rem}

/* ---- over-pagina: de host met foto ---- */
/* Een echte still van Elwins camera, al gesneden en gefilterd door build_assets.py. */
.host{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,2.5rem);align-items:start}
.host img{aspect-ratio:1;object-fit:contain;display:block}
@media (max-width:40rem){
  .host{grid-template-columns:1fr}
  .host img{max-width:16rem}
}

/* ---- persmap ---- */
.persmap{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.persmap .meta{margin-left:.35rem}