@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@300;400;500;600;700&family=Noto+Serif+SC:wght@400;500;600;700;900&family=Noto+Sans+SC:wght@400;500;600&display=swap');

:root {
  --ink: #163b3d;
  --deep-ink: #0d282a;
  --coral: #c9513f;
  --coral-deep: #a84233;
  --paper: #f7f4ed;
  --sand: #e9e1d4;
  --sage: #9caf9f;
  --fog: #d7ddda;
  --muted: #617174;
  --line: #d7d0c4;
  --white: #fffdf8;
  --serif: "Noto Serif SC", "Songti SC", STSong, serif;
  --sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "DM Mono", "Noto Sans SC", monospace;
  --page: min(1180px, calc(100vw - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.75; margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.page-width { margin-inline: auto; width: var(--page); }
.sr-only { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.skip-link { background: var(--white); color: var(--ink); left: 15px; padding: 9px 15px; position: fixed; top: -65px; z-index: 10; }
.skip-link:focus { top: 15px; }

.site-header { align-items: center; color: var(--white); display: flex; justify-content: space-between; left: 0; padding: 22px 4.2vw; position: absolute; right: 0; top: 0; z-index: 3; }
.brand { align-items: center; display: inline-flex; gap: 10px; line-height: 1; }
.brand-symbol { display: flex; gap: 2px; height: 23px; transform: skewY(-23deg); width: 19px; }
.brand-symbol i { background: currentColor; display: block; height: 100%; width: 4px; }
.brand-symbol i:nth-child(2) { height: 73%; margin-top: 6px; }
.brand-symbol i:nth-child(3) { height: 46%; margin-top: 12px; }
.brand-copy { display: grid; gap: 3px; }
.brand-copy strong { font-size: 17px; font-weight: 600; letter-spacing: .09em; }
.brand-copy small { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.desktop-nav { display: flex; font-size: 14px; gap: 29px; margin-left: auto; margin-right: 52px; }
.desktop-nav a, .plan-link { transition: opacity .2s ease; }
.desktop-nav a:hover, .plan-link:hover { opacity: .66; }
.plan-link { border-bottom: 1px solid currentColor; font-size: 14px; padding-bottom: 3px; }
.language-link { border: 1px solid currentColor; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; line-height: 25px; min-width: 32px; text-align: center; }
.header-actions { align-items: center; display: flex; gap: 24px; }
.menu-toggle, .mobile-nav { display: none; }

.hero { color: var(--white); min-height: 790px; overflow: hidden; position: relative; }
.hero-image, .hero-veil { height: 100%; inset: 0; position: absolute; width: 100%; }
.hero-image { object-fit: cover; object-position: center 56%; }
.hero-veil { background: rgba(7, 29, 30, .44); }
.hero-inner { padding-top: clamp(215px, 26vh, 265px); position: relative; }
.kicker { color: var(--coral); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; margin: 0 0 17px; text-transform: uppercase; }
.kicker-light { color: #f8bd91; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 400; }
h1 { font-family: var(--serif); font-size: clamp(57px, 8.4vw, 108px); letter-spacing: .02em; line-height: 1.14; margin-bottom: 26px; }
.hero-summary { font-size: 18px; line-height: 1.9; margin-bottom: 33px; max-width: 490px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 27px; }
.button { align-items: center; border: 1px solid transparent; display: inline-flex; font-size: 14px; font-weight: 500; gap: 29px; justify-content: space-between; letter-spacing: .04em; min-height: 52px; padding: 0 18px; transition: background .2s ease, transform .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-coral { background: var(--coral); color: white; }
.button-coral:hover { background: var(--coral-deep); }
.button-light { background: var(--paper); color: var(--ink); min-width: 160px; }
.button-light:hover { background: var(--white); }
.hero-text-link { border-bottom: 1px solid #f8bd91; font-size: 14px; padding-bottom: 4px; }
.hero-reading { align-items: center; border-top: 1px solid rgba(255,255,255,.45); bottom: 28px; display: grid; gap: 30px; grid-template-columns: 80px 1fr; padding-top: 15px; position: absolute; }
.hero-reading p { color: #f8bd91; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; margin: 0; text-transform: uppercase; }
.hero-reading a { align-items: center; display: flex; font-size: 13px; justify-content: space-between; }
.hero-reading strong { font-weight: 400; }

.question-strip { background: var(--sand); }
.question-layout { align-items: center; display: grid; gap: 32px; grid-template-columns: 1fr minmax(310px, .86fr); padding-block: 48px 35px; }
h2 { font-family: var(--serif); font-size: clamp(39px, 4.8vw, 65px); letter-spacing: .02em; line-height: 1.23; margin-bottom: 0; }
.question-layout .kicker { margin-bottom: 10px; }
.question-form { align-items: center; border-bottom: 1px solid #8c9a96; display: flex; grid-column: 2; grid-row: 1; }
.question-form input { background: transparent; border: 0; color: var(--ink); font-size: 15px; outline: 0; padding: 10px 0; width: 100%; }
.question-form input::placeholder { color: #7d8580; opacity: 1; }
.question-form button { background: transparent; border: 0; color: var(--coral); font-size: 21px; padding: 5px 0 5px 16px; }
.question-result { color: var(--muted); font-size: 12px; grid-column: 2; margin: -22px 0 0; min-height: 24px; }
.question-result button { background: none; border: 0; border-bottom: 1px solid var(--coral); color: var(--ink); font-size: inherit; padding: 0; }

.section { padding-block: 128px; }
.section-top { align-items: end; display: flex; justify-content: space-between; margin-bottom: 47px; }
.underlined-link { border-bottom: 1px solid var(--coral); display: inline-flex; font-size: 14px; font-weight: 500; gap: 18px; padding-bottom: 4px; }
.feature-story { display: grid; grid-template-columns: 1.2fr .8fr; min-height: 525px; }
.feature-media { min-height: 460px; overflow: hidden; position: relative; }
.feature-media img { height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.75,.3,1); width: 100%; }
.feature-media:hover img { transform: scale(1.035); }
.image-tag { background: var(--coral); bottom: 0; color: white; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; padding: 12px 15px; position: absolute; right: 0; text-transform: uppercase; }
.feature-copy { background: var(--white); display: flex; flex-direction: column; padding: 48px 50px 40px; }
.article-meta { color: var(--coral); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; margin-bottom: 18px; text-transform: uppercase; }
.article-meta span { color: var(--muted); padding-inline: 5px; }
.feature-copy h3, .story-card h3 { font-family: var(--serif); letter-spacing: .02em; }
.feature-copy h3 { font-size: 39px; line-height: 1.32; margin-bottom: 20px; }
.feature-copy > p:not(.article-meta) { color: var(--muted); font-size: 15px; line-height: 1.9; margin-bottom: 28px; max-width: 390px; }
.text-arrow { border-bottom: 1px solid var(--line); display: inline-flex; font-size: 13px; gap: 19px; margin-top: auto; padding-bottom: 6px; width: max-content; }

.destinations { background: var(--deep-ink); color: var(--white); }
.destinations .kicker { color: #f8bd91; }
.section-note { color: #c1cfca; font-size: 14px; line-height: 1.9; margin: 0 0 7px; max-width: 290px; }
.destination-tabs { border-bottom: 1px solid rgba(255,255,255,.3); display: flex; gap: 30px; margin-bottom: 44px; overflow-x: auto; }
.tab { background: none; border: 0; color: #c1cfca; flex: 0 0 auto; font-size: 14px; padding: 0 0 14px; position: relative; }
.tab::after { background: #f8bd91; bottom: -1px; content: ""; height: 2px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; width: 100%; }
.tab.is-active { color: white; }
.tab.is-active::after { transform: scaleX(1); }
.destination-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); grid-template-rows: 245px 245px; }
.destination-tile { color: white; min-height: 0; overflow: hidden; position: relative; transition: opacity .25s ease, transform .25s ease; }
.destination-tile.is-filtered { display: none; }
.destination-tile-large { grid-row: span 2; }
.destination-tile-wide { grid-column: span 2; }
.destination-tile img { height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.75,.3,1); width: 100%; }
.destination-tile:hover img { transform: scale(1.045); }
.tile-shade { background: linear-gradient(0deg, rgba(8,30,31,.76), rgba(8,30,31,.04) 70%); inset: 0; position: absolute; }
.tile-content { bottom: 18px; display: flex; flex-direction: column; left: 19px; position: absolute; }
.tile-content em { color: #f8bd91; font-family: var(--mono); font-size: 9px; font-style: normal; letter-spacing: .08em; margin-bottom: 6px; }
.tile-content strong { font-family: var(--serif); font-size: 27px; font-weight: 400; letter-spacing: .04em; line-height: 1.25; }
.tile-content small { font-size: 11px; margin-top: 4px; opacity: .92; }
.filter-message { color: #c1cfca; font-size: 13px; margin: 22px 0 0; min-height: 21px; }

.stories { align-items: start; display: grid; gap: min(10vw, 140px); grid-template-columns: .72fr 1.28fr; }
.stories-intro { position: sticky; top: 28px; }
.stories-intro h2 { margin-bottom: 24px; }
.stories-intro > p:not(.kicker) { color: var(--muted); font-size: 15px; line-height: 2; margin-bottom: 28px; max-width: 310px; }
.story-list { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.story-card { border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.story-card img { aspect-ratio: 4 / 5; margin-bottom: 21px; object-fit: cover; width: 100%; }
.story-card h3 { font-size: 27px; line-height: 1.47; margin-bottom: 24px; }
.story-card .article-meta { margin-bottom: 12px; }

.essentials { background: var(--sage); color: var(--deep-ink); }
.essentials .kicker { color: #804132; }
.essentials-layout { align-items: center; display: grid; gap: min(10vw, 140px); grid-template-columns: .77fr 1.23fr; }
.essentials-heading > p:not(.kicker) { font-size: 15px; line-height: 1.95; margin: 24px 0 0; max-width: 345px; }
.guide-list { border-top: 1px solid rgba(13,40,42,.42); }
.guide-list a { align-items: center; border-bottom: 1px solid rgba(13,40,42,.42); display: grid; gap: 20px; grid-template-columns: 30px 1fr 18px; padding: 18px 0; transition: padding .2s ease; }
.guide-list a:hover { padding-left: 8px; }
.guide-list span { color: #804132; font-family: var(--mono); font-size: 10px; }
.guide-list strong { font-family: var(--serif); font-size: 23px; font-weight: 400; letter-spacing: .01em; line-height: 1.4; }
.guide-list i { font-size: 18px; font-style: normal; }

.plan { background: var(--coral); color: white; overflow: hidden; }
.plan-inner { min-height: 570px; padding-block: 100px 86px; position: relative; }
.plan-inner::after { border: 1px solid rgba(255,255,255,.25); border-radius: 50%; content: ""; height: 560px; position: absolute; right: -130px; top: 65px; width: 560px; }
.plan h2 { font-size: clamp(48px, 6.5vw, 82px); line-height: 1.29; margin-bottom: 22px; position: relative; z-index: 1; }
.plan-inner > p:not(.kicker) { font-size: 17px; line-height: 1.95; margin-bottom: 30px; max-width: 430px; position: relative; z-index: 1; }
.plan .button, .plan small { position: relative; z-index: 1; }
.plan small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; margin-top: 24px; }

.site-footer { align-items: center; display: grid; gap: 22px; grid-template-columns: 1fr 1fr auto; min-height: 188px; }
.footer-brand { color: var(--ink); }
.site-footer > p { color: var(--muted); font-size: 13px; margin: 0; }
.footer-nav { display: flex; gap: 22px; justify-content: flex-end; }
.footer-nav a { border-bottom: 1px solid var(--line); font-size: 12px; padding-bottom: 3px; }
.copyright { grid-column: 1 / -1; margin-bottom: 23px !important; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 800px) {
  :root { --page: min(100% - 40px, 620px); }
  .site-header { padding: 20px; }
  .desktop-nav, .plan-link { display: none; }
  .menu-toggle { align-items: center; background: transparent; border: 0; color: white; display: flex; flex-direction: column; gap: 6px; height: 38px; justify-content: center; padding: 0; width: 38px; }
  .menu-toggle i { background: currentColor; display: block; height: 1px; transition: transform .2s ease; width: 22px; }
  .site-header.is-open .menu-toggle i:first-of-type { transform: translateY(3.5px) rotate(45deg); }
  .site-header.is-open .menu-toggle i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-nav { background: var(--ink); display: none; flex-direction: column; left: 0; padding: 82px 20px 23px; position: absolute; right: 0; top: 0; z-index: -1; }
  .site-header.is-open .mobile-nav { display: flex; }
  .mobile-nav a { border-bottom: 1px solid rgba(255,255,255,.2); font-size: 17px; padding: 12px 0; }
  .hero { min-height: 715px; }
  .hero-image { object-position: 56% center; }
  .hero-inner { padding-top: 185px; }
  h1 { font-size: clamp(52px, 16vw, 76px); }
  .hero-summary { font-size: 16px; max-width: 365px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .hero-reading { bottom: 21px; gap: 15px; grid-template-columns: 58px 1fr; }
  .hero-reading a { font-size: 11px; gap: 10px; }
  .question-layout { gap: 23px; grid-template-columns: 1fr; padding-block: 54px 38px; }
  .question-form { grid-column: auto; grid-row: auto; }
  .question-result { grid-column: auto; margin: -13px 0 0; }
  .section { padding-block: 86px; }
  .section-top { align-items: flex-start; flex-direction: column; gap: 20px; margin-bottom: 34px; }
  .feature-story { grid-template-columns: 1fr; }
  .feature-media { min-height: 350px; }
  .feature-copy { min-height: 400px; padding: 33px 26px 29px; }
  .feature-copy h3 { font-size: 34px; }
  .destination-tabs { gap: 23px; }
  .destination-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: 235px 205px 205px; }
  .destination-tile-large { grid-row: span 2; }
  .destination-tile-wide { grid-column: span 2; }
  .tile-content { bottom: 14px; left: 14px; }
  .tile-content strong { font-size: 23px; }
  .tile-content small { font-size: 10px; }
  .stories, .essentials-layout { gap: 46px; grid-template-columns: 1fr; }
  .stories-intro { position: static; }
  .story-list { gap: 13px; }
  .story-card h3 { font-size: 22px; }
  .essentials { padding-block: 80px; }
  .guide-list strong { font-size: 20px; }
  .plan-inner { min-height: 530px; padding-block: 80px 66px; }
  .plan-inner::after { height: 350px; right: -150px; top: 167px; width: 350px; }
  .site-footer { grid-template-columns: 1fr; padding-block: 43px 26px; }
  .footer-nav { justify-content: flex-start; }
  .copyright { grid-column: auto; }
}

@media (max-width: 420px) {
  .destination-grid { gap: 10px; grid-template-rows: 215px 190px 190px; }
  .brand-copy strong { font-size: 16px; }
  .story-list { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Chinese home: a light, editorial travel-community treatment. */
body.cq-home { --cq-green: #2d6a4f; --cq-green-deep: #1e3d2f; --cq-green-medium: #40916c; --cq-green-light: #52b788; --cq-green-soft: #d8eddf; --cq-blue: #a8dadc; --cq-blue-soft: #caf0f8; --cq-cream: #f7faf8; --cq-ink: #1a2e2a; --cq-muted: #4a6358; --cq-shadow: 0 12px 40px rgba(45, 106, 79, .10); --cq-shadow-hover: 0 24px 56px rgba(45, 106, 79, .16); background: var(--cq-cream); color: var(--cq-ink); font-family: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; padding-bottom: 0; }
.cq-home .cq-shell { margin-inline: auto; max-width: 1240px; padding-inline: 28px; width: 100%; }
.cq-home .site-header.cq-home-header { backdrop-filter: blur(14px); background: rgba(247, 250, 248, .92); border-bottom: 1px solid rgba(45, 106, 79, .10); color: var(--cq-ink); min-height: 72px; padding: 0 max(28px, calc((100vw - 1184px) / 2)); position: fixed; transition: background .35s ease, box-shadow .35s ease; }
.cq-home .cq-brand { color: var(--cq-ink); }
.cq-home .brand-symbol { color: var(--cq-green); }
.cq-home .brand-copy { gap: 4px; }
.cq-home .brand-copy strong { font-family: "Noto Serif SC", var(--serif); font-size: 19px; font-weight: 900; letter-spacing: .04em; }
.cq-home .brand-copy small { color: var(--cq-muted); font-family: var(--sans); font-size: 9px; letter-spacing: .08em; }
.cq-home .cq-desktop-nav { font-size: 14px; gap: 28px; margin-right: 36px; }
.cq-home .cq-desktop-nav a { padding: 25px 0 21px; position: relative; }
.cq-home .cq-desktop-nav a::after { background: var(--cq-green); bottom: 15px; content: ""; height: 2px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; width: 100%; }
.cq-home .cq-desktop-nav a:hover, .cq-home .cq-desktop-nav a.is-current { color: var(--cq-green); opacity: 1; }
.cq-home .cq-desktop-nav a:hover::after, .cq-home .cq-desktop-nav a.is-current::after { transform: scaleX(1); }
.cq-home .cq-header-actions { gap: 13px; }
.cq-home .cq-language { border-color: rgba(25, 53, 45, .32); color: var(--cq-green); line-height: 29px; }
.cq-account-link { color: var(--cq-green); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cq-account-link:hover { color: var(--cq-green-deep); }
.cq-publish-link { border: 1px solid rgba(45, 106, 79, .35); border-radius: 999px; color: var(--cq-green); font-size: 12px; font-weight: 600; padding: 5px 11px; }
.cq-publish-link:hover { background: var(--cq-green-soft); }
.cq-header-cta { background: var(--cq-green); border-radius: 999px; box-shadow: 0 4px 16px rgba(45, 106, 79, .23); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 15px; }
.cq-header-cta span { margin-left: 7px; }

.cq-hero { background: #d8eddf; min-height: 690px; overflow: hidden; padding: 136px 0 76px; position: relative; }
.cq-hero::before { background: #caf0f8; content: ""; inset: 0 0 0 auto; position: absolute; width: 37%; }
.cq-hero-grid { align-items: center; display: grid; gap: clamp(48px, 8vw, 110px); grid-template-columns: minmax(0, .94fr) minmax(370px, .86fr); position: relative; }
.cq-hero-copy { padding-left: 4.5%; }
.cq-eyebrow { color: var(--cq-green); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .13em; margin: 0 0 17px; text-transform: uppercase; }
.cq-eyebrow span { font-size: 14px; margin-right: 6px; }
.cq-home h1, .cq-home h2, .cq-home h3 { color: var(--cq-ink); font-family: "Noto Serif SC", var(--serif); font-weight: 700; letter-spacing: 0; }
.cq-home h1 { font-size: clamp(54px, 6.4vw, 83px); line-height: 1.18; margin-bottom: 19px; }
.cq-home h1 em, .cq-home h2 em { color: var(--cq-green); font-style: normal; }
.cq-hero-summary { color: var(--cq-muted); font-size: 16px; line-height: 1.95; margin: 0; max-width: 440px; }
.cq-hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 31px; }
.cq-button { align-items: center; border: 1px solid transparent; border-radius: 999px; display: inline-flex; font-family: inherit; font-size: 14px; font-weight: 600; gap: 17px; justify-content: space-between; min-height: 48px; padding: 0 24px; transition: background .35s ease, box-shadow .35s ease, transform .35s ease; }
.cq-button:hover { transform: translateY(-3px) scale(1.02); }
.cq-button-primary { background: var(--cq-green); color: #fff; box-shadow: 0 4px 16px rgba(45, 106, 79, .30); }
.cq-button-primary:hover { background: var(--cq-green-deep); }
.cq-button-secondary { border: 2px solid var(--cq-green); color: var(--cq-green); }
.cq-button-secondary:hover { background: var(--cq-green); box-shadow: 0 8px 24px rgba(45, 106, 79, .25); color: #fff; }
.cq-hero-stats { display: flex; gap: 36px; margin: 43px 0 0; }
.cq-hero-stats div { border-left: 1px solid rgba(40, 98, 72, .27); padding-left: 13px; }
.cq-hero-stats dt { color: var(--cq-green); font-family: var(--serif); font-size: 25px; font-weight: 600; line-height: 1.1; }
.cq-hero-stats dd { color: var(--cq-muted); font-size: 11px; margin: 5px 0 0; }
.cq-hero-media { min-height: 470px; padding-bottom: 45px; position: relative; }
.cq-hero-main-photo { border-radius: 20px; box-shadow: var(--cq-shadow); margin: 0; overflow: hidden; position: relative; }
.cq-hero-main-photo::after { background: rgba(13, 50, 36, .22); content: ""; inset: 0; pointer-events: none; position: absolute; }
.cq-hero-main-photo img { aspect-ratio: 1.05 / 1; height: 100%; object-fit: cover; width: 100%; }
.cq-hero-main-photo figcaption { bottom: 108px; color: #fff; display: grid; gap: 4px; left: 0; padding: 25px; position: absolute; z-index: 1; }
.cq-hero-main-photo figcaption span { font-size: 11px; opacity: .88; }
.cq-hero-main-photo figcaption strong { font-family: var(--serif); font-size: 23px; font-weight: 600; }
.cq-route-note { align-items: center; background: #fff; border-radius: 12px; bottom: 0; box-shadow: var(--cq-shadow); display: grid; gap: 13px; grid-template-columns: 37px 1fr 18px; left: -52px; max-width: 355px; padding: 17px; position: absolute; }
.cq-route-icon { align-items: center; background: var(--cq-green-soft); border-radius: 50%; color: var(--cq-green); display: inline-flex; font-family: var(--serif); font-size: 23px; height: 37px; justify-content: center; width: 37px; }
.cq-route-note small { color: var(--cq-muted); display: block; font-size: 10px; margin-bottom: 3px; }
.cq-route-note strong { font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.45; }
.cq-route-note b { color: var(--cq-green); font-size: 17px; }

.cq-topic-strip { background: #fff; border-bottom: 1px solid rgba(45, 106, 79, .10); border-top: 1px solid rgba(45, 106, 79, .10); }
.cq-topic-row { align-items: center; display: flex; gap: 30px; min-height: 77px; overflow-x: auto; }
.cq-topic-row p { color: var(--cq-muted); flex: 0 0 auto; font-size: 13px; margin: 0 auto 0 0; }
.cq-topic-row p span { color: var(--cq-green); font-size: 18px; margin-right: 5px; }
.cq-topic-row a { color: var(--cq-green); flex: 0 0 auto; font-size: 13px; font-weight: 600; }
.cq-topic-row a:hover { text-decoration: underline; }

.cq-section { padding: 35px 0; }
.cq-guides { padding-bottom: 35px; }
.cq-section-heading { align-items: end; display: grid; gap: 38px; grid-template-columns: 1fr minmax(230px, .58fr) auto; margin-bottom: 43px; }
.cq-section-heading .cq-eyebrow { margin-bottom: 10px; }
.cq-section-heading h2, .cq-custom h2, .cq-journal h2 { font-size: clamp(37px, 4.2vw, 54px); line-height: 1.25; margin: 0; }
.cq-section-heading > p { color: var(--cq-muted); font-size: 14px; line-height: 1.9; margin: 0 0 4px; }
.cq-text-link, .cq-card-link { align-items: center; border-bottom: 1px solid currentColor; color: var(--cq-green); display: inline-flex; font-size: 13px; font-weight: 600; gap: 15px; padding-bottom: 4px; white-space: nowrap; }
.cq-text-link:hover, .cq-card-link:hover { color: var(--cq-green-deep); }
.cq-guide-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.cq-guide-card { background: #fff; border: 0; border-radius: 20px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: box-shadow .35s ease, transform .35s ease; }
.cq-guide-card:hover { box-shadow: var(--cq-shadow-hover); transform: translateY(-5px); }
.cq-card-image { overflow: hidden; position: relative; }
.cq-card-image img { aspect-ratio: 1.32 / 1; object-fit: cover; transition: transform .45s ease; width: 100%; }
.cq-guide-card:hover .cq-card-image img { transform: scale(1.04); }
.cq-card-image span { background: rgba(45, 106, 79, .94); border-radius: 999px; bottom: 12px; color: #fff; font-size: 11px; left: 12px; padding: 5px 10px; position: absolute; }
.cq-card-copy { display: flex; flex: 1; flex-direction: column; padding: 19px 19px 18px; }
.cq-card-copy > p, .cq-journal-card p { color: var(--cq-muted); font-size: 11px; margin: 0 0 8px; }
.cq-card-copy h3 { font-size: 22px; line-height: 1.43; margin: 0 0 21px; }
.cq-card-link { font-size: 12px; margin-top: auto; width: max-content; }

.cq-custom { background: var(--cq-green-deep); color: #fff; padding: 80px 0 86px; }
.cq-custom-cta { align-items: end; border-bottom: 1px solid rgba(255, 255, 255, .22); display: grid; gap: clamp(36px, 9vw, 132px); grid-template-columns: 1fr .72fr; margin-bottom: 61px; padding-bottom: 51px; }
.cq-custom-cta .cq-eyebrow, .cq-custom .cq-eyebrow { color: #a4d4b0; }
.cq-custom-cta h2 { color: #fff; font-size: clamp(40px, 5vw, 63px); }
.cq-custom-cta h2 em, .cq-custom h2 em { color: #a4d4b0; }
.cq-custom-cta > p { color: #d1e5d6; font-size: 15px; line-height: 1.95; margin: 0 0 6px; max-width: 400px; }
.cq-custom-layout { align-items: center; display: grid; gap: clamp(55px, 9vw, 140px); grid-template-columns: .85fr 1.15fr; }
.cq-custom .cq-eyebrow { margin-bottom: 13px; }
.cq-custom h2 { color: #fff; margin-bottom: 18px; }
.cq-custom-copy > p:not(.cq-eyebrow) { color: #d1e5d6; font-size: 15px; line-height: 1.95; margin: 0; max-width: 430px; }
.cq-feature-list { display: grid; gap: 10px; list-style: none; margin: 24px 0 28px; padding: 0; }
.cq-feature-list li { align-items: center; color: #fff; display: flex; font-size: 14px; gap: 10px; }
.cq-feature-list span { align-items: center; background: #a4d4b0; border-radius: 50%; color: var(--cq-green-deep); display: inline-flex; font-size: 10px; height: 18px; justify-content: center; width: 18px; }
.cq-custom .cq-text-link { border-bottom-color: #a4d4b0; color: #fff; }
.cq-custom .cq-text-link:hover { color: #a4d4b0; }
.cq-custom-form { background: #fff; border-radius: 20px; box-shadow: var(--cq-shadow); padding: 29px; }
.cq-form-heading { align-items: baseline; border-bottom: 1px solid #d9e5da; display: flex; justify-content: space-between; margin-bottom: 19px; padding-bottom: 13px; }
.cq-form-heading p { color: var(--cq-ink); font-family: var(--serif); font-size: 23px; font-weight: 600; margin: 0; }
.cq-form-heading span { color: var(--cq-muted); font-size: 10px; }
.cq-form-grid { display: grid; gap: 13px 17px; grid-template-columns: 1fr 1fr; }
.cq-form-grid label { color: var(--cq-ink); display: grid; font-size: 12px; font-weight: 600; gap: 5px; }
.cq-form-grid input, .cq-form-grid select, .cq-form-grid textarea { background: #f7faf8; border: 1px solid rgba(45, 106, 79, .20); border-radius: 8px; color: var(--cq-ink); font-family: inherit; min-height: 38px; outline-color: var(--cq-green); padding: 7px 10px; width: 100%; }
.cq-form-grid textarea { min-height: 75px; resize: vertical; }
.cq-form-wide { grid-column: 1 / -1; }
.cq-custom-form .cq-button { margin-top: 20px; }
.cq-form-result { background: var(--cq-green-soft); color: var(--cq-green-deep); display: none; font-size: 12px; line-height: 1.7; margin: 14px 0 0; padding: 10px 12px; }
.cq-form-result.is-visible { display: block; }

.cq-destinations { background: #f8fbf8; padding: 38px 0 44px; }
.cq-section-heading-compact { grid-template-columns: 1fr auto; }
.cq-destination-grid { display: grid; gap: 18px; grid-template-columns: 1.35fr 1fr 1fr; }
.cq-destination-card { border-radius: 20px; color: #fff; min-height: 408px; overflow: hidden; position: relative; }
.cq-destination-card::after { background: linear-gradient(0deg, rgba(8, 37, 27, .82), rgba(8, 37, 27, .05) 60%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.cq-destination-card img { height: 100%; object-fit: cover; position: absolute; transition: transform .5s ease; width: 100%; }
.cq-destination-card:hover img { transform: scale(1.04); }
.cq-destination-content { bottom: 0; display: grid; gap: 5px; left: 0; padding: 22px; position: absolute; right: 0; z-index: 1; }
.cq-destination-content small { font-size: 11px; letter-spacing: .08em; }
.cq-destination-content strong { color: #fff; font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.35; }
.cq-destination-content em { font-size: 12px; font-style: normal; line-height: 1.65; opacity: .9; }

.cq-journal { background: #dceff2; padding: 78px 0; }
.cq-journal-layout { align-items: start; display: grid; gap: clamp(48px, 8vw, 120px); grid-template-columns: .76fr 1.24fr; }
.cq-journal-intro { position: sticky; top: 102px; }
.cq-journal-intro h2 { margin-bottom: 19px; }
.cq-journal-intro > p:not(.cq-eyebrow) { color: var(--cq-muted); font-size: 14px; line-height: 1.95; margin: 0 0 25px; max-width: 350px; }
.cq-journal-list { display: grid; gap: 17px; grid-template-columns: 1fr 1fr; }
.cq-journal-card { background: #fff; border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .35s ease, transform .35s ease; }
.cq-journal-card:hover { box-shadow: var(--cq-shadow-hover); transform: translateY(-4px); }
.cq-journal-card > a { overflow: hidden; }
.cq-journal-card img { aspect-ratio: 4 / 3; object-fit: cover; transition: transform .45s ease; width: 100%; }
.cq-journal-card:hover img { transform: scale(1.04); }
.cq-journal-card > div { display: flex; flex: 1; flex-direction: column; padding: 19px; }
.cq-journal-card h3 { font-size: 21px; line-height: 1.5; margin: 0 0 21px; }


.cq-footer { background: #102d24; color: #d9e8dc; padding: 58px 0 0; }
.cq-footer-grid { display: grid; gap: 35px; grid-template-columns: 1.5fr repeat(3, 1fr); padding-bottom: 50px; }
.cq-footer .cq-brand { color: #fff; }
.cq-footer .brand-symbol { color: #a4d4b0; }
.cq-footer .brand-copy small { color: #a8c0ad; }
.cq-footer-grid > div { display: grid; align-content: start; gap: 8px; }
.cq-footer-grid > div:first-child { gap: 14px; }
.cq-footer-grid p { color: #a8c0ad; font-size: 12px; line-height: 1.8; margin: 0; max-width: 260px; }
.cq-footer-grid strong { color: #fff; font-size: 13px; margin-bottom: 4px; }
.cq-footer-grid a:not(.brand) { color: #b7cdbc; font-size: 12px; width: max-content; }
.cq-footer-grid a:not(.brand):hover { color: #fff; }
.cq-footer-bottom { border-top: 1px solid rgba(218, 234, 220, .16); color: #9ab19f; display: flex; font-size: 11px; justify-content: space-between; padding-block: 18px; }
.cq-bottom-nav { display: none; }

@media (max-width: 960px) {
  .cq-home .cq-shell { padding-inline: 24px; }
  .cq-home .site-header.cq-home-header { padding-inline: 24px; }
  .cq-home .cq-desktop-nav { gap: 18px; margin-right: 20px; }
  .cq-hero-grid { gap: 48px; grid-template-columns: 1fr .9fr; }
  .cq-hero-copy { padding-left: 0; }
  .cq-route-note { left: -20px; }
  .cq-section-heading { gap: 22px; grid-template-columns: 1fr .7fr; }
  .cq-section-heading .cq-text-link { grid-column: 2; }
  .cq-custom-layout { gap: 48px; }
  .cq-footer-grid { grid-template-columns: 1.3fr repeat(3, 1fr); }
}

@media (max-width: 800px) {
  body.cq-home { padding-bottom: 70px; }
  .cq-home .site-header.cq-home-header { min-height: 64px; padding-inline: 20px; }
  .cq-home .desktop-nav, .cq-home .cq-header-cta, .cq-home .cq-language, .cq-home .cq-account-link, .cq-home .cq-publish-link { display: none; }
  .cq-home .menu-toggle { color: var(--cq-green); display: flex; }
  .cq-home .mobile-nav.cq-mobile-nav { background: #fff; color: var(--cq-ink); padding: 76px 20px 24px; }
  .cq-home .mobile-nav.cq-mobile-nav a { border-color: #dfe9e0; font-size: 16px; }
  .cq-home .cq-shell { padding-inline: 20px; }
  .cq-hero { background: #ebf5ed; min-height: auto; padding: 110px 0 55px; }
  .cq-hero::before { display: none; }
  .cq-hero-grid { gap: 43px; grid-template-columns: 1fr; }
  .cq-home h1 { font-size: clamp(50px, 14vw, 70px); }
  .cq-hero-summary { font-size: 15px; }
  .cq-hero-stats { gap: 23px; margin-top: 33px; }
  .cq-hero-media { min-height: 0; padding-bottom: 48px; }
  .cq-hero-main-photo img { aspect-ratio: 1.1 / 1; }
  .cq-hero-main-photo figcaption { bottom: 98px; }
  .cq-route-note { bottom: 0; left: 16px; max-width: calc(100% - 16px); right: 0; }
  .cq-topic-row { gap: 22px; min-height: 66px; }
  .cq-topic-row p { display: none; }
  .cq-section, .cq-journal { padding: 64px 0; }
  .cq-guides { padding-bottom: 56px; }
  .cq-destinations { padding: 58px 0 64px; }
  .cq-section-heading { align-items: start; display: flex; flex-direction: column; gap: 17px; margin-bottom: 31px; }
  .cq-section-heading > p { margin: 0; }
  .cq-guide-grid { gap: 14px; grid-template-columns: 1fr; }
  .cq-guide-card { display: grid; grid-template-columns: 41% 1fr; }
  .cq-card-image img { aspect-ratio: auto; height: 100%; min-height: 185px; }
  .cq-card-copy { padding: 15px; }
  .cq-card-copy h3 { font-size: 19px; margin-bottom: 14px; }
  .cq-custom { padding: 66px 0; }
  .cq-custom-cta { align-items: start; gap: 16px; grid-template-columns: 1fr; margin-bottom: 39px; padding-bottom: 37px; }
  .cq-custom-layout { gap: 35px; grid-template-columns: 1fr; }
  .cq-custom-form { padding: 22px 18px; }
  .cq-form-heading { align-items: start; flex-direction: column; gap: 3px; }
  .cq-form-grid { grid-template-columns: 1fr; }
  .cq-form-wide { grid-column: auto; }
  .cq-destination-grid { grid-template-columns: 1fr 1fr; }
  .cq-destination-card { min-height: 300px; }
  .cq-destination-card-wide { grid-column: 1 / -1; min-height: 350px; }
  .cq-journal-layout { gap: 33px; grid-template-columns: 1fr; }
  .cq-journal-intro { position: static; }
  .cq-journal-list { gap: 13px; }
  .cq-journal-card h3 { font-size: 18px; }
  .cq-footer { padding-top: 43px; }
  .cq-footer-grid { gap: 29px; grid-template-columns: 1fr 1fr; padding-bottom: 37px; }
  .cq-footer-grid > div:first-child { grid-column: 1 / -1; }
  .cq-footer-bottom { flex-direction: column; gap: 5px; }
  .cq-bottom-nav { background: rgba(255, 255, 255, .96); border-top: 1px solid #dce7dd; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); height: 64px; left: 0; position: fixed; right: 0; z-index: 8; }
  .cq-bottom-nav a { align-items: center; color: #698077; display: flex; flex-direction: column; font-size: 10px; gap: 1px; justify-content: center; }
  .cq-bottom-nav a span { font-size: 19px; line-height: 1; }
  .cq-bottom-nav a.is-active { color: var(--cq-green); font-weight: 600; }
}

@media (max-width: 430px) {
  .cq-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cq-button { font-size: 13px; gap: 8px; justify-content: center; padding-inline: 10px; }
  .cq-hero-stats { gap: 13px; justify-content: space-between; }
  .cq-hero-stats div { padding-left: 8px; }
  .cq-hero-stats dt { font-size: 22px; }
  .cq-hero-main-photo figcaption { padding: 17px; }
  .cq-hero-main-photo figcaption strong { font-size: 19px; }
  .cq-route-note { gap: 8px; padding: 13px; }
  .cq-route-note strong { font-size: 13px; }
  .cq-guide-card { grid-template-columns: 39% 1fr; }
  .cq-card-image img { min-height: 172px; }
  .cq-destination-grid { gap: 11px; }
  .cq-destination-content { padding: 15px; }
  .cq-destination-content strong { font-size: 21px; }
  .cq-destination-content em { display: none; }
  .cq-journal-list { grid-template-columns: 1fr; }
}

/* Keep the English edition within the Chinese homepage's editorial system
   while giving its longer Latin headings room to breathe. */
.cq-home-en .cq-hero-copy { padding-left: 0; }
.cq-home-en h1, .cq-home-en h2, .cq-home-en h3 { font-family: Georgia, "Times New Roman", var(--serif); }
.cq-home-en h1 { font-size: clamp(52px, 5.5vw, 74px); line-height: 1.14; }
.cq-home-en .cq-hero-summary { max-width: 475px; }
.cq-home-en .cq-hero-stats { gap: clamp(18px, 3vw, 36px); }
.cq-home-en .cq-hero-stats dd { font-size: 11px; }
.cq-home-en .cq-card-copy h3 { font-size: 21px; line-height: 1.42; }
.cq-home-en .cq-destination-content strong { font-size: 25px; }
.cq-home-en .cq-destination-content em { line-height: 1.55; }
.cq-home-en .cq-journal-card h3 { font-size: 20px; line-height: 1.45; }
.cq-home-en .cq-route-note strong { font-family: Georgia, "Times New Roman", var(--serif); }

@media (max-width: 960px) {
  .cq-home-en .cq-desktop-nav { gap: 18px; margin-right: 20px; }
  .cq-home-en .cq-header-actions { gap: 10px; }
}

@media (max-width: 800px) {
  .cq-home-en h1 { font-size: clamp(48px, 13vw, 64px); }
  .cq-home-en .cq-guide-card { grid-template-columns: 43% 1fr; }
  .cq-home-en .cq-card-copy h3 { font-size: 18px; }
}