/* series.css — galleries (SPEC-v4 §5). No JS: grid of links; html.js: snap rails + detail panel;
   html[data-series="ready"]: series.js drives cards, drag, arrows, keyboard, motion. */

.series {
  /* 390 px: two posters and a generous peek of the third, so the rail reads as swipeable */
  --card-w: clamp(9.5rem, 40vw, 13.75rem);
  --card-gap: clamp(.5rem, 2.2vw, 1rem);
  --rest-scale: .9;
  --card-r: 10px 7px 12px 6px / 7px 11px 6px 10px;
  /* rails start where the section text starts (the .wrap content edge), then bleed to the viewport edge */
  --rail-pad: max(var(--gutter), calc((100vw - var(--container)) / 2));
  position: relative;
  overflow: clip;
  /* two galleries in a row: half a pad each side of the seam */
  padding-bottom: calc(var(--section-pad) * .5);
}
.series + .series { padding-top: calc(var(--section-pad) * .5); }
/* the last gallery before the cave sinks to --void (the ::before below) so the black stage meets it without a seam;
   the one above it (series) ends plainly, no fade */
.series:last-child { padding-bottom: calc(var(--section-pad) * .8 + 40svh); }
.series:last-child::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40svh; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 3, 2, 0) 0%, #050302 100%);
}
/* firelight bleeding from the upper left, as if the bonfire burned just off-frame */
.series__amb {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(70% 38% at 0% 12%, rgba(217, 84, 26, .13), transparent 70%),
    radial-gradient(50% 30% at 100% 70%, rgba(163, 38, 14, .08), transparent 75%);
}
/* second gallery: firelight grows in from the seam */
.series + .series .series__amb {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(5, 3, 2, 1) 35%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(5, 3, 2, 1) 35%);
}
.series > .wrap, .srow { position: relative; z-index: 1; }

/* ---------- head ---------- */
.series__head { margin-bottom: var(--s-5); }
/* the h2 is .sr-only: the lead reads as the heading */
.series__lead {
  margin-top: var(--s-3);
  max-width: 24em;
  font-family: var(--font-display); font-optical-sizing: auto;
  font-weight: 360; font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.625rem);
  line-height: 1.16; letter-spacing: -.01em;
  color: var(--bone-100);
  text-shadow: var(--lit-shadow);
  text-wrap: balance;
}
.series__hint {
  margin-top: var(--s-3);
  font-size: var(--fs-small); font-style: italic; color: var(--bone-400);
}
.series__hint[hidden] { display: none; }

/* ---------- row head: era range + count + arrows ---------- */
.srow { margin-top: var(--s-7); }
.srow__head {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.srow__title {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-weight: 340; font-style: italic;
  font-size: var(--fs-h3); line-height: 1.2; letter-spacing: .005em;
  color: var(--pig-ochre-lt);
  text-shadow: var(--lit-shadow);
  white-space: nowrap;
}
.srow__count {
  font-size: var(--fs-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bone-400);
  white-space: nowrap;
}
.srow__nav { margin-left: auto; display: flex; gap: var(--s-2); align-self: center; }
.srow__nav[hidden] { display: none; }

.snav {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(192, 138, 62, .45);
  border-radius: var(--r-pill);
  background: rgba(11, 7, 5, .55);
  color: var(--fire-8);
  cursor: pointer;
  transition: border-color var(--d-xs) var(--ease-stroke), background-color var(--d-xs) var(--ease-stroke),
    opacity var(--d-s) var(--ease-stroke), transform var(--d-xs) var(--ease-stroke);
}
.snav svg { width: 22px; height: 22px; }
.snav--prev svg { transform: scaleX(-1); }
.snav:hover, .snav:focus-visible { border-color: var(--fire-7); background: rgba(192, 138, 62, .16); }
.snav:active { transform: scale(.94); }
.snav[aria-disabled="true"] { opacity: .3; cursor: default; }

/* ---------- no-JS baseline: a grid of links ---------- */
.srail { position: relative; }
.srail__track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--s-5) var(--s-4);
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--s-3) var(--gutter);
  list-style: none;
}
.scard { position: relative; min-width: 0; }
.scard__link {
  display: block;
  color: inherit; text-decoration: none;
  border-radius: var(--card-r);
  -webkit-tap-highlight-color: transparent;
}
.scard__link:focus-visible { outline-offset: 4px; }
.scard__frame {
  position: relative; display: block;
  aspect-ratio: 2 / 3;
  border-radius: var(--card-r);
  overflow: hidden;
  background: var(--avg, var(--stone-800));
  border: 1px solid rgba(192, 138, 62, .2);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
}
.scard__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.scard__shade, .scard__light { position: absolute; pointer-events: none; }
.scard__shade { inset: 0; }
.scard__light { display: none; }
.scard__body { display: flex; flex-direction: column; gap: .2rem; padding-top: var(--s-3); }
.scard__title {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 440;
  font-size: 1.0625rem; line-height: 1.25; color: var(--bone-100);
}
.scard__meta {
  font-size: var(--fs-label); font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pig-ochre-lt);
}
.scard__syn { font-size: var(--fs-small); line-height: 1.45; color: var(--bone-400); text-wrap: pretty; }

.srow__foot { position: relative; }
.sprog, .sdetail { display: none; }

/* ======================================================================
   html.js: rails (static layout, no shift when series.js takes over)
   ====================================================================== */
html.js .srow { margin-top: var(--s-6); }
html.js .srail {
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-pad);
  scrollbar-width: none;
  /* room for the lift, the scale and the ember glow of the active card */
  padding-block: 40px 60px;
  margin-block: -40px -60px;
  touch-action: pan-x pan-y;
}
html.js .srail::-webkit-scrollbar { display: none; }
html.js .srail__track {
  display: flex; gap: var(--card-gap);
  width: max-content; max-width: none;
  margin: 0;
  padding: 0 var(--rail-pad);
}
/* the end gutter (padding-right of a flex track is not scrollable in every engine) */
html.js .srail__track::after { content: ""; flex: 0 0 1px; margin-left: calc(var(--rail-pad) - var(--card-gap) - 1px); }
/* the li (snap area) is never transformed; motion lives on the link */
html.js .scard { flex: 0 0 var(--card-w); scroll-snap-align: start; }
html.js .scard__link {
  transform-origin: 50% 100%;
  scale: var(--rest-scale);
  translate: var(--nx, 0) 0;
  transition: scale var(--d-m) var(--ease-reveal), translate var(--d-m) var(--ease-reveal);
}
html.js .scard.is-active .scard__link { scale: 1; }
/* the card body stays for screen readers (aria-describedby) and the no-JS grid */
html.js .scard__body {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
html.js .scard__link { perspective: 900px; }
html.js .scard__frame { transform-style: flat; }

/* in shadow until the fire reaches it: warm dark veil, lifted from the active card */
html.js .scard__shade {
  background:
    linear-gradient(180deg, rgba(10, 7, 6, .12) 0%, rgba(10, 7, 6, .58) 100%),
    linear-gradient(0deg, rgba(74, 15, 7, .3), rgba(74, 15, 7, .3));
  opacity: 1;
  transition: opacity var(--d-m) var(--ease-warm);
}
html.js .scard.is-active .scard__shade { opacity: .08; }
/* ember rim: opacity-only layer */
html.js .scard__frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(249, 198, 107, .85), inset 0 -40px 50px -30px rgba(240, 122, 34, .45);
  opacity: 0;
  transition: opacity var(--d-m) var(--ease-warm);
}
html.js .scard__link::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--card-r); pointer-events: none; z-index: -1;
  box-shadow: 0 22px 50px -16px rgba(240, 122, 34, .5), 0 0 70px -18px rgba(217, 84, 26, .55);
  opacity: 0;
  transition: opacity var(--d-m) var(--ease-warm);
}
html.js .scard.is-active .scard__frame::after,
html.js .scard.is-active .scard__link::after { opacity: 1; }
html.js .scard__link { position: relative; z-index: 0; }

/* cursor light (moved by series.js) */
html.js .scard__light {
  display: block;
  left: 0; top: 0; width: 160%; aspect-ratio: 1;
  margin: -80% 0 0 -80%;
  /* plain alpha, no blend mode (cost) */
  background: radial-gradient(circle at 50% 50%, rgba(252, 227, 166, .3) 0%, rgba(246, 163, 58, .14) 26%, rgba(217, 84, 26, 0) 58%);
  opacity: 0;
  transition: opacity var(--d-s) var(--ease-warm);
}

/* fire pool under the active card: ember core + wide shadow (ink overflow, within the scroller padding) */
html.js .srail__amb {
  position: absolute; left: 0; bottom: 36%; z-index: 0; pointer-events: none;
  width: calc(var(--card-w) * .6); height: 34%;
  margin-left: calc(var(--card-w) * .2);
  border-radius: 50%;
  background: var(--amb, rgba(217, 84, 26, .42));
  box-shadow: 0 0 70px 30px var(--amb, rgba(217, 84, 26, .42));
  opacity: .6;
  translate: var(--ax, var(--rail-pad)) 0;
}
html.js .srail__track { position: relative; z-index: 1; }

/* progress: an amber thumb over a carved groove */
html.js .sprog {
  display: block; position: relative;
  height: 2px; margin-top: var(--s-4);
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(86, 64, 47, .7), rgba(86, 64, 47, .25));
  overflow: hidden;
}
html.js .sprog__bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--thumb, 30%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--fire-5), var(--fire-7) 70%, var(--fire-8));
  box-shadow: 0 0 10px rgba(240, 122, 34, .6);
  transform-origin: 0 50%;
}

/* ---------- detail panel (under the row) ---------- */
html.js .sdetail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* the synopsis row absorbs the slack, so the IMDb button never moves when the text changes */
  grid-template-rows: auto auto 1fr auto;
  gap: var(--s-2);
  margin-top: var(--s-4);
  /* reserved height: synopses differ in length, the page below must not jump */
  min-height: 16.25rem;
}
html.js .sdetail { position: relative; }
html.js .sdetail > :not(.sdetail__ghost) { position: relative; z-index: 1; }
/* the year carved big into the rock behind the panel */
.sdetail__ghost {
  display: none;
  position: absolute; right: -.04em; top: .02em; z-index: 0;
  font-family: var(--font-display); font-optical-sizing: auto;
  font-weight: 300; font-style: italic;
  font-size: clamp(5.5rem, 3rem + 9vw, 11.5rem); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: lining-nums;
  color: var(--stone-800);
  text-shadow: var(--carved-shadow);
  pointer-events: none; user-select: none;
}
html.js .sdetail__ghost { display: block; }
.sdetail__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .55em;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pig-ochre-lt);
}
.sdetail__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--fire-6); box-shadow: 0 0 6px var(--fire-6); }
.sdetail__idx { color: var(--bone-600); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.sdetail__title {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-weight: 380; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); line-height: 1.12; letter-spacing: -.01em;
  color: var(--bone-100);
  text-shadow: var(--lit-shadow);
  text-wrap: balance;
}
.sdetail__syn {
  max-width: 52ch;
  font-size: var(--fs-body); line-height: 1.55;
  color: var(--bone-200);
  text-wrap: pretty;
}
.sdetail__cta {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .45em;
  height: 44px; padding: 0 18px; margin-top: var(--s-2);
  border: 1px solid var(--pig-ochre); border-radius: var(--r-pill);
  color: var(--bone-100); text-decoration: none;
  font-weight: 500; letter-spacing: .02em;
  transition: background-color var(--d-xs) var(--ease-stroke), border-color var(--d-xs) var(--ease-stroke);
}
.sdetail__cta .sym { color: var(--fire-7); transition: transform var(--d-xs) var(--ease-stroke); }
.sdetail__cta:hover { background: rgba(192, 138, 62, .12); border-color: var(--fire-7); }
.sdetail__cta:hover .sym { transform: translate(2px, -2px); }

/* masked swap of the panel (relief edge, same texture as reveal.js) — only while it runs */
html.reveal-masks .sdetail.is-swapping [data-d] {
  -webkit-mask-image: url(/assets/img/masks/relief-edge.webp);
  mask-image: url(/assets/img/masks/relief-edge.webp);
  -webkit-mask-size: 320% 100%; mask-size: 320% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: var(--mx, 0%) 0; mask-position: var(--mx, 0%) 0;
}

/* a row that fits (.is-static): centred, no drag, no groove */
html.js .srow.is-static .srail__track { width: auto; justify-content: center; }
html.js .srow.is-static .srail__track::after, html.js .srow.is-static .sprog { display: none; }

/* sparks rising from the ledge (spawned by series.js) */
.sspark {
  position: absolute; left: 0; bottom: 64px; z-index: 2; pointer-events: none;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--fire-8);
  box-shadow: 0 0 6px 1px rgba(246, 163, 58, .8);
  opacity: 0;
}

/* ---------- ready: interaction affordances ---------- */
html[data-series="ready"] .srail { cursor: grab; }
html[data-series="ready"] .srail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
html[data-series="ready"] .srail.is-dragging .scard__link { pointer-events: none; }
html[data-series="ready"] .srail.is-gliding { scroll-snap-type: none; }
html[data-series="ready"] .srow.is-static .srail { cursor: default; }

@media (hover: hover) and (pointer: fine) {
  html.js .scard.is-hover .scard__link { scale: 1.04; translate: 0 -8px; }
  html.js .scard.is-hover .scard__shade { opacity: 0; }
  html.js .scard.is-hover .scard__frame::after,
  html.js .scard.is-hover .scard__link::after { opacity: 1; }
  html.js .scard.is-hover .scard__light { opacity: 1; }
  html.js .scard.is-hover ~ .scard { --nx: 14px; }
  /* arrows rest dim and wake when the row is hovered or focused */
  html[data-series="ready"] .srow .snav { opacity: .4; }
  html[data-series="ready"] .srow:hover .snav,
  html[data-series="ready"] .srow:focus-within .snav { opacity: 1; }
  html[data-series="ready"] .srow .snav[aria-disabled="true"] { opacity: .18; }
}
/* the card before the hovered one steps aside (series.js) */
html.js .scard.is-before { --nx: -14px; }

/* ≤ 374 px: range over count, arrows right */
@media (max-width: 374px) {
  .srow__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); align-items: center; }
  .srow__title { grid-area: 1 / 1; }
  .srow__count { grid-area: 2 / 1; }
  .srow__nav { grid-area: 1 / 2 / 3 / 3; margin-left: 0; }
}

/* ---------- ≥ 600 px ---------- */
@media (min-width: 600px) {
  .series { --card-w: clamp(10rem, 27vw, 13.75rem); }
  html.js .sdetail { min-height: 14.5rem; }
}

/* ---------- ≥ 1024 px: panel in two columns, shorter rows ---------- */
@media (min-width: 1024px) {
  .series { --card-w: 13.75rem; --rest-scale: .88; }
  .srow { margin-top: var(--s-8); }
  html.js .srow { margin-top: var(--s-7); }
  .srow__head { margin-bottom: var(--s-3); }
  html.js .sdetail {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    grid-template-areas: "meta syn cta" "title syn cta";
    column-gap: var(--s-7); row-gap: var(--s-2);
    align-items: start;
    min-height: 8.5rem;
  }
  .sdetail__meta { grid-area: meta; }
  .sdetail__title { grid-area: title; }
  .sdetail__syn { grid-area: syn; padding-top: .1rem; }
  .sdetail__cta { grid-area: cta; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .scard__link, html.js .scard__shade, html.js .scard__frame::after, html.js .scard__link::after { transition: none; }
  html.js .scard.is-hover .scard__link { translate: none; }
  html.js .scard.is-hover ~ .scard, html.js .scard.is-before { --nx: 0; }
  .sspark { display: none; }
}