/* Member series title pages (/ramp/ /mix/ /push/ /fizz/ /loop/), on top of slice.css. Generated by
   prototypes/tools/series-pages.mjs; art in /brand/series/<series>/. */

/* ---------- episodes: real stills (16:10) ---------- */
.eps__sub { margin-top: -4px; }
.ep__art--still { overflow: hidden; background: var(--surface-2); }
.ep__art--still img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- characters: waist-up portraits on the series' own colour, name and one line under the art ---------- */
.cast { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
.cast__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cast__art { display: block; aspect-ratio: 1; margin-bottom: 10px; border-radius: var(--r); overflow: hidden; background: var(--cast-bg, var(--surface-2)); box-shadow: var(--e1); }
.cast__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.cast__name { font-size: var(--t-body); line-height: 1.3; }
.cast__tag { color: var(--ink-3); font-size: var(--t-meta); }
.cast__line { margin-top: 4px; color: var(--ink-2); font-size: var(--t-small); }

/* ---------- what kids practice: where the skill first comes up ---------- */
.skill__ep { margin-top: 2px; color: var(--ink-3) !important; font-size: var(--t-meta) !important; }

@media (max-width: 860px) {
  .cast { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .cast__art { margin-bottom: 8px; }
}