/* Shared filmstrip layout for the three independent image collections. */
/* A centered diptych, with the same content width as the sections below. */
.hero.paired-hero,.scroll-cinema .hero.paired-hero { height: auto; min-height: 0; padding: 0; }
.paired-hero .hero-sticky,.scroll-cinema .paired-hero .hero-sticky { position: relative; height: auto; min-height: 0; padding: 96px 0 0; overflow: visible; }
.paired-hero .hero-sticky > .wrap { position: relative; height: auto; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.paired-hero .hero-grid,.scroll-cinema .paired-hero .hero-grid { position: relative; display: flex; flex-direction: column; gap: 28px; height: auto; min-height: 0; }
.paired-hero .hero-copy,.scroll-cinema .paired-hero .hero-copy { position: static; order: 2; width: 100%; max-width: none; padding: 0; transform: none; opacity: 1; }
.paired-hero .hero-actions { justify-content: center; }
.paired-hero .hero-photo-pair,.scroll-cinema .paired-hero .hero-photo-pair { position: static; inset: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: clamp(10px,2vw,28px); width: min(100%,1000px); height: auto; margin: 0 auto; border: 0; transform: none; animation: none; }
.paired-hero .hero-photo-pair img,.scroll-cinema .paired-hero .hero-photo-pair img { position: static; display: block; width: 100%; height: auto; max-height: 68vh; object-fit: contain; transform: none; filter: none; }
.paired-hero .hero-photo-pair img:first-child,.scroll-cinema .paired-hero .hero-photo-pair img:first-child { filter: brightness(1.15) contrast(1.06) saturate(1.18); }
.paired-hero .hero-bottom,.scroll-cinema .paired-hero .hero-bottom { position: static; margin-top: 28px; padding: 22px 0; opacity: 1; }
@media(max-width:560px) {
  .paired-hero .hero-sticky,.scroll-cinema .paired-hero .hero-sticky { padding-top: 88px; }
  .paired-hero .hero-grid { gap: 24px; }
  .paired-hero .hero-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .paired-hero .hero-actions .btn { justify-content: space-between; }
}
.hero-actions { flex-wrap: wrap; gap: 12px; }
[data-viewer] .carousel-top { flex-wrap: wrap; }
[data-viewer] .carousel-track { min-width: 0; }
.gallery-empty { width: 100%; padding: 60px 24px; margin: 0; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font: 12px/1.8 var(--mono); text-align: center; }
.flow-viewer [data-gallery-src] { display: flex; padding: 28px 28px 34px; gap: 22px; scroll-snap-type: none; scroll-behavior: auto; scroll-padding: 28px; border: 0; background: none; border-radius: 0; overflow-x: auto; align-items: center; scrollbar-width: none; cursor: grab; mask-image: linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent); }
.flow-viewer [data-gallery-src]::-webkit-scrollbar { display: none; }
.flow-viewer [data-gallery-src] figure,.flow-viewer [data-gallery-src] figure:nth-child(3n + 2) { position: relative; flex: 0 0 auto; width: calc(var(--film-height)*var(--photo-ratio,.75)); height: var(--film-height); margin: 0; border: 0; background: transparent; box-shadow: none; opacity: .8; transform: none; transition: opacity .5s; overflow: visible; cursor: zoom-in; }
.flow-viewer [data-gallery-src] figure.is-current,.flow-viewer [data-gallery-src] figure:hover { opacity: 1; }
.flow-viewer [data-gallery-src] img,.flow-viewer [data-gallery-src] figure:hover img { height: 100%; width: 100%; object-fit: contain; object-position: center; border-radius: 12px; box-shadow: 0 14px 28px -18px #000b; transform: none; filter: none; }
.flow-viewer [data-gallery-src] .flow-number { display: block; padding: 0; border: 0; background: none; line-height: 1.4; height: auto; }
.flow-viewer [data-gallery-src].dragging { cursor: grabbing; user-select: none; }
.flow-viewer [data-gallery-src].dragging * { cursor: grabbing; pointer-events: none; }
[data-gallery-src] figure:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
.flow-viewer [data-gallery-src] figure,
.flow-viewer [data-gallery-src] figure.is-current,
.flow-viewer #photos-gallery figure,
.flow-viewer #photos-gallery figure.is-current { cursor: grab; }
.flow-viewer [data-gallery-src] figure::after,
.flow-viewer [data-gallery-src] figcaption::after { content: none; }
@media(max-width:560px) {
  .flow-viewer [data-gallery-src] { padding-inline: 10px; gap: 14px; }
  .flow-viewer [data-gallery-src] img { max-height: none; }
  .gallery-empty { padding: 40px 16px; }
}