
/* October 2026 – image-fit and hero CTA refinements.
   Keep V3 unchanged outside these targeted corrections. */
/* The scroll story displays the *entire* original painting and full print sheet.
   Shrink the sticky frame so it never extends off the bottom of a short browser. */
@media (min-width:651px){
  .hybrid-story .story-visual {
    height: min(62svh, 580px, calc(100svh - 165px)) !important;
    min-height: 0 !important;
    top: clamp(86px, 12svh, 125px) !important;
    overflow: hidden;
  }
  .hybrid-story .story-photostack {
    position:absolute;
    inset:clamp(28px,3vw,48px) clamp(28px,4vw,66px) clamp(45px,4.5vw,66px) !important;
    min-width:0;
    min-height:0;
  }
  .hybrid-story .story-scene {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 !important;
    min-width:0;
    min-height:0;
  }
  .hybrid-story .story-scene img {
    display:block;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    min-width:0;
    min-height:0;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
  }
}
/* Applies to stacked artwork for mobile too; preserve the full sheet/painting. */
.story-mobile-art{overflow:hidden}
.story-mobile-art img{width:100%;height:100%;object-fit:contain!important;object-position:center;max-width:100%;max-height:100%}

/* Strong action button, visibly distinct from the passive down-page cue. */
.cinema-hero .cinema-link{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(20px,2.4vw,46px);
  padding:15px 18px;
  min-height:49px;
  color:#fffaf5;
  background:#702c3e;
  border:1px solid #702c3e;
  font-weight:700;
  font-size:11px;
  letter-spacing:.13em;
  text-shadow:none;
  box-shadow:0 3px 0 #2b202214;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.cinema-hero .cinema-link:hover,.cinema-hero .cinema-link:focus-visible{
  background:#441d2a;border-color:#441d2a;transform:translateY(-2px);gap:clamp(20px,2.4vw,46px);
}
.cinema-hero .cinema-link span{font-size:17px;line-height:1;flex-shrink:0}
/* This is an information cue, not a second action. */
.cinema-hero .cinema-scroll{
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:3px;
  text-align:center;
  min-width:75px;
  color:#fcf7ee;
  text-shadow:0 1px 7px #1d1717de;
  pointer-events:none;
  font-size:9px;
  line-height:1.35;
  letter-spacing:.12em;
}
.cinema-hero .cinema-scroll span{font-size:25px;line-height:1.15}
/* Prevent the final two letters of the enormous hero wordmark from
   lingering in the artwork view once the heading has scrolled past. */
.cinema-hero.is-past-title .cinema-copy h1{visibility:hidden}
@media(max-width:650px){
  .cinema-hero .cinema-link{padding:13px 15px;font-size:10px;min-height:46px}
  .cinema-hero .cinema-scroll{bottom:15px;right:var(--gutter);left:auto;min-width:60px;font-size:8px}
  html[lang=ar] .cinema-hero .cinema-scroll{left:var(--gutter);right:auto}
}
@media(prefers-reduced-motion:reduce){.cinema-hero .cinema-link{transition:none}}
