/* RafayGen Unfold: phone layout for the story (portrait phones only; desktop and landscape are untouched).
 * The art lives in one fixed window across the top of the screen (the nav floats over it), and the copy
 * sits below it. The window is layered above the copy, so outgoing copy slides under the art instead of
 * printing over it. The window's lower edge melts into the page colour; that edge is a static mask, not a
 * transition. The engine (fibre-world.js) pans the crop to keep each scene's subject centred. */
@media (max-width: 900px) and (orientation: portrait) {
  :root { --rf-art-h: 48svh; --rf-page: 183, 165, 168; }

  /* hero film: same window as the story art, so the hand-off is pixel-identical */
  .rf-film-story .scroll-scrub__poster,
  .rf-film-story .scroll-scrub__video {
    top: 0 !important; left: 0 !important; width: 100% !important; height: var(--rf-art-h) !important;
    aspect-ratio: auto !important; object-fit: cover !important; object-position: 50% 50% !important;
  }
  .rf-film-story .scroll-scrub__stage::after {
    content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
    top: calc(var(--rf-art-h) - 9svh); height: calc(9svh + 1px);
    background: linear-gradient(rgba(var(--rf-page), 0), rgb(var(--rf-page)));
  }
  .rf-scene-nav { top: calc(var(--rf-art-h) - 190px); }
  .rf-studio-label { top: calc(var(--rf-art-h) + 12px); }

  /* story art window, above the chapter copy */
  .rf-morph-world { inset: 0 0 auto 0; height: var(--rf-art-h); z-index: 5; }
  .rf-morph-world::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9svh; pointer-events: none;
    background: linear-gradient(rgba(var(--rf-page), 0), rgb(var(--rf-page)));
  }
  /* while the film is still seeking to a far scene, show that scene's keyframe instead of a wrong frame */
  .rf-morph-world[data-lag=true] .rf-morph-film { visibility: hidden !important; }
  .rf-morph-world[data-lag=true] .rf-morph-still { visibility: visible !important; }

  /* chapter copy: always below the window */
  .rf-scene-top { top: calc(var(--rf-art-h) + 10px); }
  .rf-chapter-copy, .rf-origin .rf-chapter-copy, .rf-process-copy {
    top: calc(var(--rf-art-h) + 40px) !important; bottom: auto !important;
  }
  .rf-chapter-copy h2 { font-size: clamp(28px, 7.6vw, 42px); margin: 8px 0 12px; }
  .rf-chapter-copy > p:not(.rf-kicker) { font-size: 13.5px; line-height: 1.5; }
  .rf-process-copy h2 { font-size: 30px; margin-bottom: 10px; }
  .rf-process-list article { padding: 8px 0; gap: 12px; }
  .rf-contact-headline { top: calc(var(--rf-art-h) + 40px) !important; bottom: auto !important; }
  .rf-contact-headline h2 { font-size: clamp(36px, 9.4vw, 54px); margin: 12px 0 16px; }
  /* continuous flow: each pinned block starts one art-window higher, so the next chapter's copy follows the
     outgoing copy straight up the screen instead of leaving an empty half-screen during the morph */
  .rf-chapter > .rf-scene-pin, .rf-contact-intro { margin-top: calc(-1 * var(--rf-art-h)); }
  .rf-chapter, .rf-contact-chapter { overflow: visible !important; }
  /* the art window is added back to each chapter so every pinned hold keeps its full dwell */
  .rf-chapter { height: calc(145svh + var(--rf-art-h)); }
  .rf-origin { height: calc(125svh + var(--rf-art-h)); }
  .rf-process-chapter { height: calc(150svh + var(--rf-art-h)); }
  /* hero copy hangs from the art window, never under it */
  .rf-hero-copy { top: calc(var(--rf-art-h) + 58px) !important; bottom: auto !important; }
  .rf-chapter > .rf-scene-pin, .rf-contact-intro { background: transparent !important; }
  /* the enquiry form rises over the art like a sheet */
  .rf-contact-panel { z-index: 6; }
}

@media (max-width: 900px) and (orientation: portrait) and (max-height: 740px) {
  :root { --rf-art-h: 42svh; }
  .rf-chapter-copy h2 { font-size: 27px; }
  .rf-chapter-copy .rf-supporting-copy { display: none; }
  .rf-process-list p { display: none; }
  .rf-hero-title { font-size: 32px !important; margin: 10px 0 12px !important; }
  .rf-hero-copy { top: calc(var(--rf-art-h) + 50px) !important; }
}

@media (max-width: 900px) and (orientation: portrait) and (max-height: 820px) {
  .rf-process-list p { display: none; }
}