/* 手機閱讀版：留白、導覽與觸控區域集中維護。 */
body[data-mobile-layout="home"] .invitation-float[hidden] { display: none !important; }

@media (max-width: 1100px) {
  /* 首頁與攝影活動頁保留品牌列，選單不再壓在主視覺上。 */
  :is(body[data-mobile-layout="home"], body[data-mobile-layout="photo-info"]) nav.topnav {
    display: block; min-height: 72px; padding: 0; background: #fff;
  }
  :is(body[data-mobile-layout="home"], body[data-mobile-layout="photo-info"]) nav.topnav .wrap {
    width: 100%; min-height: 72px; padding: 12px 20px; margin: auto;
  }
  :is(body[data-mobile-layout="home"], body[data-mobile-layout="photo-info"]) nav.topnav .brand-logo {
    width: 148px; height: auto;
  }
  :is(body[data-mobile-layout="home"], body[data-mobile-layout="photo-info"]) nav.topnav .wrap > a:not(.brand-link) { display: none; }
  :is(body[data-mobile-layout="home"], body[data-mobile-layout="photo-info"]) .mobile-nav-toggle {
    display: inline-flex; top: 12px; right: 16px; width: 48px; height: 48px; box-shadow: none;
  }
  :is(body[data-mobile-layout="home"], body[data-mobile-layout="photo-info"]) .mobile-nav-panel { display: block; max-width: calc(100vw - 32px); visibility: hidden; transition: transform .3s ease, visibility .3s; }
  :is(body[data-mobile-layout="home"], body[data-mobile-layout="photo-info"]) .mobile-nav-panel.open { visibility: visible; }
  :is(body[data-mobile-layout="home"], body[data-mobile-layout="photo-info"]) .mobile-nav-backdrop { display: block; }
  :is(body[data-mobile-layout="home"], body[data-mobile-layout="photo-info"]) section[id] { scroll-margin-top: 88px; }

  /* 主視覺文字與按鈕各佔自己的列，字級放大時也不互相遮住。 */
  body[data-mobile-layout="home"] .hero .kv-wrap { display: grid; grid-template-columns: minmax(0, 1fr); line-height: normal; }
  body[data-mobile-layout="home"] .hero .kv { grid-area: 1 / 1; height: 100%; min-height: 280px; object-fit: cover; object-position: center; }
  body[data-mobile-layout="home"] .hero .kv-lightflow { display: none; }
  body[data-mobile-layout="home"] .hero .kv-title {
    grid-area: 1 / 1; position: relative; inset: auto; align-self: center; padding: 40px 24px;
  }
  body[data-mobile-layout="home"] .hero .kv-title .main { font-size: clamp(36px, 10vw, 52px); line-height: 1.25; margin: 0 0 16px; }
  body[data-mobile-layout="home"] .hero .kv-title .second { font-size: clamp(22px, 6vw, 30px); line-height: 1.5; margin: 0 0 12px; text-wrap: balance; }
  body[data-mobile-layout="home"] .hero .kv-title .sub { font-size: 16px; line-height: 1.8; letter-spacing: .04em; margin: 0; text-wrap: balance; }
  body[data-mobile-layout="home"] .hero .kv-cta {
    position: static; transform: none; display: block; grid-row: 2; width: calc(100% - 40px); max-width: 420px; margin: 24px auto; padding: 16px 20px; white-space: normal; text-align: center; background: var(--accent);
  }
  body[data-mobile-layout="home"] .hero .kv-cta:hover { transform: none; }
  body[data-mobile-layout="home"] .hero .kv-credits-image { position: static; grid-row: 3; width: calc(100% - 40px); max-width: 520px; margin: 0 auto 24px; }
  body[data-mobile-layout="home"] .hero-content { padding: 28px 22px 56px; }
  body[data-mobile-layout="home"] .hero-content .intro p { font-size: 17px; line-height: 1.95; margin-bottom: 24px; }
  body[data-mobile-layout="home"] .hero-content .intro .lead { font-size: 19px; line-height: 1.9; }
  body[data-mobile-layout="home"] .hero-content .intro .lead::first-letter { font-size: inherit; }
  body[data-mobile-layout="home"] .page-decor { display: none; }

  /* 活動時程改成直向列表，手機不必左右拖表格。表頭保留給輔助閱讀。 */
  body[data-mobile-layout="home"] .schedule-wrap { overflow: visible; border: 0; border-radius: 0; box-shadow: none; margin-top: 36px; }
  body[data-mobile-layout="home"] .schedule-table { display: block; min-width: 0; width: 100%; }
  body[data-mobile-layout="home"] .schedule-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body[data-mobile-layout="home"] .schedule-table tbody { display: grid; gap: 20px; }
  body[data-mobile-layout="home"] .schedule-table tbody tr { display: grid; gap: 16px; padding: 24px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  body[data-mobile-layout="home"] .schedule-table td { display: block; padding: 0; border: 0; text-align: left; font-size: 16px; line-height: 1.8; white-space: normal; }
  body[data-mobile-layout="home"] .schedule-table td:first-child { font-size: 14px; }
  body[data-mobile-layout="home"] .schedule-table .event-name { font-size: 21px; line-height: 1.5; }
  body[data-mobile-layout="home"] .schedule-table td:nth-child(n+3)::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
  body[data-mobile-layout="home"] .online-exhibition { padding: 24px 20px; }
  body[data-mobile-layout="home"] .online-exhibition summary { border-radius: 14px; gap: 8px 14px; padding: 18px; line-height: 1.6; }
  body[data-mobile-layout="home"] .exhibition-language-intro { grid-template-columns: 1fr; gap: 12px; }
  body[data-mobile-layout="home"] .online-exhibition .exhibition-language-intro a { padding: 18px 8px; }
  body[data-mobile-layout="home"] .online-exhibition .exhibition-language-intro p { font-size: 16px; line-height: 1.9; }
}

@media (max-width: 720px) {
  /* 線上展覽：品牌與導覽分列，避免外文連結擠在標誌旁。 */
  body[data-mobile-layout="guide"] .nav-inner,
  body[data-mobile-layout="gallery"] .top .wrap { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 18px; padding-bottom: 12px; }
  body[data-mobile-layout="guide"] :is(.nav-inner, .head-inner, .container) { padding-left: 20px; padding-right: 20px; }
  body[data-mobile-layout="guide"] .brand-logo,
  body[data-mobile-layout="gallery"] .brand img { width: 144px; max-width: 100%; }
  body[data-mobile-layout="guide"] .nav-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 8px; }
  body[data-mobile-layout="gallery"] .top :is(.nav, .topnav) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; }
  body[data-mobile-layout="guide"] .nav-links a,
  body[data-mobile-layout="gallery"] .top :is(.nav, .topnav) a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; background: #f5f6f8; border-radius: 7px; font-size: 13px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
  body[data-mobile-layout="guide"] .head-inner { padding-top: 28px; padding-bottom: 28px; }
  body[data-mobile-layout="guide"] .page-head h1 { font-size: 28px; line-height: 1.4; margin-bottom: 12px; }
  body[data-mobile-layout="guide"] .breadcrumb { margin: 24px 0; line-height: 1.8; }
  body[data-mobile-layout="guide"] .language-wrap { gap: 10px; margin: 24px 0 16px; }
  body[data-mobile-layout="guide"] .language-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 4px; padding: 4px; }
  body[data-mobile-layout="guide"] .language-buttons button { min-width: 0; min-height: 48px; padding: 10px 2px; font-size: 14px; line-height: 1.5; }
  body[data-mobile-layout="guide"] .voice-wrap { gap: 12px; margin-bottom: 28px; }
  body[data-mobile-layout="guide"] .voice-button { width: 100%; min-height: 48px; }
  body[data-mobile-layout="guide"] .hero { border-radius: 12px; box-shadow: none; }
  body[data-mobile-layout="guide"] .hero-image { height: auto; min-height: 0; padding: 12px; }
  body[data-mobile-layout="guide"] .hero-image.paired { grid-template-columns: 1fr; gap: 20px; padding: 16px; }
  body[data-mobile-layout="guide"] .hero-image img { height: auto; max-height: 520px; }
  body[data-mobile-layout="guide"] .hero-image.paired img { aspect-ratio: auto; }
  body[data-mobile-layout="guide"] .hero-copy { min-width: 0; padding: 28px 20px; }
  body[data-mobile-layout="guide"] .hero-copy h2 { font-size: 28px; line-height: 1.5; overflow-wrap: break-word; }
  body[data-mobile-layout="guide"] .hero-copy p { line-height: 1.9; }
  body[data-mobile-layout="guide"] .content-layout { gap: 36px; margin-bottom: 28px; }
  body[data-mobile-layout="guide"] .story { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 28px 0 0; min-height: 0; }
  body[data-mobile-layout="guide"] .story h2 { font-size: 25px; margin-bottom: 24px; }
  body[data-mobile-layout="guide"] #story-body { font-size: 17px; }
  body[data-mobile-layout="guide"] #story-body p { line-height: 1.95; margin-bottom: 1.35em; }
  body[data-mobile-layout="guide"] #story-body :is(h3, h4) { line-height: 1.65; margin: 1.8em 0 .8em; }
  body[data-mobile-layout="guide"] #story-body > :first-child { margin-top: 0; }
  body[data-mobile-layout="guide"] .sidebar { padding: 24px; }
  body[data-mobile-layout="guide"] .item-nav { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 48px; }
  body[data-mobile-layout="guide"] .item-nav a { max-width: none; padding: 18px; line-height: 1.7; text-align: left; }
  body[data-mobile-layout="guide"] .overview { padding-top: 16px; }
  body[data-mobile-layout="guide"] .overview-intro { line-height: 1.95; }
  body[data-mobile-layout="guide"] .zone-section { margin: 36px 0 48px; }
  body[data-mobile-layout="guide"] .zone-section h2 { font-size: 25px; line-height: 1.5; margin-bottom: 22px; }
  body[data-mobile-layout="guide"] .card-grid { grid-template-columns: 1fr; gap: 16px; }
  body[data-mobile-layout="guide"] .card { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
  body[data-mobile-layout="guide"] .card img { height: 100%; min-height: 112px; max-height: 190px; }
  body[data-mobile-layout="guide"] .card-copy { padding: 18px 16px; }
  body[data-mobile-layout="guide"] .card strong { font-size: 16px; line-height: 1.65; overflow-wrap: break-word; }

  /* 三個照片展共用閱讀節奏；語言與朗讀按鈕分列。 */
  body[data-mobile-layout="gallery"] .wrap { width: calc(100% - 40px); }
  body[data-mobile-layout="gallery"] .masthead { padding: 36px 0; }
  body[data-mobile-layout="gallery"] .masthead h1 { font-size: clamp(32px, 8.5vw, 40px); line-height: 1.3; margin: 16px 0 22px; overflow-wrap: break-word; text-wrap: balance; }
  body[data-mobile-layout="gallery"] .masthead p { font-size: 17px; line-height: 1.95; }
  body[data-mobile-layout="gallery"] .eyebrow { line-height: 1.8; letter-spacing: .1em; }
  body[data-mobile-layout="gallery"] .tools { display: grid; gap: 16px; margin-top: 28px; }
  body[data-mobile-layout="gallery"] .languages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; margin-top: 28px; }
  body[data-mobile-layout="gallery"] .tools .languages { margin-top: 0; }
  body[data-mobile-layout="gallery"] .languages button[data-lang] { min-height: 48px; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 14px; padding: 10px 2px; line-height: 1.5; }
  body[data-mobile-layout="gallery"] .languages button[aria-pressed="true"] { background: #1e3a6f; border-color: #1e3a6f; color: #fff; }
  body[data-mobile-layout="gallery"] .voice { grid-column: 1 / -1; min-height: 48px; padding: 12px 18px; margin: 12px 0 0; border: 1px solid currentColor; border-radius: 8px; line-height: 1.5; }
  body[data-mobile-layout="gallery"] .tools .voice { margin-top: 0; }
  body[data-mobile-layout="gallery"] .index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 24px 0; }
  body[data-mobile-layout="gallery"] .index a { padding: 12px 10px; min-height: 44px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; line-height: 1.6; }
  body[data-mobile-layout="gallery"] .series { padding: 44px 0 28px; }
  body[data-mobile-layout="gallery"] .series-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
  body[data-mobile-layout="gallery"] .series-head h2 { font-size: 32px; line-height: 1.5; overflow-wrap: break-word; }
  body[data-mobile-layout="gallery"] .works { padding: 32px 0 24px; }
  body[data-mobile-layout="gallery"] :is(.work, .photo-work) { grid-template-columns: minmax(0, 1fr); margin: 0 0 36px; box-shadow: none; }
  body[data-mobile-layout="gallery"] :is(.work, .photo-work) .photo-button { padding: 0; }
  body[data-mobile-layout="gallery"] :is(.work, .photo-work) img { max-height: 75vh; }
  body[data-mobile-layout="gallery"] :is(.caption, .photo-note) { min-width: 0; padding: 26px 20px; }
  body[data-mobile-layout="gallery"] .caption > p,
  body[data-mobile-layout="gallery"] .photo-note .caption-text { font-size: 18px; line-height: 1.95; margin: 20px 0 24px; }
  body[data-mobile-layout="gallery"] details summary { min-height: 44px; padding: 12px 0; }
  body[data-mobile-layout="gallery"] :is(.lightbox-close, dialog button) { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  body[data-mobile-layout="gallery"] .lightbox-inner { padding: 12px; }
  body[data-mobile-layout="gallery"] :is(.bar, .lightbox-bar) { gap: 12px; line-height: 1.8; }
  body[data-mobile-layout="gallery"] #large-caption { min-width: 0; overflow-wrap: break-word; }
  :is(body[data-mobile-layout="guide"], body[data-mobile-layout="gallery"]) :is(.translation-credit, .credit) { text-align: left; line-height: 1.85; overflow-wrap: break-word; }
}

@media (max-width: 359px) {
  body[data-mobile-layout="guide"] .card { grid-template-columns: 88px minmax(0, 1fr); }
  body[data-mobile-layout="guide"] .card-copy { padding: 16px 12px; }
  body[data-mobile-layout="guide"] .language-buttons,
  body[data-mobile-layout="gallery"] .languages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}