/* Noordlicht Podcast: dezelfde vlakke, drukwerkachtige stijl als de radio. De kleur van de pagina is die van het programma. Letters: Nimbus Sans Narrow (stellig), Nimbus Sans (gewoon), Bookman (wat gezegd wordt). */
@font-face{font-family:"Nimbus Narrow";src:url(../fonts/NimbusSansNarrow-Bold.otf) format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"Nimbus Sans";src:url(../fonts/NimbusSans-Regular.otf) format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Nimbus Sans";src:url(../fonts/NimbusSans-Bold.otf) format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"URW Bookman";src:url(../fonts/URWBookman-Light.otf) format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"URW Bookman";src:url(../fonts/URWBookman-LightItalic.otf) format("opentype");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"URW Bookman";src:url(../fonts/URWBookman-Demi.otf) format("opentype");font-weight:600;font-style:normal;font-display:swap}

@property --bg{syntax:"<color>";inherits:true;initial-value:#1c3fa8}
@property --ink{syntax:"<color>";inherits:true;initial-value:#eef1fb}
@property --hot{syntax:"<color>";inherits:true;initial-value:#a6efd8}

:root{--narrow:"Nimbus Narrow","Arial Narrow","Helvetica Neue",Arial,sans-serif;--sans:"Nimbus Sans","Helvetica Neue",Helvetica,Arial,sans-serif;--book:"URW Bookman","Bookman Old Style","Palatino Linotype",Georgia,serif;--pad:clamp(16px,3vw,44px)}
body{--bg:#1c3fa8;--ink:#eef1fb;--hot:#a6efd8}
body[data-show=alle]{--bg:#e8a33d;--ink:#231505;--hot:#a82f16}
body[data-show=uitgelegd]{--bg:#1c3fa8;--ink:#eef1fb;--hot:#a6efd8}
body[data-show=verzonnen]{--bg:#2b1a63;--ink:#f6effe;--hot:#ff8a63}
body{--dim:color-mix(in srgb,var(--ink) 74%,var(--bg));--rule:color-mix(in srgb,var(--ink) 28%,transparent)}
*{box-sizing:border-box}
html{background:var(--bg)}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.45 var(--sans);transition:--bg 1.4s ease,--ink 1.4s ease,--hot 1.4s ease;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--hot);outline-offset:3px}

.page{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);grid-template-rows:auto 1fr auto;column-gap:clamp(28px,5vw,80px);padding:0 var(--pad)}
header{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:4px solid var(--ink);padding:18px 0 10px}
.brand{display:flex;align-items:center;gap:14px;font:700 clamp(28px,3.4vw,44px)/.95 var(--narrow);letter-spacing:-.01em;text-decoration:none}
.meta{display:flex;gap:22px;font-size:15px;color:var(--dim);white-space:nowrap}
.meta a{text-decoration:none;border-bottom:2px solid var(--ink);color:var(--ink)}
.stage{padding:clamp(20px,4vh,48px) 0 40px;min-width:0}
.side{padding:clamp(20px,4vh,48px) 0 40px;min-width:0}
h1{margin:0;font:700 clamp(48px,8.6vw,140px)/.88 var(--narrow);letter-spacing:-.015em;overflow-wrap:anywhere;text-wrap:balance}
h1.swap{animation:rise .7s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(.28em);opacity:0}to{transform:none;opacity:1}}
.desc{max-width:40rem;margin:clamp(16px,3vh,28px) 0 0;font:300 italic clamp(20px,2vw,28px)/1.3 var(--book)}
.by{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:clamp(16px,2.6vh,26px);font-size:clamp(16px,1.5vw,20px)}
.tag{font:700 14px/1 var(--sans);padding:6px 9px 5px;background:var(--ink);color:var(--bg)}
.btn{background:var(--ink);color:var(--bg);border:0;border-radius:0;padding:12px 20px;font:700 16px/1.1 var(--sans);cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:var(--hot)}.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}
.btn.sm{padding:7px 12px;font-size:14px}
.btn.on{background:var(--ink);color:var(--bg)}
.play{display:inline-flex;align-items:center;gap:16px;padding:16px 28px 14px 22px;font:700 clamp(26px,2.6vw,34px)/1 var(--narrow);margin-top:clamp(20px,4vh,40px)}
.play i{width:20px;height:22px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}

.blk{border-top:4px solid var(--ink);padding-top:10px;margin-bottom:34px}
.blk h2{margin:0 0 8px;font:700 clamp(28px,2.4vw,34px)/1 var(--narrow)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.toc{list-style:none;margin:0;padding:0}
.toc a{display:grid;grid-template-columns:3.2rem 1fr auto;gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid var(--rule);text-decoration:none}
.toc li:first-child a{border-top:0}
.toc a:hover .tt{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.toc .nr{font:700 34px/1 var(--narrow);color:var(--hot)}
.toc .tt{font:700 clamp(22px,1.9vw,27px)/1.05 var(--narrow)}
.toc .tt small{display:block;margin-top:5px;font:400 14px/1.3 var(--sans);color:var(--dim)}
.toc .du{font-size:14px;color:var(--dim);white-space:nowrap}
.empty{color:var(--dim);font:300 italic 20px/1.3 var(--book);padding:12px 0}

/* aflevering */
.hero-by{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.chapters{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chapters button{font:700 14px/1 var(--sans);padding:8px 11px 7px;background:transparent;border:0;box-shadow:inset 0 0 0 2px var(--ink);cursor:pointer}
.chapters button:hover,.chapters button.on{background:var(--ink);color:var(--bg)}
.chapters time{font-weight:400;margin-right:7px;opacity:.8}
.script{margin-top:clamp(28px,5vh,56px);max-width:46rem;padding-bottom:140px}
.ln{display:grid;grid-template-columns:5.6rem 1fr;gap:6px 18px;margin:0;padding:12px 0 12px 16px;border-left:6px solid transparent;opacity:.5;cursor:pointer;transition:opacity .25s,border-color .25s}
.ln:hover{opacity:.8}
.ln.on{opacity:1;border-left-color:var(--hot)}
.ln .who{font:700 17px/1.7 var(--narrow);letter-spacing:.02em;color:var(--hot);padding-top:6px;overflow-wrap:anywhere}
.ln .tx{font:300 clamp(21px,2.1vw,27px)/1.35 var(--book)}
.ln.narr .who{color:var(--dim)}.ln.narr .tx{font-style:italic}
.ln.chap{margin-top:28px}
.chaphead{margin:34px 0 4px 16px;font:700 clamp(26px,2.5vw,34px)/1 var(--narrow);border-top:4px solid var(--ink);padding-top:10px}
.facts{font-size:15px;line-height:1.5}.facts p{margin:0 0 10px}.facts .dim{color:var(--dim)}

.player{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--bg);border-top:4px solid var(--ink);padding:10px var(--pad) calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto auto;gap:14px;align-items:center;transition:background-color 1.4s}
.player .pp{width:58px;height:58px;padding:0;display:grid;place-items:center}
.player .pp i{width:20px;height:22px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.player .pp.on i{clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
.player .sk{font:700 15px/1 var(--sans);padding:10px 9px;min-width:48px}
.scrub{position:relative;height:34px;display:flex;align-items:center}
.scrub input{width:100%}
.scrub .tk{position:absolute;top:2px;width:2px;height:9px;background:var(--ink);pointer-events:none}
.clock{font-variant-numeric:tabular-nums;font-size:15px;color:var(--dim);white-space:nowrap}
.player .rate{font:700 15px/1 var(--sans);min-width:54px;padding:10px 8px}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;padding:0;margin:0;border:0;width:100%;height:28px}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--ink)}
input[type=range]::-moz-range-track{height:3px;background:var(--ink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:26px;background:var(--hot);border:0;border-radius:0;margin-top:-12px}
input[type=range]::-moz-range-thumb{width:12px;height:26px;background:var(--hot);border:0;border-radius:0}

input[type=text],input:not([type]),textarea,select{width:100%;background:transparent;border:0;border-bottom:2px solid var(--ink);border-radius:0;padding:10px 0 8px;font:300 italic 20px/1.3 var(--book)}
textarea{resize:none}
::placeholder{color:var(--dim);opacity:1}
input:focus,textarea:focus,select:focus{outline:0;border-bottom-color:var(--hot);box-shadow:0 2px 0 var(--hot)}
.row{display:flex;gap:14px;align-items:center;margin-top:14px;flex-wrap:wrap}
.dim{color:var(--dim)}.err{color:var(--hot);font-weight:700}
.overlay{position:fixed;inset:0;background:var(--bg);z-index:10;display:grid;place-items:center;padding:var(--pad)}
.overlay[hidden]{display:none}
.box{width:min(520px,100%)}
.box h2{margin:0 0 6px;font:700 clamp(54px,12vw,110px)/.86 var(--narrow);letter-spacing:-.015em}
.box p{margin:12px 0 0;font-size:18px}
.box .row input{max-width:260px}
footer{grid-column:1/-1;border-top:4px solid var(--ink);padding:10px 0 18px;font-size:13px;color:var(--dim)}
.page.withplayer footer{padding-bottom:110px}

@media (max-width:860px){
  .page{grid-template-columns:minmax(0,1fr)}
  header{align-items:center}.meta{gap:14px;font-size:14px}
  .stage{padding-bottom:10px}.side{padding-top:6px}
  .toc a{grid-template-columns:2.4rem 1fr}.toc .du{display:none}
  .ln{grid-template-columns:1fr;padding-left:12px}.ln .who{padding-top:0;font-size:15px}
  .player{grid-template-columns:auto auto minmax(0,1fr) auto;row-gap:6px}
  .player .sk.back{display:none}.player .clock{grid-column:3;grid-row:1;text-align:right}.player .scrub{grid-column:1/-1;grid-row:2}.player .rate{grid-column:4;grid-row:1}
  .player .pp{width:50px;height:50px}
}
@media (prefers-reduced-motion:reduce){body{transition:none}h1.swap{animation:none}.ln{transition:none}}
@media (min-width:861px){.withplayer .side{position:sticky;top:20px;align-self:start;max-height:calc(100vh - 140px);overflow:auto}}