@font-face {
  font-family: "China Sans";
  src: url("/assets/fonts/noto-sans-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "China Sans";
  src: url("/assets/fonts/noto-sans-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "China Sans";
  src: url("/assets/fonts/noto-sans-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "China Serif";
  src: url("/assets/fonts/noto-serif-sc-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "China Serif";
  src: url("/assets/fonts/noto-serif-sc-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Luxury Display";
  src: url("/assets/fonts/cormorant-garamond-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Luxury Display";
  src: url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --lacquer: #160f0d;
  --cinnabar: #8f1d1d;
  --cinnabar-bright: #b43227;
  --gold: #c79a43;
  --gold-light: #efd69a;
  --jade: #164f49;
  --ink: #211915;
  --paper: #fffaf0;
  --paper-deep: #f4ead6;
  --line: #d7bd83;
}

body {
  color: var(--ink);
  background: var(--paper);
  font-family: "China Sans", "Noto Sans", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  font-kerning: normal;
  font-optical-sizing: auto;
}

button, input, select, textarea { font-family: inherit; }

a { color: var(--cinnabar); }
a:hover { color: var(--jade); }

header {
  padding-top: 16px;
  padding-bottom: 16px;
  background: linear-gradient(90deg, #120b09 0%, #2b0e0d 50%, #120b09 100%);
  border: 0;
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 9px 28px #16070642;
}

header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 20px, transparent 20px 28px, var(--gold-light) 28px 32px, transparent 32px 40px);
  opacity: .72;
}

header .brand { color: #fff7df; text-shadow: 0 1px 8px #000; }
.brand small { color: #d7bd83; }
.brand img { filter: drop-shadow(0 2px 5px #000); }
nav > a, summary { color: #fff3d2; font-family: "China Sans", "Noto Sans", Arial, sans-serif; letter-spacing: .18px; }
nav > a:hover, summary:hover, details[open] > summary { color: var(--gold-light); }
.dropdown { top: 41px; background: #24120f; border: 1px solid var(--gold); box-shadow: 0 18px 38px #10070580; }
.dropdown a, details > a { color: #fff3d2; }
.dropdown a:hover, details > a:hover { color: var(--gold-light); background: #8f1d1d55; }

.contact, .button {
  background: linear-gradient(135deg, #8f1d1d, #b43227);
  border: 1px solid #dfbd69;
  color: #fff8df;
  box-shadow: inset 0 0 0 1px #7d1313, 0 6px 16px #5011112e;
  text-transform: uppercase;
  letter-spacing: 1.15px;
}

.contact:hover, .button:hover { background: linear-gradient(135deg, #a72821, #cb4234); border-color: var(--gold-light); color: #fff; }
.menu { color: #fff3d2; border-color: #b88a3d; background: #471817; }

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--lacquer);
  border-bottom: 5px solid var(--gold);
  isolation: isolate;
}

.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, #1b0709e6 0%, #5f1414a8 42%, #0b151138 72%, transparent 100%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: repeating-linear-gradient(135deg, transparent 0 12px, #d4ad69 12px 15px, transparent 15px 27px); opacity: .75; }
.hero > div { position: relative; padding-left: 28px; border-left: 4px solid var(--gold); }
.hero h1 { font-family: "Luxury Display", "China Serif", "Noto Serif SC", "Songti SC", Georgia, serif; font-weight: 600; color: #fff9e9; text-shadow: 0 3px 18px #090000b8; letter-spacing: -.2px; font-kerning: normal; }
.hero.home h1 { font-family: "Luxury Display", "China Serif", Georgia, serif; font-weight: 600; letter-spacing: -.25px; }
.hero.home > div { z-index: 2; max-width: min(57vw, 760px); }
.home-emperor { position: absolute; z-index: 1; right: clamp(12px, 4vw, 78px); bottom: -2%; width: auto; height: 98%; max-width: 44vw; object-fit: contain; object-position: right bottom; border-radius: 0; filter: drop-shadow(0 22px 22px #0800008c); pointer-events: none; user-select: none; }
.home-opera-dan { right: clamp(-10px, 1.5vw, 34px); bottom: -9%; height: 112%; max-width: 50vw; filter: drop-shadow(0 24px 24px #08000099); }
.hero p:not(.eyebrow) { color: #fff4dc; text-shadow: 0 2px 8px #000; }
.eyebrow, .wc-section-label { color: var(--gold-light); font-family: "China Sans", "Noto Sans", Arial, sans-serif; letter-spacing: 2.6px; }
.hero .button { background: linear-gradient(135deg, #d6aa51, #f0d591); border-color: #f8e4ae; color: #3a170c; box-shadow: 0 8px 22px #0006; }
.hero .button:hover { background: #fff0bc; color: #701a17; }
.back { color: #fff4d2; }
.back:hover { color: #fff; }


.content-section { position: relative; background: var(--paper); border-bottom: 1px solid var(--line); }
.content-section:nth-of-type(even) { background: linear-gradient(135deg, #f8efdd, #fffaf1 48%, #f3e5cd); }
.content-section:not(.gallery)::before { content: ""; position: absolute; left: 45px; top: 0; width: 72px; height: 3px; background: var(--cinnabar); box-shadow: 79px 0 0 var(--gold); }
h2, h3, .wc-day > summary, .gate-copy strong { color: #5f1715; font-family: "Luxury Display", "China Serif", "Noto Serif SC", "Songti SC", Georgia, serif; font-kerning: normal; }
h2 { letter-spacing: -.3px; }
h3 { letter-spacing: -.08px; }
h2::after { content: ""; display: block; width: 64px; height: 2px; margin-top: 14px; background: linear-gradient(90deg, var(--cinnabar), var(--gold), transparent); }
h3 { color: #2d201a; }
.content-section > img, .card img { border: 1px solid #d5b66e; box-shadow: 0 12px 30px #4a1e1324; }
.grid { gap: 32px; }
.card { position: relative; }
.directory a { background: #fffaf0; border: 1px solid var(--line); box-shadow: 0 6px 20px #5d2a1614; transition: transform .2s ease, box-shadow .2s ease; }
.directory a:hover { background: #fff3da; transform: translateY(-3px); box-shadow: 0 14px 28px #5d2a1625; }
table { background: #fffdf8; }
td, th { border-color: #d5c092; }
th { background: #841d1b; color: #fff6df; }

.inquiry { position: relative; background: linear-gradient(135deg, #28100e, #681a18); border: 1px solid var(--gold); color: #fff1d4; box-shadow: 0 14px 38px #42130f30; }
.inquiry h2, .inquiry h3 { color: #fff6df; }
.inquiry a:not(.button) { color: #f0cf81; }

footer { position: relative; background: linear-gradient(125deg, #120b09, #431311 55%, #120b09); border-top: 5px solid var(--gold); color: #f3e5c6; }
footer::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: #e5c67688; }
footer h2 { color: #fff5d9; }
footer h2::after { background: linear-gradient(90deg, var(--gold), transparent); }
footer a { color: #e9cf96; }
footer a:hover { color: white; }
.copyright { border-color: #8f6938; }

.logo-section { background: #fffaf0 !important; }
.logo-group + .logo-group { border-color: #d7bd83; }
.logo-group h2 { color: #6e1b19; font-family: "China Sans", "Noto Sans", Arial, sans-serif; }
.media-logos figure, .award-logos figure { background: #fff; border: 1px solid #ead8b2; padding: 16px; box-shadow: 0 7px 22px #67341a12; }
.award-logos figcaption { color: #6e1b19; }

.wc-section-label { color: #8f1d1d; }
.wc-tour-grid { gap: 30px; }
.wc-tour-card { position: relative; background: #fffdf8; border: 1px solid #d4b670; box-shadow: 0 10px 28px #4b20131c; transition: transform .25s ease, box-shadow .25s ease; }
.wc-tour-card::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--cinnabar), var(--gold), var(--cinnabar)); }
.wc-tour-card > a { color: var(--ink); }
.wc-tour-card > a > div { padding: 25px; }
.wc-tour-card h3 { color: #5f1715; }
.wc-tour-card:hover { transform: translateY(-5px); box-shadow: 0 20px 38px #4b201330; }
.wc-tour-card a:hover { background: #fff8e9; }
.wc-card-meta { color: #8f1d1d; font-family: "China Sans", "Noto Sans", Arial, sans-serif; text-transform: uppercase; letter-spacing: .8px; }
.wc-card-link { color: #8f1d1d; }
.wc-facts { border-color: #d6bc85; }
.wc-facts span { color: #8f1d1d; }
.wc-day { border-color: #d2b36e; background: #fffdf7; box-shadow: 0 7px 20px #5d2a1612; }
.wc-day > summary { color: #651916; }
.wc-filter { background: linear-gradient(135deg, #f0dfbd, #fff6e3); border: 1px solid #d3b36d; }
.wc-filter input, .wc-filters button { border-color: #c9aa65; background: #fffdf7; }
.wc-filters button[aria-pressed="true"] { background: var(--cinnabar); border-color: var(--gold); color: #fff8df; }
.gallery { background: #1b0e0b !important; border-top: 4px solid var(--gold); border-bottom: 4px solid var(--gold); }
.gallery img { border: 1px solid #c9a75f; box-shadow: 0 9px 25px #0008; }

@media (max-width: 1200px) {
  header { background: #1d0c0b; }
  nav { justify-content: center; }
  .hero.home > div { max-width: 61vw; }
  .home-emperor { right: -22px; height: 91%; max-width: 46vw; }
  .home-opera-dan { right: -30px; bottom: -8%; height: 104%; max-width: 52vw; }
}

@media (max-width: 700px) {
  header::before { opacity: .45; }
  .dropdown { background: #281210; border-color: #966c31; }
  .hero > div { padding-left: 18px; }
  .hero.home { align-items: flex-start; min-height: 560px; }
  .hero.home > div { max-width: 92%; }
  .home-emperor { right: -42px; bottom: -1%; height: 57%; max-width: 64vw; opacity: .9; }
  .home-opera-dan { right: -48px; bottom: -5%; height: 62%; max-width: 72vw; opacity: .94; }
  .content-section:not(.gallery)::before { left: 25px; }
  .content-section { background: #fffaf0; }
  .content-section:nth-of-type(even) { background: #f6ead3; }
  .wc-tour-card:hover, .directory a:hover { transform: none; }
  .media-logos figure, .award-logos figure { padding: 10px; }
}

/* Keep the homepage opera performer as a transparent overlay, independent of the framed gallery styles. */
.hero.home > .framed-photo-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.hero.home .framed-photo-grid > .photo-grid-frame {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.hero.home .home-opera-dan {
  background: transparent;
}

@media (max-width: 700px) {
  .hero.home { min-height: 620px; }
  .hero.home > .framed-photo-grid { max-width: none; }
  .hero.home .home-opera-dan {
    right: -20px;
    bottom: -2%;
    height: 43%;
    max-width: 66vw;
    opacity: .96;
  }
}

/* Homepage regional gateways */
.middle-kingdom-overview { max-width: 1400px; }
.middle-kingdom-intro { max-width: 880px; margin-bottom: 34px; font-size: 19px; }
.middle-kingdom-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.middle-kingdom-card { --card-color: var(--gold); position: relative; min-width: 0; padding: 28px 24px 24px; display: flex; flex-direction: column; background: #fffdf8; border: 1px solid #d7bd83; border-top: 6px solid var(--card-color); box-shadow: 0 12px 28px #4a1e131c; }
.middle-kingdom-card.north { --card-color: #c99531; background: linear-gradient(145deg, #fbf2d9, #fffdf8 54%); }
.middle-kingdom-card.south { --card-color: #18806f; background: linear-gradient(145deg, #e4f3ed, #fffdf8 54%); }
.middle-kingdom-card.west { --card-color: #426fa8; background: linear-gradient(145deg, #e8eef8, #fffdf8 54%); }
.middle-kingdom-card.east { --card-color: #b23b2e; background: linear-gradient(145deg, #f7e7e1, #fffdf8 54%); }
.middle-kingdom-card > span { color: var(--card-color); font: 700 12px/1.3 "China Sans", "Noto Sans", Arial, sans-serif; letter-spacing: 1.5px; }
.middle-kingdom-card h3 { margin: 12px 0 15px; color: #4f1715; font-size: 30px; }
.middle-kingdom-card p { margin-bottom: 17px; font-size: 15px; line-height: 1.7; }
.middle-kingdom-card strong { display: block; margin: auto 0 21px; color: #6c5146; font-size: 13px; line-height: 1.6; }
.middle-kingdom-card a { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid #ddc99d; color: var(--card-color); font-size: 14px; font-weight: 700; text-decoration: none; }
.middle-kingdom-card a:hover { color: #4f1715; }
.middle-kingdom-card a b { font-size: 21px; transition: transform .2s ease; }
.middle-kingdom-card a:hover b { transform: translateX(4px); }
.china-regions { overflow: hidden; }
.regions-intro { max-width: 780px; font-size: 19px; }
.region-gates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; perspective: 1200px; }
.region-gate { position: relative; min-height: 340px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; border: 2px solid var(--region-accent); color: #fff9e9; text-decoration: none; isolation: isolate; perspective: 950px; transform-style: preserve-3d; background-image: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(16,4,4,.12) 70%, rgba(16,4,4,.38) 100%), var(--region-image); background-size: cover; background-position: center; box-shadow: 0 18px 38px #48130d33; }
.region-gate.north { background-position: center 62%; }
.region-gate::before, .region-gate::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: 50.5%; background-color: #82161d; background-image: linear-gradient(90deg, #570a11 0%, transparent 13%, #f0a0901f 50%, transparent 79%, #52080e 100%), repeating-linear-gradient(90deg, transparent 0 38px, #4f0b123d 38px 40px), linear-gradient(180deg, #6a0d14 0%, #922029 18%, #a63339 48%, #861820 74%, #5b0a11 100%); border: 1px solid #c89a3b; transition: transform 2.2s cubic-bezier(.16,.72,.18,1), box-shadow 2.2s cubic-bezier(.16,.72,.18,1); will-change: transform; }
.region-gate::before { left: 0; transform-origin: left center; box-shadow: inset -8px 0 18px #35040875; }
.region-gate::after { right: 0; transform-origin: right center; box-shadow: inset 8px 0 18px #35040875; }
.region-gate:hover::before, .region-gate:focus-visible::before { transform: rotateY(72deg); box-shadow: inset -20px 0 26px #210205ad, 12px 0 20px #08000055; }
.region-gate:hover::after, .region-gate:focus-visible::after { transform: rotateY(-72deg); box-shadow: inset 20px 0 26px #210205ad, -12px 0 20px #08000055; }
.region-gate > span { position: relative; z-index: 3; }
.region-gate > .gate-hardware { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.gate-leaf-hardware { position: absolute; top: 0; bottom: 0; width: 50%; transition: transform 2.2s cubic-bezier(.16,.72,.18,1); will-change: transform; }
.gate-leaf-hardware.left { left: 0; transform-origin: left center; }
.gate-leaf-hardware.right { right: 0; transform-origin: right center; }
.gate-leaf-hardware img { position: absolute; top: 45%; width: 72px; height: 72px; object-fit: contain; transform: translateY(-50%); filter: drop-shadow(0 5px 6px #25050099) drop-shadow(0 0 2px #f3c76c99); }
.gate-leaf-hardware.left img { right: 24px; }
.gate-leaf-hardware.right img { left: 24px; }
.region-gate:hover .gate-leaf-hardware.left, .region-gate:focus-visible .gate-leaf-hardware.left { transform: rotateY(72deg); }
.region-gate:hover .gate-leaf-hardware.right, .region-gate:focus-visible .gate-leaf-hardware.right { transform: rotateY(-72deg); }
.gate-number { width: max-content; padding: 7px 12px; background: #2c0b09b8; border: 1px solid var(--region-accent); color: var(--region-accent); font: 700 13px/1.2 "China Sans","Noto Sans",Arial,sans-serif; letter-spacing: 1.5px; }
.gate-copy { display: flex; flex-direction: column; align-items: flex-start; text-shadow: 0 2px 12px #000; }
.gate-copy strong { font-size: clamp(31px, 4vw, 48px); font-weight: 400; line-height: 1.08; transition: color .45s ease, text-shadow .45s ease; }
.region-gate .gate-copy strong { color: #fff9e9; }
.region-gate:hover .gate-copy strong, .region-gate:focus-visible .gate-copy strong { color: #ffd166; text-shadow: 0 2px 12px #000, 0 0 18px #8f5410; transition-delay: 1.5s; }
.gate-copy small { max-width: 450px; margin: 10px 0 20px; font: 16px/1.6 "China Sans","Noto Sans",Arial,sans-serif; color: #fff0cb; }
.gate-copy b { padding: 10px 15px; border: 1px solid var(--region-accent); background: #240907c7; color: #fff7df; font: 700 14px/1.2 "China Sans","Noto Sans",Arial,sans-serif; letter-spacing: .9px; }
.region-gate:hover .gate-copy b, .region-gate:focus-visible .gate-copy b { color: #29100a; background: var(--region-accent); }

/* Three featured destinations in the requested order. */
.featured-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.featured-place { background: #fffdf8; border: 1px solid #d4b670; box-shadow: 0 14px 30px #4b20131f; }
.featured-place a { display: block; height: 100%; color: var(--ink); text-decoration: none; }
.featured-place img { width: 100%; height: 290px; object-fit: cover; border-radius: 0; }
.featured-place div { padding: 26px; }
.featured-place span { color: var(--cinnabar); font: 700 13px/1.3 "China Sans","Noto Sans",Arial,sans-serif; letter-spacing: 1.3px; }
.featured-place h3 { min-height: 64px; margin: 12px 0; color: #5f1715; }
.featured-place b { display: inline-block; margin-top: 8px; color: var(--cinnabar); font: 700 13px/1.3 "China Sans","Noto Sans",Arial,sans-serif; letter-spacing: .7px; }
.featured-place a:hover b { color: var(--jade); text-decoration: underline; }
.rank-one { border-top: 5px solid #c79a43; }
.rank-two { border-top: 5px solid #16806f; }
.rank-three { border-top: 5px solid #a82d25; }

/* Active and immersive experiences */
.immersive-heading { max-width: 850px; margin-bottom: 38px; }
.immersive-heading > p:last-child { font-size: 20px; }
.immersive-heading h2 { font-family: "Luxury Display", "China Serif", Georgia, serif; font-weight: 600; letter-spacing: -.2px; }
.experience-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.experience-feature { display: grid; grid-template-columns: 44% 1fr; min-height: 270px; background: #fffdf8; border: 1px solid #d5b66e; box-shadow: 0 12px 28px #4a1e131b; overflow: hidden; }
.experience-feature.reverse { grid-template-columns: 1fr 44%; }
.experience-feature.reverse img { order: 2; }
.experience-feature img { width: 100%; height: 100%; min-height: 270px; object-fit: cover; border-radius: 0; }
.experience-feature div { display: flex; flex-direction: column; justify-content: center; padding: 25px; }
.experience-feature span { color: var(--cinnabar); font: 700 13px/1.3 "China Sans","Noto Sans",Arial,sans-serif; letter-spacing: 1.3px; }

/* One clear tour-request path across every page. */
.tour-request-cta { text-align: center; }
.tour-request-cta .inquiry { max-width: 900px; margin: 0 auto; padding: 46px clamp(24px, 5vw, 64px); }
.tour-request-cta .inquiry h2 { margin-bottom: 18px; }
.tour-request-cta .inquiry h2::after { margin-left: auto; margin-right: auto; }
.tour-request-cta .inquiry p:not(.wc-section-label) { max-width: 680px; margin-left: auto; margin-right: auto; }
.tour-request-cta .button { margin-top: 8px; }
.request-form-section { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: clamp(34px, 6vw, 80px); align-items: start; }
.request-form-intro { position: sticky; top: 28px; }
.tour-request-form { padding: clamp(24px, 4vw, 42px); background: #fffdf8; border: 1px solid var(--line); box-shadow: 0 14px 38px #42130f1a; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.tour-request-form label { display: grid; gap: 8px; color: #4b1c18; font-weight: 600; font-size: 14px; }
.tour-request-form label span { color: var(--cinnabar); }
.tour-request-form input, .tour-request-form textarea { width: 100%; border: 1px solid #c9aa65; background: #fff; color: var(--ink); padding: 13px 14px; font: inherit; border-radius: 0; }
.tour-request-form input:focus, .tour-request-form textarea:focus { outline: 3px solid #d6aa5140; border-color: var(--cinnabar); }
.tour-request-form textarea { resize: vertical; min-height: 160px; }
.form-wide { grid-column: 1 / -1; }
.form-honey { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.form-submit { margin-top: 26px; cursor: pointer; }
.form-submit:disabled { cursor: wait; opacity: .72; }
.form-status { min-height: 28px; margin: 18px 0 0; color: #8f1d1d; font-weight: 600; }
.form-status.success { color: var(--jade); }
.form-note { margin: 4px 0 0; font-size: 14px; }
.experience-photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.experience-photo-grid img { width: 100%; height: 185px; margin: 0; object-fit: cover; border: 1px solid #d5b66e; border-radius: 0; box-shadow: 0 7px 18px #4a1e1324; cursor: zoom-in; transition: transform .2s ease, box-shadow .2s ease; }
.experience-photo-grid img:hover { transform: translateY(-3px); box-shadow: 0 12px 24px #4a1e1338; }
@media (max-width: 950px) {
  .experience-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .request-form-section { grid-template-columns: 1fr; }
  .request-form-intro { position: static; }
  .form-grid { grid-template-columns: 1fr; }
  .form-wide { grid-column: auto; }
}
@media (max-width: 600px) {
  .experience-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .experience-photo-grid img { height: 135px; }
}

/* About China Adventure */
.about-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: clamp(36px, 6vw, 78px); align-items: center; }
.about-intro-image img { width: 100%; min-height: 380px; object-fit: cover; }
.about-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; padding: 1px; background: var(--gold); }
.about-facts div { min-height: 150px; padding: 28px 22px; display: flex; flex-direction: column; justify-content: center; text-align: center; background: #2b0e0d; color: #fff4dc; }
.about-facts strong { color: var(--gold-light); font-family: "Luxury Display", "China Serif", Georgia, serif; font-size: clamp(34px, 4vw, 52px); font-weight: 600; line-height: 1; }
.about-facts span { margin-top: 13px; font-size: 14px; line-height: 1.5; }
.about-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.about-pillars article { padding: 30px; background: #fffdf8; border: 1px solid var(--line); box-shadow: 0 10px 28px #4b20131c; }
.about-pillars article::before { content: ""; display: block; width: 42px; height: 3px; margin-bottom: 22px; background: linear-gradient(90deg, var(--cinnabar), var(--gold)); }
.about-story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(34px, 6vw, 76px); }

/* Media exposure */
.media-intro { max-width: 900px; }
.media-featured { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); gap: 42px; align-items: center; }
.media-featured img { width: 100%; min-height: 380px; object-fit: cover; border: 1px solid #d5b66e; box-shadow: 0 14px 34px #4a1e1328; }
.media-coverage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.media-coverage-card { display: grid; grid-template-columns: 150px 1fr; min-height: 210px; background: #fffdf8; border: 1px solid #d5b66e; box-shadow: 0 10px 26px #4a1e131b; overflow: hidden; }
.media-coverage-card .media-mark { display: flex; align-items: center; justify-content: center; padding: 22px; background: #fff; border-right: 1px solid #ead8b2; }
.media-coverage-card .media-mark img { width: 100%; max-height: 68px; object-fit: contain; }
.media-coverage-card .media-mark.media-text { color: #5f1715; font: 600 23px/1.1 "Luxury Display", Georgia, serif; text-align: center; }
.media-coverage-card .media-copy { padding: 25px; }
.media-coverage-card h3 { margin: 0 0 10px; }
.media-coverage-card p { margin: 0 0 16px; font-size: 15px; line-height: 1.65; }
.media-coverage-card a { font-weight: 700; }
.media-note { padding: 22px 26px; background: #f4ead6; border-left: 4px solid var(--gold); color: #5b4940; font-size: 14px; }
@media (max-width: 850px) {
  .about-intro, .about-story, .media-featured, .media-coverage-grid { grid-template-columns: 1fr; }
  .about-intro-image img { min-height: 280px; }
  .media-featured img { min-height: 260px; }
  .about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-pillars { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .media-coverage-card { grid-template-columns: 1fr; }
  .media-coverage-card .media-mark { min-height: 110px; border-right: 0; border-bottom: 1px solid #ead8b2; }
  .media-coverage-card .media-mark img { max-width: 180px; }
}
.experience-feature h3 { margin: 10px 0 13px; font-size: 26px; }
.experience-feature p { margin: 0; font-size: 15px; line-height: 1.65; }
.regional-itinerary-index { max-width: 1400px; }

@media (max-width: 900px) {
  .middle-kingdom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .region-gates, .featured-three, .experience-mosaic { grid-template-columns: 1fr; }
  .featured-place h3 { min-height: 0; }
}

@media (max-width: 700px) {
  .middle-kingdom-grid { grid-template-columns: 1fr; }
  .middle-kingdom-card { padding: 25px 22px 22px; }
  .region-gate { min-height: 300px; padding: 23px; }
  .gate-leaf-hardware img { width: 58px; height: 58px; }
  .gate-leaf-hardware.left img { right: 14px; }
  .gate-leaf-hardware.right img { left: 14px; }
  .gate-copy strong { font-size: 34px; }
  .featured-place img { height: 235px; }
  .experience-feature, .experience-feature.reverse { grid-template-columns: 1fr; }
  .experience-feature.reverse img { order: 0; }
  .experience-feature img { height: 220px; min-height: 0; }
}

/* Touch screens open on the first tap, rather than simulating hover. */
@media (hover: none), (pointer: coarse), (max-width: 700px) {
  .region-gate:not(.is-open)::before,
  .region-gate:not(.is-open)::after,
  .region-gate:not(.is-open) .gate-leaf-hardware { transform: rotateY(0deg); }
  .region-gate:not(.is-open) .gate-copy strong { color: #fff9e9; transition-delay: 0s; }
  .region-gate:not(.is-open) .gate-copy b { color: #fff7df; background: #240907c7; }
}
.region-gate.is-open::before,
.region-gate.is-open .gate-leaf-hardware.left { transform: rotateY(72deg); }
.region-gate.is-open::after,
.region-gate.is-open .gate-leaf-hardware.right { transform: rotateY(-72deg); }
.region-gate.is-open .gate-copy strong { color: #ffd166; text-shadow: 0 2px 12px #000, 0 0 18px #8f5410; transition-delay: 1.5s; }
.region-gate.is-open .gate-copy b { color: #29100a; background: var(--region-accent); }
@media (prefers-reduced-motion: reduce) {
  .region-gate::before, .region-gate::after, .gate-leaf-hardware,
  .region-gate .gate-copy strong { transition: none; transition-delay: 0s; }
}

/* Compact framed itinerary photos */
main .framed-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px;align-items:start}
main .photo-grid-frame{margin:0;min-width:0;padding:8px;border:1px solid #d4ad69;background:#fff;box-shadow:0 4px 14px #092b3514}
main .framed-photo-grid .photo-grid-frame img{display:block;width:100%;height:210px;max-height:none;object-fit:contain;background:#f5f6f6;margin:0;border:0;box-shadow:none}
main .compact-photo-frame{width:100%;max-width:430px;margin:18px auto;padding:9px;border:1px solid #d4ad69;background:#fff;box-shadow:0 4px 14px #092b3514}
main .compact-photo-frame img{display:block;width:100%;height:auto;max-height:270px;object-fit:contain;margin:0}
@media(max-width:900px){main .framed-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){main .framed-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}main .photo-grid-frame{padding:5px}main .framed-photo-grid .photo-grid-frame img{height:140px}main .compact-photo-frame{max-width:360px}main .compact-photo-frame img{max-height:220px}}

/* Destination card photography */
main .destination-link-card .destination-card-photo{display:block;width:100%;height:210px;max-height:none;object-fit:cover;margin:0 0 20px;border:1px solid #d4ad69;flex:none}
@media(max-width:700px){main .destination-link-card .destination-card-photo{height:190px;margin-bottom:18px}}

.google-route-controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:20px 0}.google-route-controls label{font-size:16px;font-weight:700}.google-route-select{flex:1;min-width:0;padding:12px;font:inherit;font-size:16px;border:1px solid #b8c9cf;background:white;color:#123c47}.google-route-open{white-space:normal;text-align:center}.google-route-iframe{display:block;width:100%;height:480px;border:1px solid #d4ad69;background:#eef3f5}.google-route-caption{font-size:15px;line-height:1.6;color:#586d74}.google-route-stops{padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.google-route-stops li{padding:16px;border:1px solid #d4ad69;background:#fff;min-width:0}.map-stop-number{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:#a32623;color:white;border-radius:50%;font-size:15px;margin-right:10px}.google-route-stops a{font-size:16px;overflow-wrap:anywhere}.map-leg-link{display:block;margin:10px 0 0 38px;font-size:14px!important}.map-optional{font-size:14px;color:#94632b;margin-left:8px}@media(max-width:600px){.google-route-iframe{height:400px}.google-route-controls{display:block}.google-route-controls label{display:block;margin-bottom:8px}.google-route-select{width:100%}.google-route-open{display:block;margin-top:12px}.google-route-stops{grid-template-columns:1fr}}

/* The hero performer uses responsive overlay sizing instead of gallery dimensions. */
main .hero.home .framed-photo-grid .photo-grid-frame .home-opera-dan {
  position: absolute;
  width: auto;
  height: 112%;
  max-height: none;
  max-width: 50vw;
  right: clamp(-10px, 1.5vw, 34px);
  bottom: -9%;
  object-fit: contain;
  object-position: right bottom;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
  filter: drop-shadow(0 24px 24px #08000099);
}
@media (min-width: 701px) and (max-width: 1200px) {
  main .hero.home .framed-photo-grid .photo-grid-frame .home-opera-dan {
    right: -30px;
    bottom: -8%;
    height: 104%;
    max-width: 52vw;
  }
}
@media (max-width: 700px) {
  main .hero.home .framed-photo-grid .photo-grid-frame .home-opera-dan {
    right: 0;
    bottom: 0;
    height: 43%;
    max-width: 66vw;
    opacity: .96;
  }
}

.company-timeline{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:0}.company-timeline>li{display:grid;grid-template-columns:140px minmax(0,1fr);gap:30px;padding:28px 0;border-top:1px solid #d7bd83}.milestone-year{font:600 27px/1.3 Georgia,serif;color:#8f1d1d}.company-timeline h3{margin:0 0 12px}.company-timeline p{margin:0;max-width:820px}@media(max-width:700px){.company-timeline>li{grid-template-columns:1fr;gap:12px;padding:24px 0}.milestone-year{font-size:24px}}