/* Keep the outer reading surface independent of asynchronously loaded media.
   Portrait/landscape still change the INSIDE layout, never the scene insets.
   This file must follow style.css. No transforms on media: native aspect ratios
   and video controls are preserved. */
@media (min-width:761px) {
  body,body.portrait-media { --story-width:min(680px,56vw); --story-space:calc(var(--story-width) + 36px); }
  .story-dialog,body.portrait-media .story-dialog { width:var(--story-width); }
  #story-glass { transition:opacity .28s; }
}
@media (max-width:760px) {
  body,body.portrait-media { --story-sheet:52dvh; }
  .story-dialog,body.portrait-media .story-dialog { height:var(--story-sheet);max-height:var(--story-sheet); }
  #story-glass { height:var(--story-sheet);transition:opacity .28s; }
}
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait) {
  body,body.portrait-media { --story-sheet:62dvh; }
  .story-dialog,body.portrait-media .story-dialog { width:calc(100% - 24px);height:calc(var(--story-sheet) - 24px);max-height:calc(var(--story-sheet) - 24px); }
  #story-glass { width:100%;height:var(--story-sheet);transition:opacity .28s; }
}
.story-dialog .story-image img,.story-dialog .story-image video { object-fit:contain; }
@media (prefers-reduced-motion:reduce) { #story-glass { transition:none; } }