/* ============================================================
   MEIAN · Bespoke Journeys — shared stylesheet for tour pages
   Ink-jade green + bright gold, extruded ("scroll") 3D type
   ============================================================ */
:root{
  color-scheme:dark;
  --bg0:#0A1411; --navy:#10201A; --navy-2:#152821; --navy-3:#1C352C; --ink:#0C1814;
  --gold:#F0D68A; --gold-deep:#F7E7AC; --gold-soft:rgba(240,214,138,.16);
  --teal:#9FDCC0; --teal-soft:rgba(159,220,192,.12);
  --text:#E9F2EC; --muted:#9FBBA9; --dim:#5E7A6B;
  --line:rgba(240,214,138,.18); --line-soft:rgba(150,178,162,.13);
  --serif:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",Georgia,"Times New Roman",serif;
  --sans:"Segoe UI","Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Consolas,"Courier New",monospace;
  --rad:18px;
  --el1:0 1px 0 rgba(255,255,255,.05) inset,0 10px 30px -12px rgba(0,0,0,.55);
  --el2:0 1px 0 rgba(255,255,255,.06) inset,0 26px 60px -18px rgba(0,0,0,.68),0 6px 18px rgba(0,0,0,.35);
  --el3:0 1px 0 rgba(255,255,255,.08) inset,0 40px 90px -24px rgba(0,0,0,.8),0 10px 30px rgba(0,0,0,.45);
  --glow-gold:0 0 70px -14px rgba(240,214,138,.28);
  --glow-teal:0 0 60px -14px rgba(159,220,192,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg0);color:var(--text);font-family:var(--sans);line-height:1.78;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--gold);color:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
[id^="mulepage"]{display:none !important}
.container{width:min(1180px,92%);margin:0 auto}
.noise{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--teal));box-shadow:0 0 12px rgba(240,214,138,.6)}
::-webkit-scrollbar{width:9px}::-webkit-scrollbar-track{background:var(--bg0)}
::-webkit-scrollbar-thumb{background:#1C3550;border-radius:9px;border:2px solid var(--bg0)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-deep)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}html{scroll-behavior:auto}}

/* ============ NAV ============ */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;padding:26px 0;transition:.4s}
.nav .container{width:100%;padding-left:clamp(22px,4vw,72px);padding-right:clamp(22px,4vw,72px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:14px}
.logo-mark{width:52px;height:52px;flex:none;border:1px solid rgba(240,214,138,.6);border-radius:50%;display:grid;place-items:center;position:relative;
  background:radial-gradient(120% 120% at 32% 26%,#26503F 0%,#152B21 52%,#0A1810 100%);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.14),inset 0 -8px 14px rgba(0,0,0,.6),0 10px 26px -8px rgba(0,0,0,.75),0 0 20px rgba(240,214,138,.16)}
.logo-mark i{font-style:normal;font-family:var(--serif);font-size:26px;font-weight:600;line-height:1;display:block;
  background:linear-gradient(160deg,#FFF3CC 12%,#E8C778 38%,#9A7A35 68%,#F2D892 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.65)) drop-shadow(0 0 9px rgba(240,214,138,.4))}
.logo-mark::after{content:"";position:absolute;inset:-6px;border:1px dashed rgba(240,214,138,.35);border-radius:50%;animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.logo-text b{font-family:var(--serif);font-size:26px;letter-spacing:8px;margin-right:-8px;color:#F4EEDC;font-weight:600;display:block;line-height:1.25;
  text-shadow:0 1px 0 rgba(255,255,255,.5),0 2px 0 #24503F,0 3px 0 #1A3B2E,0 4px 0 #12291F,0 6px 12px rgba(0,0,0,.68),0 0 26px rgba(240,214,138,.22)}
.logo-text span{font-size:10.5px;letter-spacing:1.5px;color:var(--gold);text-transform:uppercase;font-family:var(--mono);white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.22),0 2px 0 #16332A,0 3px 6px rgba(0,0,0,.6)}
.menu{display:flex;gap:8px;font-size:14.5px;letter-spacing:.6px}
.menu a{color:var(--muted);padding:8px 18px;border-radius:999px;white-space:nowrap;transition:.35s;border:1px solid rgba(150,178,162,.2);
  background:linear-gradient(168deg,rgba(255,255,255,.06),rgba(10,21,17,.42) 58%),var(--navy);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -4px 8px rgba(0,0,0,.5),0 3px 0 #07120D,0 4px 0 rgba(0,0,0,.35),0 10px 20px -8px rgba(0,0,0,.8);
  text-shadow:0 1px 0 rgba(255,255,255,.16),0 2px 0 #13291F,0 3px 6px rgba(0,0,0,.66)}
.menu a:hover{color:var(--gold);border-color:rgba(240,214,138,.55);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -4px 8px rgba(0,0,0,.42),0 4px 0 #07120D,0 12px 26px -8px rgba(0,0,0,.85),0 0 20px rgba(240,214,138,.3)}
.menu a:active{transform:translateY(2px);box-shadow:inset 0 2px 8px rgba(0,0,0,.55),0 1px 0 #07120D}
.nav-right{display:flex;align-items:center;gap:14px}
.lang-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;transition:.3s;
  background:linear-gradient(168deg,rgba(255,255,255,.05),rgba(10,21,17,.4)),var(--navy);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -3px 6px rgba(0,0,0,.45),0 3px 0 #07120D,0 8px 16px -6px rgba(0,0,0,.75)}
.lang-link:hover{color:var(--gold);border-color:rgba(240,214,138,.55)}
.nav-cta{border:1px solid rgba(240,214,138,.65);color:var(--gold);padding:9px 22px;border-radius:999px;font-size:13.5px;letter-spacing:1.5px;transition:.35s;cursor:pointer;white-space:nowrap;
  background:linear-gradient(168deg,rgba(240,214,138,.12),rgba(10,21,17,.45) 60%),var(--navy);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -4px 8px rgba(0,0,0,.45),0 3px 0 #4A3A12,0 10px 20px -8px rgba(0,0,0,.8);
  text-shadow:0 1px 0 rgba(255,255,255,.14),0 2px 4px rgba(0,0,0,.62)}
.nav-cta:hover{background:linear-gradient(135deg,#FFF3CC,var(--gold) 55%,var(--gold-deep));color:var(--ink);font-weight:600;transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 0 #4A3A12,0 14px 28px -8px rgba(0,0,0,.85),0 0 26px rgba(240,214,138,.45)}
.nav-cta:active{transform:translateY(2px);box-shadow:inset 0 2px 8px rgba(0,0,0,.45),0 1px 0 #4A3A12}
/* <=1400px 笔电/小桌面宽度：收紧导航字距与间距，保证 Plan My Trip 与语言切换始终在屏幕内（不改变按钮形状与位置关系） */
@media(max-width:1400px){
  .nav .container{padding-left:clamp(18px,2.4vw,34px);padding-right:clamp(18px,2.4vw,34px)}
  .logo-text b{letter-spacing:5px;margin-right:-5px}
  .logo-text span{font-size:9.5px;letter-spacing:.6px}
  .menu{gap:4px;font-size:13.5px;letter-spacing:.2px}
  .menu a{padding:7px 11px}
  .nav-right{gap:8px}
  .lang-link{padding:5px 10px;font-size:11px}
  .nav-cta{padding:8px 15px;font-size:12.5px;letter-spacing:.8px}
}
@media(max-width:1240px){
  .logo-text span{display:none}
  .menu a{padding:7px 9px}
}
.nav.solid{background:rgba(8,17,14,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:14px 0;border-bottom:1px solid var(--line-soft)}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.burger i{width:22px;height:1.5px;background:var(--gold);display:block}

/* ============ PAGE HERO ============ */
.phero{position:relative;min-height:78vh;display:flex;align-items:flex-end;padding-top:130px;overflow:hidden}
.phero-bg{position:absolute;inset:0;background:var(--ph-img) center/cover;opacity:.46;filter:hue-rotate(-48deg) saturate(.82) brightness(.96);transform:scale(1.05);transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.phero.loaded .phero-bg{transform:scale(1)}
.phero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,17,14,.97) 6%,rgba(16,32,26,.72) 48%,rgba(8,17,14,.42) 100%),linear-gradient(to top,var(--bg0) 2%,transparent 52%)}
.phero-grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.3;
  background:linear-gradient(rgba(240,214,138,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(240,214,138,.05) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(880px 560px at 28% 42%,#000 28%,transparent 76%);mask-image:radial-gradient(880px 560px at 28% 42%,#000 28%,transparent 76%)}
.orb{position:absolute;border-radius:50%;filter:blur(90px);z-index:1;pointer-events:none;opacity:.5;animation:float 15s ease-in-out infinite alternate}
.orb-gold{width:400px;height:400px;background:radial-gradient(circle,rgba(240,214,138,.3),transparent 65%);top:-110px;right:6%}
.orb-teal{width:340px;height:340px;background:radial-gradient(circle,rgba(159,220,192,.16),transparent 65%);bottom:-70px;left:18%;animation-delay:-7s}
@keyframes float{from{transform:translateY(-22px) scale(1)}to{transform:translateY(26px) scale(1.07)}}
.phero .container{position:relative;z-index:2;padding-bottom:clamp(48px,7vh,86px)}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--dim);margin-bottom:26px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.crumb a:hover{color:var(--gold)}
.crumb i{font-style:normal;color:rgba(240,214,138,.5)}
.chip-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:1.2px;color:var(--muted);border:1px solid var(--line-soft);background:rgba(16,32,26,.5);backdrop-filter:blur(6px);border-radius:999px;padding:6px 14px;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.1)) drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.chip.t::before{background:var(--teal);box-shadow:0 0 8px var(--teal)}
.kicker{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;letter-spacing:3.5px;color:var(--gold);margin-bottom:20px;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.14)) drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.kicker::before{content:"";width:44px;height:1px;background:var(--gold)}
.phero h1{font-family:var(--serif);font-size:clamp(32px,4.9vw,62px);font-weight:600;line-height:1.24;letter-spacing:.5px;margin-bottom:14px;color:#F4EEDC;max-width:15em;
  text-shadow:0 1px 0 rgba(255,255,255,.35),0 2px 0 #1E4436,0 3px 0 #152F26,0 4px 0 #0E2119,0 6px 0 #081711,0 10px 20px rgba(0,0,0,.78),0 0 44px rgba(240,214,138,.14)}
.phero h1 em{font-style:normal;background:linear-gradient(115deg,#FFF3D6 15%,var(--gold) 45%,var(--gold-deep) 80%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(14,33,25,.95)) drop-shadow(0 4px 0 rgba(8,20,15,.85)) drop-shadow(0 7px 14px rgba(0,0,0,.8)) drop-shadow(0 0 26px rgba(240,214,138,.38))}
.phero .lead{max-width:660px;color:var(--muted);font-size:16px;margin-bottom:34px;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.btn-row{display:flex;gap:16px;flex-wrap:wrap}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 34px;border-radius:999px;font-size:14.5px;letter-spacing:.8px;cursor:pointer;transition:.35s;border:1px solid transparent;overflow:hidden}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--ink);font-weight:600;
  text-shadow:0 1px 0 rgba(255,255,255,.45),0 2px 3px rgba(0,0,0,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -5px 10px rgba(122,84,20,.4),0 4px 0 #8A6420,0 6px 0 rgba(0,0,0,.25),0 14px 30px -8px rgba(0,0,0,.75),0 6px 28px rgba(240,214,138,.32)}
.btn-gold::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 3.6s infinite}
@keyframes shine{0%{left:-80%}55%,100%{left:130%}}
.btn-gold:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -5px 10px rgba(122,84,20,.35),0 5px 0 #8A6420,0 18px 38px -8px rgba(0,0,0,.8),0 8px 34px rgba(240,214,138,.45)}
.btn-gold:active{transform:translateY(3px);box-shadow:inset 0 3px 10px rgba(122,84,20,.55),0 1px 0 #8A6420}
.btn-ghost{border-color:rgba(240,214,138,.5);color:var(--gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -4px 8px rgba(0,0,0,.5),0 3px 0 #07120D,0 10px 20px -8px rgba(0,0,0,.78)}
.btn-ghost:hover{background:var(--gold-soft);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 0 #07120D,0 14px 26px -8px rgba(0,0,0,.82),0 0 22px rgba(240,214,138,.3)}
/* hero fact strip */
.facts{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;margin-top:52px;box-shadow:var(--el2)}
.fact{background:rgba(10,21,17,.78);backdrop-filter:blur(8px);padding:22px 14px;text-align:center;transition:.35s}
.fact:hover{background:rgba(22,45,37,.85)}
.fact b{display:block;font-family:var(--mono);font-size:clamp(19px,2.4vw,28px);font-weight:600;letter-spacing:.5px;
  background:linear-gradient(180deg,#FFF6D8 8%,var(--gold) 42%,#EFCF7C 72%,var(--gold-deep) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(16,38,29,.9)) drop-shadow(0 4px 8px rgba(0,0,0,.75)) drop-shadow(0 -1px 0 rgba(255,255,255,.22))}
.fact span{display:block;font-size:11.5px;color:var(--muted);letter-spacing:1.4px;text-transform:uppercase;margin-top:5px}

/* ============ SECTIONS ============ */
section{padding:96px 0;position:relative;scroll-margin-top:96px}
section.alt{background:linear-gradient(180deg,var(--bg0),var(--navy))}
section.deep{background:var(--navy)}
.sec-head{margin-bottom:52px;max-width:820px}
.sec-head .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:3.5px;color:var(--gold);display:flex;align-items:center;gap:12px;margin-bottom:14px;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.14)) drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.sec-head .eyebrow::before{content:"//";color:var(--teal)}
.sec-head h2{font-family:var(--serif);font-size:clamp(24px,3.1vw,38px);font-weight:600;letter-spacing:.5px;line-height:1.42;color:#F2ECD9;
  text-shadow:0 1px 0 rgba(255,255,255,.3),0 2px 0 #1E4436,0 3px 0 #13291F,0 5px 12px rgba(0,0,0,.72),0 0 30px rgba(240,214,138,.1)}
.sec-head p{color:var(--muted);margin-top:14px;font-size:15.5px}
.gold-line{width:56px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);margin-top:20px;box-shadow:0 0 9px rgba(240,214,138,.45)}
.reveal{opacity:0;translate:0 34px;transition:opacity .85s ease,translate .85s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;translate:0 0}
.prose p{color:var(--muted);font-size:16px;margin-bottom:18px;max-width:820px}
.prose p b,.prose li b{color:var(--text);font-weight:600}
.prose h3{font-family:var(--serif);font-size:20px;color:#EFE8D6;margin:34px 0 12px;font-weight:600;
  text-shadow:0 1px 0 rgba(255,255,255,.25),0 2px 0 #173327,0 3px 0 #0D1F17,0 5px 10px rgba(0,0,0,.68)}
.prose ul{list-style:none;margin:6px 0 20px;max-width:820px}
.prose li{color:var(--muted);font-size:15.5px;padding-left:26px;position:relative;margin-bottom:10px}
.prose li::before{content:"◆";position:absolute;left:2px;top:0;font-size:10px;color:var(--gold)}

/* ---- cards ---- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border:1px solid var(--line-soft);border-radius:var(--rad);padding:32px 28px;position:relative;overflow:hidden;transition:.45s;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.05) 44%,transparent 52%),linear-gradient(160deg,rgba(240,214,138,.05),rgba(22,45,37,.35) 55%),var(--navy-2);
  box-shadow:var(--el2)}
.card:hover{transform:translateY(-7px);border-color:rgba(240,214,138,.4);box-shadow:var(--el3),var(--glow-gold)}
.card .num{position:absolute;right:20px;top:14px;font-family:var(--mono);font-size:13px;color:rgba(240,214,138,.35);letter-spacing:2px}
.card .ico{width:48px;height:48px;border-radius:13px;background:var(--gold-soft);border:1px solid var(--line);display:grid;place-items:center;margin-bottom:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 14px -6px rgba(0,0,0,.6),0 0 14px rgba(240,214,138,.14)}
.card .ico svg{width:23px;height:23px;stroke:var(--gold);fill:none;stroke-width:1.5}
.card h3{font-family:var(--serif);font-size:19px;letter-spacing:.4px;margin-bottom:10px;font-weight:600;color:#EFE8D6;
  text-shadow:0 1px 0 rgba(255,255,255,.25),0 2px 0 #173327,0 3px 0 #0D1F17,0 5px 10px rgba(0,0,0,.68)}
.card p{color:var(--muted);font-size:14.5px}

/* ---- itinerary ---- */
.itin{display:grid;gap:18px}
.itin-block{border:1px solid var(--line-soft);border-radius:var(--rad);overflow:hidden;background:var(--navy-2);box-shadow:var(--el2);transition:.4s}
.itin-block:hover{border-color:rgba(240,214,138,.35);box-shadow:var(--el3)}
.ib-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;padding:24px 30px;border-bottom:1px solid var(--line-soft);
  background:linear-gradient(168deg,rgba(240,214,138,.08),rgba(10,21,17,.3) 60%)}
.ib-hd h3{font-family:var(--serif);font-size:21px;letter-spacing:.4px;color:#F0E9D8;font-weight:600;text-shadow:0 1px 0 rgba(255,255,255,.25),0 2px 0 #173327,0 4px 9px rgba(0,0,0,.66)}
.ib-hd .len{font-family:var(--mono);font-size:11.5px;letter-spacing:2px;color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:3px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -3px 6px rgba(0,0,0,.45),0 3px 0 #07120D}
.ib-hd .note{font-size:13.5px;color:var(--muted);margin-left:auto;max-width:360px}
.days{padding:12px 30px 26px}
.day{display:grid;grid-template-columns:104px 1fr;gap:20px;padding:18px 0;border-bottom:1px dashed rgba(150,178,162,.16)}
.day:last-child{border-bottom:0}
.day .dt{font-family:var(--mono);font-size:11.5px;letter-spacing:1.6px;color:var(--gold);padding-top:4px;filter:drop-shadow(0 1px 0 rgba(255,255,255,.14),0 2px 0 #173327)}
.day .dt i{display:block;font-style:normal;font-size:10px;color:var(--dim);letter-spacing:1px;margin-top:4px}
.day h4{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:.3px;margin-bottom:6px;color:#E9F2EC}
.day p{font-size:14.5px;color:var(--muted)}
.day .stay{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:1px;color:var(--teal);background:var(--teal-soft);border:1px solid rgba(159,220,192,.24);border-radius:8px;padding:3px 10px}

/* ---- key/value table ---- */
.kv{border:1px solid var(--line-soft);border-radius:var(--rad);overflow:hidden;box-shadow:var(--el1)}
.kv-row{display:grid;grid-template-columns:210px 1fr;gap:0;border-bottom:1px solid var(--line-soft);background:var(--navy-2)}
.kv-row:last-child{border-bottom:0}
.kv-row dt{font-family:var(--mono);font-size:12px;letter-spacing:1.4px;color:var(--gold);padding:18px 22px;background:rgba(10,21,17,.5);text-transform:uppercase}
.kv-row dd{padding:18px 24px;font-size:14.8px;color:var(--muted)}
.kv-row dd b{color:var(--text)}

/* ---- season strip ---- */
.season{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sea{border:1px solid var(--line-soft);border-radius:14px;padding:22px 20px;background:var(--navy-2);transition:.4s;box-shadow:var(--el1)}
.sea:hover{transform:translateY(-5px);border-color:rgba(240,214,138,.4);box-shadow:var(--el2),var(--glow-gold)}
.sea b{display:block;font-family:var(--serif);font-size:16px;color:#EFE8D6;margin-bottom:6px;font-weight:600}
.sea .m{font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;color:var(--teal);margin-bottom:10px;display:block}
.sea p{font-size:13.5px;color:var(--muted)}
.sea.best{border-color:rgba(240,214,138,.5);background:linear-gradient(165deg,rgba(240,214,138,.1),transparent 60%),var(--navy-2)}
.sea.best b{color:var(--gold)}

/* ---- inclusions ---- */
.inc{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.inc-col{border:1px solid var(--line-soft);border-radius:var(--rad);padding:30px 28px;background:var(--navy-2);box-shadow:var(--el1)}
.inc-col h3{font-family:var(--mono);font-size:12px;letter-spacing:3px;margin-bottom:18px;text-transform:uppercase}
.inc-col.yes h3{color:var(--teal)}.inc-col.no h3{color:var(--dim)}
.inc-col li{list-style:none;font-size:14.5px;color:var(--muted);padding:9px 0 9px 26px;position:relative;border-bottom:1px dashed rgba(150,178,162,.14)}
.inc-col li:last-child{border-bottom:0}
.inc-col.yes li::before{content:"✓";position:absolute;left:2px;color:var(--teal);font-weight:700}
.inc-col.no li::before{content:"—";position:absolute;left:2px;color:var(--dim)}

/* ---- FAQ ---- */
.faq{display:grid;gap:14px;max-width:900px}
.qa{border:1px solid var(--line-soft);border-radius:14px;background:var(--navy-2);overflow:hidden;transition:.35s;box-shadow:var(--el1)}
.qa:hover{border-color:rgba(240,214,138,.34)}
.qa summary{cursor:pointer;list-style:none;padding:20px 24px;font-family:var(--serif);font-size:17px;color:#EFE8D6;display:flex;align-items:center;gap:14px;font-weight:600}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";margin-left:auto;font-family:var(--mono);color:var(--gold);font-size:20px;transition:.3s}
.qa[open] summary::after{content:"–"}
.qa div{padding:0 24px 22px 24px;color:var(--muted);font-size:15px}

/* ---- cross links ---- */
.xlinks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.xlink{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line-soft);aspect-ratio:16/10;display:flex;align-items:flex-end;transition:.4s;box-shadow:var(--el2)}
.xlink img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:hue-rotate(-48deg) saturate(.82) brightness(.62);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.xlink span{position:relative;z-index:2;padding:16px 18px;font-family:var(--serif);font-size:16px;color:#F2ECD9;width:100%;background:linear-gradient(to top,rgba(8,17,14,.94),transparent)}
.xlink i{position:absolute;top:12px;right:14px;z-index:2;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--gold);opacity:0;transition:.35s}
.xlink:hover{border-color:rgba(240,214,138,.5);box-shadow:var(--el3),var(--glow-gold);transform:translateY(-5px)}
.xlink:hover img{transform:scale(1.07)}
.xlink:hover i{opacity:1}

/* ---- CTA band ---- */
.cta-band{position:relative;padding:96px 0;overflow:hidden;text-align:center}
.cbg{position:absolute;inset:0;z-index:0;background:var(--ph-img) center/cover;filter:hue-rotate(-48deg) saturate(.8) brightness(.9)}
.cta-band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(8,17,14,.9),rgba(8,17,14,.94))}
.cta-band .inner{position:relative;z-index:2;max-width:840px;margin:0 auto;background:linear-gradient(165deg,rgba(240,214,138,.07),rgba(16,32,26,.5) 60%),rgba(10,21,17,.55);
  border:1px solid var(--line-soft);border-radius:26px;padding:62px 54px;box-shadow:var(--el3);backdrop-filter:blur(10px)}
.cta-band h2{font-family:var(--serif);font-size:clamp(22px,3vw,36px);letter-spacing:.5px;font-weight:600;margin-bottom:14px;color:#F2ECD9;
  text-shadow:0 1px 0 rgba(255,255,255,.3),0 2px 0 #1E4436,0 3px 0 #13291F,0 5px 12px rgba(0,0,0,.72)}
.cta-band p{color:var(--muted);margin-bottom:34px;font-size:15px}

/* ---- contact / form ---- */
.ct-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.ct-info-item{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line-soft);transition:transform .3s}
.ct-info-item:hover{transform:translateX(6px)}
.ct-info-item svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.5;flex:none;margin-top:4px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.ct-info-item b{display:block;font-size:15px;letter-spacing:.4px;margin-bottom:4px}
.ct-info-item span{font-size:14px;color:var(--muted)}
.form{border:1px solid var(--line-soft);border-radius:var(--rad);padding:40px;background:linear-gradient(170deg,rgba(240,214,138,.04),transparent 50%),var(--navy-2);box-shadow:var(--el2)}
.form h3{font-family:var(--serif);font-size:22px;letter-spacing:.4px;margin-bottom:8px;font-weight:600;color:#EFE8D6;
  text-shadow:0 1px 0 rgba(255,255,255,.25),0 2px 0 #173327,0 3px 0 #0D1F17,0 5px 10px rgba(0,0,0,.68)}
.form>p{font-size:13.5px;color:var(--muted);margin-bottom:26px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-field{margin-bottom:16px}
.f-field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:1.6px;color:var(--muted);margin-bottom:8px;text-transform:uppercase}
.f-field input,.f-field select,.f-field textarea{width:100%;background:rgba(8,17,14,.7);border:1px solid rgba(150,178,162,.2);border-radius:10px;color:var(--text);padding:13px 16px;font-size:14.5px;font-family:var(--sans);transition:.3s;outline:none;box-shadow:inset 0 2px 7px rgba(0,0,0,.5)}
.f-field textarea{resize:vertical;min-height:96px}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--gold);box-shadow:inset 0 2px 7px rgba(0,0,0,.5),0 0 0 3px rgba(240,214,138,.12)}
.f-note{font-size:12px;color:var(--dim);margin:6px 0 18px}
.toast{position:fixed;left:50%;bottom:46px;transform:translate(-50%,80px);background:var(--ink);border:1px solid var(--gold);color:var(--text);padding:14px 30px;border-radius:999px;font-size:14px;z-index:200;transition:.5s;opacity:0;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ---- footer ---- */
footer{background:var(--bg0);border-top:1px solid var(--line-soft);padding:66px 0 0;position:relative}
footer::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(240,214,138,.55),transparent)}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:50px}
.ft-brand p{color:var(--muted);font-size:13.5px;margin-top:18px;max-width:320px}
.ft-col h5{font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--gold);margin-bottom:18px;font-weight:600;text-shadow:0 1px 0 rgba(255,255,255,.2),0 2px 0 #173327,0 3px 6px rgba(0,0,0,.62)}
.ft-col a,.ft-col span{display:block;font-size:13.5px;color:var(--muted);margin-bottom:12px;transition:.3s}
.ft-col a:hover{color:var(--gold)}
.ft-qr{width:104px;height:104px;border:1px solid var(--line-soft);border-radius:12px;display:grid;place-items:center;color:var(--muted);font-size:11px;text-align:center;background:var(--navy);padding:6px}
.ft-bottom{border-top:1px solid var(--line-soft);padding:22px 0 26px;display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;text-align:center;font-size:12.5px;color:#6E8F7C}
.ft-bottom a:hover{color:var(--gold)}

/* ---- floating widgets ---- */
.toTop{position:fixed;right:28px;bottom:34px;width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);background:rgba(10,21,17,.8);color:var(--gold);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:.4s;z-index:90;font-size:16px}
.toTop.show{opacity:1;pointer-events:auto}
.toTop:hover{background:var(--gold);color:var(--ink)}
.kf-fab{position:fixed;right:21px;bottom:124px;z-index:95;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;border:0;background:none;padding:0;height:auto;min-height:0}
.kf-fab .kf-btn{flex:none;width:60px;height:60px;border-radius:50%;border:1px solid rgba(240,214,138,.5);color:var(--gold);display:grid;place-items:center;position:relative;transition:.35s;
  background:radial-gradient(120% 120% at 32% 26%,#2E5C49 0%,#152B21 55%,#0A1810 100%);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.18),inset 0 -10px 18px rgba(0,0,0,.65),0 12px 28px -6px rgba(0,0,0,.75),0 0 22px rgba(240,214,138,.22)}
.kf-fab:hover .kf-btn{transform:translateY(-4px) scale(1.06);box-shadow:inset 0 2px 6px rgba(255,255,255,.22),inset 0 -10px 18px rgba(0,0,0,.65),0 18px 36px -8px rgba(0,0,0,.8),0 0 34px rgba(240,214,138,.4)}
.kf-fab .kf-btn svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.8;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.kf-fab .kf-btn::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(240,214,138,.55);animation:kfPulse 2.2s infinite}
@keyframes kfPulse{0%{transform:scale(.92);opacity:.9}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.kf-fab .kf-txt{font-size:11px;letter-spacing:1.5px;color:var(--gold);background:rgba(10,21,17,.75);border:1px solid var(--line-soft);border-radius:999px;padding:2px 10px;backdrop-filter:blur(6px)}
.chat-modal{position:fixed;inset:0;z-index:300;background:rgba(8,17,14,.62);backdrop-filter:blur(4px);display:grid;place-items:center;opacity:0;pointer-events:none;transition:.35s}
.chat-modal.show{opacity:1;pointer-events:auto}
.chat-box{width:min(430px,94vw);height:min(660px,88vh);border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--navy-2);display:flex;flex-direction:column;transform:translateY(16px) scale(.98);transition:.35s;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.chat-modal.show .chat-box{transform:none}
.chat-hd{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-soft);background:rgba(10,21,17,.92)}
.chat-hd b{font-size:15px;letter-spacing:.5px;font-weight:600;white-space:nowrap;flex:none;text-shadow:0 1px 0 rgba(255,255,255,.16),0 2px 3px rgba(0,0,0,.6)}
.chat-hd .chat-tel{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.4px;margin-left:auto;opacity:.85;white-space:nowrap;text-align:right}
.chat-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.chat-x{margin-left:12px;background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;padding:4px 8px;transition:.3s;line-height:1}
.chat-x:hover{color:var(--gold)}
.chat-box iframe{flex:1;width:100%;border:0;background:#fff}
@media(max-width:560px){.chat-hd .chat-tel{display:none}}

/* ---- schema helpers ---- */
.footnote{font-size:12.5px;color:var(--dim);margin-top:18px;max-width:820px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* ============ V47 导航均衡排布 + 双按钮主次 ============ */
.nav-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(14px,2vw,36px)}
.menu{flex:none;justify-content:center;margin:0;min-width:0;gap:clamp(5px,.75vw,13px);font-size:14.5px;letter-spacing:.5px}
.nav-right{gap:clamp(10px,.9vw,16px)}
/* 关键：切换键禁止换行（这正是叠压的原因），并让整行在笔电宽度也放得下 */
.lang-switch,.lang-link{flex:none}
.lang-switch button{flex:none;white-space:nowrap}
.nav .container{padding-left:clamp(22px,2.8vw,56px);padding-right:clamp(22px,2.8vw,56px)}
.menu a{padding:8px 15px;font-size:14.5px;letter-spacing:.4px;flex:none}
@media(max-width:1700px){
  .logo-text b{font-size:28px;letter-spacing:14px;margin-right:-14px}
  body.en .logo-text b{letter-spacing:5px;margin-right:-5px}
  .logo-text span{font-size:10.5px;letter-spacing:1.2px}
  .menu a{padding:7px 13px}
}
@media(max-width:1440px){
  .menu a{padding:7px 11px;font-size:14px}
  .nav-cta{padding:9px 18px;font-size:13px;letter-spacing:1.2px}
  .lang-switch button{padding:7px 12px;font-size:12px}
}

/* 语言切换：做成一枚有金属边的独立控件 */
.lang-switch{border-color:rgba(240,214,138,.55);background:linear-gradient(168deg,rgba(240,214,138,.1),rgba(10,21,17,.55) 60%),var(--navy);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -4px 9px rgba(0,0,0,.55),0 3px 0 #07120D,0 10px 22px -8px rgba(0,0,0,.8),0 0 18px rgba(240,214,138,.16)}
.lang-switch button{padding:7px 15px;font-size:12.5px;letter-spacing:1.2px;position:relative}
.lang-switch button+button{border-left:1px solid rgba(240,214,138,.28)}
.lang-switch button.on{background:linear-gradient(160deg,#FFF6D8,var(--gold) 52%,var(--gold-deep));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 7px rgba(122,84,20,.45)}
.lang-switch button:not(.on):hover{color:var(--gold);background:rgba(240,214,138,.1)}
/* V47b 窄屏收进汉堡，避免胶囊压到切换键 */
@media(max-width:1240px){
  .menu{display:none}
  .burger{display:flex}
  .nav-inner{grid-template-columns:auto 1fr}
  .nav-right{margin-left:auto}
  .nav.open .menu{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:rgba(8,17,14,.97);padding:22px 6%;gap:12px;border-bottom:1px solid var(--line)}
  .nav.open .menu a{text-align:center}
}
/* 主行动键：实心金，全站唯一 */
.nav-cta{border-color:transparent;color:var(--ink);font-weight:600;padding:9px 24px;font-size:13.5px;letter-spacing:1.6px;
  background:linear-gradient(135deg,#FFF6D8 0%,var(--gold) 42%,#E7C46E 78%,var(--gold-deep) 100%);
  text-shadow:0 1px 0 rgba(255,255,255,.5),0 2px 3px rgba(90,62,14,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -5px 11px rgba(122,84,20,.42),0 4px 0 #8A6420,0 6px 0 rgba(0,0,0,.22),0 14px 30px -8px rgba(0,0,0,.78),0 6px 26px rgba(240,214,138,.34)}
.nav-cta:hover{color:var(--ink);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -5px 11px rgba(122,84,20,.36),0 5px 0 #8A6420,0 18px 38px -8px rgba(0,0,0,.85),0 8px 34px rgba(240,214,138,.5)}
.nav-cta:active{transform:translateY(2px);box-shadow:inset 0 3px 10px rgba(122,84,20,.5),0 1px 0 #8A6420,0 4px 12px -4px rgba(0,0,0,.7)}
@media(max-width:1024px){.nav-inner{grid-template-columns:auto 1fr}.nav-right{margin-left:auto}}

/* ============ V49 导航纵深强化（纯光影，不改尺寸与位置） ============ */
.nav::after{content:"";position:absolute;left:6%;right:6%;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(240,214,138,.55) 30%,rgba(255,255,255,.35) 50%,rgba(240,214,138,.55) 70%,transparent)}
.nav.solid{box-shadow:0 20px 44px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08)}
/* 徽标：从牌面上"浮"起来 */
.logo-mark{box-shadow:inset 0 2px 7px rgba(255,255,255,.24),inset 0 -11px 18px rgba(0,0,0,.72),0 5px 0 #050D0A,0 7px 0 rgba(0,0,0,.35),0 16px 30px -8px rgba(0,0,0,.9),0 0 28px rgba(240,214,138,.24)}
.logo-text b{text-shadow:0 1px 0 rgba(255,255,255,.55),0 2px 0 #2A5A47,0 3px 0 #1E4436,0 4px 0 #152F26,0 5px 0 #0E2119,0 7px 0 #081711,0 12px 22px rgba(0,0,0,.8),0 0 30px rgba(240,214,138,.22)}
.logo-text span{text-shadow:0 1px 0 rgba(255,255,255,.28),0 2px 0 #16332A,0 3px 0 #0D1F17,0 5px 8px rgba(0,0,0,.75)}
/* 导航胶囊：厚底边 + 顶面高光 + 内凹暗部 */
.menu a{background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.03) 40%,rgba(0,0,0,.3) 100%),var(--navy);
  border-color:rgba(240,214,138,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -7px 13px rgba(0,0,0,.62),0 4px 0 #050D0A,0 5px 0 rgba(0,0,0,.4),0 13px 24px -9px rgba(0,0,0,.9)}
.menu a:hover{border-color:rgba(240,214,138,.6);transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -6px 12px rgba(0,0,0,.5),0 6px 0 #050D0A,0 8px 0 rgba(0,0,0,.35),0 18px 30px -10px rgba(0,0,0,.95),0 0 22px rgba(240,214,138,.3)}
.menu a:active{transform:translateY(2px);box-shadow:inset 0 2px 9px rgba(0,0,0,.6),0 1px 0 #050D0A,0 4px 10px -5px rgba(0,0,0,.8)}
/* 语言切换：凹进去的轨道 + 凸出来的当前项 */
.lang-switch{background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(255,255,255,.05));
  box-shadow:inset 0 3px 9px rgba(0,0,0,.8),inset 0 -1px 0 rgba(255,255,255,.14),0 4px 0 #050D0A,0 6px 0 rgba(0,0,0,.32),0 14px 26px -10px rgba(0,0,0,.9),0 0 20px rgba(240,214,138,.16)}
.lang-switch button.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -4px 9px rgba(122,84,20,.5),0 2px 0 rgba(0,0,0,.4)}
/* 主行动键：全站最厚的一层底边 + 掠光 */
.nav-cta{position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),inset 0 -6px 13px rgba(122,84,20,.5),0 6px 0 #6E4A12,0 8px 0 rgba(0,0,0,.3),0 20px 36px -12px rgba(0,0,0,.9),0 8px 30px rgba(240,214,138,.4)}
.nav-cta::before{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:navShine 4.2s infinite}
@keyframes navShine{0%{left:-70%}55%,100%{left:135%}}
.nav-cta:hover{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -6px 13px rgba(122,84,20,.42),0 8px 0 #6E4A12,0 10px 0 rgba(0,0,0,.28),0 26px 46px -14px rgba(0,0,0,.95),0 10px 38px rgba(240,214,138,.55)}
.nav-cta:active{transform:translateY(4px);box-shadow:inset 0 3px 11px rgba(122,84,20,.6),0 1px 0 #6E4A12,0 5px 14px -5px rgba(0,0,0,.8)}
@media(prefers-reduced-motion:reduce){.nav-cta::before{animation:none}}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  .menu{display:none}.burger{display:flex}
  .nav.open .menu{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:rgba(8,17,14,.97);padding:24px 6%;gap:16px;border-bottom:1px solid var(--line)}
  .grid3,.xlinks,.season{grid-template-columns:1fr 1fr}
  .ct-wrap,.inc,.grid2{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .kv-row{grid-template-columns:1fr}
  .kv-row dt{border-bottom:1px solid var(--line-soft)}
}
@media(max-width:720px){
  section{padding:70px 0}
  .phero{min-height:auto;padding-bottom:20px}
  .grid3,.xlinks,.season,.grid2{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
  .nav-cta{display:none}
  .form{padding:28px 20px}
  .cta-band .inner{padding:42px 22px}
  .day{grid-template-columns:1fr;gap:8px}
  .ib-hd .note{margin-left:0}
  .kf-fab{top:46%;bottom:auto;right:0;flex-direction:row;gap:8px;transform:translateX(54%);transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s;opacity:.88}
  .kf-fab.out{transform:translateX(6%);opacity:1}
  .chat-box{width:100vw;height:100dvh;border-radius:0;border:0}
}
@media(max-width:480px){.ft-grid{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr}}

/* ==========================================================================
   MX LAYER v1 — 鼠标交互增强层（样式）
   美岸国旅 www.gzmeian.cn

   用法：
     · 子页    → 追加到 assets/pages.css 末尾
     · 首页    → 包在 style 标签内，插到原样式块之后、head 结束之前

   设计约束（务必遵守，否则会与既有代码打架）：
     1. 全部规则挂在 body.mx-on 作用域下。
        摘掉这个类 = 整层失效，是运行时回滚开关，无需重新部署。
     2. 位移一律用 translate/rotate/scale 独立属性，绝不碰 transform
        —— transform 已被 hero 入场缩放、卡片 tilt、.fc 视差三套机制占用。
     3. 聚光灯只写 --mx/--my，不做位移（理由见 JS 注释）。
     4. 不使用 @layer！本站 CSS 全部未分层，而未分层声明优先于所有分层声明，
        用 @layer 会让新层输给旧的 .nav-cta/.menu a 定义。
     5. 不使用 !important，靠源码顺序 + body.mx-on 的特异性取胜。
     6. 伪元素一类一策：只能挂到各元素"空闲"的那一侧（见下方注释）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 自定义光标
   站点最高 z-index 是 .noise 9998、客服弹窗 300 —— 光标必须压过全部。
   节点自身的 transform 由光标独占，是唯一的例外。
   -------------------------------------------------------------------------- */
#mx-dot,
#mx-ring{
  position:fixed; top:0; left:0; z-index:10000; pointer-events:none;
  border-radius:50%; will-change:transform; opacity:0;
}
/* 自绘光标的"显示"必须和"隐藏系统光标"绑定在同一个 mx-cursor 类上，
   而这个类只在 JS 成功绘制出第一帧之后才加。
   若绑到 mx-on（层激活即显示），则从页面加载到首帧之间存在一个窗口：
   自绘光标已可见、系统光标尚未隐藏 —— 会出现两个光标。
   绑到 mx-cursor 后，两者同时切换，任何时刻都只有一个光标。 */
body.mx-cursor #mx-dot,
body.mx-cursor #mx-ring{ opacity:1; transition:opacity .25s ease; }

#mx-dot{
  width:6px; height:6px; margin:-3px 0 0 -3px;
  background:linear-gradient(140deg,#FFF3CC,#F0D68A);
  box-shadow:0 0 10px rgba(240,214,138,.8), 0 0 22px rgba(240,214,138,.35);
}
#mx-ring{
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(240,214,138,.5);
  box-shadow:0 0 18px rgba(240,214,138,.14) inset;
  /* 尺寸变化用 transition，位移绝不用（位移由 rAF 每帧直接写，用过渡会粘滞） */
  transition:width .32s cubic-bezier(.22,1,.36,1),
             height .32s cubic-bezier(.22,1,.36,1),
             margin .32s cubic-bezier(.22,1,.36,1),
             background-color .32s ease,
             border-color .32s ease,
             opacity .25s ease;
}

/* 悬停可交互元素：环放大并点亮 */
body.mx-hot #mx-ring{
  width:58px; height:58px; margin:-29px 0 0 -29px;
  background-color:rgba(240,214,138,.13);
  border-color:rgba(240,214,138,.92);
}
body.mx-hot #mx-dot{ background:linear-gradient(140deg,#FFFFFF,#F7E7AC); }

/* 按下：点收缩，给一个触觉暗示。
   注意用 width/height 而非 transform:scale ——
   光标的 transform 由 JS 每帧写内联样式，内联优先级高于类，
   写成 transform 会被静默覆盖、完全失效。 */
body.mx-press #mx-dot{ width:3px; height:3px; margin:-1.5px 0 0 -1.5px; }
body.mx-press #mx-ring{ border-color:rgba(159,220,192,.9); }

/* 指针离开窗口 */
body.mx-out #mx-dot,
body.mx-out #mx-ring{ opacity:0; }

/* 隐藏系统光标。输入控件必须放行 —— 表单是核心转化路径，
   在里面没有文本光标是极差的体验。这条的特异性 (0,2,1) 高于 (0,1,1)。 */
body.mx-cursor,
body.mx-cursor *{ cursor:none; }
body.mx-cursor input,
body.mx-cursor textarea,
body.mx-cursor select,
body.mx-cursor [contenteditable]{ cursor:auto; }

/* --------------------------------------------------------------------------
   2. 磁吸按钮
   关键：把 translate 从过渡属性列表里摘出去。rAF 每帧赋值若被 .35s 过渡
   拖着走，会产生明显粘滞感。
   -------------------------------------------------------------------------- */
body.mx-on .mx-magnet{
  transition-property:color, background-color, border-color,
                      box-shadow, transform, opacity, filter;
  transition-duration:.35s;
  transition-timing-function:cubic-bezier(.22,1,.36,1);
}

/* --------------------------------------------------------------------------
   3. 卡片聚光灯
   一类一策，只挂到空闲伪元素：
     .b-card    ::before 是编号 attr(data-num)  → 用 ::after
     .t-card    ::after  是右上光晕            → 用 ::before
     .gr-card   ::after  是底部金线            → 用 ::before
     .dest-card 两侧空闲                        → 用 ::before（z-index 须 < 6）
     .card / .itin-block / .xlink（子页）两侧空闲 → 用 ::after
   -------------------------------------------------------------------------- */
body.mx-on .itin-block{ position:relative; }   /* 原样式缺定位，补上 */

body.mx-on .b-card::after,
body.mx-on .t-card::before,
body.mx-on .gr-card::before,
body.mx-on .dest-card::before,
body.mx-on .card::after,
body.mx-on .itin-block::after,
body.mx-on .xlink::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* 必须低于 .dest-link 的 z-index:6，否则会盖住 CTA 文字 */
  z-index:1;
  opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
              rgba(240,214,138,.17),
              rgba(240,214,138,.05) 42%,
              transparent 64%);
}

body.mx-on .b-card.mx-spot::after,
body.mx-on .t-card.mx-spot::before,
body.mx-on .gr-card.mx-spot::before,
body.mx-on .dest-card.mx-spot::before,
body.mx-on .card.mx-spot::after,
body.mx-on .itin-block.mx-spot::after,
body.mx-on .xlink.mx-spot::after{ opacity:1; }

/* 键盘等价反馈 —— 把鼠标效果翻译成焦点效果，让 Tab 用户也能看到"当前卡被点亮" */
body.mx-on .b-card:focus-within::after,
body.mx-on .t-card:focus-within::before,
body.mx-on .gr-card:focus-within::before,
body.mx-on .dest-card:focus-within::before,
body.mx-on .card:focus-within::after,
body.mx-on .itin-block:focus-within::after,
body.mx-on .xlink:focus-within::after{ opacity:1; }

/* --------------------------------------------------------------------------
   4. 滚动条配色修正
   原 `::-webkit-scrollbar-thumb{background:#1C3550}` 是冷蓝色，
   与墨玉绿 × 香槟金体系冲突（改版残留）。此处后置覆盖，不动原行。
   -------------------------------------------------------------------------- */
html{ scrollbar-color:#1C352C #0A1411; scrollbar-width:thin; }
body.mx-on ::-webkit-scrollbar-thumb{ background:#1C352C; }
body.mx-on ::-webkit-scrollbar-thumb:hover{ background:#2A4A3C; }

/* --------------------------------------------------------------------------
   5. 降级：减弱动效
   原样式块已用 !important 把过渡压到 0.01ms，这里只需把跟随类效果关掉。
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  #mx-dot, #mx-ring{ display:none !important; }
  body.mx-cursor,
  body.mx-cursor *{ cursor:auto !important; }
  body.mx-on .b-card::after,
  body.mx-on .t-card::before,
  body.mx-on .gr-card::before,
  body.mx-on .dest-card::before,
  body.mx-on .card::after,
  body.mx-on .itin-block::after,
  body.mx-on .xlink::after{ display:none; }
}

/* 触屏：整层不生效（JS 不会加 mx-on，这里是双保险） */
@media (hover: none), (pointer: coarse){
  #mx-dot, #mx-ring{ display:none !important; }
}

/* --------------------------------------------------------------------------
   无障碍：三级文字色对比度修正
   --dim 原值 #5E7A6B 是设计里的"微弱文字"色，但在深底上对比度只有 3.99，
   低于 WCAG AA 对正文的 4.5 要求；在卡片面 #152821 上更低，只有 3.29。
   问题在于它并不是只用在装饰上 —— 合规条（Licensed Travel Agency 等）
   也用了它，而那是访客需要读清的信息。
   提到 #86A393 后，三个底色上分别为 6.85 / 5.65 / 4.81，全部达标；
   相对正文色（16.39）仍是明显的次级层级，不影响视觉秩序。
   -------------------------------------------------------------------------- */
body.mx-on{ --dim:#86A393; }

/* --------------------------------------------------------------------------
   跨页过渡
   这个站是多页站（首页 + 6 个线路页 + FAQ）。默认从首页点进线路页是硬切，
   会闪一下白。浏览器原生的 View Transitions 可以把它变成平滑的交叉淡出，
   不需要任何 JS —— 头部加一个 meta 就够。
   只有 Chrome / Edge 支持；Safari 和 Firefox 会退化成普通跳转，不影响可用性。
   -------------------------------------------------------------------------- */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.42s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}
::view-transition-old(root){ animation-name:mxVtOut; }
::view-transition-new(root){ animation-name:mxVtIn; }
@keyframes mxVtOut{ to{ opacity:0 } }
@keyframes mxVtIn{ from{ opacity:0 } }

/* 减弱动效时不做过渡，直接切页面 */
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none; }
}

/* --------------------------------------------------------------------------
   窄屏导航修复
   症状：390px 下汉堡按钮落在 x=409..443，整颗在屏幕外 —— 手机访客打不开导航。

   根源不是 .nav-right 的间距，而是 logo 块太宽：
   .logo-text span（"MEIAN · BESPOKE JOURNEYS" 那行副标）设了 white-space:nowrap，
   不肯折行，硬把 logo 撑到 260px 以上。390px 减去左右内边距只剩 346px，
   留给语言开关和汉堡的空间不足 50px。

   所以主刀的是"藏掉副标"，其次是缩小 logo —— 只挪 .nav-right 是治标。
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  /* 副标是装饰性的，缩到手机宽度时它比品牌名还占地方 */
  body.mx-on .nav .logo-text span{ display:none; }
  /* logo 整体收一档，给右侧控件让出余量 */
  body.mx-on .nav .logo-mark{ width:44px; height:44px; }
  body.mx-on .nav .logo-mark i{ font-size:22px; }
  body.mx-on .nav .logo{ gap:11px; }
  body.mx-on .nav .logo-text b{ font-size:23px; letter-spacing:5px; margin-right:-5px; }
  body.en.mx-on .nav .logo-text b{ letter-spacing:3px; margin-right:-3px; }
  /* 右侧控件不许被压缩 —— 汉堡是必须可点的功能键 */
  body.mx-on .nav .nav-right{ gap:8px; }
  body.mx-on .nav .burger{ flex:none; padding:8px 6px; }
  body.mx-on .nav .lang-switch{ flex:none; }
  body.mx-on .nav .lang-switch button{ padding:6px 10px; font-size:11.5px; }
}

/* --------------------------------------------------------------------------
   移动端客服球避让首屏标题
   症状：390 下客服球压住大标题最后几个字母。

   实测数据（视口 380×900）：
     客服球   x 309~463  y 414~474   —— 154px 宽，其中 83px 在屏幕外
     文字标签 x 377~463              —— **只有 3px 可见**
     大标题   x  28~352  y 396~505
     重叠 43px

   两处问题：
   1. 那个"Live Chat"文字标签 97% 已经被推到屏幕外，等于白占 86px 宽度，
      还因此把整颗球往左撑、压到标题上 —— 先把它藏掉（零视觉损失）
   2. 移动端把球从右下角挪到了屏幕右侧中部（top:46%），而首屏大标题
      正好在那个高度。往下让到 58%，让开标题区
   -------------------------------------------------------------------------- */
@media (max-width:720px){
  /* 标签本来就几乎看不见，藏着不影响可识别性，还能让球整体右移 */
  body.mx-on .kf-fab .kf-txt{ display:none; }
  /* 从 top:46% 让到 58%，避开大标题所在的高度带 */
  body.mx-on .kf-fab{ top:58%; }
}


/* ==========================================================================
   MX HERO v1 — 电影感动态首屏（样式）
   美岸国旅 www.gzmeian.cn

   作用域同样挂在 body.mx-on 下，摘掉即整层失效。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 首屏层级收束
   注意：这组规则曾经写在首页一个临时的样式块里，与受管块用了同一个 id，
   后来 sync 按 id 做块级替换时把它整块覆盖掉了 —— 而且不报错，静默丢失。
   现已并入本文件（受 sync 管理），不会再被覆盖。
   -------------------------------------------------------------------------- */

/* 合规条降权：内容保留（合规是这个品类的下单硬门槛），但压到明显低于 H1 的层级 */
body.mx-on .hero .chip-row{ gap:8px; margin-bottom:24px; }
body.mx-on .hero .chip{
  font-size:10px; letter-spacing:1.1px; padding:4px 11px;
  color:var(--dim);
  border-color:rgba(150,178,162,.10);
  background:rgba(16,32,26,.34);
}
body.mx-on .hero .chip::before{ width:4px; height:4px; box-shadow:0 0 6px var(--gold); opacity:.85; }
body.mx-on .hero .chip.t::before{ box-shadow:0 0 6px var(--teal); opacity:.85; }

/* 窄屏上把合规条压到一行放得下两条 ——
   四条各占一行会吃掉首屏一大块垂直空间，把 CTA 推到屏幕外。 */
@media (max-width:520px){
  body.mx-on .hero .chip{
    font-size:9.5px;
    letter-spacing:.04em;
    padding:3px 9px;
    gap:6px;
  }
  body.mx-on .hero .chip-row{ gap:6px; margin-bottom:18px; }
}

/* LIVE 数据卡：内容与下方数据条重复（同样报城市数与旅客数），
   且绝对定位在 right:5%/bottom:360px，1440px 以上会压住悬浮路线卡。
   实测 1920 宽度下它直接盖在桂林卡右下角 —— 移除。 */
body.mx-on .hero .live-card{ display:none; }

/* --------------------------------------------------------------------------
   1. 电影感首屏：照片铺满当画布，金箔水墨叠上去加氛围
   关键在于层次顺序 —— 照片是主体，水墨是质感，文字是焦点。
   -------------------------------------------------------------------------- */

/* 照片：满不透明、满幅，成为真正的画面 */
body.mx-ink-on .hero-bg{ opacity:1; mix-blend-mode:normal; }
/* 压暗只压在文字一侧，保留右侧画面的通透 —— 整幅均匀压暗会让照片变成壁纸 */
body.mx-ink-on .hero-bg::after{
  opacity:1;
  background:
    linear-gradient(100deg, rgba(4,11,8,.94) 4%, rgba(8,20,16,.72) 34%, rgba(8,17,14,.16) 62%, rgba(6,14,11,.34) 100%),
    linear-gradient(to top, var(--bg0) 1%, rgba(10,20,17,0) 42%);
}

/* 金箔水墨：用柔光叠加在照片上，只加流动的金属质感，不遮挡画面 */
#mx-ink{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; display:block; pointer-events:none;
  mix-blend-mode:soft-light;
  opacity:0; transition:opacity 2s cubic-bezier(.22,1,.36,1);
}
body.mx-ink-on #mx-ink{ opacity:.85; }

/* 装饰层与文字抬到水墨之上 */
body.mx-ink-on .hero-grid{ z-index:2; opacity:.20; }
body.mx-ink-on .beam,
body.mx-ink-on .orb{ z-index:2; }
body.mx-ink-on .spark{ z-index:2; }
body.mx-ink-on .hero-content,
body.mx-ink-on .hero>.container,
body.mx-ink-on .float-cards,
body.mx-ink-on .scroll-hint{ z-index:4; }

/* 底部渐隐，与下一节自然衔接 */
body.mx-ink-on .hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:22%;
  z-index:3; pointer-events:none;
  background:linear-gradient(to top,var(--bg0) 4%,rgba(10,20,17,0) 100%);
}

/* ---- 大尺度排版：标题放大、行距收紧、留白加大 ---- */
/* 下限从 42px 收到 32px：标题首行是 "China, planned for"，
   窄屏上 42px 放不下，会把 "for" 挤成孤零零的一行。
   实测 390px 宽下首行需要 ≤34px 才不折，取 32px 留余量。 */
body.mx-ink-on .hero h1{
  font-size:clamp(32px, 8.2vw, 96px);
  line-height:1.1;
  letter-spacing:-.01em;
}
body.mx-ink-on .hero .sub{
  font-size:clamp(15px,1.55vw,19px);
  letter-spacing:3px;
  margin-bottom:22px;
}
body.mx-ink-on .hero .desc{ max-width:52ch; font-size:15px; }
body.mx-ink-on .hero-content{ padding-top:150px; padding-bottom:80px; }

/* 悬浮路线卡：1440px 起恢复显示。
   此前我把这整块藏掉了 —— 那是拿内容迁就排版，顺序反了：
   三张城市图承载着"我们有具体路线"的信息，不该为了构图被牺牲。
   正确解法是让两者共存 —— 在 1440~1699 区间把标题收一档、卡片缩一档，
   各自让出空间。1700px 以上空间充裕，两者都用满尺寸。 */
@media (min-width:1400px) and (max-width:1699px){
  body.mx-ink-on .hero h1{
    font-size:clamp(52px, 5.3vw, 78px);
  }
  body.mx-ink-on .float-cards{
    right:4%;
    /* 上移一档：1440 宽度下卡片贴着右下角，会被固定的客服按钮压住一角 */
    top:46%;
    transform:translateY(-50%) scale(.78);
    transform-origin:right center;
  }
}

/* 顶部压暗：照片变亮之后，导航与语言切换需要一层底才读得清。
   注意末档写的是 rgba(4,11,8,0) 而不是 transparent ——
   transparent 等价于 rgba(0,0,0,0)，插值时颜色会朝黑色偏移，
   在渐变收尾处形成一条可见的暗带（实测在 y≈140 处出现硬边）。 */
body.mx-ink-on .hero::before,
body.mx-ink-on .phero::before{
  content:""; position:absolute; left:0; right:0; top:0; height:190px;
  z-index:3; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(4,11,8,.82) 0%,
    rgba(4,11,8,.42) 45%,
    rgba(4,11,8,.14) 72%,
    rgba(4,11,8,0) 100%);
}

/* --------------------------------------------------------------------------
   6 个线路页的首屏（.phero）—— 与首页同处理，保持两套模板观感一致
   -------------------------------------------------------------------------- */

/* 照片满不透明；去掉那个把照片强行扭进品牌色相的 hue-rotate。
   它把西安夜景扭成了粉红，与"真实的中国"相去甚远，
   而电影感恰恰来自照片本身的可信度。 */
body.mx-ink-on .phero-bg{
  opacity:1;
  filter:none;
}
body.mx-ink-on .phero-bg::after{
  opacity:1;
  background:
    linear-gradient(100deg, rgba(4,11,8,.94) 3%, rgba(8,20,16,.70) 32%, rgba(8,17,14,.14) 64%, rgba(6,14,11,.32) 100%),
    linear-gradient(to top, var(--bg0) 1%, rgba(10,20,17,0) 44%);
}

/* 标题尺度拉齐到首页一档 */
body.mx-ink-on .phero h1{
  font-size:clamp(38px, 5.4vw, 76px);
  line-height:1.1;
  letter-spacing:-.015em;
}
body.mx-ink-on .phero .lead{
  font-size:clamp(15px, 1.28vw, 17.5px);
  line-height:1.8;
  max-width:64ch;
}
/* 面包屑与 chip 降权，避免和标题抢层级 */
body.mx-ink-on .phero .crumb{ opacity:.72; }
body.mx-ink-on .phero .chip{
  font-size:10px; letter-spacing:1.1px; padding:4px 11px;
  border-color:rgba(150,178,162,.10);
  background:rgba(16,32,26,.34);
}

/* 水墨画布在首页与线路页都可用 */
body.mx-ink-on .phero{ position:relative; }
body.mx-ink-on .phero .container{ position:relative; z-index:4; }

/* --------------------------------------------------------------------------
   2. 标题逐字显影
   每个字符一个 span；外层遮罩裁切，内层从下方升起并去模糊。
   .mx-k 是每字容器，.mx-k i 是真正位移的内层。
   -------------------------------------------------------------------------- */
.mx-kinetic .mx-line{ display:block; overflow:hidden; padding-bottom:.06em; }
.mx-kinetic .mx-k{
  display:inline-block;
  transform:translateY(112%) rotate(5deg);
  opacity:0;
  filter:blur(9px);
  will-change:transform,opacity,filter;
}
.mx-kinetic .mx-k.mx-k-in{
  transform:translateY(0) rotate(0);
  opacity:1;
  filter:blur(0);
  transition:transform 1.05s cubic-bezier(.22,1,.36,1),
             opacity .85s ease,
             filter .9s ease;
}
/* 动画期间：金色行用纯色，不用逐字渐变。
   原设计 .grad 是 background-clip:text + color:transparent，作用在"整行"上。
   一旦拆成单字 span，父级裁剪管不到子级，而子级会继承 transparent → 整行消失；
   若改为给每个字各加一层渐变，则每字各自走一遍渐变（花斑），
   且 filter:drop-shadow 会破坏 background-clip:text 的裁剪，进一步导致不可见。
   因此动画期间统一用纯金色，动画结束后由 JS 还原原始结构，真正的渐变随之回来。 */
.mx-kinetic .grad .mx-k{
  color:var(--gold) !important;
  -webkit-text-fill-color:var(--gold);
  filter:drop-shadow(0 2px 0 rgba(14,33,25,.95)) drop-shadow(0 6px 12px rgba(0,0,0,.7));
}
.mx-kinetic .grad .mx-k.mx-k-in{
  filter:drop-shadow(0 2px 0 rgba(14,33,25,.95)) drop-shadow(0 6px 12px rgba(0,0,0,.7))
         drop-shadow(0 0 22px rgba(240,214,138,.42));
}

/* 空格不占动画，避免行内出现空洞 */
.mx-kinetic .mx-k.mx-sp{ transform:none; opacity:1; filter:none; }

/* --------------------------------------------------------------------------
   3. 景深分层 —— 首屏元素按远近以不同幅度跟随鼠标
   -------------------------------------------------------------------------- */
body.mx-on .hero-bg{
  transition:opacity 1.2s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
body.mx-on .mx-depth{ will-change:translate; }

/* 注：此处原有"悬停时给首屏加暗角"的效果，已移除。
   它占用 .hero::before，与本文件上方"顶部压暗"的规则同特异性而互相覆盖；
   且新版首屏以满幅照片为主角，任何额外压暗都只会削弱画面。 */

@media (prefers-reduced-motion: reduce){
  #mx-ink{ display:none !important; }
  body.mx-ink-on .hero-bg{ mix-blend-mode:normal; opacity:.5; }
  .mx-kinetic .mx-k{ transform:none !important; opacity:1 !important; filter:none !important; }
}
@media (hover: none), (pointer: coarse){
  #mx-ink{ opacity:.85; }
  body.mx-ink-on .hero-bg{ mix-blend-mode:normal; opacity:.32; }
}


/* ==========================================================================
   MX PAGES v1 — 线路页与 FAQ 页的排版对齐
   美岸国旅 www.gzmeian.cn

   只进 assets/pages.css（6 个线路页 + faq 共用），不进首页。

   为什么单独一份：首页有 mx-layout 那一套（通栏画廊、竖向时间轴、88px 级别
   的分节标题），直接搬到内容页会撑坏版面 —— 线路页是长文导览，
   一章接一章读下去，标题不能一路都是高音。

   但两套模板的字号落差太大也不行：首页分节标题 52px、线路页 42px，
   同一个站看着像两个人做的。这份只做"对齐"，不做"加戏"。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 分节标题对齐到首页一档
   首页 `body.mx-on .sec-head h2` 是 clamp(26px, 3.4vw, 52px)。
   线路页的 .sec-head 结构相同，这里给到同一档。
   -------------------------------------------------------------------------- */
body.mx-on .sec-head h2{
  font-size:clamp(25px, 3.2vw, 48px);
  line-height:1.18;
  letter-spacing:-.012em;
  font-weight:600;
}
body.mx-on .sec-head{
  margin-bottom:clamp(38px, 4vw, 62px);
}
body.mx-on .sec-head p{
  max-width:64ch;
  font-size:clamp(15px, 1.2vw, 17px);
  line-height:1.82;
  margin-top:20px;
}

/* eyebrow：与首页统一的"编辑标记"质感 */
body.mx-on .sec-head .eyebrow{
  font-size:11px;
  letter-spacing:.32em;
  margin-bottom:18px;
  opacity:.9;
}

/* --------------------------------------------------------------------------
   2. 分节间距
   首页是 clamp(88px, 11vw, 168px)。内容页要密一些 —— 同样的间距在这里
   会让章节之间断得太开，读着累。给到首页的六成左右。
   -------------------------------------------------------------------------- */
body.mx-on section:not(.phero){
  padding:clamp(58px, 6.4vw, 104px) 0;
}
/* 必须排除 .phero。
   它自带 padding-top:130px —— 那个值是为了让面包屑躲开固定在顶部的导航。
   我这条规则特异性 (0,1,1) 高过 .phero (0,1,0)，一开始把它压成了 58px，
   结果导航高 96px、面包屑从 58px 开始，**被压在导航底下 38px**。
   凡是组件自己带"为避让别的元素而设的间距"，都不该被通用的分节节奏覆盖。 */

/* --------------------------------------------------------------------------
   3. 文字阴影收敛
   与首页同一处理：原设计在标题上叠了多层逐级偏移的实心投影，
   暗底上边缘发脏。换成单一柔和投影。
   -------------------------------------------------------------------------- */
body.mx-on h2,
body.mx-on h3,
body.mx-on h4{
  text-shadow:0 2px 16px rgba(0,0,0,.5) !important;
}

/* --------------------------------------------------------------------------
   4. 卡片投影收敛
   原设计三层叠加的阴影在暗底上只会发灰。
   -------------------------------------------------------------------------- */
body.mx-on .card,
body.mx-on .itin-block,
body.mx-on .xlink,
body.mx-on .fact,
body.mx-on .stay{
  box-shadow:0 16px 40px -22px rgba(0,0,0,.7);
}

/* --------------------------------------------------------------------------
   5. 正文可读性
   长文页最重要的其实是行宽和行距，而不是视觉噱头。
   -------------------------------------------------------------------------- */
body.mx-on .prose p,
body.mx-on .route-html p{
  max-width:68ch;
  line-height:1.85;
}


/* ==== RT ROUTE CARDS ==== */
.rt-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rt{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px 26px;border:1px solid var(--line-soft);
  border-radius:var(--rad);background:linear-gradient(168deg,rgba(240,214,138,.05),rgba(10,21,17,.34) 58%),var(--navy-2);
  box-shadow:var(--el1);transition:.4s}
.rt:hover{border-color:rgba(240,214,138,.45);box-shadow:var(--el2),var(--glow-gold);transform:translateY(-4px)}
.rt-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px}
.rt-hd h3{font-family:var(--serif);font-size:19px;font-weight:600;color:#F0E9D8;letter-spacing:.3px;
  text-shadow:0 1px 0 rgba(255,255,255,.22),0 2px 0 #173327,0 4px 9px rgba(0,0,0,.6)}
.rt-len{font-family:var(--mono);font-size:11px;letter-spacing:1.8px;color:var(--gold);border:1px solid var(--line);
  border-radius:999px;padding:3px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.rt-chain{font-family:var(--mono);font-size:11.5px;letter-spacing:.6px;color:var(--teal);text-transform:uppercase}
.rt p{font-size:14.5px;line-height:1.72;color:var(--muted);margin:0}
.rt-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:auto;padding-top:6px}
.rt-tag{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;color:var(--dim);text-transform:uppercase}
.rt-go{font-family:var(--mono);font-size:11.5px;letter-spacing:1.4px;color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(240,214,138,.35);padding-bottom:2px;transition:.3s}
.rt-go:hover{color:var(--gold-deep);border-color:var(--gold-deep)}
.rt-go[aria-disabled="true"]{color:var(--dim);border-color:transparent;cursor:default}
@media(max-width:900px){.rt-grid{grid-template-columns:1fr}.rt{padding:20px 18px}}