/* Original-element reading layers. Real scroll travel drives the masthead;
   each opaque V4-paper backing stays with its original moving bar. */
:root { --reading-bar-inset:24px; }
.chapter-heading,
.hero-scene > .chapter-heading {
  padding-block:var(--reading-bar-inset);
  margin:0;
}
.chapter-heading :is(h1,h2) { margin-block:0; }
/* The hero scene is itself a sticky stacking context. Lift its active title
   over incoming body copy, below the next chapter title (3) and masthead (4). */
.hero-scene.has-reading-bar { z-index:2; }
.chapter-heading::after,
.chapter-heading.is-stuck::after,
.headline-bar.is-stuck::after,
.signature-bar::after,
.signature-bar.is-returning::after { content:none; }
.reading-stack-backing {
  position:absolute;
  z-index:-1;
  left:50%;
  width:var(--reading-width,100vw);
  transform:translateX(-50%);
  background:var(--paper);
  pointer-events:none;
}
.chapter-heading > .reading-stack-backing::after {
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  width:min(44rem,calc(100% - 2 * var(--gutter)));
  height:1px;
  transform:translateX(-50%);
  background:var(--rule);
  clip-path:var(--rule-taper-shape);
  -webkit-mask-image:var(--rule-fade);
  mask-image:var(--rule-fade);
}
.reading-bars-flow .signature-bar,
.reading-bars-flow .chapter-heading,
.reading-bars-flow .is-motion-enabled[data-phase="released"] .hero-scene > .chapter-heading {
  position:relative;
  top:auto;
  transform:none;
}
@media(forced-colors:active) {
  .reading-stack-backing {
    background:Canvas;
  }
  .chapter-heading > .reading-stack-backing::after { background:CanvasText; clip-path:none; -webkit-mask-image:none; mask-image:none; }
}