/* StreetHeist landing: the phone edit (Nikon, 2026-10-01: "make the phone one a
   little bit simpler, but still good and very clean"). Loaded last. A phone
   keeps the film and every chapter, but drops what cannot fit a 390px column:
   the decorative telemetry in the chapters after the film, the secondary map
   labels, and bright street art directly behind copy. */
@media (max-width: 767px) {
  /* Headings start clear of the nav and the city and currency pill. */
  :root { --b-top: calc(var(--sh-nav-h, 56px) + 62px); --b-bottom: 132px; }

  /* 1. Telemetry after the film is decoration. On a phone it collides with
        buttons and runs off the edge, so the copy keeps the space. */
  .sh-beat > .sh-hud, html body .sh-cbeat .sh-hud { display: none; }

  /* 2. One calm dark layer between the street and the copy of each chapter
        after the film. The street still glows through; text never sits on it. */
  .sh-beat, .sh-demo, .sh-brief {
    background: linear-gradient(180deg, rgb(7 8 10 / 78%) 0, rgb(7 8 10 / 86%) 38%, rgb(7 8 10 / 90%) 100%);
  }

  /* 3. The city and currency pill stays small and out of the way. */
  .sh-hudbar { font-size: 9.5px; letter-spacing: .12em; }
  .sh-hudbar__tele { top: calc(var(--sh-nav-h) + 8px); }
  html.sh-past-film .sh-hudbar__tele { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }

  /* 4. Maps: keep lots, prices and the route; drop the secondary labels. */
  .sh-map__tag.is-quiet, .sh-map__tag.is-glass, .sh-arch__tag, .sh-film__schematic { display: none; }
  .sh-map__tag { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .b-map__labels { display: none; }
  .b-map { opacity: .55; }

  /* 5. Film copy: one readable column above the dock, telemetry to two lines. */
  html.film-live .sh-film .sh-hud__line:not(.is-key):nth-child(n + 3) { display: none; }
  .sh-ch__body { font-size: 15.5px; line-height: 1.45; }

  /* 6. Quiet the background show pieces that crowd a narrow column. */
  .b-ring { opacity: .35; }
  .b-marquee { display: none; }
  .b-tag { position: static; display: inline-flex; margin: 10px 0 0; }

  /* 7. Type and spacing: fewer sizes, more air. */
  .sh-beat h2 { font-size: clamp(26px, 7.4vw, 32px); line-height: 1.04; }
  .sh-beat__lede { font-size: 15px; line-height: 1.5; }
  .b-cta { gap: 10px; margin-top: 18px; }
  .b-cta .sh-btn { min-height: 48px; }

  /* 8. Nothing may widen the page. */
  .sh-beat, .sh-cbeat, .sh-film { max-width: 100vw; overflow-x: clip; }
}

/* Reduced motion keeps the same simplifications without the fades. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .sh-beat, .sh-demo, .sh-brief { background: rgb(7 8 10 / 88%); }
}