/* ==========================================================================
   JOYOTOUR — compiled stylesheet
   [1] style-c ("Bright OTA") base theme
   [2] page-level components generated by src/tools/build.mjs
   Edit the source files, not this one.
   ========================================================================== */
/* ==========================================================================
   STYLE C — "Bright OTA"
   Clean, warm, conversion-led. Coral accent, cards, filters, estimator.
   ========================================================================== */

:root {
  --w: #FFFFFF;
  --tint: #F7F6F3;
  --tint-2: #EFEDE7;
  --ink: #16171A;
  --ink-2: #4C4F56;
  --ink-3: #8A8E96;
  --coral: #FF5638;
  --coral-d: #E23E22;
  --teal: #0E7C6B;
  --amber: #F5A524;
  --line: #E6E4DF;
  --ct: 1240px;
  --fd: "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
  --fb: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sh: 0 2px 6px rgba(22,23,26,.04), 0 12px 34px -14px rgba(22,23,26,.14);
}

body { background: var(--w); color: var(--ink); font-family: var(--fb); font-size: 16px; line-height: 1.62; -webkit-font-smoothing: antialiased; }
.ct { width: 100%; max-width: var(--ct); margin: 0 auto; padding: 0 26px; }
h1, h2, h3, h4 { font-family: var(--fd); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 12px; font-weight: 700; font-size: 14.5px;
  transition: all .18s ease; white-space: nowrap;
}
.btn--p { background: var(--coral); color: #fff; box-shadow: 0 8px 20px -8px rgba(255,86,56,.7); }
.btn--p:hover { background: var(--coral-d); transform: translateY(-2px); }
.btn--o { border: 1.5px solid var(--line); color: var(--ink); background: #fff; }
.btn--o:hover { border-color: var(--ink); }
.btn--lg { padding: 15px 28px; font-size: 15.5px; border-radius: 14px; }
.btn--b { width: 100%; }

.k { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); margin-bottom: 14px; }

/* ------------------------------------------------------------ header */
.h { position: sticky; top: 0; z-index: 70; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.h__in { display: flex; align-items: center; gap: 30px; min-height: 72px; }
.h__logo { display: flex; align-items: center; gap: 10px; }
.h__mark {
  width: 38px; height: 38px; border-radius: 12px; background: var(--coral); color: #fff;
  display: grid; place-items: center; font-family: var(--fd); font-weight: 800; font-size: 20px;
  box-shadow: 0 6px 16px -6px rgba(255,86,56,.8);
}
.h__word { font-family: var(--fd); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.h__nav { margin-left: auto; display: flex; gap: 26px; }
.h__nav a { font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.h__nav a:hover { color: var(--coral); }
.h__act { display: flex; align-items: center; gap: 16px; }
.h__help { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.h__dot { width: 8px; height: 8px; border-radius: 50%; background: #22B573; box-shadow: 0 0 0 3px rgba(34,181,115,.18); }
.h__burger { display: none; flex-direction: column; gap: 4px; padding: 10px; }
.h__burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; display: block; }

.dr { position: fixed; inset: 0; z-index: 90; }
.dr[hidden] { display: none; }
.dr__s { position: absolute; inset: 0; background: rgba(22,23,26,.5); }
.dr__p {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 86vw);
  background: #fff; padding: 26px; overflow-y: auto; animation: drIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes drIn { from { transform: translateX(24px); opacity: 0; } }
.dr__k { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); margin: 20px 0 10px; }
.dr__p > a { display: block; padding: 10px 0; font-size: 15.5px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.dr__p .btn { margin-top: 24px; }

/* --------------------------------------------------------------- hero */
.hero { padding: 54px 0 0; background: linear-gradient(180deg, #FFF7F4 0%, #fff 70%); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; }
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  box-shadow: var(--sh); margin-bottom: 22px;
}
.tag span { color: var(--teal); font-size: 9px; }
.hero__copy h1 { font-size: clamp(38px, 4.8vw, 60px); margin-bottom: 18px; }
.hero__copy .u {
  background: linear-gradient(180deg, transparent 62%, rgba(255,86,56,.28) 62%);
  padding: 0 4px;
}
.hero__sub { font-size: 17px; color: var(--ink-2); max-width: 540px; margin-bottom: 28px; }

.search {
  display: grid; grid-template-columns: 1.2fr 1fr .9fr auto; gap: 10px; align-items: end;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px;
  box-shadow: var(--sh);
}
.search__f { display: flex; flex-direction: column; gap: 6px; }
.search__f label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.search__f select {
  background: var(--tint); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 12px; font-size: 14.5px; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%234C4F56' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px;
  padding-right: 32px;
}
.hero__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.hero__chips a {
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: #fff;
  transition: all .18s ease;
}
.hero__chips a:hover { border-color: var(--coral); color: var(--coral); transform: translateY(-2px); }

.hero__art { position: relative; height: 470px; }
.hero__img { position: absolute; border-radius: 20px; object-fit: cover; box-shadow: 0 26px 54px -24px rgba(22,23,26,.4); }
.hero__img--1 { width: 62%; height: 66%; top: 0; right: 6%; z-index: 2; }
.hero__img--2 { width: 44%; height: 38%; bottom: 0; left: 0; z-index: 3; }
.hero__img--3 { width: 40%; height: 32%; bottom: 12%; right: 0; z-index: 1; }
.hero__float {
  position: absolute; top: 58%; left: 34%; z-index: 4;
  background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: var(--sh);
  font-size: 12.5px; color: var(--ink-3); line-height: 1.4;
}
.hero__floatnum { font-family: var(--fd); font-size: 25px; font-weight: 800; color: var(--ink); }

.strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 42px 0 0; padding: 0 0 26px; list-style: none;
}
.strip li {
  display: flex; gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
}
.strip span { font-size: 22px; }
.strip strong { display: block; font-size: 14px; font-family: var(--fd); font-weight: 800; }
.strip small { font-size: 12px; color: var(--ink-3); }

/* ------------------------------------------------------------ sections */
.sec { padding: 84px 0; }
.sec--tint { background: var(--tint); }
.sh { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 34px; flex-wrap: wrap; }
.sh h2 { font-size: clamp(28px, 3.4vw, 42px); }
.sh__more { font-weight: 700; font-size: 14.5px; color: var(--coral); white-space: nowrap; }
.sh__more:hover { text-decoration: underline; }
.sh__sort { display: flex; align-items: center; gap: 10px; }
.sh__sort label { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.sh__sort select {
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 13.5px;
  background: #fff; cursor: pointer;
}

/* ------------------------------------------------------------ filters */
.filters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.filters__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.filters__label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); min-width: 92px; }
.fset { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: #fff;
  transition: all .16s ease;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.count { font-size: 13.5px; color: var(--ink-3); margin-bottom: 18px; }

/* ------------------------------------------------------------- cards */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; transition: all .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: #D9D6D0; }
.card__img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.card:hover .card__img img { transform: scale(1.05); }
.card__badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,.94); border-radius: 999px; padding: 6px 12px;
  font-size: 11.5px; font-weight: 800; color: var(--ink);
}
.card__badge--sale { background: var(--coral); color: #fff; }
.card__days {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(22,23,26,.82); color: #fff; border-radius: 999px;
  padding: 5px 11px; font-size: 11.5px; font-weight: 700;
}
.card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__route { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); }
.card__title { font-size: 19px; }
.card__title a:hover { color: var(--coral); }
.card__desc { font-size: 13.8px; color: var(--ink-2); flex: 1; }
.card__meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.card__stars { color: var(--amber); letter-spacing: 1px; }
.card__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.card__price { display: flex; flex-direction: column; line-height: 1.15; }
.card__price small { font-size: 11px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.card__price strong { font-family: var(--fd); font-size: 23px; font-weight: 800; }
.card__price s { font-size: 12.5px; color: var(--ink-3); }
.card .btn { padding: 10px 16px; font-size: 13.5px; }

.gridFoot { text-align: center; margin-top: 34px; }
.gridFoot p { margin-bottom: 16px; font-size: 14.5px; color: var(--ink-2); }
.gridFoot a { color: var(--coral); font-weight: 700; }

/* ------------------------------------------------------------ spotlight */
.sec--spot { background: #101216; color: #F4F5F7; }
.spot { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 54px; align-items: start; }
.spot__map { background: #16191F; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: 20px; }
.spot__map .jr-chip { background: #1B1F26; border-color: rgba(255,255,255,.12); color: #C9CDD4; }
.spot__map .jr-chip.is-on { border-color: var(--coral); color: #fff; }
.spot__map .jr-note { color: rgba(244,245,247,.45); }
.spot__map .jr-chip-name { color: inherit; }
.spot__copy h2 { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 16px; }
.spot__lede { color: #B9BEC7; font-size: 16.5px; margin-bottom: 26px; }
.spot__panel { background: #16191F; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: 26px; }
.spot__days { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.spot__name { font-size: 24px; margin: 8px 0 10px; }
.spot__blurb { font-size: 14.5px; color: #B9BEC7; margin-bottom: 18px; }
.spot__stops { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.spot__stops li { display: flex; gap: 12px; font-size: 14px; color: #C9CDD4; line-height: 1.6; padding-bottom: 10px; border-bottom: 1px dashed rgba(255,255,255,.12); }
.spot__stops b { color: var(--coral); font-family: var(--fd); font-size: 12.5px; min-width: 58px; }
.spot__stops strong { color: #fff; }
.spot__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.spot__ctas .btn--o { background: transparent; border-color: rgba(255,255,255,.25); color: #fff; }
.spot__ctas .btn--o:hover { border-color: #fff; }

/* ------------------------------------------------------------ estimator */
.est { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: start; }
.est__copy h2 { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 16px; }
.est__copy p { font-size: 16px; color: var(--ink-2); }
.est__notes { margin: 22px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ink-3); }
.est__panel { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px; box-shadow: var(--sh); }
.est__row { margin-bottom: 24px; }
.est__row > label, .est__lab { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 10px; }
.est__ctl { display: flex; align-items: center; gap: 16px; }
.est__ctl input[type="range"] { flex: 1; accent-color: var(--coral); height: 6px; }
.est__ctl output {
  font-family: var(--fd); font-weight: 800; font-size: 15px; color: var(--coral);
  min-width: 82px; text-align: right;
}
.est__seg { display: flex; gap: 6px; background: var(--tint-2); border-radius: 12px; padding: 5px; }
.est__seg button {
  flex: 1; padding: 10px; border-radius: 9px; font-size: 13.5px; font-weight: 700;
  color: var(--ink-2); transition: all .16s ease;
}
.est__seg button.is-on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(22,23,26,.1); }
.est__result { border-top: 1px solid var(--line); padding-top: 22px; text-align: center; }
.est__amt { font-family: var(--fd); font-size: clamp(34px, 4vw, 46px); font-weight: 800; letter-spacing: -.03em; color: var(--coral); }
.est__per { font-size: 13.5px; color: var(--ink-3); margin-bottom: 18px; }
.est__fine { font-size: 12px; color: var(--ink-3); margin-top: 12px; }

/* ----------------------------------------------------------------- why */
.why { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.why__media { position: relative; }
.why__media img { border-radius: 22px; aspect-ratio: 4/4.4; object-fit: cover; }
.why__stamp {
  position: absolute; bottom: -18px; right: -14px;
  background: var(--coral); color: #fff; border-radius: 18px; padding: 18px 22px;
  box-shadow: 0 16px 34px -14px rgba(255,86,56,.75);
  font-size: 13px; line-height: 1.35;
}
.why__stamp strong { font-family: var(--fd); font-size: 30px; font-weight: 800; display: block; }
.why__body h2 { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 26px; }
.why__list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 30px; }
.why__list li { display: flex; gap: 14px; }
.why__list span {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  background: #FFF1ED; color: var(--coral); display: grid; place-items: center;
  font-size: 15px; font-weight: 800;
}
.why__list strong { display: block; font-size: 15.5px; margin-bottom: 3px; }
.why__list p { font-size: 14.3px; color: var(--ink-2); }

/* --------------------------------------------------------- destinations */
.dgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dc {
  position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4/4.6;
  background-size: cover; background-position: center; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 18px; isolation: isolate; transition: transform .25s ease;
}
.dc:hover { transform: translateY(-4px); }
.dc::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(22,23,26,.06) 0%, rgba(22,23,26,.78) 80%);
}
.dc__n { color: #fff; font-family: var(--fd); font-weight: 800; font-size: 21px; letter-spacing: -.02em; }
.dc__c { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.dc__c small { color: rgba(255,255,255,.82); font-size: 12px; }
.dc__c b {
  background: rgba(255,255,255,.18); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 800; padding: 3px 9px;
}

/* -------------------------------------------------------------- reviews */
.rbadges { display: flex; gap: 10px; flex-wrap: wrap; }
.rbadges span { border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px; font-size: 12.5px; color: var(--ink-3); background: #fff; }
.rbadges strong { font-family: var(--fd); font-weight: 800; color: var(--ink); margin-right: 5px; }
.rwrap { position: relative; }
.rtrack { display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 8px; scrollbar-width: none; }
.rtrack::-webkit-scrollbar { display: none; }
.rv {
  flex: 0 0 380px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
}
.rv__s { color: var(--amber); letter-spacing: 2px; }
.rv__t { font-size: 14.8px; color: var(--ink-2); line-height: 1.68; }
.rv__w { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.rv__w strong { display: block; font-size: 14.5px; }
.rv__w span { color: var(--ink-3); }
.rv__tour { font-size: 12px; color: var(--teal); font-weight: 700; }
.rnav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.rnav button {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line);
  background: #fff; font-size: 17px; transition: all .18s ease;
}
.rnav button:hover { border-color: var(--ink); }

/* ----------------------------------------------------------------- faq */
.faq { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 54px; align-items: start; }
.faq__head h2 { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 16px; }
.faq__head p { font-size: 15.5px; color: var(--ink-2); }
.faq__list { display: flex; flex-direction: column; gap: 10px; }
.fi { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .2s ease; }
.fi.is-open { border-color: #FFC4B8; }
.fi__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 20px; text-align: left; font-family: var(--fd); font-weight: 800; font-size: 16px;
  letter-spacing: -.01em;
}
.fi__q:hover { color: var(--coral); }
.fi__ic {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--tint-2);
  display: grid; place-items: center; font-size: 16px; color: var(--ink-2);
  transition: all .25s ease;
}
.fi.is-open .fi__ic { background: var(--coral); color: #fff; transform: rotate(45deg); }
.fi__a { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.2,.7,.2,1); }
.fi__a p { padding: 0 20px 20px; font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }

/* --------------------------------------------------------------- final */
.final { background: linear-gradient(135deg, #1B1D22, #101216); color: #fff; padding: 80px 0; }
.final__in { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.final h2 { font-size: clamp(30px, 3.6vw, 44px); }
.final p { margin-top: 14px; color: #B9BEC7; font-size: 16px; max-width: 460px; }
.final__form { display: flex; flex-direction: column; gap: 12px; }
.final__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.final__form input, .final__form textarea {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px; padding: 14px 16px; color: #fff; font-size: 15px; resize: vertical;
}
.final__form input::placeholder, .final__form textarea::placeholder { color: rgba(255,255,255,.55); }
.final__form input:focus, .final__form textarea:focus { outline: none; border-color: var(--coral); }
.final__note { font-size: 12.5px; color: #8A8E96; text-align: center; }

/* -------------------------------------------------------------- footer */
.ft { background: #0B0C0E; color: #C9CDD4; padding: 62px 0 28px; }
.ft__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 38px; }
.ft__brand .h__mark { margin-bottom: 14px; }
.ft__name { font-size: 15px; color: #fff; margin-bottom: 12px; }
.ft__fine { font-size: 12.5px; color: #767B84; line-height: 1.75; }
.ft__fine a:hover { color: #FF7A60; }
.ft__col h3 {
  font-family: var(--fb); font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #FF7A60; margin-bottom: 15px;
}
.ft__col ul { display: flex; flex-direction: column; gap: 9px; }
.ft__col a { font-size: 13.8px; color: #9AA0A8; }
.ft__col a:hover { color: #FF7A60; }
.ft__bot {
  margin-top: 50px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: #767B84;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1160px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .dgrid { grid-template-columns: repeat(3, 1fr); }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .spot, .est, .why, .faq, .final__in { grid-template-columns: 1fr; }
  .hero__art { height: 400px; }
  .ft__top { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 900px) {
  .h__nav, .h__help { display: none; }
  .h__burger { display: flex; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { display: none; }
  .search { grid-template-columns: 1fr 1fr; }
  .sec { padding: 66px 0; }
  .why__media { max-width: 460px; }
}
@media (max-width: 600px) {
  .ct { padding: 0 20px; }
  .grid, .dgrid, .strip, .final__row { grid-template-columns: 1fr; }
  .search { grid-template-columns: 1fr; }
  .ft__top { grid-template-columns: 1fr; }
  .rv { flex: 0 0 84vw; }
  .hero { padding-top: 34px; }
}


/* ==========================================================================
   [2] PAGE COMPONENTS + H5 ADAPTATION
   ========================================================================== */
/* ==========================================================================
   PAGE-LEVEL COMPONENTS + H5 ADAPTATION
   Appended to the style-c theme by src/tools/build.mjs → assets/css/joyo.css
   Every rule here is used by src/templates/*.mjs
   ========================================================================== */

:root {
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --pad: 26px;
}

/* ---------------------------------------------------------- breadcrumbs */
.crumbs { padding: 16px 0 4px; font-size: 13px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; list-style: none; margin: 0; padding: 0; }
.crumbs li { color: var(--ink-3); }
.crumbs li a { color: var(--ink-2); font-weight: 500; }
.crumbs li a:hover { color: var(--coral); text-decoration: underline; }
.crumbs li[aria-current="page"] span { color: var(--ink); font-weight: 600; }
.crumbs__sep { opacity: .45; }

/* ------------------------------------------------------------- page hero */
.phero {
  position: relative;
  padding: 62px 0 54px;
  background: linear-gradient(160deg, #FFF1EC 0%, var(--tint) 58%, #FFFFFF 100%);
  overflow: hidden;
}
.phero--tall { padding: 84px 0 72px; }
.phero[style*="--hi"]::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hi);
  background-size: cover; background-position: center;
  opacity: .16;
}
.phero[style*="--hi"]::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.94) 78%);
}
.phero__in { position: relative; z-index: 2; max-width: 900px; }
.phero__k { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); margin-bottom: 14px; }
.phero__in h1 { font-size: clamp(30px, 5.4vw, 56px); line-height: 1.04; margin-bottom: 16px; }
.phero__lede { font-size: clamp(15.5px, 1.7vw, 19px); color: var(--ink-2); max-width: 68ch; }
.phero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* --------------------------------------------------- GEO answer-first box */
.abox {
  margin: 0 auto; max-width: var(--ct); padding: 30px var(--pad) 6px;
}
.abox__k { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; }
.abox__h {
  font-size: clamp(19px, 2.5vw, 27px); line-height: 1.34; font-weight: 700; letter-spacing: -.01em;
  padding: 0 0 0 20px; border-left: 4px solid var(--coral); max-width: 78ch;
}
.abox__list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; max-width: 82ch; }
.abox__list li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: 15px; }
.abox__list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; border-radius: 50%; background: rgba(14,124,107,.12); color: var(--teal);
  font-size: 11px; font-weight: 800; display: grid; place-items: center;
}

/* --------------------------------------------------------- jump-to nav */
.jump { margin: 0 0 4px; }
.jump__k { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jump a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  transition: all .16s ease;
}
.jump a:hover { border-color: var(--coral); color: var(--coral); transform: translateY(-1px); }

/* ------------------------------------------------------------ facts list */
.facts { margin: 0; display: grid; gap: 0; }
.facts__i { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.facts__i:last-child { border-bottom: 0; }
.facts dt { color: var(--ink-3); font-size: 13px; font-weight: 500; }
.facts dd { margin: 0; font-size: 13.5px; font-weight: 600; text-align: right; }

/* ------------------------------------------------------------ fact bar */
.factbarwrap { padding: 8px 0 0; }
.factbar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.factbar--5 { grid-template-columns: repeat(5, 1fr); }
.factbar__i { background: #fff; padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.factbar__i strong { font-family: var(--fd); font-size: clamp(15px, 2vw, 20px); font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.factbar__i small { color: var(--ink-3); font-size: 11.5px; }

/* ---------------------------------------------------------- month table */
.mtable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.mtable { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; }
.mtable th, .mtable td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.mtable thead th { background: var(--tint); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.mtable tbody tr:last-child th, .mtable tbody tr:last-child td { border-bottom: 0; }
.mtable tbody th { font-weight: 600; }
.mtable tbody tr.is-b { background: rgba(14,124,107,.05); }
.mtable tbody tr.is-a { background: rgba(255,86,56,.045); }
.pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.pill--best { background: rgba(14,124,107,.14); color: var(--teal); }
.pill--good { background: rgba(245,165,36,.16); color: #96660A; }
.pill--ok   { background: rgba(22,23,26,.07); color: var(--ink-2); }
.pill--avoid{ background: rgba(255,86,56,.14); color: var(--coral-d); }

/* --------------------------------------------------- theme cards (tgrid) */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }
.thcard {
  display: flex; flex-direction: column; gap: 5px; padding: 20px;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  transition: all .18s ease;
}
.thcard:hover { border-color: var(--coral); transform: translateY(-3px); box-shadow: var(--sh); }
.thcard--flat { cursor: default; }
.thcard--flat:hover { transform: none; box-shadow: none; border-color: var(--line); }
.thcard__i { font-size: 24px; line-height: 1; }
.thcard__t { font-family: var(--fd); font-weight: 800; font-size: 16.5px; letter-spacing: -.01em; }
.thcard__d { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.thcard__n { font-size: 12px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }

/* --------------------------------------------------------- duration band */
.dband { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.dband__i { display: flex; flex-direction: column; gap: 4px; padding: 22px; border-radius: var(--r); background: #fff; border: 1.5px solid var(--line); transition: all .18s ease; }
.dband__i:hover { border-color: var(--coral); transform: translateY(-2px); }
.dband__n { font-family: var(--fd); font-weight: 800; font-size: 20px; }
.dband__d { font-size: 13.5px; color: var(--ink-2); }
.dband__c { font-size: 12px; color: var(--coral); font-weight: 700; }

/* ------------------------------------------------------------ two-column */
.two { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 46px; align-items: start; }
.two--rev { grid-template-columns: 360px minmax(0, 1fr); }
.two--art { grid-template-columns: minmax(0, 1fr) 320px; }
.two > .sidecard--sticky, .two--rev > .sidecard--sticky, .two--art > .sidecard--sticky { position: sticky; top: 92px; }
.two--rev > .prosebox { min-width: 0; }

/* ------------------------------------------------------------ prose body */
.prose { font-size: 16.5px; line-height: 1.72; color: var(--ink-2); }
.prose p + p { margin-top: 15px; }
.prose p:first-child { font-size: 17.5px; color: var(--ink); }
.prosebox h2 { font-size: clamp(23px, 3vw, 32px); margin: 6px 0 16px; }
.prosebox .k { margin-bottom: 10px; }
.prose--wide { max-width: 78ch; }

/* ------------------------------------------------------------- sidecard */
.sidecard {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
  padding: 22px; box-shadow: var(--sh);
}
.sidecard--plain { background: var(--tint); box-shadow: none; }
.sidecard__h { font-size: 17px; margin-bottom: 12px; }
.sidecard__p { font-family: var(--fd); font-weight: 800; font-size: 30px; letter-spacing: -.02em; margin-bottom: 12px; }
.sidecard__p small { font-family: var(--fb); font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.sidecard .btn { margin-top: 14px; }
.sidecard__fine { margin-top: 12px; font-size: 11.5px; color: var(--ink-3); line-height: 1.55; }
.sidecard__links { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); }
.sidecard__k { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.sidecard__links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sidecard__links a { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.sidecard__links a:hover { color: var(--coral); text-decoration: underline; }

/* -------------------------------------------------------- highlight grid */
.hlgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.hl { position: relative; padding: 22px 22px 22px 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); transition: all .18s ease; }
.hl:hover { border-color: var(--coral); transform: translateY(-2px); box-shadow: var(--sh); }
.hl__n { font-family: var(--fd); font-size: 12px; font-weight: 800; color: var(--coral); letter-spacing: .1em; margin-bottom: 8px; }
.hl h3 { font-size: 17px; margin-bottom: 8px; }
.hl p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }

/* ------------------------------------------------------------ tick lists */
.ticklist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.ticklist li { position: relative; padding-left: 28px; font-size: 15px; color: var(--ink-2); }
.ticklist li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 19px; height: 19px; border-radius: 50%; background: rgba(14,124,107,.13); color: var(--teal);
  font-size: 11px; font-weight: 800; display: grid; place-items: center;
}
.ticklist--x li::before { content: "✕"; background: rgba(255,86,56,.12); color: var(--coral-d); }

/* --------------------------------------------------------- day-tour grid */
.dtgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.dtcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; transition: all .18s ease; }
.dtcard:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: var(--line); }
.dtcard__img { position: relative; display: block; }
.dtcard__img img { width: 100%; height: 200px; object-fit: cover; }
.dtcard__b { padding: 18px 20px 8px; flex: 1; }
.dtcard__city { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); margin-bottom: 6px; }
.dtcard__t { font-size: 18px; margin-bottom: 8px; }
.dtcard__t a:hover { color: var(--coral); }
.dtcard__d { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.dtcard__f { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dtcard__f li { font-size: 12px; background: var(--tint); border-radius: 999px; padding: 5px 11px; color: var(--ink-2); }
.dtcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 18px; border-top: 1px solid var(--line); margin-top: 14px; }
.dtcard__p { font-family: var(--fd); font-weight: 800; font-size: 20px; }
.dtcard__p small { font-family: var(--fb); font-size: 12px; font-weight: 500; color: var(--ink-3); }

/* ------------------------------------------------------------ day steps */
.steps { list-style: none; margin: 20px 0 0; padding: 0; position: relative; }
.steps::before { content: ""; position: absolute; left: 92px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.steps li { position: relative; padding: 0 0 22px 118px; }
.steps::before { left: 92px; }
.steps__t { position: absolute; left: 0; top: 0; width: 86px; text-align: right; font-size: 13px; font-weight: 800; color: var(--coral); padding-top: 1px; }
.steps li::before {
  content: ""; position: absolute; left: 86px; top: 6px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; border: 3px solid var(--coral);
}
.steps__h { font-size: 16px; font-weight: 700; margin-bottom: 4px; font-family: var(--fd); letter-spacing: -.01em; }
.steps__d { font-size: 14.5px; color: var(--ink-2); line-height: 1.62; }
.steps--tight li { padding-bottom: 16px; }

/* ------------------------------------------------------- tour day blocks */
.days { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.days__i { border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; background: #fff; }
.days__n { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); margin-bottom: 5px; }
.days__t { font-family: var(--fd); font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.days__d { font-size: 14.5px; color: var(--ink-2); line-height: 1.62; }

/* --------------------------------------------------------- inclusions */
.incdl { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 34px; }
.incdl h3 { font-size: 18px; margin-bottom: 6px; }
.incgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.inc { padding: 22px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.inc__i { font-size: 26px; display: block; margin-bottom: 10px; }
.inc h3 { font-size: 16.5px; margin-bottom: 6px; }
.inc p { font-size: 14px; color: var(--ink-2); line-height: 1.58; }

/* ------------------------------------------------------------ day solver */
.daysolve { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding: 30px; border-radius: var(--r-xl); background: var(--tint); }
.daysolve__a { font-size: clamp(16px, 2.2vw, 21px); line-height: 1.55; max-width: 62ch; font-weight: 500; }

/* ----------------------------------------------------------- guide cards */
.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.gcard { display: flex; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.gcard__img { flex: 0 0 86px; }
.gcard__img img { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; }
.gcard__b { min-width: 0; }
.gcard__city { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); margin-bottom: 4px; }
.gcard__n { font-family: var(--fd); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.gcard__t { font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px; }
.gcard__langs { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gcard__langs li { font-size: 11.5px; background: var(--tint); border-radius: 999px; padding: 4px 10px; color: var(--ink-2); }
.gcard__d { font-size: 13.5px; color: var(--ink-2); line-height: 1.58; }
.gcard__spec { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gcard__spec li { font-size: 11.5px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: var(--ink-2); }

/* ----------------------------------------------------------- article grid */
.acard__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.acard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; transition: all .18s ease; }
.acard:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.acard__img img { width: 100%; height: 178px; object-fit: cover; }
.acard__b { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.acard__k { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); }
.acard__t { font-family: var(--fd); font-size: 17.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.28; }
.acard__d { font-size: 13.5px; color: var(--ink-2); line-height: 1.58; flex: 1; }
.acard__m { font-size: 11.5px; color: var(--ink-3); }

/* ------------------------------------------------------------ article */
.art { max-width: 76ch; }
.art .jump { margin-bottom: 26px; }
.art h2 { font-size: clamp(21px, 2.6vw, 28px); margin: 34px 0 12px; scroll-margin-top: 96px; }
.art p { font-size: 16.5px; line-height: 1.74; color: var(--ink-2); }
.art p + p { margin-top: 14px; }
.art__foot { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.wtable { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 14.5px; }
.wtable caption { text-align: left; font-size: 13px; color: var(--ink-3); padding-bottom: 8px; }
.wtable th, .wtable td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.wtable thead th { background: var(--tint); font-size: 12.5px; }

/* --------------------------------------------------------- internal links */
.ilinks { padding: 44px 0 8px; }
.ilinks__h { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 20px; }
.ilinks__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.ilinks__c h3 { font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.ilinks__c ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ilinks__c a { font-size: 14px; color: var(--ink-2); }
.ilinks__c a:hover { color: var(--coral); text-decoration: underline; }

/* ----------------------------------------------------------- quote form */
.quoteform { display: grid; gap: 16px; margin-top: 20px; }
.quoteform__r { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quoteform label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.quoteform input, .quoteform select, .quoteform textarea {
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #fff; font-size: 15px; font-weight: 400; width: 100%;
}
.quoteform input:focus, .quoteform select:focus, .quoteform textarea:focus { outline: 2px solid var(--coral); outline-offset: 1px; border-color: var(--coral); }
.quoteform__chips { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.quoteform__chips legend { font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 0 0 8px; }
.quoteform__chips { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.quoteform__chips label { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13.5px; }
.quoteform__chips input { width: 16px; height: 16px; padding: 0; }
.quoteform__c { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--ink-3); font-weight: 400; }
.quoteform__c input { width: 16px; height: 16px; margin-top: 2px; }

/* -------------------------------------------------------- contact matrix */
.cmatrix { padding: 4px 0 8px; }
.cmatrix__g { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cm { display: flex; flex-direction: column; gap: 3px; padding: 20px; border-radius: var(--r); border: 1.5px solid var(--line); background: #fff; transition: all .18s ease; }
.cm:hover { border-color: var(--coral); transform: translateY(-2px); }
.cm__ic { font-size: 22px; margin-bottom: 6px; }
.cm strong { font-size: 15.5px; }
.cm small { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

/* --------------------------------------------------------- office / wechat */
.office { font-style: normal; font-size: 15px; color: var(--ink-2); line-height: 1.7; margin-bottom: 8px; }
.office a { color: var(--coral); }
.wechatbox { padding: 26px; border-radius: var(--r-lg); background: var(--tint); }
.wechatbox h3 { font-size: 19px; margin-bottom: 10px; }
.wechatbox p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.wechatbox__id { margin-top: 12px; padding: 12px 16px; background: #fff; border-radius: var(--r-sm); font-size: 17px; }

/* ------------------------------------------------------------ map shell */
.mapbox { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.mapbox--wide { margin: 26px 0; }
.mapbox__svg { padding: 10px; background: linear-gradient(180deg, #FBFAF8, #F4F2ED); }
.rmap { width: 100%; height: auto; display: block; }

/* -- base map: sea, graticule, terrain washes, rivers --------------------- */
/* No `fill` here on purpose: this rect carries fill="url(#rmapSea)" as a
   presentation attribute, and any CSS rule outranks a presentation attribute.
   Setting a fill here silently flattened the base gradient to one colour. */
.rmap__grat { stroke: rgba(22,23,26,.07); stroke-width: 1; }
.rmap__grat.is-major { stroke: rgba(22,23,26,.13); stroke-width: 1.1; }
.rmap__deg { font: 500 10.5px/1 var(--fb); fill: rgba(22,23,26,.34); letter-spacing: .04em; }
.rmap__terr.t-high   { fill: #c9ad8a; }
.rmap__terr.t-arid   { fill: #dcc48f; }
.rmap__terr.t-steppe { fill: #d3d6a4; }
.rmap__terr.t-forest { fill: #a9c6a1; }
.rmap__terr.t-plain  { fill: #c9dcb4; }
.rmap__river { fill: none; stroke: #8fbed6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

/* -- destination pins: ring = province/region, dot = city, star = current - */
.rmap__a { cursor: pointer; }
.rmap__dot { fill: var(--coral); stroke: #fff; stroke-width: 2.5; }
.rmap__dot.is-hi { fill: var(--coral-d); stroke-width: 3.5; }
.rmap__ring { fill: rgba(224,90,60,.13); stroke: var(--coral); stroke-width: 2.2; }
.rmap__core { fill: var(--coral); }
.rmap__a .rmap__ring,
.rmap__a .rmap__core { transition: opacity .15s ease; }
.rmap__lab { font: 700 15px/1 var(--fb); fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 3.6px; stroke-linejoin: round; }
.rmap__lab.is-hi { fill: var(--coral-d); font-weight: 800; font-size: 16px; }
.rmap__a:hover .rmap__lab { fill: var(--coral); text-decoration: underline; }
.rmap__a:focus-visible { outline: none; }
.rmap__a:focus-visible .rmap__lab { fill: var(--coral); text-decoration: underline; }
.rmap__a:hover .rmap__dot,
.rmap__a:hover .rmap__ring { stroke: var(--coral-d); }

/* -- reference capitals: muted, and label-hidden on small screens --------- */
.rmap__refdot { fill: #fff; stroke: rgba(22,23,26,.30); stroke-width: 1.6; }
.rmap__ref.is-city .rmap__refdot { stroke: rgba(22,23,26,.20); }
.rmap__reflab { font: 500 11.5px/1 var(--fb); fill: rgba(22,23,26,.44); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; letter-spacing: .01em; }

/* -- route diagrams ------------------------------------------------------- */
.rmap__line { fill: none; stroke: var(--coral); stroke-width: 3; stroke-dasharray: 9 7; stroke-linecap: round; }

/* -- map shell ------------------------------------------------------------ */
.mapbox__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 16px 14px; border-top: 1px solid var(--line); }
.rmap-key { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); }
.rmap-key i { width: 11px; height: 11px; border-radius: 50%; background: var(--coral); flex: none; box-sizing: border-box; }
.rmap-key i.k-ring { background: rgba(224,90,60,.13); border: 2.2px solid var(--coral); width: 13px; height: 13px; }
.rmap-key i.k-city { background: #fff; border: 1.6px solid rgba(22,23,26,.30); width: 10px; height: 10px; }
.rmap-key i.k-river { width: 20px; height: 3px; border-radius: 2px; background: #9fc4d8; }

@media (max-width: 780px) {
  /* Reference-city dots still carry the geography, but 11px labels scaled
     down to a 360px screen are unreadable — and they would collide with the
     destination names, which are the ones that matter. */
  .rmap__reflab { display: none; }
  .rmap__deg { display: none; }

  /* Destination labels are drawn in SVG user units. At full phone width the
     1000-unit canvas scales to ~0.36, turning 15px type into 5px. Hold the
     map at a legible floor and let it scroll sideways instead — a map you
     swipe beats a map you cannot read. */
  .mapbox__svg { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mapbox__svg .rmap { min-width: 680px; }
}

/* -------------------------------------------------------- header extras */
.h__nav a.h__new { position: relative; padding-right: 30px; }
.h__nav a i {
  position: absolute; right: 0; top: -8px; font-style: normal;
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--coral); color: #fff; padding: 2px 6px; border-radius: 5px;
}
.langsel { position: relative; }
.langsel > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 5px;
  padding: 8px 10px; border-radius: var(--r-sm); border: 1.5px solid var(--line);
  font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: #fff;
}
.langsel > summary::-webkit-details-marker { display: none; }
.langsel__caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: var(--ink-3); margin-top: 3px; }
.langsel__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 80;
  min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 18px 44px -18px rgba(22,23,26,.34); padding: 10px;
}
.langsel__k { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 6px 8px 8px; }
.langsel__menu ul { list-style: none; margin: 0; padding: 0; }
.langsel__menu a { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; }
.langsel__menu a:hover { background: var(--tint); }
.langsel__menu a[aria-current="true"] { color: var(--coral); background: rgba(255,86,56,.07); }
.langsel__menu small { color: var(--ink-3); font-weight: 500; font-size: 11.5px; margin-left: auto; }

.dr__search { display: flex; gap: 8px; margin-bottom: 18px; }
.dr__search input { flex: 1; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); font-size: 15px; }
.dr__search button { width: 44px; border-radius: var(--r-sm); background: var(--coral); color: #fff; font-size: 18px; }
.dr__langs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
.dr__langs a { font-size: 13px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.dr__langs a.is-on { border-color: var(--coral); color: var(--coral); }

/* ---------------------------------------------------------- footer CTA */
.ftcta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
  padding: 30px 34px; border-radius: var(--r-xl); margin-bottom: 44px;
  background: linear-gradient(120deg, var(--coral) 0%, #FF7A5E 100%); color: #fff;
}
.ftcta__k { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-bottom: 6px; }
.ftcta__t { font-family: var(--fd); font-size: clamp(20px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.ftcta__acts { display: flex; flex-wrap: wrap; gap: 12px; }
.ftcta .btn--p { background: #fff; color: var(--coral-d); box-shadow: none; }
.ftcta .btn--o { border-color: rgba(255,255,255,.6); color: #fff; background: transparent; }
.ftcta .btn--o:hover { background: rgba(255,255,255,.14); }

.ft__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ft__contact { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 9px; }
.ft__contact li { display: flex; align-items: baseline; gap: 9px; font-size: 14px; flex-wrap: wrap; }
.ft__contact small { color: var(--ink-3); font-size: 11.5px; flex-basis: 100%; padding-left: 26px; }
.ft__contact a:hover { color: var(--coral); text-decoration: underline; }
.ft__social { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 8px; }
.ft__social a {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.ft__social a:hover { border-color: var(--coral); color: var(--coral); }
.ft__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.ft__payk { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ft__pay ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ft__pay li { font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 6px; background: var(--tint); color: var(--ink-2); }
.ft__legal { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.ft__legal a { color: var(--ink-3); font-size: 12.5px; }
.ft__legal a:hover { color: var(--coral); }
.totop { text-align: center; padding: 18px 0 26px; }
.totop a { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.totop a:hover { color: var(--coral); }

/* ------------------------------------------------------------- misc bits */
.sh__solo { font-size: clamp(22px, 2.8vw, 30px); margin-bottom: 22px; }
.sh__note { font-size: 14px; color: var(--ink-3); margin-top: 8px; max-width: 62ch; }
.gridFoot { margin-top: 26px; text-align: center; }
.btn--sm { padding: 9px 16px; font-size: 13.5px; border-radius: 10px; }
.st { color: var(--amber); font-size: 13px; letter-spacing: -1px; }
.st i { font-style: normal; font-size: 12px; color: var(--ink-2); margin-left: 5px; letter-spacing: 0; font-weight: 700; }
.final__pts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.final__pts li { position: relative; padding-left: 22px; font-size: 14px; color: rgba(255,255,255,.9); }
.final__pts li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; }

/* ==========================================================================
   H5 / MOBILE ADAPTATION
   ========================================================================== */
@media (max-width: 1080px) {
  .two, .two--rev, .two--art { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .two--rev > .sidecard--sticky, .two > .sidecard--sticky, .two--art > .sidecard--sticky { position: static; }
  .two--rev .sidecard { order: 2; }
  .factbar, .factbar--5 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .h__nav { display: none; }
  .h__burger { display: flex; }
  .h__help { display: none; }
  .ct { padding: 0 18px; }
  .phero { padding: 44px 0 38px; }
  .phero--tall { padding: 56px 0 46px; }
  .abox { padding: 24px 18px 4px; }
  .abox__h { padding-left: 14px; }
  .hlgrid, .dtgrid, .acard__grid, .ggrid { grid-template-columns: 1fr; }
  .incdl { gap: 20px; }
  .steps::before { left: 7px; }
  .steps li { padding: 0 0 20px 34px; }
  .steps__t { position: static; width: auto; text-align: left; margin-bottom: 2px; display: block; }
  .steps li::before { left: 0; top: 4px; }
  .quoteform__r { grid-template-columns: 1fr; }
  .ftcta { padding: 24px 20px; }
  .ftcta__acts { width: 100%; }
  .ftcta__acts .btn { flex: 1; }
  .daysolve { padding: 22px; }
}

@media (max-width: 620px) {
  body { font-size: 15.5px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { display: none; }
  .hero { padding-top: 30px; }
  .hero__chips { gap: 8px; }
  .search { grid-template-columns: 1fr; }
  .factbar, .factbar--5 { grid-template-columns: 1fr 1fr; }
  .factbar__i { padding: 13px 14px; }
  .strip { grid-template-columns: 1fr 1fr; }
  .filters__row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fset { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .dgrid { grid-template-columns: 1fr; }
  .dc__img img { height: 190px; }
  .ft__top { grid-template-columns: 1fr; }
  .ilinks__grid { grid-template-columns: 1fr; }
  .gcard { flex-direction: column; }
  .gcard__img, .gcard__img img { width: 72px; height: 72px; }
  .final__row { grid-template-columns: 1fr; }
  .crumbs { font-size: 12px; }
  .mtable { min-width: 540px; }
}

/* ---- touch targets: never smaller than 44px on coarse pointers ---- */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .chip { min-height: 40px; display: inline-flex; align-items: center; }
  .jump a { min-height: 40px; display: inline-flex; align-items: center; }
  .h__burger { padding: 12px; min-height: 44px; min-width: 44px; justify-content: center; }
  .ft__social a { width: 42px; height: 42px; }
}

/* ---- safe-area insets for notched phones ---- */
@supports (padding: env(safe-area-inset-left)) {
  .ct { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .h { padding-top: env(safe-area-inset-top); }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- print ---- */
@media print {
  .h, .dr, .ft, .final, .totop, .jump { display: none !important; }
  a[href]::after { content: ""; }
}

/* ==========================================================================
   JS-ENHANCED CHROME (added by assets/js/app.js)
   ========================================================================== */
.h.is-stuck { box-shadow: 0 6px 22px -14px rgba(22,23,26,.45); }

.langbar {
  position: relative; z-index: 90;
  background: var(--ink); color: #fff;
  padding: 10px 18px; text-align: center; font-size: 13.5px;
}
.langbar a { color: #fff; text-decoration: underline; font-weight: 700; }
.langbar a:hover { color: var(--amber); }

.stickbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(120%); transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.stickbar.is-on { transform: none; }
.stickbar a {
  flex: 1; text-align: center; padding: 13px 12px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 700; min-height: 46px; display: flex; align-items: center; justify-content: center;
}
.stickbar a:first-child { background: var(--coral); color: #fff; }
.stickbar a:last-child { border: 1.5px solid var(--line); color: var(--ink); }
@media (min-width: 861px) { .stickbar { display: none; } }

/* ==========================================================================
   CITY GUIDE  /chinaguide/<city>/
   --------------------------------------------------------------------------
   The long editorial page. Built to be read top-to-bottom on a phone and to
   still look like a printed guide on a 1440px screen.

   Rhythm: hero (dark) → answer → impression (tint) → wishlist → numbered
   chapters alternating white / tint → FAQ (tint) → plan → more guides.
   The alternating background is what keeps a 15-chapter page from reading as
   one endless column.
   ========================================================================== */

/* ------------------------------------------------------------------ hero -- */
.cghero {
  position: relative;
  padding: 96px 0 76px;
  background: #101216;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* Two layers: the photograph, then a gradient heavy enough at the bottom that
   the stat band stays legible whatever the picture happens to be. */
.cghero[style*="--hi"]::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--hi);
  background-size: cover; background-position: center 38%;
  transform: scale(1.02);
}
.cghero[style*="--hi"]::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,14,18,.62) 0%, rgba(12,14,18,.74) 52%, rgba(12,14,18,.92) 100%),
    linear-gradient(90deg, rgba(12,14,18,.78) 0%, rgba(12,14,18,.30) 68%, rgba(12,14,18,.10) 100%);
}
.cghero__in { position: relative; max-width: 940px; }
.cghero__k {
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #FF8A6E; margin-bottom: 16px;
}
.cghero__in h1 {
  font-size: clamp(32px, 5.6vw, 62px); line-height: 1.03; letter-spacing: -.028em;
  margin-bottom: 18px; text-wrap: balance; color: #fff;
}
.cghero__lede {
  font-size: clamp(16px, 1.9vw, 20.5px); line-height: 1.5;
  color: rgba(255,255,255,.82); max-width: 60ch;
}
.cghero__stats {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px; overflow: hidden;
}
.cghero__stats li {
  background: rgba(16,18,22,.55); backdrop-filter: blur(6px);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 5px;
}
.cghero__stats small {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.56);
}
.cghero__stats strong { font-size: 15px; font-weight: 700; line-height: 1.35; color: #fff; }
.cghero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cghero__acts .btn--o { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.34); color: #fff; }
.cghero__acts .btn--o:hover { border-color: #fff; background: rgba(255,255,255,.18); }
.cghero__cred {
  margin-top: 22px; font-size: 12.5px; color: rgba(255,255,255,.52);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}

/* --------------------------------------------------------------- jump nav -- */
.cgjumpwrap { padding: 30px var(--pad) 0; }
.cgjumpwrap .jump ul { gap: 8px; }

/* --------------------------------------------------------------- chapters -- */
.cgsec { padding: 76px 0; position: relative; scroll-margin-top: 88px; }
.cgsec--tint { background: var(--tint); }

.cgch {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px;
  align-items: start; margin-bottom: 38px;
}
/* The ghost numeral is the whole chapter device — big, coral, barely there. */
.cgch__no {
  font-family: var(--fd); font-weight: 800; font-size: clamp(46px, 7vw, 92px);
  line-height: .82; letter-spacing: -.05em;
  color: var(--coral); opacity: .17; user-select: none;
  min-width: 2.1ch;
}
.cgch__k {
  font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--coral); margin-bottom: 10px;
}
.cgch h2 { font-size: clamp(26px, 3.9vw, 44px); letter-spacing: -.026em; text-wrap: balance; }
.cgch__n { margin-top: 14px; font-size: 15.5px; color: var(--ink-2); max-width: 74ch; }

/* ------------------------------------------------------------ impression -- */
.cgimp { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 12px; }
.cgimp__f { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--tint-2); }
.cgimp__f img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.cgimp__f:hover img { transform: scale(1.04); }
.cgimp__f--1 { grid-column: span 2; grid-row: span 2; }
.cgimp__f--2 { grid-column: span 2; }
.cgimp__f--3, .cgimp__f--4 { grid-column: span 1; }
.cgimp__f figcaption {
  position: absolute; inset: auto 0 0 0; padding: 26px 14px 11px;
  font-size: 12.5px; line-height: 1.4; color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72));
}

.cgq { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-top: 34px; }
.cgq__i {
  margin: 0; padding: 24px 26px; background: #fff;
  border-left: 4px solid var(--coral); border-radius: 0 14px 14px 0;
  box-shadow: var(--sh);
}
.cgq__i p { font-size: 16.5px; line-height: 1.65; color: var(--ink); font-style: italic; }
.cgq__i cite { display: block; margin-top: 14px; font-size: 13px; font-style: normal; font-weight: 700; color: var(--ink-3); }

.cgintro { margin-top: 40px; }
.cgintro p:first-child { font-size: 19px; line-height: 1.68; color: var(--ink); }

/* ---------------------------------------------------------------- wishlist -- */
.cgwish {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 34px;
  counter-reset: w;
}
.cgwish__i {
  display: flex; align-items: baseline; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.cgwish__n {
  font-family: var(--fd); font-weight: 800; font-size: 15px; color: var(--coral);
  min-width: 2.2ch; letter-spacing: .02em;
}
.cgwish__t { font-size: 16px; line-height: 1.5; color: var(--ink); }

/* --------------------------------------------------------- numbered tiles -- */
.cgnum { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.cgnum__i {
  position: relative; padding: 26px 24px 24px; background: #fff;
  border: 1px solid var(--line); border-radius: 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cgnum__i:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: transparent; }
.cgnum__img { display: block; margin: -26px -24px 6px; border-radius: 17px 17px 0 0; overflow: hidden; aspect-ratio: 16 / 10; }
.cgnum__img img { width: 100%; height: 100%; object-fit: cover; }
.cgnum__n {
  font-family: var(--fd); font-weight: 800; font-size: 13px; letter-spacing: .1em;
  color: var(--coral);
}
.cgnum__i h3 { font-size: 19.5px; letter-spacing: -.015em; }
.cgnum__i p { font-size: 15px; line-height: 1.62; color: var(--ink-2); }
.cgsec--tint .cgnum__i { background: #fff; }

/* ------------------------------------------------------------ rich cards -- */
.cgrich { display: flex; flex-direction: column; gap: 22px; }
.cgrich__i {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
}
/* No photograph: the icon becomes a small mark above the tag rather than a
   96px column. A tall narrow plate with one emoji floating in the middle of it
   reads as a missing image, which is worse than no image at all. */
.cgrich__i[data-plain] { grid-template-columns: minmax(0, 1fr); }
.cgrich__i[data-plain] .cgrich__icon {
  display: block; padding: 26px 30px 0; font-size: 30px; line-height: 1;
  background: none; border: 0;
}
.cgrich__i[data-plain] .cgrich__b { padding-top: 14px; }
.cgrich__media { display: block; min-height: 240px; background: var(--tint-2); }
.cgrich__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cgrich__icon {
  display: grid; place-items: center; font-size: 38px;
  background: linear-gradient(160deg, #FFF1EC, var(--tint));
  border-right: 1px solid var(--line);
}
.cgrich__b { padding: 28px 30px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cgrich__tag {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal);
}
.cgrich__i h3 { font-size: clamp(20px, 2.3vw, 26px); letter-spacing: -.018em; }
.cgrich__d { font-size: 15.5px; line-height: 1.68; color: var(--ink-2); }

/* spec rows — ticket / hours / address / phone */
.cgspec { margin: 4px 0 0; display: grid; gap: 0; }
.cgspec__r {
  display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 16px;
  padding: 9px 0; border-top: 1px dashed var(--line);
}
.cgspec dt { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.cgspec dd { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); }

/* tip callout */
.cgtip {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 6px; padding: 14px 16px; border-radius: 12px;
  background: rgba(245,165,36,.10); border: 1px solid rgba(245,165,36,.28);
  font-size: 14px; line-height: 1.62; color: var(--ink-2);
}
.cgtip strong { color: var(--ink); }

/* --------------------------------------------------------------- timeline -- */
.cgtl { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.cgtl__plan { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px 30px 24px; }
.cgtl__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cgtl__head h3 { font-size: clamp(21px, 2.5vw, 27px); letter-spacing: -.02em; }
.cgtl__days {
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--coral); background: rgba(255,86,56,.10); padding: 6px 11px; border-radius: 999px;
}
.cgtl__blurb { margin-top: 12px; font-size: 15px; line-height: 1.63; color: var(--ink-2); }
.cgtl__steps { list-style: none; margin: 22px 0 0; padding: 0 0 0 8px; display: grid; gap: 20px; }
.cgtl__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; position: relative; }
/* the vertical rail */
.cgtl__step::before {
  content: ""; position: absolute; left: 26px; top: 34px; bottom: -20px; width: 2px;
  background: linear-gradient(180deg, var(--line), transparent);
}
.cgtl__step:last-child::before { display: none; }
.cgtl__badge {
  width: 54px; height: 30px; border-radius: 999px; background: var(--coral); color: #fff;
  font-size: 12px; font-weight: 800; display: grid; place-items: center; letter-spacing: .02em;
  flex: none; z-index: 1;
}
.cgtl__body h4 { font-size: 17px; margin-bottom: 8px; letter-spacing: -.012em; }
.cgtl__body p { font-size: 14.7px; line-height: 1.66; color: var(--ink-2); }
.cgtl__body p + p { margin-top: 9px; }
.cgtl__stops { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px !important; }
.cgtl__stopl { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cgtl__stop {
  font-size: 12.5px; padding: 4px 10px; border-radius: 999px;
  background: var(--tint); border: 1px solid var(--line); color: var(--ink-2);
}

/* ------------------------------------------------------------------ chips -- */
.cgpills { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cgpill {
  padding: 24px; border-radius: 18px; background: #fff;
  border: 1px solid var(--line); border-left: 4px solid var(--coral);
}
.cgsec--tint .cgpill { background: #fff; }
.cgpill h3 { font-size: 18.5px; margin-bottom: 9px; letter-spacing: -.015em; }
.cgpill p { font-size: 14.7px; line-height: 1.66; color: var(--ink-2); }

/* ----------------------------------------------------------------- places -- */
.cgplaces { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.cgplace {
  padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.cgplace__tag {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--coral);
}
.cgplace h3 { font-size: 18.5px; letter-spacing: -.015em; }
.cgplace__d { font-size: 14.7px; line-height: 1.64; color: var(--ink-2); }

/* ------------------------------------------------------------------ modes -- */
.cgmodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.cgmode {
  padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.cgmode__h { display: flex; align-items: center; gap: 11px; }
.cgmode__h span { font-size: 21px; line-height: 1; }
.cgmode__h h3 { font-size: 19px; letter-spacing: -.015em; }
.cgmode__d { font-size: 14.7px; line-height: 1.66; color: var(--ink-2); }

/* ------------------------------------------------------------------ table -- */
.cgtbl { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.cgtbl table { width: 100%; border-collapse: collapse; min-width: 520px; }
.cgtbl th, .cgtbl td { padding: 14px 20px; text-align: left; font-size: 14.5px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cgtbl tr:last-child th, .cgtbl tr:last-child td { border-bottom: 0; }
.cgtbl th { width: 34%; font-weight: 700; color: var(--ink); background: var(--tint); }
.cgtbl td { color: var(--ink-2); line-height: 1.6; }

/* ------------------------------------------------------------------ prose -- */
.cgprose { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.cgprose__s h3 { font-size: clamp(19px, 2.2vw, 24px); margin-bottom: 14px; letter-spacing: -.018em; }
.cgprose__s p { font-size: 16px; line-height: 1.72; color: var(--ink-2); }
.cgprose__s p + p { margin-top: 13px; }

/* ------------------------------------------------------------------ media -- */
.cgmedia { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.cgmedia__i { padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.cgmedia__k {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal); background: rgba(14,124,107,.10);
  padding: 5px 10px; border-radius: 999px; margin-bottom: 12px;
}
.cgmedia__i h3 { font-size: 18px; letter-spacing: -.015em; }
.cgmedia__by { margin-top: 5px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.cgmedia__d { margin-top: 11px; font-size: 14.5px; line-height: 1.66; color: var(--ink-2); }

/* ------------------------------------------------------------------- plan -- */
.cgplan__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* read-next cards reuse the shared grids; nothing to add here */

/* --------------------------------------------------------------- H5 -------- */
@media (max-width: 980px) {
  .cgrich__i { grid-template-columns: 260px minmax(0, 1fr); }
  .cghero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .cgsec { padding: 58px 0; }
  .cghero { padding: 66px 0 54px; }
  .cgch { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* The ghost numeral eats a whole column on a phone for no benefit — it
     becomes a small chapter mark above the title instead. */
  .cgch__no { font-size: 30px; opacity: .22; min-width: 0; }

  .cgimp { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .cgimp__f--1 { grid-column: span 2; grid-row: span 2; }
  .cgimp__f--2 { grid-column: span 2; }
  .cgimp__f--3, .cgimp__f--4 { grid-column: span 1; }

  .cgrich { gap: 16px; }
  .cgrich__i, .cgrich__i[data-plain] { grid-template-columns: minmax(0, 1fr); }
  .cgrich__media { min-height: 200px; }
  .cgrich__icon {
    place-items: center stretch; padding: 20px; font-size: 32px;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .cgrich__i[data-plain] .cgrich__icon { padding: 20px 20px 0; font-size: 28px; border-bottom: 0; }
  .cgrich__b { padding: 22px 20px; }
  .cgrich__i[data-plain] .cgrich__b { padding-top: 12px; }
  .cgspec__r { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .cgplace, .cgmode, .cgmedia__i, .cgpill { padding: 20px; }
  .cgtl__plan { padding: 24px 20px 20px; }
  .cgtl { grid-template-columns: minmax(0, 1fr); }
  .cgq__i { padding: 20px; }
  .cgintro p:first-child { font-size: 17.5px; }
  .cghero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cghero__stats li { padding: 13px 15px; }
  .cgtbl th { width: 40%; }
  .cgplan__acts .btn { width: 100%; }
}

@media (max-width: 460px) {
  .cghero__stats { grid-template-columns: minmax(0, 1fr); }
  .cgimp { grid-template-columns: 1fr; }
  .cgimp__f--1, .cgimp__f--2, .cgimp__f--3, .cgimp__f--4 { grid-column: span 1; grid-row: span 1; }
}

/* Print: a city guide is the one page people actually print. */
@media print {
  .cghero { background: #fff !important; color: #000 !important; padding: 0 0 18px; }
  .cghero[style*="--hi"]::before, .cghero[style*="--hi"]::after { display: none; }
  .cghero__in h1, .cghero__lede, .cghero__stats strong { color: #000 !important; }
  .cghero__stats small { color: #555 !important; }
  .cghero__stats { background: #fff; border-color: #ccc; }
  .cghero__stats li { background: #fff !important; backdrop-filter: none; }
  .cgsec { padding: 22px 0; page-break-inside: avoid; }
  .cgch__no { opacity: .35; }
  .cgjumpwrap, .cghero__acts, .cgplan__acts, .stickbar, .final, .jump { display: none !important; }
  .cgrich__i, .cgq__i, .cgnum__i, .cgpill, .cgplace, .cgmode, .cgtl__plan { box-shadow: none; }
}

/* ------------------------------------------------- destination ↔ guide bridge
   Sits just under the destination fact bar. Its whole job is to move a reader
   who wants detail from the commercial page to the editorial one (and to give
   the internal-link matrix a visible, keyword-bearing anchor rather than a
   footer-only one). */
.cgcross {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 26px;
  align-items: center; margin: 26px 0 0;
  padding: 22px 26px; border-radius: 18px;
  background: linear-gradient(120deg, #FFF3EE, var(--tint));
  border: 1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cgcross:hover { border-color: var(--coral); transform: translateY(-2px); box-shadow: var(--sh); }
.cgcross__t { font-family: var(--fd); font-weight: 800; font-size: 18px; letter-spacing: -.015em; }
.cgcross__d { grid-column: 1; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.cgcross__a { grid-row: 1 / span 2; grid-column: 2; font-weight: 800; font-size: 14.5px; color: var(--coral); white-space: nowrap; }
@media (max-width: 700px) {
  .cgcross { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .cgcross__a { grid-row: auto; grid-column: 1; }
}

/* ------------------------------------------------------------ FAQ fix -----
   `.fi__q` in the theme is `display:flex; justify-content:space-between`, but
   the markup emits the +/− icon FIRST and the question SECOND. space-between
   therefore parks the icon on the left and shoves every question to the right
   edge of the card — on every page that renders a FAQ, not just this one.

   The intended reading order is question → toggle, so the text takes the space
   and the icon is pushed to the trailing edge. Done here rather than in
   style-c.css so the theme file stays as delivered.

   (Keep the DOM order: the icon is aria-hidden, so visual order via `order`
   costs screen readers nothing.) */
.fi__q { justify-content: flex-start; }
.fi__q > span:not(.fi__ic) { flex: 1 1 auto; }
.fi__q .fi__ic { order: 2; margin-left: auto; }

/* ==========================================================================
   CARD CONTRACT FIXES — 组件标记与 style-c 契约不一致导致的排版错误
   ==========================================================================
   两处都是同一个病根：style-c.css 是按**旧的 DOM 结构**写的，而
   src/templates/components.mjs 改过结构，CSS 却没人跟着改。
   浏览器里不会报错，只是默默错位，所以极易漏掉。

   为什么改在 extras.css 而不是 style-c.css：style-c.css 是已交付的风格文件，
   这个项目一贯的做法是「新问题在 extras.css 覆盖」，保持它可回溯对比。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) 线路卡「N days」压住「View details」按钮

   style-c.css 里 .card__days 是 position:absolute; bottom:12px; right:12px
   —— 当初的设计是压在卡片图片右下角的徽章。但组件把它放进 .card__meta
   文字行里了，于是它脱离文档流；而 .card 本身没有 position，
   最近的定位祖先跑到卡片外面 → 它飘到卡片底部，正压在按钮上。
   修法：把它拉回正常流（它本来就该是那行文字里的一个词）。
   -------------------------------------------------------------------------- */
.card { position: relative; }              /* 防御：卡片内绝对定位不许跑出去 */
.card__days {
  position: static;
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
  font-weight: 700;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   2) 目的地卡：图片不铺满 + 深色渐变裸露成一大块黑底

   style-c.css 的 .dc 是按 background-image 设计的（background-size:cover），
   但组件用的是真实 <img>（要有 alt，图片 SEO 靠它）。
   <img> 是 inline，塞在 <span> 里不铺满 → 卡片上下留出大片渐变，
   文字又正好压在黑色渐变上，看着像坏了。
   修法：让 .dc__img 绝对定位铺满、图片 object-fit:cover，
   再明确层级：图片(0) → 渐变(1) → 文字(2)。
   -------------------------------------------------------------------------- */
.dc__img { position: absolute; inset: 0; z-index: 0; }
.dc__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dc::after { z-index: 1; }
.dc__b { position: relative; z-index: 2; display: block; }

/* .dc__b / .dc__c / .dc__t 在 style-c.css 里根本没有规则（又是结构改过没同步），
   于是副标题和简介用的是继承来的深色 —— 压在深色渐变上几乎看不见。 */
.dc__c { color: rgba(255, 255, 255, .84); font-size: 12px; }
.dc__t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: rgba(255, 255, 255, .74);
  font-size: 13px; line-height: 1.45; margin-top: 6px;
}

/* --------------------------------------------------------------------------
   3) 页头「Talk to a China expert」被挤成 3 行

   style-c.css 里 .h__help 有 display:flex / gap 等规则，唯独漏了 nowrap；
   它在页头这个 flex 行里是可压缩项，导航一长就被压窄，文字断成好几行。
   （这类「有规则但缺关键属性」的问题，类名体检查不出来，只能靠看图。）
   -------------------------------------------------------------------------- */
.h__help { white-space: nowrap; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   4) 导游卡：补上「名字空缺」与「评价未展示」

   两件事：
   a) `guideView()` 漏映射 `name` → 卡片渲染出空 <h3>，导游名字根本没显示
      （guides.js 是「语言对」形状 `name:{en,zh}`，和其他数据文件不同，所以最容易漏）
   b) 数据里一直有 `rating / reviews / quote / quoteAuthor`，但卡片从没渲染过 ——
      等于旅客评价白采了。现在按「评分行 + 旅客原话」展示。
   -------------------------------------------------------------------------- */
.gcard__r { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; font-size: 12.5px; color: var(--ink-3); }
.gcard__r .st { color: var(--amber); letter-spacing: .5px; }
.gcard__q {
  margin: 12px 0 0; padding: 12px 14px; border-left: 3px solid var(--coral);
  background: var(--tint); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.gcard__q p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.gcard__q cite { display: block; margin-top: 6px; font-size: 12px; font-style: normal; color: var(--ink-3); }