/* Intrinsic height prevents HTML dimensions from stretching narrow image boxes.
   Keep each capture's own framing at every screen width. */
.feature-row img,
.feature-contest img,
.scene-wide img,
.scene-pair img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.feature-row img { aspect-ratio: 4 / 3; }
.feature-contest img { aspect-ratio: 16 / 10; }
.scene-wide img,
.scene-pair img { aspect-ratio: 16 / 9; }

@media (max-width: 680px) {
  /* Let the whole frame carry the scene, with readable copy underneath. */
  .hero,
  .hero-inner {
    min-height: 0;
  }

  .hero-still {
    position: relative;
    inset: auto;
    z-index: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }

  .hero-shade,
  .hero-side {
    display: none;
  }

  .hero-inner {
    padding-top: 24px;
    padding-bottom: 28px;
  }

  .hero h1 {
    margin-top: 20px;
  }

  .hero-bottom {
    padding-top: 28px;
  }
}

/* --- The phone first view fits one screen, 2026-09-16b ---
   Measured at 390x844 before this block: the headline started at y=474 and the
   "Steam store" status ended at y=910, past the fold. Nothing is made smaller
   to compensate; the one repeated line (the date in the eyebrow, restated in
   .hero-release just below it) is dropped and the vertical gaps tightened.
   This file loads after style.css, so equal-specificity rules here win. */
@media (max-width: 680px) {
  .site-header { padding-block: 10px; gap: 10px; }
  .wordmark .game-logo { width: 180px; }
  .hero-inner { padding-top: 18px; }
  .eyebrow > span:not(.tag) { display: none; }
  .hero h1 { margin-top: 16px; }
  .hero-copy { margin-top: 16px; }
  .hero-release { margin-top: 18px; }
  .hero-actions .button-lime { margin-top: 18px; }
  .store-action-hero { margin-top: 8px; }
}