.series-hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  object-fit: cover;
  object-position: 45% center;
  filter: saturate(.85) brightness(.91);
  opacity: 0;
  transition: opacity .7s ease;
}
.series-intro.film-visible .series-hero-film { opacity: 1; }
.series-intro.film-visible .series-shade {
  background: linear-gradient(90deg, transparent 23%, #070c1226 43%, #070c12bd 72%, #070c12e0),
              linear-gradient(0deg, #090e12 0%, transparent 28%, transparent 78%, #090e1280);
}
.reduced .series-hero-film { display: none; }

.scene-film-link {
  display: block;
  min-height: 38px;
  margin: .45rem 0;
  padding: .4rem 0;
  text-align: left;
  background: none;
  border: 0;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .24em;
  font-size: .85rem;
}
.film-dialog { width: min(900px, calc(100% - 24px)); }

.book-film-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #090e12;
}

.series-edge-book .book-entrance {
  margin: 0;
  min-height: 0;
  padding: clamp(48px, 8vh, 96px) 6vw clamp(28px, 4vw, 58px);
}
.series-edge-book .book-entrance .series-copy {
  margin: 0;
  padding: 0;
  width: min(100%, 620px);
}
.series-edge-book .book-entrance .series-copy h1 {
  font-size: clamp(56px, 7vw, 112px);
  margin-block-end: .22em;
}
.series-edge-book .book-entrance .series-copy > p:not(.series-kicker) {
  margin-block-end: 16px;
}
.edge-book-actions { padding: 0 6vw clamp(25px, 5vw, 55px); }
.edge-book-actions > p { max-width: 460px; }
.series-edge-book .book-entrance .series-photo { object-position: 48% 58%; }
.series-edge-book .book-entrance .series-shade {
  background: linear-gradient(90deg, #070e15e8, #070e1599 56%, #070e1538),
              linear-gradient(0deg, #090e12, transparent 66%);
}
.ceti-book-entrance .gallery-heading.book-entrance {
  display: flex;
  min-height: 0;
  align-items: end;
  margin-bottom: 0;
  padding-block: clamp(48px, 8vw, 110px) clamp(42px, 6vw, 90px);
}
.ceti-book-entrance .book-entrance h1 { margin-block-end: .22em; }
.ceti-book-entrance .book-entrance p:not(.micro) { color: #d1dde2; }
.ceti-book-entrance .book-entrance .gallery-total {
  border: 0;
  padding: 0;
  margin-top: 20px;
}
.ceti-book-entrance .book-entrance .gallery-total strong {
  font-size: clamp(36px, 4vw, 62px);
}

.book-film-band {
  --scene-width: 1920px;
  position: relative;
  width: 100%;
  margin-inline: auto;
  isolation: isolate;
  overflow: hidden;
  background: #090e12;
}
.ceti-book-entrance .book-film-band {
  width: auto;
  margin-inline: -5vw;
  margin-bottom: clamp(20px, 3vw, 50px);
  background: #0b141a;
}
.book-film-backdrop {
  position: relative;
  width: min(100%, var(--scene-width));
  height: clamp(300px, 56vw, 76svh);
  max-height: 818px;
  overflow: hidden;
  margin: 0 auto;
  mask-image: linear-gradient(0deg, transparent, #000 17%, #000 88%, transparent),
              linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  mask-composite: intersect;
}
.book-film-backdrop img,
.book-film-backdrop video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 42%;
  filter: saturate(.91) brightness(.94);
}
.book-film-backdrop video {
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
}
.book-film-band.film-visible video { opacity: 1; }
.reduced .book-film-band video { display: none; }

@media (max-width: 720px) {
  .series-edge-book .book-entrance { padding: 26px 6vw 22px; }
  .series-edge-book .book-entrance .series-copy h1 {
    font-size: clamp(47px, 12vw, 65px);
  }
  .ceti-book-entrance .gallery-heading.book-entrance {
    padding-block: 35px 24px;
  }
  .ceti-book-entrance .book-entrance h1 {
    font-size: clamp(43px, 11vw, 65px);
  }
  .book-film-backdrop {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    mask-image: linear-gradient(0deg, transparent, #000 12%, #000 88%, transparent);
  }
  .book-film-backdrop img,
  .book-film-backdrop video { object-fit: contain; }
}
@media (max-width: 600px) {
  .ceti-book-entrance .book-film-band { margin-inline: -6vw; }
}
@media (min-width: 2561px) {
  .ceti-book-entrance .book-film-band { margin-inline: -64px; }
}

@media (max-width: 720px) {
  .series-intro.film-visible .series-shade {
    background: linear-gradient(0deg, #090e12 0%, #090e12f5 26%, #090e1299 52%, #090e1218 77%, #090e1270);
  }
  .series-hero-film { object-position: 40% center; }
}
@media (prefers-reduced-motion: reduce) {
  .series-hero-film, .book-film-band video { display: none; transition: none; }
}

/* Keep the source composition on tall screens instead of enlarging a narrow crop. */
@media (max-aspect-ratio: 4/3) {
  .series-hero-film {
    top: clamp(44px, 7svh, 95px);
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    mask-image: linear-gradient(#000 0%, #000 73%, transparent 100%);
  }
  .series-intro.film-visible .series-photo { opacity: 0; }
  .series-intro.film-visible {
    background: radial-gradient(ellipse at 40% 21%, #18242d, #090e12 72%);
  }
}
@media (min-width: 2300px) and (min-aspect-ratio: 4/3) {
  .series-hero-film {
    inset: 50% auto auto 0;
    width: min(68%, 1920px);
    height: auto;
    aspect-ratio: 16 / 9;
    transform: translateY(-50%);
    mask-image: linear-gradient(90deg, #000 66%, transparent 100%);
  }
  .series-intro.film-visible .series-photo { opacity: .18; }
}

.series-edge-book .book-video-hero {
  --hero-frame-height: 100%;
  min-height: clamp(25rem, 67svh, 46rem);
  align-items: end;
  padding-block: clamp(3rem, 8vh, 6rem) clamp(2rem, 5vw, 4.5rem);
}
.series-edge-book .book-video-hero .series-photo,
.series-edge-book .book-video-hero .series-hero-film {
  inset: 0;
  width: 100%;
  height: var(--hero-frame-height);
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 43% center;
  transform: none;
  mask-image: none;
}
.book-video-hero .series-hero-film {
  filter: none;
  transition: opacity .35s ease;
}
.book-video-hero.film-visible .series-hero-film { opacity: 1; }
.series-edge-book .book-video-hero .series-shade {
  background: linear-gradient(0deg, #090e12, #090e12c7 25%, #090e1220 68%),
              linear-gradient(90deg, #090e1278, transparent 67%);
}
@media (max-width: 900px) {
  .world-masthead + #book-navigation:not([hidden]):has(+ main .book-video-hero) {
    padding-top: .75rem;
  }
}
@media (max-width: 720px) {
  .series-edge-book .book-video-hero {
    --hero-frame-height: max(15rem, 75vw);
    min-height: 0;
    padding-block: calc(var(--hero-frame-height) - 6.5rem) 1.5rem;
  }
  .series-edge-book .book-video-hero .series-shade {
    bottom: auto;
    height: var(--hero-frame-height);
    background: linear-gradient(0deg, #090e12, #090e1280 23%, transparent 63%);
  }
}