/* 45 SOUTH — Page Background V1
 * A film background fades out into the existing page gray.
 * Vimeo players keep their own posters; no fallback picture.
 */
body:has(> .south-page-background) {
    position: relative;
    isolation: isolate;
}

.south-page-background {
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    width: 100%;
    height: min(108vh, 1080px);
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 26%, rgba(0,0,0,.86) 46%, rgba(0,0,0,.38) 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 26%, rgba(0,0,0,.86) 46%, rgba(0,0,0,.38) 74%, transparent 100%);
}
.south-page-background img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    filter: brightness(.54) saturate(.88);
}
.south-page-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.24), rgba(0,0,0,.04) 58%, transparent 100%);
}
@media (max-width: 700px) {
    .south-page-background {
        height: min(82vh, 820px);
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.83) 45%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.83) 45%, transparent 100%);
    }
    .south-page-background img { object-position: center top; }
}


/* Consolidated film background overrides */
/* FILM BACKGROUND — FORCE 60% SCREEN HEIGHT */

html body .south-page-background {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  
  width: 100% !important;
  height: 50svh !important;
  overflow: hidden !important;
}

html body .south-page-background img {
  position: absolute !important;
  inset: 0 !important;
  
  width: 100% !important;
  height: 100% !important;
  
  object-fit: cover !important;
  object-position: center top !important;
}

html body .south-page-background::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 35%,
    rgba(23, 23, 23, 0.5) 70%,
    #171717 100%
  ) !important;
}