/* Phone-only adjustments keep the desktop composition intact. */
@media (max-width: 720px) {
  .header nav { gap: 16px; }
  .header .nav-link { min-height: 44px; display: inline-flex; align-items: center; }
  .header .nav-link.active { display: none; }
  .header .identity { flex-shrink: 0; }
  .hero-copy { padding-top: 32px; }
  .hero h1 { font-size: clamp(43px, 10.7vw, 72px); }
  .hero .intro { max-width: 100%; }
  .character-home { height: clamp(390px, 120vw, 560px); min-height: 0; margin-top: 18px; }
  .character-home > .character-area { height: 100%; min-height: 0; margin-top: 0; }
  .character-home .character-stage { inset: 0 -5% 0; }
  .character-home .scene-coordinate { top: 6px; }
  .character-home .character-caption { display: none; }
  .icon-button { width: 44px; height: 44px; flex-shrink: 0; }
  .character-home .channel-controls { min-width: 0; width: max-content; max-width: 100%; gap: 6px; padding: 5px 7px; bottom: 8px; }
  .character-home .channel-readout { font-size: 10px; }
  .character-home .channel-actions { gap: 0; }
  .journey { --mobile-scene-height: clamp(200px, 29svh, 250px); }
  .journey-visual { height: var(--mobile-scene-height); }
  .visual-year { top: 51px; font-size: 48px; }
  .visual-year.is-range { font-size: 34px; }
  .visual-caption { bottom: 20px; right: 46%; gap: 6px; }
  .visual-caption strong { font-size: clamp(18px, 5.4vw, 23px); }
  .journey-character-dock { inset: 20px 0 -30px 37%; }
  .journey-character-dock .channel-controls { right: 12px; bottom: 42px; padding: 0; }
  .journey-character-dock .icon-button { width: 44px; height: 44px; }
  .scroll-story { scroll-margin-top: calc(var(--mobile-scene-height) + 24px); }
  .story-sources summary { min-height: 44px; display: flex; align-items: center; gap: 8px; }
  .story-sources summary::before { content: '+'; font-size: 18px; }
  .story-sources[open] summary::before { content: '−'; }
  .archive-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .album-feature .primary-button { max-width: 100%; gap: 20px; }
  .music-room { height: 100dvh; max-height: 100dvh; }
  .music-room-bar { padding-top: max(8px, env(safe-area-inset-top)); }
  .music-room-bar button { min-width: 70px; min-height: 44px; }
  .music-release { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .release-selector select, .release-links a, #music-retry { min-height: 44px; }
  .release-links a { display: inline-flex; align-items: center; }
  .site-footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .character-home .channel-readout .signal-icon { display: none; }
  .character-home .channel-controls { gap: 3px; padding-inline: 4px; }
  .character-home #channel-label b { letter-spacing: 0; }
  .visual-year { font-size: 42px; }
  .visual-year.is-range { font-size: 29px; }
  .visual-caption { right: 48%; }
}
@media (max-width: 720px) and (max-height: 500px) {
  .journey { --mobile-scene-height: 150px; }
  .visual-year { top: 38px; font-size: 34px; }
  .visual-year.is-range { font-size: 28px; }
  .visual-caption { bottom: 12px; gap: 3px; }
  .visual-caption strong { font-size: 18px; }
  .visual-caption > span:first-child { font-size: 10px; }
  .music-visual, .music-visual .character-area { height: 180px; }
}
/* A rotated phone keeps more of the story visible beside its companion. */
@media (min-width: 721px) and (max-width: 950px) and (max-height: 500px) and (pointer: coarse) {
  .journey-visual { top: 12px; height: calc(100svh - 24px); min-height: 0; }
  .visual-topline { top: 16px; font-size: 9px; }
  .visual-year { top: 45px; font-size: 42px; }
  .visual-year.is-range { font-size: 35px; }
  .visual-caption { left: 20px; right: 20px; bottom: 18px; }
  .visual-caption strong { font-size: 22px; }
  .journey-character-dock { inset: 60px -8% 60px; }
  .journey-character-dock .channel-readout { display: none; }
  .journey-character-dock .channel-controls { min-width: 0; left: auto; right: 38px; bottom: 10px; transform: none; padding: 2px; }
  .journey-character-dock .music-shortcut { display: none; }
  .journey-character-dock .icon-button { width: 44px; height: 44px; }
}