/* =====================================================================
   Series title pages: /slice/ and the member series (/ramp/, /mix/, /push/, /fizz/, /loop/) (Netflix / Disney+ title anatomy, light tones)
   hero (art right, short fade on its left edge) -> sticky section tabs ->
   Episodes · Endings · Choose your hero · More like this · Details -> marigold CTA band.
   Tokens come from panelab.css only. Behaviour: /brand/slice.js.
   ===================================================================== */

/* ---------- title hero ----------
   Lower than the home billboard (--bill-h). Desktop: the art covers the right ~60% and bleeds to the
   screen edge; only its left edge fades into the canvas, so faces and balloons stay clear.
   Below 861px panelab's .bill stacks the art on top and the copy under it. */
/* 46vw caps the height on tall tablets (iPad Pro portrait), where 55svh made the art box narrower than the crop and cut the balloons */
.bill.ttl { --bill-h: clamp(460px, min(55svh, 46vw), 600px); --bill-art-h: min(74vw, 46svh); }
/* never narrower than the 4:3 /slice/ crop (716 x 540), so the caption and both balloons stay whole: --ttl-h is the hero's real
   height (slice.js), which grows past --bill-h when the copy wraps on tablets. The member pages override the width. */
.ttl .ttl__art { left: auto; right: 0; width: max(min(62%, calc(var(--bill-h) * 1.6)), calc(var(--ttl-h, var(--bill-h)) * 1.33)); }
.ttl .ttl__art::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--canvas) 0, color-mix(in srgb, var(--canvas) 75%, transparent) 9%, color-mix(in srgb, var(--canvas) 0%, transparent) 26%); }
.ttl .ttl__body { max-width: calc(var(--gut) + var(--pad) + min(600px, 46vw)); padding-top: 40px; padding-bottom: clamp(36px, 6vh, 56px); }
.ttl .ttl__body::before { display: none; }
.ttl__kicker { margin: 0 0 12px; }
/* the SLICE! logo (dark-ink version for the light canvas) is the title */
.ttl .ttl__title { margin: 0 0 14px; line-height: 0; }
.ttl__logo { width: clamp(220px, 24vw, 340px); height: auto; }
.ttl__meta { display: flex; flex-wrap: wrap; margin: 0 0 12px; padding: 0; list-style: none; color: var(--ink-2); font-size: var(--t-small); font-weight: 600; }
.ttl__meta li:not(:last-child)::after { content: "·"; margin: 0 9px; color: var(--ink-3); font-weight: 700; }
.ttl .ttl__syn { max-width: none; margin: 0 0 22px; color: var(--ink); }
.ttl__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ttl__after a { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* wide screens: the art stops near the container edge instead of the screen edge, so hero, tabs and lists share
   one frame; its right edge then fades into the canvas like the left one */
@media (min-width: 1500px) {
  .ttl .ttl__art { right: max(0px, calc(var(--gut) - 120px)); }
  .ttl .ttl__art::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(270deg, var(--canvas) 0, color-mix(in srgb, var(--canvas) 0%, transparent) 14%); }
}

/* member series pages (/ramp/ … /loop/, built by prototypes/tools/series-pages.mjs): key art instead of a comic crop.
   .ttl--wide: the owner featured art (16:9, quiet left third). .ttl--cover: the series cover (3:2, painted title on top). */
.ttl__art--key { overflow: hidden; background: var(--surface-2); }
.ttl__art--key img { width: 100%; height: 100%; object-fit: cover; object-position: var(--art-pos, 100% 20%); }
.ttl--wide .ttl__art { width: min(72%, calc(var(--bill-h) * 1.78)); }
.ttl--cover .ttl__art { width: min(62%, calc(var(--bill-h) * 1.5)); }
/* between phone and tablet landscape (861-1023px: big phones in landscape, small tablets) the side-by-side hero has no room:
   the copy ran over the art. Stack it like the phone layout in panelab.css, art on top and the copy under it. */
@media (min-width: 861px) and (max-width: 1023px) {
  .bill.ttl { display: block; min-height: 0; }
  .bill.ttl::after { display: none; }
  .ttl .ttl__art { position: relative; inset: auto; width: auto; height: min(56vw, 52svh); }
  .ttl .ttl__art::before { display: none; }
  .ttl .ttl__art::after { content: ""; position: absolute; inset: auto 0 0; height: 22%; pointer-events: none; background: linear-gradient(0deg, var(--canvas), color-mix(in srgb, var(--canvas) 0%, transparent)); }
  .ttl .ttl__body { max-width: none; margin-top: -40px; padding: 0 var(--pad) 28px; }
}
/* tablets in landscape and small laptops (1024-1279px): a narrower copy column, so the synopsis ends inside the art's fade instead of running over the faces */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ttl .ttl__body { max-width: calc(var(--gut) + var(--pad) + min(600px, 40vw)); }
  .ttl--wide .ttl__art { width: min(64%, calc(var(--bill-h) * 1.78)); }
}
.ttl__logo--series { width: clamp(200px, 20vw, 300px); }
.ttl__icons { display: flex; gap: 12px; }
.ttl .ttl__after { margin-top: 14px; }

/* icon button next to the main action: "Share" (the "+ My list" button was removed, owner 2026-10-16) */
.ibtn { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px 0 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font: 700 var(--t-small)/1.2 var(--body); cursor: pointer; transition: background .15s, border-color .15s; }
@media (hover: hover) { .ibtn:hover { background: var(--surface-2); } }
.ibtn:active { transform: translateY(1px); }
.ibtn__ic { display: inline-grid; place-items: center; }
.ibtn .ic { width: 22px; height: 22px; }

/* ---------- Continue reading (/slice/ only, slice.js): a compact card between the hero and the tabs ---------- */
.tcont { padding: 0 var(--gut) var(--s5); }
.tcont__card { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; align-items: center; gap: 20px; max-width: 760px; padding: 12px 20px 12px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--e1); transition: box-shadow .15s; }
.tcont__card:hover { box-shadow: var(--e2); }
.tcont__card:hover .tcont__go { background: var(--ink-hover); }
.tcont__art { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-art); }
.tcont__body { display: grid; gap: 2px; min-width: 0; }
.tcont__kicker { color: var(--ink-3); font-size: var(--t-meta); font-weight: 600; }
.tcont__title { font-weight: 700; font-size: var(--t-body); line-height: 1.3; }
.tcont__meta { color: var(--ink-2); font-size: var(--t-small); }

/* ---------- section tabs: sticky under the nav ----------
   In-page links with aria-current on the section in view (slice.js). Scrolls sideways on phones. */
.ttabs { position: sticky; top: var(--nav-h, 65px); z-index: 18; background: color-mix(in srgb, var(--canvas) 94%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.ttabs__in { position: relative; display: flex; gap: 32px; padding: 0 var(--gut); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.ttabs__in::-webkit-scrollbar { display: none; }
.ttabs a { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 52px; color: var(--ink-2); font-weight: 600; font-size: var(--t-small); text-decoration: none; white-space: nowrap; }
.ttabs a:hover { color: var(--ink); }
.ttabs a[aria-current] { color: var(--ink); }
.ttabs a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--ink); }
.ttabs a:focus-visible { outline-offset: -3px; }
section.tsec[id] { scroll-margin-top: calc(var(--nav-h, 65px) + var(--tabs-h, 53px) - 8px); }
.ttabs + .tsec { padding-top: var(--s6); }

/* ---------- episodes: a divider list ---------- */
.tsec__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; }
.tsec__head h2 { margin: 0; }
.season { margin: 0; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 600; font-size: var(--t-small); }
.eps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ep { border-bottom: 1px solid var(--line); }
.ep__link, .ep--locked { display: grid; grid-template-columns: 36px 208px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px 12px; }
.ep__link { margin: 0 -12px; color: var(--ink); text-decoration: none; border-radius: var(--r); transition: background .15s; }
.ep--locked { margin: 0 -12px; }
.ep__link:hover { background: var(--surface); }
.ep__link:hover .ep__title { text-decoration: underline; text-underline-offset: 3px; }
.ep__n { font: 800 28px/1 var(--display); color: var(--ink-3); text-align: center; }
.ep__art { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-art); box-shadow: var(--e1); }
.ep__body { display: grid; gap: 4px; min-width: 0; }
.ep__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.ep__title { font-weight: 700; font-size: var(--t-body); line-height: 1.3; }
.ep__num-m { display: none; }
.ep__len { color: var(--ink-3); font-size: var(--t-meta); }
.ep__desc { color: var(--ink-2); font-size: var(--t-small); }

/* ---------- endings: concealed, never revealed before reading ---------- */
.ends { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--row-gap); }
.end { display: flex; flex-direction: column; gap: 2px; }
.end__art { position: relative; display: block; aspect-ratio: 16 / 10; margin-bottom: 8px; border-radius: var(--r-art); overflow: hidden; background: var(--ink); box-shadow: var(--e1); }
.end__img { position: absolute; inset: -14%; filter: blur(18px) brightness(.42) saturate(.6); }
.end__q { position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(48px, 5vw, 72px)/1 var(--display); color: var(--sun); }

/* ---------- choose your hero: two small cards, label under the art ---------- */
.alexes { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 16px; }
.alex { display: flex; flex-direction: column; gap: 10px; color: var(--ink); text-decoration: none; }
.alex__art { display: block; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--sun-soft); box-shadow: var(--e1); transition: transform .2s ease-out, box-shadow .2s ease-out; }
.alex__art img { width: 100%; height: 100%; object-fit: cover; }
.alex__name { font-weight: 700; font-size: var(--t-body); }
.alex:hover .alex__art, .alex:focus-visible .alex__art { transform: scale(1.03); box-shadow: var(--e2); }
.alex:hover .alex__name { text-decoration: underline; text-underline-offset: 3px; }
.alex:focus-visible { outline: 0; }
.alex:focus-visible .alex__art { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- episode art cut from the key art (member series): --ep-pos picks the spot, --ep-zoom how close ---------- */
.ep__art--cover { overflow: hidden; background: var(--surface-2); }
.ep__art--cover img { width: 100%; height: 100%; object-fit: cover; object-position: var(--ep-pos, 50% 50%); transform: scale(var(--ep-zoom, 1)); transform-origin: var(--ep-pos, 50% 50%); }
.ep__soon { color: var(--ink-3); font-size: var(--t-meta); }

/* ---------- what kids practice (member series): three skill cards ---------- */
.skills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.skill { display: grid; align-content: start; gap: 6px; padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.skill__ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 50%; background: var(--sun-soft); }
.skill__ic .ic { width: 22px; height: 22px; }
.skill b { font-size: var(--t-body); line-height: 1.3; }
.skill span { color: var(--ink-2); font-size: var(--t-small); }
.skill__eg { margin-top: 4px; padding: 6px 10px; border-radius: 8px; background: var(--canvas); color: var(--ink) !important; font-weight: 600; justify-self: start; }

/* ---------- details ---------- */
.tfacts { margin-top: 8px; }
.tfacts a { color: var(--link); font-weight: 600; }

@media (max-width: 1023px) {
  .ep__link, .ep--locked { grid-template-columns: 28px 168px minmax(0, 1fr) auto; gap: 16px; }
}

@media (max-width: 860px) {
  .ttl .ttl__art { width: auto; }
  .ttl .ttl__art::before { display: none; }
  .ttl .ttl__body { max-width: none; padding-top: 0; padding-bottom: 20px; }
  .ttl__logo { width: 210px; }
  .ttl__logo--series { width: 180px; }
  .ttl__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .ttl .ttl__read { width: 100%; }
  .ttl__icons { gap: 4px; }
  .ibtn { flex-direction: column; gap: 4px; min-height: 0; min-width: 76px; padding: 6px 10px; border: 0; background: transparent; font-size: var(--t-meta); font-weight: 600; }
  .ibtn .ic { width: 24px; height: 24px; }
  .ttl .ttl__after { margin-top: 6px; }

  .ttabs__in { gap: 24px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .ttabs + .tsec { padding-top: var(--s5); }

  .ep__link, .ep--locked { grid-template-columns: 128px minmax(0, 1fr); grid-template-areas: "art top" "art badge" "desc desc"; gap: 8px 14px; padding: 14px 0; margin: 0; }
  .ep__link:hover { background: none; }
  .ep__n { display: none; }
  .ep__num-m { display: inline; }
  .ep__body { display: contents; }
  .ep__art { grid-area: art; align-self: start; }
  .ep__top { grid-area: top; align-self: end; flex-direction: column; gap: 0; }
  .ep__badge { grid-area: badge; justify-self: start; align-self: start; }
  .ep__desc { grid-area: desc; }

  .ends { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .skills { grid-template-columns: 1fr; gap: 12px; }
  .skill { padding: 16px 18px 18px; }
  .tcont { padding-bottom: var(--s4); }
  .tcont__card { grid-template-columns: 112px minmax(0, 1fr); gap: 12px 14px; padding: 10px; }
  .tcont__go { grid-column: 1 / -1; width: 100%; }
  .alexes { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; gap: 12px; }

  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}