:root { --stage-height: 100svh; }
.passage { position: relative; }
.stage {
  position: relative;
  padding: 110px var(--edge) 90px;
  min-height: var(--stage-height);
  isolation: isolate;
  background: var(--paper);
}
.phrase { margin-bottom: 12px; }
.phrase em { font-weight: 400; }
.afterthought {
  margin: 0 auto 24px;
  text-align: center;
  font-style: italic;
  font-size: clamp(17px, 2.2vw, 25px);
  letter-spacing: -.025em;
  color: #60655e;
}
.opening-prose { margin-block: 0; }
.scroll-mark { display: none; }
.motion .passage { height: calc(var(--stage-height) * 15.6); }
.motion .stage {
  position: sticky;
  top: 0;
  height: var(--stage-height);
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.motion .opening-pair { display: contents; }
.motion .phrase {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: max-content;
  margin: 0;
  font-size: clamp(48px, 7.2vw, 107px);
  line-height: 1.12;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 28px #eeede798;
}
.motion .afterthought {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: max-content;
  margin: 0;
  transform: translate(-50%, 62px);
  opacity: 0;
}
.motion .opening-prose {
  position: absolute;
  z-index: 4;
  left: var(--edge);
  right: var(--edge);
  bottom: 5%;
  font-size: clamp(17px, 2vw, min(23px, 2.6svh));
  opacity: 0;
  visibility: hidden;
}
.motion .print {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  opacity: 0;
  will-change: transform, opacity;
}
.motion .print-image { overflow: visible; transform-origin: center; will-change: transform; }
.motion .print img { width: 100%; height: auto; max-height: none; }
.motion .daylight { width: min(37%, 510px, calc(var(--stage-height) * .85)); }
.motion .departure { width: min(25%, 330px, calc(var(--stage-height) * .48)); }
.motion .print .scene-caption {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  width: var(--caption-width);
  max-width: none;
  margin: 0;
  transform: translateX(-50%);
  font-size: clamp(17px, 1.8vw, 21px);
  opacity: 0;
  visibility: hidden;
}
.motion .scroll-mark {
  display: block;
  position: absolute;
  z-index: 6;
  bottom: 27px;
  left: 50%;
  height: 42px;
  width: 1px;
  background: linear-gradient(transparent, #858b80);
}
.scroll-mark::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -2px;
  width: 5px;
  height: 5px;
  border-right: 1px solid #858b80;
  border-bottom: 1px solid #858b80;
  transform: rotate(45deg);
}
@media (max-width: 620px) {
  .motion .phrase { font-size: clamp(40px, 11.4vw, 70px); }
  .motion .daylight { width: min(70%, 340px, calc(var(--stage-height) * .47)); }
  .motion .departure { width: min(42%, 205px, calc(var(--stage-height) * .25)); }
  .motion .afterthought { transform: translate(-50%, 41px); }
  .motion .opening-prose { bottom: 6%; font-size: 17px; }
}