html, body, body.dark-mode { background: #000; }
.brand-text { text-decoration: none; }

/* The member dock centres its row when it fits and scrolls from the first member when it does not. */
.members-dock-row { justify-content: flex-start; }
.members-dock-row > :first-child { margin-left: auto; }
.members-dock-row > :last-child { margin-right: auto; }

/* Phones: keep the header on one line, pin the now-playing card under it and leave the disc room. */
@media (max-width: 640px) {
  .nav-inner { padding: 8px 12px; gap: 10px; }
  .nav-left-cluster { gap: 10px; }
  .nav-right-cluster { gap: 8px; }
  .brand-dots, .brand-barcode, .btn-font-toggle > span:first-child { display: none; }
  .btn-font-toggle .font-pill-val { white-space: nowrap; }
  .sidecar-dock-tab { display: none; }
  .floating-now-playing { top: 66px; left: 12px; right: 12px; transform: none !important; }
  .floating-meta { flex: 1; min-width: 0; max-width: none; }
  .main-stage.single-screen { padding: 96px 16px 150px; }
}
@media (max-width: 380px) {
  .btn-sidecar-label { display: none; }
  .hero-centerpiece .cd-disc { width: 250px; height: 250px; }
  .hero-centerpiece .cd-label { width: 84px; height: 84px; }
}
@media (pointer: coarse) {
  .btn-sidecar-open, .btn-font-toggle { min-height: 40px; }
  .btn-theme-toggle { width: 40px; height: 40px; }
  .dock-svg-link { width: 30px; height: 30px; }
  .dock-svg-link svg { width: 14px; height: 14px; }
}
/* Phones held sideways are too short for the fixed layout, so the card, disc and dock stack and scroll. */
@media (orientation: landscape) and (max-height: 500px) {
  .main-stage.single-screen { min-height: 0; flex-direction: column; gap: 18px; padding: 18px 16px 32px; }
  .floating-now-playing { position: static; order: -1; transform: none !important; touch-action: auto; }
  .hero-centerpiece .cd-disc { width: 260px; height: 260px; }
  .hero-centerpiece .cd-label { width: 88px; height: 88px; }
  .front-members-dock { position: static; transform: none; max-width: 100%; }
}