.world {
  /* The next backdrop is already pinned underneath the outgoing hero. Keep
     the hero above it until its own bottom edge scrolls out of view. */
  z-index:5;
}
.chapter.pinned-chapter { isolation:isolate; }
.pinned-chapter > .scene-backdrop {
  position:sticky;
  top:0;
  z-index:0;
  height:100svh;
  overflow:hidden;
  transform:translate3d(0,var(--incoming-offset,0px),0);
  will-change:transform;
}
.pinned-chapter > .scene {
  margin-top:-100svh;
  background:transparent;
  z-index:1;
}
.pinned-chapter .scene-content { margin-top:0; }
.pinned-chapter > .paper { z-index:5; }

/* Introduce the first collection while the hero is still leaving the screen,
   rather than revealing an empty photograph for most of a viewport first. */
#photography .scene-opening {
  justify-content:flex-start;
  padding-top:24svh;
}

@media (max-width:760px), (hover:none) and (pointer:coarse) {
  /* Cover the expanded screen as browser chrome retracts, without resizing the
     sticky layer and shifting the document throughout the gesture. */
  .pinned-chapter > .scene-backdrop { height:100lvh; }
  .pinned-chapter > .scene { margin-top:-100lvh; }
  /* Let the compositor pin the photograph itself. Counter-translating sticky
     layers in a scroll handler exposes the page underneath during fast swipes. */
  .pinned-chapter > .scene-backdrop { transform:none; will-change:auto; }
  .pinned-chapter .scene-image, .world-art { will-change:auto; }
  .scene-photography .scene-image, .scene-music .scene-image { filter:none; }
  html, body { overscroll-behavior-y:none; }
}