/* Phone-only overrides. Keep all desktop rules and map geometry intact. */
@media (max-width: 700px) {
  body.letter-atlas { padding-bottom: 0; }
  .letter-atlas .explore-shell { margin: 0; }
  .letter-atlas .explore-layout { height: auto; min-height: 1080px; min-height: max(1080px, 100svh); }
  .letter-atlas .site-header.has-language-switch { margin: 0 18px; height: 76px; gap: 8px; }
  .letter-atlas .site-header .brand { flex: 0 0 36px; margin-right: auto; }
  .letter-atlas .site-header > .lite-switch { padding: 0 10px; font-size: 11px; letter-spacing: 0; }
  .letter-atlas .site-header > .lite-switch-note { display: none; }
  .letter-atlas .site-header > .language-switch { min-width: 44px; padding: 8px; }
  .letter-atlas .map-empty { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 240px auto auto; align-content: start; gap: 20px; padding: 96px 24px 90px; }
  .letter-atlas .scroll-title { position: relative; inset: auto; grid-row: 1; max-width: 100%; width: 100%; }
  .letter-atlas .scroll-title h1 { font-size: clamp(36px, 10vw, 48px); max-width: 100%; }
  .letter-atlas .journey-title-kicker { flex-wrap: wrap; white-space: normal; }
  .letter-atlas .journey-title-note { white-space: normal; }
  .letter-atlas .scroll-title #story-beacon { max-width: 100%; font-size: 12px; }
  .letter-atlas .journey-launch { position: relative; inset: auto; grid-row: 3; width: 100%; padding: 16px; margin: 0; }
  .letter-atlas .journey-launch-heading { font-size: 20px; display: block; overflow: visible; }
  .letter-atlas .journey-launch-description { font-size: 12px; line-height: 1.7; }
  .letter-atlas .journey-launch-actions { flex-wrap: wrap; }
  .letter-atlas .journey-launch-actions button { min-height: 44px; font-size: 12px; }
  .letter-atlas .journey-itinerary { position: relative; inset: auto; grid-row: 4; display: flex; overflow-x: auto; gap: 8px; padding: 0 0 8px; scroll-snap-type: x proximity; }
  .letter-atlas .journey-period { flex: 0 0 112px; padding: 12px; text-align: left; scroll-snap-align: start; }
  .letter-atlas .journey-period-number { margin: 0 0 8px; width: 23px; height: 23px; line-height: 21px; font-size: 10px; }
  .letter-atlas .journey-period-title { font-size: 14px; }
  .letter-atlas .journey-period-years { display: block; font-size: 10px; }
  .letter-atlas .atlas-compass { display: none; }
  .letter-atlas .atlas-controls { right: 24px; bottom: 470px; }
  .letter-atlas .map-scale { left: 24px; bottom: 480px; }
  .letter-atlas .cinema-actions { right: 24px; bottom: 24px; }
  .letter-atlas .atlas-bottom { max-width: calc(100% - 180px); bottom: 24px; }
  .letter-atlas .map-viewbar { max-width: calc(100% - 32px); bottom: 75px; padding: 6px; gap: 2px; }
  .letter-atlas .map-viewbar > span, .letter-atlas .map-viewbar small { display: none; }
  .letter-atlas.tools-open .explore-layout, .letter-atlas.map-viewing .explore-layout { min-height: 560px; height: 100svh; }
  .letter-atlas.tools-open .scene-dock { bottom: 76px; }
  .letter-atlas.tools-open .explore-toolbar { bottom: 152px; }
  .letter-atlas.tools-open .atlas-controls { bottom: 212px; }
  .letter-atlas.tools-open .map-scale { bottom: 222px; }
  .letter-atlas .drawer-open .place-panel { position: fixed; inset: 84px 12px max(12px, env(safe-area-inset-bottom)); width: auto; height: auto; max-height: none; z-index: 30; overflow: auto; overscroll-behavior: contain; background: #f3f5ed; border-radius: 20px; }
  .letter-atlas .drawer-heading { background: #f3f5ed; z-index: 3; }
  .letter-atlas .detail-open .place-panel { display: block; overflow: auto; }
  .letter-atlas .place-detail { display: flex; flex-direction: column; padding: 16px; }
  .letter-atlas .detail-photo .catalog-preview { height: 190px; }
  .letter-atlas .detail-photo figcaption { white-space: normal; }
  .letter-atlas .letter-dialog { box-sizing: border-box; width: calc(100% - 24px); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 24px; }
  .letter-atlas .letter-dialog h2 { font-size: 26px; }
  html #chapter-cinema[open] { display: flex; flex-direction: column; overflow-y: auto; height: 100dvh; }
  html #chapter-cinema .cinema-header { position: sticky; top: 0; flex: 0 0 auto; z-index: 5; background: #182e38f2; padding: 8px 12px; }
  html #chapter-cinema .cinema-layout { display: flex; flex-direction: column; flex: 1 0 auto; height: auto; min-height: 0; padding: 16px; }
  html #chapter-cinema #cinema-title { font-size: clamp(28px, 8vw, 40px); line-height: 1.3; }
  html #chapter-cinema #cinema-scroll { flex: none; height: auto; max-height: none; overflow: visible; width: 100%; }
  html #chapter-cinema .cinema-footer { position: relative; flex: 0 0 auto; height: auto; min-height: 100px; flex-wrap: wrap; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); gap: 12px; }
  html #chapter-cinema .cinema-photo-note { max-width: 100%; width: 100%; }
  html #chapter-cinema #cinema-places { width: 100%; max-width: none; }
  .letter-atlas input, .letter-atlas select, .letter-atlas textarea { font-size: 16px; }
}
@media (max-width: 700px) {
  .letter-atlas .journey-itinerary { width: 100%; min-width: 0; max-width: 100%; transform: none; justify-self: stretch; }
  .letter-atlas .atlas-controls { top: 440px; bottom: auto; grid-template-columns: repeat(4, 38px); }
  .letter-atlas.tools-open .atlas-controls { top: auto; }
  .letter-atlas .map-scale { top: 450px; bottom: auto; }
  .letter-atlas.tools-open .map-scale { top: auto; }
}
/* Reset translated positional offsets as well as the Chinese defaults. */
@media (max-width: 700px) {
  html[lang] .letter-atlas .journey-launch,
  html[lang] .letter-atlas .journey-itinerary,
  html[lang] .letter-atlas .scroll-title { position: relative; inset: auto; transform: none; }
  html[lang] .letter-atlas .journey-launch-heading { display: block; overflow: visible; }
}