/* THE PLAYER ON A DESK FILLS THE SCREEN (James, 2026-10-16: "theres so much screen realestate wasted"): a sticky split.
   The clip stays pinned on the left at the window's height; the column beside it is as wide as the screen allows (to
   1180 px) and scrolls: the number, title, Next and the rail on top, then EVERY CLIP as a grid of small poster stickers
   (Episodes 1 → n, then Extras), the one playing ringed in yellow. The list is read from the series page's feed by
   player-desk.js, so the generator writes nothing but the two tags. Phone (< 960 px) untouched: nothing here applies. */
.more { display: none; }
@media (min-width: 960px) {
  .player {
    --clip-w: calc((100dvh - 64px) * 9 / 16);
    --side-gap: clamp(40px, 4vw, 80px);
    --left-pad: max(var(--gutter), 172px);   /* the Good Boy back sticker (fixed, top left) never sits on the clip */
    --side-w: max(320px, min(1180px, calc(100vw - var(--clip-w) - var(--side-gap) - var(--left-pad) - var(--gutter))));
    grid-template-columns: auto var(--side-w); column-gap: var(--side-gap); align-items: start;
    padding-inline: var(--left-pad) var(--gutter);
  }
  .stage { position: sticky; top: 32px; margin-block: 32px; }
  .stage-side { align-content: start; padding: 72px 0 var(--space-5xl); min-width: 0; width: 100%; }
  .stage-copy { row-gap: var(--space-md); }
  .stage-copy .ep-n { font-size: clamp(3.5rem, 5vw, 5rem); }
  .stage-title h1 { font-size: clamp(2rem, 2.6vw, 2.75rem); }

  .more { display: grid; row-gap: var(--space-2xl); width: 100%; margin-top: var(--space-xl); }
  .more[hidden] { display: none; }
  .more-sec { display: grid; row-gap: var(--space-lg); }
  .more-h {
    margin: 0; padding-top: var(--space-lg); border-top: 2px solid oklch(0.97 0.03 95 / 0.14);
    font-family: var(--display); font-weight: 400; font-size: 1.75rem; line-height: 1; text-transform: uppercase;
    color: var(--cream); text-shadow: 0.06em 0.06em 0 var(--ink);
  }
  .more-h .sec-count { text-shadow: none; }
  .more-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: var(--space-lg); row-gap: var(--space-xl);
  }
  .more-a { display: grid; row-gap: var(--space-sm); color: var(--navy-cream); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .player-page .more-a { color: var(--navy-cream); }
  .more-pic {
    position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; background: var(--navy);
    border: 3px solid var(--cream); outline: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
    transform: rotate(var(--r, -1deg)); margin: 2px 6px 6px 0;
    transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  }
  .more-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .more-n {
    position: absolute; z-index: 1; top: 6px; left: 6px; min-width: 1.6em; padding: 0.3em 0.4em 0.22em; text-align: center;
    font-family: var(--display); font-size: 0.875rem; line-height: 1; color: var(--ink);
    background: var(--yellow); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  }
  .more-t {
    font-family: var(--display); font-size: 0.9375rem; line-height: 1.05; text-transform: uppercase; text-wrap: balance;
    color: var(--cream); text-shadow: 1px 1px 0 var(--ink);
  }
  .more-k { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: var(--navy-dim); font-variant-numeric: tabular-nums; }
  .more-a:hover .more-pic { transform: rotate(0deg) translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
  .more-a:hover .more-t { color: var(--yellow); }
  .more-a:focus-visible { outline: none; }
  .more-a:focus-visible .more-pic { outline: 3px solid var(--cyan); outline-offset: 3px; }
  /* the clip on screen: ringed in yellow, NOW PLAYING over its poster */
  .more-a[aria-current="true"] .more-pic { border-color: var(--yellow); transform: rotate(0deg); }
  .more-a[aria-current="true"] .more-pic::after {
    content: "Now playing"; position: absolute; inset: auto 0 0 0; padding: 0.5em 0 0.4em; text-align: center;
    font-family: var(--display); font-size: 0.8125rem; line-height: 1; text-transform: uppercase; color: var(--ink); background: var(--yellow);
  }
  .more-a[aria-current="true"] .more-t { color: var(--yellow); }
}
@media (min-width: 960px) and (prefers-reduced-motion: reduce) {
  .more-pic { transition: none; }
}