@charset "utf-8";
/* ==========================================================================
   张家界国旅假期旅行社 · A 站 zhangguolv.com · 设计系统 v2（高端定制版）
   --------------------------------------------------------------------------
   设计定位：高端定制旅行。是一本画册的跨页，不是一张报价单。
   与 B 站（hunan-zhangjiajie.com）的结构性差异 —— 不是换色，是换语言：
     · 标题全部宋体（--ff-display），字重 500；B 站黑体 700/800
     · 首屏是暗调电影海报，图压到 20% 存在感；B 站是亮图 + 价格主视觉
     · 金色只做三件事：编号、1px 细线、hover；一屏不超过 5 处
     · B 站用整块主色 + 22-32px 红价格，A 站不标价，只说"按人数报价"
     · 区块间距 64-116px，B 站 44-56px
   检验标准：去掉 logo，这一页该像画册，不像报价单。
   --------------------------------------------------------------------------
   分区索引
     01 设计令牌
     02 重置与基础
     03 排版
     04 布局骨架
     05 页头 v2（深墨顶栏 / sticky 主头 / 金线导航）          ← v2 重写
     06 页脚 v2（深墨底 + 上沿一道金线渐隐）                  ← v2 重写
     07 按钮 / 标签 / 徽章
     08 卡片（线路 / 酒店 / 景点 / 攻略 / 通用）
     09 表单
     10 悬浮条 / 移动底条 / 弹窗（v1 原件，实际生效的是末尾 22b）
     11 页面块
     12 响应式（只管内页骨架了）
     13 动效 / 工具类
     21 首页 v2（首屏 / 承诺条 / 三步 / 行程 / 住宿 / 景点 / 攻略 / FAQ / CTA）
     22b 悬浮条 / 移动底条 / 弹窗 v2 覆盖层
   版本 2026-10-31 v2
   ========================================================================== */

/* ==========================================================================
   01 设计令牌
   ========================================================================== */
:root{
  /* -- 主色 山野绿：色阶由脚本生成，对比度已逐个校验 -- */
  --pine-900:#0A1410;
  --pine-800:#12463C;
  --pine-700:#1A5C4C;
  --pine-600:#1F7A5C;
  --pine-500:#2E8E6E;
  --pine-400:#57A98D;
  --pine-300:#8AC4AE;
  --pine-200:#BFDFD2;
  --pine-100:#DEEFE8;
  --pine-050:#F1F8F5;

  /* -- 中性 纸砂：暖白底，不用纯灰（纯灰在暖底上发绿） -- */
  --sand-900:#1A1915;
  --sand-800:#2B2921;
  --sand-700:#453F31;
  --sand-600:#56503D;
  --sand-500:#726A53;
  --sand-400:#9C9276;
  --sand-300:#C6BB9E;
  --sand-200:#E2D9C4;
  --sand-100:#F0EADC;
  --sand-050:#FAF7EF;

  /* -- 辅色 山峦青：少量用于辅助信息、图表 -- */
  --slate-900:#0F1C24;
  --slate-800:#1B2C38;
  --slate-700:#28414F;
  --slate-600:#3A5C6C;
  --slate-500:#547B8C;
  --slate-300:#A9C1CB;
  --slate-100:#E6EEF1;

  /* -- 点缀 暖橙：只做图形与强调，不做正文链接（对比度 3.66 不够） -- */
  --amber-700:#A85B12;
  --amber-600:#C97A2B;
  --amber-500:#E09040;
  --amber-300:#F0C08A;
  --amber-100:#FBEEDA;

  /* -- 语义 -- */
  --paper:#FBFAF5;
  --paper-2:#F6F4EB;
  --paper-3:#F0EADC;
  --ink:#141915;
  --ink-2:#453F31;
  --ink-3:#726A53;
  --brand:var(--pine-600);
  --brand-deep:var(--pine-800);
  --brand-ink:var(--pine-700);
  --accent:var(--amber-600);

  /* -- 金：v2 主强调色。只做编号 / 1px 细线 / hover，不做正文 ---------- */
  --gold:#A98A55;
  --gold-2:#C2A574;
  --gold-fade:rgba(169,138,85,.5);
  --line:rgba(20,32,28,.12);
  --line-2:rgba(20,32,28,.22);
  --hair:rgba(20,32,28,.07);

  /* -- 字体：中文不用外链字体，靠系统黑体 + 字重控制 -- */
  --ff-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC",SimSun,serif;
  /* 标题专用：宋体优先。中文高端站最强的信号不是配色，是标题用不用宋体 */
  --ff-display:"Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC",SimSun,serif;
  --ff-num:"Helvetica Neue",Arial,"PingFang SC",sans-serif;

  /* -- 字号：clamp 随视口走，避免桌面 18px 手机也 18px -- */
  --fs-h1:clamp(29px,4.1vw,50px);
  --fs-h2:clamp(23px,2.7vw,36px);
  --fs-h3:clamp(18px,1.7vw,23px);
  --fs-h4:17px;
  --fs-body:16px;
  --fs-sm:14px;
  --fs-xs:12.5px;
  --fs-xxs:11.5px;

  /* -- 行高：中文正文要松，标题要收 -- */
  --lh-tight:1.22;
  --lh-title:1.38;
  --lh-body:1.88;
  --lh-loose:2;

  /* -- 间距 -- */
  --sp-1:6px;
  --sp-2:10px;
  --sp-3:14px;
  --sp-4:20px;
  --sp-5:28px;
  --sp-6:40px;
  --sp-7:56px;
  --sp-8:76px;
  --sp-9:104px;

  /* -- 版心 -- */
  --wrap:1280px;
  --wrap-wide:1500px;
  --gutter:clamp(16px,4.2vw,48px);

  /* -- 圆角：小，只有图池例外 -- */
  --r-xs:2px;
  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --r-pill:999px;

  /* -- 阴影：极淡，高端站不用重投影 -- */
  --sh-1:0 1px 2px rgba(20,32,28,.04);
  --sh-2:0 2px 6px rgba(20,32,28,.05),0 12px 32px -18px rgba(20,32,28,.16);
  --sh-3:0 4px 12px rgba(20,32,28,.07),0 24px 56px -28px rgba(20,32,28,.22);

  /* -- 动效 -- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.32s;

  /* -- 层级 -- */
  --z-hd:60;
  --z-float:70;
  --z-mbar:80;
  --z-modal:120;
}

/* ==========================================================================
   02 重置与基础
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{border:0;max-width:100%;height:auto;vertical-align:middle;}
a{color:inherit;text-decoration:none;transition:color var(--dur) var(--ease);}
a:hover{color:var(--brand);}
h1,h2,h3,h4,h5,h6,p,dl,dd,dt,figure,blockquote{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
input,textarea,select{font:inherit;color:inherit;}
table{border-collapse:collapse;border-spacing:0;}
em,i{font-style:normal;}
b,strong{font-weight:600;}
small{font-size:var(--fs-xs);}
::selection{background:var(--pine-200);color:var(--pine-900);}
:focus-visible{outline:2px solid var(--pine-600);outline-offset:3px;border-radius:3px;}

/* 旧站残留：正文里 UEditor 的表格宽度会把手机撑破 */
.zjja-rich table{width:100% !important;max-width:100%;}
.zjja-rich td,.zjja-rich th{width:auto !important;max-width:100%;}
.zjja-rich img{max-width:100% !important;height:auto !important;}

/* ==========================================================================
   03 排版
   ========================================================================== */
.zjja-h1{
  font-size:var(--fs-h1);
  line-height:var(--lh-tight);
  font-weight:300;
  letter-spacing:0;
  color:var(--ink);
}
.zjja-h2{
  font-size:var(--fs-h2);
  line-height:var(--lh-tight);
  font-weight:300;
  letter-spacing:0;
  color:var(--ink);
}
.zjja-h3{
  font-size:var(--fs-h3);
  line-height:var(--lh-title);
  font-weight:400;
  color:var(--ink);
}
.zjja-lead{
  font-size:clamp(16px,1.5vw,18px);
  line-height:1.9;
  font-weight:300;
  color:var(--ink-2);
}
.zjja-p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2);}
.zjja-sm{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.8;}
.zjja-xs{font-size:var(--fs-xs);color:var(--ink-3);}

/* 小标签：中文用小字距，别照搬西文 .28em —— 会散架 */
.zjja-eyebrow{
  display:inline-block;
  font-size:var(--fs-xxs);
  font-weight:600;
  letter-spacing:.16em;
  color:var(--brand-ink);
  text-transform:uppercase;
  line-height:1.6;
}
.zjja-num{
  font-family:var(--ff-num);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.01em;
}
.zjja-serif{font-family:var(--ff-serif);}

/* 正文区（详情页正文统一入口） */
.zjja-rich{font-size:16.5px;line-height:1.95;color:var(--ink-2);word-wrap:break-word;overflow-wrap:break-word;}
.zjja-rich p{margin:0 0 1.1em;}
.zjja-rich h2,.zjja-rich h3,.zjja-rich h4{
  margin:2em 0 .7em;font-weight:400;line-height:1.45;color:var(--ink);
}
.zjja-rich h2{font-size:22px;}
.zjja-rich h3{font-size:19px;}
.zjja-rich h4{font-size:17px;}
.zjja-rich img{max-width:100%;height:auto;border-radius:var(--r-sm);margin:1.2em 0;}
.zjja-rich ul,.zjja-rich ol{margin:0 0 1.1em;padding-left:1.3em;list-style:disc;}
.zjja-rich ol{list-style:decimal;}
.zjja-rich li{margin:.4em 0;}
.zjja-rich a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--pine-300);}
.zjja-rich blockquote{
  margin:1.6em 0;padding:2px 0 2px 20px;
  border-left:2px solid var(--pine-300);
  color:var(--ink-3);font-size:15.5px;
}

/* ==========================================================================
   04 布局骨架
   ========================================================================== */
.zjja{overflow-x:clip;}
.zjja-wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gutter);
}
.zjja-wrap--wide{max-width:var(--wrap-wide);}
.zjja-wrap--narrow{max-width:880px;}

/* 主栏 + 侧栏：1fr 的 min 是 auto，必须显式压住 */
.zjja-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 328px;
  gap:56px;
  align-items:start;
}
.zjja-main > *{min-width:0;}
.zjja-side{position:sticky;top:96px;}

.zjja-sec{padding-block:clamp(48px,6.4vw,96px);}
.zjja-sec--tight{padding-block:clamp(36px,4.4vw,60px);}
.zjja-sec--paper{background:var(--paper-2);}
.zjja-sec--ink{background:var(--pine-900);color:var(--sand-100);}
.zjja-sec--ink .zjja-h2,.zjja-sec--ink .zjja-h3{color:#fff;}
.zjja-sec--ink .zjja-p,.zjja-sec--ink .zjja-lead{color:var(--pine-200);}

.zjja-hr{border:0;border-top:1px solid var(--line);margin:0;}

/* ==========================================================================
   05 页头 v2 · 深墨压顶 + 金线 + 宋体字
   --------------------------------------------------------------------------
   与 v1 的差别：
     · 顶栏从"浅底小字"改成"深墨底金线"，一屏之内先给出重感
     · 主头部升高到 86px，用 sticky + 半透明底，滚动时永远有一条细线压着内容
     · 导航不加背景块，用「一条会从中间向两边展开的金线」做 hover
     · 右侧 CTA 改成描边按钮，hover 才填充 —— 不抢首屏，但一定看得见
   ========================================================================== */

.zjja-top{background:var(--pine-900);color:rgba(239,234,221,.62);font-size:11.5px;letter-spacing:.07em;}
.zjja-top__in{max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--gutter);height:38px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;}
.zjja-top__l,.zjja-top__r{display:flex;align-items:center;min-width:0;}
.zjja-top__l span,.zjja-top__r span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.zjja-top__l i,.zjja-top__r i{display:block;width:1px;height:9px;background:rgba(239,234,221,.22);margin:0 14px;flex:none;}
.zjja-top__r a{color:var(--gold-2);letter-spacing:.12em;font-variant-numeric:tabular-nums;white-space:nowrap;}
.zjja-top__r a:hover{color:#E4CBA0;}

/* -- 主头部 ------------------------------------------------------------- */
.zjja-hd{position:sticky;top:0;z-index:var(--z-hd);background:rgba(251,250,245,.94);
  -webkit-backdrop-filter:saturate(150%) blur(12px);backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--hair);transition:box-shadow var(--dur) var(--ease);}
.zjja-hd.is-sink{box-shadow:0 1px 0 rgba(20,25,21,.06),0 20px 44px -34px rgba(20,25,21,.42);}
.zjja-hd__in{max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--gutter);height:86px;
  display:flex;align-items:center;gap:clamp(20px,2.6vw,48px);}

/* -- logo：山形 SVG + 宋体字。文字用 HTML，可选中、可搜索、宽度自适应 --- */
.zjja-lg{display:flex;align-items:center;gap:11px;flex:none;}
.zjja-lg__m{width:36px;height:36px;color:var(--pine-800);flex:none;}
.zjja-lg__t{display:block;line-height:1;}
.zjja-lg__t b{display:block;font-family:var(--ff-display);font-size:19px;font-weight:600;
  letter-spacing:.06em;color:var(--ink);}
.zjja-lg__t i{display:block;margin-top:7px;font-size:9px;letter-spacing:.26em;
  color:var(--ink-3);font-style:normal;text-transform:uppercase;}

/* -- 主导航 ------------------------------------------------------------- */
.zjja-nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,32px);margin-left:auto;}
.zjja-nav__li{position:relative;flex:none;}
.zjja-nav__a{position:relative;display:block;padding:31px 0;font-size:14px;
  letter-spacing:.08em;color:var(--ink-2);transition:color .24s;}
.zjja-nav__a::after{content:"";position:absolute;left:50%;right:50%;bottom:23px;height:1px;
  background:var(--gold);transition:left .36s var(--ease),right .36s var(--ease);}
.zjja-nav__li:hover .zjja-nav__a,.zjja-nav__a.is-on{color:var(--ink);}
.zjja-nav__li:hover .zjja-nav__a::after,.zjja-nav__a.is-on::after{left:0;right:0;}

/* 下拉：白纸 + 1px 边 + 极淡阴影，不做圆角 */
.zjja-nav__sub{position:absolute;top:100%;left:50%;min-width:172px;padding:10px 0;
  background:var(--paper);border:1px solid var(--hair);box-shadow:0 24px 54px -30px rgba(20,25,21,.4);
  opacity:0;visibility:hidden;transform:translate(-50%,10px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;}
.zjja-nav__li:hover .zjja-nav__sub,.zjja-nav__li:focus-within .zjja-nav__sub{
  opacity:1;visibility:visible;transform:translate(-50%,0);}
.zjja-nav__sub a{display:block;padding:9px 20px;font-size:13.5px;color:var(--ink-2);white-space:nowrap;
  transition:color .2s,background .2s;}
.zjja-nav__sub a:hover{color:var(--pine-700);background:var(--pine-050);}
.zjja-nav__sub--wide{min-width:432px;padding:16px 10px;}
.zjja-nav__sub--wide ul{display:grid;grid-template-columns:1fr 1fr;gap:0 6px;}

/* -- 右侧：电话 + 描边 CTA --------------------------------------------- */
.zjja-hd__r{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);flex:none;}
.zjja-hd__tel{display:block;line-height:1.2;text-align:right;}
.zjja-hd__tel small{display:block;font-size:10px;letter-spacing:.18em;color:var(--ink-3);}
.zjja-hd__tel b{display:block;margin-top:5px;font-family:var(--ff-num);font-size:18px;
  font-weight:600;letter-spacing:.03em;color:var(--ink);font-variant-numeric:tabular-nums;}
.zjja-hd__go{position:relative;display:inline-block;padding:11px 21px;overflow:hidden;
  border:1px solid var(--pine-800);font-size:12.5px;letter-spacing:.18em;color:var(--pine-800);
  transition:color .3s var(--ease);}
.zjja-hd__go::before{content:"";position:absolute;inset:0;background:var(--pine-800);
  transform:scaleX(0);transform-origin:left center;transition:transform .34s var(--ease);}
.zjja-hd__go span{position:relative;}
.zjja-hd__go:hover{color:var(--paper);}
.zjja-hd__go:hover::before{transform:scaleX(1);}

/* -- 移动端汉堡：压在抽屉之上，展开后可点 ------------------------------- */
.zjja-bg{display:none;width:42px;height:42px;margin-left:auto;flex:none;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;}
.zjja-bg i{display:block;width:20px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s;}
.zjja-bg[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.zjja-bg[aria-expanded="true"] i:nth-child(2){opacity:0;}
.zjja-bg[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ==========================================================================
   06 页脚 v2 · 深墨底 + 上沿一道金线渐隐
   ========================================================================== */
.zjja-ft{position:relative;background:var(--pine-900);color:rgba(239,234,221,.7);}
.zjja-ft::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(169,138,85,0) 0%,rgba(169,138,85,.62) 22%,rgba(169,138,85,.62) 78%,rgba(169,138,85,0) 100%);}
.zjja-ft__in{max-width:var(--wrap-wide);margin:0 auto;padding:clamp(52px,5.6vw,84px) var(--gutter) 0;}
.zjja-ft__top{display:grid;grid-template-columns:minmax(0,1.32fr) repeat(3,minmax(0,.7fr));
  gap:clamp(26px,3.2vw,56px);padding-bottom:clamp(36px,4.4vw,60px);}

.zjja-ft__slogan{font-family:var(--ff-display);font-weight:500;font-size:clamp(22px,2.3vw,30px);
  line-height:1.58;letter-spacing:.03em;color:#F2EDE0;}
.zjja-ft__d{margin-top:20px;max-width:352px;font-size:13px;line-height:2.15;color:rgba(239,234,221,.68);}

.zjja-ft__h{padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid rgba(239,234,221,.14);
  font-size:10.5px;letter-spacing:.3em;color:var(--gold);}
.zjja-ft__lis li+li{margin-top:11px;}
.zjja-ft__lis a{font-size:13.5px;letter-spacing:.03em;color:rgba(239,234,221,.72);transition:color .2s;}
.zjja-ft__lis a:hover{color:var(--gold-2);}

.zjja-ft__tel{display:block;font-family:var(--ff-num);font-weight:600;font-size:clamp(21px,2.1vw,27px);
  letter-spacing:.03em;color:#F2EDE0;font-variant-numeric:tabular-nums;}
.zjja-ft__tel:hover{color:var(--gold-2);}
.zjja-ft__sub{margin-top:10px;font-size:12px;line-height:1.95;color:rgba(239,234,221,.7);}
.zjja-ft__qr{display:flex;align-items:center;gap:13px;margin-top:20px;}
.zjja-ft__qr img{width:74px;height:74px;flex:none;background:#fff;padding:4px;}
.zjja-ft__qr small{font-size:11.5px;line-height:1.95;color:rgba(239,234,221,.6);}

.zjja-ft__btm{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;
  padding:22px 0 30px;border-top:1px solid rgba(239,234,221,.11);
  font-size:11.5px;letter-spacing:.04em;color:rgba(239,234,221,.66);}
.zjja-ft__lic{display:flex;align-items:center;flex-wrap:wrap;}
.zjja-ft__lic i{display:block;width:1px;height:9px;background:rgba(239,234,221,.2);margin:0 12px;flex:none;}
.zjja-ft__lic a{color:rgba(239,234,221,.74);}
.zjja-ft__lic a:hover{color:var(--gold-2);}

/* ==========================================================================
   07 按钮 / 标签 / 徽章
   ========================================================================== */
.zjja-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 24px;
  font-size:14.5px;font-weight:400;letter-spacing:.02em;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
  white-space:nowrap;cursor:pointer;
}
.zjja-btn:active{transform:translateY(1px);}

.zjja-btn--pri{background:var(--pine-700);color:#fff;}
.zjja-btn--pri:hover{background:var(--pine-800);color:#fff;}

.zjja-btn--ink{background:var(--ink);color:#fff;}
.zjja-btn--ink:hover{background:var(--pine-800);color:#fff;}

.zjja-btn--line{background:transparent;border-color:var(--line-2);color:var(--ink);}
.zjja-btn--line:hover{border-color:var(--pine-700);color:var(--pine-700);background:var(--pine-050);}

.zjja-btn--ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.42);color:#fff;}
.zjja-btn--ghost:hover{background:#fff;color:var(--pine-800);border-color:#fff;}

.zjja-btn--sm{height:38px;padding:0 16px;font-size:13.5px;}
.zjja-btn--lg{height:54px;padding:0 32px;font-size:15.5px;}
.zjja-btn--block{display:flex;width:100%;}

/* 文字链：带一条会走的线 */
.zjja-more{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;color:var(--brand-ink);
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease),gap var(--dur) var(--ease);
}
.zjja-more:hover{border-bottom-color:var(--pine-300);gap:11px;}
.zjja-more svg{width:13px;height:13px;flex:0 0 auto;}

/* 标签 */
.zjja-tag{
  display:inline-flex;align-items:center;gap:5px;
  height:26px;padding:0 11px;
  font-size:12px;line-height:1;
  color:var(--ink-2);
  background:var(--paper-2);
  border-radius:var(--r-pill);
  white-space:nowrap;
}
.zjja-tag--line{background:transparent;border:1px solid var(--line);}
.zjja-tag--pine{background:var(--pine-050);color:var(--brand-ink);}
.zjja-tag--amber{background:var(--amber-100);color:var(--amber-700);}

/* 编号徽章 */
.zjja-no{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:22px;padding:0 8px;
  font-family:var(--ff-num);font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--brand-ink);background:#fff;
  border:1px solid var(--pine-200);border-radius:var(--r-xs);
}

/* ==========================================================================
   08 卡片
   ========================================================================== */

/* -- 通用：一张图 + 一段字的横卡 -- */
.zjja-card{
  display:block;
  background:#fff;
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.zjja-card:hover{border-color:var(--pine-200);box-shadow:var(--sh-2);transform:translateY(-2px);color:inherit;}
.zjja-card__pic{position:relative;display:block;background:var(--paper-3);overflow:hidden;}
.zjja-card__pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.zjja-card:hover .zjja-card__pic img{transform:scale(1.035);}
.zjja-card__bd{display:block;padding:16px 18px 18px;}

/* -- 线路卡：图 4:3 + 编号 + 标题 + 元信息 + 小价格 -- */
.zjja-lc .zjja-card__pic{aspect-ratio:4/3;}
.zjja-lc__no{
  position:absolute;left:10px;top:10px;z-index:2;
  display:inline-flex;align-items:center;height:24px;padding:0 9px;
  font-family:var(--ff-num);font-size:11.5px;font-weight:600;letter-spacing:.05em;
  color:var(--pine-900);background:rgba(255,255,255,.94);
  border-radius:var(--r-xs);
  backdrop-filter:blur(4px);
}
.zjja-lc__days{
  position:absolute;right:10px;bottom:10px;z-index:2;
  display:inline-flex;align-items:center;height:24px;padding:0 9px;
  font-size:11.5px;color:#fff;
  background:rgba(12,47,38,.66);
  border-radius:var(--r-xs);
  backdrop-filter:blur(4px);
}
.zjja-lc__t{
  display:block;
  font-size:16.5px;font-weight:400;line-height:1.55;color:var(--ink);
  min-height:calc(1.55em * 2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.zjja-lc:hover .zjja-lc__t{color:var(--brand-ink);}
.zjja-lc__m{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;
  margin-top:10px;
  font-size:12.5px;color:var(--ink-3);
}
.zjja-lc__m em{display:inline-flex;align-items:center;gap:4px;}
.zjja-lc__m em+em::before{
  content:"";width:3px;height:3px;border-radius:50%;
  background:var(--sand-300);margin-right:6px;
}
.zjja-lc__f{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin-top:12px;padding-top:11px;
  border-top:1px solid var(--hair);
}
/* 价格：小字，与参数同排 —— 这是与 B 站最明显的分野 */
.zjja-price{
  font-family:var(--ff-num);
  font-size:18px;font-weight:400;color:var(--brand-ink);
  letter-spacing:-.01em;line-height:1;
}
.zjja-price small{font-size:15px;font-weight:400;margin-right:1px;}
.zjja-price i{font-style:normal;font-size:11.5px;color:var(--ink-3);margin-left:3px;font-family:var(--ff-sans);}
.zjja-price--ask{font-family:var(--ff-sans);font-size:13px;color:var(--ink-3);}
.zjja-lc__sale{font-size:12px;color:var(--ink-3);font-family:var(--ff-num);}

/* -- 网格 -- */
.zjja-grid{display:grid;gap:clamp(16px,2.2vw,26px);}
.zjja-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.zjja-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.zjja-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}

/* -- 酒店卡：横向，图 4:3 左 -- */
.zjja-hc{display:grid;grid-template-columns:200px minmax(0,1fr);}
.zjja-hc .zjja-card__pic{aspect-ratio:4/3;height:100%;}
.zjja-hc .zjja-card__bd{padding:16px 18px;}
.zjja-hc__tag{font-size:12px;color:var(--ink-3);}

/* -- 景点卡：图 3:2，标题压在图上（百科式） -- */
.zjja-jc .zjja-card__pic{aspect-ratio:3/2;}
.zjja-jc__ov{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  /* 渐变要够深够高：景点名压在白亮的天空或水面上的时候，
     只铺 30px 的淡渐变等于把标题献祭掉。这里铺到 88px、最深 .88。 */
  padding:88px 16px 14px;
  background:linear-gradient(to top,
    rgba(7,30,24,.90) 0%,
    rgba(7,30,24,.66) 34%,
    rgba(7,30,24,.26) 68%,
    rgba(7,30,24,0) 100%);
  color:#fff;
}
.zjja-jc__t{
  display:block;font-size:16px;font-weight:400;line-height:1.5;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.32);
}
.zjja-jc__m{
  display:block;margin-top:3px;font-size:12px;color:rgba(255,255,255,.86);
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}

/* -- 攻略条目：无图，纯文字条目（时间轴感） -- */
.zjja-ac{
  display:flex;gap:16px;align-items:flex-start;
  padding:18px 0;border-bottom:1px solid var(--hair);
}
.zjja-ac:last-child{border-bottom:0;}
.zjja-ac__d{
  flex:0 0 54px;font-family:var(--ff-num);font-size:12px;color:var(--ink-3);
  line-height:1.5;padding-top:3px;text-align:right;
  font-variant-numeric:tabular-nums;
}
.zjja-ac__d b{display:block;font-size:17px;font-weight:400;color:var(--ink-2);}
.zjja-ac__t{font-size:15.5px;line-height:1.6;color:var(--ink);}
.zjja-ac__t:hover{color:var(--brand-ink);}
.zjja-ac__s{
  margin-top:5px;font-size:13px;color:var(--ink-3);line-height:1.75;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}

/* ==========================================================================
   09 表单
   ========================================================================== */
.zjja-form{display:block;}
.zjja-field{display:block;margin-bottom:14px;}
.zjja-field > span{
  display:flex;align-items:baseline;gap:6px;
  font-size:13px;color:var(--ink-2);margin-bottom:6px;
}
.zjja-field__req{color:var(--amber-600);font-size:12px;}
.zjja-field__opt{font-size:11.5px;color:var(--ink-3);font-weight:400;}
.zjja-input,.zjja-select,.zjja-textarea{
  display:block;width:100%;
  min-height:44px;padding:10px 13px;
  font-size:14.5px;line-height:1.5;
  color:var(--ink);background:#fff;
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  -webkit-appearance:none;appearance:none;
}
.zjja-input::placeholder,.zjja-textarea::placeholder{color:var(--sand-400);}
.zjja-input:focus,.zjja-select:focus,.zjja-textarea:focus{
  outline:0;border-color:var(--pine-500);
  box-shadow:0 0 0 3px rgba(31,122,92,.12);
}
.zjja-textarea{min-height:86px;resize:vertical;}
.zjja-select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23726A53' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px;
  padding-right:32px;
}
.zjja-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.zjja-form__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.zjja-form__tip{margin-top:10px;font-size:11.5px;line-height:1.7;color:var(--ink-3);}
.zjja-form__err{
  margin-top:10px;padding:9px 12px;
  font-size:12.5px;color:#8C2B22;background:#FBEDEB;
  border-left:2px solid #C0392B;border-radius:var(--r-xs);
}

/* ==========================================================================
   10 悬浮条 / 移动底条 / 弹窗
   ========================================================================== */
.zjja-float{
  position:fixed;right:18px;bottom:96px;z-index:var(--z-float);
  display:flex;flex-direction:column;gap:8px;
}
.zjja-float__b{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:52px;height:52px;
  background:#fff;color:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-2);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.zjja-float__b:hover{background:var(--pine-700);color:#fff;border-color:var(--pine-700);}
.zjja-float__ic{display:flex;align-items:center;justify-content:center;height:20px;}
.zjja-float__ic svg{fill:currentColor;display:block;}
.zjja-float__lb{font-size:10px;line-height:1;letter-spacing:.02em;}
.zjja-float__qr{
  position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%) scale(.96);
  width:196px;padding:14px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
  text-align:center;
}
.zjja-float__b--wx:hover .zjja-float__qr{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%) scale(1);}
.zjja-float__qr b{display:block;font-size:12.5px;color:var(--ink);margin-bottom:8px;font-weight:600;}
.zjja-float__qr img{width:100%;height:auto;border-radius:var(--r-xs);}
.zjja-float__qr small{display:block;margin-top:8px;font-size:11px;line-height:1.65;color:var(--ink-3);}

/* 移动端底部固定条 */
.zjja-mbar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-mbar);
  background:rgba(253,252,247,.97);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.zjja-mbar__in{display:grid;grid-template-columns:1fr 1fr 1fr 1.4fr;align-items:stretch;height:54px;}
.zjja-mbar a{
  display:flex;align-items:center;justify-content:center;
  font-size:13.5px;color:var(--ink-2);
  border-right:1px solid var(--hair);
}
.zjja-mbar a:last-child{border-right:0;}
.zjja-mbar a.hot{
  background:var(--pine-700);color:#fff;font-weight:600;gap:6px;
}
.zjja-mbar a.hot svg{fill:currentColor;width:15px;height:15px;}

/* 弹窗 */
.zjja-modal{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:none;align-items:center;justify-content:center;
  padding:20px;
}
.zjja-modal.is-open{display:flex;}
.zjja-modal__mask{position:absolute;inset:0;background:rgba(12,30,24,.5);backdrop-filter:blur(3px);}
.zjja-modal__box{
  position:relative;z-index:2;
  width:100%;max-width:520px;max-height:88vh;overflow:auto;
  background:var(--paper);
  border-radius:var(--r-lg);
  box-shadow:0 32px 80px -24px rgba(12,30,24,.42);
  padding:32px 32px 28px;
  animation:zjjaPop .34s var(--ease) both;
}
@keyframes zjjaPop{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}}
.zjja-modal__x{
  position:absolute;right:14px;top:14px;
  width:34px;height:34px;border-radius:50%;
  transition:background var(--dur) var(--ease);
}
.zjja-modal__x::before,.zjja-modal__x::after{
  content:"";position:absolute;left:50%;top:50%;width:15px;height:1.4px;
  background:var(--ink-3);border-radius:1px;
}
.zjja-modal__x::before{transform:translate(-50%,-50%) rotate(45deg);}
.zjja-modal__x::after{transform:translate(-50%,-50%) rotate(-45deg);}
.zjja-modal__x:hover{background:var(--paper-3);}
.zjja-modal h3{font-size:22px;font-weight:400;line-height:1.4;margin-bottom:8px;}
.zjja-modal__sub{font-size:13.5px;line-height:1.85;color:var(--ink-3);margin-bottom:20px;}
.zjja-ok{text-align:center;padding:14px 0 6px;}
.zjja-ok__ic{
  width:52px;height:52px;margin:0 auto 16px;border-radius:50%;
  background:var(--pine-050);position:relative;
}
.zjja-ok__ic::after{
  content:"";position:absolute;left:50%;top:47%;
  width:16px;height:9px;
  border-left:2px solid var(--pine-600);border-bottom:2px solid var(--pine-600);
  transform:translate(-50%,-50%) rotate(-45deg);
}
.zjja-ok b{display:block;font-size:19px;font-weight:400;margin-bottom:8px;}
.zjja-ok p{font-size:13.5px;line-height:1.9;color:var(--ink-3);}

/* ==========================================================================
   11 页面块
   ========================================================================== */

/* -- 区块标题：编号 + 中文标题 + 英文小字 + 右侧更多 -- */
.zjja-sechd{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(24px,3.2vw,44px);
}
.zjja-sechd__l{max-width:64ch;}
.zjja-sechd__no{
  display:block;
  font-family:var(--ff-num);font-size:12px;letter-spacing:.18em;
  color:var(--sand-400);margin-bottom:10px;
}
.zjja-sechd__t{
  font-size:var(--fs-h2);font-weight:300;line-height:1.28;color:var(--ink);
  letter-spacing:0;
}
.zjja-sechd__s{
  margin-top:10px;font-size:14.5px;line-height:1.85;color:var(--ink-3);
  font-weight:300;
}
.zjja-sechd__r{flex:0 0 auto;}

/* -- 首屏：图池 1500 上限 + 10px 圆角 + 两侧露底色 -- */
.zjja-hero{
  padding:clamp(14px,2vw,26px) var(--gutter) 0;
}
.zjja-hero__pool{
  position:relative;
  max-width:var(--wrap-wide);
  margin:0 auto;
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--pine-900);
}
.zjja-hero__media{
  position:relative;
  aspect-ratio:16/8.2;
  min-height:380px;
}
.zjja-hero__media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  display:block;
}
.zjja-hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,34,27,.74) 0%,rgba(8,34,27,.34) 42%,rgba(8,34,27,.06) 74%);
}
.zjja-hero__in{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(24px,3.4vw,52px);
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.zjja-hero__txt{max-width:min(680px,66%);color:#fff;}
.zjja-hero__eyebrow{
  display:inline-block;
  font-size:11.5px;letter-spacing:.2em;font-weight:600;
  color:var(--pine-200);margin-bottom:14px;
}
.zjja-hero__t{
  font-size:clamp(26px,3.6vw,44px);
  font-weight:300;line-height:1.26;letter-spacing:0;color:#fff;
}
.zjja-hero__s{
  margin-top:14px;font-size:clamp(13.5px,1.2vw,15.5px);
  line-height:1.9;color:rgba(255,255,255,.84);font-weight:300;
  max-width:46ch;
}
.zjja-hero__btn{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;}
.zjja-hero__cap{
  font-size:11.5px;color:rgba(255,255,255,.7);
  letter-spacing:.06em;text-align:right;
  padding-bottom:4px;
}
.zjja-hero__cap b{font-family:var(--ff-num);font-weight:400;color:#fff;}

/* -- 图注 -- */
.zjja-cap{
  display:block;margin-top:10px;
  font-size:12px;line-height:1.75;color:var(--ink-3);
  padding-left:26px;position:relative;
}
.zjja-cap::before{
  content:"";position:absolute;left:0;top:.72em;
  width:16px;height:1px;background:var(--sand-300);
}

/* -- 页头（列表页通用） -- */
.zjja-phead{
  padding:clamp(28px,3.6vw,52px) 0 clamp(20px,2.4vw,32px);
}
.zjja-phead__crumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-3);margin-bottom:18px;
}
.zjja-phead__crumb i{color:var(--sand-300);}
.zjja-phead__crumb em{color:var(--ink-2);}
.zjja-phead h1{
  font-size:var(--fs-h1);font-weight:300;line-height:1.22;color:var(--ink);
}
.zjja-phead__sub{
  margin-top:14px;max-width:62ch;
  font-size:14.5px;line-height:1.9;color:var(--ink-3);font-weight:300;
}
.zjja-phead__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}

/* -- 分页 -- */
.zjja-page{margin-top:clamp(28px,3.4vw,44px);}
.zjja-page a,.zjja-page b,.zjja-page span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 12px;margin:0 3px 6px;
  font-size:13.5px;font-family:var(--ff-num);
  color:var(--ink-2);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm);
}
.zjja-page a:hover{border-color:var(--pine-400);color:var(--brand-ink);}
.zjja-page b{background:var(--pine-700);color:#fff;border-color:var(--pine-700);font-weight:600;}
.zjja-page span{background:transparent;border-color:transparent;color:var(--ink-3);}

/* -- 侧栏块 -- */
.zjja-sbox{
  background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-md);
  padding:20px;
  margin-bottom:18px;
}
.zjja-sbox__hd{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--hair);
}
.zjja-sbox__hd b{font-size:14.5px;font-weight:600;color:var(--ink);}
.zjja-sbox__hd em{font-size:11.5px;color:var(--ink-3);font-style:normal;}

/* -- 空态 -- */
.zjja-empty{
  padding:52px 24px;text-align:center;
  background:#fff;border:1px dashed var(--line-2);border-radius:var(--r-md);
}
.zjja-empty b{display:block;font-size:16px;font-weight:400;margin-bottom:8px;color:var(--ink);}
.zjja-empty p{font-size:13.5px;line-height:1.9;color:var(--ink-3);}

/* ==========================================================================
   12 响应式（内页骨架）
   --------------------------------------------------------------------------
   页头 / 页脚 / 首屏的响应式已经跟着各自那一块走了（见 05b、21b），
   这里只管内页骨架：主栏 + 侧栏、列表栅格、正文表格。
   ========================================================================== */
@media (max-width:1520px){
  /* 右侧悬浮条宽 54 + 右边距 18，页脚第四栏先让出这条道 */
  .zjja-ft__top{padding-right:76px;}
}
@media (max-width:1180px){
  .zjja-main{grid-template-columns:minmax(0,1fr) 300px;gap:36px;}
  .zjja-grid--4{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:980px){
  .zjja-main{grid-template-columns:minmax(0,1fr);gap:0;}
  .zjja-side{position:static;margin-top:40px;}
  .zjja-grid--3,.zjja-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  :root{--fs-body:15.5px;--lh-body:1.85;}
  .zjja-grid--2,.zjja-grid--3,.zjja-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .zjja-hc{grid-template-columns:minmax(0,1fr);}
  .zjja-hc .zjja-card__pic{aspect-ratio:16/9;height:auto;}
  .zjja-row{grid-template-columns:minmax(0,1fr);}
  /* 给移动端底部固定条让位 */
  body{padding-bottom:56px;}
  .zjja-modal__box{padding:26px 20px 22px;border-radius:var(--r-md);}
}
@media (max-width:560px){
  .zjja-grid--2,.zjja-grid--3,.zjja-grid--4{grid-template-columns:minmax(0,1fr);}
  .zjja-sechd{gap:14px;}
  .zjja-sechd__r{width:100%;}
  .zjja-lc__t{font-size:15.5px;}
}

/* ==========================================================================
   13 动效 / 工具类
   ========================================================================== */
/* 进场：JS 给 html 加 .js，无 JS 时一律可见。IO + scroll 双保险，另有 3.5s 兜底 */
.js .zjja-rv{
  opacity:0;transform:translateY(16px);
  transition:opacity .72s var(--ease),transform .72s var(--ease);
  will-change:opacity,transform;
}
.js .zjja-rv.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .zjja-rv{opacity:1 !important;transform:none !important;transition:none;}
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

.zjja-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.zjja-mt-1{margin-top:var(--sp-2);}
.zjja-mt-2{margin-top:var(--sp-4);}
.zjja-mt-3{margin-top:var(--sp-6);}
.zjja-tc{text-align:center;}
.zjja-flex{display:flex;}
.zjja-aic{align-items:center;}
.zjja-jcb{justify-content:space-between;}
.zjja-gap{gap:12px;}
.zjja-wrap-anywhere{overflow-wrap:anywhere;}

/* 图片加载失败时的兜底：不显示裂图图标，只留底色 */
.zjja-card__pic img[src*="notimg"],
.zjja-card__pic img[data-err]{opacity:0;}

/* ==========================================================================
   END
   ========================================================================== */

/* ==========================================================================
   21 · 首页 v13（2026-11-01 重写）
   --------------------------------------------------------------------------
   上一版（v12）的问题不是细节，是方向：它往「安静、空、少」走，
   结果整页读起来像一本文集，不像旅行社的首页。这一版往回收三件事：

     ① 画面要占地方。首屏是五张实拍大图轮播，不是一张静态背景。
        轮播之间用 1.1s 交叉淡入，每张进场后缓慢推近 8 秒；
        文字不叠在图正中，压在左下，右下留页码与箭头。

     ② 内容要密。每一屏塞进「图 + 三层字」，区块间距从 96-116px
        收到 56-100px。留白是给画廊的，不是给首页的。

     ③ 动要看得见。进场淡入错峰 70ms、数字滚进视口才从 0 跳、
        懒加载图片加载完淡入、顶部一条金线随滚动长出来。
        全部由同一个 IIFE 驱动，出错就都停，页面内容不受影响。

   风格不变的部分（这是品牌资产，不要动）：
     标题宋体、金色只做编号与细线、深墨底 + 暖米白、圆角极小。
   ========================================================================== */


/* ==========================================================================
   21a 本页令牌
   --------------------------------------------------------------------------
   挂在 .zjja 上而不是 :root 上：内页还在用 01 那组公共色阶，
   写进 :root 会把内页一起改掉。
   ========================================================================== */
.zjja{
  --pg-cream:#F7F3E6;
  --pg-deep:#0A1410;
  --pg-gold:#A98A55;
  --pg-gold-2:#C2A574;
  --pg-ink:#141915;
  --pg-ink-2:#453F31;
  --pg-ink-3:#726A53;
  --pg-line:rgba(20,32,28,.12);
  --pg-line-2:rgba(20,32,28,.22);
  --pg-paper:#FBFAF5;
  --pg-paper-2:#F6F4EB;
  --pg-paper-3:#F0EADC;
  --pg-ease:cubic-bezier(.22,.61,.36,1);
}

/* 版心。基础骨架里已有同名规则，这里重写一次保证值一致 */
.zjja-wrap{max-width:var(--wrap);margin-left:auto;margin-right:auto;
  padding-left:var(--gutter);padding-right:var(--gutter);}

/* 区块通用节奏：桌面 56-100px，移动 44px（移动端不能再多，
   一多就变成「两条字夹一大片空」） */
.zjja-sec{padding:clamp(56px,6.4vw,100px) 0;}
.zjja-sec--tint{background:var(--pg-paper-2);}

/* ==========================================================================
   ① 首屏轮播
   ========================================================================== */
.zjja-bn{position:relative;height:clamp(560px,86vh,860px);overflow:hidden;
  background:var(--pg-deep);isolation:isolate;}

.zjja-bn__vp{position:absolute;inset:0;z-index:0;}
/* v14：转场从「交叉淡入」换成「自下而上揭开」。
   clip-path 从 inset(100% 0 0 0)（整张被裁掉）走到 inset(0)。
   旧图不淡出，只靠 z-index 落在新图下面被盖住 ——
   中间不会出现「两张图各半透明叠在一起」的脏帧，那是淡入最难看的一瞬。
   非当前那张的 transition 延迟 1.15s 再瞬间裁掉：
   等新图完全盖满之后再收，收的动作在画面外发生，看不见。 */
.zjja-bn__i{position:absolute;inset:0;z-index:0;
  clip-path:inset(100% 0 0 0);
  transition:clip-path 0s linear 1.15s;}
.zjja-bn__i.is-on{z-index:1;
  animation:zjjabnin 1.15s var(--pg-ease) both;}
@keyframes zjjabnin{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}

.zjja-bn__ph{position:absolute;inset:0;overflow:hidden;}
.zjja-bn__ph img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);will-change:transform;
  /* 五张图生成时就偏灰，铺满全屏后更灰。这一层 filter 是给整组图做统一校色，
     比回去重出图省事，也比在 HTML 里一张张调稳 —— 换任何一张都不用再动。 */
  filter:saturate(1.14) contrast(1.1) brightness(1.11);}
/* Ken Burns：只在 is-on 期间跑一次；切走后 class 移除，下次挂上会重跑 */
/* 图片基础放大到 1.12：揭开时整张图是满的，边缘不会露出底色。
   Ken Burns 从 1.14 推到 1.02 —— 往回收，跟「从下往上抽出来」同向。 */
.zjja-bn__i.is-on .zjja-bn__ph img{animation:zjjabn 9s linear both;}
@keyframes zjjabn{
  from{transform:scale(1.14) translate3d(0,-1.4%,0)}
  to{transform:scale(1.02) translate3d(0,0,0)}}

/* 两层遮罩：
   横向一道，保证左下那块字压得住图（图再亮也不影响阅读）；
   纵向一道，上下各压一点，让页头与底部控件有落脚处。 */
/* ★ v14 踩的坑：遮罩原来挂在 .zjja-bn__vp::after（z-index:2），
   而 .zjja-bn__i 因为用了 clip-path 转场，本身成了一个独立的层叠上下文 ——
   它内部的 .zjja-bn__c（z-index:3）再高也只在自己这一层里比，
   整层仍然被 vp 的遮罩压在下面。结果就是：字全被压暗，几乎看不见。
   把遮罩挪进每一张图内部（.zjja-bn__i::after），图、遮罩、字在同一个
   层叠上下文里按 1 / 2 / 3 排，才是对的。顺带遮罩跟着图一起被揭开，
   转场时上下两层的明暗也是连续的。 */
.zjja-bn__i::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(6,12,9,.9) 0%,rgba(6,12,9,.86) 26%,
      rgba(6,12,9,.76) 46%,rgba(6,12,9,.4) 62%,
      rgba(6,12,9,.12) 78%,rgba(6,12,9,.34) 100%),
    linear-gradient(180deg,
      rgba(6,12,9,.4) 0,rgba(6,12,9,0) 20%,
      rgba(6,12,9,0) 60%,rgba(6,12,9,.62) 100%);}

/* -- 文案：压在左下 ---------------------------------------------------- */
.zjja-bn__c{position:absolute;z-index:3;left:0;right:0;
  bottom:clamp(104px,15vh,164px);max-width:var(--wrap);
  margin:0 auto;padding:0 var(--gutter);}
.zjja-bn__c > *{opacity:0;transform:translateY(16px);
  transition:opacity .85s var(--pg-ease),transform .85s var(--pg-ease);}
.zjja-bn__i.is-on .zjja-bn__c > *{opacity:1;transform:none;}
/* 标题不做整体位移 —— 它自己逐行往上推，再叠一层位移会显得抖 */
.zjja-bn__c > .zjja-bn__t{transform:none;}
.zjja-bn__i.is-on .zjja-bn__k{transition-delay:.14s;}
.zjja-bn__i.is-on .zjja-bn__t{transition-delay:.24s;}
.zjja-bn__i.is-on .zjja-bn__d{transition-delay:.38s;}
.zjja-bn__i.is-on .zjja-bn__go{transition-delay:.5s;}

.zjja-bn__k{margin:0 0 clamp(14px,1.6vw,22px);font-family:var(--ff-num);
  font-size:13px;letter-spacing:.26em;line-height:1.7;color:#F6EACB;
  text-shadow:0 1px 14px rgba(5,9,7,.95);}
.zjja-bn__t{margin:0;font-family:var(--ff-display);font-weight:400;
  font-size:clamp(34px,5.1vw,76px);line-height:1.2;letter-spacing:.02em;
  color:#FBF7EC;text-shadow:0 1px 6px rgba(3,6,4,.5),0 2px 28px rgba(3,6,4,.55);}
/* 行宽从 34em 收到 26em：原来第二行会跑到画面中间偏亮的区域，
   灰底白字在那里读起来发虚。收窄之后整段都压在左侧暗部。 */
.zjja-bn__d{margin:clamp(16px,2vw,26px) 0 0;max-width:26em;
  font-size:clamp(14.5px,1.18vw,17.5px);line-height:2.02;color:rgba(255,252,246,.97);
  text-shadow:0 1px 3px rgba(4,8,6,.6),0 1px 20px rgba(4,8,6,.95);}
.zjja-bn__go{display:inline-block;margin-top:clamp(22px,2.6vw,34px);
  padding:17px 48px;border:1px solid var(--pg-gold-2);
  background:linear-gradient(180deg,#CBAE7C,#9E8249);color:#0F140F;text-decoration:none;
  font-size:15px;font-weight:500;letter-spacing:.2em;line-height:1.4;white-space:nowrap;
  box-shadow:0 8px 26px -8px rgba(0,0,0,.6);
  transition:background .34s var(--pg-ease),border-color .34s var(--pg-ease),
    color .34s var(--pg-ease);}
.zjja-bn__go:hover{background:transparent;color:#FBF6E7;}

/* -- 底部控件 ----------------------------------------------------------- */
.zjja-bn__ui{position:absolute;z-index:4;left:0;right:0;bottom:0;}
.zjja-bn__wrap{max-width:var(--wrap);margin:0 auto;
  padding:0 var(--gutter) clamp(22px,3vh,38px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;}

.zjja-bn__ctl{display:flex;align-items:center;gap:14px;}
.zjja-bn__ar{width:38px;height:38px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;border:1px solid rgba(247,243,230,.5);border-radius:50%;
  background:rgba(8,15,11,.38);color:rgba(250,246,236,.95);cursor:pointer;padding:0;
  transition:border-color .3s var(--pg-ease),background .3s var(--pg-ease),
    color .3s var(--pg-ease);}
.zjja-bn__ar:hover{border-color:var(--pg-gold-2);background:rgba(169,138,85,.2);
  color:#F5F0E0;}
.zjja-bn__ar svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;}
.zjja-bn__num{font-family:var(--ff-num);font-size:16px;font-weight:400;
  color:#FBF7EC;font-variant-numeric:tabular-nums;}
.zjja-bn__sep{width:24px;height:1px;background:rgba(247,243,230,.5);}
.zjja-bn__tot{font-family:var(--ff-num);font-size:11px;
  color:rgba(247,243,230,.72);font-variant-numeric:tabular-nums;}

.zjja-bn__dots{display:flex;gap:9px;}
.zjja-bn__dot{position:relative;width:34px;height:2px;padding:0;border:0;
  background:rgba(247,243,230,.42);cursor:pointer;overflow:hidden;}
.zjja-bn__dot::after{content:"";position:absolute;inset:0;background:var(--pg-gold-2);
  transform:scaleX(0);transform-origin:0 50%;}
/* 当前这张的进度条随停留时间走满，一眼看得出还有多久换下一张 */
.zjja-bn__dot.is-on::after{animation:zjjadot 6s linear both;}
@keyframes zjjadot{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ==========================================================================
   ② 四条约定
   ========================================================================== */
.zjja-vow{padding:clamp(40px,4.6vw,66px) 0;background:var(--pg-paper);
  border-bottom:1px solid var(--pg-line);}
.zjja-vow__l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;padding:0;list-style:none;}
.zjja-vow__l > li{padding:0 clamp(12px,1.8vw,28px);
  border-left:1px solid var(--pg-line);}
.zjja-vow__l > li:first-child{padding-left:0;border-left:0;}
.zjja-vow__ic{display:block;margin-bottom:14px;}
.zjja-vow__ic svg{width:26px;height:26px;fill:none;stroke:var(--pg-gold);
  stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;}
.zjja-vow__l b{display:block;font-family:var(--ff-display);font-weight:400;
  font-size:clamp(15px,1.35vw,18px);line-height:1.5;letter-spacing:.03em;
  color:var(--pg-ink);}
.zjja-vow__l p{margin:9px 0 0;font-size:12.5px;line-height:1.9;
  color:var(--pg-ink-3);}

/* ==========================================================================
   ③ 数字带
   ========================================================================== */
.zjja-fig{padding:clamp(44px,5vw,72px) 0;background:var(--pg-deep);
  color:var(--pg-cream);}
.zjja-fig__l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;padding:0;list-style:none;}
.zjja-fig__l > li{padding:0 clamp(12px,2vw,30px);
  border-left:1px solid rgba(247,243,230,.26);}
.zjja-fig__l > li:first-child{padding-left:0;border-left:0;}
.zjja-fig__l b{display:block;font-family:var(--ff-num);font-weight:300;
  font-size:clamp(32px,3.4vw,50px);line-height:1;color:var(--pg-gold-2);
  font-variant-numeric:tabular-nums;}
.zjja-fig__l span{display:block;margin-top:11px;font-size:12.5px;
  letter-spacing:.06em;line-height:1.75;color:rgba(247,243,230,.72);}

/* ==========================================================================
   章节头：编号 / 大标 / 说明，三栏错落
   ========================================================================== */
.zjja-ch{display:grid;
  grid-template-columns:minmax(0,86px) minmax(0,1fr) minmax(0,330px);
  gap:clamp(18px,3vw,46px);align-items:start;
  margin:0 0 clamp(32px,3.8vw,52px);
  padding-bottom:clamp(20px,2.4vw,32px);
  border-bottom:1px solid var(--pg-line);}
/* 编号用大写汉字（壹 贰 叁 …）而不是「一二三」：
   宋体的「一」渲染出来就是一条横线，放在章节头左栏会被当成一根没对齐的装饰线。 */
.zjja-ch__no b{display:block;font-family:var(--ff-display);font-weight:400;
  font-size:clamp(24px,2.6vw,34px);line-height:1.1;color:var(--pg-gold);
  letter-spacing:.06em;}
.zjja-ch__no span{display:block;margin-top:9px;font-family:var(--ff-num);
  font-size:9px;letter-spacing:.24em;line-height:1.6;color:var(--pg-ink-3);
  text-transform:uppercase;}
.zjja-ch__t{margin:0;font-family:var(--ff-display);font-weight:400;
  font-size:clamp(24px,2.8vw,40px);line-height:1.42;letter-spacing:.03em;
  color:var(--pg-ink);}
.zjja-ch__d{margin:0;font-size:14px;line-height:2;color:var(--pg-ink-3);}

/* ==========================================================================
   ④ 定制怎么走
   ========================================================================== */
.zjja-how{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,410px);
  gap:clamp(30px,4vw,62px);align-items:start;}

.zjja-steps{position:relative;margin:0;padding:0;list-style:none;}
.zjja-steps::before{content:"";position:absolute;left:13px;top:10px;bottom:30px;
  width:1px;background:var(--pg-line-2);}
.zjja-steps > li{position:relative;padding:0 0 clamp(26px,3vw,38px)
  clamp(42px,4.4vw,62px);}
.zjja-steps > li:last-child{padding-bottom:0;}
.zjja-steps__n{position:absolute;left:0;top:0;width:27px;height:27px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid var(--pg-line-2);background:var(--pg-paper);
  font-family:var(--ff-display);font-size:12px;line-height:1;color:var(--pg-gold);
  /* 宋体的字面偏上，flex 居中之后汉字仍会略低于圆心，补 1px 才正 */
  padding-top:1px;}
.zjja-steps h3{margin:1px 0 0;font-family:var(--ff-display);font-weight:400;
  font-size:clamp(16px,1.45vw,20px);line-height:1.5;letter-spacing:.03em;
  color:var(--pg-ink);}
/* 38em 会把「那是我们的活。」挤成第二行孤字；42em 刚好一段放完 */
.zjja-steps p{margin:10px 0 0;max-width:42em;font-size:13.5px;line-height:2;
  color:var(--pg-ink-3);}

.zjja-spec{background:#FFFEF9;border:1px solid var(--pg-line);
  border-top:2px solid var(--pg-ink);
  padding:clamp(22px,2.6vw,34px) clamp(20px,2.6vw,34px) clamp(20px,2.4vw,28px);}
.zjja-spec__h{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;padding-bottom:14px;border-bottom:1px solid var(--pg-line);}
.zjja-spec__h b{font-family:var(--ff-display);font-weight:400;font-size:15px;
  letter-spacing:.04em;color:var(--pg-ink);}
.zjja-spec__h i{font-family:var(--ff-num);font-style:normal;font-size:9px;
  letter-spacing:.24em;color:var(--pg-gold);text-transform:uppercase;font-size:10px;}
.zjja-spec table{width:100%;border-collapse:collapse;}
.zjja-spec th{padding:11px 0 9px;font-family:var(--ff-num);font-weight:400;
  font-size:9.5px;letter-spacing:.2em;color:var(--pg-ink-3);text-align:left;
  border-bottom:1px solid var(--pg-line);}
.zjja-spec th:first-child{width:34px;}
.zjja-spec th:last-child{width:58px;text-align:right;}
.zjja-spec td{padding:15px 0 0;font-size:12.5px;line-height:1.75;
  color:var(--pg-ink-2);vertical-align:top;}
.zjja-spec td:first-child{width:34px;font-family:var(--ff-num);font-size:11px;
  color:var(--pg-gold);padding-top:17px;}
.zjja-spec td b{display:block;font-weight:400;font-family:var(--ff-display);
  font-size:14px;letter-spacing:.03em;color:var(--pg-ink);}
.zjja-spec td span{display:block;margin-top:5px;font-size:11.5px;line-height:1.8;
  color:var(--pg-ink-3);}
.zjja-spec td:last-child{text-align:right;white-space:nowrap;font-size:11.5px;
  padding:17px 0 0 12px;}
.zjja-spec__f{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--pg-line);
  font-size:12px;line-height:1.9;color:var(--pg-ink-3);}
.zjja-spec__m{margin:14px 0 0;font-family:var(--ff-num);font-size:10.5px;
  letter-spacing:.14em;color:var(--pg-gold);}

/* ==========================================================================
   ⑤ 线路卡片
   标签模板 32 输出的全是 span，这里逐个改成块级 / 弹性。
   ========================================================================== */
.zjja-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,30px);}

.zjja-j{display:flex;flex-direction:column;height:100%;
  background:var(--pg-paper);border:1px solid var(--pg-line);
  color:inherit;text-decoration:none;overflow:hidden;
  transition:transform .38s var(--pg-ease),box-shadow .38s var(--pg-ease),
    border-color .38s var(--pg-ease);}
.zjja-j:hover{transform:translateY(-3px);border-color:rgba(169,138,85,.42);
  box-shadow:0 2px 6px rgba(20,32,28,.05),0 22px 46px -24px rgba(20,32,28,.22);}
.zjja-j::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:3;
  height:2px;background:linear-gradient(90deg,var(--pg-gold),var(--pg-gold-2));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--pg-ease);}
.zjja-j:hover::after{transform:scaleX(1);}

.zjja-j__ph{position:relative;display:block;overflow:hidden;aspect-ratio:3/2;
  background:var(--pg-paper-3);}
.zjja-j__ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--pg-ease);}
.zjja-j:hover .zjja-j__ph img{transform:scale(1.06);}
.zjja-j__no{position:absolute;left:0;top:0;z-index:2;padding:6px 11px;
  background:var(--pg-ink);color:var(--pg-paper);
  font-family:var(--ff-num);font-size:10px;letter-spacing:.16em;line-height:1.4;}
.zjja-j__no:empty{display:none;}
.zjja-j__dy{position:absolute;right:10px;bottom:10px;z-index:2;padding:5px 10px;
  background:rgba(255,255,255,.94);color:var(--pg-ink);
  font-size:11px;letter-spacing:.06em;line-height:1.5;}
.zjja-j__dy:empty{display:none;}

.zjja-j__bd{display:flex;flex-direction:column;flex:1;
  padding:17px 19px 19px;}
.zjja-j__t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:3.2em;font-family:var(--ff-display);font-weight:400;
  font-size:16.5px;line-height:1.6;letter-spacing:.02em;color:var(--pg-ink);}
.zjja-j__d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:3.8em;margin-top:9px;
  font-size:12.5px;line-height:1.9;color:var(--pg-ink-3);}
/* intro 字段为空的线路（站上确实有），空 span 会白占两行高度，
   把下面「看这一条」顶得比邻卡低一截 */
.zjja-j__d:empty{display:none;}
.zjja-j__m{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:auto;
  padding-top:13px;font-family:var(--ff-num);font-size:10.5px;
  letter-spacing:.06em;color:var(--pg-ink-3);}
.zjja-j__m span:empty{display:none;}
.zjja-j__go{display:block;margin-top:12px;font-size:11.5px;letter-spacing:.16em;
  color:var(--pg-gold);}
.zjja-j:hover .zjja-j__go{color:var(--pg-ink);}

/* ==========================================================================
   ⑥ 住宿：两列目录式
   ========================================================================== */
.zjja-stays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3vw,52px);}
.zjja-stays__h{margin:0 0 14px;padding-bottom:11px;
  border-bottom:1px solid var(--pg-ink);
  font-family:var(--ff-num);font-size:10px;letter-spacing:.24em;
  color:var(--pg-ink);text-transform:uppercase;}

.zjja-hh{position:relative;display:grid;
  grid-template-columns:104px minmax(0,1fr);
  gap:clamp(16px,1.8vw,24px);align-items:start;
  padding:20px 0;border-bottom:1px solid var(--pg-line);
  color:inherit;text-decoration:none;}
/* 原来 hover 是整行刷一层底色，像电商列表。
   改成底部一条金线从左长出来 —— 只动 2px，但「被翻到」的感觉出来了。 */
.zjja-hh::after{content:"";position:absolute;left:0;right:0;bottom:-1px;z-index:2;
  height:1px;background:var(--pg-gold);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--pg-ease);}
.zjja-hh:hover::after{transform:scaleX(1);}
.zjja-hh__ph{display:block;overflow:hidden;aspect-ratio:4/3;
  background:var(--pg-paper-3);}
.zjja-hh__ph img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.14);will-change:transform;
  transition:filter .6s var(--pg-ease);}
.zjja-hh:hover .zjja-hh__ph img{filter:brightness(1.08);}
.zjja-hh__bd{min-width:0;}
.zjja-hh__no{display:block;margin-bottom:6px;font-family:var(--ff-num);
  font-size:10px;letter-spacing:.18em;color:var(--pg-gold);}
.zjja-hh__no:empty{display:none;}
.zjja-hh__t{display:block;font-family:var(--ff-display);font-weight:400;
  font-size:16px;line-height:1.55;letter-spacing:.02em;color:var(--pg-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.zjja-hh__d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:3.7em;margin-top:8px;
  font-size:12.5px;line-height:1.95;color:var(--pg-ink-3);}
.zjja-hh__m{display:block;margin-top:10px;font-family:var(--ff-num);
  font-size:10.5px;letter-spacing:.12em;line-height:1.6;color:var(--pg-ink-2);}
.zjja-hh__m:empty{display:none;}

/* ==========================================================================
   ⑦ 景点图卡
   ========================================================================== */
/* v14：六张图不再等分。等分六宫格是模板感最重的一种排法，
   把第一张放大到跨两列两行，剩下的五张填空 —— 版面立刻有了主次。
   行高用 grid-auto-rows 定死，大小图的比例才都落在 3:2 附近。 */
.zjja-grid6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:clamp(168px,17.5vw,246px);gap:clamp(12px,1.5vw,20px);}
.zjja-sp{position:relative;display:block;overflow:hidden;
  background:var(--pg-paper-3);color:inherit;text-decoration:none;}
.zjja-sp:first-child{grid-column:span 2;grid-row:span 2;}
/* 视差由 JS 写 transform，所以 hover 不能再用 scale（会被覆盖）。
   改成提亮 + 底部金线升起，动静都有，还不打架。 */
.zjja-sp img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.14);will-change:transform;
  transition:filter .6s var(--pg-ease);}
.zjja-sp:hover img{filter:brightness(1.09) saturate(1.06);}
.zjja-sp::before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:3;
  height:2px;background:linear-gradient(90deg,var(--pg-gold),var(--pg-gold-2));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--pg-ease);}
.zjja-sp:hover::before{transform:scaleX(1);}
/* 站上的景点图是 2014 年的老素材，明暗相差很大 —— 有的整体发白，
   有的本来就是暗调。原来那道渐变（底部 .78）压得住暗图，压不住发白的，
   白字就糊在图里。起点提前到 28%、底压到 .92，六张图都稳。 */
.zjja-sp::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,12,9,0) 28%,rgba(6,12,9,.3) 56%,
    rgba(6,12,9,.66) 78%,rgba(6,12,9,.92) 100%);}
/* 大图（第一张）有 512px 高，文字区反而显得空 —— 给它多留一点内边距，
   标题往下坐一点，别贴在底沿上 */
.zjja-sp:first-child .zjja-sp__bd{padding:26px 24px 22px;}
.zjja-sp:first-child .zjja-sp__t{font-size:clamp(20px,2.2vw,28px);}
.zjja-sp:first-child .zjja-sp__d{font-size:12.5px;margin-top:9px;}
.zjja-sp__bd{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:20px 18px 17px;}
.zjja-sp__t{display:block;font-family:var(--ff-display);font-weight:400;
  font-size:16.5px;line-height:1.5;letter-spacing:.04em;color:#F8F4E8;
  text-shadow:0 1px 14px rgba(5,9,7,.75);}
.zjja-sp__d{display:block;margin-top:7px;font-size:11.5px;line-height:1.7;
  color:rgba(247,243,230,.82);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.zjja-sp__d:empty{display:none;}

/* ==========================================================================
   ⑧ 客人说
   ========================================================================== */
.zjja-say{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,32px);margin:0;padding:0;list-style:none;}
.zjja-say__ph{overflow:hidden;aspect-ratio:16/10;background:var(--pg-paper-3);}
.zjja-say__ph img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.1);will-change:transform;
  transition:filter .6s var(--pg-ease);}
.zjja-say > li:hover .zjja-say__ph img{filter:brightness(1.07);}
.zjja-say blockquote{position:relative;margin:16px 0 0;padding-left:19px;
  font-family:var(--ff-display);font-weight:400;font-size:14.5px;line-height:1.9;
  letter-spacing:.02em;color:var(--pg-ink-2);}
.zjja-say blockquote::before{content:"\201C";position:absolute;left:0;top:-.1em;
  font-family:var(--ff-num);font-size:24px;line-height:1;color:var(--pg-gold);}
.zjja-say__by{margin:11px 0 0;padding-left:19px;font-family:var(--ff-num);
  font-size:10.5px;letter-spacing:.14em;color:var(--pg-ink-3);}

/* ==========================================================================
   ⑨ 行前 + 四季
   ========================================================================== */
.zjja-read{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3vw,52px);}
.zjja-read__h{margin:0 0 12px;padding-bottom:11px;
  border-bottom:1px solid var(--pg-ink);
  font-family:var(--ff-num);font-size:10px;letter-spacing:.24em;
  color:var(--pg-ink);text-transform:uppercase;}

.zjja-ar{margin:0;padding:0;list-style:none;}
.zjja-ar__i{border-bottom:1px solid var(--pg-line);}
.zjja-ar__i:last-child{border-bottom:0;}
.zjja-ar__i a{display:flex;align-items:baseline;gap:14px;padding:13px 0;
  color:inherit;text-decoration:none;
  transition:color .3s var(--pg-ease);}
.zjja-ar__i a:hover{color:var(--pg-gold);}
.zjja-ar__dt{flex:0 0 auto;min-width:38px;font-family:var(--ff-num);
  font-size:11px;letter-spacing:.06em;color:var(--pg-gold);
  font-variant-numeric:tabular-nums;}
.zjja-ar__t{flex:1;min-width:0;font-size:13.5px;line-height:1.7;
  color:var(--pg-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.zjja-ar__g{flex:0 0 auto;font-size:11px;letter-spacing:.14em;
  color:var(--pg-gold);opacity:.42;transition:opacity .3s var(--pg-ease);}
.zjja-ar__i a:hover .zjja-ar__g{opacity:1;color:var(--pg-gold);}

.zjja-sn{margin-top:clamp(44px,5vw,74px);padding-top:clamp(32px,3.8vw,52px);
  border-top:1px solid var(--pg-line);}
.zjja-sn__h{margin:0 0 clamp(22px,2.8vw,36px);
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(19px,2.1vw,27px);line-height:1.5;letter-spacing:.04em;
  color:var(--pg-ink);}
.zjja-sn__h span{display:block;margin-bottom:11px;font-family:var(--ff-num);
  font-size:9.5px;letter-spacing:.28em;line-height:1.6;color:var(--pg-gold);
  text-transform:uppercase;}
.zjja-sn__l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.2vw,32px);margin:0;padding:0;list-style:none;}
.zjja-sn__l b{display:block;font-family:var(--ff-display);font-weight:400;
  font-size:clamp(28px,3.1vw,44px);line-height:1;color:var(--pg-ink);}
.zjja-sn__l b span{font-size:.5em;color:var(--pg-gold);margin-left:3px;
  letter-spacing:.04em;}
.zjja-sn__l p{margin:14px 0 0;font-size:12.5px;line-height:1.95;
  color:var(--pg-ink-3);}

/* ==========================================================================
   ⑩ 末
   ========================================================================== */
.zjja-end{position:relative;padding:clamp(58px,6.6vw,104px) 0
  clamp(64px,7.2vw,116px);background:var(--pg-deep);color:var(--pg-cream);}
.zjja-end::before{content:"";position:absolute;left:50%;top:0;
  transform:translateX(-50%);width:min(880px,78%);height:2px;
  background:linear-gradient(90deg,rgba(155,124,72,0),rgba(196,168,124,.95) 50%,
    rgba(155,124,72,0));}
.zjja-end__in{max-width:760px;margin:0 auto;text-align:center;}
.zjja-end__in h2{margin:0;font-family:var(--ff-display);font-weight:400;
  font-size:clamp(24px,3vw,42px);line-height:1.44;letter-spacing:.03em;
  color:#F8F4E8;}
.zjja-end__in > p{margin:clamp(18px,2.2vw,28px) auto 0;max-width:38em;
  font-size:14.5px;line-height:2.1;color:rgba(247,243,230,.82);}
.zjja-end__act{display:flex;align-items:baseline;justify-content:center;
  flex-wrap:wrap;gap:clamp(18px,3vw,40px);margin-top:clamp(28px,3.2vw,44px);}
.zjja-end__go{display:inline-block;padding:14px 38px;border:1px solid var(--pg-gold);
  background:var(--pg-gold);color:#141915;text-decoration:none;
  font-size:13.5px;letter-spacing:.2em;line-height:1.4;
  transition:background .34s var(--pg-ease),color .34s var(--pg-ease);}
.zjja-end__go:hover{background:transparent;color:#F5F0E0;}
.zjja-end__tel{font-size:13px;letter-spacing:.06em;color:rgba(247,243,230,.72);}
.zjja-end__tel b{font-family:var(--ff-num);font-weight:400;font-size:15px;
  color:var(--pg-gold-2);font-variant-numeric:tabular-nums;}
.zjja-end__sig{margin:clamp(46px,5.4vw,78px) auto 0;padding-top:26px;
  border-top:1px solid rgba(247,243,230,.16);max-width:26em;
  font-family:var(--ff-display);font-size:13.5px;letter-spacing:.18em;
  line-height:2.1;color:rgba(247,243,230,.6);}

/* ==========================================================================
   提示条
   ========================================================================== */
.zjja-note{margin:clamp(24px,2.8vw,38px) 0 0;padding:16px 20px;
  border-left:2px solid var(--pg-gold);background:var(--pg-paper-2);
  font-size:13px;line-height:1.95;color:var(--pg-ink-2);}
.zjja-note b{font-weight:600;color:var(--pg-ink);}
.zjja-sec--tint .zjja-note{background:var(--pg-paper);}

/* ==========================================================================
   动效：进场淡入 / 图片渐显 / 顶部进度
   --------------------------------------------------------------------------
   ★ .zjja-rv 不写在 HTML 里，由 JS 在 DOM ready 时加上去。
     这样 JS 一旦没跑（禁用 / 报错 / 被拦），元素不带这个类，
     就完全按普通元素显示 —— 不会出现「白屏等动画」。
   ========================================================================== */
.zjja-rv{opacity:0;transform:translateY(22px);
  transition:opacity .74s var(--pg-ease),transform .74s var(--pg-ease);}
.zjja-rv.is-in{opacity:1;transform:none;}

/* 懒加载的图：加载完由 JS 挂 is-ld 再淡进来。
   同样是 JS 加的类，没有 JS 就根本不生效，不会留白。 */
img[loading="lazy"].is-ld{animation:zjjald .7s var(--pg-ease) both;}
@keyframes zjjald{from{opacity:0}to{opacity:1}}

.zjja-prog{position:fixed;left:0;top:0;z-index:62;width:100%;height:2px;
  pointer-events:none;}
.zjja-prog i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--pg-gold),var(--pg-gold-2));}

/* 尊重系统的「减少动态效果」：位移与推镜都关掉，只留淡入 */
@media (prefers-reduced-motion:reduce){
  .zjja-bn__i.is-on .zjja-bn__ph img{animation:none;}
  .zjja-bn__dot.is-on::after{animation:none;transform:scaleX(1);}
  .zjja-rv{transform:none;transition-duration:.01s;}
  .zjja-bn__c > *{transform:none;}
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:1180px){
  .zjja-how{grid-template-columns:minmax(0,1fr);}
  .zjja-spec{max-width:620px;}
  .zjja-ch{grid-template-columns:minmax(0,72px) minmax(0,1fr);}
  .zjja-ch__d{grid-column:2;padding-top:6px;}
}

@media (max-width:980px){
  .zjja-bn{height:clamp(500px,72vh,720px);}
  .zjja-vow__l{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 0;}
  .zjja-vow__l > li{padding:0 clamp(12px,2.4vw,24px);}
  .zjja-vow__l > li:nth-child(odd){padding-left:0;border-left:0;}
  .zjja-fig__l{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 0;}
  .zjja-fig__l > li{padding:0 clamp(12px,2.4vw,24px);}
  .zjja-fig__l > li:nth-child(odd){padding-left:0;border-left:0;}
  .zjja-grid3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .zjja-grid6{grid-template-columns:repeat(2,minmax(0,1fr));}
  .zjja-say{grid-template-columns:minmax(0,1fr);gap:30px;}
  .zjja-say .zjja-say__ph{aspect-ratio:16/8;}
  .zjja-sn__l{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 26px;}
  .zjja-stays{grid-template-columns:minmax(0,1fr);gap:34px;}
}

@media (max-width:760px){
  /* 移动端首屏 62vh：够大但不吃掉一整屏，往下还有内容 */
  .zjja-bn{height:clamp(440px,62vh,580px);}
  .zjja-bn__c{bottom:clamp(76px,11vh,110px);}
  .zjja-bn__t{font-size:clamp(27px,7.4vw,40px);}
  .zjja-bn__d{font-size:13.5px;line-height:1.95;margin-top:14px;}
  .zjja-bn__go{margin-top:20px;padding:12px 26px;font-size:12.5px;letter-spacing:.16em;}
  .zjja-bn__wrap{padding-bottom:16px;gap:14px;}
  .zjja-bn__ar{width:34px;height:34px;}
  .zjja-bn__dot{width:26px;}

  /* 移动端一律收紧：桌面 56-100px 在这里会变成「两条字夹一大片空」 */
  .zjja-sec{padding:44px 0;}
  .zjja-vow{padding:34px 0;}
  .zjja-fig{padding:34px 0;}
  .zjja-end{padding:46px 0 52px;}

  .zjja-ch{grid-template-columns:minmax(0,1fr);gap:12px;
    margin-bottom:28px;padding-bottom:18px;}
  .zjja-ch__no{display:flex;align-items:baseline;gap:12px;}
  .zjja-ch__no b{font-size:22px;}
  .zjja-ch__no span{margin-top:0;}
  .zjja-ch__t{font-size:clamp(21px,5.6vw,27px);}
  .zjja-ch__d{font-size:13.5px;line-height:1.9;}

  .zjja-steps > li{padding:0 0 24px 36px;}
  .zjja-steps::before{left:9px;}
  .zjja-steps__n{width:19px;height:19px;font-size:10px;}
  .zjja-steps p{font-size:13px;line-height:1.9;}

  .zjja-grid3,.zjja-grid6{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .zjja-j__bd{padding:13px 14px 15px;}
  .zjja-j__t{font-size:14.5px;min-height:3em;}
  .zjja-j__d{font-size:11.5px;min-height:3.6em;}
  .zjja-j__go{font-size:11px;margin-top:9px;}
  .zjja-sp__bd{padding:14px 13px 13px;}
  .zjja-sp__t{font-size:14px;}

  .zjja-hh{grid-template-columns:82px minmax(0,1fr);gap:14px;padding:15px 0;}
  .zjja-hh__t{font-size:14.5px;}
  .zjja-hh__d{font-size:11.5px;min-height:3.5em;margin-top:6px;}

  .zjja-say{gap:26px;}
  .zjja-say blockquote{font-size:13.5px;line-height:1.95;padding-left:18px;}
  .zjja-say__by{padding-left:18px;}

  .zjja-read{grid-template-columns:minmax(0,1fr);gap:26px;}
  .zjja-ar__i a{padding:11px 0;gap:10px;}
  .zjja-ar__t{font-size:13px;}

  .zjja-sn{margin-top:34px;padding-top:26px;}
  .zjja-sn__l{gap:20px 18px;}
  .zjja-sn__l b{font-size:26px;}
  .zjja-sn__l p{font-size:12px;margin-top:9px;line-height:1.85;}

  .zjja-note{margin-top:20px;padding:13px 15px;font-size:12.5px;line-height:1.85;}
  .zjja-end__in h2{font-size:clamp(21px,5.8vw,28px);}
  .zjja-end__in > p{font-size:13.5px;line-height:1.95;}
  .zjja-end__act{gap:14px;}
  .zjja-end__go{padding:12px 28px;font-size:13px;}
}

@media (max-width:520px){
  .zjja-bn{height:clamp(410px,58vh,540px);}
  .zjja-grid3,.zjja-grid6{grid-template-columns:minmax(0,1fr);gap:14px;}
  .zjja-j__ph{aspect-ratio:16/10;}
  .zjja-sp{aspect-ratio:16/10;}
  .zjja-vow__l{grid-template-columns:minmax(0,1fr);gap:0;}
  .zjja-vow__l > li{padding:16px 0;border-left:0;border-top:1px solid var(--pg-line);}
  .zjja-vow__l > li:first-child{padding-top:0;border-top:0;}
  .zjja-fig__l{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 0;}
  .zjja-sn__l{grid-template-columns:minmax(0,1fr);gap:0;}
  .zjja-sn__l > li{padding:14px 0;border-top:1px solid var(--pg-line);}
  .zjja-sn__l > li:first-child{padding-top:0;border-top:0;}
  .zjja-sn__l b{font-size:24px;}
  .zjja-sn__l p{margin-top:7px;}
}

/* 移动端补两处：样张表格在 390 宽下三列会互相挤，
   数字带两行文字换行数不同导致四格底边不齐 */
@media (max-width:760px){
  .zjja-spec{padding:18px 16px 16px;}
  .zjja-spec th{font-size:9px;letter-spacing:.14em;padding:9px 0 8px;}
  .zjja-spec th:first-child{width:26px;}
  .zjja-spec th:last-child{width:44px;}
  .zjja-spec td{font-size:12px;padding-top:13px;}
  .zjja-spec td:first-child{width:26px;font-size:10px;padding-top:15px;}
  .zjja-spec td b{font-size:13px;}
  .zjja-spec td span{font-size:11px;margin-top:4px;line-height:1.75;}
  .zjja-spec td:last-child{font-size:11px;padding:15px 0 0 8px;}
  .zjja-spec__f{font-size:11.5px;margin-top:15px;padding-top:12px;}
  .zjja-steps p{line-height:1.95;}
  /* 四格文字长短不一，短的只占一行，两列就错开半行；锁两行高就齐了 */
  .zjja-fig__l > li span{min-height:3em;}
}

/* ==========================================================================
   21f · v14 精修层（2026-11-01）
   --------------------------------------------------------------------------
   v13 已经把「画面占地方、内容变密、动要看得见」三件事做完了。
   这一版解决的是剩下那一层：动得太「平均」。

     v13 的所有东西都是淡入 —— 图淡入、字淡入、卡淡入。
     淡入是最省事的动效，也是最没有性格的：它不告诉眼睛先去哪儿。
     v14 把「淡入」换成「揭开」「推上来」「长出来」三种不同的动作，
     让首屏、标题、卡片各有各的出场方式，页面就有了节奏。

   ① 首屏：转场改自下而上揭开（替代交叉淡入）—— 见上面 21a。
   ② 标题：逐行往上推（.zjja-ln）。
   ③ 景点：一大五小的杂志拼接（替代等分六宫格）。
   ④ 卡片 hover：底部金线从左长出来（替代整块底色）。
   ⑤ 图片视差：随滚动上下挪 6%，由 JS 写 transform。
   ⑥ 右侧章节锚点：滚到哪一章哪一个亮。
   ⑦ 深色带加一层极淡纸纹，去掉塑料感。
   ========================================================================== */

/* -- ② 标题逐行往上推 --------------------------------------------------- */
/* 每行外面套一层 overflow:hidden 的壳，里面的字从壳外面升进来。
   这是印刷品标题页与网页 banner 最直观的差别 —— 字是「被推上来」的，
   不是「浮出来」的。
   padding/margin 那两行是补偿：overflow:hidden 会连中文的下伸部分
   （如「，」和部分字的末笔）一起裁掉，往下留一点再负回来。 */
.zjja-ln{display:block;overflow:hidden;
  padding-bottom:.14em;margin-bottom:-.14em;}
.zjja-ln i{display:block;font-style:normal;font-weight:inherit;
  transform:translateY(115%);
  transition:transform .95s var(--pg-ease);}
.zjja-ln:nth-child(2) i{transition-delay:.13s;}
.zjja-ln:nth-child(3) i{transition-delay:.26s;}

/* 首屏：跟着 is-on 走 */
.zjja-bn__i.is-on .zjja-ln i{transform:none;}
/* 章节头与末区：跟着进场淡入的 is-in 走 */
.zjja-rv.is-in .zjja-ln i{transform:none;}
/* 没跑 JS 的情况：.zjja-rv 类根本不会加上，i 也就一直是 translateY(115%)
   —— 字会看不见！所以这里兜底：只要祖先没有 .zjja-rv，就归位。 */
.zjja-ch__t .zjja-ln i,.zjja-end__in .zjja-ln i{transform:none;}
.zjja-rv .zjja-ln i{transform:translateY(115%);}
.zjja-rv.is-in .zjja-ln i{transform:none;}

/* 线路卡的 ::after 金线要定位，补一句 */
.zjja-j{position:relative;}

/* -- 向下浏览提示 ------------------------------------------------------- */
/* 首屏右下角竖排「向下 + 一条会往下流的细线」。
   它不承载信息，只负责说「下面还有」——首屏占满一屏之后，
   没有这个提示，很多人不知道该滚。 */
/* 原来写 right:var(--gutter)，可 gutter 是 48、版心右缘在 128，
   两者差 80px —— 这个提示就孤零零地飘在版心外面，看着像没排过版。
   套一层与 .zjja-bn__c 同宽同 padding 的容器，它自然就落在版心右缘上了。 */
.zjja-bn__scw{position:absolute;z-index:5;left:0;right:0;
  bottom:clamp(58px,7vh,96px);max-width:var(--wrap);margin:0 auto;
  padding:0 var(--gutter);pointer-events:none;}
.zjja-bn__sc{margin-left:auto;display:flex;flex-direction:column;
  align-items:center;gap:11px;color:rgba(247,243,230,.78);
  text-decoration:none;pointer-events:auto;
  transition:color .3s var(--pg-ease);}
.zjja-bn__sc:hover{color:#F5F0E0;}
.zjja-bn__sc span{font-family:var(--ff-display);font-size:10.5px;
  letter-spacing:.24em;writing-mode:vertical-rl;text-orientation:upright;
  text-shadow:0 1px 12px rgba(5,9,7,.9);}
.zjja-bn__sc i{position:relative;display:block;width:1px;height:46px;
  background:rgba(247,243,230,.26);overflow:hidden;}
.zjja-bn__sc i::after{content:"";position:absolute;left:0;top:0;width:1px;height:16px;
  background:var(--pg-gold-2);animation:zjjasc 2.1s var(--pg-ease) infinite;}
@keyframes zjjasc{
  0%{transform:translateY(-16px)}
  60%,100%{transform:translateY(46px)}}

/* -- ⑥ 右侧章节锚点 ----------------------------------------------------- */
/* 桌面才出现（移动端隐藏在下面）。
   六个点竖排，当前章节那个变金并拉长，hover 时文字从右往左滑出来。
   固定在视口右侧 —— 客人任何时候都知道自己在哪一章。 */
.zjja-dotnav{position:fixed;z-index:60;right:clamp(14px,2vw,30px);top:50%;
  transform:translateY(-50%);display:flex;flex-direction:column;gap:15px;}
.zjja-dotnav a{position:relative;display:flex;align-items:center;
  justify-content:flex-end;gap:10px;height:14px;text-decoration:none;}
.zjja-dotnav i{flex:0 0 auto;display:block;width:7px;height:7px;border-radius:50%;
  background:rgba(20,32,28,.3);box-shadow:0 0 0 3px rgba(251,250,245,.72);
  transition:background .35s var(--pg-ease),transform .35s var(--pg-ease);}
.zjja-dotnav span{position:absolute;right:20px;top:50%;transform:translate(8px,-50%);
  white-space:nowrap;font-family:var(--ff-display);font-size:11px;
  letter-spacing:.14em;line-height:1;padding:4px 10px;
  background:rgba(20,32,28,.92);color:#F5F0E0;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--pg-ease),transform .3s var(--pg-ease);}
.zjja-dotnav a:hover span{opacity:1;transform:translate(0,-50%);}
.zjja-dotnav a.is-cur i{background:var(--pg-gold);transform:scale(1.35);}

/* -- ⑦ 深色带的极淡纸纹 ------------------------------------------------- */
/* 纯色深墨块放大了看是「塑料」的。3% 的中性噪点铺上去之后，
   单看是脏，去掉又立刻觉得平 —— 这是印刷品和网页色块的分界。 */
.zjja-fig,.zjja-end{position:relative;}
.zjja-fig::after,.zjja-end::after{content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  background-size:140px 140px;}
.zjja-fig > *,.zjja-end > *{position:relative;z-index:1;}

/* -- ⑧ 章节头：编号左侧加一道短金线 ------------------------------------- */
/* 原来「壹」孤零零站在左栏，跟右边的标题没联系。
   加一道 18px 的短金线，编号就成了标题的起笔。 */
.zjja-ch__no{position:relative;padding-left:15px;}
.zjja-ch__no::before{content:"";position:absolute;left:0;top:.34em;width:9px;
  height:1px;background:var(--pg-gold);}

/* -- ⑨ 尊重系统「减少动态效果」：补上新加的三种 ------------------------- */
@media (prefers-reduced-motion:reduce){
  .zjja-bn__i.is-on{animation:none;clip-path:inset(0 0 0 0);}
  .zjja-bn__i{clip-path:inset(0 0 0 0);transition:none;}
  .zjja-ln i,.zjja-rv .zjja-ln i{transform:none;transition:none;}
  .zjja-bn__sc i::after{animation:none;transform:translateY(15px);}
}

/* -- ⑩ 响应式收口 ------------------------------------------------------- */
/* 1180 以下：马赛克会变成「一张占满两列 + 五张挤在下面」，
   反而更乱，退回到等分三列并恢复比例 */
@media (max-width:1180px){
  .zjja-grid6{grid-auto-rows:auto;}
  .zjja-sp:first-child{grid-column:span 1;grid-row:span 1;}
  .zjja-sp{aspect-ratio:4/3;}
  .zjja-dotnav{display:none;}
}
@media (max-width:980px){
  .zjja-bn__sc{display:none;}
}
@media (max-width:760px){
  .zjja-ch__no{padding-left:13px;}
  .zjja-ch__no::before{top:.5em;}
  .zjja-say__ph img,.zjja-hh__ph img,.zjja-sp img{transform:scale(1.04) !important;}
}

/* -- ⑪ v14.1 排印层：消掉「孤字」与数字抖动 --------------------------- */
/* 中文段落末行只剩两三个字（排印上叫「孤字」），是廉价感的一大来源：
   视线落在最后一行时，前面会空出一大片白。
   text-wrap:pretty 让浏览器重新分配断行，把末行留住合理的长度。
   老浏览器不认这条声明会直接忽略 —— 无副作用，放心用。
   两行一起写：balance 能把两行段落均分（孤字必消），但它只对短段落生效、
   且只管「等长」不管断行位置好不好的地方由 pretty 兜住；
   两条都不认的老浏览器就按原始断行显示，不会坏。 */
.zjja-bn__d,
.zjja-ch__d,
.zjja-steps li p,
.zjja-note,
.zjja-spec__f,
.zjja-vow__l p,
.zjja-say blockquote,
.zjja-sn__l p,
.zjja-end__in > p{
  text-wrap:pretty;
  text-wrap:balance;
}

/* 数字带里的数字是从 0 滚上去的，1 位变 2 位、每位字宽不同都会左右抖。
   tabular-nums 让 0-9 占同样的宽度，滚动过程才稳得住。 */
.zjja-fig__l b{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ==========================================================================
   21g · v15（全宽引言带 / 行程手风琴 / 费用构成 / 动效增强）
   --------------------------------------------------------------------------
   本页令牌挂在 .zjja 上（不是 :root），所以这里一律用 --pg-* 那一组，
   不要写 --gold / --ink —— 那组是内页的，取值不同。
   ========================================================================== */

/* -- ① 全宽引言带：出血到屏幕两端，把一路浅色卡片的节奏断开 ----------- */
.zjja-quote{
  position:relative;overflow:hidden;background:var(--pg-deep);
  isolation:isolate;
}
/* 上下各多留 6%，给视差留位移空间，免得图片边缘露出底色 */
.zjja-quote__ph{position:absolute;left:0;right:0;top:-6%;bottom:-6%;z-index:1;}
.zjja-quote__ph img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:brightness(.44) saturate(.92);
  opacity:0;transition:opacity 1s ease,filter 1s ease;
}
.zjja-quote__ph img.is-ld{opacity:1;}
/* 左重右轻的斜向遮罩：字在左，右边留一点画面透出来 */
.zjja-quote::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(100deg,
    rgba(10,20,16,.86) 0%,rgba(10,20,16,.58) 48%,rgba(10,20,16,.26) 100%);
}
.zjja-quote__in{position:relative;z-index:3;padding:clamp(64px,9vw,126px) 0;}
.zjja-quote__k{
  margin:0 0 16px;font-family:var(--ff-num);font-size:var(--fs-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--pg-gold);
}
.zjja-quote__k span{margin-right:12px;}
.zjja-quote__t{
  margin:0;font-family:var(--ff-display);font-weight:500;
  font-size:clamp(26px,3.4vw,44px);line-height:var(--lh-title);
  color:#fff;letter-spacing:.012em;max-width:22em;
}
.zjja-quote__d{
  margin:20px 0 0;max-width:34em;font-size:var(--fs-body);
  line-height:1.92;color:rgba(255,255,255,.76);
}

/* -- ② 行程手风琴：点开哪天看哪天，一次只开一天 ------------------------ */
.zjja-acc{
  border:1px solid var(--pg-line);border-radius:var(--r-md);
  background:#fff;padding:0 22px 20px;
}
.zjja-acc__h{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:18px 0 14px;border-bottom:1px solid var(--pg-line);
}
.zjja-acc__h b{
  font-family:var(--ff-display);font-size:16px;font-weight:600;
  color:var(--pg-ink);letter-spacing:.02em;
}
.zjja-acc__h i{font-style:normal;font-size:var(--fs-xs);color:var(--pg-ink-3);}
.zjja-acc__i{border-bottom:1px solid var(--pg-line);}
.zjja-acc__i:last-of-type{border-bottom:0;}
.zjja-acc__q{
  width:100%;display:flex;align-items:center;gap:14px;padding:15px 0;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;color:inherit;-webkit-appearance:none;appearance:none;
}
.zjja-acc__d{
  flex:0 0 auto;width:34px;font-family:var(--ff-num);
  font-size:var(--fs-xs);letter-spacing:.08em;color:var(--pg-gold);
}
.zjja-acc__t{
  flex:1 1 auto;font-family:var(--ff-display);font-size:16.5px;
  font-weight:500;color:var(--pg-ink);transition:color .3s ease;
}
.zjja-acc__x{flex:0 0 auto;position:relative;width:13px;height:13px;}
.zjja-acc__x::before,.zjja-acc__x::after{
  content:"";position:absolute;left:0;top:6px;width:13px;height:1px;
  background:var(--pg-ink-3);
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
}
.zjja-acc__x::after{transform:rotate(90deg);}
.zjja-acc__i.is-open .zjja-acc__x::after{transform:rotate(0deg);}
.zjja-acc__i.is-open .zjja-acc__t{color:var(--pg-gold);}
/* max-height 给得比内容高一截：中文短段落撑不到 340px，
   给足就不会出现「展开一半被截断」 */
.zjja-acc__a{max-height:0;overflow:hidden;
  transition:max-height .45s cubic-bezier(.22,.61,.36,1);}
.zjja-acc__i.is-open .zjja-acc__a{max-height:340px;}
.zjja-acc__p{padding:0 0 18px 48px;}
.zjja-acc__p p{margin:0;font-size:var(--fs-sm);line-height:1.88;color:var(--pg-ink-2);}
.zjja-acc__s{
  display:inline-block;margin-top:10px;font-size:var(--fs-xs);
  color:var(--pg-ink-3);letter-spacing:.05em;
}
.zjja-acc__f{margin:16px 0 0;font-size:var(--fs-xs);line-height:1.85;color:var(--pg-ink-3);}
.zjja-acc__m{margin:8px 0 0;font-size:var(--fs-xs);color:var(--pg-gold);letter-spacing:.04em;}

/* -- ③ 费用构成：条形滚进视口才从左长出来 ------------------------------ */
.zjja-fee__hd{max-width:760px;margin:0 0 clamp(32px,4vw,48px);}
.zjja-fee__l{list-style:none;margin:0;padding:0;display:grid;gap:20px;}
.zjja-fee__l > li{
  display:grid;grid-template-columns:132px minmax(0,1fr) 78px;
  align-items:center;gap:18px;
}
.zjja-fee__l b{
  font-family:var(--ff-display);font-size:16px;font-weight:500;
  color:var(--pg-ink);
}
.zjja-fee__bar{
  position:relative;height:7px;border-radius:var(--r-pill);
  background:var(--pg-paper-3);overflow:hidden;
}
.zjja-fee__bar i{
  display:block;height:100%;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--pg-gold) 0%,var(--pg-gold-2) 100%);
  transition:width 1.15s cubic-bezier(.22,.61,.36,1);
}
/* width 由 li 上的内联 --w 给（38% / 27% / 21% / 14%）。
   ★ 挂在 .zjja-rv.is-in 上而不是 .zjja-fee__l.is-in：
     每条 li 本来就在淡入列表里，跟着它长出来就不用再开一个 observer，
     而且错峰 70ms 会让四条依次长出来，比四条一起长好看。
     no-js 时没有 zjja-rv，条形要直接到位，不能留成空的。 */
.zjja-rv.is-in .zjja-fee__bar i{width:var(--w);}
.no-js .zjja-fee__bar i{width:var(--w);}
.zjja-fee__l em{
  font-style:normal;font-family:var(--ff-num);font-size:var(--fs-sm);
  color:var(--pg-ink-2);text-align:right;font-variant-numeric:tabular-nums;
}

/* -- ④ 动效增强 -------------------------------------------------------- */

/* 图片进场：没加载完压暗，加载完自己亮起来。
   ★ hover 提亮必须写在后面且权重更高（.zjja-sp:hover img.is-ld = 0,3,1），
     否则会被下面这条 .is-ld{filter:none}（0,2,1）盖掉。 */
.zjja-sp img,.zjja-say__ph img,.zjja-hh__ph img{
  filter:brightness(.82) saturate(.9);
  transition:filter .9s ease,opacity .6s ease;
}
.zjja-sp img.is-ld,.zjja-say__ph img.is-ld,.zjja-hh__ph img.is-ld{filter:none;}
.zjja-sp:hover img.is-ld{filter:brightness(1.07);}
.zjja-say__ph:hover img.is-ld{filter:brightness(1.07);}
.zjja-hh:hover img.is-ld{filter:brightness(1.07);}

/* 章节编号那道短金线：滚到才画出来，不是一开始就在那儿 */
.zjja-ch__no::before{
  width:0;transition:width .75s cubic-bezier(.22,.61,.36,1) .1s;
}
.zjja-rv.is-in .zjja-ch__no::before{width:9px;}
/* JS 没跑时（html 还是 no-js）不该把装饰藏起来 */
.no-js .zjja-ch__no::before{width:9px;}

/* 服务标准图标：hover 抬 4px 并转金 */
.zjja-vow__ic{transition:transform .4s cubic-bezier(.22,.61,.36,1);}
.zjja-vow__l li:hover .zjja-vow__ic{transform:translateY(-4px);}
.zjja-vow__ic svg{transition:stroke .4s ease;}
.zjja-vow__l li:hover .zjja-vow__ic svg{stroke:var(--pg-gold-2);}

/* -- ⑤ 响应式收口 ------------------------------------------------------ */
@media (max-width:980px){
  .zjja-quote__in{padding:64px 0;}
}
@media (max-width:760px){
  .zjja-quote__in{padding:52px 0;}
  .zjja-quote__t{max-width:none;}
  .zjja-acc{padding:0 16px 16px;}
  .zjja-acc__p{padding-left:0;}
  .zjja-acc__i.is-open .zjja-acc__a{max-height:420px;}
  .zjja-fee__l > li{grid-template-columns:96px minmax(0,1fr) 58px;gap:12px;}
  .zjja-fee__l b{font-size:14.5px;}
}

/* -- ⑥ 尊重系统「减少动态效果」 ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .zjja-acc__a,.zjja-fee__bar i,.zjja-ch__no::before{transition:none;}
  .zjja-quote__ph img{transition:none;}
}

/* ==========================================================================
   22b 悬浮条 / 移动底条 / 弹窗 v2 覆盖层
   --------------------------------------------------------------------------
   这些规则必须放在文件最末尾：第 10 块里有 v1 的同名类，
   同权重下"后定义的赢"，所以这里才是真正生效的那一份。
   ★ 以后调悬浮条/弹窗，改这里，别回头改第 10 块。
   ========================================================================== */

/* ==========================================================================
   06b 悬浮条 / 移动底条 v2 · 细、深、无圆角
   （v1 的同类规则在 10 块里，这里靠"后定义"覆盖，别再回头改 10 块）
   ========================================================================== */
.zjja-float{position:fixed;right:18px;bottom:120px;z-index:var(--z-float);
  display:flex;flex-direction:column;gap:0;border:1px solid rgba(169,138,85,.34);
  background:rgba(10,20,16,.94);border-radius:0;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.zjja-float__b{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;width:54px;height:auto;padding:13px 0;background:transparent;
  color:rgba(242,237,224,.86);border:0;border-top:1px solid rgba(239,234,221,.1);border-radius:0;
  transition:background .24s,color .24s;}
.zjja-float__b:first-child{border-top:0;}
.zjja-float__b:hover{background:rgba(169,138,85,.16);color:var(--gold-2);}
.zjja-float__ic{display:flex;align-items:center;justify-content:center;height:21px;}
.zjja-float__ic svg{fill:currentColor;}
.zjja-float__lb{font-size:10px;letter-spacing:.1em;line-height:1;}
.zjja-float__b--diy{background:rgba(169,138,85,.14);color:var(--gold-2);}
.zjja-float__qr{position:absolute;right:100%;top:50%;transform:translate(8px,-50%) scale(.97);
  width:196px;padding:16px;background:var(--paper);color:var(--ink-2);text-align:center;
  box-shadow:0 22px 54px -26px rgba(20,25,21,.45);opacity:0;visibility:hidden;
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;}
.zjja-float__b--wx:hover .zjja-float__qr{opacity:1;visibility:visible;transform:translate(0,-50%) scale(1);}
.zjja-float__qr b{display:block;font-size:12px;letter-spacing:.06em;color:var(--ink);}
.zjja-float__qr img{width:150px;height:150px;margin:10px auto 8px;display:block;background:#fff;}
.zjja-float__qr small{display:block;font-size:11px;line-height:1.8;color:var(--ink-3);}

.zjja-mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-float);
  background:rgba(10,20,16,.97);border:0;border-top:1px solid rgba(169,138,85,.3);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding-bottom:env(safe-area-inset-bottom);}
.zjja-mbar__in{display:grid;grid-template-columns:repeat(4,1fr);}
.zjja-mbar__in a{display:flex;align-items:center;justify-content:center;gap:6px;height:52px;
  font-size:12.5px;letter-spacing:.06em;color:rgba(242,237,224,.72);}
.zjja-mbar__in a.hot{color:var(--gold-2);}
.zjja-mbar__in a.hot svg{width:15px;height:15px;fill:currentColor;}

/* ==========================================================================
   05b 响应式：页头在 1180 / 900 两档收
   ========================================================================== */
@media(max-width:1180px){
  .zjja-hd__tel{display:none;}
  .zjja-nav{gap:clamp(10px,1.5vw,22px);}
  .zjja-nav__a{font-size:13.5px;}
  .zjja-ft__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;}
  .zjja-ft__brand{grid-column:1/-1;}
}
@media(max-width:900px){
  .zjja-top{display:none;}
  .zjja-hd__in{height:64px;gap:12px;}
  .zjja-lg__m{width:30px;height:30px;}
  .zjja-lg__t b{font-size:16.5px;}
  .zjja-lg__t i{font-size:8px;letter-spacing:.2em;margin-top:5px;}
  .zjja-hd__r{display:none;}
  .zjja-bg{display:flex;}
  .zjja-nav{position:fixed;top:64px;left:0;right:0;bottom:0;margin:0;padding:10px 20px 40px;
    display:block;background:var(--paper);overflow-y:auto;z-index:var(--z-hd);
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;}
  .zjja-nav.is-open{transform:none;opacity:1;visibility:visible;}
  .zjja-nav__li{border-bottom:1px solid var(--hair);}
  .zjja-nav__a{padding:16px 0;font-size:15.5px;color:var(--ink);}
  .zjja-nav__a::after{display:none;}
  .zjja-nav__sub{position:static;transform:none;opacity:1;visibility:visible;min-width:0;
    padding:0 0 12px;border:0;box-shadow:none;background:none;}
  .zjja-nav__sub--wide{min-width:0;padding:0 0 12px;}
  .zjja-nav__sub--wide ul{grid-template-columns:1fr 1fr;gap:0;}
  .zjja-nav__sub a{padding:8px 0;font-size:13.5px;color:var(--ink-3);}
  .zjja-ft__top{grid-template-columns:1fr 1fr;gap:30px 22px;}
  .zjja-ft__slogan{font-size:22px;}
  .zjja-ft__btm{flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:76px;}
  .zjja-ft__lic{flex-wrap:wrap;gap:6px 0;}
  .zjja-float{display:none;}
  .zjja-mbar{display:block;}
}
@media(max-width:560px){
  .zjja-ft__top{grid-template-columns:1fr;gap:26px;}
  .zjja-ft__qr img{width:68px;height:68px;}
}