/* Responsive overrides — media queries cannot live in inline styles, so the
   breakpoints that reflow the inline-styled sections live here. Reference
   viewports: iPhone 17 Pro (402×874 logical, ~19.5:9) and Pixel 10
   (412×916, ~20:9); desktop is authored at 16:9. */

html { -webkit-text-size-adjust: 100%; }
img, video, iframe { max-width: 100%; }

/* Tall-and-narrow phones: use small-viewport units so 100vh heroes don't
   overshoot under the browser chrome. */
@media (max-width: 1024px) {
  section[data-screen-label] {
    padding-left: 6vw !important;
    padding-right: 6vw !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 44px !important;
  }
  section[data-screen-label] > div[style*="grid-template-columns"],
  section[data-screen-label] > div > div[style*="grid-template-columns"],
  section[data-screen-label] > dl[style*="grid-template-columns"],
  section[data-screen-label] > form,
  section[data-screen-label] form > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  section[data-screen-label] > div[style*="border-left"] {
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
  }
}

@media (max-width: 860px) {
  /* Alternating About journey blocks stack full-width and left-align */
  section[data-screen-label="Journey"] > div {
    max-width: none !important;
    align-self: stretch !important;
    text-align: left !important;
  }
  /* Nav stays usable: the anchors are nav's own children, so nav scrolls */
  header:has(nav) { display: block !important; }
  nav {
    padding-left: 18px !important;
    padding-right: 18px !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }
  nav::-webkit-scrollbar { display: none !important; }
  nav a { font-size: 9px !important; white-space: nowrap !important; flex: 0 0 auto !important; }

  /* Track list: the desktop column header has nothing to label once stacked */
  section[data-screen-label="Catalogue"] div[style*="90px"][style*="uppercase"] { display: none !important; }
  section[data-screen-label="Catalogue"] [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) auto !important; }

  section[data-screen-label] {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
    min-height: 0 !important;
  }
  /* Heroes keep their presence but stop overflowing tall phones */
  section[data-screen-label]:first-of-type,
  section[data-screen-label="Hero"],
  section[data-screen-label$="hero"],
  section[data-screen-label="Contact"] {
    padding-top: 148px !important;
    padding-bottom: 88px !important;
    min-height: 92svh !important;
  }

  /* Records, clips, posters, cue rows: one scrollable column */
  section[data-screen-label] div[style*="repeat(auto-fit"],
  section[data-screen-label] div[style*="repeat(auto-fill"],
  section[data-screen-label] div[style*="repeat(3,"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    margin-top: 0 !important;
  }
  /* Cue sheet + track list rows stack into labelled blocks */
  section[data-screen-label="Cue sheet"] div[style*="70px"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  section[data-screen-label="Cue sheet"] div[style*="70px"]:first-child { display: none !important; }

  /* Decorative rings shrink so they read as accents, not blocks; the labelled
     orbit is absolutely positioned into what becomes the copy column on phones,
     so it comes out entirely rather than colliding with the hero text. */
  section[data-screen-label] div[data-parallax] { opacity: .55 !important; }
  section[data-screen-label="Library hero"] > div[aria-hidden][data-parallax] { display: none !important; }

  /* Fixed chrome fits the narrow viewport */
  aside { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; transform: none !important; }
  div[data-wave="live"] { width: calc(100% - 24px) !important; }
  div[data-wave="live"] > i:nth-child(n+19) { display: none !important; }

  /* Big ghost type stays a texture, never a wall */
  section[data-screen-label] span[style*="font-size:13vw"] { font-size: 26vw !important; }
  section[data-screen-label] div[style*="font-size:34vw"] { font-size: 46vw !important; }

  /* Portrait / collage panels get a sane height instead of a viewport slab */
  section[data-screen-label] > div[style*="min-height:640px"],
  section[data-screen-label] > div[style*="min-height:520px"],
  section[data-screen-label] > div[style*="min-height:720px"] {
    min-height: 58svh !important;
  }
  footer { flex-wrap: wrap !important; gap: 10px 18px !important; }
}

@media (max-width: 560px) {
  section[data-screen-label] {
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-top: 82px !important;
    padding-bottom: 82px !important;
    gap: 34px !important;
  }
  section[data-screen-label="Hero"],
  section[data-screen-label$="hero"],
  section[data-screen-label="Contact"] { padding-top: 132px !important; }

  /* Type scale: keep the display voice, lose the overflow */
  section[data-screen-label] h1 { font-size: clamp(42px, 13vw, 62px) !important; }
  section[data-screen-label] h2 { font-size: clamp(30px, 9.5vw, 44px) !important; }
  section[data-screen-label] h3 { font-size: clamp(24px, 7.5vw, 34px) !important; }
  section[data-screen-label] blockquote { font-size: clamp(24px, 7.6vw, 36px) !important; }
  section[data-screen-label] p { font-size: 16px !important; }

  /* Tap targets */
  section[data-screen-label] a[href], section[data-screen-label] button { min-height: 44px !important; }

  /* Two-column key/value lists become stacked pairs */
  section[data-screen-label] div[style*="grid-template-columns:140px"],
  section[data-screen-label] div[style*="grid-template-columns:110px"],
  section[data-screen-label] dl div { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }

  /* Vertical side-rail text would collide on a phone */
  section[data-screen-label] p[style*="writing-mode"] { display: none !important; }

  section[data-screen-label] span[style*="font-size:13vw"] { font-size: 34vw !important; }
}

/* Ultra-wide desktop (21:9 and above): cap the measure so lines stay readable */
@media (min-aspect-ratio: 2/1) and (min-width: 1600px) {
  section[data-screen-label] {
    padding-left: 12vw !important;
    padding-right: 12vw !important;
  }
}