/* ==========================================================
   Mobile-first layer (loaded last on every page).
   Phones first: no sideways scroll, 16px body text, 44px+ tap
   targets, collapsible menu, full-width audio.
   ========================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: clip; }
img, video, svg, iframe { max-width: 100%; }
:where(img[width][height]) { height: auto; }
audio { max-width: 100%; }

.sb-nav-toggle, .sb-nav-brand { display: none; }

@media (max-width: 760px) {
  body { font-size: 16px; }

  /* ---------- Collapsible menu ---------- */
  html .site-header .navbar,
  html .site-header .navbar-shell {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 60px !important;
    gap: 12px;
  }
  html .site-header { overflow: visible !important; }
  .sb-nav-brand {
    display: inline-flex; align-items: center; min-height: 48px;
    color: #d4a843 !important; font-weight: 800; font-size: 1.05rem;
    letter-spacing: .02em; text-decoration: none;
  }
  .sb-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-width: 48px; min-height: 48px; padding: 0 16px;
    border-radius: 14px; border: 1px solid rgba(212,168,67,.4);
    background: rgba(12,15,26,.9); color: #edf1f7;
    font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .sb-nav-icon { display: inline-flex; flex-direction: column; gap: 4px; }
  .sb-nav-icon span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  html.sb-nav-open .sb-nav-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  html.sb-nav-open .sb-nav-icon span:nth-child(2) { opacity: 0; }
  html.sb-nav-open .sb-nav-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  html .site-header #navLinks { display: none !important; }
  html.sb-nav-open .site-header #navLinks {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: absolute !important;
    top: 100% !important; left: 0 !important; right: 0 !important;
    width: auto !important;
    z-index: 1000 !important;
    gap: 4px !important;
    padding: 8px 14px 14px !important;
    background: rgba(6,8,15,.98) !important;
    border-bottom: 1px solid rgba(212,168,67,.25) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.55) !important;
    overflow: visible !important;
    max-height: none !important;
  }
  html.sb-nav-open .site-header #navLinks a {
    display: flex !important; align-items: center !important;
    width: 100% !important; min-height: 48px !important;
    padding: 0 16px !important; border-radius: 12px !important;
    font-size: 1.05rem !important; white-space: normal !important;
  }

  /* ---------- Body text 16px ----------
     :not(#sb-x) lifts specificity above the older page-level
     !important overrides without touching them. */
  :is(p, li, dd, blockquote, label, input, select, textarea,
      .hero-sub, .book-tagline, .series-tagline, .buy-bar-desc, .panel-message,
      .footer, .footer div, .copy, .lead, .story-chip span, .mkt-banner-text,
      .hero-spotlight-text, .card-desc, .notice, .product-desc, .book-detail-desc,
      .btn, .buy-btn, .chip-btn, .link-pill, .mkt-banner-btn, .book-close-btn):not(#sb-x) {
    font-size: max(16px, 1rem) !important;
    line-height: 1.5;
  }
  :is(li, p) > a:not(.btn):not(.buy-btn):not(#sb-x) { font-size: inherit !important; }
  /* Small UI labels (badges, kickers, pills) stay compact but readable */
  :is(.pill, .book-pill, .series-pill, .card-kicker, .card-meta, .card-free, .card-lock,
      .album-badge, .album-meta, .hero-spotlight-kicker, .hero-kicker, .kicker,
      .book-eyebrow, .series-eyebrow, .buy-bar-label, .time-row span, .track-chapter,
      .ch-num, .ch-locked, small, .eyebrow, .muted, .mkt-banner-label, .site-splash-text,
      .top-bar-title, .price, .product-meta, .track-series, #signupWrap > div > div,
      .hero-proof span, .chapter-trigger span, .sheet-title, #signupForm div):not(#sb-x) {
    font-size: max(13px, .8125rem) !important;
  }

  /* ---------- Tap targets 44px+ ---------- */
  .btn, a.btn, .buy-btn, .chip-btn, .link-pill, .mkt-banner-btn,
  .cta, .button, button, [role="button"]:not(article),
  input[type="submit"], input[type="button"], .speed-btn, .chapter-trigger {
    min-height: 44px;
  }
  .btn, a.btn, .buy-btn, .chip-btn, .link-pill, .mkt-banner-btn, .cta, .button {
    display: inline-flex; align-items: center; justify-content: center;
  }
  .chip-btn.is-hidden { display: none !important; }
  .sheet-close, .mkt-banner-close, .modal-close, #promoBanner button {
    min-width: 44px !important; min-height: 44px !important;
  }
  .footer a, footer a, .footer-links a, .footer li a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select):not(#sb-x) { min-height: 48px !important; }
  .back-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }

  /* ---------- Audio: full width, native controls ---------- */
  audio[controls] { display: block; width: 100% !important; min-height: 44px; }
  .track-audio, .media-actions { width: 100%; }
}

/* Player pages: keep Buy + Play on the first phone screen */
@media (max-width: 760px) and (max-height: 940px) {
  .cover-stage { padding-top: 12px !important; }
  .cover-stage .cover-frame:not(#sb-x) {
    width: min(200px, 48vw) !important;
    height: min(200px, 48vw) !important;
  }
}