/* One readable message per scene, in the browser's normal scroll flow.
   Loaded last to replace the earlier pinned, scroll-scrubbed presentation. */
.scene-chapter,
#wall,#dressing,#wardrobe,#refill-closeup,#entryway,#desk,#material-closeup{
  height:auto;
  min-height:0;
}
.scene-chapter .scene-stage{
  position:relative;
  top:auto;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  height:auto;
  min-height:max(100svh,40rem);
  padding:7rem 8% 6rem;
}
.scene-chapter .scene-content,
#wall .scene-content,#dressing .scene-content{
  position:relative;
  inset:auto;
  grid-column:1/7;
  align-self:center;
  width:auto;
  max-width:none;
  opacity:1;
  transform:none;
  will-change:auto;
}
.scene-chapter.scene-right .scene-content{grid-column:8/-1}
.scene-closeup .scene-stage{padding-inline:12%}
.scene-closeup .scene-content{grid-column:1/8;align-self:end}
.scene-whisper{display:none}
.scene-chapter .scene-image{
  transform:scale(var(--scene-scale,1.035));
  transform-origin:var(--scene-origin,center);
  will-change:auto;
}
#refill-closeup{--scene-scale:1.3;--scene-origin:50% 38%}
.chapter-nav{visibility:hidden}
.chapter-nav.visible{visibility:visible}
@media(max-aspect-ratio:1/1){
  #refill-closeup{--scene-scale:1.035}
  .scene-closeup .scene-stage{padding-inline:8%}
  .scene-closeup .scene-content{grid-column:1/11}
}
@media(max-width:720px){
  .scene-chapter .scene-stage{grid-template-columns:minmax(0,1fr);padding:5rem 7% 7rem}
  .scene-chapter .scene-content,
  .scene-chapter.scene-right .scene-content,
  #wall .scene-content,#dressing .scene-content{
    grid-column:1/-1;
    align-self:end;
  }
}
@media(prefers-reduced-motion:reduce){
  /* Static framing remains the same; there is no image animation. */
  .scene-chapter .scene-image{transform:scale(var(--scene-scale,1.035))!important}
}