/* =========================================================
   Spellbinding Media — Episode Reader Layout
   Extracted from EpisodeSample.html (2026-07-09), loaded alongside the
   shared /c/style.css (colors, fonts, .icon-menu, .site-logo, footer,
   etc. all come from there — this file is layout-only for the reader).

   Dropped from the sample:
   - .menu-placeholder / .menu-hidden — replaced by the real site menu
     (s/icon_menu.php), which has its own styles in style.css.
   - body padding-top: 42px — was reserved space for that placeholder
     menu bar; the real icon-menu overlays content instead of reserving
     header space, so nothing needs to make room for it.
   - .text-layer / .text-trigger — defined in the sample but never
     actually used by any frame's markup; dead weight, not carried over.

   Changed from the sample:
   - .frame-bg is now a <video> or <img> element instead of a <div>
     with a CSS background-image (background-image can't play video —
     see s/episode_reader.js's file header) — object-fit: cover stands
     in for the old background-size: cover.
   ========================================================= */

/* =========================================================
   Layout
   ========================================================= */
.page-container{
  width: 100%;
  display: flex;
  justify-content: center;
  background: var(--bg); /* navy, matching the rest of the site — was #000 */
}
.content-column{
  position: relative;
  background: var(--bg-elevated); /* slightly lighter navy tint, was #111 */
}
/* Mobile-vertical (9:16-or-slimmer) letterbox bars — see read/episode.php
   for the two fixed divs this targets and the max-aspect-ratio query
   below for where they're actually switched on. Hidden by default so
   they're inert on every other screen shape. */
.reader-letterbox{
  display: none;
}

/* =========================================================
   Portrait — content column occupies the full width of the screen
   ========================================================= */
@media (orientation: portrait){
  .content-column{
    width: 100%;
  }
  .visual-wrapper{
    width: 100vw;
    height: calc(100vw * 4 / 3); /* lock 3:4 */
    position: sticky;
    top: 0;
    overflow: hidden;
  }
}

/* =========================================================
   Mobile vertical — 9:16 or slimmer (taller/narrower than that ratio)
   only. A stricter breakpoint than the portrait query above, which also
   covers less-extreme portrait shapes (e.g. a tablet) where the 3:4
   frame already comes close to filling the screen and top-pinning still
   looks fine. On a true 9:16 phone the frame is noticeably shorter than
   the viewport, so per Rolando's request (2026-07-12) it's pinned
   centered instead of flush to the top.

   This block must stay AFTER the portrait query above — both match on a
   9:16 phone at once, same specificity, so source order decides which
   .visual-wrapper "top" wins; being later here is what makes centering
   actually override the portrait default of top: 0.

   The two .reader-letterbox bars (read/episode.php) are fixed, so
   they're independent of which .story-frame is currently scrolling
   through — they mask the space above/below the centered frame at every
   scroll position, not just while a particular frame is pinned. That's
   what stops adjacent frames from ever showing through that space,
   without needing to touch .story-frame's height or the JS animation
   timing at all.
   ========================================================= */
@media (max-aspect-ratio: 9/16){
  .visual-wrapper{
    top: calc((100vh - (100vw * 4 / 3)) / 2);
    top: calc((100dvh - (100vw * 4 / 3)) / 2); /* accounts for mobile browser chrome; ignored where unsupported, falls back to the 100vh line above */
  }
  .reader-letterbox{
    display: block;
    position: fixed;
    left: 0;
    width: 100vw;
    height: calc((100vh - (100vw * 4 / 3)) / 2);
    height: calc((100dvh - (100vw * 4 / 3)) / 2);
    background: var(--bg-elevated); /* matches .content-column so the bars are invisible as "bars" — just more background */
    z-index: 450; /* above the sticky frame content (auto/0), below .site-logo (500) and .icon-menu (700) in c/style.css */
    pointer-events: none; /* purely visual — never intercepts taps meant for the frame/menu underneath */
  }
  .reader-letterbox--top{
    top: 0;
  }
  .reader-letterbox--bottom{
    bottom: 0;
  }
}

/* =========================================================
   Landscape — content column occupies only enough width to show a
   3:4 frame at full viewport height
   ========================================================= */
@media (orientation: landscape){
  .content-column{
    width: 75vh; /* height:100vh paired with width:75vh = a 3:4 frame */
  }
  .visual-wrapper{
    width: 75vh;
    height: 100vh;
    position: sticky;
    top: 0;
  }
}

/* =========================================================
   Story
   ========================================================= */
.story-frame{
  width: 100%;
}
.visual-wrapper{
  position: sticky;
  left: auto;
  overflow: hidden;
  background: var(--bg); /* was #000 */
}

/* =========================================================
   Visual Layers
   ========================================================= */
.frame-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg); /* shows while the poster/video is still loading — was #000 */
}
.overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
}