/* r28 · mobile layout pass (phones only). Every rule sits inside the max-width: 760px block, so desktop is untouched. */
@media (max-width: 760px) {

  /* hero card: the time/stage row stopped under the spinning disc on the right rail; end it before the rail */
  .h11-ctime { width: auto; right: calc(76 * var(--u)); }

  /* hero card: the artist name was 44u (about 26px); bigger, with the chip lifted so the two never touch */
  .h11-card:not(.two) .h11-chip { top: calc(522 * var(--u)); }
  .h11-cname:not(.two) { top: calc(560 * var(--u)); font-size: calc(58 * var(--u)); letter-spacing: calc(-1.8 * var(--u)); max-width: calc(330 * var(--u)); }
  .h11-card.two .h11-chip { top: calc(486 * var(--u)); }
  .h11-cname.two { top: calc(522 * var(--u)); font-size: calc(52 * var(--u)); letter-spacing: calc(-1.5 * var(--u)); max-width: calc(330 * var(--u)); }

  /* island: the phone was 417px wide in a 390px screen and bled off both edges; fit it inside the page gutters */
  .di { --v: calc((100vw - 2 * var(--gut)) / 417.3); }
  /* island: keep the expanded island's small text readable at the smaller scale */
  .di-l.x .sub { font-size: max(12px, calc(12.5 * var(--v))); }
  .di-l.x .num small { font-size: max(12px, calc(12 * var(--v))); }
  .di-l.x .btns span { font-size: max(12px, calc(13 * var(--v))); }

  /* integrations: even the optical size of the logos (dense solid squares smaller, thin or wide marks larger) */
  .korb__item img { width: 48%; height: 48%; }
  .korb__item img[src*="apple-music"], .korb__item img[src*="google-calendar"] { width: 38%; height: 38%; }
  .korb__item img[src*="spotify"], .korb__item img[src*="eventbrite"], .korb__item img[src*="google-sheets"] { width: 44%; height: 44%; }
  .korb__item img[src*="youtube"], .korb__item img[src*="gmail"], .korb__item img[src*="tidal"], .korb__item img[src*="stripe"] { width: 54%; height: 54%; }
  .korb__item img[src*="tiktok"], .korb__item img[src*="whatsapp"], .korb__item img[src*="mailchimp"], .korb__item img[src*="hubspot"], .korb__item img[src*="microsoft-teams"] { width: 52%; height: 52%; }

  /* FAQ: the tab row ran off the right edge with a half-cut chip; let it wrap so every tab is visible */
  .tabs { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .tabs button { min-height: 40px; }

  /* text under 12px outside the phone mockups */
  #sponsors th, #sponsors td, #sponsors figcaption { font-size: 12px; }
  .cap, .st-k, .kjr__when, .kp-only, #vs .l, #vs .r { font-size: 12px; }

  /* tap targets: grow the hit area without moving the visual */
  .mq-btn, .st-pause, .textlink, #fStep2, .h24-more, footer a, footer .textlink { position: relative; }
  .mq-btn::before, .st-pause::before, .textlink::before, #fStep2::before, .h24-more::before, footer a::before { content: ""; position: absolute; inset: -8px -6px; }
  .mq-btn::before, .st-pause::before { inset: -6px; }
}

/* all widths: the time/stage row ends before the spinning disc on the right rail (it overlapped by ~13px on desktop too) */
.h11-ctime { width: auto; right: calc(76 * var(--u)); }

/* the 13:30 map on phones: Main Stage's chip sits below its pin, so it no longer runs under Forest Stage's (375 px, L2-1168) */
@media (max-width: 700px) { .kjr__pin[data-v-m="below"] .kjr__chip { bottom: auto; top: 14px; } }