/* scroll-open: the markup of the film-pin (Atlas, the travel agency), moved here from ch-atlas by A. A tall wrapper holds one
   sticky box the height of the screen; the frame sits in its middle; scroll-open.js (TRACKS) carries it up. The other three
   openings (sb-track, dk-track, b2-open) have their own sizes in their chapters' css. No ancestor may clip its overflow. */
.film-pin{position:relative;height:calc(100vh + 70vh);height:calc(100svh + 70svh)}
.film-box{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;padding:72px 0 28px;box-sizing:border-box}
.film-wrap{--g:0;--z:0;width:min(1360px,100vw - 2 * var(--gutter,24px),(100svh - 150px) * 2.33);transform-origin:50% 50%;transform:scale(calc((.8 + .2 * var(--g)) * (1 + var(--z))));will-change:transform}
.film-wrap .cl-frame{border-radius:calc(30px - 14px * var(--g));box-shadow:0 60px 140px -60px rgb(0 0 0/.9),inset 0 0 0 1px rgb(255 255 255/.07)}
@media (max-width:699px){
  .film-pin{height:calc(100svh + 40svh)}
  .film-wrap{width:calc(100vw - 2 * var(--gutter,16px))}
}
@media (prefers-reduced-motion:reduce){
  .film-pin{height:auto}
  .film-box{position:relative;height:auto;padding:32px 0}
  .film-wrap{transform:none}
}