/* Looking Around ---------------------------------------------------------
   Story-specific fixed scroll edit.

   The generic gallery stylesheet continues to provide the site header,
   typography, lightbox, return link, and overall colour system.
   This file changes only the story's survey/scroll experience.
   Footer spacing and bottom page breathing room are inherited from gallery.css
   so this story finishes consistently with the other gallery stories.
--------------------------------------------------------------------------- */

.story09-opening {
  /* Quieter than the existing story prototype: let the sequence arrive sooner. */
  padding-bottom: clamp(52px, 6vw, 82px);
}

.story09-field {
  display: block;
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
}

/* Override the generic grid behaviour while keeping .story-image so the
   existing gallery-story.js lightbox continues to work unchanged. */
.story09-field .story09-image {
  display: block;
  width: var(--w, 66%);
  margin: 0 auto var(--after, 72px);
  padding: 0;
}

.story09-field .story09-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center top;
}


/* The image itself should remain the visual event; don't add a layout cue
   on hover beyond the site's existing small opacity shift. */
.story09-field .story09-image:focus-visible {
  outline-offset: 8px;
}

/* Portrait photographs otherwise become much taller than a browser viewport
   when width alone controls scale. Keep their long dimension near the scale of
   the surrounding landscape photographs so orientation does not create an
   accidental hierarchy. */
@media (min-width: 701px) {
  .story09-field .story09-image--portrait {
    width: min(var(--w, 58%), 55vh);
  }
}

@media (max-width: 700px) {
  .story09-opening {
    padding-bottom: 46px;
  }

  .story09-field .story09-image {
    width: var(--wm, 90%);
    margin-left: auto;
    margin-right: auto;
    /* Preserve tight relationships but soften desktop-sized pauses on phones. */
    margin-bottom: min(var(--after, 54px), 22vw);
  }

}