/* pages.css — de onderdelen die bij de nieuwe paginastructuur horen.
   Apart van style.css omdat dat bestand van de vormgever is en nooit herschreven wordt;
   alles hier gebruikt zijn tokens, dus een wissel van palet komt vanzelf mee. */

/* ── kopnavigatie ── */
.topnav{display:flex;gap:18px;margin-left:26px;align-items:center;flex-wrap:wrap}
.topnav a{font:500 13px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;padding:6px 0;
  border-bottom:1.5px solid transparent;transition:color var(--tempo),border-color var(--tempo)}
.topnav a:hover{color:var(--text);border-bottom-color:var(--gilt)}
.mobile-nav{display:none}
/* Op smal scherm bleef de navigatie WEG. Dat was onzichtbaar zolang er geen
   viewport-meta stond, want dan rendert een telefoon op 980px en gold deze regel nooit;
   met de meta erbij zou een bezoeker op een telefoon alleen het logo overhouden. Dus:
   blijven staan, op een eigen regel, horizontaal schuifbaar, en met raakvlakken van 44px.
   Gemeten 2026-09-05 op 375px. */
@media (max-width:820px){
  /* De basisregel zet height:58px vast; met een tweede rij eronder moet de balk kunnen
     meegroeien, anders valt de navigatie over de inhoud heen. */
  .bar{flex-wrap:wrap;gap:0 14px;height:auto;min-height:58px;padding:0 18px}
  .bar .hint{display:none}                 /* een sneltoets zegt niets op een telefoon */
  .bar .spacer{display:none}               /* houdt thema en menu op de eerste rij bij 320px */
  .bar .mark{margin-right:auto}
  .topnav{display:none}
  .mobile-nav{display:block;position:relative}
  .mobile-nav>summary{display:flex;align-items:center;justify-content:center;min-width:58px;
    min-height:44px;padding:0 10px;border:1px solid var(--rule);border-radius:8px;
    background:var(--surface);color:var(--text);cursor:pointer;list-style:none;
    font:600 10px/1 "Geist Mono",ui-monospace,monospace;text-transform:uppercase;
    letter-spacing:.08em}
  .mobile-nav>summary::-webkit-details-marker{display:none}
  .mobile-nav[open]>summary{border-color:var(--teal);color:var(--teal)}
  .mobile-nav-panel{position:absolute;z-index:80;right:0;top:calc(100% + 7px);display:grid;
    width:min(300px,calc(100vw - 32px));max-height:calc(100dvh - 86px);overflow:auto;
    padding:8px;background:var(--surface);border:1px solid var(--rule);border-radius:10px;
    box-shadow:var(--lift)}
  .mobile-nav-panel a{display:flex;align-items:center;min-height:44px;padding:0 12px;
    border-bottom:1px solid var(--rule-faint);font:500 12px/1.2 "Geist Mono",ui-monospace,monospace;
    letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
  .mobile-nav-panel a:last-child{border-bottom:0}
}

/* ── broodkruimels ── */
.crumbs{font:400 13px/1.6 "Geist Mono",ui-monospace,monospace;color:var(--dim);
  margin:22px 0 4px;letter-spacing:.02em}
.crumbs a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--rule-faint)}
.crumbs a:hover{color:var(--crimson);border-bottom-color:var(--crimson)}
.crumb-sep{opacity:.45;padding:0 2px}

/* ── lopende tekst ──
   62 tekens is de leesbreedte waar de meeste typografie op uitkomt; op een pagina die
   verder uit lijsten bestaat is dat het verschil tussen lezen en scannen. */
.prose{max-width:62ch;margin:26px auto 34px;font-weight:400;font-size:19px;line-height:1.68;
  color:var(--text)}
.prose p{margin:0 0 17px}
.prose p:last-child{margin-bottom:0}
.prose b{font-weight:600}
.prose i{font-style:italic}
.prose a{color:var(--crimson);text-decoration:none;border-bottom:1px solid var(--teal-soft)}
.prose a:hover{border-bottom-width:2px}
.prose h2{font-size:22px;line-height:1.3;margin:30px 0 12px}
.prose.closing{border-top:1px solid var(--rule-faint);padding-top:24px;margin-top:44px;
  font-size:17px;color:var(--muted)}
.startline{font-size:17px;color:var(--muted)}
.startline b{color:var(--text)}

/* ── cijferregel onder een titel ── */
.figrow{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  margin:14px 0 0}

/* ── pillen: interne links naar shows ── */
.pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 26px;
  max-width:840px}
.pill{font:500 12.5px/1 "Geist Mono",ui-monospace,monospace;padding:8px 13px;text-decoration:none}
.pill:hover{transform:translateY(-1px)}

/* Fraunces op elementen die geen kop zijn; de koppen erven dit uit style.css. */
.bigbtn b,.seq-t,.pick-t{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;
  font-weight:640;font-variation-settings:"SOFT" 22,"WONK" 1;letter-spacing:-.004em}

/* ── dikke knoppen op de voorpagina ── */
.bigbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;
  margin:34px 0 40px}
.bigbtn{display:block;padding:24px 22px;background:var(--surface);border:1px solid var(--rule);
  border-radius:4px;text-decoration:none;color:var(--text);box-shadow:var(--lift);
  transition:transform var(--tempo),border-color var(--tempo)}
.bigbtn:hover{transform:translateY(-3px);border-color:var(--gilt)}
.bigbtn b{display:block;font-size:25px;line-height:1.15;
  margin-bottom:8px}
.bigbtn span{display:block;font-weight:400;font-size:15px;line-height:1.45;color:var(--muted)}

/* ── genummerde showkaarten op /podcasts ── */
.tierlede{max-width:60ch;margin:0 0 20px}
.ranks{display:flex;flex-direction:column;gap:0;margin:0 0 42px}
.rank{display:flex;gap:20px;padding:24px 0;border-top:1px solid var(--rule-faint)}
.rank:last-child{border-bottom:1px solid var(--rule-faint)}
.rank-n{flex:0 0 auto;width:46px;font:500 26px/1 "Geist Mono",ui-monospace,monospace;
  color:var(--gilt);opacity:.6;padding-top:4px}
.rank-b{flex:1 1 auto;min-width:0;max-width:66ch}
.rank-b h3{font-size:24px;line-height:1.2;margin:0 0 6px}
.rank-b h3 a{color:var(--text);text-decoration:none;border-bottom:2px solid transparent}
.rank-b h3 a:hover{color:var(--crimson);border-bottom-color:var(--crimson)}
.rank-b .meta{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);
  margin:0 0 12px}
.rank-b p{font-weight:400;font-size:17.5px;line-height:1.6;margin:0 0 10px}
.rank-go{margin-top:12px !important}
.rank-art{flex:0 0 auto;width:56px;height:56px;border-radius:3px;object-fit:cover;
  border:1px solid var(--rule);background:var(--surface)}
.rank-art-x{display:grid;place-items:center;font-family:"Fraunces",Georgia,serif;
  font-weight:600;font-size:24px;color:var(--gilt);line-height:1}
@media (max-width:600px){.rank{gap:12px}.rank-n{width:32px;font-size:19px}
  .rank-art{width:44px;height:44px}.rank-art-x{font-size:19px}}

/* ── vorige/volgende tijdvak ── */
.seqnav{display:flex;gap:14px;margin:44px 0 10px;flex-wrap:wrap}
.seq{flex:1 1 220px;padding:18px 20px;text-decoration:none}

.seq.next{text-align:right}
.seq-k{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin-bottom:5px}
.seq-t{display:block;font-size:18px;line-height:1.25;color:var(--text)}

/* ── waar te beginnen ──
   Drie kaarten boven de vouw. De rest van de pagina is een index; dit is het antwoord. */
.startbox{margin:6px 0 30px;padding:22px 0 4px;border-top:2px solid var(--gilt);
  border-bottom:1px solid var(--rule-faint)}
.startbox-h{font:600 15px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gilt);margin:0 0 16px;text-align:center}
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;
  margin-bottom:20px}
.pick{display:block;padding:18px 18px 20px;background:var(--surface);
  border:1px solid var(--rule);border-radius:4px;text-decoration:none;color:var(--text);
  transition:transform var(--tempo),border-color var(--tempo)}
.pick:hover{transform:translateY(-2px);border-color:var(--gilt)}
.pick-t{display:block;font-size:19px;line-height:1.25;margin-bottom:6px}
.pick-m{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);margin-bottom:10px}
.pick-w{display:block;font-weight:400;font-size:16px;line-height:1.5;color:var(--muted)}

/* ── boeken ── */
.bks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;
  margin:0 0 40px}
.bk{padding:22px 20px 18px;background:var(--surface);border:1px solid var(--rule);
  border-radius:4px;display:flex;flex-direction:column}
.bk-t{font-size:21px;line-height:1.25;margin:0 0 6px}
.bk-a{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);
  margin:0 0 12px}
.bk-a a{color:var(--crimson);text-decoration:none;border-bottom:1px solid transparent}
.bk-a a:hover{border-bottom-color:var(--crimson)}
.bk-v{font-weight:400;font-size:16.5px;line-height:1.55;margin:0 0 16px;flex:1 1 auto}
.bk-go{margin:0}
.bkbtn{display:inline-block;padding:10px 18px;text-decoration:none;font:500 13px/1 "Geist Mono",ui-monospace,monospace}
.bkbtn:hover{transform:translateY(-1px)}


/* ── raakvlakken ──
   Op 375px waren negentig klikbare elementen lager dan 44px, waaronder elke boekknop
   (33px) en elke navigatielink (27px). Onder die maat mis je met een duim.
   Gemeten 2026-09-05. */
@media (max-width:820px){
  .bkbtn,.pill,.seq{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .pill{padding:0 16px}
  .bkbtn{padding:0 20px}
  .pick{padding:20px 18px}
}

/* ── hoeveel er nog is ──
   Een lijst die af lijkt nodigt niet uit tot doorlezen. Het totaal en de restanten
   staan nu bij de kop, zodat zichtbaar is hoe diep de pagina gaat. */
.tally{display:block;font:400 12.5px/1.5 "Geist Mono",ui-monospace,monospace;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:16px 0 4px}
.sechead .tally-in{font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;
  letter-spacing:.06em;color:var(--dim);opacity:.75;margin-left:10px;font-weight:400;
  text-transform:none}

/* ── springnavigatie ──
   Direct onder de titel, boven de lopende tekst. Geeft in een klik toegang tot elke groep
   en laat tegelijk zien hoeveel er is. */
.jumps{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 30px;
  max-width:900px}
.jump{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;text-decoration:none;font-size:13.5px;line-height:1}
.jump:hover{transform:translateY(-1px)}
.jump-n{font-size:11px;opacity:.6}
@media (max-width:820px){.jump{min-height:44px}}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* ── kop inkorten op smal scherm ──
   Op 375px stond de eerste showkaart op 1816 pixels, waarvan ongeveer zevenhonderd kop.
   De titel blijft de titel; de ruimte eromheen mag krimpen. Gemeten 2026-09-05. */
@media (max-width:640px){
  .mast-sub{padding-top:18px;padding-bottom:10px}
  .title-sub{font-size:34px;line-height:1.08}
  .mast-sub .sub{font-size:16.5px}
  .prose{font-size:17.5px;margin-top:18px}
  .sechead{margin-top:26px}
  .tierlede{font-size:15.5px}
}

/* ── voorpagina: de ingangen boven de vouw ──
   De knoppen stonden op 719 pixels en dus onder de vouw van een gewone laptop, terwijl ze
   de eigenlijke navigatie zijn. De cijferrij is naar onder de knoppen verplaatst en de kop
   is ingekort; het welkomstblok blijft staan, want dat is het moment dat de pagina maakt.
   Gemeten 2026-09-05. */
.mast{padding-top:40px !important;padding-bottom:26px !important}
.bigbtns{margin-top:26px}
.figures{margin:34px 0 8px}
@media (max-width:640px){.mast{padding-top:24px !important}}

/* Vijf knoppen met auto-fit gaven 4 + 1, en die eenling leest als een fout. Vaste
   kolommen per breedte, zodat elke rij vol is: 5, dan 3, dan 2, dan 1. */
.bigbtns{grid-template-columns:repeat(5,1fr)}
.bigbtns .bigbtn b{font-size:22px}
@media (max-width:1080px){.bigbtns{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.bigbtns{grid-template-columns:repeat(2,1fr)}
  .bigbtns .bigbtn b{font-size:19px}}
@media (max-width:420px){.bigbtns{grid-template-columns:1fr}}


/* ── teller en wisknop ── */
/* De teller zei alleen hoeveel er over waren. Nu zegt hij welk filter aanstaat, want een
   chip is een schakelaar en een tweede druk zet hem uit; zonder dat verschil lijkt een
   uitgezette filter op een kapotte filter. */
.hits.aan{color:var(--text)}
.hits-wis{font:500 11px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);background:none;border:0;border-bottom:1px solid var(--rule);
  padding:4px 0;margin:6px 0 0;cursor:pointer}
.hits-wis:hover{color:var(--text);border-bottom-color:var(--gilt)}
.hits-wis:focus-visible{outline:2px solid var(--gilt);outline-offset:3px}