
/* v34: viewport-sized background + paper rendering, stable native scroll. */
html:has(.paper-story), body:has(.paper-story) { overscroll-behavior-y: none; }
.paper-pin {
  overflow: hidden;
  transform: none;
}
.paper-scene-photo img {
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  transform: none; will-change: auto;
}
.paper-background-ready .paper-scene-photo,
.paper-background-ready .paper-wash { visibility: hidden; }
.paper-track > span { width: 100%; transform-origin: left; transform: scaleX(var(--travel)); }

/* v40: one fixed coordinate system for the header and hero. The pinned stage
   no longer relies on oversized sticky-box correction in mobile browsers. */
.paper-scene-page {
  --home-header: 88px;
  padding-top: var(--home-header);
}
.paper-scene-page .site-header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--home-header);
  background: #f5f3ec;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.paper-scene-page .paper-pin {
  top: var(--home-header);
  min-height: 0;
  height: calc(100vh - var(--home-header));
  height: calc(100dvh - var(--home-header));
  width: 100%;
  contain: none;
  transform: none;
}
.paper-scene-page [data-pin-state="fixed"] .paper-pin {
  position: fixed;
  left: 0;
  right: 0;
}
.paper-scene-page [data-pin-state="before"] .paper-pin {
  position: absolute;
  top: 0;
}
.paper-scene-page [data-pin-state="after"] .paper-pin {
  position: absolute;
  top: auto;
  bottom: 0;
}
.paper-scene-page .paper-static .paper-pin {
  position: relative;
  top: 0;
}
/* Keep the stage inexpensive to composite while hands move. */
.paper-scene-page .paper-hand-art img { filter: none; }
.paper-scene-page .paper-scene-photo { background: #b8d7e9; }
@media (max-width: 1240px) {
  .paper-scene-page { --home-header: 72px; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .paper-scene-page .paper-ending { top: 5%; left: 5%; width: 51%; max-width: 51%; text-align: left; transform: translateY(calc((1 - var(--ending)) * 20px)); }
  .paper-scene-page .paper-ending h2 { font-size: clamp(21px, 3.7vw, 30px); }
  .paper-scene-page .paper-ending > p:last-child { font-size: 10px; }
  .paper-scene-page .paper-intro { top: 5%; }
  .paper-scene-page .paper-intro h1 { font-size: 30px; }
}
