@media (max-width: 980px) {
  .stn:has(#stnPlay) {
    display: block !important;
    width: 100% !important;
  }
  .stn:has(#stnPlay) .stn-top,
  .stn:has(#stnPlay) .stn-head,
  .stn:has(#stnPlay) .stn-hero,
  .stn:has(#stnPlay) .stn-grid,
  .stn:has(#stnPlay) .stn-main,
  .stn:has(#stnPlay) .stn-info {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
  .stn-phone-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 0 22px !important;
  }
  .stn-phone-hero .cover,
  .stn:has(#stnPlay) > .cover,
  .stn-phone-hero img {
    width: min(78vw, 300px) !important;
    height: min(78vw, 300px) !important;
    max-width: 300px !important;
    margin: 4px auto 14px !important;
    float: none !important;
    border-radius: 6px;
    overflow: hidden;
  }
  .stn-phone-hero .cover img,
  .stn-phone-hero .cover-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .stn-phone-hero h1 {
    text-align: center !important;
    font-size: 26px !important;
    line-height: 1.2 !important;
    margin: 4px 0 8px !important;
    width: 100%;
  }
  .stn-phone-hero .stn-sub {
    text-align: center !important;
    color: #8b95a8 !important;
    font-size: 13px !important;
    width: 100%;
    margin: 0 0 8px !important;
  }
  .stn-phone-hero #stnPlay,
  .stn:has(#stnPlay) #stnPlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(88%, 360px) !important;
    height: 52px !important;
    margin: 16px auto 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #111 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    float: none !important;
  }
  .stn-phone-hero .stn-actions,
  .stn-phone-hero .stn-links {
    display: flex !important;
    justify-content: center !important;
    gap: 28px !important;
    width: 100%;
    margin: 8px 0 0 !important;
    text-align: center;
  }
  /* the title sits close under the cover, with the description straight under it */
  #main .stn-phone-hero .stn-art,
  #main .stn-phone-hero > .cover { margin-bottom: 0 !important; }
  #main .stn-phone-hero h1 { margin-top: 3px !important; margin-bottom: 4px !important; }
  .stn:has(#stnPlay) .stn-phone-hero .stn-desc {
    text-align: center !important;
    margin: 0 0 10px !important;
  }
  .stn-phone-hero { margin-bottom: 22px !important; }
  /* the desktop hero is left empty once its parts move into the phone hero */
  .stn:has(#stnPlay) > .stn-hero:has(> .stn-meta:empty) { display: none !important; }
  /* Similar sounds is one row of three, not the two-up grid of other card rows */
  #similarSounds { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
  /* rest of the page stays left — description, tags, tracks */
  .stn:has(#stnPlay) .stn-desc,
  .stn:has(#stnPlay) .stn-tags,
  .stn:has(#stnPlay) .stn-tracks,
  .stn:has(#stnPlay) p,
  .stn:has(#stnPlay) h2,
  .stn:has(#stnPlay) ul,
  .stn:has(#stnPlay) ol {
    text-align: left !important;
    width: 100% !important;
  }
  .stn:has(#stnPlay) .track .cover,
  .stn:has(#stnPlay) li .cover,
  .stn:has(#stnPlay) .song .cover {
    width: 44px !important;
    height: 44px !important;
    margin: 0 10px 0 0 !important;
  }
}