/* The podcast's landing page (build-page.py). Plain colours with strong contrast; no meaning in colour alone.
   Styled with unslop by Damir Sokolovsky (@heydamir), CC BY 4.0. Brand logos from Simple Icons 16.35.0, CC0. */
:root { --bg: #fbfaf7; --card: #ffffff; --raised: #f0ede6; --text: #1b1b19; --soft: #4b4a45; --line: #dcd8cf; --accent: #2b5a40;
        --accent-text: #ffffff; --focus: #1b1b19; color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #151514; --card: #1f1f1d; --raised: #2a2926; --text: #f3f1ec; --soft: #c9c6be; --line: #3a3934; --accent: #a6d6b6;
          --accent-text: #0f2418; --focus: #f3f1ec; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }
html { -webkit-text-size-adjust: 100%; overflow-anchor: none; }  /* the page never scrolls by itself when something opens */
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: inherit; text-underline-offset: 3px; }
a, button { border-radius: 4px; }  /* the focus ring follows each control's own corners */
a:focus-visible, button:focus-visible, audio:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.scard:focus-visible { outline-offset: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 12px; background: var(--card); padding: 12px 16px; border-radius: 8px; z-index: 2; }
.top, main, footer { max-width: 760px; margin: 0 auto; padding: 0 16px; }
main { padding-top: 24px; padding-bottom: 32px; }

/* the brand logos, alone as the links, in their own colours (each at least 3:1 against both page backgrounds, light
   #fbfaf7 and dark #151514: Apple 5.4 and 3.2, Instagram 3.7 and 4.8, YouTube 3.8 and 4.6; Spotify's green disc
   carries dark waves at 9.8:1, its official form; TikTok in the text colour) */
.logo { display: block; flex: none; width: 28px; height: 28px; fill: currentColor; }
.logo.ap path { fill: #9933cc; } .logo.ap .u { fill: #ffffff; }
.logo.sp path { fill: #1ed760; } .logo.sp .u { fill: #121212; }
.logo.ig path { fill: #ff0069; }
.logo.yt path { fill: #ff0000; } .logo.yt .u { fill: #ffffff; }

/* the other pages' way back: the show's cover, small, and its name */
.top.back { display: flex; padding-top: 12px; }
.top.back a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 500; text-decoration: none; }
.top.back a:hover { text-decoration: underline; }
.top.back img { display: block; width: 32px; height: 32px; border-radius: 6px; }

/* the show */
.hero { display: grid; gap: 20px; }
.cover { width: 100%; max-width: 240px; height: auto; border-radius: 14px; }
@media (min-width: 640px) { .hero { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
@media (max-width: 639px) {
  .hero { grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: center; }
  .intro { display: contents; }
  .cover { grid-row: 1 / 4; grid-column: 1; width: 104px; border-radius: 10px; }
  h1, .by, .count { grid-column: 2; }
  .about, .where { grid-column: 1 / -1; }
  .about { margin-top: 16px; }
  .hero h1 { font-size: 1.5rem; }
  .count .nw { display: block; }
  .count .sep { display: none; }
}
h1 { font-size: 2rem; line-height: 1.15; font-weight: 600; margin: 0 0 8px; letter-spacing: 0; text-wrap: balance; }
.by { margin: 0; font-weight: 500; }
.count { margin: 4px 0 12px; color: var(--soft); font-size: 0.9375rem; }
.about p { margin: 0 0 12px; }

/* where to listen and follow: two small groups of logos, no boxes; each logo sits centred in a 48 px tap area, and
   the row starts 10 px further left so the first logo's edge lines up with the text above it */
.where { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 4px; }
.where h2 { font-size: 0.9375rem; font-weight: 500; line-height: 20px; color: var(--soft); margin: 0 0 4px; }
.btns { list-style: none; margin: 0 0 0 -10px; padding: 0; display: flex; gap: 4px; }
.lb { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px; color: var(--text); }
.lb:hover { color: var(--soft); }

/* the seasons, side by side, each its cover with its name and count under it; page.js turns them into tabs */
#afleveringen { margin-top: 40px; }
.seasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.scard { display: flex; flex-direction: column; align-items: center; color: var(--text); text-align: center; text-decoration: none;
         border-radius: 8px; }
.scard img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin-bottom: 8px;
             transition: opacity 120ms ease-out; }
.scard .sn { font-weight: 600; line-height: 1.3; }
.scard .sc { font-size: 0.8125rem; line-height: 1.4; color: var(--soft); white-space: nowrap; }
/* the chosen season: a bar under it the width of its cover, its name in full; the others' covers faded and their
   names quieter. Light against dark, never one hue against another. */
.scard::after { content: ""; display: block; width: 100%; height: 4px; margin-top: 8px; border-radius: 2px; background: transparent; }
.scard[aria-selected="true"]::after { background: var(--text); }
.seasons:has([aria-selected="true"]) .scard[aria-selected="false"] .sn { color: var(--soft); }
.seasons:has([aria-selected="true"]) .scard[aria-selected="false"] img { opacity: 0.45; }
.seasons:has([aria-selected="true"]) .scard[aria-selected="false"]:hover img { opacity: 0.8; }
@media (min-width: 640px) {
  .seasons { gap: 24px; }
  .scard .sn { font-size: 1.0625rem; }
  .scard .sc { font-size: 0.9375rem; }
}
.season { margin-top: 32px; scroll-margin-top: 12px; }
.shead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding-bottom: 12px; }
.shead h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin: 0; }
.shead .span { margin: 0; color: var(--soft); font-size: 0.9375rem; }
/* the sorter: two words, the chosen one marked the way the chosen season is, with a bar under it */
.order { display: flex; gap: 8px; margin: 0 -8px; }
.order button { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; border: 0;
                background: transparent; color: var(--soft); font: inherit; font-size: 0.9375rem; font-weight: 500; line-height: 20px; cursor: pointer; }
.order button::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 3px; border-radius: 2px; background: transparent; }
.order button[aria-pressed="true"] { color: var(--text); }
.order button[aria-pressed="true"]::after { background: var(--text); }
.order button:hover { color: var(--text); }

/* the episodes: a hairline between them keeps eight to eleven long rows apart, with no box around any */
.ep { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 20px 0 8px; border-top: 1px solid var(--line); scroll-margin-top: 12px; }
.ep:target { border-left: 4px solid var(--accent); padding-left: 12px; }
.art { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; }
.body { min-width: 0; overflow-wrap: anywhere; }
.num { margin: 0 0 4px; color: var(--soft); font-size: 0.8125rem; line-height: 20px; font-variant-numeric: tabular-nums; }
.ep h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; margin: 0 0 4px; }
.ep h4 a.page { text-decoration: none; }
.ep h4 a.page:hover { text-decoration: underline; }
.meta { margin: 0 0 12px; color: var(--soft); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
audio { display: block; width: 100%; height: 44px; margin: 0 0 12px; }
audio::-webkit-media-controls-panel { background-color: var(--raised); }
.desc, .tekst p { margin: 0 0 8px; }
.tekst p:last-child { margin-bottom: 0; }
.desc.kort { margin: 0; }
/* under the text: "Lees meer" on the left, download and share as icons on the right (their ink on the text's edge) */
.acts { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; }
.more { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text);
        font: inherit; font-size: 0.9375rem; font-weight: 500; line-height: 20px; cursor: pointer; }
.more .ic { width: 18px; height: 18px; }
.more[aria-expanded="true"] .ic { transform: rotate(180deg); }
.more .c, .more[aria-expanded="true"] .o { display: none; }
.more[aria-expanded="true"] .c { display: inline; }
.more:hover .o, .more:hover .c { text-decoration: underline; text-underline-offset: 3px; }
.ibs { display: flex; align-items: center; gap: 4px; margin: 0 -11px 0 auto; }
.ib { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px;
      background: none; color: var(--soft); cursor: pointer; }
.ib:hover { color: var(--text); }
.note { margin-right: 4px; color: var(--soft); font-size: 0.875rem; }
.ic { display: block; flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 480px) {
  .ep { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .art { width: 64px; height: 64px; }
}

/* another app: the feed, at the bottom, set apart by space alone */
.feed { margin: 56px 0 0; }
.feed h2 { font-size: 1.25rem; font-weight: 600; margin: 0 0 8px; }
.feed p { margin: 0 0 4px; color: var(--soft); }
.feedurl { overflow-wrap: anywhere; }
.feedurl code { font: 0.875rem/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text); user-select: all; }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); font: inherit;
       font-weight: 500; line-height: 20px; cursor: pointer; }
.btn .ic { width: 20px; height: 20px; margin-left: -4px; }  /* the copy mark's ink on the text's edge */
.btn:hover span { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 360px) { .feedurl code { font-size: 0.75rem; } }

/* an episode's own page: its cover beside the title, player and icons; on a phone a small cover beside the season and
   date, the title under them */
.ehead { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 24px; align-items: start;
         grid-template-areas: "cover num" "cover title" "cover meta" "cover play" "cover acts" "cover ."; grid-template-rows: auto auto auto auto auto 1fr; }
.ecover { grid-area: cover; display: block; width: 100%; height: auto; border-radius: 12px; }
.ehead .num { grid-area: num; margin: 4px 0 8px; font-size: 0.9375rem; }
.ehead h1 { grid-area: title; font-size: 1.75rem; line-height: 1.2; text-wrap: pretty; }
.ehead .meta { grid-area: meta; margin-bottom: 16px; }
.ehead audio { grid-area: play; }
.ehead .acts { grid-area: acts; margin-top: -4px; }
@media (max-width: 639px) {
  .ehead { grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px;
           grid-template-areas: "cover num" "cover meta" "title title" "play play" "acts acts"; grid-template-rows: auto auto auto auto auto; }
  .ecover { border-radius: 10px; }
  .ehead .num { align-self: end; margin: 0 0 4px; }
  .ehead .meta { align-self: start; margin: 0; }
  .ehead h1 { font-size: 1.375rem; margin: 20px 0 16px; }
}
.verhaal { margin-top: 24px; max-width: 640px; overflow-wrap: anywhere; }
.verhaal p { margin: 0 0 16px; }
.aflevering .where { margin-top: 32px; }
/* the episodes before and after it, and the way back to its season: words and titles, no boxes */
.buren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); }
.buren a.prev, .buren a.next { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; text-decoration: none; overflow-wrap: anywhere; }
.buren a.next { grid-column: 2; text-align: right; }
.buren .dir { color: var(--soft); font-size: 0.9375rem; font-weight: 500; }
.buren .t { font-weight: 600; line-height: 1.3; }
.buren a:hover .t { text-decoration: underline; text-underline-offset: 3px; }
.buren .alle { grid-column: 1 / -1; margin: 16px 0 0; }
.buren .alle a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
@media (max-width: 639px) {
  .buren { grid-template-columns: minmax(0, 1fr); }
  .buren a.next { grid-column: 1; text-align: left; }
  .buren a.prev + a.next { margin-top: 8px; }
}

/* the privacy page */
.doc h1 { margin: 12px 0 4px; }
.doc .updated { margin-bottom: 24px; color: var(--soft); font-size: 0.9375rem; }
.doc h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin: 32px 0 8px; }
.doc p, .doc ul { margin: 0 0 12px; max-width: 640px; }
.doc ul { padding-left: 20px; }
.doc li { margin: 0 0 8px; }

footer { padding-top: 8px; padding-bottom: 40px; border-top: 1px solid var(--line); color: var(--soft); font-size: 0.9375rem; }
footer p { margin: 0; }
footer a { display: inline-flex; min-height: 44px; align-items: center; }
@media (max-width: 359px) {  /* small phones, last so it wins: smaller season labels */
  .count .nw { white-space: normal; }
  .scard .sn { font-size: 0.875rem; }
  .scard .sc { font-size: 0.75rem; white-space: normal; }
}