/* Final layout rhythm and type composition. Loaded after the core styles. */
:root{
  --section-y:clamp(64px,7vw,104px);
  --section-y-compact:clamp(48px,5.3vw,78px);
}

/* Home: let the photography fill the frame and keep the headline composed. */
.cinema-image:first-child,
.cinema-image:nth-child(2){left:0}
.cinema-images:after{
  background:
    linear-gradient(90deg,#080808e8 0%,#080808b8 20%,#08080866 39%,#08080814 62%,transparent 78%),
    linear-gradient(0deg,#080808d9 0%,#0808085c 16%,transparent 44%,#08080824 76%,#0808089e 100%);
}
.cinema-title{
  width:min(59%,1050px);
  padding-top:clamp(92px,9vh,126px);
  padding-bottom:clamp(130px,15vh,180px);
}
.cinema-title>p{margin-bottom:18px}
.cinema-title h1{
  width:max-content;
  max-width:100%;
  font-size:clamp(5.4rem,9vw,10.5rem);
  line-height:.82;
  letter-spacing:-.025em;
  margin-bottom:32px;
}
.cinema-title h1 span,
.cinema-title h1 em{display:block;white-space:nowrap}
.cinema-title h1 em{letter-spacing:-.035em}

/* A consistent beat between content blocks on every route. */
.section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
[data-page=home] #conversations{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.story-gateway{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.section-head{margin-bottom:clamp(28px,3vw,42px)}
.booking-band{margin-bottom:var(--section-y);padding-top:var(--section-y-compact);padding-bottom:var(--section-y-compact)}
.site-footer{padding-top:var(--section-y-compact)}

/* Show and episode pages: eliminate fixed-height gaps while preserving a film frame. */
.screening-intro{height:clamp(520px,62vh,680px);min-height:0}
.screening-copy{padding-top:var(--section-y-compact);padding-bottom:var(--section-y-compact)}
.show-page.section{padding-top:var(--section-y-compact);padding-bottom:var(--section-y)}
.follow-panel{padding-top:var(--section-y-compact);padding-bottom:var(--section-y-compact)}
.episode-room{padding-top:var(--section-y-compact);padding-bottom:var(--section-y-compact)}
.room-heading{padding-top:clamp(40px,5vw,66px);padding-bottom:clamp(28px,3vw,42px)}
.next-conversation{margin-bottom:var(--section-y-compact);padding-top:var(--section-y-compact);padding-bottom:0}

/* Story, biography, merch, and booking pages share the same vertical rhythm. */
.bio-hero,.contact-hero{padding-top:var(--section-y-compact);padding-bottom:var(--section-y)}
.bio-body{padding-top:var(--section-y-compact)}
[data-page=outside] .timeline-intro{
  min-height:0;
  padding-top:var(--section-y-compact);
  padding-bottom:var(--section-y);
}
[data-page=outside] .intro-pair{height:clamp(390px,36vw,500px)}
[data-page=outside] .chapter{padding-top:var(--section-y);padding-bottom:var(--section-y)}
[data-page=outside] .chapter-frame:nth-child(even){margin-top:clamp(70px,8vw,118px)}
.merch-hero{
  min-height:0;
  padding-top:var(--section-y);
  padding-bottom:var(--section-y);
}
.contact-details{margin-top:30px;padding-top:26px}

@media(max-width:1000px){
  .cinema-title{width:66%}
  .cinema-title h1{font-size:clamp(5.2rem,11.2vw,8.3rem)}
}

@media(max-width:760px){
  :root{--section-y:clamp(48px,13vw,62px);--section-y-compact:clamp(38px,10vw,52px)}
  .cinema-images:after{
    background:linear-gradient(0deg,#080808f2 0%,#080808c4 29%,#0808083d 57%,#08080880 100%);
  }
  .cinema-title{
    width:100%;
    padding-top:210px;
    padding-bottom:132px;
    justify-content:flex-end;
  }
  .cinema-title h1{
    width:auto;
    font-size:clamp(4.6rem,20vw,7.2rem);
    line-height:.82;
    margin-bottom:25px;
  }
  .cinema-title h1 span,.cinema-title h1 em{white-space:normal}
  .screening-intro{height:clamp(480px,70svh,570px)}
  [data-page=outside] .intro-pair{height:clamp(330px,96vw,420px)}
  [data-page=outside] .chapter-frame:nth-child(even){margin-top:52px}
  .bio-hero,.contact-hero,.merch-hero{padding-top:var(--section-y-compact);padding-bottom:var(--section-y)}
  .follow-panel{padding-top:var(--section-y-compact);padding-bottom:var(--section-y-compact)}
  .episode-room{padding-top:34px;padding-bottom:var(--section-y-compact)}
}

@media(max-height:700px) and (min-width:761px){
  .cinema-title{padding-top:86px;padding-bottom:108px}
  .cinema-title h1{font-size:clamp(5rem,8.4vw,7.8rem);margin-bottom:26px}
}