.opening-story { --opening-progress: 0; }
.opening-story.is-scrubbing { height: 300svh; }
.opening-story.is-scrubbing .hero {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 100svh;
}
.opening-story.is-scrubbing .opening-content { grid-template-rows: auto minmax(0,1fr) auto auto; }
.opening-story .reel-media video.has-frame { opacity: 1; }
.opening-story .reel-media::after {
  background: linear-gradient(90deg,#100e0cda 0%,#100e0c94 37%,#100e0c15 84%),
              linear-gradient(0deg,#0c0b0af6,transparent 47%,#100f0c5b);
}
.opening-story.is-scrubbing .opening-copy {
  transform: translateY(calc(var(--opening-progress) * -20px));
}
.opening-story.is-scrubbing .opening-main { padding-block: clamp(18px,5svh,49px) clamp(14px,4svh,37px); }
.opening-chapter-label {
  display: none;
  align-self: end;
  justify-self: start;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 6px 13px 6px 7px;
  color: #f9e8c6;
  background: #15120ee0;
  border-left: 1px solid #ecd6a0ab;
}
.opening-story.is-scrubbing .opening-chapter-label { display: flex; }
.opening-chapter-number { display: inline-grid; place-items: center; width: 31px; height: 29px; border: 1px solid #f5dfaa80; font: 650 10px var(--mono); }
.opening-chapter-title { font-size: clamp(15px,1.35vw,19px); font-weight: 650; line-height: 1.13; }
.opening-chapter-detail { margin-top: 3px; color: #e4d8c3; font-size: 12px; line-height: 1.2; }
.opening-scroll-cue { display: none; gap: 8px; align-items: center; }
.opening-story.is-scrubbing .opening-scroll-cue { display: flex; }
.opening-scroll-cue>span { font-size: 18px; color: var(--gold); }
.opening-scroll-cue strong { display: block; font-size: 12px; line-height: 1.2; }
.opening-scroll-cue small { font-size: 10px; color: #e0d2b8; }
.opening-reel-track { display: grid; grid-template-columns: auto 1fr; gap: 13px; width: min(45%,480px); align-items: center; }
.opening-chapters { display: flex; gap: 4px; }
.opening-chapters button { color: #ead9b9; border: 1px solid #e8cf9669; background: #14120eae; padding: 3px 7px; min-height: 29px; font: 650 10px var(--mono); }
.opening-chapters button:hover { border-color: var(--gold); }
.opening-chapters button[aria-pressed=true] { background: var(--gold); border-color: var(--gold); color: #16130e; }
.opening-reel-track .opening-timeline { width: 100%; }
.opening-reel-track .opening-timeline div, .opening-reel-track .opening-timeline i { height: 2px; }
.opening-footer .reel-control[aria-pressed=true] { border-color: #edd4a391; }
.opening-footer .reel-control[aria-pressed=true]::before { content: "●"; color: var(--gold); margin-right: 5px; font-size: 8px; }
.opening-story:not(.is-scrubbing) .opening-footer { justify-content: end; }
@media(max-width:640px) {
  .opening-story.is-scrubbing .opening-main { align-content: end; gap: 12px; }
  .opening-story.is-scrubbing .opening-copy { transform: none; }
  .opening-chapter-label { margin-bottom: 7px; }
  .opening-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 10px; }
  .opening-reel-track { grid-column: 1/-1; grid-row: 2; width: 100%; gap: 7px; }
  .opening-scroll-cue strong { font-size: 11px; }
  .opening-scroll-cue small { font-size: 9px; }
  .opening-chapters button { min-height: 25px; }
  .opening-footer .reel-control { grid-column: 2; grid-row: 1; justify-self: end; }
}
@media(max-height:650px) and (max-width:640px) {
  .opening-story.is-scrubbing .opening-content { padding-top: 103px; }
  .opening-story.is-scrubbing h1 { font-size: clamp(33px,8vw,44px); }
  .opening-story.is-scrubbing .opening-copy>p { margin-top: 7px; font-size: 14px; }
  .opening-story.is-scrubbing .opening-main { padding-block: 8px; }
  .opening-story.is-scrubbing .opening-slate { padding-block: 5px; }
  .opening-chapter-detail { font-size: 11px; }
}