/* V14 targeted fixes: prevent the browser chrome's initial expansion/collapse from
   resizing the sticky cinematic stage, and show complete 16:9 editorial photos. */
@media (max-width:720px) {
  /* 100dvh changes mid-gesture in Chrome Android. 100svh is stable while
     the URL bar retracts, keeping the stage's top and frame registered. */
  .home-page .stage {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    top: 0 !important;
  }
  /* Keep the sticky section's full run aligned to the same, non-dynamic unit. */
  .home-page .scroll-story {
    height: calc(8 * 100svh) !important;
    min-height: 0 !important;
  }
}
/* Header is fixed and occupies the top of the viewport: start the image
   beneath it so the upper part of the photo is never hidden. */
.info-page main > .info-hero {
  padding-top: var(--header-height) !important;
}
.info-page .info-hero-media {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  display: block;
  overflow: visible !important;
  line-height: 0;
}
.info-page .info-hero-media img {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto;
  object-fit: contain !important;
  object-position: center center !important;
}
/* A gradient may fade the image into the article but must not hide any of it. */
.info-page .info-hero-media::after {
  background: linear-gradient(to top, #0b1023 0%, rgba(11,16,35,0) 12%);
}
/* The editorial copy follows the complete image, rather than overlapping
   the bottom portion (negative margin was masking image content on desktop). */
.info-page .info-hero-copy {
  margin: 0 auto !important;
  padding-top: clamp(32px,5vw,75px);
}
@media (max-width:800px) {
  .info-page .info-hero-copy {
    width: auto;
    margin: 0 !important;
    padding: 35px 22px 32px !important;
  }
  .info-page .info-hero-media { margin: 0 !important; }
}