/* ——— Escuchar ——— */
.listen { display: grid; grid-template-columns: minmax(0, 1fr) clamp(20rem, 27vw, 27rem); gap: clamp(1.25rem, 2.5vw, 2.25rem); align-items: start; }
.listen > div { display: grid; gap: 1.1rem; }
.episode-head { display: grid; gap: .7rem; margin-block-start: .5rem; }
.episode-head .meta { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--ink-2); font-weight: 650; }
.episode-head .meta > * { background: var(--sheet); padding: .2rem .65rem; border-radius: 999px; }
.episode-head .meta strong { color: var(--ink); }
.episode-head .meta .synthetic { background: transparent; padding-inline: 0; }
.episode-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .9rem; }
/* Beside the script (wide screens) the stage already carries the channel marks; dropping the sticker keeps Play in the first screen. */
@media (min-width: 1081px) { .episode-head .episode-show { display: none; } }
/* The script sits beside the stage on wide screens; the shortcut only matters when it falls below. */
.episode-actions .to-script { display: none; }

/* The stage is a single broadcast composition. Header and desk lanes stay clear of faces. */
.stage {
  position: relative; aspect-ratio: 16 / 9; overflow: clip; border-radius: 14px;
  background: var(--set) url('/assets/set-bright.webp') center / cover no-repeat;
  box-shadow: var(--lift); isolation: isolate; container-type: inline-size;
}
/* The set's own desk strip occludes the waist-up figures without depending on an asset's crop. */
.stage::after { content: ''; position: absolute; inset: 0; z-index: 2; background: inherit; clip-path: inset(81% 0 0); pointer-events: none; }
.intro-media { position: absolute; inset: 0; z-index: 8; background: var(--ink); }
/* Before the first play the cover is our table, not a still of the real show's intro clip. */
.stage[data-idle] .intro-media { display: none; }
.intro-media > * { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; }
.intro-media video { visibility: hidden; }
.intro-media[data-ready] video { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .intro-media video { display: none; } }
.stage .scene { position: absolute; inset: 0; z-index: 1; transform-origin: 50% 75%; }
.stage .stage-person {
  position: absolute; inset-block-end: 12%; inset-inline-start: var(--x); translate: -50% 0;
  inline-size: 46%; block-size: 74%;
}
/* A single is the medium close-up: the 4:5 body grows until the desk strip crops it at the forearms. */
.stage [data-shot='single'] .stage-person { inline-size: 70%; block-size: 100%; inset-block-end: 0; }
/* A two-shot is one camera on a pair: medium close, each body near its edge of the frame (real stream two-shots). */
.stage :is([data-shot='two'], [data-shot='reaction']) .stage-person { inline-size: calc(116% / var(--count)); block-size: calc(96% - 13% * (var(--count) - 2)); inset-block-end: 0; }
.stage [data-shot='three'] .stage-person { inline-size: 35%; block-size: 70%; }
/* The control room camera: production at their desk, one or two of them, on the control plate. */
.stage:has(> .scene[data-shot='control']) { background-image: url('/assets/set-control.webp'); }
.stage [data-shot='control'] .stage-person { inline-size: calc(70% / var(--count)); block-size: calc(100% - 12% * (var(--count) - 1)); inset-block-end: 0; }
/* The multicam board: the paper ground of the stream with one camera per person; each tile frames its own stretch of the
   set, faintly lit in the person's colour, and the desk crops the body as in the real cameras. */
.stage:has(> .scene[data-shot='wide']) { background: var(--paper-2) url('/assets/paper-ground.webp') repeat; }
.stage:has(> .scene[data-shot='wide'])::after { display: none; }
.stage [data-shot='wide'] .stage-person {
  inset: var(--t) auto auto var(--l); translate: none; inline-size: var(--w); block-size: var(--h); overflow: clip; border-radius: .9cqi;
  background: url('/assets/set-bright.webp') var(--wall) 30% / auto 160% no-repeat, var(--set);
  outline: .3cqi solid var(--sheet); box-shadow: 0 .5cqi 1.4cqi -.7cqi oklch(0 0 none / .5);
  transition: outline-color .2s ease-out;
}
.stage [data-shot='wide'] .stage-person::before { content: ''; position: absolute; inset: 0; background: color-mix(in oklch, var(--cap) 34%, transparent); mix-blend-mode: multiply; }
.stage [data-shot='wide'] .stage-person::after {
  content: ''; position: absolute; inset: auto 0 0; z-index: 1; block-size: 13%;
  background: linear-gradient(oklch(.96 .012 80), oklch(.89 .025 75)); box-shadow: 0 -.15cqi 0 oklch(1 0 0 / .7);
}
.stage [data-shot='wide'] .person-figure { inset: -5% 0 -26%; }
.stage [data-shot='wide'] .stage-person[data-speaking] { outline: .45cqi solid var(--cap); }
.stage [data-shot='wide'] .seat-name { z-index: 2; inset: auto auto 3.5% 3.5%; translate: none; font-size: clamp(.75rem, 1.25cqi, .85rem); padding: .2cqi .8cqi; }
.stage .board-card {
  position: absolute; inset: var(--t) auto auto var(--l); inline-size: var(--w); block-size: var(--h); z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6cqi; padding: 2.4cqi; border-radius: .9cqi;
  background: var(--ink); color: var(--sheet); text-align: center; box-shadow: 0 .5cqi 1.4cqi -.7cqi oklch(0 0 none / .5);
}
.stage .board-card img { inline-size: 11cqi; }
.stage .board-card small { font-weight: 800; font-size: clamp(.5rem, 1.25cqi, .9rem); text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.stage .board-card strong { font-weight: 900; font-stretch: 112%; text-transform: uppercase; font-size: clamp(.7rem, 2.7cqi, 2rem); line-height: 1.05; text-wrap: balance; }
.stage .person-figure { position: absolute; inset: 0; transform-origin: 50% 100%; container-type: size; }
.stage .person-figure > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; object-position: center bottom; }
.anim[data-loading] { opacity: 0; }
/* An animated figure is the pose's own box, fitted like the contained image, so its patches land in percent. */
.stage .person-figure > .anim { inset-block-end: 0; inset-inline: 0; margin-inline: auto; inline-size: min(100cqi, 100cqb * var(--aspect)); }
/* The body snaps between registered drawings; its fixed microphone never follows a nod or an audio lift. */
.anim-v2 > .anim-frame, .anim-v2 .anim-frame > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; }
.anim-v2 > .anim-frame[hidden] { display: none; }
.anim-v2 .anim-frame > .patch { inset: auto; visibility: hidden; }
.anim-v2[data-mouth='closed'] .anim-frame > [data-part='mouth'][data-state='closed'],
.anim-v2[data-mouth='mid'] .anim-frame > [data-part='mouth'][data-state='mid'],
.anim-v2[data-mouth='open'] .anim-frame > [data-part='mouth'][data-state='open'],
.anim-v2[data-blink] .anim-frame > [data-part='blink'],
.anim-v2[data-alt='0'] .anim-frame > [data-part='alt'][data-state='0'],
.anim.anim-v2 > [data-part='microphone'] { visibility: visible; }
.hero-bodies { display: block; position: relative; aspect-ratio: 2400 / 1100; }
.hero-set:has(.hero-bodies) { justify-self: stretch; }
.hero-body { position: absolute; }
.hero-body > :is(img, .anim) { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.stage .person-figure > img[data-kind='photo'] { inset: auto 12% 18%; inline-size: 76%; block-size: 65%; object-fit: cover; border: .5cqi solid var(--sheet); border-radius: 6px; }
.stage .person-initial { display: none; place-items: center; position: absolute; inset: 18% 15%; border-radius: 12px; background: var(--cap); color: var(--ink); font-size: 24cqi; font-weight: 900; }
.stage .person-figure:not(:has(img)) .person-initial { display: grid; }
.stage .seat-name {
  position: absolute; inset-block-end: 12%; inset-inline-start: 50%; translate: -50% 0; padding: .35cqi 1.2cqi; white-space: nowrap;
  background: color-mix(in oklch, var(--cap) 75%, var(--sheet)); color: var(--ink); border-radius: .4cqi; text-align: center;
  font-weight: 900; font-size: clamp(.75rem, 1.8cqi, 1.1rem); line-height: 1.15;
}
.stage .scene:not([data-shot='wide']) .seat-name { display: none; }
.stage .ident {
  position: absolute; z-index: 3; inset-block-start: 2.4cqi; inset-inline-start: 2.6cqi; inline-size: 12cqi;
  rotate: -3deg; filter: drop-shadow(0 6px 10px oklch(0 0 none / .3));
}
.stage .ident svg { inline-size: 100%; block-size: auto; stroke: none; }
.stage .who-pill {
  position: absolute; z-index: 3; inset-block-start: 3cqi; inset-inline-end: 3.5cqi;
  display: flex; align-items: center; gap: .8cqi; max-inline-size: 60%; padding: .45cqi 1.3cqi .45cqi .45cqi; border-radius: 999px;
  background: var(--ink); color: var(--sheet); font-weight: 850; font-size: clamp(.68rem, 1.6cqi, 1.05rem); line-height: 1.2;
  box-shadow: 0 6px 14px -6px oklch(0 0 none / .5);
}
.stage .who-pill i { flex: none; inline-size: 2cqi; block-size: 2cqi; border-radius: 50%; background: var(--cap, var(--ch-0)); }
.stage .who-pill:has(span:empty) { display: none; }
/* The show's small white card beside the zócalo: the time on top, the block under it. */
.stage .corner {
  position: absolute; z-index: 3; inset-block-end: 3cqi; inset-inline-start: 3cqi; inline-size: 9cqi; min-block-size: 5.6cqi;
  display: grid; place-content: center; gap: .15cqi; padding: .5cqi; border-radius: .5cqi; background: var(--sheet); text-align: center;
  font-weight: 800; font-size: clamp(.5rem, 1.05cqi, .78rem); line-height: 1.15; color: var(--ink-2); box-shadow: 0 4px 10px -4px oklch(0 0 none / .35);
}
.stage .corner .tc { color: var(--ink); font-size: clamp(.68rem, 1.8cqi, 1.2rem); }
.stage .zocalo, .stage .segment-graphic {
  position: absolute; z-index: 3; inset-block-end: 3cqi; inset-inline: 13cqi 3cqi;
  display: flex; align-items: center; justify-content: center; gap: 1.5cqi; min-block-size: 5.6cqi; padding: .7cqi 1.4cqi;
  background: var(--sheet); color: var(--ink); border-radius: .4cqi;
  box-shadow: 0 .25cqi 0 var(--paper-2), 0 10px 22px -10px oklch(0 0 none / .5);
}
.stage .zocalo span, .stage .segment-graphic strong {
  flex: 1; text-align: center; text-transform: uppercase; font-weight: 900; font-stretch: 112%;
  font-size: clamp(.75rem, 2.2cqi, 1.5rem); line-height: 1.05; letter-spacing: -.005em; text-wrap: balance;
}
.stage .zocalo .tv-mark { inline-size: 2.6cqi; block-size: 2.6cqi; flex: none; stroke: var(--ink-2); stroke-width: 2.2; fill: none; opacity: .55; }
.stage .segment-symbol .l-x { fill: var(--ink); }
.stage .segment-graphic { opacity: 0; visibility: hidden; pointer-events: none; }
.stage[data-graphic] .segment-graphic { opacity: 1; visibility: visible; }
.stage[data-graphic] .zocalo { opacity: 0; visibility: hidden; }
.stage[data-graphic='chivo'] .segment-graphic { background: var(--yellow); }
.stage[data-graphic='audio'] .segment-graphic { background: var(--teal); }
.stage[data-graphic='return'] .segment-graphic { background: var(--pink); }
.stage .segment-symbol { display: grid; place-items: center; flex: none; inline-size: 5cqi; block-size: 5cqi; }
.stage .segment-symbol svg { inline-size: 4cqi; block-size: 4cqi; }
.stage .segment-symbol svg:first-child { display: none; }
.stage[data-graphic='chivo'] .segment-symbol svg:first-child { display: block; inline-size: 1.5cqi; }
.stage[data-graphic='chivo'] .segment-symbol svg:last-child, .stage[data-graphic='return'] .segment-symbol { display: none; }
.stage .message-wave { display: none; align-items: center; gap: .4cqi; block-size: 4cqi; }
.stage[data-graphic='audio'] .message-wave { display: flex; }
.stage .message-wave i { inline-size: .55cqi; block-size: 55%; background: var(--ink); border-radius: 999px; }
.stage .message-wave i:nth-child(3n) { block-size: 100%; }
.stage .message-wave i:nth-child(2n) { block-size: 30%; }
.stage .camera-wipe { position: absolute; inset: 0; z-index: 4; background: var(--teal); transform: translateX(-105%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .stage[data-playing='true'] .stage-person:not([data-speaking]) .person-figure:not(:has(.anim-v2)) { animation: stage-breathe 5s ease-in-out infinite alternate; animation-delay: calc(var(--seat) * -.8s); }
  .stage[data-playing='true'] .stage-person[data-speaking] .person-figure > :is(img, .anim:not(.anim-v2)) { translate: 0 calc(var(--level, 0) * -1%); }
  /* Listeners nod now and then around the neck; a laughing speaker bounces on twos, like the patches. */
  .stage[data-playing='true'] .stage-person:not([data-speaking]) .anim:not(.anim-v2) { transform-origin: var(--pivot-x) var(--pivot-y); animation: listen-nod 6.5s ease-in-out infinite; animation-delay: calc(var(--seat) * -1.7s); }
  .stage .anim:not(.anim-v2)[data-talking][data-mood='laugh'] { animation: laugh-bounce .33s steps(2, jump-none) infinite; }
  @keyframes listen-nod { 0%, 80%, 100% { translate: 0 0; rotate: 0deg; } 85% { translate: 0 .7%; rotate: .5deg; } 90% { translate: 0 0; rotate: 0deg; } 94% { translate: 0 .45%; rotate: .3deg; } }
  @keyframes laugh-bounce { from { translate: 0 0; } to { translate: 0 -1.4%; } }
  .stage .scene[data-punch] { animation: stage-punch 8s cubic-bezier(.16, 1, .3, 1) both; }
  .stage[data-playing='false'] .scene, .stage[data-playing='false'] .person-figure { animation-play-state: paused; }
  .stage .segment-graphic, .stage .zocalo { transition: opacity .18s ease-out; }
  @keyframes stage-breathe { to { transform: translateY(-.45%) rotate(.15deg); } }
  @keyframes stage-punch { to { transform: scale(1.055); } }
}
@media (prefers-reduced-motion: reduce) {
  .stage *, .stage::before, .stage::after { animation: none !important; transition: none !important; }
}

/* Transport: a navy pill with the clock and the chapter scrubber. */
.transport { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem 1.25rem; padding: .9rem 1.25rem .9rem .9rem; background: var(--ink); color: var(--sheet); border-radius: 999px; box-shadow: var(--lift); }
.transport-top { display: contents; }
.play {
  display: grid; place-items: center; inline-size: 3.75rem; block-size: 3.75rem; border-radius: 50%; border: 0;
  background: var(--yellow); color: var(--ink); transition: transform .2s var(--ease-out), background .2s;
}
@media (hover: hover) and (pointer: fine) { .play:hover { transform: scale(1.05); background: var(--pink); } }
.play svg { inline-size: 1.5rem; block-size: 1.5rem; fill: currentColor; stroke: none; }
.transport .clock { grid-column: 2; grid-row: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-block-end: 2.4rem; }
.clock .now { font-size: 1.45rem; font-weight: 850; }
.clock .chapter-now { color: color-mix(in srgb, var(--sheet) 70%, var(--ink)); font-weight: 700; }
.scrubber { grid-column: 2; grid-row: 1; align-self: end; position: relative; block-size: 1.6rem; margin-block-end: .1rem; }
.scrubber .lane { position: absolute; inset: .45rem 0; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--sheet) 18%, var(--ink)); }
.scrubber .fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--progress); background: var(--teal); }
.scrubber .cue { position: absolute; inset-block-end: 0; block-size: 3px; background: var(--yellow); opacity: .9; }
.scrubber .tick { position: absolute; inset-block: .3rem; inline-size: 3px; translate: -1.5px 0; background: var(--ink); border-radius: 2px; }
.scrubber .head { position: absolute; inset-block: 0; inset-inline-start: var(--progress); inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: .25rem; translate: -50% 0; border-radius: 50%; background: var(--sheet); box-shadow: 0 0 0 3px var(--red); pointer-events: none; }
.scrubber input[type='range'] { position: absolute; inset: -.6rem 0; inline-size: 100%; block-size: auto; margin: 0; opacity: 0; cursor: pointer; } /* 1.6rem bar + 2 × .6rem = 44 px to touch */
.scrubber:has(input:focus-visible) .lane { outline: 3px solid var(--yellow); outline-offset: 3px; }
.chapters { display: flex; flex-wrap: wrap; gap: .45rem; }
.chapters button {
  display: flex; align-items: baseline; gap: .55rem; min-block-size: 2.75rem; padding: .45rem .95rem; border-radius: 999px;
  border: 2px solid transparent; background: var(--sheet); text-align: start; font-weight: 700; box-shadow: var(--lift);
  transition: background .15s;
}
.chapters button:hover { background: color-mix(in srgb, var(--teal) 25%, var(--sheet)); }
.chapters button[aria-current='true'] { border-color: var(--ink); background: var(--teal); }
.chapters time { color: var(--ink-2); font-weight: 650; font-size: .85rem; white-space: nowrap; }
.chapters button[aria-current='true'] time { color: var(--ink); }

.mini {
  position: fixed; z-index: 9; inset-block-end: 1rem; inset-inline: 50% auto; translate: -50% 0;
  display: flex; align-items: center; gap: .9rem; padding: .45rem 1.2rem .45rem .45rem; border-radius: 999px;
  background: var(--ink); color: var(--sheet); font-weight: 800; box-shadow: 0 14px 30px -10px rgb(0 0 0 / .5);
}
.mini .play { inline-size: 2.75rem; block-size: 2.75rem; }
.mini .play svg { inline-size: 1.1rem; block-size: 1.1rem; }

/* La mesa: each person standing on their own colour block; the block lights when they talk. */
.mesa { display: grid; gap: 1rem; margin-block-start: .6rem; padding: clamp(1rem, 2vw, 1.5rem); border-radius: 14px; background: var(--ink); color: var(--sheet); box-shadow: var(--lift); }
.mesa-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.mesa-head h2 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); }
.mesa-head .legend { color: var(--sheet); font-size: .8rem; text-align: end; }
.strips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.75rem), 1fr)); gap: .6rem; }
.strip { position: relative; display: grid; gap: .45rem; padding: .5rem .5rem .6rem; border-radius: var(--radius); background: var(--cap); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .strip { transition: transform .25s var(--ease-out); } }
.strip[data-active] { transform: translateY(-4px); }
.strip .face {
  position: relative; aspect-ratio: 1; border-radius: 7px; overflow: hidden;
  background: color-mix(in srgb, var(--cap) 55%, var(--sheet)); transition: background .2s;
}
.strip[data-active] .face { background: var(--cap); }
.strip .face img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.strip .face[data-kind='cutout'] img { object-fit: cover; object-position: 50% 0; }
.strip .face[data-kind='photo'] img { filter: saturate(.6); transition: filter .2s; }
.strip[data-active] .face img { filter: none; }
.face .monogram { display: grid; place-items: center; block-size: 100%; font-weight: 900; font-size: 2.6rem; color: var(--ink); }
.strip .face.music { display: grid; place-items: center; background: var(--yellow); }
.strip .face.music svg { inline-size: 2.2rem; block-size: 2.2rem; }
.strip .name { display: flex; align-items: center; gap: .4rem; padding: .3rem .35rem; border-radius: 5px; background: var(--sheet); font-weight: 850; font-size: .95rem; }
.strip .name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meter { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; block-size: .45rem; }
.meter i { border-radius: 2px; background: color-mix(in oklch, var(--ink) 28%, var(--sheet)); }
.meter i[data-on] { background: var(--ink); }
.meter i:nth-child(12)[data-on] { background: var(--live); }

/* Live script: a paper sheet that follows the audio. */
.script { position: sticky; inset-block-start: calc(var(--bar-h) + 1rem); display: grid; grid-template-rows: auto 1fr; max-block-size: calc(100svh - var(--bar-h) - 2rem); overflow: hidden; }
.script-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 1.25rem .85rem; border-block-end: 2px dashed var(--line); }
.script-body { overflow-y: auto; padding: 0 .5rem 1rem; overscroll-behavior: contain; }
.script-body h3:not(:first-child) { margin-block-start: .6rem; }
.script-body h3 {
  position: sticky; inset-block-start: 0; z-index: 1; margin: 0 0 .3rem; padding: .45rem .75rem;
  /* Lines scroll fully under the heading: a sheet-coloured collar hides what passes behind it. */
  box-shadow: 0 -.6rem 0 .3rem var(--sheet);
  background: var(--ink); color: var(--sheet); border-radius: 6px; font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .01em;
}
.line { display: grid; grid-template-columns: 3.4rem 1fr; gap: .1rem .6rem; padding: .6rem .6rem; border-radius: 8px; transition: background .2s; }
.line[data-active] { background: color-mix(in srgb, var(--cap) 30%, var(--sheet)); }
.line .seek { grid-row: span 2; align-self: start; min-block-size: 2.75rem; min-inline-size: 2.75rem; padding: .15rem 0; border: 0; background: none; color: var(--ink-2); font-size: .8rem; font-weight: 650; text-align: start; font-variant-numeric: tabular-nums; }
.line .seek:hover { color: var(--ink); text-decoration: underline; }
.script-body .line:has(.seek) { cursor: pointer; }
.script-body .line:has(.seek):not([data-active]):hover { background: var(--paper); }
.line .who { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; font-weight: 850; font-size: .9rem; }
.dot { inline-size: .7rem; block-size: .7rem; border-radius: 3px; background: var(--cap, var(--ch-0)); flex: none; }
.line p { grid-column: 2; font-size: .95rem; line-height: 1.5; }
.line .direction { font-weight: 500; font-style: italic; color: var(--ink-2); font-size: .82rem; }

/* Episode covers: built like the channel's thumbnails — the table on the set, the title huge on the teal band. */
.shelf { margin-block-start: 3rem; display: grid; gap: 1rem; }
.covers { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(16rem, 30vw, 23rem); gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: .5rem; scroll-padding-inline: .5rem; }
.covers > .cover { scroll-snap-align: start; }
.cover { display: grid; gap: .55rem; text-decoration: none; }
.cover-art {
  display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; container-type: inline-size;
  background: var(--set) url('/assets/set-bright.webp') center / cover; box-shadow: var(--lift);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
@media (hover: hover) and (pointer: fine) { .cover:hover .cover-art { transform: translateY(-3px) rotate(-.4deg); } }
.cover[aria-current='page'] .cover-art { outline: 4px solid var(--ink); outline-offset: 3px; }
.cover-art .faces { position: absolute; inset: 6% 4% 0; display: flex; justify-content: center; align-items: end; }
.cover-art .faces > span { display: contents; }
.cover-art .cover-photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.cover-art .faces img { flex: none; block-size: 92%; inline-size: auto; max-inline-size: none; margin-inline: -4cqi; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35)); }
.cover-art .faces img[data-kind='photo'] { block-size: 52%; aspect-ratio: 1; object-fit: cover; border: 1.2cqi solid var(--sheet); border-radius: 4px; margin: 0 1cqi 30%; rotate: var(--tilt, -3deg); }
/* White titles need the deep teal under them (≈5:1); the light teal of the palette gave 2.3:1. */
.cover-art .band { position: absolute; inset: auto 0 0; block-size: 55%; background: linear-gradient(to top, var(--teal-deep) 0 38%, color-mix(in oklch, var(--teal-deep) 55%, transparent) 70%, transparent); }
.cover-art strong {
  position: absolute; inset: auto 16cqi 4.5cqi 5cqi; color: white; text-transform: uppercase; font-weight: 900; font-stretch: 110%;
  font-size: 6.6cqi; line-height: .98; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 .45cqi 0 var(--ink), 0 2px 12px rgb(0 0 0 / .3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cover-art .mark { position: absolute; inset-block-start: 4cqi; inset-inline-start: 4cqi; inline-size: 14cqi; }
.cover-art .show { position: absolute; inset-block-start: 3cqi; inset-inline-end: 3.5cqi; inline-size: 22cqi; rotate: -5deg; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .35)); }
.cover-art .mark svg { inline-size: 100%; block-size: auto; stroke: none; }
.cover-art .length { position: absolute; inset-block-end: 4cqi; inset-inline-end: 4cqi; z-index: 1; padding: .2rem .55rem; border-radius: 6px; background: rgb(20 22 50 / .82); color: white; font-weight: 800; font-size: .8rem; }
/* The cover clamps its huge title; the full one is readable before opening the episode. */
.cover-title { display: block; margin-block-start: .55rem; font-weight: 850; line-height: 1.25; color: var(--ink); }
.cover-meta { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; font-weight: 700; color: var(--ink-2); font-size: .9rem; }

.status { font-weight: 800; font-size: .8rem; padding: .12rem .55rem; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
.status[data-tone='ok'] { background: color-mix(in srgb, var(--teal) 35%, var(--sheet)); color: var(--ink); }
.status[data-tone='bad'] { background: color-mix(in srgb, var(--red) 18%, var(--sheet)); color: var(--danger); }
.status[data-tone='live'] { background: var(--yellow); color: var(--ink); }

details.credits { border-block-start: 2px dashed var(--line); padding-block-start: 1rem; margin-block-start: .6rem; }
details.credits summary { display: flex; align-items: center; gap: .5rem; min-block-size: 2.75rem; font-weight: 800; cursor: pointer; list-style: none; }
details.credits summary::-webkit-details-marker { display: none; }
details.credits summary::before { content: ''; inline-size: .55rem; block-size: .55rem; border: solid currentColor; border-width: 0 2.5px 2.5px 0; rotate: -45deg; transition: rotate .2s; }
details.credits[open] > summary::before, details.credits details[open] > summary::before { rotate: 45deg; }
.credits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.5rem; padding-block: 1rem; }
.credits-grid li { margin-block-end: .5rem; line-height: 1.45; }
.credits-grid h3 { margin-block-end: .6rem; }

@media (max-width: 1080px) {
  .listen { grid-template-columns: 1fr; }
  .episode-actions .to-script { display: inline-flex; }
  .script { position: static; max-block-size: 34rem; scroll-margin-block-start: calc(var(--bar-h) + 1rem); }
}
@media (max-width: 700px) {
  .stage { border-radius: 10px; margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  .stage .zocalo, .stage .segment-graphic { inset-inline-start: 3.5cqi; }
  .stage .corner { display: none; }
  .transport { border-radius: 22px; padding: .75rem 1rem .75rem .75rem; }
  .play { inline-size: 3.25rem; block-size: 3.25rem; }
  .chapters { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-block: .2rem .6rem; scrollbar-width: none; }
  .chapters button { flex: none; scroll-snap-align: start; max-inline-size: 78vw; }
  .strips { grid-template-columns: repeat(auto-fit, minmax(min(100%, 5rem), 1fr)); gap: .45rem; }
  .strip { padding: .35rem .35rem .45rem; }
  .strip .name { font-size: .78rem; gap: .3rem; }
}
@media (max-width: 700px) {
  /* Above the phone's bottom tab bar. */
  .mini { inset-block-end: calc(var(--tabs-h) + .75rem + env(safe-area-inset-bottom)); }
}
/* On a phone the multicam strip already lights whoever talks; the meter board would repeat the same faces. */
@media (max-width: 700px) { .listen .mesa, [data-route='escuchar'] .mesa { display: none; } }