/* First-three foreground only. Baseline typography comes from the canonical
   RenewalHome responsive cascade; the 65% film geometry remains untouched. */
#stage[data-opening-revision="true"] :is(#copy-one, #copy-two, #final-vision) {
  --editorial-paper: #e1ddcf;
  --editorial-ink: 0 0 0;
}

/* The approved white lead and single gold phrase keep one typographic scale. */
#stage[data-opening-revision="true"] #copy-one {
  --reel-size: clamp(58px, min(7.4vw, 11.5dvh), 120px);
  --hero-width: min(580px, 38vw);
}
#stage[data-opening-revision="true"] #copy-two {
  --reel-size: clamp(54px, min(6.2vw, 9.2dvh), 98px);
  --hero-width: min(900px, 52vw);
}
#stage[data-opening-revision="true"] #final-vision {
  --reel-size: clamp(38px, min(4.4vw, 7.4dvh), 66px);
  --hero-width: min(740px, 48vw);
}
#stage[data-opening-revision="true"] #copy-one .hero h1 {
  font-size: var(--reel-size);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.07em;
}
#stage[data-opening-revision="true"] #copy-two .hero h2 {
  font-size: var(--reel-size);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.065em;
}
#stage[data-opening-revision="true"] #final-vision .chapter-hero h3 {
  font-size: var(--reel-size);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.055em;
}
#stage[data-opening-revision="true"] :is(#copy-one, #copy-two, #final-vision) :is(.hero-opening, .hero-statement, .hero-accent, .chapter-kicker, .chapter-line, .chapter-mark) {
  line-height: inherit;
}
#stage[data-opening-revision="true"] #copy-one .scene-subtitle {
  max-width: min(750px, 54vw);
  font-size: clamp(22px, 2.8vw, 42px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.045em;
  color: #e7dec7;
  background: none;
  text-shadow: 0 2px 16px rgb(0 0 0 / .7);
}

/* Each page is complete: one whole paragraph and its companion graphic, both
   visible in a single frame. The story input never pages or scrolls this field. */
#stage[data-opening-revision="true"] :is(#copy-two, #final-vision) > [data-opening-content] {
  position: absolute;
  inset: auto auto 112px var(--gutter);
  width: min(500px, 38vw);
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-content: start;
  isolation: isolate;
  overflow: visible;
  overscroll-behavior: auto;
  color: var(--editorial-paper);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: -.015em;
  transform: none;
  pointer-events: auto;
}
#stage[data-opening-revision="true"] #final-vision > [data-opening-content] {
  width: min(600px, 44vw);
  font-size: 16px;
  line-height: 1.9;
}
#stage[data-opening-revision="true"] :is(#copy-two, #final-vision) > [data-opening-content]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -90px -180px -60px -220px;
  pointer-events: none;
  background: radial-gradient(ellipse closest-side at 50% 40%,
    rgb(var(--editorial-ink) / .72) 0%,
    rgb(var(--editorial-ink) / .68) 35%,
    rgb(var(--editorial-ink) / .56) 65%,
    rgb(var(--editorial-ink) / .22) 85%,
    transparent 100%);
}
#stage[data-opening-revision="true"] :is(#copy-two, #final-vision) > [data-opening-content] > .story-unit--copy {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
  text-shadow: 0 1px 6px rgb(0 0 0 / .72);
}
#stage[data-opening-revision="true"] :is(#copy-two, #final-vision) > [data-opening-content] > .story-unit--copy::before,
#stage[data-opening-revision="true"] :is(#copy-two, #final-vision) > [data-opening-content] > .story-unit--copy::after {
  content: none;
}
#stage[data-opening-revision="true"] :is(#copy-two, #final-vision) > [data-opening-content] strong {
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 760px) {
  #stage[data-opening-revision="true"] #copy-one {
    --reel-size: clamp(50px, 14vw, 72px);
    --hero-width: calc(100vw - 48px);
  }
  #stage[data-opening-revision="true"] #copy-two {
    --reel-size: clamp(44px, min(12.5vw, 7.5dvh), 64px);
    --hero-width: calc(100vw - 48px);
  }
  #stage[data-opening-revision="true"] #final-vision {
    --reel-size: clamp(32px, 9vw, 44px);
    --hero-width: calc(100vw - 48px);
  }
  #stage[data-opening-revision="true"] #copy-two .hero h2 {
    line-height: 1.14;
    letter-spacing: -.06em;
  }
  #stage[data-opening-revision="true"] #copy-one .scene-subtitle {
    width: fit-content;
    max-width: calc(100vw - 48px);
    font-size: 22px;
    line-height: 1.4;
  }
  #stage[data-opening-revision="true"] :is(#copy-two, #final-vision) > [data-opening-content] {
    inset: auto 24px 128px 24px;
    width: auto;
    gap: 20px;
    font-size: 14px;
    line-height: 1.7;
  }
  #stage[data-opening-revision="true"] #final-vision > [data-opening-content] {
    font-size: 14px;
    line-height: 1.8;
  }
  #stage[data-opening-revision="true"] :is(#copy-two, #final-vision) > [data-opening-content]::before {
    /* Full-height picture detail needs a local reading exposure, with a wide
       oval falloff into the film instead of a rectangular panel or edge fade. */
    content: "";
    display: block;
    inset: -76px -60px -58px;
    background: radial-gradient(ellipse closest-side at 50% 50%,
      rgb(var(--editorial-ink) / .58) 0% 28%,
      rgb(var(--editorial-ink) / .43) 55%,
      rgb(var(--editorial-ink) / .18) 78%,
      transparent 100%);
  }
}

/* Short mobile landscape uses two reading columns so complete paragraphs and
   graphics share the screen without competing with the hero or adding steps. */
@media (max-width: 760px) and (max-height: 560px) and (orientation: landscape) {
  #stage[data-opening-revision="true"] :is(#copy-one, #copy-two, #final-vision) {
    --hero-left: 24px;
    --hero-right: auto;
    --hero-top: 82px;
    --hero-bottom: auto;
    --hero-transform: none;
    --hero-width: calc(50vw - 56px);
  }
  #stage[data-opening-revision="true"] #copy-one {
    --hero-top: 50%;
    --hero-transform: translateY(-50%);
  }
  #stage[data-opening-revision="true"] #copy-one .scene-subtitle {
    left: calc(50% + 28px);
    right: 24px;
    bottom: 72px;
    width: auto;
    max-width: none;
  }
  #stage[data-opening-revision="true"] :is(#copy-two, #final-vision) > [data-opening-content] {
    inset: 82px 24px auto calc(50% + 28px);
    width: auto;
    gap: 12px;
    line-height: 1.6;
  }
  #stage[data-opening-revision="true"] :is(#copy-two, #final-vision) .opening-graphic-caption {
    margin-bottom: 8px;
  }
  #stage[data-opening-revision="true"] :is(#copy-two, #final-vision) .opening-graphic-step {
    gap: 6px;
  }
}