/* One shared mobile layout, applied after the desktop design. */
@media (max-width: 760px) {
  :root { --mobile-gutter: clamp(20px, 6vw, 28px); }
  html { scroll-padding-top: 80px; }
  .header, .mobile-nav, .hero, .genre-strip, .section, .vinyl-section,
  .demo-band, .footer, .page-intro, .detail-section, .artist-heading {
    padding-inline: var(--mobile-gutter);
  }
  .hero > *, .section > *, .vinyl-section > *, .artist-heading > *,
  .detail-section > *, .artist-card, .artist-card a, .search-field > *,
  .partner, .footer-links > * { min-width: 0; }
  .header { height: 72px; gap: 20px; }
  .brand { flex: 0 0 125px; }
  .menu-toggle { padding: 0; min-width: 70px; justify-content: flex-end; }
  .menu-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
  .mobile-nav a { min-height: 44px; padding-block: 10px; }
  .button, .button.small, .icon-button, .play-button { min-height: 44px; }
  .button, .button.small { font-size: .75rem; line-height: 1.4; }
  .icon-button, .play-button { width: 44px; height: 44px; flex-shrink: 0; }
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: 36px 44px; gap: 36px; }
  .hero h1 { font-size: clamp(2.45rem, 11vw, 3.1rem); }
  .hero-copy, .hero-description, .preorder-list { width: 100%; max-width: none; }
  .hero .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hero .actions .button { padding: 10px 8px; text-align: center; }
  .preorder-list button.release-feature { max-width: none; display: grid; grid-template-columns: 40px minmax(0, 1fr) 12px; gap: 12px; }
  .preorder-list .release-feature img { width: 40px; height: 40px; object-fit: contain; }
  .preorder-list .release-feature p { line-height: 1.5; }
  .preorder-indicator { margin: 0; text-align: center; }
  .hero-record { width: 100%; max-width: 280px; justify-self: center; }
  .hero-record .hero-visual { width: 100%; height: 270px; }
  .hero-visual .visual-tag { top: 0; right: 0; }
  .hero-visual .visual-hint { bottom: 0; right: 0; left: 0; justify-content: center; gap: 12px; font-size: .65rem; }
  .record-caption { margin-top: 18px; }
  .record-caption p, .record-caption .text-link { font-size: .72rem; }
  .genre-strip .genres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; font-size: .6rem; text-align: center; }
  .genre-strip .genres span + span::before { content: none; }
  .section, .vinyl-section { padding-block: 40px; }
  .page-intro { padding-block: 36px 28px; }
  .page-intro h1 { font-size: clamp(1.9rem, 8.2vw, 2.6rem); line-height: 1.15; }
  .page-intro p:not(.eyebrow) { font-size: .85rem; }
  .section-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 24px; }
  .section-heading h2 { font-size: 1.5rem; line-height: 1.2; }
  .section-heading .text-link { justify-self: start; margin: 0; font-size: .72rem; }
  .section-heading .eyebrow { margin-bottom: 8px; }
  .release-grid, .release-grid.release-index { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .release-card { grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; padding-block: 14px; }
  .release-card .cover-link { width: 52px; align-self: center; }
  .release-meta { gap: 10px; }
  .release-meta h3 { font-size: .76rem; }
  .release-meta p { font-size: .7rem; }
  .metadata { font-size: .65rem; gap: 6px; }
  .vinyl-section { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .vinyl-section h2 { font-size: 1.8rem; margin-bottom: 18px; }
  .vinyl-stack { width: 100%; grid-template-columns: minmax(0, 1fr); }
  .event-section, .event-full { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .event-section .event-image, .event-full .event-image { width: 148px; max-width: 100%; justify-self: center; margin: 0; }
  .event-info h2 { font-size: 1.65rem; line-height: 1.25; }
  .event-info .lineup, .event-info p, .event-info .event-detail { font-size: .78rem; }
  .event-info .event-detail { display: grid; gap: 6px; }
  .event-info .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .event-info .actions .button { text-align: center; padding-inline: 10px; }
  .event-info .actions .button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .lineup-list li { gap: 12px; font-size: .8rem; }
  .lineup-list span { font-size: .7rem; text-align: right; }
  .artist-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .artist-card { border-top: 1px solid var(--line); }
  .artist-card a { display: grid; grid-template-columns: 50px minmax(0, 1fr); grid-template-areas: 'photo name' 'photo info'; column-gap: 14px; row-gap: 2px; min-height: 76px; padding-block: 10px; align-items: center; }
  .artist-card .artist-photo { grid-area: photo; width: 50px; height: 56px; }
  .artist-card h3 { grid-area: name; align-self: end; margin: 0; font-size: .8rem; line-height: 1.4; }
  .artist-card p { grid-area: info; align-self: start; font-size: .68rem; line-height: 1.5; }
  .roster-controls { display: grid; grid-template-columns: 44px 44px minmax(0, 1fr); gap: 10px; margin-top: 22px; }
  .roster-count { grid-column: 1 / -1; margin: 0 0 4px; font-size: .7rem; }
  .roster-controls .button { padding-inline: 8px; font-size: .7rem; }
  .roster-controls [data-expand-roster]:only-of-type { grid-column: 1 / -1; justify-self: start; }
  .artist-heading { grid-template-columns: minmax(0, 1fr); padding-block: 36px; gap: 26px; }
  .artist-heading .portrait { width: 132px; height: 158px; justify-self: center; }
  .artist-heading h1 { font-size: 2rem; }
  .artist-heading p { font-size: .85rem; }
  .artist-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .artist-facts dd { font-size: .8rem; }
  .detail-section { grid-template-columns: minmax(0, 1fr); padding-block: 36px; gap: 28px; }
  .detail-art { width: 176px; max-width: 100%; padding: 0; justify-self: center; }
  .detail-copy h1 { font-size: 1.8rem; }
  .tracklist li { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; font-size: .78rem; }
  .catalog-section, .event-full, .prose, .demo-layout { padding-top: 0; }
  .catalog-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .filter-buttons { width: 100%; }
  .filter-buttons button { min-width: 0; min-height: 44px; flex: 1 1 0; padding: 10px 8px; font-size: .72rem; }
  .search-field { width: 100%; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; }
  .search-field:has(#artist-search) { grid-template-columns: minmax(0, 1fr); }
  .search-field input, .search-field select { width: 100%; min-width: 0; min-height: 44px; font-size: .75rem; padding: 10px; }
  .catalog-count { margin: 0; font-size: .72rem; }
  .store-viewport { height: 310px; }
  .store-navigation { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; }
  .store-navigation .icon-button { width: 44px; height: 44px; }
  .store-navigation .crate-meta h3 { font-size: .9rem; line-height: 1.4; }
  .store-navigation .crate-meta p { font-size: .7rem; }
  .store-navigation .actions { gap: 8px; }
  .store-navigation .button { width: 100%; }
  .crate-help { font-size: .7rem; line-height: 1.6; }
  .contact-layout, .contacts, .label-layout, .demo-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .contact-layout .contact-card + .contact-card { border-top: 1px solid var(--line); padding-top: 28px; }
  .contact-card a, .footer-bottom a, .prose a { overflow-wrap: anywhere; }
  .contact-email { font-size: .85rem; }
  .label-layout .logo-panel { justify-self: center; width: min(100%, 260px); }
  .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .facts strong { font-size: 1.3rem; }
  .facts span { font-size: .65rem; }
  .demo-band { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: normal; align-items: start; gap: 20px; padding-block: 36px; }
  .demo-band h2 { font-size: 1.4rem; line-height: 1.35; }
  .demo-band p { font-size: .8rem; }
  .demo-invite { margin: 0; gap: 14px; align-items: center; }
  .demo-band .demo-invite .button { margin: 0; }
  .footer { padding-block: 36px 24px; }
  .partner-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .partner { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; gap: 12px; text-align: center; font-size: .72rem; }
  .partner-logo { width: 100%; max-width: 160px; height: 60px; }
  .partner > span:last-child { min-height: 60px; width: 100%; }
  .partner > span:last-child .muted { font-size: .65rem; }
  .footer-top { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: normal; align-items: start; gap: 24px; }
  .footer h2 { font-size: 1.65rem; }
  .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; }
  .footer-links div { min-width: 0; }
  .footer-links a { font-size: .76rem; min-height: 34px; display: flex; align-items: center; }
  .footer-bottom { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: normal; gap: 12px; font-size: .7rem; }
  .footer-bottom a { margin: 0; }
  dialog { padding: 22px; }
  .dialog-head h2 { font-size: 1.4rem; }
}
@media (min-width: 480px) and (max-width: 760px) {
  .artist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
}