@media (max-width: 700px) {
  .contact-field input, .contact-field textarea { font-size: 16px; line-height: 1.35; }
  .site-header { align-content: center; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); grid-template-rows: 44px auto; row-gap: 2px; height: auto; min-height: 88px; padding-inline: max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right)); padding-block: 8px; }
  .brand-title-group { display: contents; }
  .site-header .support-email { display: none; }
  .site-footer .support-email-footer { display: block; font-size: 12px; white-space: normal; text-align: center; }
  .home-nav-mobile { display: block; grid-column: 3; grid-row: 1; justify-self: end; }
  .home-nav-desktop { display: none; }
  .brand, .brand img { width: 44px; height: 44px; }
  .site-title { font-size: clamp(15px,4.8vw,21px); letter-spacing: .1em; white-space: nowrap; }
  main { justify-content: flex-start; min-height: calc(100svh - 72px); padding: 24px max(16px,env(safe-area-inset-right)) 32px max(16px,env(safe-area-inset-left)); }
  .map-title { margin-bottom: 6px; font-size: clamp(12px,3.5vw,24px); line-height: 1.5; overflow-wrap: anywhere; }
  .index-page .map-title, body:not(.index-page) .map-title { font-size: 42px; }
  .map-description { margin-bottom: 20px; font-size: 15px; line-height: 1.65; }
  .section-title { font-size: 26px; }
  .carousel { grid-template-columns: 1fr; gap: 8px; min-height: 0; }
  .carousel-visual { min-height: 230px; }
  .index-page .carousel-content { min-height: 112px; }
  body:not(.index-page) .carousel-content { min-height: 184px; }
  .carousel-content { padding-inline: 4px; text-align: center; }
  .carousel-slides { top: 0; }
  .character-viewer, .beta-character-viewer { width: min(130px,100%); }
  .carousel-slide h1 { margin: 0 0 14px; font-size: clamp(30px,8vw,40px); overflow-wrap: anywhere; }
  .carousel-slide p { max-width: 520px; margin: 0 auto; font-size: 15px; line-height: 1.65; }
  .carousel-slide p.character-alias { margin: -6px auto 12px; font-size: 17px; }
  .carousel-indicators { gap: 4px; margin: 8px 0 18px; }
  .carousel-indicator, .carousel-indicator.is-active { width: 44px; height: 44px; }
  .maps-title, .beta-title { margin-top: 18px; }
  .map-link-button { width: min(100%,340px); min-height: 48px; margin-top: 12px; padding: 12px 20px; }
  .contact-section { grid-template-columns: minmax(0,1fr); gap: 18px; margin-top: 28px; padding: 20px; }
  .contact-character-viewer { width: min(130px,100%); }
  .contact-form { gap: 12px; width: 100%; }
  .cf-turnstile { max-width: 100%; }
  .site-footer { padding: 20px max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
  .footer-social ul { gap: 6px 20px; }
  .footer-social li > a, .footer-social li > span { min-height: 44px; }
}

@media (max-width: 380px) {
  .site-title { font-size: 15px; letter-spacing: .07em; }
  .site-footer .support-email-footer { font-size: 11px; }
  .footer-social ul { column-gap: 14px; }
}

@media (max-width: 350px) {
  body:not(.index-page) .carousel-content { min-height: 220px; }
  .shattered-header { grid-template-rows: 44px 44px auto; }
  .shattered-header .home-nav-mobile { grid-column: 1 / -1; grid-row: 2; }
  .shattered-header .support-email { grid-row: 3; }
  .shattered-header .site-title { font-size: 13px; letter-spacing: .04em; }
}

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  main { justify-content: flex-start; min-height: calc(100svh - 72px); padding-block: 16px 24px; }
  .carousel { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); min-height: 260px; gap: 24px; }
  .carousel-visual, .carousel-content { min-height: 260px; }
  .carousel-slides { top: 36px; }
  .character-viewer, .beta-character-viewer { width: min(170px,100%); }
  .carousel-slide h1 { font-size: clamp(28px,5vw,40px); }
  .carousel-indicator, .carousel-indicator.is-active { width: 36px; height: 36px; }
}


@media (max-width: 700px) {
  .character-viewer, .beta-character-viewer, .contact-character-viewer { max-width: 100%; touch-action: pan-y; }
  .release-area { width: 100%; grid-template-columns: 1fr; gap: 22px; }
  .release-panel { width: 100%; grid-template-columns: 1fr; }
  .release-column + .release-column { border-top: 1px solid var(--line); border-left: 0; }
}