/* === Reset === */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 500;
  color: #51443b;
  background-color: #f2efe9;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

ul, ol {
  list-style: none;
}

/* === Design Tokens === */
:root {
  --color-primary-brown: #51443b;
  --color-secondary-brown: #765e48;
  --color-nav-blue: #003577;
  --color-accent-orange: #c95c21;
  --color-accent-gold: #c98321;
  --color-bg-beige: #f2efe9;
  --color-bg-beige-dark: #e4ded9;
  --color-bg-card: rgba(233, 225, 218, 0.5);
  --color-button-brown: #887a6d;
  --color-status-active: #fb7900;
  --color-status-upcoming: #ababab;
  --color-free-badge: #ffd53b;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-footer-text: #383432;
  --color-copyright: #c7b8b2;
  --gradient-top-bar: linear-gradient(180deg, #1b2d58 28%, #4f7bbe 71%, #77c9da 105%);
  --content-width: 1180px;
  --section-px: 370px;
  --corner-small: 8px;
  --corner-card: 20px;
  --corner-badge: 20px;
}

/* === Typography === */
.headline1 { font-family: 'Noto Serif TC', serif; font-weight: 700; font-size: 32px; line-height: 40px; }
.headline2 { font-weight: 700; font-size: 26px; line-height: 36px; }
.headline3 { font-weight: 700; font-size: 24px; line-height: 32px; }
.headline4 { font-weight: 700; font-size: 18px; line-height: 26px; }
.headline5 { font-weight: 700; font-size: 16px; line-height: 24px; }
.title1 { font-weight: 700; font-size: 22px; line-height: 30px; }
.title3 { font-weight: 700; font-size: 20px; line-height: 28px; }
.body1 { font-weight: 700; font-size: 18px; line-height: 26px; }
.body2 { font-weight: 500; font-size: 18px; line-height: 26px; }
.body4 { font-weight: 500; font-size: 16px; line-height: 24px; }
.small1 { font-weight: 700; font-size: 14px; line-height: 20px; }
.small2 { font-weight: 500; font-size: 14px; line-height: 20px; }
.caption1 { font-weight: 500; font-size: 12px; line-height: 16px; }

.content-wrapper { max-width: var(--content-width); margin: 0 auto; width: 100%; }

/* === Navbar === */
.navbar { position: sticky; top: 0; width: 100%; z-index: 100; transition: top 0.3s ease; }
.navbar--hidden { top: -120px; }
.navbar__inner { background: var(--color-white); box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.navbar__content { width: var(--content-width); display: flex; align-items: center; justify-content: space-between; }
.navbar__logo { display: flex; align-items: center; }
.navbar__logo-60 { width: 280px; height: auto; }
.navbar__links { display: flex; align-items: center; }
.navbar__link { padding: 0 20px; font-weight: 700; font-size: 16px; line-height: 24px; color: var(--color-nav-blue); white-space: nowrap; }
.navbar__link--multi { line-height: 24px; }
.navbar__link:hover { opacity: 0.7; }
.navbar__cta { display: flex; align-items: center; gap: 4px; background: var(--color-secondary-brown); color: var(--color-white); font-weight: 700; font-size: 18px; line-height: 26px; padding: 4px 12px; border-radius: 4px; border: 1px solid var(--color-secondary-brown); margin-left: 8px; white-space: nowrap; }
.navbar__cta:hover { opacity: 0.85; }
body { padding-top: 0; }

/* === Hero Banner === */
.hero-banner { position: relative; width: 100%; overflow: hidden; background: var(--color-bg-beige-dark); }
.hero-banner--video { height: auto; background: #000; }
.hero-video { width: 100%; height: auto; display: block; cursor: pointer; }
.hero-carousel { position: relative; width: 100%; height: 100%; }
.hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; pointer-events: none; }
.hero-slide.active { opacity: 1; pointer-events: auto; }

.hero-slide--a { background: var(--color-bg-beige-dark); }
.hero-a__bg { position: absolute; inset: 0; }
.hero-a__mountain { position: absolute; bottom: -1px; left: 0; width: 100%; height: auto; }
.hero-a__content { position: relative; max-width: var(--content-width); margin: 0 auto; height: 100%; display: flex; align-items: flex-start; justify-content: space-between; }
.hero-a__text { display: flex; flex-direction: column; gap: 22px; padding-top: 206px; max-width: 390px; }
.hero-a__tag { display: inline-flex; padding: 8px 12px; border: 1px solid var(--color-accent-orange); border-radius: var(--corner-small); }
.hero-a__explore { margin-top: 80px; padding: 8px 12px; }
.hero-a__poster { position: relative; width: 305px; height: 542px; margin-top: 43px; background: var(--color-white); overflow: hidden; flex-shrink: 0; }
.hero-a__poster-img { width: 100%; height: 100%; object-fit: cover; }
.hero-a__play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 92px; height: 92px; }

.hero-slide--b { background: #1a1a1a; }
.hero-b__bg { position: absolute; inset: 0; }
.hero-b__bg-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.hero-b__content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 24px; text-align: center; }
.hero-b__subtitle { margin-top: 60px; }
.hero-b__dots { display: flex; gap: 16px; }
.hero-b__dot { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.3); border: 2px solid rgba(255,255,255,0.5); }
.hero-b__title-img { max-width: 500px; height: auto; }

.hero-carousel__indicators { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 10; }
.hero-carousel__dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(81,68,59,0.3); border: none; cursor: pointer; transition: background 0.3s; padding: 0; }
.hero-carousel__dot.active { background: var(--color-primary-brown); }

/* === Why Visit === */
.why-visit { background: var(--color-bg-beige); padding: 30px 20px 60px; }
.why-visit__inner { display: flex; flex-direction: column; gap: 24px; align-items: center; max-width: var(--content-width); margin: 0 auto; }
.why-visit__title { color: var(--color-primary-brown); }
.why-visit__columns { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; max-width: var(--content-width); }
.why-visit__col { width: 280px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.why-visit__icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }

/* === Eight Topics === */
.eight-topics { background: var(--color-bg-beige); padding: 30px 20px 60px; position: relative; }
.eight-topics__inner { display: flex; flex-direction: column; gap: 24px; max-width: var(--content-width); margin: 0 auto; }
.eight-topics__header { display: flex; gap: 24px; align-items: flex-end; }
.eight-topics__logo { display: flex; align-items: flex-end; flex-shrink: 0; }
.eight-topics__logo-img { width: 229px; height: 146px; object-fit: cover; }
.eight-topics__logo-tail { width: 38px; height: 53px; margin-left: -11px; }
.eight-topics__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 20px; }
.topic-card { position: relative; display: block; height: 128px; cursor: pointer; }
.topic-card__bg { position: absolute; inset: 0; }
.topic-card__bg-img { width: 100%; height: 100%; }
.topic-card__content { position: relative; display: flex; gap: 8px; padding: 20px 12px; height: 100%; }
.topic-card__left { display: flex; align-items: flex-start; flex-shrink: 0; }
.topic-card__number { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 60px; line-height: 0.92; color: rgba(18,18,18,0.12); margin-right: -2px; }
.topic-card__circle { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; margin-right: -2px; flex-shrink: 0; }
.topic-card__circle img { width: 100%; height: 100%; object-fit: cover; }
.topic-card__text { display: flex; flex-direction: column; justify-content: center; color: var(--color-primary-brown); white-space: nowrap; }
.topic-card__arrow { position: absolute; top: 0; right: 0; width: 48px; height: 48px; }
.topic-card:hover { opacity: 0.85; }

/* === Exhibition Info === */
.exhibition-info { background: var(--color-bg-beige); padding: 30px 20px 60px; overflow: hidden; }
.exhibition-info__inner { display: flex; flex-direction: column; gap: 24px; align-items: center; max-width: var(--content-width); margin: 0 auto; }
.exhibition-info__cards { display: flex; gap: 24px; width: 100%; }
.venue-card { flex: 1; background: var(--color-bg-card); border-radius: var(--corner-card); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.venue-card__header { display: flex; align-items: center; gap: 8px; }
.badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: var(--corner-badge); color: var(--color-white); }
.badge--active { background: var(--color-status-active); }
.badge--upcoming { background: var(--color-status-upcoming); }
.badge--free { background: var(--color-free-badge); color: var(--color-primary-brown); padding: 2px 8px; }
.venue-card__info { display: flex; gap: 20px; }
.venue-card__labels { display: flex; flex-direction: column; gap: 4px; color: var(--color-primary-brown); white-space: nowrap; }
.venue-card__values { display: flex; flex-direction: column; gap: 6px; color: var(--color-primary-brown); white-space: nowrap; }
.venue-card__values .body2 { display: flex; align-items: center; gap: 4px; }
.venue-card__map { width: 100%; height: 210px; overflow: hidden; background: var(--color-primary-brown); border-radius: 4px; }
.venue-card__map img { width: 100%; height: 100%; object-fit: cover; }
.venue-card__map iframe { width: 100%; height: 100%; border: 0; }
.venue-card__buttons { display: flex; gap: 20px; }
.venue-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--color-button-brown); color: var(--color-white); font-weight: 700; font-size: 18px; line-height: 1.25; padding: 4px 12px; border-radius: var(--corner-small); text-align: center; white-space: nowrap; }
.venue-btn:hover { opacity: 0.85; }

/* === Video Section === */
.video-section { background: var(--color-bg-beige); padding: 60px 20px; }
.video-section__inner { display: flex; flex-direction: column; gap: 24px; align-items: center; max-width: var(--content-width); margin: 0 auto; }
.video-section__content { position: relative; width: 100%; }
.video-section__featured { width: 74.5%; }
.video-section__thumb { width: 100%; aspect-ratio: 880/496; border-radius: 4px; overflow: hidden; position: relative; }
.video-section__thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-section__thumb iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.video-section__sidebar { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.video-section__sidebar-item { display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.video-section__sidebar-item:hover { opacity: 0.8; }
.video-section__sidebar-thumb { width: 247px; aspect-ratio: 247/139; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.video-section__sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-section__sidebar-item .headline5 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 247px; }

/* === Quote Section === */
.quote-section { position: relative; height: 492px; background: var(--color-bg-beige); overflow: hidden; }
.quote-section__bg { position: absolute; bottom: 0; left: 0; right: 0; overflow: hidden; }
.quote-section__bg-img { width: 100%; height: auto; opacity: 0.6; display: block; }
.quote-section__content { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; max-width: var(--content-width); margin: 0 auto; padding: 60px 20px 100px; }

/* === Highlights (花絮) === */
.highlights { background: var(--color-bg-beige); padding: 60px 20px; }
.highlights__inner { display: flex; flex-direction: column; gap: 24px; align-items: center; max-width: var(--content-width); margin: 0 auto; }
.highlights__columns { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }
.highlights__col { width: 280px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.highlights__icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }

/* === FAQ === */
.faq-section { background: var(--color-bg-beige-dark); padding: 60px 20px; }
.faq-section__inner { display: flex; flex-direction: column; gap: 24px; align-items: center; max-width: var(--content-width); margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.faq-item { padding: 8px 16px; display: flex; flex-direction: column; gap: 4px; }
.faq-item__question { display: flex; align-items: center; gap: 16px; }
.faq-item__q-icon { width: 20px; height: 20px; background: var(--color-primary-brown); color: var(--color-white); font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.25; display: flex; align-items: center; justify-content: center; border-radius: 2px; flex-shrink: 0; }
.faq-item__answer { padding-left: 42px; padding-right: 10px; }
.faq-divider { height: 2px; background: var(--color-white); width: 100%; }

/* === Footer === */
.site-footer { background: var(--color-bg-beige); padding: 60px 20px; position: relative; }
.site-footer__inner { display: flex; justify-content: space-between; max-width: var(--content-width); margin: 0 auto; position: relative; }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__col a:hover { opacity: 0.7; }
.fab-group { position: fixed; bottom: 32px; right: 32px; z-index: 50; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.fab-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--color-white); box-shadow: 0 4px 4px rgba(0,0,0,0.13), 0 0 14px rgba(0,0,0,0.13); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: opacity 0.4s ease; }
.fab-btn:hover { opacity: 0.8; }
.fab-btn__icon { width: 24px; height: 24px; }
.fab-btn img { width: 24px; height: 24px; }
.fab-group { transition: opacity 0.4s ease; }
.fab-group.idle { opacity: 0.5; }
.fab-booking { width: 175px; height: 175px; border-radius: 50%; background: var(--color-primary-brown); box-shadow: 0 4px 4px rgba(0,0,0,0.13), 0 0 14px rgba(0,0,0,0.13); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: opacity 0.3s ease; text-decoration: none; }
.fab-booking:hover { opacity: 0.85; }
.fab-booking img { filter: brightness(0) invert(1); }

/* === Copyright === */
.copyright { background: var(--color-bg-beige); padding: 12px 20px; }
.copyright p { font-weight: 500; font-size: 16px; line-height: 1.4; color: var(--color-copyright); max-width: var(--content-width); margin: 0 auto; }

/* === Bubble Menu (hidden on desktop) === */
.bubble-toggle { display: none; }
.bubble-menu { display: none; }

/* === Topic Detail === */
.topic-detail__breadcrumb { background: var(--color-bg-beige); padding: 16px 20px 32px; }
.topic-detail__breadcrumb-inner { max-width: var(--content-width); margin: 0 auto; display: flex; gap: 8px; align-items: center; }
.topic-detail__breadcrumb a { color: var(--color-accent-orange); }
.topic-detail__breadcrumb a:hover { opacity: 0.7; }

.topic-detail__hero { background: var(--color-bg-beige); padding: 0 20px 60px; }
.topic-detail__hero-inner { max-width: var(--content-width); margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.topic-detail__hero-title-row { display: flex; gap: 24px; align-items: flex-start; }
.topic-detail__hero-number-group { display: flex; align-items: flex-start; flex-shrink: 0; }
.topic-detail__hero-number { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 60px; line-height: 0.92; color: rgba(18,18,18,0.12); margin-right: -10px; }
.topic-detail__hero-circle { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; margin-right: -10px; flex-shrink: 0; }
.topic-detail__hero-circle img { width: 100%; height: 100%; object-fit: cover; }
.topic-detail__hero-title-group { flex: 1; display: flex; flex-direction: column; gap: 4px; color: var(--color-primary-brown); }
.topic-detail__hero-label { font-weight: 700; font-size: 20px; line-height: 1.5; }
.topic-detail__hero-title-indent { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.topic-detail__hero-title { font-weight: 700; font-size: 24px; line-height: 1.25; color: var(--color-primary-brown); }
.topic-detail__hero-subtitle { font-weight: 500; font-size: 16px; line-height: 1.4; color: var(--color-primary-brown); }
.topic-detail__hero-content-row { display: flex; gap: 20px; align-items: flex-start; }
.topic-detail__hero-text { width: 480px; flex-shrink: 0; }
.topic-detail__hero-images { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.topic-detail__hero-imgs-row { display: flex; gap: 8px; }
.topic-detail__hero-img-item { flex: 1; }
.topic-detail__hero-img-item--wide { flex: 1.5; }
.topic-detail__hero-img-item img { width: 100%; height: 220px; object-fit: cover; }
.topic-detail__hero-captions { display: flex; justify-content: space-between; }
.topic-detail__hero-captions .caption1 { color: var(--color-primary-brown); font-weight: 700; font-size: 14px; }

/* --- History + Architecture + Stories block --- */
.td-history { background: #ffffff; padding: 30px 20px 40px; }
.td-history__inner { max-width: var(--content-width); margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }

.td-history__top-images { display: flex; width: 580px; margin: 0 auto; }
.td-history__top-img-large { width: 382px; flex-shrink: 0; }
.td-history__top-img-large img { width: 100%; height: auto; object-fit: cover; }
.td-history__top-img-side { width: 165px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.td-history__top-img-side img { width: 100%; height: auto; object-fit: cover; }
.td-history__top-captions { display: flex; flex-direction: column; gap: 2px; align-self: flex-start; text-align: left; margin-top: 12px; }
.td-history__top-captions .caption1 { color: var(--color-primary-brown); text-align: left; }

.td-history__text { width: 100%; }
.td-history__title { color: var(--color-accent-orange); font-weight: 700; font-size: 18px; line-height: 26px; margin-bottom: 16px; }
.td-history__subtitle { font-weight: 700; font-size: 20px; line-height: 28px; color: var(--color-primary-brown); margin-bottom: 12px; }
.td-history__text .body2 { text-align: justify; }

.td-history__columns { display: flex; gap: 24px; }
.td-history__col-left { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.td-history__portrait { width: 248px; }
.td-history__portrait img { width: 100%; height: 351px; object-fit: cover; }
.td-history__unesco-text { text-align: justify; font-size: 16px; line-height: 24px; }
.td-history__col-right { flex: 1; display: flex; flex-direction: column; gap: 32px; }
.td-history__architecture .body2,
.td-history__stories .body2 { text-align: justify; }
.td-history__bullets { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.td-history__bullets li { list-style: none; }

/* --- Tzu Chi section --- */
.td-tzuchi { background: var(--color-bg-beige); padding: 30px 20px 40px; }
.td-tzuchi__inner { max-width: var(--content-width); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.td-tzuchi__title { color: var(--color-accent-orange); font-weight: 700; font-size: 18px; line-height: 26px; margin-bottom: 8px; }
.td-tzuchi__inner > .body2 { text-align: justify; }
.td-tzuchi__list { margin: 4px 0 12px; display: flex; flex-direction: column; gap: 8px; }
.td-tzuchi__list li { list-style: none; }
.td-tzuchi__blueprint { width: 894px; max-width: 100%; margin: 24px auto 0; text-align: center; }
.td-tzuchi__blueprint img { width: 100%; height: auto; object-fit: cover; }
.td-tzuchi__blueprint .caption1 { margin-top: 8px; color: var(--color-primary-brown); }

/* --- Dark gallery --- */
.td-dark { background: var(--color-secondary-brown); padding: 40px 20px; }
.td-dark__inner { max-width: var(--content-width); margin: 0 auto; display: flex; gap: 24px; align-items: stretch; }
.td-dark__left { width: 539px; flex-shrink: 0; }
.td-dark__left img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--corner-small); }
.td-dark__right { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.td-dark__right-top img { width: 100%; height: 345px; object-fit: cover; border-radius: var(--corner-small); }
.td-dark__text { color: var(--color-white); text-align: justify; }
.td-dark__right-bottom { display: flex; flex-direction: column; gap: 4px; }
.td-dark__right-bottom img { width: 302px; height: 169px; object-fit: cover; border-radius: var(--corner-small); flex-shrink: 0; }
.td-dark__right-bottom-captions { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.td-dark__right-bottom-captions .caption1 { color: var(--color-copyright); }

/* --- Activity + Quote --- */
.td-activity { background: var(--color-bg-beige); padding: 40px 20px 60px; }
.td-activity__inner { max-width: var(--content-width); margin: 0 auto; display: flex; flex-direction: column; gap: 32px; align-items: center; }
.td-activity__top-row { display: flex; gap: 24px; align-items: flex-start; justify-content: center; }
.td-activity__top-text { width: 379px; flex-shrink: 0; text-align: justify; }
.td-activity__top-photo { flex-shrink: 0; }
.td-activity__top-photo img { width: 176px; height: 132px; object-fit: cover; border-radius: var(--corner-small); }
.td-activity__top-photo .caption1 { margin-top: 4px; color: var(--color-primary-brown); max-width: 176px; }
.td-activity__bottom-row { display: flex; gap: 24px; align-items: flex-start; }
.td-activity__bottom-photo { flex-shrink: 0; }
.td-activity__bottom-photo img { width: 480px; height: 320px; object-fit: cover; border-radius: var(--corner-small); }
.td-activity__bottom-photo .caption1 { margin-top: 8px; color: var(--color-primary-brown); max-width: 480px; }
.td-activity__quote { width: 376px; display: flex; flex-direction: column; gap: 12px; }
.td-activity__quote-title { font-family: 'Noto Serif TC', serif; font-weight: 700; font-size: 24px; line-height: 32px; color: var(--color-primary-brown); }
.td-activity__quote .body2 { text-align: justify; }

/* ============================================
   RESPONSIVE — Tablet (768px–1199px)
   ============================================ */
@media (max-width: 1199px) {
  :root {
    --section-px: 40px;
  }
  body { padding-top: 0; }

  /* Navbar */
  .navbar__inner { padding: 16px 20px; }
  .navbar__content { width: 100%; }
  .navbar__logo-icon { width: 50px; }
  .navbar__logo-title { width: 80px; height: 58px; }
  .navbar__link { padding: 0 12px; font-size: 16px; }
  .navbar__cta { font-size: 16px; }

  /* Hero */
  .hero-banner { }
  .hero-a__content { padding: 0 20px; }
  .hero-a__text { padding-top: 120px; max-width: 340px; }
  .hero-a__explore { margin-top: 40px; }
  .hero-a__poster { width: 240px; height: 430px; margin-top: 30px; }
  .hero-a__play-btn { width: 64px; height: 64px; }

  /* Why Visit */
  .why-visit__col { width: auto; flex: 1; min-width: 0; padding: 0 12px; }

  /* Highlights */
  .highlights__col { width: auto; flex: 1; min-width: 0; padding: 0 12px; }

  /* Eight Topics */
  .eight-topics__header { flex-direction: column; align-items: flex-start; }
  .eight-topics__logo-img { width: 180px; height: auto; }
  .eight-topics__grid { grid-template-columns: repeat(2, 1fr); }
  .topic-card__text { white-space: normal; }

  /* Exhibition Info */
  .venue-card { padding: 24px; }
  .venue-card__values { white-space: normal; }

  /* Video */
  .video-section__featured { width: 65%; }
  .video-section__sidebar-thumb { width: 100%; }

  /* Quote */
  .quote-section { height: 360px; }

  /* Footer */
  .site-footer__inner { flex-wrap: wrap; gap: 32px; }

  /* Topic Detail */
  .topic-detail__hero-content-row { flex-direction: column; }
  .topic-detail__hero-text { width: 100%; }
  .topic-detail__hero-images { height: auto; }
  .topic-detail__hero-img-item img { height: 180px; }

  /* td-history */
  .td-history__top-images { width: 100%; margin-left: auto; margin-right: auto; }
  .td-history__top-img-large { width: 60%; }
  .td-history__top-img-side { width: 35%; }
  .td-history__columns { flex-direction: column; }
  .td-history__col-left { width: 100%; flex-direction: row; gap: 24px; align-items: flex-start; }
  .td-history__portrait { width: 200px; flex-shrink: 0; }
  .td-history__portrait img { height: auto; }
  .td-history__col-right { width: 100%; }

  /* Navbar sticky */
  .navbar { position: sticky; top: 0; }
  .navbar--hidden { top: -120px; }

  /* td-tzuchi */
  .td-tzuchi__blueprint { width: 100%; }
  .td-tzuchi__inner[style*="flex-direction: row"] { flex-direction: column !important; }
  .td-tzuchi__inner[style*="flex-direction: row"] > div[style*="width: 5"],
  .td-tzuchi__inner[style*="flex-direction: row"] > div[style*="width: 3"],
  .td-tzuchi__inner[style*="flex-direction: row"] > div[style*="flex-shrink: 0"] { width: 100% !important; flex-shrink: 1 !important; }
  .td-tzuchi__inner[style*="flex-direction: row"] img[style*="width: 5"],
  .td-tzuchi__inner[style*="flex-direction: row"] img[style*="width: 4"],
  .td-tzuchi__inner[style*="flex-direction: row"] img[style*="width: 3"] { width: 100% !important; height: auto !important; }

  /* Topic detail inline image responsive */
  .td-history__inner[style*="flex-direction: row"] { flex-direction: column !important; }
  .td-history__inner[style*="flex-direction: row"] > div[style*="width: 5"] { width: 100% !important; }
  .td-history__inner[style*="flex-direction: row"] > div[style*="width: 5"] img { width: 100% !important; height: auto !important; }

  /* Topic 2 dark section */
  .td-dark__inner[style*="padding: 0 201px"] { padding: 0 40px !important; }
  .td-dark__inner img[style*="width: 29"],
  .td-dark__inner img[style*="width: 28"] { width: 100% !important; height: auto !important; }

  /* Inline fixed-width images in td-history */
  .td-history__col-right img[style*="width: 4"] { width: 100% !important; height: auto !important; }
  .td-history__inner div[style*="max-width: 780px"] { max-width: 100% !important; flex-direction: column !important; }
  .td-history__inner div[style*="max-width: 780px"] img[style*="width: 298px"] { width: 100% !important; height: auto !important; }

  /* td-dark */
  .td-dark__inner { flex-direction: column; }
  .td-dark__left { width: 100%; }
  .td-dark__left img { height: 400px; }
  .td-dark__right-top img { height: auto; }
  .td-dark__right-bottom img { width: 250px; height: auto; }

  /* td-activity */
  .td-activity__top-text { width: auto; flex: 1; }
  .td-activity__bottom-row { flex-direction: column; }
  .td-activity__bottom-photo img { width: 100%; height: auto; }
  .td-activity__quote { width: 100%; }
}

/* ============================================
   RESPONSIVE — Mobile (< 768px)
   ============================================ */
@media (max-width: 767px) {
  :root {
    --section-px: 20px;
  }
  body { padding-top: 0; }

  /* Typography scale down */
  .headline1 { font-size: 24px; line-height: 32px; }
  .headline2 { font-size: 20px; line-height: 28px; }
  .headline3 { font-size: 20px; line-height: 28px; }
  .title1 { font-size: 18px; line-height: 26px; }
  .title3 { font-size: 18px; line-height: 26px; }
  .body1 { font-size: 16px; line-height: 24px; }
  .body2 { font-size: 16px; line-height: 24px; }

  /* Navbar — hide links, show bubble */
  .navbar__inner { padding: 12px 16px; }
  .navbar__content { width: 100%; }
  .navbar__logo-icon { width: 40px; }
  .navbar__logo-title { width: 70px; height: 50px; }
  .navbar__links { display: none; }

  .bubble-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: var(--color-secondary-brown);
    border-radius: 50%;
    padding: 12px;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    flex-shrink: 0;
    margin-left: auto;
  }
  .bubble-toggle__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
  }
  .bubble-toggle.active .bubble-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .bubble-toggle.active .bubble-toggle__bar:nth-child(2) {
    opacity: 0;
  }
  .bubble-toggle.active .bubble-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Bubble menu panel */
  .bubble-menu { display: block; }
  .bubble-menu:not(.open) { pointer-events: none; }

  .bubble-menu__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 150;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .bubble-menu.open .bubble-menu__overlay { opacity: 1; }
  .bubble-menu:not(.open) .bubble-menu__overlay { pointer-events: none; }

  .bubble-menu__panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    background: var(--color-bg-beige);
    z-index: 160;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    padding: 80px 32px 40px;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  }
  .bubble-menu.open .bubble-menu__panel { transform: translateX(0); }

  .bubble-menu__close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 32px;
    color: var(--color-primary-brown);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bubble-menu__nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .bubble-menu__link {
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-nav-blue);
    padding: 12px 0;
    border-bottom: 1px solid rgba(81,68,59,0.1);
  }
  .bubble-menu__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-secondary-brown);
    color: var(--color-white);
    font-weight: 700;
    font-size: 18px;
    padding: 12px;
    border-radius: var(--corner-small);
    margin-top: 16px;
  }

  /* Hero Banner */
  .hero-banner { }
  .hero-slide { position: relative; }
  .hero-slide--a { padding-bottom: 40px; }
  .hero-a__bg { pointer-events: none; }
  .hero-a__content { flex-direction: column; align-items: center; padding: 0 20px; height: auto; }
  .hero-a__text { padding-top: 32px; max-width: 100%; text-align: center; align-items: center; gap: 16px; }
  .hero-a__tag { align-self: center; }
  .hero-a__explore { margin-top: 16px; }
  .hero-a__poster { width: 180px; height: 310px; margin-top: 20px; }
  .hero-a__play-btn { width: 48px; height: 48px; }
  .hero-slide--b { min-height: 300px; }
  .hero-b__bg-img { min-height: 300px; }

  /* Why Visit */
  .why-visit { padding: 24px 20px 40px; }
  .why-visit__columns { flex-direction: column; align-items: center; gap: 24px; }
  .why-visit__col { width: 100%; max-width: 320px; }

  /* Highlights */
  .highlights { padding: 24px 20px 40px; }
  .highlights__columns { flex-direction: column; align-items: center; gap: 24px; }
  .highlights__col { width: 100%; max-width: 320px; }

  /* Eight Topics */
  .eight-topics { padding: 24px 20px 40px; }
  .eight-topics__header { flex-direction: column; align-items: center; text-align: center; }
  .eight-topics__logo-img { width: 160px; height: auto; }
  .eight-topics__grid { grid-template-columns: 1fr; gap: 16px; max-width: 380px; margin: 0 auto; }
  .topic-card { height: 128px; }
  .topic-card__text { white-space: normal; }
  .topic-card__number { font-size: 40px; }
  .topic-card__circle { width: 64px; height: 64px; }

  /* Exhibition Info */
  .exhibition-info { padding: 24px 20px 40px; }
  .exhibition-info__cards { flex-direction: column; }
  .venue-card { padding: 20px; }
  .venue-card__info { flex-direction: column; gap: 8px; }
  .venue-card__labels { flex-direction: row; flex-wrap: wrap; gap: 0; }
  .venue-card__values { gap: 0; }
  .venue-card__info { flex-direction: row; gap: 12px; }
  .venue-card__labels { flex-direction: column; }
  .venue-card__values { white-space: normal; }
  .venue-card__map { height: 160px; }
  .venue-card__buttons { flex-direction: column; gap: 8px; }
  .venue-btn { font-size: 16px; padding: 8px 12px; }

  /* Video */
  .video-section { padding: 40px 20px; }
  .video-section__content { display: flex; flex-direction: column; gap: 24px; }
  .video-section__featured { width: 100%; }
  .video-section__sidebar { position: static; flex-direction: row; gap: 12px; overflow-x: auto; overflow-y: hidden; width: 100%; }
  .video-section__sidebar-item { flex-shrink: 0; width: 200px; }
  .video-section__sidebar-thumb { width: 200px; }

  /* Quote */
  .quote-section { height: 300px; }
  .quote-section__content { padding: 30px 20px 60px; }

  /* FAQ */
  .faq-section { padding: 40px 20px; }
  .faq-item__answer { padding-left: 36px; padding-right: 0; }

  /* Footer */
  .site-footer { padding: 40px 20px; }
  .site-footer__inner { flex-direction: column; gap: 24px; }
  .fab-group { bottom: 20px; right: 16px; }
  .fab-booking { width: 72px; height: 72px; border-radius: 50%; gap: 4px; padding: 0; }
  .fab-booking img { width: 24px; height: 24px; }
  .fab-booking span { font-size: 12px; line-height: 16px; }

  /* Copyright */
  .copyright { padding: 12px 20px; }
  .copyright p { font-size: 14px; }

  /* Topic Detail */
  .topic-detail__hero-title-row { flex-direction: column; gap: 12px; }
  .topic-detail__hero-content-row { flex-direction: column; }
  .topic-detail__hero-text { width: 100%; }
  .topic-detail__hero-images { height: auto; flex-direction: column; }
  .topic-detail__hero-img-item img { height: auto; }
  .topic-detail__hero-number { font-size: 40px; }
  .topic-detail__hero-circle { width: 64px; height: 64px; }
  .topic-detail__hero-title { font-size: 20px; }

  /* td-history */
  .td-history__top-images { flex-direction: column; width: 100%; margin-left: auto; margin-right: auto; }
  .td-history__top-img-large { width: 100%; }
  .td-history__top-img-side { width: 100%; flex-direction: row; align-items: flex-start; gap: 12px; }
  .td-history__top-img-side img { width: 120px; }
  .td-history__columns { flex-direction: column; }
  .td-history__col-left { width: 100%; flex-direction: column; }
  .td-history__portrait { width: 100%; }
  .td-history__portrait img { height: auto; width: 100%; }
  .td-history__col-right { width: 100%; }

  /* Navbar sticky */
  .navbar { position: sticky; top: 0; }
  .navbar--hidden { top: -120px; }

  /* ===== Topic 2-8 Mobile RWD: Global inline style overrides ===== */

  /* All inline flex-direction:row inside topic sections → column */
  .td-tzuchi__inner[style*="flex-direction: row"],
  .td-history__inner[style*="flex-direction: row"] { flex-direction: column !important; gap: 20px !important; }

  /* All fixed-width children → full width */
  .td-tzuchi__inner > div[style*="width:"],
  .td-tzuchi__inner > div[style*="flex-shrink: 0"],
  .td-history__inner > div[style*="width:"],
  .td-history__inner > div[style*="flex-shrink: 0"] { width: 100% !important; flex-shrink: 1 !important; }

  /* All inline-styled images with fixed pixel widths → responsive (exclude small icons & percentage widths) */
  .td-tzuchi__inner > div img[style*="width:"][style*="px"],
  .td-history__inner > div img[style*="width:"][style*="px"],
  .td-dark__inner > div img[style*="width:"][style*="px"] { max-width: 100% !important; height: auto !important; }
  /* Protect small icons from being stretched */
  .site-footer__inner img { width: auto !important; height: auto !important; }
  .topic-cta__btn img { width: 16px !important; height: 16px !important; }

  /* Topic 2 dark section padding */
  .td-dark__inner[style*="padding: 0 201px"] { padding: 0 20px !important; flex-direction: column !important; }
  .td-dark__inner div[style*="flex-shrink: 0"] { flex-shrink: 1 !important; }

  /* Hero content row children → full width */
  .topic-detail__hero-content-row > div[style*="flex-shrink"],
  .topic-detail__hero-content-row > div[style*="width:"] { width: 100% !important; }
  .topic-detail__hero-inner > div[style*="display: flex"][style*="align-items"] { flex-direction: column !important; }

  /* All nested flex containers with gap inside main sections → stack */
  main .td-tzuchi__inner div[style*="display: flex"][style*="gap:"],
  main .td-history__inner div[style*="display: flex"][style*="gap:"],
  main .td-dark__inner div[style*="display: flex"][style*="gap:"] { flex-wrap: wrap !important; }

  /* Image+caption side-by-side pairs → stack */
  main section div[style*="display: flex"][style*="gap: 8px"] { flex-direction: column !important; }
  main section div[style*="display: flex"][style*="gap: 8px"] img[style*="width:"] { width: 100% !important; height: auto !important; }
  main section div[style*="display: flex"][style*="gap: 8px"] .small2,
  main section div[style*="display: flex"][style*="gap: 8px"] div[style*="width: 29"],
  main section div[style*="display: flex"][style*="gap: 8px"] div[style*="width: 2"] { width: 100% !important; }

  /* Multi-column image grids → stack (only containers with images, not CTA) */
  main section div[style*="display: flex"][style*="justify-content: center"][style*="gap: 2"] { flex-direction: column !important; }
  main section div[style*="display: flex"][style*="justify-content: space-between"] { flex-direction: column !important; }
  main section div[style*="display: flex"][style*="justify-content: space-between"] > img,
  main section div[style*="display: flex"][style*="justify-content: space-between"] > div { width: 100% !important; }

  /* Gallery image grids (topic 6 & 7) — only images with inline width styles, exclude t6-detail-imgs */
  main section div[style*="display: flex"][style*="gap: 24px"] > div[style*="display: flex"][style*="flex-direction: column"]:not(.t6-detail-imgs) { width: 100% !important; }
  main section div[style*="display: flex"][style*="gap: 24px"] > div[style*="display: flex"][style*="flex-direction: column"]:not(.t6-detail-imgs) img[style*="width:"] { width: 100% !important; height: auto !important; }

  /* Background-image containers → full width */
  main section div[style*="background: url"] { width: 100% !important; min-height: 250px !important; }

  /* Topic 6: swap desktop/mobile layout */
  .t6-history__desktop { display: none !important; }
  .t6-history__mobile { display: block !important; }
  .t6-detail-imgs { flex-direction: row !important; gap: 12px !important; }
  .t6-detail-imgs img { width: calc(50% - 6px) !important; }

  /* Topic 2 inscription */
  .td-history__inner div[style*="max-width: 780px"] { max-width: 100% !important; flex-direction: column !important; }
  .td-history__inner div[style*="max-width: 780px"] img[style*="width:"] { width: 100% !important; height: auto !important; }

  /* Title rows with flex baseline alignment */
  .td-history__stories div[style*="display: flex"][style*="align-items: baseline"],
  main section div[style*="display: flex"][style*="align-items: baseline"] { flex-wrap: wrap !important; }

  /* Fixed-width text containers */
  main section .small2[style*="width:"],
  main section .caption1[style*="width:"],
  main section div[style*="width: 30"],
  main section div[style*="width: 29"],
  main section div[style*="width: 20"] { width: 100% !important; }

  .td-tzuchi__blueprint { width: 100%; }

  /* td-dark — all !important to override inline styles */
  .td-dark__inner { flex-direction: column !important; }
  .td-dark__left { width: 100% !important; flex-shrink: 1 !important; }
  .td-dark__left img { width: 100% !important; height: auto !important; }
  .td-dark__right-top img { height: auto !important; }
  .td-dark__right-bottom { flex-direction: column !important; }
  .td-dark__right-bottom img { width: 100% !important; height: auto !important; }

  /* td-activity — override inline padding/widths */
  .td-activity__inner { padding: 0 !important; }
  .td-activity__inner > div[style*="padding:"] { padding: 0 !important; }
  .td-activity__inner > div[style*="display: flex"] { flex-wrap: wrap !important; padding: 0 !important; }
  .td-activity__inner img[style*="width:"] { width: 100% !important; max-width: 100% !important; height: auto !important; }
  .td-activity__inner p[style*="width:"] { width: 100% !important; }
  .td-activity__inner div[style*="flex-shrink: 0"] { flex-shrink: 1 !important; width: 100% !important; }
  .td-activity__top-row { flex-direction: column; }
  .td-activity__top-text { width: 100%; }
  .td-activity__top-photo img { width: 100%; height: auto; }
  .td-activity__bottom-row { flex-direction: column; }
  .td-activity__bottom-photo img { width: 100%; height: auto; }
  .td-activity__quote { width: 100%; }

  /* Global: ALL inline flex-shrink:0 inside main → allow shrink */
  main section div[style*="flex-shrink: 0"] { flex-shrink: 1 !important; }
  main section [style*="flex-shrink: 0"] { flex-shrink: 1 !important; }

  /* Global: ALL inline fixed pixel widths on images → responsive */
  main section img[style*="width:"][style*="px"] { max-width: 100% !important; height: auto !important; }

  /* Global: ALL inline padding > 100px → remove */
  main section div[style*="padding: 0 2"],
  main section div[style*="padding: 0 3"] { padding: 0 !important; }
}