/* v9.37: consistent soundtrack rows, including an intentionally blank artist. */

.sound-grid .track{justify-content:flex-start;gap:16px;min-width:0}

.sound-grid .track>.track-art,.sound-grid .track.serenade-ready>.v81-media,.sound-grid .track.serenade-ready>.serenade-video{margin:0 0 8px;flex-shrink:0}

.sound-grid .track>span{display:block;line-height:1.5;margin:0}

.sound-grid .track>h3{line-height:1.2;min-height:2.4em;margin:0}

.sound-grid .track>p{margin:0;min-height:1.5em}

.sound-grid .track>audio{margin-top:auto;flex-shrink:0}

.home-voyage-map{margin:16px 0 0;width:100%;box-sizing:border-box}

/* v9.44: phone-sized hero controls. Screen space and touch input, not user-agent sniffing.
   Portrait phones / narrow windows: <=600px. Touch landscape phones: <=960 x 600px.
   Larger tablet and desktop views retain their existing layout. */
@media (max-width:600px), (max-width:960px) and (max-height:600px) and (pointer:coarse) {
  .v4-hero {
    height:auto;
    min-height:440px;
    display:flex;
    flex-direction:column;
    gap:20px;
    padding:54px 7% 22px;
  }
  .v4-hero .hero-copy {
    position:relative;
    top:auto;
    left:auto;
    max-width:100%;
    min-width:0;
  }
  .v4-hero .hero-bottom {
    position:relative;
    inset:auto;
    width:100%;
    margin-top:auto;
    flex-wrap:wrap;
    gap:12px;
  }
  /* Zoom changes layout size as well as painted size: no invisible full-size overlap. */
  .v4-hero .slide-dots {zoom:.6;flex-shrink:0}
  .v4-hero .slide-dots button {position:relative}
  /* Preserve at least 24px of touch height around the smaller visible selectors. */
  .v4-hero .slide-dots button::after {content:"";position:absolute;inset:-4px 0}
  .v4-hero .hero-bottom>div:last-child {
    zoom:.8;
    margin-left:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:6px;
    max-width:100%;
  }
  .v4-hero .hero-bottom>div:last-child button {white-space:nowrap}
  .v4-hero.v81-media-expanded {height:auto!important;min-height:0;overflow:auto}
}