/* ameliebeerens.com: the Podcast page and the episode pages (the brief of
   9 Oct 2026: the podcast page is also the blog page, every episode with
   its written companion, listed as one thing; the show's branding stays:
   the pink bar, the disco ball, the photo). Loaded after pages.css and
   issue.css; the markup comes from build_site.py (podcast, post_page).
   Composed from the site's own parts: the hero's text (nuance.css), the
   homepage's three figures (nu-proof), the Lab's chip, the rows and the
   links of pages.css, the issue's reading column. Ink hairlines,
   Montserrat for the meta lines and the labels, the serif for the titles.
   --podcast-pink is the page's one token: the bar and the active filter
   chip, defined here and nowhere else on the site; always ink type on it. */

/* ------------------------------------------------------------------ hero -- */
/* The site's hero, its proportions kept (nuance.css: the three columns
   50% / the picture / 245px, the text padded 64px on the left and its
   intro at 90%, the picture column's right border under the header's
   last divider): text left, Amélie's cutout and the disco ball centred
   side by side in the picture column, the show's three figures stacked
   in the far right column as on Home, Consulting and About. The H1 is one step
   down the scale (52px). Under all three columns, to the page's edge,
   the pink line: it is the boundary between this section and the next
   (Amélie, 9 Oct 2026). It is 64px and carries no words: the four
   platforms' marks spread across its right, clear of Amélie's legs. The hero ends at the
   line's bottom edge: her legs hang over the next section, so the
   overflow is visible and the hero paints above what follows. The
   figure hangs from the first row's bottom edge, so her seat is on the
   line's top edge. The hue (nuance.css) is given a band around the pink
   line, reaching above it and a little below it, and its own stacking
   context so the ellipses pass behind the line instead of tinting it.
   The band's last fifth, the part under the line, is faded out by a mask
   so the clipping edge never shows (Amélie, 9 Oct 2026). */
.ep-hero, .ep-latest { --ep-fig: clamp(400px, calc(80vh - 220px), 520px); --ep-seat: 0.57; --ep-bar: 64px; }
.ep-hero { --podcast-pink: var(--pink); z-index: 2; overflow: visible; grid-template-rows: minmax(0, 1fr) var(--ep-bar); min-height: 0; }
.ep-hero h1 { font-size: 52px; }
.ep-hero .ep-hero__text { grid-area: 1 / 1 / 2 / 2; align-self: end; min-height: calc(var(--ep-fig) * var(--ep-seat) + 24px); padding: 32px 32px 24px 64px; }
.ep-hero .ep-hero__media { grid-area: 1 / 2 / 2 / 3; z-index: 2; display: flex; align-items: flex-start; justify-content: center; gap: var(--space-4); min-height: 0; border: 0; border-right: 1px solid var(--nu-rule); }
.ep-hero .ep-hero__me { position: static; align-self: flex-end; width: auto; height: var(--ep-fig); max-width: none; margin-bottom: calc(-1 * var(--ep-fig) * (1 - var(--ep-seat))); object-fit: unset; }
.ep-hero .ep-hero__disco { position: static; align-self: flex-start; width: auto; height: var(--ep-ball, 230px); max-width: none; object-fit: unset; }
.ep-hero .ep-proof { grid-area: 1 / 3 / 2 / 4; }
.ep-hero > .nu-glow { z-index: 0; inset: auto 0 calc(-1 * var(--ep-bar)) 0; height: calc(var(--ep-bar) * 5);
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }
.ep-bar { grid-area: 2 / 1 / 3 / 4; position: relative; z-index: 1; background: var(--podcast-pink); color: var(--ink); }
.ep-bar__in { display: flex; align-items: center; height: var(--ep-bar); padding-inline: 64px; }
.ep-bar__links { display: flex; align-items: center; justify-content: space-between; width: clamp(220px, 27%, 400px); margin: 0 0 0 auto; }
.ep-bar__link { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; color: var(--ink); transition: opacity .2s ease-out; }
.ep-bar__link svg { width: 24px; height: 24px; fill: currentColor; }
.ep-bar__link:hover { opacity: .7; }
.ep-bar__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ------------------------------------------------------- latest episode -- */
/* The card (Amélie, 9 Oct 2026): two columns, left aligned, the episode's
   square artwork on the left, no taller than the text beside it (the one
   place the show's cover belongs: it carries the pink, so the card does
   not have to), the meta line, the title, the chips and the site's own
   player on the right. The legs of the hero hang over this section: it
   starts under the feet (the part of the figure below the line, plus air). */
.ep-latest { padding-top: calc(var(--ep-fig) * (1 - var(--ep-seat)) - var(--ep-bar) + var(--space-5)); }
.ep-card { --podcast-pink: var(--pink); display: grid; grid-template-columns: clamp(220px, 24vw, 320px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.ep-card__art { display: block; width: 100%; aspect-ratio: 1; border-radius: 0; object-fit: cover; }
.ep-card__eyebrow { color: var(--podcast-pink); }
.ep-card__eyebrow time { color: inherit; }
.nu-section h2.ep-latest__title { margin-top: var(--space-3); font: 500 32px/40px var(--font-serif); letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; }
.ep-card .ep-row__tags { margin-top: var(--space-3); }
.ep-card__teaser { max-width: 46ch; margin-top: var(--space-3); font: 400 18px/30px var(--font-sans); color: var(--text-muted); text-wrap: pretty; }
.ep-card .pg-links { margin-top: var(--space-4); }

/* The player: the site's own, reading the episode's mp3 from the feed.
   Without script the browser's own controls show instead. */
.ep-play { display: none; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.ep-play__audio { width: 100%; margin-top: var(--space-5); }
html.js .ep-play { display: flex; }
html.js .ep-play__audio { display: none; }
.ep-play__btn { flex: none; display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: var(--surface-ink); color: var(--on-ink); cursor: pointer; }
.ep-play__btn svg { width: 22px; height: 22px; fill: currentColor; }
.ep-play__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.ep-play__i--pause { display: none; }
.ep-play__btn[aria-pressed="true"] .ep-play__i--play { display: none; }
.ep-play__btn[aria-pressed="true"] .ep-play__i--pause { display: block; }
.ep-play__track { position: relative; flex: 1 1 auto; height: 3px; background: var(--nu-rule); }
.ep-play__track:has(.ep-play__range:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 6px; }
.ep-play__fill { position: absolute; inset: 0 auto 0 0; width: var(--ep-at, 0%); background: var(--podcast-pink); }
.ep-play__range { position: absolute; inset: -14px 0; width: 100%; height: auto; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.ep-play__time { flex: none; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* In the dark scheme the ink disc is darker than the page: a hairline keeps its edge. */
@media (prefers-color-scheme: dark) { :root[data-theme="operator"]:not([data-scheme="light"]) .ep-play__btn { border: 1px solid var(--nu-rule); } }
:root[data-theme="operator"][data-scheme="dark"] .ep-play__btn { border: 1px solid var(--nu-rule); }
/* The same button, smaller, on every row of the list: one audio element
   for the page, so starting a row stops the one playing (player.js).
   Without script it does nothing, so it stays out. */
/* The card's button sits on the artwork, bottom left (Amélie, 9 Oct
   2026); without script there is no player, so it stays off. */
.ep-play__btn--row { display: none; position: absolute; left: 8px; bottom: 8px; width: 36px; height: 36px; }
html.js .ep-play__btn--row { display: inline-flex; }
.ep-play__btn--row svg { width: 15px; height: 15px; }
/* ---------------------------------------------------- the list's title -- */
/* The list is the blog too, so it is named (Amélie, 9 Oct 2026): the title
   sits in its own band above the filters, with no rule of its own, so the
   filter row keeps the one line under it as it sticks. */
.ep-head { padding-block: var(--nu-gap) var(--space-5); border-bottom: 0; }

/* -------------------------------------------------------------- filters -- */
/* Two axes, one chip active per axis; the chips are links (the page still
   filters without script, one axis at a time), podcast.js makes them
   filters with the URL as the state. The row sticks under the site's bar. */
.ep-filters { --podcast-pink: var(--pink); position: sticky; top: var(--nu-bar); z-index: 4; background: var(--surface); border-bottom: 1px solid var(--nu-rule); }
.ep-filters__in { display: flex; flex-wrap: wrap; gap: 12px var(--space-6); padding-block: 14px; }
.ep-filters__axis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.ep-filters__label { margin-right: 8px; font: 500 13px/20px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.ep-chip { display: inline-block; padding: 2px 10px; border: 1px solid currentColor; border-radius: 2px; font: 500 13px/20px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; }
a.ep-chip:hover { color: var(--text); }
a.ep-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.ep-chip.is-active { background: var(--podcast-pink); border-color: var(--podcast-pink); color: var(--ink); }

/* ---------------------------------------------------------------- cards -- */
/* The list is the blog, so every episode shows its own artwork (Amélie,
   9 Oct 2026): three cards a row, the square picture with the play button
   over it, then the date and the duration, the number and the title, one
   line, the two chips and the way to the written version. Twelve cards at
   a time (podcast.js), every card in the page. */
.ep-index { padding-top: var(--space-6); }
.ep-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
/* A card, not a floating block (Amélie, 9 Oct 2026): the site's tile, a
   hairline box on white that carries the turning frame on hover, the same
   behaviour as the references, the Lab cards and the Nuance cells. */
.ep-row { position: relative; isolation: isolate; overflow: clip;
  display: flex; flex-direction: column; align-items: stretch;
  padding: var(--space-4); border: 1px solid var(--nu-rule); background-color: var(--surface); }
.ep-row::before { content: ""; position: absolute; z-index: -2; top: 50%; left: 50%; width: 260%; aspect-ratio: 1; translate: -50% -50%; opacity: 0;
  background: conic-gradient(from 0deg, var(--red), var(--nu-red-pale), var(--pink), var(--blush), var(--red)); transition: opacity .3s ease-out; }
.ep-row::after { content: ""; position: absolute; z-index: -1; inset: 2px; background-color: var(--surface); transition: background-color .2s ease-out; }
.ep-row:hover::after, .ep-row:focus-within::after { background-color: var(--hover); }
.ep-row:hover::before, .ep-row:focus-within::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ep-row:hover::before, .ep-row:focus-within::before { animation: ep-frame 8s linear infinite; }
}
@keyframes ep-frame { to { transform: rotate(1turn); } }
.ep-row[hidden] { display: none; }
/* A small square, not a billboard: the artwork marks the episode, the
   title does the talking (Amélie, 9 Oct 2026). */
.ep-row__fig { position: relative; width: 160px; max-width: 100%; margin-bottom: var(--space-4); background: var(--nu-tint); }
.ep-row__fig img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.ep-row__date { color: var(--text-muted); }
.ep-row h3 { margin-top: 6px; font: 500 24px/30px var(--font-serif); letter-spacing: -0.01em; text-wrap: pretty; }
.ep-row h3 a { color: var(--text); text-decoration: none; }
.ep-row h3 a:hover { text-decoration: underline; text-underline-offset: 6px; }
.ep-row__n { color: var(--text-muted); font-variant-numeric: tabular-nums lining-nums; }
.ep-row__n::after { content: "\00a0\00b7\00a0"; }
/* The line is cut after three lines so the cards keep a common rhythm;
   the full text is on the post. */
.ep-row__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  margin-top: 8px; font: 400 17px/26px var(--font-sans); color: var(--text-muted); text-wrap: pretty; }
.ep-row__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
/* The written companion post, named on every card (Amélie, 9 Oct 2026):
   the title above already links to it, so this one is out of the tab
   order and set smaller than a section's link. It sits at the card's
   foot, whatever the length of the line above it. */
.ep-row__read { margin-top: auto; padding-top: var(--space-3); }
.ep-row__read .pg-link { padding-bottom: 3px; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.ep-row__read .pg-link::after { width: 16px; height: 16px; background-size: 16px 16px; }
.ep-row:hover .ep-row__read .pg-link, .ep-row__read .pg-link:hover { color: var(--text); }
.ep-empty { margin-top: var(--space-4); font: 400 18px/30px var(--font-sans); color: var(--text-muted); }
.ep-more { margin-top: var(--space-5); }
.ep-more[hidden] { display: none; }   /* .pg-links sets display: flex, which beats [hidden] */

/* --------------------------------------------------------- episode page -- */
.ep .issue__title { color: var(--text); }
.ep .ep__line { margin-top: var(--space-3); }
.ep .issue__head .ep-row__tags { margin-top: var(--space-3); }
.ep .ep__player { margin-top: var(--space-5); }
.ep .ep__player iframe { display: block; width: 100%; height: 200px; border: 1px solid var(--nu-rule); background: var(--surface); }
/* The hairline above the Listen on row holds whatever stands between it and the text: the related link, the "Send this to a colleague" line (11 Oct 2026). */
.ep .ep__listen { margin-top: var(--space-5); }
/* The hairline sits on the row, inside the column's padding, on the same lines as the ones above it. */
.ep .ep-links { margin-top: 0; padding-top: var(--space-4); border-top: 1px solid var(--nu-rule); }
.ep .issue__more { margin-top: var(--space-5); }
/* The posts were written for WordPress: whatever they carry is held in the column. */
.ep .issue__body h2 em, .ep .issue__body h3 em { font-style: italic; color: inherit; }
.ep .issue__body img { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.ep .issue__body iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.ep .issue__body table { width: 100%; border-collapse: collapse; font: 400 17px/26px var(--font-sans); }
.ep .issue__body td, .ep .issue__body th { padding: 8px 12px; border: 1px solid var(--nu-rule); vertical-align: top; }
.ep .issue__body h4, .ep .issue__body h5 { margin-top: 1.4em; font: 500 20px/28px var(--font-serif); color: var(--text); }

/* ------------------------------------------------------------- signup -- */
/* The Nerve's signup above the footer (Amélie, 9 Oct 2026): its eyebrow
   and its red title left, its line and the form right. Its picture stays
   off the page: one picture per page. */
.ep-signup__in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-6); align-items: start; }
.nu-section h2.ep-signup__title { margin-top: var(--space-3); font: 500 48px/1 var(--font-serif); letter-spacing: -0.03em; color: var(--red); }
.ep-signup__line { max-width: 34em; font: 400 18px/30px var(--font-sans); color: var(--text); text-wrap: pretty; }
.ep-signup .nv__form { margin-top: var(--space-4); }

/* ------------------------------------------------- 1200 to 1319, narrow -- */
/* The band between the text column and the strip is at its narrowest here:
   the pair has to be trimmed to stay centred inside it. */

@media (min-width: 1200px) and (max-width: 1319px) {
  .ep-hero, .ep-latest { --ep-fig: clamp(400px, calc(80vh - 240px), 470px); --ep-ball: 190px; }
  .ep-hero .ep-hero__media { gap: var(--space-3); }
}

/* ------------------------------------------------------------ 1240 down -- */
@media (max-width: 1240px) {
  .ep-rows { gap: var(--space-5) var(--space-4); }
}
@media (max-width: 1199px) {
  /* Two cards a row from here down. */
  .ep-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* nuance.css drops the right column here and lays the figures as a row;
   this hero keeps the strip, there is no band under the line to hold a
   row of three. */
  .ep-hero, .ep-latest { --ep-fig: clamp(360px, calc(80vh - 220px), 460px); --ep-ball: 160px; }
  .ep-hero { grid-template-columns: 44% minmax(0, 1fr) var(--nu-side); }
  .ep-hero .ep-hero__media { gap: var(--space-3); }
  .ep-hero .ep-hero__text { padding: 24px 24px 24px 48px; }
  .ep-hero .ep-proof { grid-template-rows: repeat(3, minmax(0, 1fr)); grid-template-columns: none; border-top: 0; }
  .ep-hero .ep-proof li + li { border-left: 0; border-top: 1px solid var(--nu-rule); }
  .ep-hero .ep-proof .nu-proof__n { font-size: 40px; }
  .ep-bar__in { padding-inline: 48px; }
  .ep-card { gap: var(--space-5); }
}

/* --------------------------------------------------------------- mobile -- */
/* H1, intro, the bar with the button full width and the links under it,
   the figure sitting on the bar's top edge (a smaller cutout, the legs
   hanging into the bar's upper part, above the button). No disco ball. */
@media (max-width: 980px) {
  .ep-hero { --ep-fig: 260px; --ep-legs: calc(var(--ep-fig) * (1 - var(--ep-seat))); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto calc(var(--ep-fig) * var(--ep-seat)) auto auto; }
  .ep-hero .ep-hero__text { grid-area: 1 / 1 / 2 / 2; min-height: 0; padding: 32px var(--nu-inset) 0; border-bottom: 0; }
  .ep-hero .ep-hero__media { grid-area: 2 / 1 / 4 / 2; justify-content: flex-end; padding-right: var(--nu-inset); border: 0; }
  .ep-hero .ep-hero__me { align-self: flex-start; margin-bottom: 0; }
  .ep-hero .ep-hero__disco { display: none; }
  .ep-hero .ep-proof { grid-area: 4 / 1 / 5 / 2; grid-template-rows: none; grid-template-columns: minmax(0, 1fr); margin: var(--space-4) var(--nu-inset) var(--space-5); border-block: 1px solid var(--nu-rule); border-left: 0; }
  .ep-hero .ep-proof li { flex-direction: row; justify-content: space-between; min-height: 0; padding: 14px 4px; text-align: left; }
  .ep-hero .ep-proof li + li { border-left: 0; border-top: 1px solid var(--nu-rule); }
  .ep-hero .ep-proof .nu-proof__n { font-size: 36px; }
  /* The hue follows the pink block, which is no longer the hero's last
     row here: the band takes the block's own cell and reaches past it at
     both ends, faded top and bottom. */
  .ep-hero > .nu-glow { grid-area: 3 / 1 / 4 / 2; inset: -80px 0 -48px 0; height: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 72%, transparent 100%); }
  .ep-bar { grid-area: 3 / 1 / 4 / 2; margin-inline: var(--nu-inset); padding-top: calc(var(--ep-legs) + 8px); }
  .ep-bar__in { flex-direction: column; align-items: stretch; gap: var(--space-3); height: auto; padding: 12px; }
  .ep-bar__links { justify-content: center; width: auto; gap: 28px; margin: 0; padding-bottom: 4px; }
  .ep-filters { position: static; }
  .ep-filters__in { gap: 10px var(--space-5); }
  .ep-index { padding-top: var(--space-5); }
  /* One card a row, the artwork small at its left: twelve squares the
     width of the screen would be a long page. */
  .ep-rows { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .ep-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--space-3); align-content: start; padding: var(--space-3);
    grid-template-areas: "fig date" "fig title" "fig text" "fig tags" "fig read"; }
  .ep-row__fig { grid-area: fig; align-self: start; margin-bottom: 0; }
  .ep-row__date { grid-area: date; font-size: 11px; letter-spacing: .1em; }   /* the date and the duration on one line in a narrow column */
  .ep-row h3 { grid-area: title; margin-top: 4px; font-size: 20px; line-height: 26px; }
  .ep-row__text { grid-area: text; -webkit-line-clamp: 2; line-clamp: 2; margin-top: 6px; font-size: 16px; line-height: 25px; }
  .ep-row__tags { grid-area: tags; margin-top: 10px; }
  .ep-row__read { grid-area: read; margin-top: 10px; padding-top: 0; }
  .ep-play__btn--row { left: 8px; bottom: 8px; width: 32px; height: 32px; }
  .ep-play__btn--row svg { width: 14px; height: 14px; }
  .ep-latest { padding-top: var(--space-6); }
  .ep-head { padding-block: var(--nu-gap) var(--space-4); }
  .ep-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .ep-latest__title { font-size: 26px; line-height: 32px; }
  .ep-card__teaser { max-width: none; font-size: 17px; line-height: 28px; }
  .ep-play { flex-wrap: wrap; }
  .ep-play__track { order: 3; flex-basis: 100%; }
  .ep-signup__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .nu-section h2.ep-signup__title { font-size: 36px; }
  .ep-signup__line { font-size: 17px; line-height: 28px; }
}