/* ===== HERO: no-zoom 'contain' mode (letterbox if needed) ===== */
.hero-band {
  --hero-ratio: 21 / 9;                 /* default; JS sets true ratio */
  position: relative;
  margin: 24px 0 8px;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  aspect-ratio: var(--hero-ratio);
  min-height: clamp(220px, 28vw, 560px);
  max-height: 62vh;
}

/* Make any popular slider fill the band height */
.hero-band .hero-media,
.hero-band .swiper,
.hero-band .swiper-wrapper,
.hero-band .swiper-slide,
.hero-band .keen-slider,
.hero-band .keen-slider__slide,
.hero-band .slick-slider,
.hero-band .slick-list,
.hero-band .slick-track,
.hero-band .slick-slide {
  height: 100% !important;
}

/* No crop/zoom: letterbox when needed */
.hero-band.contain img,
.hero-band.contain picture>img,
.hero-band.contain video,
.hero-band.contain canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #000;
}

/* Optional cinematic mode if you ever switch back */
.hero-band.cover img,
.hero-band.cover picture>img,
.hero-band.cover video,
.hero-band.cover canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #000;
}

/* ===== Posters grid (responsive, wraps) ============================ */
.posters-grid,
.grid.posters,
section .grid.posters {
  display: grid !important;
  grid-auto-flow: row;
  /* 180–220 works well; tweak min if you want more columns on small screens */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
  align-items: start;
}

/* Make sure poster cards behave inside the grid */
.posters-grid .poster,
.grid.posters .poster {
  display: block;
  width: 100%;
  background: var(--surface, #121212);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.posters-grid .poster img,
.grid.posters .poster img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

/* Titles/dates below posters */
.posters-grid .poster .meta,
.grid.posters .poster .meta {
  padding: 8px 10px;
  font-size: 13px;
}

/* ===== COMING SOON GRID FIX (for .grid.gap-5.sm:gap-8.md:gap-9.lg:grid-cols-6) ===== */
.grid.gap-5.sm\:gap-8.md\:gap-9.lg\:grid-cols-6 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 24px !important;
  align-items: start;
  justify-items: center;
  width: 100%;
}

/* Poster links inside grid */
.grid.gap-5.sm\:gap-8.md\:gap-9.lg\:grid-cols-6 > a {
  display: block;
  width: 100%;
  max-width: 220px;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.grid.gap-5.sm\:gap-8.md\:gap-9.lg\:grid-cols-6 > a:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.grid.gap-5.sm\:gap-8.md\:gap-9.lg\:grid-cols-6 img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}

/* ==== Runtime poster grid (applies when JS adds .posters-grid) ==== */
.posters-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(200px,1fr)) !important;
  gap:24px !important;
  align-items:start;
}
.posters-grid > a, .posters-grid > .poster, .posters-grid > li > a{
  display:block;
  width:100%;
  max-width:240px;
  margin:0 auto;
  border-radius:12px;
  overflow:hidden;
  background:#111;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  transition:transform .18s ease, box-shadow .24s ease;
}
.posters-grid > a:hover, .posters-grid > .poster:hover, .posters-grid > li > a:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.posters-grid img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  aspect-ratio:2/3; /* safe default */
}

/* ===== Top Nav (frosted & sticky) ===== */
.navbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(15,15,15,.6);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:16px;
  padding:12px 20px;
}
.navbar a{ color:#f3f3f3; text-decoration:none; font-weight:500; opacity:.95; transition:opacity .25s ease; }
.navbar a:hover{ opacity:.75; }

/* ===== Hero band (fluid, no zoom) ===== */
.hero-band{
  position:relative;
  margin:24px 0 8px;
  border-radius:14px;
  overflow:hidden;
  background:#000;
  aspect-ratio: 21 / 9;
  min-height: clamp(240px,34vw,560px);
  max-height: 62vh;
}
@supports not (aspect-ratio: 1/1){ .hero-band{ height: clamp(240px,34vw,560px); } }

/* make media fill area without zooming badly */
.hero-band img, .hero-band video, .hero-band picture {
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block;
}

/* ===== Hero caption (bottom-left) ===== */
.hero-content{
  position:absolute; left:48px; right:48px; bottom:36px; z-index:3;
  color:#fff; max-width:min(720px, 70vw);
  text-shadow:0 3px 12px rgba(0,0,0,.65);
}
.hero-content h2{ font-size: clamp(20px,2.2vw,34px); margin:0 0 6px; }
.hero-content p{ margin:0; opacity:.92; }

/* ===== Hero nav (arrows + pills) ===== */
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5; background:rgba(0,0,0,.45); border:none; color:#fff;
  width:40px; height:40px; border-radius:999px; cursor:pointer;
  display:grid; place-items:center; font-size:20px;
  transition:background .2s ease, transform .2s ease;
}
.hero-arrow:hover{ background:rgba(0,0,0,.7); transform:translateY(-50%) scale(1.05); }
.hero-arrow.left{ left:14px; }
.hero-arrow.right{ right:14px; }

.hero-pills{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:16px; z-index:5; display:flex; gap:6px; align-items:center;
}
.hero-pills > *{ width:8px; height:8px; border-radius:999px; background:#cfcfcf40; }
.hero-pills > *.is-active{ background:#fff; }

/* ===== Section header with right-aligned action ===== */
.section-header{
  display:flex; align-items:center; justify-content:space-between;
  margin:32px 0 10px;
}
.section-header a{ color:#cfcfcf; text-decoration:none; font-weight:500; }
.section-header a:hover{ color:#fff; }

/* ===== Poster grid (grid enhancer uses this) ===== */
.posters-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr)) !important;
  gap:24px !important; align-items:start;
}
.posters-grid a.poster, .posters-grid > a, .posters-grid > li > a{
  display:block; width:100%; max-width:240px; margin:0 auto;
  border-radius:12px; overflow:hidden; background:#111;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  transition:transform .18s ease, box-shadow .24s ease;
}
.posters-grid a.poster:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.35); }
.posters-grid img{ width:100%; height:auto; display:block; }

/* ===== Locked-in PHORGOTTEN UI Tweaks ===== */
header.topnav.navbar {
  position: sticky; top: 0; z-index: 99;
  backdrop-filter: blur(12px);
  background: rgba(15,15,15,0.7);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
header.topnav .topnav-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
}

.hero-band {
  position: relative; border-radius: 14px; overflow: hidden;
  background: #000; aspect-ratio: 21/9;
}
.hero-content {
  position: absolute; bottom: 40px; left: 60px;
  z-index: 5; color: white;
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
  max-width: 640px;
}
.hero-pills {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 16px; display: flex; gap: 6px;
}
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 6; border: none; background: rgba(0,0,0,0.4);
  color: white; font-size: 20px; border-radius: 50%;
  width: 40px; height: 40px; cursor: pointer;
  transition: background 0.2s ease;
}
.hero-arrow:hover { background: rgba(0,0,0,0.7); }
.hero-arrow.left { left: 14px; }
.hero-arrow.right { right: 14px; }

.section-header {
  display: flex; justify-content: space-between;
  align-items: center; margin: 24px 0 8px;
}
.section-header a { color: #bbb; text-decoration: none; }
.section-header a:hover { color: white; }

/* ===========================================================
   CINEMATIC POLISH: nav + hero + section header
   (idempotent: only adds styles; no DOM rewrites)
   =========================================================== */

/* --- Top nav (frosted, spaced, sticky) --- */
header.topnav{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  background: color-mix(in oklab, #0b0b0b 80%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
header.topnav .topnav-bar{
  max-width: 1280px; margin: 0 auto;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 16px;
}
header.topnav .left{ display: flex; align-items: center; gap: 10px; }
header.topnav nav.links{ display: flex; align-items: center; gap: 18px; margin-left: 8px; }
header.topnav form.search{ margin-left: auto; display: flex; align-items: center; gap: 8px; }
header.topnav form.search input[type="search"]{
  height: 36px; padding: 0 14px; border-radius: 18px;
  background: rgba(255,255,255,.06); color: var(--text,#f5f5f5);
  border: 1px solid rgba(255,255,255,.10); outline: none;
}
header.topnav form.search button{
  height: 36px; padding: 0 14px; border-radius: 18px; border: 0;
  background: var(--brand,#22c55e); color: #0b1a0f; font-weight: 600; cursor: pointer;
}

/* --- Section header (title + “See all →” to the right) --- */
.section-header{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.section-header a{ color: var(--text-dim,#cfcfcf); }
.section-header a:hover{ color: var(--text,#fff); }

/* --- Hero band: cinematic lower-third composition --- */
.hero-band{
  position: relative;
  border-radius: 16px; overflow: hidden; background: #000;
  margin: 24px 0 10px;
  aspect-ratio: 21/9; min-height: clamp(260px, 34vw, 560px);
}
.hero-band .hero-media,
.hero-band .keen-slider, .hero-band .swiper, .hero-band .slick-slider{
  height: 100% !important;
}
.hero-band .hero-media img, .hero-band .hero-media video,
.hero-band .keen-slider img, .hero-band .swiper img, .hero-band .slick-slide img{
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}

/* gradient to make text readable */
.hero-band::after{
  content:""; position:absolute; inset: 0 0 0 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.30) 26%, rgba(0,0,0,.10) 60%, rgba(0,0,0,0) 80%);
}

/* Title/description in lower third */
.hero-band .hero-content{
  position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 3;
  color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.6);
  max-width: min(72ch, 62%);
}
.hero-band .hero-content .hero-title{
  font-size: clamp(22px, 2.1vw, 34px); font-weight: 800; letter-spacing: .2px; margin: 0 0 8px;
}
.hero-band .hero-content .hero-desc{
  font-size: clamp(12px, 1.1vw, 16px); line-height: 1.45; opacity: .95; margin: 0;
}

/* Dots/pills centered at bottom */
.hero-band .hero-pills{
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 12px; z-index: 4; display: flex; gap: 6px; align-items: center;
}
.hero-band .hero-pills > *{
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.55); opacity: .75;
}
.hero-band .hero-pills .active, .hero-band .hero-pills .keen-slider__dot--active{
  background: #fff; opacity: 1; transform: scale(1.05);
}

/* Left/right arrows centered vertically on edges */
.hero-band .hero-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display:grid; place-items:center;
  background: rgba(17,17,17,.55); border: 1px solid rgba(255,255,255,.14);
  color:#fff; border-radius: 999px; z-index: 4; cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.hero-band .hero-arrow:hover{ background: rgba(17,17,17,.75); transform: translateY(-50%) scale(1.03); }
.hero-band .hero-arrow.left{ left: 10px; }
.hero-band .hero-arrow.right{ right: 10px; }

/* Responsive tweaks */
@media (max-width: 900px){
  .hero-band .hero-content{ max-width: 80%; left: 18px; right: 18px; bottom: 20px; }
}
@media (max-width: 640px){
  .hero-band{ border-radius: 12px; }
  .hero-band .hero-content{ max-width: 92%; bottom: 16px; }
  .hero-band .hero-arrow{ width: 34px; height: 34px; }
}

/* --- Section header (title + “See all →” to the right) --- */
.section-header{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:10px;
}
.section-header a{ color: var(--text-dim,#cfcfcf); }
.section-header a:hover{ color: var(--text,#fff); }

/* --- Hero band: cinematic lower-third composition --- */
.hero-band{
  position:relative; border-radius:16px; overflow:hidden; background:#000;
  margin:24px 0 10px;
  aspect-ratio:21/9; min-height:clamp(260px,34vw,560px);
}
.hero-band .hero-media,
.hero-band .keen-slider, .hero-band .swiper, .hero-band .slick-slider{ height:100% !important; }
.hero-band img, .hero-band video,
.hero-band .keen-slider img, .hero-band .swiper img, .hero-band .slick-slide img{
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.hero-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.30) 26%, rgba(0,0,0,.10) 60%, rgba(0,0,0,0) 80%);
}
.hero-band .hero-content{
  position:absolute; left:28px; right:28px; bottom:26px; z-index:3;
  color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.6);
  max-width:min(72ch,62%);
}
.hero-band .hero-title{ font-size:clamp(22px,2.1vw,34px); font-weight:800; letter-spacing:.2px; margin:0 0 8px; }
.hero-band .hero-desc{ font-size:clamp(12px,1.1vw,16px); line-height:1.45; opacity:.95; margin:0; }

/* Dots/pills centered at bottom */
.hero-band .hero-pills{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:12px; z-index:4; display:flex; gap:6px; align-items:center;
}
.hero-band .hero-pills > *{
  width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.55); opacity:.75;
}
.hero-band .hero-pills .active,
.hero-band .hero-pills .keen-slider__dot--active{ background:#fff; opacity:1; transform:scale(1.05); }

/* Left/right arrows centered vertically on edges */
.hero-band .hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; display:grid; place-items:center;
  background:rgba(17,17,17,.55); border:1px solid rgba(255,255,255,.14);
  color:#fff; border-radius:999px; z-index:4; cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.hero-band .hero-arrow:hover{ background:rgba(17,17,17,.75); transform:translateY(-50%) scale(1.03); }
.hero-band .hero-arrow.left{ left:10px; }
.hero-band .hero-arrow.right{ right:10px; }

/* Responsive tweaks */
@media (max-width: 900px){
  .hero-band .hero-content{ max-width:80%; left:18px; right:18px; bottom:20px; }
}
@media (max-width: 640px){
  .hero-band{ border-radius:12px; }
  .hero-band .hero-content{ max-width:92%; bottom:16px; }
  .hero-band .hero-arrow{ width:34px; height:34px; }
}

/* ===== HERO CINEMATIC LAYOUT ===================================== */
.hero-band{ position:relative; border-radius:14px; overflow:hidden; }
.hero-band .hero-copy{
  position:absolute; left:24px; right:24px; bottom:18px;
  display:flex; flex-direction:column; gap:10px; z-index:3;
  max-width:min(62ch, 70%);
}
.hero-band .hero-copy .title{
  font-weight:800; font-size:clamp(22px, 3vw, 34px); line-height:1.1;
  text-shadow:0 2px 16px rgba(0,0,0,.55);
}
.hero-band .hero-copy .desc{
  font-size:clamp(13px, 1.25vw, 16px); line-height:1.35; opacity:.95;
  text-shadow:0 1px 14px rgba(0,0,0,.65);
}

/* soft floor gradient for readability */
.hero-band::after{
  content:""; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  z-index:2; pointer-events:none;
}

/* Pills centered */
.hero-band .hero-bullets{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:14px; z-index:4; display:flex; gap:6px; align-items:center;
}
.hero-band .hero-bullets > *{
  width:8px; height:8px; border-radius:999px; background:#ffffff55;
}
.hero-band .hero-bullets .active{ background:#fff; }

/* Side arrows */
.hero-band .hero-prev, .hero-band .hero-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:999px;
  display:grid; place-items:center; z-index:4;
  background:rgba(0,0,0,.45); color:#fff; border:1px solid #ffffff33;
  cursor:pointer; transition:background .15s ease, transform .15s ease;
}
.hero-band .hero-prev{ left:10px; }
.hero-band .hero-next{ right:10px; }
.hero-band .hero-prev:hover, .hero-band .hero-next:hover{
  background:rgba(0,0,0,.6);
}

/* Keep hero content visible under frosted top bar */
header.topnav{ position:sticky; top:0; z-index:50; }

/* ================= CSS-only Cinematic Hero (no DOM mutation) ================ */
/* Ensure hero is positioned context */
#hero, .hero-band { position: relative; border-radius: 14px; overflow: hidden; }

/* Title & Description pinned to lower-left. 
   We target common patterns without relying on exact class names. */
#hero :is(h1,h2,.title,[data-title]),
.hero-band :is(h1,h2,.title,[data-title]) {
  position: absolute; left: 24px; bottom: 58px; z-index: 3;
  margin: 0; padding: 0;
  font-weight: 800; line-height: 1.12;
  font-size: clamp(22px, 3vw, 34px);
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
  color: #fff !important;
}

/* First paragraph / description near the bottom */
#hero :is(p,.desc,.description,[data-desc]):first-of-type,
.hero-band :is(p,.desc,.description,[data-desc]):first-of-type {
  position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 3;
  margin: 0; max-width: min(62ch, 70%);
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.35; color: #fff !important;
  text-shadow: 0 1px 14px rgba(0,0,0,.65);
}

/* Soft bottom gradient to guarantee readability */
#hero::after, .hero-band::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  z-index: 2; pointer-events: none;
}

/* Center the pagination pills (bullets/dots/tablist) */
#hero :is(.hero-bullets,[class*="bullet" i],[class*="dot" i],ul[role="tablist"]),
.hero-band :is(.hero-bullets,[class*="bullet" i],[class*="dot" i],ul[role="tablist"]) {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 14px; z-index: 4; display: flex; gap: 6px; align-items: center;
}

/* Make tiny dots visible regardless of library */
#hero :is([class*="bullet" i],[class*="dot" i]) > * ,
.hero-band :is([class*="bullet" i],[class*="dot" i]) > *  {
  width: 8px; height: 8px; border-radius: 999px; background: #ffffff55;
}
#hero :is([class*="bullet" i],[class*="dot" i]) :is(.active,[aria-current="true"]),
.hero-band :is([class*="bullet" i],[class*="dot" i]) :is(.active,[aria-current="true"]) {
  background: #fff;
}

/* Side arrows at mid-left / mid-right (best-effort selectors) */
#hero :is(button,a)[aria-label*="prev" i],
.hero-band :is(button,a)[aria-label*="prev" i] {
  position: absolute; top: 50%; left: 10px; transform: translateY(-50%);
  z-index: 4; width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.45); color: #fff; border: 1px solid #ffffff33;
}
#hero :is(button,a)[aria-label*="next" i],
.hero-band :is(button,a)[aria-label*="next" i] {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  z-index: 4; width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.45); color: #fff; border: 1px solid #ffffff33;
}
#hero :is(button,a)[aria-label*="prev" i]:hover,
#hero :is(button,a)[aria-label*="next" i]:hover,
.hero-band :is(button,a)[aria-label*="prev" i]:hover,
.hero-band :is(button,a)[aria-label*="next" i]:hover {
  background: rgba(0,0,0,.6);
}

/* Keep nav frosted & sticky (in case it was lost) */
header.topnav { position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  background: color-mix(in oklab, #0b0b0b 80%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Right-align "See all →" links within section headers */
.section :is(.h2,h2) + a,
section :is(.h2,h2) + a {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
}

/* ================= CSS-only Cinematic Hero (no DOM mutation) ================ */
/* Ensure hero is positioned context */
#hero, .hero-band { position: relative; border-radius: 14px; overflow: hidden; }

/* Title & Description pinned to lower-left. 
   We target common patterns without relying on exact class names. */
#hero :is(h1,h2,.title,[data-title]),
.hero-band :is(h1,h2,.title,[data-title]) {
  position: absolute; left: 24px; bottom: 58px; z-index: 3;
  margin: 0; padding: 0;
  font-weight: 800; line-height: 1.12;
  font-size: clamp(22px, 3vw, 34px);
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
  color: #fff !important;
}

/* First paragraph / description near the bottom */
#hero :is(p,.desc,.description,[data-desc]):first-of-type,
.hero-band :is(p,.desc,.description,[data-desc]):first-of-type {
  position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 3;
  margin: 0; max-width: min(62ch, 70%);
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.35; color: #fff !important;
  text-shadow: 0 1px 14px rgba(0,0,0,.65);
}

/* Soft bottom gradient to guarantee readability */
#hero::after, .hero-band::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  z-index: 2; pointer-events: none;
}

/* Center the pagination pills (bullets/dots/tablist) */
#hero :is(.hero-bullets,[class*="bullet" i],[class*="dot" i],ul[role="tablist"]),
.hero-band :is(.hero-bullets,[class*="bullet" i],[class*="dot" i],ul[role="tablist"]) {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 14px; z-index: 4; display: flex; gap: 6px; align-items: center;
}

/* Make tiny dots visible regardless of library */
#hero :is([class*="bullet" i],[class*="dot" i]) > * ,
.hero-band :is([class*="bullet" i],[class*="dot" i]) > *  {
  width: 8px; height: 8px; border-radius: 999px; background: #ffffff55;
}
#hero :is([class*="bullet" i],[class*="dot" i]) :is(.active,[aria-current="true"]),
.hero-band :is([class*="bullet" i],[class*="dot" i]) :is(.active,[aria-current="true"]) {
  background: #fff;
}

/* Side arrows at mid-left / mid-right (best-effort selectors) */
#hero :is(button,a)[aria-label*="prev" i],
.hero-band :is(button,a)[aria-label*="prev" i] {
  position: absolute; top: 50%; left: 10px; transform: translateY(-50%);
  z-index: 4; width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.45); color: #fff; border: 1px solid #ffffff33;
}
#hero :is(button,a)[aria-label*="next" i],
.hero-band :is(button,a)[aria-label*="next" i] {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  z-index: 4; width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.45); color: #fff; border: 1px solid #ffffff33;
}
#hero :is(button,a)[aria-label*="prev" i]:hover,
#hero :is(button,a)[aria-label*="next" i]:hover,
.hero-band :is(button,a)[aria-label*="prev" i]:hover,
.hero-band :is(button,a)[aria-label*="next" i]:hover {
  background: rgba(0,0,0,.6);
}

/* Keep nav frosted & sticky (in case it was lost) */
header.topnav { position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  background: color-mix(in oklab, #0b0b0b 80%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Right-align "See all →" links within section headers */
.section :is(.h2,h2) + a,
section :is(.h2,h2) + a {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
}

/* ============ HERO SCOPE FIX ============ */
/* Restrict cinematic positioning to the first hero only */
#hero,
section#hero,
.hero-band:first-of-type {
  position: relative !important;
  border-radius: 14px;
  overflow: hidden;
}

/* Title + description — bottom-left placement only within the hero */
#hero > :is(h1,h2,.title,[data-title]),
.hero-band:first-of-type > :is(h1,h2,.title,[data-title]) {
  position: absolute !important;
  left: 24px; bottom: 58px; z-index: 3;
  margin: 0; padding: 0;
  font-weight: 800;
  line-height: 1.12;
  font-size: clamp(22px, 3vw, 34px);
  color: #fff !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
}

/* Description */
#hero > :is(p,.desc,.description,[data-desc]):first-of-type,
.hero-band:first-of-type > :is(p,.desc,.description,[data-desc]):first-of-type {
  position: absolute !important;
  left: 24px; right: 24px; bottom: 22px; z-index: 3;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.35;
  color: #fff !important;
  text-shadow: 0 1px 14px rgba(0,0,0,.65);
}

/* Gradient only on first hero */
#hero::after,
.hero-band:first-of-type::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Reset all other h2/h3 headers below hero */
main h2, main .section h2, section h2 {
  position: static !important;
  color: #fff;
  font-size: 1.3rem;
  margin: 16px 0 10px 0;
  text-shadow: none;
}

/* ============ HERO SCOPE FIX ============ */
/* Restrict cinematic positioning to the first hero only */
#hero,
section#hero,
.hero-band:first-of-type {
  position: relative !important;
  border-radius: 14px;
  overflow: hidden;
}

/* Title + description — bottom-left placement only within the hero */
#hero > :is(h1,h2,.title,[data-title]),
.hero-band:first-of-type > :is(h1,h2,.title,[data-title]) {
  position: absolute !important;
  left: 24px; bottom: 58px; z-index: 3;
  margin: 0; padding: 0;
  font-weight: 800;
  line-height: 1.12;
  font-size: clamp(22px, 3vw, 34px);
  color: #fff !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
}

/* Description */
#hero > :is(p,.desc,.description,[data-desc]):first-of-type,
.hero-band:first-of-type > :is(p,.desc,.description,[data-desc]):first-of-type {
  position: absolute !important;
  left: 24px; right: 24px; bottom: 22px; z-index: 3;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.35;
  color: #fff !important;
  text-shadow: 0 1px 14px rgba(0,0,0,.65);
}

/* Gradient only on first hero */
#hero::after,
.hero-band:first-of-type::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Reset all other h2/h3 headers below hero */
main h2, main .section h2, section h2 {
  position: static !important;
  color: #fff;
  font-size: 1.3rem;
  margin: 16px 0 10px 0;
  text-shadow: none;
}

/* ====== CINEMATIC REBUILD (scoped, safe to re-append) ================= */
:root{ --hero-max:1280px; --hero-r: 21/9; --hero-pad:24px; }

header.topnav{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  background: color-mix(in oklab, #0b0b0b 85%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.hero.rebuilt{
  position: relative;
  max-width: var(--hero-max);
  margin: 28px auto 18px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  aspect-ratio: var(--hero-r);
  min-height: clamp(260px, 34vw, 560px);
}
.hero.rebuilt .hero__img{
  position:absolute; inset:0;
  background-size: cover;              /* no zoom via JS sets 'contain' when needed */
  background-position: center;
  transition: transform .4s ease;
}
.hero.rebuilt .hero__scrim{
  content:""; position:absolute; inset:auto 0 0 0; height:42%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.68) 100%);
  z-index:1; pointer-events:none;
}
.hero.rebuilt .hero__content{
  position:absolute; left: var(--hero-pad); right: calc(var(--hero-pad) + 220px);
  bottom: calc(var(--hero-pad) - 4px); z-index:2; color:#fff;
}
.hero.rebuilt .hero__title{
  margin:0 0 8px 0; font-weight:800; line-height:1.1;
  font-size: clamp(22px, 3.2vw, 38px);
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
}
.hero.rebuilt .hero__desc{
  margin:0; font-size: clamp(13px, 1.25vw, 16px); line-height:1.35;
  opacity:.95; text-shadow: 0 1px 14px rgba(0,0,0,.6);
}

.hero.rebuilt .hero__arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:none;
  background: rgba(0,0,0,.45); color:#fff; font-size:20px; cursor:pointer;
  display:grid; place-items:center; z-index:2;
  transition: background .2s ease;
}
.hero.rebuilt .hero__arrow:hover{ background: rgba(0,0,0,.65); }
.hero.rebuilt .hero__arrow.is-prev{ left: 10px; }
.hero.rebuilt .hero__arrow.is-next{ right: 10px; }

.hero.rebuilt .hero__pips{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: 12px; display:flex; gap:6px; z-index:2;
}
.hero.rebuilt .hero__pip{
  width:8px; height:8px; border-radius:999px;
  background: rgba(255,255,255,.35);
}
.hero.rebuilt .hero__pip.is-active{ background:#fff; }

.section-head{
  max-width: var(--hero-max); margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 4px; gap: 12px;
}
.section-head .h2{
  margin:18px 0 8px 0; font-size: clamp(18px, 2.2vw, 22px);
}
.section-head .seeall{
  margin-left:auto; color:#cbd5e1; text-decoration:none; white-space:nowrap;
}
.section-head .seeall:hover{ color:#fff; }

.posters-grid{
  max-width: var(--hero-max); margin: 0 auto;
  padding: 0 4px 56px;
  display:grid; gap:24px;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
}
.posters-grid > a, .posters-grid > .poster, .posters-grid li > a{
  display:block; width:100%; max-width:240px; margin:0 auto;
  border-radius:12px; overflow:hidden; background:#111;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  transition:transform .18s ease, box-shadow .24s ease;
}
.posters-grid img{ width:100%; height:auto; display:block; }
.posters-grid > a:hover{ transform: translateY(-2px); box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.35)); }

/* guard: never reposition generic H2s below hero */
main h2{ position: static !important; text-shadow:none !important; }