.menu-toggle { display: none; }
.music-intro-copy { grid-column: 1; grid-row: 1; }
.music-intro > .music-image--portrait { grid-column: 2; grid-row: 1; }

@media (max-width: 800px), (max-height: 500px) and (pointer: coarse) {
  html { scroll-padding-top: 88px; }
  #origin, #biography, #music, #contact { scroll-margin-top: 0; }
  .site-header {
    top: max(12px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right));
    width: auto; transform: none; grid-template-columns: minmax(0, 1fr) auto;
    gap: 0; padding: 8px 12px; border-radius: 24px;
    max-height: calc(100dvh - 32px - env(safe-area-inset-top)); overflow-y: auto;
  }
  .site-header .header-brand { grid-column: 1; grid-row: 1; width: 44px; min-height: 44px; }
  .header-brand .brand-letter { font-size: 28px; }
  .site-header[data-collapsible] .menu-toggle {
    display: grid; place-items: center; grid-column: 2; grid-row: 1;
    width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 8px;
    background: transparent; color: var(--night-text); cursor: pointer;
  }
  .menu-toggle img { display: block; width: 24px; height: 24px; }
  .menu-toggle .menu-close-icon, .menu-toggle[aria-expanded="true"] .menu-open-icon { display: none; }
  .menu-toggle[aria-expanded="true"] .menu-close-icon { display: block; }
  .menu-toggle:hover { background: rgba(244,223,195,.10); }
  .menu-toggle:focus-visible { outline: 2px solid var(--night-accent); outline-offset: 2px; }
  .site-header nav[id="main-navigation"] {
    grid-column: 1 / -1; grid-row: 2; justify-self: stretch;
    width: 100%; max-width: none; padding: 12px 0 4px; margin: 0;
  }
  nav[id="main-navigation"] div { width: 100%; flex-direction: column; align-items: stretch; gap: 4px; }
  nav[id="main-navigation"] div a { width: 100%; min-height: 48px; height: auto; padding: 14px 12px; justify-content: flex-start; border-radius: 8px; font-size: .875rem; }
  .site-header .header-socials { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; justify-content: flex-start; gap: 12px; padding: 8px 0 0; margin-top: 8px; border-top: 1px solid rgba(244,223,195,.16); }
  .site-header[data-collapsible][data-menu-open="false"] nav,
  .site-header[data-collapsible][data-menu-open="false"] .header-socials { display: none; }
  .site-header[data-menu-open="true"] { background: linear-gradient(110deg,rgba(40,20,55,.90),rgba(68,37,74,.86)); }

  .chrome-cover { height: 100dvh; min-height: 0; }
  .chrome-stage { inset: 80px 0; }
  .chrome-fallback { font-size: 64px; }

  #origin, #biography, #music { --story-inset: 22px; }
  #origin { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; padding: 48px var(--story-inset) 64px; min-height: 0; }
  #origin .memory-wash { position: relative; inset: auto; grid-column: 1; grid-row: 1; width: 100%; }
  #origin .memory-video { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1; max-height: min(480px,70svh); }
  #origin .opening-text { position: relative; inset: auto; grid-column: 1; grid-row: 2; display: block; width: 100%; height: auto; min-height: 0; }
  #origin .story-kicker, #origin .opening-title-long, #origin .opening-copy { width: 100%; max-width: none; }
  #origin .opening-title-long { font-size: 40px; line-height: 1.1; white-space: normal; }
  #origin .opening-copy { margin-top: 24px; }
  #origin .opening-copy p:last-child, #biography .feature-copy p:last-child { margin-bottom: 0; }

  #biography { padding: 32px var(--story-inset) 64px; min-height: 0; }
  #biography .feature-body { grid-template-columns: minmax(0,1fr); gap: 24px; min-height: 0; align-items: start; }
  #biography .feature-photo { grid-column: 1; grid-row: 1; position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1; max-height: min(480px,70svh); margin: 0; }
  #biography .feature-copy { grid-column: 1; grid-row: 2; inset: auto; width: 100%; max-width: none; justify-self: stretch; }
  #biography .feature-copy .journey-title { font-size: 40px; line-height: 1.1; }
  #origin .opening-quote, #biography .feature-copy .journey-quote { font-size: 24px; }

  .music-content { padding-block: 32px 72px; }
  .music-intro { grid-template-columns: minmax(0,1fr); gap: 24px; margin-bottom: 96px; }
  .music-intro > .music-image--portrait { grid-column: 1; grid-row: 1; width: 100%; height: auto; min-height: 0; aspect-ratio: 1; max-height: min(480px,70svh); transform: none; }
  .music-intro-copy { grid-column: 1; grid-row: 2; }
  .music-intro h2 { font-size: 48px; }
  .music-chapter, .music-chapter--live, .music-chapter--sets { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .music-chapter + .music-chapter { margin-top: 96px; }
  .music-chapter--live .music-image, .music-chapter--sets .music-image { grid-row: 1; }
  .music-chapter-copy { --music-title-size: 48px; }
}
@media (max-width: 400px) {
  #origin, #biography, #music { --story-inset: 16px; }
  .music-intro h2 { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }