/* ============================================
   WAYON 未迩 - 全站样式
   基于 .xd 设计稿:英文 Poppins + 中文 AlibabaPuHuiTi
   ============================================ */

@font-face{
  font-family:'AlibabaPuHuiTi';
  src:url('../fonts/AlibabaPuHuiTi-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'AlibabaPuHuiTi';
  src:url('../fonts/AlibabaPuHuiTi-Light.ttf') format('truetype');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'AlibabaPuHuiTi';
  src:url('../fonts/AlibabaPuHuiTi-Medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'AlibabaPuHuiTi';
  src:url('../fonts/AlibabaPuHuiTi-SemiBold.ttf') format('truetype');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'AlibabaPuHuiTi';
  src:url('../fonts/AlibabaPuHuiTi-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('../fonts/Poppins-Medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}

/* ---------- 颜色变量 ---------- */
:root{
  --color-primary: #046bd2;
  --color-primary-dark: #045cb4;
  --color-dark: #1e293b;
  --color-text: #334155;
  --color-white: #ffffff;
  --color-bg: #F0F5FA;
  --color-black: #111111;
  --color-gray: #D1D5DB;
  --color-mint: #afe6d4;
  --color-cream: #f5f1ea;
  --color-warm: #e8e2d5;
  /* ----- 设计稿品牌色 (从 logo.png 实际取色) ----- */
  --color-brand: #bd4b16;           /* 橙主色 — logo 顶部橙 */
  --color-brand-dark: #9a3d12;       /* 橙 hover/暗色 */
  --color-brand-light: #d96a3e;      /* 橙浅/hover bg */
  --color-accent-mint: #33b481;      /* 薄荷绿 — logo 底部绿 + 字母图,地图 hover/active 加深 */
  --color-accent-cream: #F5F1EA;    /* 米白底色 */
  --color-accent-dark: #2A2520;     /* 深色文字(温暖黑) */
  /* ----- .xd 设计稿灰阶(灰背景白字 + 浅灰占位) ----- */
  --color-text-muted-2: #6D6D6D;     /* .xd Regular 18-20px 灰(keepers bio / travelogue meta) */
  --color-text-muted-3: #727272;     /* .xd 省份描述 19px 灰 */
  --color-text-placeholder: #DDDDDD; /* .xd Light "Explore All Destinations" 等浅灰占位 */
  --font-display: 'Poppins', 'AlibabaPuHuiTi', sans-serif;
  --font-heading: 'Poppins', 'AlibabaPuHuiTi', sans-serif;
  --font-body: 'Poppins', 'AlibabaPuHuiTi', sans-serif;
  --font-serif: 'Poppins', 'AlibabaPuHuiTi', sans-serif;
  --font-cn: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --container-max: 1240px;
  --page-gutter: max(24px, 7.5vw);
  --home-gutter: var(--page-gutter);
  --home-section-y: max(88px, 9.6vw);
  /* 2026-08-02 新增:header 内部统一间距(logo → 第一按钮 = 六个按钮之间的间距)
     保证这六段距离始终相等 */
  --nav-item-gap: clamp(16px, 1.6vw, 36px);
}

/* 中文页面用中文优先字体 */
:lang(zh), body.lang-zh, body.lang-en :lang(zh){
  font-family: var(--font-cn);
}

/* ============================================
   设计稿 Section 通用样式 (THE WAYON METHOD 风格)
   ============================================ */
.eyebrow-pill{
  display:inline-block;
  background:var(--color-brand);
  color:#fff;
  font-family:var(--font-display);
  font-size:max(14px, 0.729vw);
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:10px 22px;
  border-radius:999px;
  font-weight:400;
}
.eyebrow-pill--outline{
  background:transparent;
  color:var(--color-brand);
  border:1.5px solid var(--color-brand);
}
.section-display-title{
  font-family:var(--font-display);
  font-size:max(40px, 6vw);
  line-height:.95;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--color-brand);
  font-weight:400;
  margin:18px 0 18px;
}
.section-display-title .accent{ color:var(--color-dark); }
.section-lede{
  font-family:var(--font-serif);
  font-size:max(17px, 0.885vw);
  line-height:1.7;
  color:var(--color-text);
  max-width:max(680px, 35.417vw);
  margin:0 auto;
}
.section-divider{
  width:60px;height:2px;background:var(--color-brand);
  margin:24px auto;
}
/* 绿色括号装饰容器(由 PNG 包裹) */
.bracket-frame{
  position:relative;
  padding:60px 50px;
}
.bracket-frame::before,
.bracket-frame::after{
  content:"";
  position:absolute;
  top:0;
  width:48px;
  height:100%;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}
.bracket-frame::before{
  left:0;
  background-image:url('../images/design/method/bracket-left.png');
}
.bracket-frame::after{
  right:0;
  background-image:url('../images/design/method/bracket-right.png');
}
/* THE WAYON METHOD — 外层 wrapper(背景薄荷绿,内 .method-full-wrap 包整张 PNG)
   NJK: <section class="the-wayon-method"><div class="method-full-wrap"><img class="method-full-img"></div></section> */
.the-wayon-method{
  /* 2026-07-13 改:用户要求水平方向拉满 → 去掉 max-width:1480 + 横向 padding
     改 width:100% 让 outer 容器满铺 100vw,内部 .method-full-img 也满铺 */
  width:100%;
  margin:0;
  padding:0;
  background:#fff;             /* 改白底(原 mint 底是给 1480 居中用的,现拉满后不需要) */
}
/* 内层 wrap:让 img 在外层 100% 宽里直接展示,不加任何居中或约束 */
.method-full-wrap{
  display:block;
  width:100%;
}
.method-full-img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;            /* 去掉任何 1480px 上限,让图真正水平拉满到 100vw */
}
/* 旧 .container{max-width:1480;padding:0 32;margin:0 auto} 在 NJK 未引用,已合并到 .the-wayon-method 主类 */
.the-wayon-method .method-layout{
  display:grid;
  grid-template-columns:1fr 2.5fr;
  gap:80px;
  align-items:center;
}
.method-title-block{display:flex;align-items:center}
.method-display-title{
  font-family:var(--font-display);
  font-size:max(38px, 5vw);
  line-height:1.1;
  font-weight:800;
  text-transform:uppercase;
  color:var(--color-brand);
  margin:0;
  letter-spacing:0.005em;
}
.method-cards{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.method-card{
  border:2px solid var(--color-brand);
  border-radius:14px;
  padding:28px 22px;
  text-align:center;
  color:var(--color-brand);
  background:transparent;
  transition:all .3s ease;
}
.method-card:hover{
  background:var(--color-brand);
  color:#fff;
  transform:translateY(-4px);
}
.method-card__icon{
  width:64px;height:64px;
  margin:0 auto 14px;
}
.method-card__icon svg{
  width:100%;height:100%;
  stroke:currentColor;
  fill:none;
  stroke-width:3;
}
.method-card__title{
  font-family:var(--font-display);
  font-size:max(18px, 0.938vw);
  font-weight:700;
  color:inherit;
  margin:0 0 10px;
  letter-spacing:0.01em;
}
.method-card__dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin:8px 0 14px;
}
.method-card__dots span{
  width:8px;height:8px;border-radius:50%;
  background:currentColor;
}
.method-card__desc{
  font-family:var(--font-display);
  font-size:max(13px, 0.677vw);
  font-weight:500;
  line-height:1.55;
  color:inherit;
  margin:0;
}
@media (max-width:1024px){
  .the-wayon-method .method-layout{grid-template-columns:1fr;gap:40px}
  .method-cards{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:600px){
  .method-cards{grid-template-columns:1fr}
}

/* Section 通用 header(eyebrow pill + display title + lede 居中) */
.section-header{
  text-align:center;
  margin-bottom:60px;
}
.section-header .eyebrow-pill{
  display:inline-block;
  margin-bottom:18px;
}

/* Cultural Entries section 设计稿:橙色 eyebrow + 大写 display title + 6 张真实文化照片
   2026-07-14 清理:以下旧规则已废弃 ——
     - 旧 .cultural-entries 容器 padding(100px 0 80px)
     - 旧 .section-header / .entry-grid / .entry-card / .entry-icon / .entry-card h3/.divider/p
     - 旧 @media 900px/520px 对 .entry-grid 的 fallback
   现行 NJK 用 .entries-intro(印花头) + .entries-mosaic(6 张 tile) 结构,
   对应 CSS 在 §6 块(行 1547 起)。此处只留 .cultural-entries 最小容器定义。
   .cultural-entries 主定义见 §6 块(行 1532 起)。 */

/* ============================================
   9. 旅行日志 (Travelogue) — 0713 原款设计
   ============================================ */
/* 旧 .container{max-width:1480;padding:0 32;margin:0 auto} 在 NJK 未引用,已合并到 .home-travelogue 主类 */
.home-travelogue{
  /* 2026-07-16 改:TRAVELOGUE → 地图间距增大 ——
     旧 48/48 → 新 48/96(底部 padding 翻倍),用户要求"间距增大一点"
     .china-map-section padding:0,所以实际间距 = 96px */
  padding:48px 0 96px;
  background:#fff;
}
.home-travelogue .container{max-width:none;padding:0 var(--home-gutter);margin:0 auto}
.travelogue-header{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:40px;
  margin-bottom:60px;
}
.travelogue-header-left{ max-width:max(780px, 40.625vw) }
.travelogue-pill{
  display:inline-block;
  background:var(--color-brand);
  color:#fff;
  font-family:var(--font-display);
  /* .xd "TRAVELOGUE" pill 25 / 1920 = 1.3vw, min 13, max 32 */
  font-size:max(13px, 1.3vw);
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding:clamp(8px, 0.6vw, 14px) clamp(20px, 1.4vw, 30px);
  border-radius:999px;
  margin-bottom:18px;
}
.travelogue-title{
  font-family:var(--font-display);
  /* .xd "Stories from the field." 60 ExtraBold / 1920 = 3.1vw, min 28, max 120(4K 等比) */
  font-size:max(28px, 3.1vw);
  line-height:1.1;
  font-weight:800;                   /* .xd ExtraBold (800) */
  color:var(--color-brand);
  text-transform:uppercase;
  margin:0 0 18px;
  letter-spacing:0.005em;
}
.travelogue-desc{
  font-family:var(--font-display);
  /* .xd "Essays, interviews..." 21 Medium / 1920 = 1.1vw, min 13, max 28 */
  font-size:max(13px, 1.1vw);
  font-weight:500;
  line-height:1.55;
  color:var(--color-brand);
  margin:0;
  max-width:max(620px, 32.292vw);
}
/* 0713 原款:.travelogue-search 是 View All Stories 胶囊链接 */
.travelogue-search{
  display:inline-flex;
  align-items:center;
  gap:max(8px, 0.6vw);
  padding:max(8px, 0.8vw) max(16px, 1.4vw);
  border:1.5px solid var(--color-accent-mint);
  border-radius:999px;
  color:var(--color-accent-mint);
  font-family:var(--font-display);
  font-size:max(12px, 0.95vw);
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:all .25s ease;
  text-decoration:none;
  flex-shrink:0;
}
.travelogue-search:hover{
  background:var(--color-accent-mint);
  color:#fff;
}
.travelogue-search svg{ flex-shrink:0; }
.travelogue-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:clamp(8px, 1.4vw, 18px);
}
.travelogue-card{
  display:block;
  position:relative;
  background:#000;
  /* 2026-09-06 改:首页 travelogue 改为 <button> 后,补齐 button 默认样式重置,
     与二级页 .travelogue-list-cell 的 cursor:pointer / border:0 / padding:0 / font:inherit 对齐。 */
  border:0;
  border-radius:0;
  padding:0;
  font:inherit;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  /* 2026-07-16 改:用户要求图比例 326×534(portrait,≈0.6105)——
     原 3/4 (=0.75) 偏 landscape,跟 design 期望的纵向人物/场景图不符 */
  aspect-ratio:326/534;
}
/* 0713 原款:卡片底部 info (hover 显示:橙线 + 地名 + 描述) */
.travelogue-info{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(14px, 1.4vw, 22px) clamp(12px, 1.1vw, 18px);
  background:linear-gradient(180deg, transparent 0%, transparent 40%, rgba(0,0,0,0.6) 100%);
  color:#fff;
  opacity:0;
  transition:opacity .25s ease;
}
.travelogue-card:hover .travelogue-info{ opacity:1 }
.travelogue-divider{
  display:block;
  width:max(28px, 2.2vw);
  height:1.5px;
  background:var(--color-brand);
  margin:0 0 max(6px, 0.5vw);
  flex-shrink:0;
}
.travelogue-info-loc{
  font-family:var(--font-display);
  font-size:max(10px, 0.7vw);
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  opacity:0.85;
  margin-bottom:max(4px, 0.4vw);
}
.travelogue-info-desc{
  margin:0;
  font-family:var(--font-display);
  font-size:max(11px, 0.8vw);
  font-weight:400;
  line-height:1.4;
  opacity:0.85;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.travelogue-photo{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:transform .5s ease;
}
.travelogue-card:hover .travelogue-photo{transform:scale(1.06)}
/* orphaned rules removed — .travelogue-info-title and .travelogue-overlay not used by 0713 NJK */
/* 2026-07-14 改:顶部灰字变白色放到最底 ——
   pill + 大标题居中显示在 grid 5 图下方,文字色改为白色 */
.travelogue-bottom-caption{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(20px, 2.4vw, 36px) 0 0;
  gap:clamp(8px, 1vw, 14px);
}
.travelogue-bottom-pill{
  display:inline-block;
  background:#fff;
  color:var(--color-dark);
  font-family:var(--font-display);
  font-size:max(13px, 1.2vw);
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding:clamp(6px, 0.5vw, 12px) clamp(18px, 1.4vw, 26px);
  border-radius:999px;
}
.travelogue-bottom-title{
  font-family:var(--font-display);
  font-size:max(28px, 3.1vw);
  line-height:1.1;
  font-weight:800;
  color:#fff;        /* 白色文字 */
  text-transform:uppercase;
  margin:0;
  letter-spacing:0.005em;
}
@media (max-width:1024px){
  .travelogue-grid{grid-template-columns:repeat(3, 1fr)}
}
@media (max-width:600px){
  .travelogue-grid{grid-template-columns:repeat(2, 1fr)}
}

/* 通用按钮复用(首页 hero + featured CTA + travelogue CTA)
   旧的 .center-action .btn,.btn 深色基类已删除 —— .btn 基类统一见 line 948;
   .center-action .btn 绿胶囊样式见 line 1803-1818 */

/* ---------- 基础重置 ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-weight:400;
  font-size:max(16px, 0.833vw);
  line-height:1.6;
  color:var(--color-text);
  background:var(--color-white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .25s ease}
ul{list-style:none}

/* ============================================
   全站排版基础(Type system)
   ============================================ */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.15;
  letter-spacing:0.005em;
  color:var(--color-dark);
  margin:0;
}
p{margin:0 0 1em}
strong,b{font-weight:700}
button{
  font-family:inherit;
  cursor:pointer;
  border:none;
  background:none;
}
input,textarea,select{
  font-family:inherit;
  font-size:inherit;
}

/* ---------- 通用容器 ---------- */
.container{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--page-gutter);
}
.container-wide{width:100%;padding:0 24px}

/* ============================================
   1. 顶部导航栏 (Header)
   ============================================ */
.site-navbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  background:rgba(0,0,0,0.45);
  backdrop-filter:saturate(160%) blur(6px);
  -webkit-backdrop-filter:saturate(160%) blur(6px);
  transition:background .3s ease, padding .3s ease;
  padding:max(14px, 0.73vw) 0;
}
.site-navbar.is-scrolled{
  background:rgba(0,0,0,0.65);
  padding:max(10px, 0.52vw) 0;
}
/* nav-inner:2026-07-12 改用 7.5vw 锚点,跟 hero 元素同公式
   - 旧 max-width:1480 + margin auto + padding 32 → logo @ (viewport-1480)/2 + 32(跟 hero 7.5vw 不同公式)
   - 新 width:100% + padding 7.5vw → logo @ 7.5vw(跟 hero stage padding 一致,任意视口下 logo 和 hero 内容严格同 x 轴)
   trade-off:超宽屏(>1480)nav 内容撑满视口,logo 和 menu 距离变长,但 menu justify-content:center 居中后视觉协调 */
/* nav-inner:2026-08-02 改 — 固化 logo → 菜单的距离
   根因:旧布局用 flex + justify-content:space-between + .nav-menu margin-left:auto,
   导致 margin-left:auto 吸收剩余空间随视口线性增长(viewport 1440/1600/1920/2560
   实测 distance = 56/177/354/723px)。
   修复:用 CSS Grid 三栏布局,logo → 第一按钮的距离 = grid column gap = var(--nav-item-gap),
   不随视口变化。右簇(nav-menu + lang-switcher + nav-cta-btn)包成一个 .nav-right 子容器,
   整个容器固定列宽,内容用 flex 横排,内部 gap 用 var(--nav-item-gap) 保持六段等距。
   HTML 改动:src/_includes/partials/header.njk 的 .nav-inner 里把 .nav-menu / .lang-switcher /
   .nav-cta-btn 包进一个 .nav-right 容器。 */
.nav-inner{
  display:grid;
  /* 五列布局:logo | gap | nav-menu | gap | nav-right(lang+cta)
     所有 gap 都是 var(--nav-item-gap),与菜单内 6 按钮间距完全一致 */
  grid-template-columns:auto var(--nav-item-gap) auto var(--nav-item-gap) auto;
  align-items:center;
  width:100%;
  padding:0 var(--page-gutter);
  min-width:0;
}
.nav-logo{
  grid-column:1;
}
.nav-logo img{
  height:clamp(40px, 2.2vw, 44px);
  width:auto;
  display:block;
}
.nav-menu{
  grid-column:3;
  display:flex;
  align-items:center;
  gap:var(--nav-item-gap);
  min-width:0;
}
.nav-right{
  grid-column:5;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:var(--nav-item-gap);
  min-width:0;
}
.nav-right .lang-switcher,
.nav-right .nav-cta-btn{
  flex:0 0 auto;
}
.nav-menu a{
  font-family:var(--font-body);
  /* 2026-08-02 调:原 clamp(14, 0.78vw, 16) 在 1440-1920 视口下触底 14px,用户反馈 nav-bar 字号太小
     → 改 clamp(15px, 0.85vw, 17px):1440 = 15px(min),1920 = 16.32px,2560 = 17px(max) */
  font-size:clamp(15px, 0.85vw, 17px);
  font-weight:500;
    /* 2026-09-05 改:0901 要求 CULTURAL KEEPERS 不换行:收紧字距 + 强制 nowrap */
  letter-spacing:0.1em;
  color:#ffffff;
  position:relative;
  padding:max(6px, 0.31vw) 0;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .25s ease;
}
.nav-menu a:hover,
.nav-menu a.active{color:var(--color-accent-mint)}
.nav-menu a::after{
  content:"";
  position:absolute;
  bottom:-4px;left:50%;
  width:0;height:1.5px;
  background:var(--color-accent-mint);
  transition:all .3s ease;
  transform:translateX(-50%);
}
.nav-menu a:hover::after,
.nav-menu a.active::after{width:100%}
.nav-cta-btn{
  flex:0 0 auto;
  display:inline-block;
  /* 2026-07-14 改:padding 10px 18px → 10px 28px(横 padding 加 10px,胶囊变长);
     用户要求"plan your journey 的橙色胶囊长度增加一点" */
  padding:max(10px, 0.52vw) clamp(18px, 1.2vw, 28px);
  font-size:max(10px, 0.573vw);
  font-weight:700;
  letter-spacing:0.08em;
  color:#ffffff;
  background:var(--color-brand);
  border:none;
  border-radius:999px;
  text-transform:uppercase;
  white-space:nowrap;
  transition:all .25s ease;
}
.nav-cta-btn:hover{
  background:var(--color-brand-dark);
  transform:translateY(-1px);
}
/* .nav-menu-cta:菜单内的橙色 CTA 胶囊。
   桌面端隐藏(改用右侧独立 .nav-cta-btn),移动端菜单展开时才显示 */
.nav-menu-cta{
  display:none;
  padding:max(12px, 0.63vw) max(26px, 1.35vw);
  font-size:max(12px, 0.625vw);
  font-weight:700;
  letter-spacing:0.16em;
  color:#fff!important;
  background:var(--color-brand);
  border-radius:999px;
  text-transform:uppercase;
  transition:background .25s ease;
}
.nav-menu-cta:hover{ background:var(--color-brand-dark); }
.nav-menu-cta::after{ display:none!important; }
.nav-toggle{
  /* 2026-08-02 改:grid-column:5 + justify-self:end 让 .nav-toggle 贴在 nav-inner 右缘。
     在 ≤1320 断点切汉堡时显示,align-items:center 保持垂直居中 */
  grid-column:5;
  justify-self:end;
  display:none;
  width:40px;height:40px;
  position:relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";
  position:absolute;
  left:8px;right:8px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:all .3s ease;
}
.site-navbar.is-scrolled .nav-toggle span,
.site-navbar.is-scrolled .nav-toggle span::before,
.site-navbar.is-scrolled .nav-toggle span::after{background:var(--color-dark)}
.nav-toggle span{top:50%;margin-top:-1px}
.nav-toggle span::before{top:-8px}
.nav-toggle span::after{top:8px}
.nav-toggle.active span{background:transparent}
.nav-toggle.active span::before{top:0;transform:rotate(45deg)}
.nav-toggle.active span::after{top:0;transform:rotate(-45deg)}

/* ============================================
   2. Hero 横幅(整体管理:title + desc + CTA 整体)
   统一原则:
     - aspect-ratio: 16/9(锁比例,与首页 hero 轮播图同比例)
     - 左缘 = .nav-inner padding-left(32px,跨 header/hero 共线)
     - 字号/间距一律 vw / clamp(禁 transform:scale)
     - stage 是 flex-column 整体容器,top padding 锚标题、bottom padding 留呼吸,
       .hero-cta-block 用 margin-top:auto 推到 stage 底部 → 文字/按钮/地址作为
       一个垂直整体,跟 header logo 左对齐(32px)
     - 移动 <768px 切回自然流 + svh

   缩放原则(2026-07-12 修复):
     hero 容器随 aspect-ratio:16/9 在视口放大时持续按 vw 增长。
     若文本用 clamp(min, vw, max) 把 max 锁在 1920 设计基线,
     会出现"容器放大但文字停在 max → 文本相对图片越来越小"。
     修法:hero 块内所有文本(padding / title / desc / tagline / loc / gap)的
     clamp max 全部放到覆盖 4K 视口的量级(240 / 120 / 56 / 64 / 32 / 40 px),
     让文本与容器按同一 vw 系数等比缩放。min 仍保留,防止窄视口文字过小。
   ============================================ */
.home-hero{
  position:relative;
  width:100%;
  /* 2026-09-06 改:首页顶图改为高度自适应占满首屏。
     旧 aspect-ratio:16/7 + min-height:max(80svh, 620px) 在宽屏被 aspect-ratio 主导,
     容器高度常常小于视口,无法铺满首屏上下边;
     移动端 @media (max-width:767px) 又改回 height:auto,几乎压不到首屏。
     改为统一 height/min-height = 100svh,任意视口下图片与 stage 严格铺满首屏,
     文字位置由 stage padding + flex 流式布局决定
     (标题靠 padding-top,地址靠 margin-top:auto 推到底部)。 */
  height:100svh;
  min-height:100svh;
  overflow:hidden;
  color:#fff;
  background:#000;
}
@media (max-width:767px){
  .home-hero{
    /* 移动端允许 hero 内容超出首屏时自然撑高(min-height 仍守 100svh 让短内容占满),
       避免超长 tagline + locations 把 100svh 强行撑开变形。 */
    height:auto;
    min-height:100svh;
  }
}
/* 5 图轮播 — 全宽 16:9 容器内绝对铺满
   2026-07-12 fix:图片裁剪对齐元素
     - background-size: cover(图片比例固定,容器变化时图片按 cover 缩放)
     - background-position: 30% center(不是 center center):
       元素在视口左侧 7.5vw,对应图片 ~7.5%~30% 区域;
       让图片按"偏左 30%"对齐,元素对应的左侧区域不被裁,
       同时右侧视觉重点(地标/人物)在视口偏中区域可见 */
.hero-slideshow{position:absolute;inset:0;z-index:0}
.hero-slide{
  position:absolute;inset:0;
  overflow:hidden;
  opacity:0;
  transition:opacity 1.2s ease;
  pointer-events:none;
}
.hero-slide.is-active{opacity:1;pointer-events:auto}
/* 2026-07-17 改:从 background-image 改为真实 <img>/<picture>,这里的 img 覆盖整个 slide;
   object-position 与原 background-position 一致(30% center,小屏聚焦脸部) */
.hero-slide picture,
.hero-slide img{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  object-fit:cover;
  object-position:30% center;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.6) 100%);
  z-index:1;
}
/* stage:整体容器,flex-column,padding 锚定标题与底部呼吸
   2026-07-12 fix:hero 元素相对背景图片左侧位置稳定
     - 设计稿 hero 内容锚点 = 7.5vw(144/1920),不是 nav-inner 的 32px 容器公式
     - 移除 max-width:1480 + margin auto(那会让元素 left 在不同视口下非线性,
       比如 1366 @ 32/1366=2.34% vs 1920 @ 252/1920=13.13% → 元素相对图片位置漂移)
     - padding-left/right 改成 clamp(24px, 7.5vw, 120px),元素 left 永远 = 7.5vw,
       相对背景图(100vw)的比例恒定在 7.5%,任意视口下视觉位置一致
     - nav logo 仍按 1480+32 公式,设计本就允许 hero 内容比 logo 偏左(108px@1920)
     - 上下 padding 保留 vw-based,垂直呼吸感随容器缩放 */
.hero-stage{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
    /* 2026-09-05 改:0901 要求 hero 整体下移,从 clamp(80,6.25vw,240) 提到 clamp(120,7.5vw,280),
     让标题块避开 header logo 与 slide 顶部的紧迫感,1440 视口下约多 36px */
  padding-top:clamp(88px, 6vw, 180px);
  padding-bottom:clamp(48px, 3.5vw, 140px);
  padding-left:var(--page-gutter);    /* 与 header logo / CTA 外边界共用同一页边距 */
  padding-right:var(--page-gutter);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
/* 顶部内容:title 块 + desc + buttons + tagline(垂直堆叠,跟 logo 共线) */
.hero-stage-top{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(20px, 1.5vw, 56px);   /* 元素间统一行间距,放开 max 让 stage-top 间距随视口等比 */
}
.hero-text-block{
  display:inline-block;
  max-width:100%;
}
.hero-title{
  display:flex;
  flex-direction:column;
  gap:0;
  margin:0;
  font-family:var(--font-display);
  /* .xd 109px / 1920 = 5.68vw,min 40 防窄屏, max 240 覆盖 4K 等比 */
  font-size:max(40px, 5.68vw);
  line-height:1.04;
  font-weight:400;                  /* .xd Medium ≈ 500; 保持现有 400(更细),用户后续可调 */
  letter-spacing:0.005em;
  text-transform:uppercase;
  color:#fff;
  opacity:0;
  transform:translateY(30px);
  animation:heroFadeUp 1s ease 0.25s forwards;
}
.title-line{
  display:flex;
  align-items:center;
  gap:0.18em;
}
.title-text{display:inline-block}
/* 花括号:放大并与字母基线水平对齐 */
.hero-brace{
  display:inline-block;
  height:1.05em;        /* ≈ line-height,略微超出字母基线 */
  width:auto;
  user-select:none;
  flex:0 0 auto;
  align-self:center;   /* 与字母垂直居中对齐 */
  vertical-align:baseline;
}
/* divider:与标题同宽(在 .hero-text-block 内 = title 块宽度),加粗靠近标题 */
.hero-divider{
  width:100%;
  max-width:100%;
  height:0.156vw;     /* 3/1920,等比缩放 */
  background:#fff;
  margin:0.73vw 0 0;  /* 14/1920 */
  opacity:0;
  animation:heroFadeUp 1s ease 0.55s forwards;
}
.hero-desc{
  font-family:var(--font-display);
  /* .xd 29px / 1920 = 1.51vw,min 13 防窄屏, max 56 覆盖 4K */
  font-size:max(13px, 1.51vw);
  line-height:1.55;
  color:#fff;
  margin:clamp(5px, 0.5vw, 10px) 0 0;
  max-width:none;
  opacity:0;
  animation:heroFadeUp 1s ease 0.7s forwards;
}
/* 底部 CTA 整体:自然流,在 stage 内用 margin-top:auto 推到 stage 底部 */
.hero-stage-bottom{
  /* 地址跟在 tagline 后自然排布。旧 margin-top:auto + 短视口 margin-bottom 补偿
     会在缩放/矮视口下把地址过度上提；改为明确的垂直间距，保持两组文本关系稳定。 */
  margin-top:clamp(22px, 2vw, 40px);
  margin-bottom:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  opacity:0;
  animation:heroFadeUp 1s ease 1.05s forwards;
  max-width:80vw;
}
.hero-cta-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.42vw;         /* 8/1920,buttons 与 tagline 紧凑 */
}
/* buttons 留在 .hero-stage-top 内的样式移除 —— 现在 .hero-buttons 由 .hero-stage-bottom 内部 .hero-cta-block 包裹 */
/* .hero-buttons { 空规则占位保留 anchor;具体样式见 .hero-cta-block */
/* 全局 .btn 基类(hero/enter-cta/detail 页/featured-journeys 复用) */
.btn{
  display:inline-block;
  /* .xd 按钮 24-26px 字号 → padding 上下 ≈ 字号 0.7 / 左右 ≈ 字号 1.4;按 1.3vw 中间值算 padding(31px/41px) */
  padding:0.86vw 1.83vw;     /* 16.5/1920 35/1920,匹配 1.3vw 字号下视觉比例 */
  /* .xd hero 按钮 "Explore" 24 + "Work" 26 (平均 25) / 1920 = 1.3vw, min 12, max 26 */
  font-size:max(12px, 1.3vw);
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  border-radius:999px;
  transition:all .25s ease;
  cursor:pointer;
  border:0.078vw solid transparent;  /* 1.5/1920 */
  font-family:var(--font-body);
  text-decoration:none;
  text-align:center;
}
.btn-outline-white{background:transparent;color:#fff;border-color:#fff}
.btn-outline-white:hover{background:#fff;color:var(--color-dark)}
.btn-outline-orange{background:transparent;color:#fff;border-color:var(--color-brand)}
.btn-outline-orange:hover{background:var(--color-brand);color:#fff;border-color:var(--color-brand)}
.btn-primary{background:var(--color-brand);color:#fff;border-color:var(--color-brand)}
.btn-primary:hover{background:var(--color-brand-dark);border-color:var(--color-brand-dark)}
.btn-outline{background:transparent;color:#fff;border-color:#fff}
.btn-outline:hover{background:#fff;color:var(--color-dark)}
/* 旧 absolute 版本已删除(2026-07-12 fix):让 line 968-973 的 flex 自然流 + margin-top:auto 生效
   - 绝对定位让 stage-bottom 在 stage 底部贴边,但跟 stage-top 中间留大段空白,视觉上分散
   - flex 自然流让 stage-bottom 紧接 stage-top 末尾(stage-top 占满上半空间后,stage-bottom 紧跟其下),
     二者中间无空白,x 轴同 7.5vw 起点严格对齐
   - margin-top: auto 在 flex column 容器内把 stage-bottom 推到 stage padding-bottom 处(等同 absolute bottom 的位置) */
.hero-buttons{
  display:flex;
  gap:0.73vw;
  flex-wrap:wrap;
  margin-bottom:0;
}
.hero-buttons .btn{
  padding:clamp(8px, 0.6vw, 12px) clamp(18px, 1.25vw, 24px);
  font-size:clamp(11px, 1vw, 19px);
  border-width:clamp(2px, 0.14vw, 3px);
}
.hero-buttons .btn-outline-white{
  border-color:#fff;
}
.hero-buttons .btn-outline-orange{
  background:var(--color-brand);
  color:#fff;
  border-color:var(--color-brand);
}
.hero-buttons .btn-outline-orange:hover{
  background:var(--color-brand-dark);
  border-color:var(--color-brand-dark);
}
.hero-tagline{
  font-family:var(--font-display);
  margin-top:clamp(10px, 1vw, 20px);
  font-size:max(15px, 2.4vw);
  font-weight:400;
  color:#fff;
  letter-spacing:0.01em;
  line-height:1.3;
}
/* 2026-07-12 fix:地址统一左对齐
   - 旧实现 4 个 .hero-loc 在 flex 横排(默认左对齐第一个),
     切换 slide 时 active 的 .hero-loc 位置不同(第 1/2/3/4 个分别 @ 0/200/400/600px),地址会"跳"
   - 新实现 .hero-locations 改 position:relative + min-height 作锚点;
     .hero-loc 改 position:absolute + left:0 + top:0,4 个堆在 (0, 0),
     opacity 切换哪个可见 → 任何 slide 切换地址永远在同一个 x 锚点(7.5vw),
     切换无位置跳变,统一左对齐到 stage padding 起点 */
.hero-locations{
  display:flex;            /* 4 个 .hero-loc 始终在一排(flex-row gap, 不再 absolute 堆叠) */
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(8px, 0.8vw, 16px);
  position:relative;       /* 保留 relative,JS active 高亮仍可读 [data-active-slide] */
  min-height:1.5em;
}
.hero-loc{
  display:flex;              /* flex 让内部 pin + text 水平排列 */
  align-items:center;
  gap:0.42vw;         /* 8/1920 */
  font-family:var(--font-body);
  /* 地址比原版略缩小,同时保留窄屏可读下限 */
  font-size:max(11px, 0.78vw);
  font-weight:400;
  letter-spacing:0.18em;
  color:rgba(255,255,255,0.5);     /* 默认半透明白,active 高亮全白 */
  text-transform:uppercase;
  white-space:nowrap;        /* 地址强制单行(Sichuan, China 不拆两行) */
  opacity:1;                 /* 4 个 loc 始终显示 */
  pointer-events:auto;
  transition:color .8s ease;
}
/* 当前 slide 对应的 .hero-loc 高亮(active slide 的地址强调) */
.hero-stage-bottom[data-active-slide="sichuan"] .hero-loc[data-slide="sichuan"],
.hero-stage-bottom[data-active-slide="yunnan"] .hero-loc[data-slide="yunnan"],
.hero-stage-bottom[data-active-slide="tibet"] .hero-loc[data-slide="tibet"],
.hero-stage-bottom[data-active-slide="xinjiang"] .hero-loc[data-slide="xinjiang"]{
  color:#fff;                /* active 地址全白(高亮) */
}
.hero-loc-pin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:0.95em;
  height:0.95em;
  flex:0 0 auto;
  color:var(--color-accent-mint);
}
.hero-loc-pin::before{
  content:"";
  width:100%;
  height:100%;
  display:block;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s7-6.5 7-11a7 7 0 0 0-14 0c0 4.5 7 11 7 11z' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='2.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s7-6.5 7-11a7 7 0 0 0-14 0c0 4.5 7 11 7 11z' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='2.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hero-loc-text{ display:inline-block; }
@keyframes heroFadeUp{
  to{opacity:1;transform:translateY(0)}
}
/* 移动 <768:hero 内容自然流,左缘回到 24px,顶距用 svh;
   hero-slide 图片缩放:小屏用更明确的 min-height + object-position top */
@media (max-width:767px){
  .home-hero{
    aspect-ratio:auto;
    min-height:58vh;            /* 旧 62vh → 58vh,移动端也小幅降高 */
    height:auto;
    overflow:hidden;            /* 恢复 hidden,让图片 cover 不溢出 */
  }
  .hero-stage{
    padding:18svh 24px 12svh;
    align-items:flex-start;
  }
  .hero-stage-top{padding:0}
  .hero-stage-bottom{
    margin-top:24px;
    padding:0;
    max-width:100%;
  }
  .hero-cta-block{gap:6px}
  .hero-title{font-size:max(32px, 8.8vw)}
  .hero-divider{height:2px;margin:12px 0 0;width:80%;max-width:80%}
  .hero-desc{font-size:max(13px, 3.6vw);max-width:100%;margin:18px 0 0}
  .hero-buttons{flex-direction:column;align-items:stretch;gap:10px}
  .hero-buttons .btn{text-align:center;padding:10px 16px;font-size:max(11px, 0.573vw);border-width:2px}
  .hero-tagline{font-size:max(15px, 4.2vw)}
  .hero-locations{gap:12px}
  .hero-loc{font-size:max(11px, 0.573vw);letter-spacing:0.14em}
  .hero-loc-pin{width:1em;height:1em}
  .hero-slide img{ object-position:center 30%; }   /* 小屏人物图上移,聚焦脸部 */
}

/* 200% 缩放常落在 768-1320px CSS viewport:保留桌面构图,但给 fixed header 与文字栈更多安全高度 */
@media (min-width:768px) and (max-width:1320px){
  .home-hero{
    /* .home-hero 高度已统一为 100svh(见主规则),此处不再覆写 */
  }
  .hero-stage{
    padding-top:max(84px, 8svh);
    padding-bottom:max(36px, 4.5svh);
  }
  .hero-stage-top{
    gap:clamp(14px, 1.8vw, 24px);
    max-width:calc(100vw - var(--page-gutter) * 2);
  }
  .hero-title{
    font-size:clamp(40px, 5.1vw, 68px);
    line-height:1.02;
  }
  .hero-desc{
    max-width:min(520px, 62vw);
    margin:clamp(10px, 1.2vw, 16px) 0 0;
    font-size:clamp(13px, 1.45vw, 19px);
  }
  .hero-stage-bottom{
    max-width:calc(100vw - var(--page-gutter) * 2);
  }
  .hero-tagline{
    font-size:clamp(18px, 2.3vw, 30px);
  }
  .hero-buttons .btn{
    padding:8px 18px;
    font-size:clamp(11px, 1.1vw, 15px);
    border-width:2px;
  }
}

@media (max-width:767px){
  .hero-stage{
    height:auto;
    min-height:100svh;
    padding-top:max(92px, 18svh);
  }
}

/* ============================================
   3. 品牌声明(白色 + 品牌 mark watermark + BRAND STATEMENT pill)
   ============================================ */
.brand-statement{
  /* 2026-07-14 改:与 the-wayon-method / cultural-keepers / cultural-entries 缩放规则统一 ——
     section 改 width:100%(去掉 max-width:1480 + L/R padding),
     把 1480 + padding 移到内层 .brand-statement-inner(印花容器)
     2026-07-14 补:加 overflow:hidden —— 防止 .section-stamp-bg 溢出 inner 边界,
     被上面 / 下面 section 视觉覆盖(尤其在窄视口 padding clamp 到 min 130 后 inner 高度有限) */
  position:relative;
  width:100%;
  background:#fff;
  padding:0;
  text-align:center;
  overflow:hidden;
}
/* 2026-07-14 新增:.brand-statement-inner 升级为 1480 印花容器(原与 .section-stamp-inner 合并)
   - max-width:1480 + margin auto:stamp 居中于视口
   - padding clamp(100,11vw,190) 32px:垂直缩放规则(11vw 与 .entries-intro 一致),水平 32px 固定
   - position:relative:让 .section-stamp-bg 绝对定位时以此为 containing block */
.brand-statement-inner{
  /* 2026-07-14 改:去掉 max-width:max(1480px, 77.083vw) ———
     用户要求所有 sections 去掉容器最大限制,支持水平缩放自由扩展。
     现在 section 跟视口走,.section-stamp-bg / .section-stamp-inner 在内部独立限宽 */
  position:relative;
  width:100%;
  margin:0;
  /* 2026-07-16 改:2/3 × 1.2 → clamp(104px, 11.2vw, 192px) 33.6px
     1920 视口 padding=192px(原 240 × 0.8),水平 padding 34px */
  /* 2026-07-16 再改:用户要求上下间距调小 → clamp(72px, 7.8vw, 134px) 34px(约 70%) */
  /* 2026-07-16 再改:用户改主意,上下间距略调大 → clamp(88px, 9.6vw, 168px) 34px(约 85% 原值) */
  padding:var(--home-section-y) var(--home-gutter);
  overflow:hidden;
}
/* ===== section-stamp 共享(brand-statement + cultural-entries 共用) =====
   2026-07-14 重构:stamp 缩放与覆盖逻辑
   - 旧 max(280px, 46vw) 无 max cap,在 4K 视口 stamp = 1766px,远超 text 容器 880,
     比例从 1920px 的 10.2x 漂到 4K 的 5.1x(用户反馈缩放不一致)
   - 旧未设 overflow:hidden,stamp 在窄视口溢出 .brand-statement-inner 边界,被上下 sections 覆盖
   改:width clamp(280px, 46vw, 880px) ——
     280px min 保窄视口可读,46vw 中段等比,880px max 与 text 容器等宽(stamp:text ≈ 10.2:1 锁定) */
.section-stamp-bg{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  /* 2026-07-16 改:在 2/3 基础上 × 1.2 → clamp(256px, 38vw, 656px) ——
     1920 视口 = 656px(原 547px ×1.2),4K 视口 = 656px(贴合 max)
     与下方 .brand-statement-inner padding / .section-stamp-pill / brand-line 等保持 2/3 × 1.2 = 0.8x 原值缩放比例 */
  width:max(256px, 38vw);
  height:auto;
  opacity:0.7;
  z-index:0;
  pointer-events:none;
  user-select:none;
}
/* 2026-07-15 改:.brand-stamp-bg 去掉额外 scale(1.2) ——
     stamp 自身已经缩到 clamp(140, 20vw, 360),再 ×1.2 反而超过 padding 容差,
     跟 brand-statement 上下 10vw padding 不一致 */
.brand-stamp-bg{
  transform:translate(-50%, -50%);
}
/* 文字容器:z-index:1 浮在印花之上,水平居中,内 max-width 限宽 */
.section-stamp-inner{
  position:relative;
  z-index:1;
  max-width:max(880px, 45.833vw);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
/* 通用 stamp pill(brand-pill + entries-pill 共用样式)
   .xd BRAND STATEMENT pill 23 + CULTURAL ENTRY pill 25 → 平均 24/1920 = 1.25vw,min 13, max 32(覆盖 4K)
   2026-07-16 改:2/3 × 1.2 → max(11px, 1vw),padding / margin 也 ×1.2 */
.section-stamp-pill{
  display:inline-block;
  background:var(--color-brand);
  color:#fff;
  font-family:var(--font-display);
  font-size:max(11px, 1vw);
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding:max(6px, 0.48vw) max(16px, 1.12vw);
  border-radius:999px;
  margin-bottom:max(24px, 1.25vw);
}
/* stamp-title 用作 flex 容器,把多行 line 竖直堆叠;
   line class 由 NJK 拆出(brand-line / entries-line) */
.section-stamp-title{
  display:flex;
  flex-direction:column;
  align-items:center;
  /* 2026-07-16 改:gap 0 —— 与 .brand-line / .entries-line 的 line-height:1 + padding:0 配套,
     三行 title 完全贴合(行间距 0)。margin-bottom 24 → 16(整体 × 2/3) */
  gap:0;
  margin:0 0 16px;
  line-height:1;
  letter-spacing:0.005em;
  color:var(--color-brand);     /* 标题默认色:橙色 */
  font-family:var(--font-display);
  text-transform:uppercase;
}
/* 通用 stamp desc(line-height 1.7,深色 — 但被 brand-desc / entries-desc-soft 覆盖成 23px 橙) */
.section-stamp-divider{
  /* 2026-07-16 改:2/3 × 1.2 → width 112px,height 1.6px,margin-bottom 19 */
  width:max(112px, 5.83vw);
  height:max(1.6px, 0.083vw);
  background:var(--color-brand);
  margin:0 auto max(19px, 0.99vw);
}
.section-stamp-desc{
  font-family:var(--font-display);
  font-size:max(11px, 0.84vw);
  line-height:1.7;
  color:var(--color-text, #2a2a2a);
  max-width:max(512px, 26.667vw);
  margin:0 auto;
}
/* ===== 多行标题(line 类由 NJK 拆出) =====
   2026-07-13 改:对照截图(.xd BRAND STATEMENT 截图),3 行 title 全部同字号 ~70-80px
   原 small/big 区分已废,统一用 .brand-line / .entries-line */
.brand-line,
.entries-line{
  display:block;
  font-family:var(--font-display);
  font-weight:800;             /* 2026-07-14 用户要求:三句话加粗,语义对齐 .xd ExtraBold */
  color:var(--color-brand);    /* 橙色 */
  /* 2026-07-16 改:2/3 × 1.2 → clamp(19px, 2.4vw, 48px) ——
     1920 视口 ~46px,4K 视口 ~48px(贴合 max)。
     注:历史上这里曾被 max(36px, 4.5vw) 覆盖,但随后 1184 行立即又被 max(19px, 2.4vw) 覆盖,
     原 36px 公式从未生效,删除以避免误导 */
  font-size:max(19px, 2.4vw);
  line-height:1;               /* 2026-07-14 用户要求:三行行间距设为 0(line-height 1 + padding 0 = 行间贴合) */
  letter-spacing:0.002em;
  padding:0;
}
/* 兼容旧 NJK 模板(如果还有 --small / --big 修饰符,不报错但等同 base) */
.brand-line--small,
.entries-line--small,
.brand-line--big,
.entries-line--big{
  /* 留作 NJK 语义 alias,实际不修改字号(统一) */
}
/* ===== 描述 — At WAYON 句:23px Poppins 不加粗 橙 =====
   NJK 用 brand-desc--soft / entries-desc--soft 标识;base .section-stamp-desc 默认 14-17px */
.brand-desc--soft,
.entries-desc--soft{
  font-family:var(--font-display);
  /* 2026-07-16 改:2/3 × 1.2 → max(11px, 0.92vw) */
  font-size:max(11px, 0.92vw);
  font-weight:700;             /* 2026-07-13/14 用户要求加粗 */
  color:var(--color-brand);    /* 橙色 */
  /* 2026-07-14 改:line-height 1.5 → 1 —— 第三段小字行间距归 0,
     与 .brand-line / .entries-line 标题行间距规则一致(完全贴合) */
  line-height:1;
  max-width:max(720px, 37.5vw);
  margin:0 auto;
  white-space:pre-line;       /* 2026-07-14 用户要求:At WAYON 句固化为两行,在 "who" 前面分句;预格式保留 \n 换行 */
}

/* ============================================
   4. 大标题横幅
   ============================================ */
.section-title-banner{
  padding:30px 24px;
  text-align:center;
  background:var(--color-white);
}
.section-title-banner img{
  max-width:max(920px, 47.917vw);
  width:100%;
  margin:0 auto;
}

/* ============================================
   5. 文化守护者 (Cultural Keepers) — 两行分离布局
     header:.keepers-header--tri(左 pill / 中 title / 右 desc)
     行 1:.keepers-text-row(5 个 .keeper-text-cell,name + spec 含 spec-rule 橙线 + bio)
     行 2:.keepers-photo-row(5 个 .keeper-card,人像 + hover 绿/橙渐变 + enter 胶囊)
   home 与独立页(.masters-strip)共用一套 class,独立页外层换 .masters-strip
   ============================================ */
.cultural-keepers{
  /* 2026-07-14 改:去掉 max-width:1480 + L/R padding(原 baseline:1480+32) ——
     用户要求:"cultural keepers 这一部分需要随缩放调整,不要困死在容器里"
     现改为全宽:section 跟视口走,.keepers-photo-row 内 5 张图水平拉满到视口两边 */
  width:100%;
  margin:0;
  padding:0;
  background:#fff;      /* header 区白底,keepers 绿 banner 由 keepers-photo-row::before 画 */
}
/* ===== header:三栏(pill 左 / title 中 / desc 右) ===== */
.keepers-header{
  width:100%;
  /* 2026-07-16 改:section 间间距过大,垂直 padding 砍半 —— clamp(40,5vw,80) → clamp(20,2.5vw,40) */
  /* 2026-07-16 再改:用户要求 header 与下方 keepers-text-row 无间距 → padding-bottom:0 */
  padding:max(20px, 2.5vw) var(--home-gutter) 0;
}
.keepers-header--tri{
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:max(16px, 2vw);
}
@media (min-width:900px){
  .keepers-header--tri{
    /* 2026-07-14 改:auto 1fr auto → 1fr 1fr 1fr —— 三列等宽相对位置
       旧:auto 列(根据内容收缩)让 pill/desc 吃实际宽度,1fr 列(中间 title)被挤压,缩放时
       title 离 pill 和 desc 的距离不一致(1920px 紧贴 / 1366px 拉开)。
       新:三列都 1fr,pill/title/desc 各占 1/3 等宽位置,
       title 始终在视觉正中,距离两侧随缩放等比变化。 */
    grid-template-columns:1fr 1fr 1fr;
    gap:max(20px, 3vw);
  }
}
.keepers-header--tri .keepers-header-left{ justify-self:start; }
.keepers-header--tri .keepers-header-center{ justify-self:center; text-align:center; }
.keepers-header--tri .keepers-header-right{ justify-self:end; text-align:right; }
.keepers-pill{
  display:inline-block;
  background:var(--color-brand);
  color:#fff;
  font-family:var(--font-display);
  /* 2026-07-14 改:对齐 footer 的 max(min, vw) 无 max cap 公式,
     旧 clamp(11, 1.04vw, 24) 在 4K cap 到 24,让 pill 看起来非常小 */
  font-size:max(11px, 1.04vw);
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  padding:max(8px, 0.7vw) max(16px, 1.6vw);
  border-radius:999px;
  white-space:nowrap;
}
.keepers-title{
  margin:0;
  font-family:var(--font-display);
  /* 2026-07-14 改:对齐 footer ——
     旧 clamp(20, 1.88vw, 48) 在 4K cap 到 48,标题相对 footer 偏小 */
  font-size:max(20px, 1.88vw);
  font-weight:800;
  line-height:1.15;
  letter-spacing:0.005em;
  text-transform:uppercase;
  color:var(--color-brand);
  /* max-width 比例化避免断句漂移 — .keepers-header-center 在 3 列 grid 里占 1fr,
     max(280px, 30vw) 给标题足够宽度保持单段(宽屏)/自然换行(窄屏) */
  max-width:max(280px, 30vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  white-space:nowrap;
}
.keepers-title > .keepers-title-line{display:block;}
.keepers-desc{
  margin:0;
  font-family:var(--font-display);
  /* 2026-07-14 改:对齐 footer max(min, vw) 公式 */
  font-size:max(13px, 1.1vw);
  font-weight:500;
  line-height:1.45;
  color:var(--color-brand);
  opacity:.9;
  /* max-width 随视口比例化(34ch 锁死会因字号变小而变窄 → 断句分布漂移);
     max(280px, 28vw) 让宽屏保持单段、窄屏自然换行,断句分布稳定 */
  max-width:max(280px, 28vw);
  white-space:normal;            /* 不固定断句,跟随容器宽度自然换行 */
}

/* 外层 .section-shell 内 .keepers-strip 仅承担布局占位;具体行列在两层子 row 内 */
.keepers-strip{
  display:block;
  width:100%;
}

/* 行 1:文字行 —— 5 列 grid,每列左对齐 */
.keepers-text-row{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  column-gap:0;
  row-gap:max(24px, 2.4vw);
  padding:max(44px, 4vw) 0 0;
  margin-bottom:0;
}
@media (min-width:768px){
  .keepers-text-row{ grid-template-columns:repeat(5, 1fr); }
}
.keeper-text-cell{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-self:center;
  text-align:left;
  gap:max(4px, 0.4vw);
  width:100%;
  max-width:none;
  padding:max(4px, 0.4vw) max(18px, 1.55vw);
}
.keeper-name{
  margin:0 0 max(2px, 0.2vw);
  font-family:var(--font-display);
  /* .xd "Master Chen" 20 Black / 1920 = 1.04vw, min 15, max 24(覆盖 4K) */
  font-size:max(15px, 1.04vw);
  font-weight:700;                   /* .xd Black (900),用 700 Bold(粗体) */
  color:var(--color-dark);
  letter-spacing:0.005em;
  line-height:1.15;
}
.keeper-spec{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:max(5px, 0.5vw);
}
.keeper-spec-text{
  font-family:var(--font-display);
  /* .xd "Qiang Embroidery ICH Inheritor" 18 Regular / 1920 = 0.94vw, min 11, max 22 */
  font-size:max(11px, 0.94vw);
  font-weight:400;                   /* .xd Regular (400) */
  color:var(--color-dark);
  line-height:1.4;
  letter-spacing:0.01em;
}
.keeper-spec-rule{
  display:block;
  width:max(28px, 2.6vw);
  height:1.5px;
  background:var(--color-brand);
}
.keeper-bio{
  margin:max(2px, 0.2vw) 0 0;
  font-family:var(--font-display);
  /* .xd "Through needle and thread..." 15 Regular #6D6D6D / 1920 = 0.78vw, min 11, max 18 */
  font-size:max(11px, 0.78vw);
  font-weight:400;
  color:#6D6D6D;                      /* .xd 设计稿灰 #6D6D6D */
  line-height:1.5;
  opacity:.88;
}

/* 行 2:图片行 —— 同样 5 列 grid,无 gap,每张图严格 3:4 比例 */
.keepers-photo-row{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  column-gap:0;
  row-gap:0;
  padding:max(8px, 0.8vw) 0 0;
}
@media (min-width:768px){
  .keepers-photo-row{ grid-template-columns:repeat(5, 1fr); }
}
.keeper-card{
  --keeper-enter-color:var(--color-brand);
  position:relative;
  display:block;          /* 行 2 中是图片,不再是 flex-column 文字+图 */
  aspect-ratio:3/4;
  overflow:hidden;
  background:#000;
  text-decoration:none;
  color:inherit;
  /* 2026-09-06 改:首页 keepers 改为 <button> 后,补齐 button 默认样式重置,
     与二级页 .keeper-card--overlay 的 cursor:pointer / border:none / padding:0 / font:inherit 对齐。 */
  cursor:pointer;
  border:0;
  padding:0;
  font:inherit;
  text-align:left;
}
.keeper-photo{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:transform .6s ease;
}
.keeper-card:hover .keeper-photo{ transform:scale(1.04); }
/* hover 渐变遮罩(默认黑,绿/橙 override) */
.keeper-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.55) 100%);
  opacity:0;
  transition:opacity .35s ease;
}
.keeper--green .keeper-overlay{
  background:linear-gradient(180deg, rgba(51,180,129,0) 30%, rgba(51,180,129,0.85) 100%);
}
.keeper--orange .keeper-overlay{
  background:linear-gradient(180deg, rgba(189,75,22,0) 30%, rgba(189,75,22,0.85) 100%);
}
.keeper--orange{ --keeper-enter-color:var(--color-accent-mint); }
.keeper-card:hover .keeper-overlay{ opacity:1; }
/* hover 底部白胶囊 + 箭头 enter —— 胶囊始终以卡片中心为基准 */
.keeper-enter{
  /* 与同区块文本、卡片图统一采用 min + vw 连续缩放，不在 1920px 后封顶。 */
  --keeper-enter-pill-width:max(118px, 7.6vw);
  --keeper-enter-font-size:max(9px, 0.58vw);
  --keeper-enter-arrow-size:max(12px, 0.9vw);
  --keeper-enter-gap:max(3px, 0.3vw);
  --keeper-enter-border:max(1.5px, 0.1vw);
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:3;
  display:grid;
  /* 2026-07-24 改:grid 第二列 minmax(min, max-content) ——
     让 pill 文字超长时(如 "Enter The World" 在 1920 视口下文字 + padding
     实际宽 ~190-200px > 固定 184px)grid 列跟着 content 撑开,text-align:center
     视觉居中;min 仍为 clamp 保持视觉最小宽度 */
  grid-template-columns:var(--keeper-enter-arrow-size) minmax(var(--keeper-enter-pill-width), max-content) var(--keeper-enter-arrow-size);
  align-items:center;
  justify-content:center;
  column-gap:var(--keeper-enter-gap);
  padding:0 0 clamp(20px, 2vw, 38px);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
}
.keeper-enter::before{
  content:"";
  width:var(--keeper-enter-arrow-size);
  height:var(--keeper-enter-arrow-size);
}
.keeper-card:hover .keeper-enter{ opacity:1; transform:translateY(0); }
.enter-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* 2026-07-24 改:inline-size 固定宽度 → width: max-content + min-inline-size
     之前固定 inline-size: clamp(128px, 11vw, 184px) 在 "Enter The World"
     (14 chars × 15px Poppins Bold + letter-spacing 0.9px) + padding 16-28px
     后实际宽度 ~190-200px > 184px 上限,文字撑爆 inline-size + white-space:nowrap
     溢出到 pill 外。改用 max-content 让 pill 按内容自然撑开,min-inline-size
     保证视觉最小宽度 */
  width:var(--keeper-enter-pill-width);
  min-inline-size:0;
  padding:max(4px, 0.3vw) max(5px, 0.35vw);
  box-sizing:border-box;
  background:transparent;
  color:#fff;
  font-family:var(--font-display);
  font-size:var(--keeper-enter-font-size);
  font-weight:900;
  letter-spacing:0.06em;
  text-transform:none;
  white-space:nowrap;
  text-align:center;
  border:var(--keeper-enter-border) solid #fff;
  border-radius:999px;
}
/* 避免首页底部 ENTER CTA 的同名 .enter-text 左内边距污染卡片按钮。 */
.keeper-enter .enter-text{
  display:inline;
  padding:0;
  text-align:center;
}
.enter-arrow{
  display:block;
  width:var(--keeper-enter-arrow-size);
  height:var(--keeper-enter-arrow-size);
  color:var(--keeper-enter-color);
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5.3 15.95 13.7 7.55H7.15V4h12.6v12.6H16.2V10.05l-8.4 8.4-2.5-2.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5.3 15.95 13.7 7.55H7.15V4h12.6v12.6H16.2V10.05l-8.4 8.4-2.5-2.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.enter-arrow::before{ content:none; }
@media (max-width:900px){
  .keepers-text-row,
  .keepers-photo-row{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:600px){
  .keepers-text-row,
  .keepers-photo-row{ grid-template-columns:repeat(2, 1fr); }
  .keeper-enter{
    --keeper-enter-pill-width:clamp(112px, 32vw, 132px);
    --keeper-enter-font-size:clamp(8px, 2.2vw, 10px);
    --keeper-enter-arrow-size:clamp(11px, 3.4vw, 14px);
    --keeper-enter-gap:clamp(3px, 1vw, 5px);
  }
}

/* ============================================
   §5.5 .section-shell 通用内容壳(2026-07-14 跨 section 缩放统一规则)
   适用:featured-journeys / travelogue / enter-cta 三段(以及未来加进来的同类 section)
   section 本身 → width:100% + padding:0(跟 the-wayon-method / cultural-keepers 一致)
   .section-shell → 2026-07-14 改:去掉 max-width:1480,跟 section / 视口走;padding 仍留
                       (垂直 11vw、水平 32px,作为 section 内边距,内容自然拉到视口全宽)
   例外:.cultural-keepers 内的 .section-shell 不需要(已在 keepers 自身控 padding)
   ============================================ */
.section-shell{
  width:100%;
  margin:0;
  /* 2026-07-14 改:左右 padding 32 → 42(×1.3),与其他 section 容器同步放大 */
  padding:var(--home-section-y) var(--home-gutter);
}
/* 2026-07-16 加:.china-map-shell 重置 padding ——
   用户要求 home 页"view-all-journeys 跟 where-world-unfolds 直接衔接",
   取消默认 100-190px top padding(11vw);左右 55px 也归零让地图占满视口 */
.china-map-shell{
  padding:0;
}
/* 例外:cultural-keepers 内的 .section-shell 重置 padding(5 张图横向拉满视口 + 三段文本随缩放,不要外层 11vw padding) */
.cultural-keepers > .section-shell{
  margin:0;
  padding:0;
}

/* §5b 已合并入 §5:home(.cultural-keepers)与独立页(.masters-strip)共用一套 class
   独立页结构:.masters-strip > .masters-strip-inner > [.keepers-text-row + .keepers-photo-row]
   独立页不再重写专属规则,直接命中 §5 的同名 class */
.masters-strip{
  background:#fff;
  width:100%;
  padding:var(--secondary-content-top-gap, max(72px, 7vw)) var(--page-gutter) clamp(48px, 5vw, 88px);
}
.masters-strip-inner{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:0;
}
.masters-keepers-header{
  padding:0;
}
/* 2026-07-14 改:5×n 可扩展网格恢复(两行一组:5 文字 + 5 图片) */
.masters-rows{ display:none }   /* 旧单行交替 master-row 容器停用 */
.master-row{ display:none }
.master-text{ display:none }
.master-name{ display:none }
.master-spec{ display:none }
.master-spec-text{ display:none }
.master-spec-rule{ display:none }
.master-bio{ display:none }
.master-photo-link{ display:none }
.master-photo{ display:none }

/* ============================================
   6. 文化入口 (Cultural Entry Points) — 6 张照片分 4 列网格(每行 col 1+2 / 3+4)+ logo 中 + hover 黑遮罩
   ============================================ */
.cultural-entries{
  /* 2026-07-14 改:与 brand-statement / featured-journeys / travelogue / enter-cta 同款
     —— section width:100% + padding:0(背景跟视口走),1480 容器交给 .entries-intro
     2026-07-14 补:加 overflow:hidden —— 防止 .section-stamp-bg 溢出 .entries-intro 边界,
     被上面 / 下面 section 视觉覆盖
     2026-07-16 改:section 间间距过大,垂直 padding 砍半 —— clamp(60,8vw,120)/clamp(80,10vw,160) → clamp(28,3.5vw,60)
     2026-08-02 改:用户要求 "跟上下 section 的间距增加一点点",定义 local token
     --entries-section-y = clamp(108px, 10vw, 188px),仅作用于本 section 的 .entries-intro,
     不影响其他 home sections(它们仍走 var(--home-section-y) = max(88, 9.6vw))。 */
  position:relative;
  width:100%;
  margin:0;
  padding:0;
  background:#fff;
  overflow:visible;
  --entries-section-y: clamp(108px, 10vw, 188px);
}
/* ===== entries intro:与 brand-statement 同款 stamp pattern =====
   .entries-intro 替代旧 .brand-statement--stamp,直接复用 section-stamp-* 共享类 */
.entries-intro{
  position:relative;
  background:#fff;
  /* 2026-07-16 改:与 brand-statement-inner 同步 2/3 × 1.2 = clamp(104,11.2vw,192) */
  /* 2026-07-16 再改:用户要求上下间距调小 → clamp(72px, 7.8vw, 134px) 34px(约 70%) */
  /* 2026-07-16 再改:用户改主意略调大 → clamp(88px, 9.6vw, 168px) 34px(约 85%) */
  /* 2026-07-16 再改:stamp+文本 与下方 6 图 mosaic 的间距要单独调大一点
     —— 加 margin-bottom:clamp(40px, 4.4vw, 72px),让 intro → mosaic 比 intro 自身下 padding 还大
     大视口总间距:168(下 padding) + 72(margin-bottom) ≈ 240px
     2026-08-02 改:padding-y 改用本地 token --entries-section-y(比 --home-section-y 略大),
     仅影响本 section,与上下的间距增加 ~20px。 */
  width:100%;
  margin:0 auto;
  padding:var(--entries-section-y) var(--home-gutter);
  overflow:visible;
  text-align:center;
}
/* entries-* 类专属定义:复用 section-stamp-* 视觉,仅在 NJK 双 class 出现时生效 */
/* 2026-07-14 用户要求:pill / title / desc 与 brand-statement 完全对齐 —
   删除 entries 专属覆盖,直接回落到共享的 section-stamp-*(与 brand 同源) */
.entries-divider{
  width:max(112px, 5.83vw);
  height:max(1.6px, 0.083vw);
  background:var(--color-brand);
  margin:0 auto max(19px, 0.99vw);
}
.entries-stamp-bg{
  /* 2026-07-16 改:去掉 scale(1.2) ——
     .section-stamp-bg 已经放大到 clamp(320, 48vw, 820),再加 scale(1.2) 会超 padding 容差,
     跟 entries-intro 上下 padding 不对齐 */
  transform:translate(-50%, -50%);
}
.entries-header{
  position:relative;
  z-index:1;
  max-width:max(880px, 45.833vw);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
/* 6 张照片 mosaic —— 2026-07-14 重构为 4×2 网格
   旧 3×2 + .entry-photo-card / .entry-overlay-* 一整套死代码清掉
   改为 .entries-mosaic + .entry-tile(4 列 1fr,3/4 图跨 2 行=占 2 份空间)
   6 张图分配(8 份):
     row1: [1 col1] [2 col2] [3 col3-4 tall(span 2 rows)]
     row2: [5 col1] [6 col2] [3 cont]      [4 cont]
     即:1+1+2+1+1+2 = 8 份,3 和 4 各占 2 份(横向 1 col × 纵向 2 rows = 2:3 portrait) */
.entries-mosaic{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  /* 2026-07-14 改:去掉 max-width:1480 + 32px 边距 ——
     用户要求 6 张图水平和竖直自然拉伸,不被 1480 容器拘泥;
     section 跟视口走,gap 随视口 vw 等比缩,tile 用 aspect-ratio 锁比例 + grid 撑开
     2026-07-14 改:左右 padding clamp(16, 2vw, 32) → clamp(20.8, 2.6vw, 41.6)(×1.3) */
  width:100%;
  margin:0;
  padding:0 var(--home-gutter);
  box-sizing:border-box;
  gap:max(10px, 1vw);
}
.entry-tile{
  position:relative;
  display:block;
  /* 2026-07-14 改:6 张图按"4×2 = 8 份空间"布局 ——
     单份空间 415×365,aspect = 415/365 ≈ 1.137(略 landscape)
     第 3、4 张各占 2 份(横向跨 2 col),aspect 改为 830/365 ≈ 2.27
     横向布局:1+2+3(横跨 row1)/4(横跨 row2)+5+6,边角在缩放时始终对齐 */
  aspect-ratio:415/365;
  overflow:hidden;
  background:#000;
  text-decoration:none;
  color:inherit;
}
/* 跨 2 列(横向 span)的 tile:第 3 张(row1 col3-4)、第 4 张(row2 col1-2)
   配合 grid-template-columns:repeat(4, 1fr),grid auto-placement:
   - 1 col1, 2 col2, 3 col3-4, 4 col1-2, 5 col3, 6 col4
   2026-07-14 改:aspect 830/183 → 830/365 ——
     旧 830/183(2 col × 半 row)让 2-part 显得"宽度只有一半"(被压扁成细宽 banner);
     改回 830/365(2 col × 1 row 全高),与 1-part(415/365)同高、2 倍宽
     2-part 占据 2 col 宽 × 1 row 高 = 2 份空间,自然比 1-part 面积大 2 倍(用户接受此为"占 2 份"的设计) */
.entry-tile--span-2{
  grid-column:span 2;
  aspect-ratio:830/365;
}
.entry-photo{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:transform .6s ease;
  overflow:hidden;
}
/* 2026-07-17 改:从 background-image → 真实 <picture>;img 填满父容器 + object-fit cover */
.entry-photo picture,
.entry-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.entry-tile:hover .entry-photo{transform:scale(1.04)}
.entry-tile:hover .entry-photo img{transform:scale(1.04);transition:transform .6s ease}
/* 居中 logo mark —— hover 时也保持可见
   2026-07-14 改:×0.8 = max(48px, 3.2vw)(原 max(60, 4vw))
   z-index:2 ——
   image 位于 z-stack 底部(无 z-index → auto = 0)
   logo z-index:2,位于 image 上层
   overlay z-index:3,位于 logo 上层
   整体层级:图 → logo(图片上层)→ overlay(遮罩下层)
   2026-07-14 删:hover 淡出 .entry-tile:hover .entry-mark{opacity:0} ——
     用户要求 hover 时 logo 一直在图片中间,虽然位于遮罩下层、image 上层,始终可见 */
.entry-mark{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%, -50%);
  width:max(48px, 3.2vw);
  height:auto;
  z-index:2;
  pointer-events:none;
}
/* hover 黑色遮罩 + 文字 / 橙线 居中(2026-07-14 改)
   旧:align-items:flex-end + 顶部透明底部渐变(文字沉底)
   新:align-items:center + justify-content:center + 纯黑半透明(文字橙线在 tile 正中) */
.entry-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.78);   /* 纯黑 78% 不透明 */
  opacity:0;
  transition:opacity .3s ease;
  text-decoration:none;
  color:#fff;
}
.entry-tile:hover .entry-overlay{opacity:1}
.entry-overlay-inner{
  padding:clamp(20px, 2vw, 32px);
  width:100%;
  text-align:center;
}
.entry-title{
  margin:0 0 max(10px, 0.8vw);
  font-family:var(--font-display);
  /* 2026-07-14 改:对齐 footer max(min, vw) 公式(无 max cap) */
  font-size:max(16px, 1.4vw);
  font-weight:800;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:0.005em;
  line-height:1.15;
}
.entry-line{
  width:max(40px, 3vw);
  height:max(2px, 0.156vw);
  background:var(--color-brand);
  margin:0 auto max(10px, 0.8vw);
}
.entry-desc{
  margin:0;
  font-family:var(--font-display);
  /* 2026-07-14 改:对齐 footer max(min, vw) 公式(无 max cap) */
  font-size:max(12px, 1.05vw);
  font-weight:500;
  line-height:1.55;
  color:#fff;
  opacity:0.92;
}
/* 响应式:4×2 在 ≤1024px 视口变 2×3(span-2 横向跨 2 改竖向跨 2 行),≤600px 变 1 列堆叠 */
@media (max-width:1024px){
  .entries-mosaic{grid-template-columns:repeat(2, 1fr)}
  .entry-tile--span-2{grid-column:auto;grid-row:span 2;aspect-ratio:415/730}
}
@media (max-width:600px){
  .entries-mosaic{grid-template-columns:1fr}
  .entry-tile--span-2{grid-row:auto;aspect-ratio:415/365}
}

/* ============================================
   7. 精选旅程 (Featured Journeys) — FEATURED JOURNEYS pill + 左右大卡
   ============================================ */
.featured-journeys{
  /* 2026-07-14 改:section 改 width:100% + padding:0(与 the-wayon-method / cultural-keepers 同),
     1480 容器 + padding 移到内层 .section-shell(详见 §7.5) */
  width:100%;
  margin:0;
  padding:0;
  background:#fff;
}
/* 旧 .container{max-width:1480;padding:0 32;margin:0 auto} 在 NJK 未引用,已合并到 .featured-journeys 主类 */
.featured-header{
  /* 2026-07-14 改:用户要求"这一部分需要水平对齐一个 logo,这个 logo 也不见了" ——
     恢复 grid 2 列布局:左 2fr 文(.featured-header-text 包 title/desc/lede)、右 1fr logo(.featured-mark)
     logo 水平对齐到 header 右侧,跟 title/desc 垂直居中 */
  display:block;
  margin-bottom:clamp(32px, 4vw, 60px);
  position:relative;
  min-height:max(140px, 11vw);
  /* 2026-07-14 改:.featured-header 单独加左右 padding,跟 .section-shell 默认 7.5vw 对齐 —
     让标题/描述/lede 跟其他 sections 严格同 x 轴;但 .featured-row 仍吃满 100vw(图片贴边) */
  padding-left:var(--home-gutter);
  padding-right:var(--home-gutter);
}
.featured-header-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
/* 2026-07-14 恢复:.featured-mark logo CSS(2026-07-14 删,现在加回来)
   右列垂直居中,宽 200px,object-fit:contain 保比例 */
.featured-mark{
  /* 2026-07-14 改:用户反馈 logo 没了 ——
     grid 2fr 1fr 列宽 + justify-self:end 理论上应可见,但 grid item 内容溢出或被 padding 推挤时可能不可见。
     改:position:absolute 固定到右上角,不再依赖 grid 列宽 */
  position:absolute;
  top:50%; right:var(--home-gutter);
  transform:translateY(-50%);
  width:max(120px, 9vw);
  height:auto;
  max-height:220px;
  object-fit:contain;
  object-position:center;
  opacity:0.85;
  pointer-events:none;
  z-index:2;
}
.featured-pill{
  display:inline-block;
  width:fit-content;
  background:var(--color-brand);
  color:#fff;
  font-family:var(--font-display);
  /* 2026-07-14 改:对齐 footer max(min, vw) 公式(去掉 max cap) */
  font-size:max(13px, 1.3vw);
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding:max(8px, 0.6vw) max(20px, 1.4vw);
  border-radius:999px;
  margin-bottom:18px;
}
.featured-title{
  font-family:var(--font-display);
  /* 2026-07-14 改:对齐 footer max(min, vw) 公式(去掉 max cap) */
  font-size:max(28px, 3.1vw);
  line-height:1.1;
  font-weight:800;                   /* .xd ExtraBold (800) */
  color:var(--color-brand);
  text-transform:uppercase;
  margin:0 0 18px;
  letter-spacing:0.005em;
}
.featured-lede{
  font-family:var(--font-display);
  /* 2026-07-14 改:对齐 footer max(min, vw) 公式(去掉 max cap) */
  font-size:max(13px, 1.1vw);
  font-weight:500;
  line-height:1.55;
  color:var(--color-brand);
  max-width:max(620px, 32.292vw);
  margin:0;
}
/* 2026-07-14 改:.featured-mark 已删除(social-logo 在 header 右侧),CSS 一并清理 */
.featured-rows{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-bottom:0;
  padding-left:0;
}
/* 2026-07-14 改:用户要求 3 大路线图左右拉满视口 ——
   旧 .featured-journeys > .section-shell 两侧 55px padding 让图片内缩 110px(两边),
   图片不能贴到视口边。现把 .featured-journeys 内的 .section-shell 左右 padding 设为 0,
   让 featured-row(2 列 grid 1fr 1fr)的图片/文字直接吃满 100vw,左右贴边。
   header(标题/描述/搜索)不受影响,仍走 .section-shell 内的居中布局 */
.featured-journeys > .section-shell{
  /* 2026-07-14 改:把 section-shell 的 padding-left/right 设为 0 让 .featured-row 全宽 bleed;
     但 .featured-header(标题/描述)也吃这个 0 padding → 紧贴最左边。
     解决:section-shell 保持 0,但 .featured-header 单独加 padding-left/right 跟其他 section 对齐(7.5vw) */
  padding-left:0 !important;
  padding-right:0 !important;
}
.center-action{
  /* 2026-07-14 改:View all journeys CTA 跟其他 section 的内容同 x 轴(7.5vw 缩进) */
  padding-left:var(--home-gutter);
  padding-right:var(--home-gutter);
  /* 2026-07-17 改:用户要求 View all journeys 按钮向下一点 → margin-top:clamp(28px, 3vw, 48px)
     跟 featured-row(末行大图)拉开呼吸 */
  /* 2026-07-17 再改:用户反馈 96px 仍太小 → clamp(80px, 8vw, 144px),1920 视口 144px */
  margin-top:max(32px, 3.2vw);
}
/* 2026-07-15 改:用户要求图在左/右时贴边拉满,不是图全宽 ——
   2 列 grid(1fr 1fr)50/50vw,图片在 cell 内占 50vw
   row 1 (--left):文左 1fr,图右 1fr → 图 right:0 贴边
   row 2 (--right):用 order 调换,图左 1fr (left:0 贴边),文右 1fr
   row 3 (--left):同 row 1,继续文左图右
   .featured-journeys > .section-shell padding:0 让 cell 占满 100vw */
.featured-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
  text-decoration:none;
  color:inherit;
  width:100%;
  /* 让两行对角相接:第 1 行 left 文 + right 图 → 图片右下圆角 = 第 2 行图片右上圆角 */
}
.featured-row--right .featured-text{order:2}
.featured-row--right .featured-photo-wrap{order:1}
/* 2026-07-14 删:.featured-row:hover .featured-photo{transform:scale(1.02)} ——
     用户要求 3 大路线的图不需要在 hover 时变大,不变即可 */
.featured-text{
  /* 2026-07-14 改:padding 从硬编码 80px 56px 改为 clamp,跟视口等比缩放
     (原值在 768-1024 窄视口下显得过大,把内容挤到边) */
  padding:clamp(32px, 4vw, 80px) clamp(24px, 3vw, 56px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  text-align:left;
  background:#fff;
}
.featured-row--left .featured-text{padding-left:var(--home-gutter)}
.featured-row--right .featured-text{padding-right:var(--home-gutter)}
.featured-text > *{
  width:100%;
  max-width:none;
}
.featured-journey-title{
  font-family:var(--font-display);
  /* 2026-07-14 改:对齐 footer max(min, vw) 公式 */
  font-size:max(24px, 2.6vw);
  font-weight:800;
  color:var(--color-dark);
  margin:0 0 16px;
  line-height:1.18;
}
.featured-journey-desc{
  font-family:var(--font-display);
  /* 2026-07-14 改:对齐 footer max(min, vw) 公式 */
  font-size:max(14px, 1.3vw);
  font-weight:500;
  line-height:1.55;
  color:var(--color-dark);
  margin:0 0 18px;
}
.featured-divider{
  width:80px;
  height:3px;
  background:var(--color-brand);
  margin:0 0 20px;
}
.featured-sup-inline{
  display:block;
  width:100%;
  max-width:max(380px, 19.792vw);
  height:auto;
  margin:0 0 20px;
  border-radius:0;
}
.featured-meta{
  list-style:none;
  padding:0;
  margin:0;
}
.featured-meta li{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:max(14px, 0.729vw);
  font-weight:600;
  color:var(--color-text-muted-2);  /* 2026-07-14 改:li 默认灰色,让 .meta-label 黑/.meta-value 灰区分生效 */
  margin-bottom:8px;
}
/* 2026-07-14 新增:用户要求"小字':'及前面的用黑色,后续的用灰色"
   - .meta-label 包含 i18n label + 冒号(如 "Cultural Keeper:") → 黑色
   - .meta-value 是 value(如 "Master Chen") → 灰色(比 label 浅一档,视觉降权) */
.meta-label{
  color:var(--color-dark);
  font-weight:700;     /* 加粗 label 让 label/value 在视觉上更区分 */
}
.meta-value{
  color:var(--color-text-muted-2);
  font-weight:500;     /* value 略细(label 是 700,value 500) */
}
.meta-icon{
  display:inline-block;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--color-accent-mint);
  flex:0 0 auto;
  position:relative;
}
/* 2026-07-14 新增:.meta-icon-img 是 NJK 实际用的 icon 容器(<img class="meta-icon-img">)
   旧 .meta-icon 配 ::after mask(用于 SVG inline icon),
   而 NJK 现在用 3 个 PNG 文件(keeper / entry / duration),没设尺寸导致 3 图标大小不一致、文本基线漂移
   统一 22×22 + object-fit:contain 让 PNG 按相同尺寸渲染,3 行 meta 文本对齐 */
.meta-icon-img{
  width:max(20px, 1.45vw);
  height:max(20px, 1.45vw);
  object-fit:contain;
  flex:0 0 auto;
  display:inline-block;
  vertical-align:middle;
}
.meta-icon::after{
  content:"";
  position:absolute;
  inset:4px;
  background:var(--color-brand);
  -webkit-mask:var(--icon-svg) center/contain no-repeat;
          mask:var(--icon-svg) center/contain no-repeat;
}
.keeper-icon{--icon-svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='9' r='4' fill='%23fff'/><path d='M3 21 c0-5 4-8 9-8 s9 3 9 8' fill='%23fff'/></svg>")}
.entry-icon{--icon-svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 20 L20 4 L18 18 L8 14 Z' fill='%23fff'/></svg>")}
.duration-icon{--icon-svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-width='2'/><path d='M12 7 L12 12 L16 14' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/></svg>")}
.featured-photo-wrap{
  position:relative;
  /* 2026-07-16 改:--right row 的 photo-wrap 必须拉满左侧 viewport ——
     用户反馈"Sichuan Emei 图左边没拉满空间"。
     强制 margin/padding 0,确保 .featured-photo-wrap 在 --right row 时
     (order:1,grid 左列 1fr)从 viewport left:0 开始,无内/外距 */
  margin:0;
  padding:0;
  left:0;
  /* 2026-07-16 再改:用户要求固定 959×639 比例(≈3:2 landscape),接受裁剪
     —— 去掉 height:100%,改用 aspect-ratio:959/639 让 photo-wrap 决定 row 高度
     image 用 cover 填满 cell(可裁切),白底无 letterbox */
  aspect-ratio:959/639;
}
.featured-photo{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  /* 2026-07-16 改:去掉 aspect-ratio,改为 height:100% ——
     让图片填满 .featured-photo-wrap 整个 cell 高度(此前 3:2 + 50vw = 33.33vw,
     短于 .featured-text 的内容高度,在图底/右侧会留空隙,左图无法顶满 cell)
     background-size:cover 保证不拉伸变形 */
  /* 2026-07-16 再改:用户改主意:固定 959×639 比例 + 接受裁剪 → background-size:cover
     photo-wrap 用 aspect-ratio:959/639 锁比例,cover 让图填满 cell(可裁切) */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#fff;
  transition:transform .5s ease;
  overflow:hidden;
  position:relative;
}
/* 2026-07-16 改:row 2 (--right) ——
   用户反馈"Sicuan Emei 作图向左拉满的逻辑对齐同 section 在右侧的图片":
   --left 行的右图已经贴右边,需要 --right 行的左图也贴左边。
   三层兜底:
   ① .featured-row--right 自身 margin-left:0 + padding-left:0(消除 row 自己的边距)
   ② .featured-row--right .featured-photo-wrap{ margin-left:0; padding-left:0; left:0 }(photo-wrap 贴 row 左边)
   ③ .featured-row--right .featured-photo{ margin:0; padding:0; inset:0 }(photo 自身不引入 inline-block whitespace) */
.featured-row--right{
  margin-left:0;
  padding-left:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
.featured-row--right .featured-photo-wrap{
  margin-left:0;
  padding-left:0;
  left:0;
  position:relative;
}
.featured-row--right .featured-photo{
  margin:0;
  padding:0;
  inset:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
}
.featured-sup{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:60%;
  max-width:max(340px, 17.708vw);
  height:auto;
  opacity:0.95;
}
@media (max-width:1024px){
  /* 2026-07-14 改:.featured-mark 已删除,响应式 grid fallback 一并清理 */
  .featured-row{grid-template-columns:1fr;gap:0}
  .featured-row--right .featured-text{order:1}
  .featured-row--right .featured-photo-wrap{order:2}
  .featured-text{padding:40px var(--page-gutter)}
}
.center-action{text-align:center}
.center-action .btn{
  /* 绿胶囊:透明底 + 绿字 + 绿边框(View All Journeys 截图样式) */
  background:transparent;
  color:var(--color-accent-mint);
  border:0.078vw solid var(--color-accent-mint);
  padding:max(14px, 1.1vw) max(22px, 1.45vw);
  font-size:max(13px, 0.85vw);
  letter-spacing:0.16em;
}
.center-action .btn:hover{
  background:var(--color-accent-mint);
  color:#fff;
  border-color:var(--color-accent-mint);
}

/* ============================================
   8. 目的地 (Destinations) — 5 张照片等宽并排,无空隙
   ============================================ */
.destinations-grid-section{
  padding:0;
  background:#fff;
  width:100%;
}
.destinations-row{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:0;   /* 无空隙,贴满 */
  width:100%;
}
.destination-photo{
  position:relative;
  display:block;
  aspect-ratio:9/16;
  background-size:cover;
  background-position:center;
  overflow:hidden;
  transition:transform .25s ease;
}
.destination-photo::after{
  content:"";
  position:absolute;inset:0;
  background:rgba(0,0,0,0);
  transition:background .25s ease;
}
.destination-photo:hover::after{background:rgba(0,0,0,0.15)}
.sr-only{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
@media (max-width:900px){
  .destinations-row{grid-template-columns:repeat(3, 1fr)}
}
@media (max-width:720px){
  .destinations-row{grid-template-columns:repeat(2, 1fr)}
}
  text-transform:uppercase;
  margin-bottom:18px;
  line-height:1.1;
}
.destinations-section p{
  font-family:var(--font-serif);
  font-size:max(17px, 0.885vw);
  color:var(--color-text);
  max-width:max(620px, 32.292vw);
  margin:0 auto 40px;
}
.destination-search{
  max-width:max(680px, 35.417vw);
  margin:0 auto 50px;
  position:relative;
}
.destination-search input{
  width:100%;
  padding:18px 24px 18px 56px;
  border:1.5px solid rgba(0,0,0,0.1);
  border-radius:999px;
  background:#fff;
  font-size:max(15px, 0.781vw);
  color:var(--color-text);
  outline:none;
  transition:border-color .25s ease, box-shadow .25s ease;
  font-family:var(--font-body);
}
.destination-search input:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 4px rgba(4,107,210,0.1);
}
.destination-search::before{
  content:"";
  position:absolute;
  left:22px;top:50%;
  transform:translateY(-50%);
  width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events:none;
}

/* 旧 .china-map-wrap(渐变背景/圆角/.province class)和 .legend 已删除(2026-07-12)
   —— NJK 当前用 .china-map-section(line 2622)+ .china-map-wrap(无背景无圆角)+ svg path
   截图要求地图背景纯白透明、active 绿色,旧 .province 蓝色 active 不符截图 */

.destination-tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  max-width:max(900px, 46.875vw);
  margin:40px auto 0;
}
.destination-tags a{
  padding:10px 22px;
  background:rgba(255,255,255,0.7);
  border:1.5px solid rgba(0,0,0,0.08);
  border-radius:999px;
  font-size:max(13px, 0.677vw);
  font-weight:500;
  color:var(--color-dark);
  letter-spacing:0.04em;
  transition:all .25s ease;
}
.destination-tags a:hover,
.destination-tags a.active{
  background:var(--color-dark);
  color:#fff;
  border-color:var(--color-dark);
}

/* ============================================
   9. 旅行日志 (Travelogue)
   ============================================ */
/* 2026-07-12 统一 baseline:.travelogue-section 是 .home-travelogue 的语义 alias,
   跟 nav-inner/logo 同公式(max-width:1480 + margin auto + L/R 32) */
.travelogue-section{
  /* 2026-07-14 改:与 featured-journeys 同款 —— section width:100%,1480 容器交给 .section-shell */
  width:100%;
  margin:0;
  padding:0;
  background:var(--color-white);
}
/* 2026-07-14 清理:以下旧 .travelogue-section 子规则已废弃(NJK 用 .travelogue-header / .travelogue-pill / .travelogue-title / .travelogue-desc),
   真样式在 §9 块(行 2025+ 起)。
   - .travelogue-section .section-head(旧版顶部布局)
   - .travelogue-section .eyebrow(旧 pill 样式)
   - .travelogue-section h2 / .sub(旧标题描述)
   - .story-grid / .story-card 等(故事卡布局,与当前 5 卡片 grid 不同) */
/* 2026-07-14 清理:story-grid / story-card 整套(45 行)从未被任何 NJK 引用,
   全部移除以免混淆 ——— */
.enter-cta{
  /* 2026-07-14 改:与 brand-statement / featured-journeys 同款 —— section width:100%,1480 容器交给 .enter-cta-shell */
  width:100%;
  margin:0;
  padding:0;
  background:#fff;
}
/* 2026-07-15 改:用户要求"缩小 logo 上下距离" ——
   three logo wrap 都压缩 padding 到 0,
   让 logo 跟上下元素直接相邻(距离由前后 section 自身的 padding 控制) */
.enter-cta-logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  /* 2026-07-16 改:logo 与上下元素间距 ——
     用户要求"上侧调大,下侧调小,几乎相等":
     padding 0 → padding max(40px, 3vw) 0 max(8px, 0.6vw)
     上 40-3vw ≈ 视口 1920px = 57.6px,下 8-0.6vw ≈ 11.5px,差距 ~46px,
     但 logo 上方的 section padding 已经包含一部分"上方空间",实际看到间距约 80px
     下方的 footer-letters padding-top 40px 让上下视觉接近 */
  padding:max(40px, 3vw) 0 max(8px, 0.6vw);
}
.enter-cta-logo{
  display:block;
  width:max(48px, 3.2vw);
  height:auto;
  max-height:clamp(48px, 3.2vw, 80px);
  object-fit:contain;
  opacity:0.85;
}
.featured-journeys-logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  /* 2026-07-16 改:logo 与上下元素间距 ——
     与 enter-cta-logo-wrap 同款:上间距大、下间距小 */
  padding:max(40px, 3vw) 0 max(8px, 0.6vw);
}
.featured-journeys-logo{
  display:block;
  width:max(48px, 3.2vw);
  height:auto;
  max-height:clamp(48px, 3.2vw, 80px);
  object-fit:contain;
  opacity:0.85;
}
/* 旧 .container{max-width:1480;padding:0 32;margin:0 auto} 在 NJK 未引用,已合并到 .enter-cta 主类 */
.enter-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  /* 2026-07-14 改:gap 80px → clamp,跟视口等比缩放 */
  gap:clamp(32px, 4vw, 80px);
  /* 2026-07-14 改:align-items:start → stretch ——
     用户要求"右侧图片对齐左侧的上沿和下沿",
     stretch 让两列同高(默认就是 stretch,显式写出更清晰) */
  align-items:stretch;
}
/* 左:标题上 → 2x2 灰线图标 → 介绍下 */
.enter-text{text-align:left}
.enter-title {
  font-family: var(--font-display);
  font-size: max(28px, 3.1vw);       /* 与 .enter-image-tell 对齐 */
  font-weight: 900;
  color: var(--color-brand);
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 clamp(8px, 1vw, 14px);
  letter-spacing: 0.005em;
}
.enter-values{
  display:grid;
  grid-template-columns:1fr 1fr;
  /* 2026-07-24 fix:原 gap:64px 38px,row gap 64px,横线 top:50% 落在 row gap 偏上 32px —
     仍可能切到第一行 cell 下沿(标题/描述字号变化后行数变化,cell 高度浮动)。
     改 row gap 90px(留更宽呼吸空间),并把容器加 padding 让 row gap 真正独立。
     注:横线位置 h1/h2/h-center 仍 top:50%(无改),增加 gap 后视觉会落在 row gap 更正中 */
  gap:90px 38px;
  margin-bottom:36px;
  padding:24px 0;
  box-sizing:border-box;
  position:relative;              /* 让 .enter-cross 分割线相对本网格定位 */
}
.enter-value{
  text-align:center;
}
.enter-value__icon{
  width:88px;height:88px;
  margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
}
.enter-value__icon img{
  width:100%;height:100%;
  object-fit:contain;
}
.enter-value__title{
  font-family:var(--font-display);
  /* .xd "Bilingual Support" 32 Bold / 1920 = 1.67vw, min 16, max 40(4K 等比) */
  font-size:max(16px, 1.67vw);
  font-weight:800;                   /* .xd Bold (700) */
  color:var(--color-dark);
  text-transform:none;
  margin:0;
  line-height:1.25;
}
.enter-desc{
  font-family:var(--font-body);    /* 2026-07-16 改:跟 .enter-image-whether(右侧)同 font-family */
  /* 2026-07-16 改:字号与右侧对齐 ———
     右侧 .enter-image-whether 用 max(13px, 1.1vw)(无 max cap,与视口等比),
     左侧 .enter-desc 旧 clamp(13,1.2vw,16) 在 4K 视口 cap 到 16px,字号小于右侧
     改后两侧 1920px 都是 13*1.1=21.1px,4K 等比放大保持一致 */
  font-size:max(13px, 1.1vw);
  font-weight:700;
  line-height:1.65;                /* 跟右侧一致 */
  color:var(--color-brand);
  margin:0 0 clamp(12px, 1.4vw, 22px);   /* 2026-07-14 改:margin 0 → 0 0 22,跟 icon values 拉开 */
  max-width:none;
}
.enter-desc span{
  display:block;
  /* 2026-07-24 fix:原 white-space:nowrap 让 enter.desc.twoline 里的 \n 失效,
     导致两段被合并成单行;改 pre-line 让 partner, 后的 \n 真实换行 */
  white-space:pre-line;
}
.enter-image-whether span{
  display:block;
  white-space:nowrap;       /* 右图 cell 窄(~700px),nowrap 让两段各占一行,避免预格式 \n 在窄列里产生 4-5 行 */
}
/* 右:大图 + 文字/按钮悬浮在图上(用户要求:TELL US 顶到左上,button 底到右下) */
.enter-image{position:relative}
/* 删除旧 .enter-image-card 块(2471-2507):模板自 2026-07-17 改用真实 <picture> 后,
   已无 .enter-image-card / .enter-image-actions 节点,规则全部孤儿。
   .enter-image-actions 的两个按钮现在是 .enter-btn-plan / .enter-btn-work
   (见 4273 起新块) */
@media (max-width:900px){
  .enter-grid{grid-template-columns:1fr;gap:40px}
  .enter-values{grid-template-columns:1fr 1fr;gap:30px}
  /* ≤900px 单列,让 image 卡片垂直排列在左列下方,button 右下仍有效 */
  .enter-image-content{justify-content:space-between}
}
@media (max-width:720px){
  .enter-values{grid-template-columns:1fr;gap:30px}
}

/* === enter-cta 补全(NJK 用了但 .enter-grid 块未定义) === */
/* 2026-07-16 改:2 条贯穿的竖线 + 2 条贯穿的横线 ——
   容器 .enter-values 是 2x2 grid,4 条线:
   - 2 竖线(贯穿 cell 全高):top 半 + bottom 半,各占 50% 高度
   - 2 横线(贯穿 cell 全宽):left 半 + right 半,各占 50% 宽度
   - 横线中间 40-60% 位置用 linear-gradient 切成白色,形成分隔间隙
   - 整体效果:4 条线在 cell 中点不连通,横线视觉上像"破折号" */
.enter-cross{
  position:absolute;
  background:#d8d8d8;
  pointer-events:none;
}
/* 竖线 1:row1 col1,top 半,贯穿 cell 上半 50% 高度 */
.enter-cross--v1{
  left:50%;top:0;
  width:1px;height:50%;
  transform:translateX(-50%);
}
/* 竖线 2:row2 col1,bottom 半,贯穿 cell 下半 50% 高度 */
.enter-cross--v2{
  left:50%;top:50%;
  width:1px;height:50%;
  transform:translateX(-50%);
}
/* 2026-07-16 改:1 条贯穿的横线只切中央 ——
   用户要求合并 v1+v2 的左/右两段,做成 1 条横线 full cell 宽
   中间 45-55% 位置 white gap(单一 cut,而不是 2 段各 cut)
   左右两段 45% + 45% = 90% 都是灰线,中点 10% 是白 */
.enter-cross--h-center{
  top:50%;left:0;
  width:100%;height:1px;
  background:linear-gradient(to right, #d8d8d8 0%, #d8d8d8 45%, #fff 45%, #fff 55%, #d8d8d8 55%, #d8d8d8 100%);
  transform:translateY(-50%);
}
/* 2026-07-16 改:横线 h1 / h2 重新显示 ——
   用户反馈"4 个图标的横向灰色分割线不可见",
   之前 hide 后只剩 v1+v2(竖线)+ h-center(中间横线),row 之间没横线。
   恢复 h1(行 1 之间的横线)和 h2(行 2 之间的横线)——
   h1:行 1 cell 之间(其实 2x2 grid 行间只有 1 条横线,这里把 h1 当成"行 1 下边沿"用于覆盖 grid top 50%) */
.enter-cross--h1{
  top:50%;left:0;
  width:50%;height:1px;
  background:#d8d8d8;
  transform:translateY(-50%);
}
.enter-cross--h2{
  top:50%;left:50%;
  width:50%;height:1px;
  background:#d8d8d8;
  transform:translateY(-50%);
}
/* 4 个 icon 卡片的描述行 */
.enter-value__desc{
  font-family:var(--font-display);
  /* .xd "Clear communication..." 20 Regular / 1920 = 1.04vw, min 12, max 25 */
  font-size:max(12px, 1.04vw);
  font-weight:400;                   /* .xd Regular (400) */
  line-height:1.45;
  color:var(--color-text, #2a2a2a);
  margin:6px 0 0;
  opacity:.85;
}

/* ============================================
   11. 订阅弹窗(2026-09-05 直接复用 About submit-a-request 内容块)
   卡片视觉对齐 .about-submit-inner(3px 绿框 + 同款 padding/圆角),
   内部 head + Basic Information + 表单全部来自
   partials/about-submit-content.njk + about-overrides.css。
   ============================================ */
.subscribe-popup{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
}
.subscribe-popup.show{
  opacity:1;
  pointer-events:auto;
}
.subscribe-popup__backdrop{
  position:absolute;
  inset:0;
  background:rgba(8,12,18,0.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.subscribe-popup__card{
  position:relative;
  /* 与 About 页 .about-submit-inner 同外宽(100vw - 2*page-gutter)
     同 padding、同 3px 绿框,故表单内容宽 = About request form 内容列宽 */
  box-sizing:border-box;
  --popup-x:clamp(20px, 2.4vw, 36px);
  width:calc(100vw - 2 * var(--page-gutter));
  max-width:100%;
  background:#fff;
  border:3px solid var(--color-accent-mint);
  border-radius:max(14px, 1.4vw);
  padding:var(--popup-x);
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  transform:translateY(20px) scale(0.97);
  transition:transform .35s cubic-bezier(.2,.7,.3,1.1);
}
.subscribe-popup.show .subscribe-popup__card{
  transform:translateY(0) scale(1);
}
.subscribe-popup .subscribe-popup__close{
  position:absolute;
  top:8px;
  right:8px;
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid rgba(51,180,129,0.4);
  background:rgba(51,180,129,0.08);
  color:var(--color-accent-mint);
  font-family:var(--font-display);
  font-size:20px;
  line-height:1;
  display:none;
  align-items:center;justify-content:center;
  transition:background .2s ease, color .2s ease;
  cursor:pointer;
  z-index:5;
}
.subscribe-popup.show .subscribe-popup__close{
  display:flex;
}
.subscribe-popup .subscribe-popup__close:hover{
  background:var(--color-accent-mint);
  color:#fff;
}
/* 弹窗复用 About request form:在 head-right 列预留关闭钮空间,文本不再钻到按钮下 */
@media (min-width:769px){
  .subscribe-popup .about-submit-head-right{
    padding-right:clamp(48px, 4.6vw, 76px);
  }
}

/* ============================================
   12. Footer(主题绿底 + 文本全部白色 + Follow Us 4 QR 一排绿底)
   2026-08-02 整改:页面 footer 统一为单一 .wayon-footer 根容器,letters 字标带作为其第一个 child。
   - 引入 --footer-* token,所有 footer 后代(shell / letters / slogan / grid)统一引用
   - 高度断点(max-height:800/640)只调整 token 值,不直接改派生属性,避免字号跳变
   - 字标带去 height:vh 锁高,改为 width × aspect-ratio 自然比例
   ============================================ */
.wayon-footer{
  background:var(--color-accent-mint);
  color:#fff;
  width:100%;
  margin:0;
  position:relative;       /* 合并:原 2686 块 position:relative(给 .footer-stamp 绝对定位) */
  overflow:hidden;          /* 合并:原 2686 块 overflow:hidden */
  /* 2026-08-02 改:padding-top 0 —— 让 .footer-letters WAYON 字标图完全紧贴
     父容器顶端,不再在顶部留一道绿色空隙。底部 0.2vw 留给 slogan 之外的下沿。 */
  padding:0 0 0.2vw;

  /* === footer token 层:所有后代只读这些变量 === */
  --footer-pad-y: clamp(12px, 1.4vw, 22px);
  --footer-page-gutter: var(--page-gutter);
  --footer-row-gap: 3vw;
  --footer-col-gap: clamp(4px, 0.7vw, 14px);
  --footer-grid-margin-y: 2.4vw;
  /* 字标带顶部贴齐父容器(顶部 padding 归 0),
     底部留一段空白(letter band → CONTACT 列头)用来撑开图到首段文本的距离 */
  --footer-letters-pad-y: 0;
  --footer-letters-pad-bottom: clamp(28px, 3.5vw, 56px);
  --footer-slogan-pad-y: clamp(28px, 3.6vw, 56px);
  /* 2026-08-02 改:斜率同步。
     旧 slogan font-size 是 clamp(28, 7.2vw, 160) —— 斜率 7.2 px/vw,是
     .footer-h3--big (1.93 vw) 的 3.7×、.contact-item (0.8 vw) 的 9×。
     任何一个 viewport 变化 slogan 都独立跨阶缩放,与其它 footer 文本节奏脱节,
     max-height:640 freeze 下还出现 14-28% 视觉错位。

     改为 clamp(48, 5.4vw, 100):
     - 斜率 5.4 px/vw ≈ .footer-h3--big 的 2.8×,与 footer 文本同阶
     - cap 100 防 4K 超屏,slogan 不会无限放大
     - floor 48 保手机可读
     - 跨 1920/1280/1097/800 viewport,slogan:h3--big ratio 锁在 2.67–2.80

     --footer-slogan-fit-spacing 仍由 main.js fitFooterSlogan() 实时写入 (px) 作为
     字间距微调,在 CSS 给的字号基础上精确填满 viewport 宽度。 */
  /* 2026-08-02 改:用户最终诉求 —— slogan 在 100% 以下 zoom (80%/67%/50%) 不能显得太小。
     之前在 @media (min-width: 1921px) 锁 92.7px,实测仍不够。
     删掉 1921 lock,允许 slogan 在 ≥1921 viewport 继续 4.83vw 增长:
       - 2400 (80% zoom) → 116px
       - 2870 (67% zoom) → 139px
       - 3840 (50% zoom) → 185px
     代价:与 .footer-h3--big 的 2.5× ratio 在 100% 以下 zoom 不再成立
     (.footer-h3--big cap 36 锁住,slogan 继续涨),用户接受此取舍。
     cap 96 仍保 1920~1986 viewport 不会夸张。 */
  --footer-slogan-size: clamp(40px, 4.83vw, 96px);
  --footer-slogan-fit-spacing: 0.02em;
  --footer-logo-height: clamp(32px, 2.75vw, 52px);
  --footer-logo-margin: 1.6vw;
}
/* footer 内容容器:横向留白与 .nav-inner / header 完全一致 (var(--footer-page-gutter)),
   内容左沿 = header logo 左沿,内容右沿 = header CTA 右沿;
   去掉 max-width:1480px 上限 —— 之前会让超宽屏 footer 内容缩到中间,左右两侧露出大段绿底,
   与 header 左右贴边的视觉不一致。 */
.footer-shell{
  width:100%;
  margin:0;
  padding:var(--footer-pad-y) var(--footer-page-gutter) 0.2vw;
  box-sizing:border-box;
}
.footer-grid{
  /* 2026-07-14 改:grid 列宽从 2.4fr 1fr 1fr 1fr → 1fr 1fr 1fr 1fr
     四列等宽,brand 列(原本 2.4fr)缩到 1fr 与其余三列同宽 → EXPLORE / BEIJING / OTHERS
     三列整体推到 footer 右半区(每列 1fr 占 25% × 3 = 75%),brand 自然落在最左 25%。
     文本仍然单列内部居中(.footer-col text-align:center 不变) */
  display:grid;
  grid-template-columns:minmax(0, 28vw) minmax(0, 1fr);
  align-items:start;
  gap:var(--footer-row-gap);
  margin:0 0 var(--footer-grid-margin-y);
}
.footer-right-cols{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:var(--footer-col-gap);
  align-items:start;
  width:76%;
  min-width:0;
}
@media (max-width:768px){
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-right-cols{
    justify-self:stretch;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    column-gap:4px;
    width:100%;
  }
}
/* 2026-08-02 删:旧 max-width:1200 footer 重复规则(2529-2532)—— 行为被下方 3850 行同义规则覆盖,
   同一断点重复声明只增加阅读/编辑歧义,这里移除以保证高度断点调整时不会和它打架。 */
.footer-grid .footer-right-cols{
  justify-self:end;
  min-width:0;
  padding-right:0;
}
/* CONTACT(brand)列:左对齐 */
.footer-grid .footer-brand{
  text-align:left;
  justify-self:start;
  min-width:0;
  width:100%;
}
/* Explore / Beijing / Others:三整列靠右(由 grid 列宽实现),每列内部元素居中 */
.footer-grid .footer-col{
  text-align:center;
  min-width:0;
}
/* logo + 联系信息
   2026-08-02 改:footer logo 高度公式与 .nav-logo img 完全一致 = clamp(40px, 2.2vw, 44px)。
   原版 clamp(32, 2.75vw, 52) 在 1920 下为 ~52px,比 header 的 clamp cap 44 大 18%,
   一缩放两个 logo 视觉高度拉差,导致 footer-brand 顶部看起来"下沉"。统一后两边 logo
   同步缩放且左右基线经 .footer-shell padding-left = var(--page-gutter) 与 header 一致,
   左对齐得以维持。 */
.footer-brand img{
  height:clamp(40px, 2.2vw, 44px);
  width:auto;
  margin-bottom:var(--footer-logo-margin);
  /* footer logo on green bg needs white filter to keep readability */
}
/* CONTACT 板块标题:略小于右侧列标题,避免 CONTACT 列拥挤 */
.footer-h3{
  font-family:var(--font-display);
  font-size:clamp(16px, 1.45vw, 28px);
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:none;
  margin-bottom:1.2vw;
  color:#fff;
}
/* Explore / Beijing / Others 三列标题:28px Poppins 加粗(随视口缩放) */
.footer-h3--big{
  font-family:var(--font-display);
  font-size:clamp(18px, 1.93vw, 36px);
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:none;
  margin-bottom:1.6vw;
  color:#fff;
}
/* 标题若为链接(Beijing → destinations):继承样式、无下划线 */
.footer-h3--big a{color:inherit;text-decoration:none}
.footer-h3--big a:hover{opacity:.75}
/* CONTACT 下的联系信息:调小并控制地址换行,避免挤到第二列 */
.footer-brand .contact-item{
  font-family:var(--font-display);
  font-size:max(11px, 0.8vw);
  font-weight:400;
  color:#fff;
  line-height:1.55;
  margin-bottom:6px;
  white-space:nowrap;
}
.footer-brand .contact-item--address{
  display:block;
  max-width:24ch;
  white-space:normal;
}
.footer-brand .contact-item--address span{
  display:block;
}
.footer-brand .contact-item:last-of-type{
  margin-bottom:1.6vw;
}
/* 三列子项:21px Poppins 不加粗(随视口缩放) */
.footer-col ul li{
  font-family:var(--font-display);
  font-size:clamp(8px, 0.95vw, 18px);
  font-weight:400;
  line-height:1.6;
  color:#fff;
  white-space:nowrap;
  transition:opacity .2s ease;
  cursor:pointer;
}
.footer-col ul li:hover{opacity:.7}
.footer-col ul li a{color:inherit;text-decoration:none}
/* 北京 一项更大更粗 */
.footer-link--big{
  font-size:max(18px, 0.938vw)!important;
  font-weight:800!important;
}
/* 4 QR 一排,绿底(已去掉 FOLLOW US 标题与白色分割线) */
.footer-social{
  margin-top:2vw;
}
.footer-qr-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.2vw;
  max-width:min(100%, 360px);
}
.footer-qr-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.7vw;
  text-decoration:none;
}
.footer-qr-img{
  width:clamp(56px, 4.5vw, 88px);
  height:auto;
  aspect-ratio:1/1;
  display:block;
  border-radius:0;
  border:none;
  background:transparent;
  padding:0;
}
/* QR 名称(WhatsApp/WeChat 等):14px Poppins 不加粗(随视口缩放) */
.footer-qr-name{
  font-family:var(--font-display);
  font-size:clamp(10px, 0.78vw, 14px);
  font-weight:400;
  letter-spacing:0.04em;
  text-transform:none;
  color:#fff;
  text-align:center;
  line-height:1.2;
}
/* 印花:品牌声明 + 文化入口底部装饰 */
.brand-stamp-bottom{
  display:block;
  width:min(85%, 1000px);
  height:auto;
  margin:40px auto 0;
  opacity:0.18;
  pointer-events:none;
}
.entries-stamp-bottom{
  display:block;
  width:min(90%, 1100px);
  height:auto;
  margin:50px auto 0;
  opacity:0.16;
  pointer-events:none;
}
.footer-stamp{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(95%, 1200px);
  max-width:max(1480px, 77.083vw);
  height:auto;
  opacity:0.15;
  pointer-events:none;
  z-index:0;
}
/* slogan(WAYON CHINA · BEYOND ARRIVAL, LIES IMMERSION):始终铺满整个 footer 宽度。
   2026-08-02 改:左右 padding 归 0 —— 让 glyphs 直接延伸到 .wayon-footer 的左右外缘
   (= viewport 左右边缘),与 header .nav-logo 左缘 / .nav-cta-btn 右外缘 共享同一 x 轴。
   几何上:.nav-inner 与 .footer-slogan 都是 width:100% + padding 0;前者内部 logo/cta 的左/右
   元素自己也带 padding 但其外缘恰好贴 .nav-inner 的 border-box,等同于 viewport 两侧。
   slogan 同理,padding-x 归 0 后字符区从 viewport 一边填到另一边,与 cta 右外缘共线。

   JS 算法:
   - 由 main.js fitFooterSlogan 算 ratio + 把剩余 box 均分给 (charCount-1) 个 letter-spacing
   - box = el.clientWidth(元素 border-box 总宽)= viewport 宽(无 padding-x 时)
   - visibility:hidden 默认防 CLS;.is-fit 揭示 */
.footer-slogan{
  position:relative;
  width:100%;              /* 始终占满 .wayon-footer 100% 宽度 = viewport 宽 */
  max-width:none;
  box-sizing:border-box;
  text-align:center;
  /* 2026-08-02 改:恢复 padding-x = var(--footer-page-gutter) —— 用户实测反馈"slogan
     左右太靠边",让 glyph 区与 viewport 两缘各留一个 page-gutter 的内边距。
     几何上:
       - glyph 左缘 = var(--page-gutter) ≈ 7.5vw = header .nav-logo 左缘
       - glyph 右缘 = viewport - var(--page-gutter) = .nav-cta-btn 右外缘
     这样 glyph 不再贴 viewport 物理边缘,与 header 内容左右共线对齐。 */
  /* 2026-08-02 改:padding-x 从 var(--footer-page-gutter) (7.5vw, 1920 → 144px) 改成
     clamp(8px, 2vw, 32px) —— 用户实测反馈"slogan 左边距太大"。
     1920 给 32px(紧凑),1280 约 25.6px,小屏到 8px。
     glyph 离 viewport 物理边缘从 ~144px 缩到 ~32px,视觉不再"漂在远处"。 */
  padding:var(--footer-slogan-pad-y) clamp(8px, 2vw, 32px);
  font-family:var(--font-display);
  /* 2026-08-02 改:font-size 由 CSS (--footer-slogan-size) 拥有,
     JS 不再覆盖 —— 斜率与 .footer-h3--big 等 footer 文本同步。
     letter-spacing 仍由 JS 写入 --footer-slogan-fit-spacing 微调,
     在 CSS 给的字号下把字间距自动撑开/缩进填补 (viewport - glyph 自然宽) 剩余空隙。 */
  font-size:var(--footer-slogan-size);
  font-weight:400;
  line-height:1.1;
  /* 字间距走 JS 注入的 token */
  letter-spacing:var(--footer-slogan-fit-spacing);
  color:#fff;
  text-transform:uppercase;
  white-space:nowrap;
  /* 2026-08-02 改:不再用 visibility:hidden 默认 + .is-fit 揭示。
     旧方案依赖 JS 必须跑完一次 fit 才看到 slogan —— 如果 document.fonts 阻塞、
     ResizeObserver 未触发、或任何 JS throw,slogan 永远不可见(用户报告"文本不见")。
     新方案:slogan 直接可见,JS 只是微调 letter-spacing 让它精确铺满内容盒。
     即便 JS 失败,字号由 CSS clamp(64,10vw,200) 兜底保证可见可读;
     letter-spacing 默认 0.02em 接近设计稿宽度,视觉也不别扭。 */
}
.footer-slogan.is-fit{
  /* 兼容老 class:JS 加 .is-fit 后样式 hook,留作未来若需要再次切换隐藏 hook 用 */
}
/* 2026-07-14 清理:.footer-bottom 整套已删(NJK 也移除 footer-bottom 注解行),
   下方规则全部移除以免混淆 ——— */
/* ============================================
   12.7 中国地图 section(复用老版 wayon-china-map SVG)
   ============================================ */
.china-map-section{
  width:100%;
  /* 2026-07-16 改:padding 0 0 100px → 0 0 0 ——
     用户要求"上方和下方都不要留空白,sections 直接衔接" */
  padding:0;
  background:#fff;
  /* 2026-07-16 改:加 min-height ———
     用户要求"点击省份后地图与下面 sections 的距离变小,保持点击前距离"。
     根因:JS 把 #mapConnector svg 从 .section-shell 移到 .china-map-layout,
     移动后 .section-shell 高度丢失,导致整个 section 高度变化。
     min-height 锁定避免 section 高度被移动 SVG 撑/塌,保证 click 前/后高度一致 */
  min-height:max(720px, 55vw);
}
/* 2026-07-14 补:NJK 现用 .china-map-header / .china-map-pill / .china-map-title /
   .china-map-desc / .china-map-search(原 .map-header / .map-eyebrow / .map-title / .map-desc /
   .map-search 是死代码,NJK 早就不引用了),CSS 全部按截图补上 + 跟其他 section 缩放公式对齐
   截图样式:
     - .china-map-pill:橙底白字 pill,大写,letter-spacing 拉开
     - .china-map-title:超大字 orange,ExtraBold,大写
     - .china-map-desc:中等 orange 描述
     - .china-map-search:绿边(或橙边)圆角搜索框,placeholder 浅橙 */
.china-map-header{
  /* 2026-07-14 改:margin-bottom 50 → 24,跟上一个 section 紧贴 */
  text-align:center;
  margin:0 0 24px;
  padding:0 var(--home-gutter);
  box-sizing:border-box;
}
.china-map-pill{
  display:inline-block;
  background:var(--color-brand);
  color:#fff;
  font-family:var(--font-display);
  font-size:max(13px, 1.3vw);
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding:max(8px, 0.6vw) max(20px, 1.4vw);
  border-radius:999px;
  margin-bottom:18px;
}
.china-map-title{
  font-family:var(--font-display);
  font-size:max(28px, 3.1vw);
  line-height:1.1;
  font-weight:800;
  color:var(--color-brand);
  text-transform:uppercase;
  margin:0 0 16px;
  letter-spacing:0.005em;
}
.china-map-desc{
  font-family:var(--font-display);
  font-size:max(13px, 1.1vw);
  font-weight:500;
  line-height:1.6;
  color:var(--color-brand);
  margin:0 auto 24px;
  max-width:max(640px, 33.333vw);
}
.china-map-search{
  display:flex;
  align-items:center;
  gap:max(10px, 0.6vw);
  max-width:max(460px, 24vw);
  margin:0 auto;
  padding:max(7px, 0.45vw) max(8px, 0.55vw) max(7px, 0.45vw) max(18px, 1vw);
  border:max(1.5px, 0.078vw) solid var(--color-accent-mint);   /* 截图是绿边 */
  border-radius:999px;
  color:var(--color-accent-mint);
}
.china-map-search-input{
  flex:1;
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  font-family:var(--font-display);
  font-size:max(14px, 1.2vw);
  color:var(--color-text);   /* 输入文字用普通灰色,placeholder 才用主题色 */
}
.china-map-search-input::placeholder{color:#8f8f8f;opacity:.72}
.china-map-search-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max(28px, 1.65vw);
  height:max(28px, 1.65vw);
  background:transparent;
  border:0;
  border-radius:0;
  cursor:pointer;
  color:#8f8f8f;
  padding:0;
  flex:0 0 auto;
  line-height:1;
}
.china-map-search-btn:hover,
.china-map-search-btn:focus-visible{
  color:#666;
}
.china-map-search-icon{
  width:max(17px, 1.05vw);
  height:max(17px, 1.05vw);
  display:block;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2.4'/%3E%3Cpath d='M16.5 16.5 21 21' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2.4'/%3E%3Cpath d='M16.5 16.5 21 21' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.china-map-layout{
  position:relative;
  /* 2026-08-02 改:三列对称 grid。
     旧双列 grid 让地图只在左列内部居中,浏览器实测 1440 viewport 下地图中心偏左 172.8px。
     新结构:左空列 = 右卡片列,地图放正中列,因此地图中心始终与 viewport / layout 中心共线;
     卡片仍独立位于右列,不会覆盖地图。 */
  width:100%;
  margin:0 auto;
  display:grid;
  /* 卡片列横向增加约 10–15%;左右列保持完全等宽,地图仍严格居中 */
  grid-template-columns:clamp(220px, 19vw, 300px) minmax(0,1fr) clamp(220px, 19vw, 300px);
  align-items:center;
  /* 卡片总左移至 -36px 后同步扩大列间安全区;地图仍保持三列对称居中 */
  column-gap:clamp(40px, 3vw, 56px);
}
.china-map-wrap{
  grid-column:2;
  justify-self:stretch;
}
.china-map-card{
  grid-column:3;
}
/* 2026-07-16 改:.china-map-connector 默认尺寸 0×0 ——
   用户反馈"点击省份后 map section 高度变小"。
   根因:NJK 把 #mapConnector svg 写在 .section-shell 内,svg 没有显式
   width/height,browser 默认 300×150px → 未点击前就给 .section-shell 贡献 150px 高度。
   JS click 后把 svg 从 .section-shell append 到 .china-map-layout,
   并用 hostSvg.style.width/height 重新设定 → .section-shell 高度从
   "header + layout + 150px svg" 变成 "header + layout"(缩水 150px)。
   修:CSS 把 svg 默认 width:0 / height:0,JS 点击后再覆盖回 hr.width/height。
   保留 transition 配合 JS 设置时即时生效。 */
.china-map-connector{
  width:0;
  height:0;
  overflow:hidden;
  position:absolute;
  left:0;
  top:0;
  pointer-events:none;
}
.china-map-wrap{
  position:relative;
  width:100%;
  overflow:visible;
}
.china-map-wrap svg{
  /* 恢复原地图尺寸:卡片位移不再通过缩小地图来腾空间。 */
  width:min(100%, max(900px, 57.292vw));
  height:auto;
  display:block;
  margin:0 auto;
}
.china-map-wrap svg path{
  fill:#dddddd;
  stroke:#fff;
  stroke-width:1;
  /* 2026-07-14 改:无 tours 省份 → cursor:default(不可点击);有 tours → pointer */
  cursor:default;
  transition:fill .25s ease, stroke-width .25s ease;
}
.china-map-wrap svg path[data-has-url="true"]{ cursor:pointer }
/* 有配置省份:默认浅薄荷绿 */
.china-map-wrap svg path[data-has-url="true"]{
  fill:var(--color-mint);
}
/* 点击有配置省份 → 深薄荷绿(变深) + 加粗 stroke */
.china-map-wrap svg path[data-has-url="true"].active{
  fill:var(--color-accent-mint);
  stroke-width:1.8;
}
/* 点击无配置省份 → 橙 + 加粗 stroke */
.china-map-wrap svg path[data-has-url="false"].active{
  fill:var(--color-brand);
  stroke-width:1.8;
}
/* 信息卡:2026-08-02 改:grid child 占据 layout 第二列,layout 水平居中。
   旧 abs right-clamp 盖在地图上 → 现在 grid 让卡片自然在地图右侧且不相叠。
   进一步扁平:padding-y 再降 ~50% (7px → 5px),卡片纵向高度更短,长宽比更扁。 */
.china-map-card{
  position:relative;
  right:auto;
  top:auto;
  /* 2026-08-02 改:上一轮 -64px 只比 -60px 左移 4px,视觉不明显。
     本轮改为 -96px,一次明显左移 32px;连线终点由 JS 按卡片实际坐标自动跟随。 */
  transform:translateX(-96px);
  width:100%;
  background:#fff;
  /* box-shadow 保留作为唯一装饰 */
  box-shadow:0 14px 40px rgba(0,0,0,0.08);
  /* 进一步压缩:卡片列从 max 380 缩到 max 260;
     padding-y / padding-x 同步收紧,让卡片整体更短、更扁。 */
  padding:clamp(4px, 0.32vw, 7px) clamp(8px, 0.65vw, 12px);
  z-index:20;
}
.china-map-card[hidden]{display:none}
/* 2026-07-12 fix:卡片整体作为可点击区域(JS is-linkable + dataset.href 跳转)
   只有 is-linkable 状态才显示 pointer,不可跳转省份卡片光标不变 */
.china-map-card.is-linkable{cursor:pointer}
/* 2026-08-02 改:字体整体缩小到 ~2/3。
   旧 max(22, 1.9vw) → max(14.67, 1.27vw),line-height 1.1 保留。
   margin-bottom 同步缩 0.8vw → 0.53vw。 */
.china-map-card-title{
  margin:0 0 clamp(3px, 0.25vw, 5px);
  color:var(--color-dark);
  font-family:var(--font-display);
  /* 2026-08-02 改:在上一版基础上再明显放大约 1.3× */
  font-size:clamp(22px, 1.44vw, 27px);
  line-height:1.15;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.005em;
}
/* 2026-08-02 改:字号放大 1.3×,仍保持紧凑 line-height */
.china-map-card-desc{
  margin:0 0 clamp(4px, 0.3vw, 6px);
  color:var(--color-dark);
  font-family:var(--font-display);
  font-size:clamp(13.5px, 0.88vw, 17px);
  line-height:1.45;
}
.china-map-card-rule{
  width:100%;
  height:1px;
  background:var(--color-brand);
  margin:0 0 clamp(4px, 0.3vw, 6px);
}
.china-map-card-meta{
  color:var(--color-dark);
  font-family:var(--font-display);
  /* 2026-08-02 改:在上一版基础上再放大约 1.3×,并增加行高 */
  font-size:clamp(13.5px, 0.88vw, 17px);
  line-height:1.3;
  font-weight:700;
  letter-spacing:0.04em;
}
/* 旧 .china-map-card-link 已删除(2026-07-12):NJK 不再用 <a> 探索链接,
   卡片整体作为可点击区域(JS is-linkable + dataset.href 跳转) */
/* 旧 .wayon-map-card / .wayon-map-pin / .wayon-map-title / .wayon-map-desc / .wayon-map-line / .wayon-map-link 已删除(P1)
   .china-map-province-list(NJK 有引用但截图未显示)默认隐藏,JS 仍构建列表供后续扩展 */
.china-map-province-list{display:none}

@media (max-width:1024px){
  .china-map-layout{
    grid-template-columns:clamp(170px, 20vw, 220px) minmax(0,1fr) clamp(170px, 20vw, 220px);
    /* 卡片 -36px 时提高安全 gap,地图列略收窄但继续严格居中 */
    column-gap:clamp(36px, 4vw, 44px);
  }
  /* 恢复原地图尺寸;卡片左移安全空间仅由 grid gap 提供 */
  .china-map-wrap svg{width:100%;margin:0 auto;transform:none}
  .china-map-card{right:auto;width:100%;padding:4px 8px}
}
@media (max-width:900px){
  .china-map-layout{display:block}
  .china-map-wrap{overflow:hidden}
  .china-map-wrap svg{width:min(100%, max(560px, 100vw));margin:0 auto;transform:none}
  .china-map-card{
    position:relative;
    right:auto;top:auto;transform:none;
    width:min(280px, calc(100% - 40px));
    margin:20px auto 0;
    padding:4px 8px;
  }
}
@media (max-width:767px){
  .china-map-section{padding:50px 0 60px}
  /* title / desc / meta 继续使用上方统一 1.3× clamp,不再用旧的小字号覆盖 */
}

/* ============================================
   12.5 Footer 上方 WAYON 字母图(完整显示,无缝衔接绿底)
   2026-08-02 整改:作为 .wayon-footer 第一个 child(由 footer.njk include),
   padding 走 var(--footer-letters-pad-y);字母图走 aspect-ratio 自然比例,与 vh 锁高彻底解耦。
   ============================================ */
.footer-letters{
  background:transparent;       /* 2026-08-02 改:不再设白底 —— 让 .wayon-footer 绿底直接透过来,
                                    字标图上下 padding 那段显示为绿,不再有白带空隙感。
                                    图片本身仍带自带的白色画布(见下 .footer-letters-inner)。 */
  margin:0;
  padding:var(--footer-letters-pad-y) 0 var(--footer-letters-pad-bottom);
  line-height:0;
  text-align:center;
  overflow:hidden;
}
/* .footer-letters-inner:2026-08-02 改 display:inline-block → display:block。
   旧 inline-block 在 67% 以下 zoom (CSS viewport ≥ ~2500px) 时 shrink-to-fit
   到图片 PNG 自然宽 ~2400px < viewport,导致字标带左右两侧不满留空。
   改 block + width:100% 后,inner 强制占满 .footer-letters 内容盒 = viewport 全宽,
   不论 zoom 多少字标带都横拉到边。img 仍 width:100% 居中 background:#fff,
   视觉效果:白底长条从 viewport 一边到另一边,WAYON 字母图居中。 */
.footer-letters-inner{
  display:block;
  width:100%;
  background:#fff;
  margin:0;
  padding:0;
}
/* .footer-letters-img:WAYON 字母图,横向铺满后高度由 aspect-ratio(1932/344 ≈ 5.6:1)自然决定。
   2026-08-02 去 vh 锁高 + object-fit:fill 改为 contain —— 高度由 width × aspect-ratio 推出,
   避免短视口被 fill 强制撑宽再压扁。 */
.footer-letters-img{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  aspect-ratio:1932 / 344;
  margin:0;
  object-fit:contain;
}

/* ============================================
   13. 浮动社交栏(默认只显示 logo,hover logo 才出 4 个白底图标 + hover 图标弹 QR)
   ============================================ */
/* wayon-social-float uses uncapped viewport scaling to stay proportional at zoomed-out viewports. */
.wayon-social-float{
  position:fixed;
  right:max(12px, 1.25vw);    /* 24/1920 */
  top:50%;
  transform:translateY(-50%);
  z-index:9998;
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:auto;
}
/* logo 按钮(.float-logo):透明底方形品牌标记(social-logo.png 607x573),
   完整显示不裁切 —— 不要圆形遮罩,否则四角图形被切,与 WP 不一致 */
.float-logo{
  display:block;
  position:relative;
  z-index:2;
  width:max(36px, 3.13vw);   /* 60/1920 = 3.13vw, 窄屏不低于 36px */
  height:max(36px, 3.13vw);
  background:transparent;
  border:none;
  padding:0;
  flex:0 0 auto;
  cursor:pointer;
}
.float-logo-img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
/* 绿底长条 — 默认完全折叠(0 高 + 不渲染),hover logo 区域才展开 */
.float-bar{
  margin-top:max(8px, 0.625vw);   /* 12/1920 */
  background:var(--color-accent-mint);   /* 品牌绿底 */
  border-radius:999px;
  padding:max(8px, 0.625vw) max(5px, 0.42vw);  /* 12/8 / 1920 */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:max(5px, 0.42vw);            /* 8/1920 */
  box-shadow:0 max(8px, 0.42vw) max(22px, 1.15vw) rgba(0,0,0,0.18);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(calc(-1 * max(8px, 0.42vw))) scaleY(0.5);
  transform-origin:top center;
  transition:opacity .2s ease, transform .25s ease, visibility 0s linear .2s;
}
.wayon-social-float:hover .float-bar{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scaleY(1);
  pointer-events:auto;
  transition:opacity .2s ease, transform .25s ease, visibility 0s;
}
/* 4 个图标:绿底长条内,图标图透明底直接显示;hover 白底圈 + 放大 */
.float-icon{
  width:max(28px, 1.98vw);   /* 38/1920 = 1.98vw */
  height:max(28px, 1.98vw);
  background:transparent;
  border:none;
  border-radius:50%;
  padding:0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease;
  flex:0 0 auto;
}
.float-icon:hover{
  transform:scale(1.15);
  background:rgba(255,255,255,0.18);
}
/* icon 图片(WP:wechat_icon / rednote_icon / wa_icon) */
.float-icon-img{
  width:max(18px, 1.25vw);   /* 24/1920 = 1.25vw */
  height:max(18px, 1.25vw);
  object-fit:contain;
  display:block;
}
/* 当前选中(QR 打开)图标:白底圈高亮,凸显于绿底 */
.float-icon.is-open{
  background:#fff;
  transform:scale(1.1);
}
/* QR 弹卡:固定到右侧浮栏容器的左侧,viewport 高度居中(随 social-float 等比缩放) */
.float-qr{
  position:fixed;
  /* 固定到右侧 24px + float-logo 60px + 16px gap;与浮栏同节奏缩放 */
  right:calc(max(12px, 1.25vw) + max(36px, 3.13vw) + max(16px, 0.83vw));
  top:50%;
  transform:translateY(-50%) translateX(max(8px, 0.42vw));
  width:max(140px, 10.42vw);   /* 200/1920 = 10.42vw */
  background:#fff;
  border-radius:max(16px, 0.83vw);
  padding:max(8px, 0.73vw);
  box-shadow:0 max(14px, 0.73vw) max(36px, 1.875vw) rgba(0,0,0,0.18);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:99999;
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  text-align:center;
}
/* JS 用 hidden 属性切换显隐(social-float.njk / main.js openQr/closeQr)。
   去掉 hidden 即显示;保留 .is-show 兼容旧写法 */
.float-qr:not([hidden]),
.float-qr.is-show{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) translateX(0);
  transition:opacity .2s ease, transform .2s ease, visibility 0s;
}
/* [hidden] 默认 display:none 会中断过渡;这里恢复为可过渡的隐藏态 */
.float-qr[hidden]{
  display:block;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
/* QR 关闭按钮 */
.float-qr-close{
  position:absolute;
  top:max(6px, 0.31vw);right:max(10px, 0.52vw);
  border:none;
  background:transparent;
  font-size:max(20px, 1.042vw);
  line-height:1;
  color:var(--color-text);
  cursor:pointer;
  opacity:.6;
  transition:opacity .2s ease;
}
.float-qr-close:hover{ opacity:1; }
.float-qr img{
  width:100%;height:max(170px, 8.85vw);
  object-fit:contain;
  display:block;
  border-radius:max(6px, 0.31vw);
}
.float-qr-label{
  margin-top:max(8px, 0.42vw);
  font-family:var(--font-body);
  font-size:max(12px, 0.625vw);
  font-weight:600;
  letter-spacing:0.12em;
  color:var(--color-text);
  text-transform:uppercase;
}

/* ============================================
   14. 通用详情页头(用于 destinations/detail / cultural-keepers/detail / travelogue 列表)
   区别于 .page-hero(二级页列表 16:9):本类用单图 + 文字水平居中,比例更宽
   ============================================ */
.detail-page-hero{
  position:relative;
  width:100%;
  aspect-ratio:21 / 9;          /* 单图横向更舒展 */
  min-height:480px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding:0 var(--page-gutter);
}
@media (max-width:767px){
  .detail-page-hero{
    aspect-ratio:auto;
    min-height:62vh;
  }
}
.detail-page-hero::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.6));
}
.detail-page-hero .inner{
  position:relative;
  z-index:2;
  max-width:max(880px, 45.833vw);
}
.detail-page-hero .eyebrow{
  display:inline-block;
  font-size:max(11px, 0.573vw);
  letter-spacing:0.32em;
  text-transform:uppercase;
  background:rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.3);
  padding:8px 18px;
  border-radius:999px;
  margin-bottom:20px;
  backdrop-filter:blur(4px);
}
.detail-page-hero h1{
  font-family:var(--font-display);
  font-size:max(40px, 6vw);
  text-transform:uppercase;
  line-height:1.05;
  margin-bottom:18px;
}
.detail-page-hero p{
  font-family:var(--font-serif);
  font-size:max(17px, 0.885vw);
  line-height:1.6;
  max-width:max(640px, 33.333vw);
  margin:0 auto;
  opacity:0.95;
}

/* ============================================
   15. 列表卡片 (Journeys / Destinations / Travelogue)
   ============================================ */
.list-page{padding:100px 24px}
.list-page .container{max-width:max(1280px, 66.667vw)}
.list-page .page-head{
  text-align:center;
  margin-bottom:60px;
}
.list-page .eyebrow{
  display:inline-block;
  font-size:max(11px, 0.573vw);
  letter-spacing:0.32em;
  text-transform:uppercase;
  background:var(--color-dark);
  color:#fff;
  padding:10px 22px;
  border-radius:999px;
  margin-bottom:20px;
}
.list-page h1{
  font-family:var(--font-display);
  font-size:max(36px, 5vw);
  text-transform:uppercase;
  line-height:1.1;
  color:var(--color-dark);
  margin-bottom:18px;
}
.list-page .lead{
  font-family:var(--font-serif);
  font-size:max(17px, 0.885vw);
  line-height:1.7;
  color:var(--color-text);
  max-width:max(680px, 35.417vw);
  margin:0 auto;
}

.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-bottom:50px;
}
.filter-bar a{
  padding:9px 20px;
  border:1.5px solid rgba(0,0,0,0.1);
  border-radius:999px;
  font-size:max(13px, 0.677vw);
  font-weight:500;
  color:var(--color-text);
  letter-spacing:0.04em;
  transition:all .25s ease;
}
.filter-bar a:hover,
.filter-bar a.active{
  background:var(--color-dark);
  color:#fff;
  border-color:var(--color-dark);
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.card-grid.cols-2{grid-template-columns:repeat(2, 1fr)}
.card-grid.cols-4{grid-template-columns:repeat(4, 1fr)}

.l-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  transition:all .35s ease;
  box-shadow:0 6px 20px rgba(0,0,0,0.04);
  display:flex;
  flex-direction:column;
}
.l-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(0,0,0,0.1);
}
.l-card .img{
  height:240px;
  background-size:cover;
  background-position:center;
  position:relative;
}
.l-card .img .tag{
  position:absolute;
  top:14px;left:14px;
  background:rgba(255,255,255,0.95);
  padding:5px 12px;
  font-size:max(10px, 0.521vw);
  letter-spacing:0.18em;
  text-transform:uppercase;
  border-radius:999px;
  color:var(--color-dark);
  font-weight:600;
}
.l-card .body{
  padding:24px 22px 22px;
  display:flex;flex-direction:column;
  flex:1;
}
.l-card h3{
  font-family:var(--font-display);
  font-size:max(22px, 1.146vw);
  color:var(--color-dark);
  text-transform:uppercase;
  margin-bottom:8px;
  line-height:1.2;
}
.l-card .meta{
  font-size:max(11px, 0.573vw);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--color-text);
  margin-bottom:12px;
}
.l-card p{
  font-family:var(--font-serif);
  font-size:max(14px, 0.729vw);
  line-height:1.6;
  color:var(--color-text);
  margin-bottom:18px;
  flex:1;
}
.l-card .link{
  font-size:max(11px, 0.573vw);
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--color-dark);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.l-card .link::after{content:"→";transition:transform .25s ease}
.l-card:hover .link::after{transform:translateX(4px)}

/* ============================================
   16. 详情页 (Article / Detail)
   ============================================ */
.detail-hero{
  position:relative;
  height:75vh;
  min-height:560px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:flex-end;
  color:#fff;
  padding:0 0 60px;
}
.detail-hero::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
}
.detail-hero .inner{
  position:relative;
  z-index:2;
  max-width:max(920px, 47.917vw);
  margin:0 auto;
  padding:0 var(--page-gutter);
  width:100%;
}
.detail-hero .eyebrow{
  display:inline-block;
  font-size:max(11px, 0.573vw);
  letter-spacing:0.32em;
  text-transform:uppercase;
  background:rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.3);
  padding:8px 18px;
  border-radius:999px;
  margin-bottom:18px;
}
.detail-hero h1{
  font-family:var(--font-display);
  font-size:max(40px, 5.5vw);
  text-transform:uppercase;
  line-height:1.05;
  margin-bottom:16px;
}
.detail-hero .meta{
  display:flex;gap:24px;
  font-size:max(12px, 0.625vw);
  letter-spacing:0.18em;
  text-transform:uppercase;
  opacity:0.9;
}
.detail-content{
  max-width:max(780px, 40.625vw);
  margin:0 auto;
  padding:80px 24px;
  font-family:var(--font-serif);
  font-size:max(18px, 0.938vw);
  line-height:1.85;
  color:var(--color-text);
}
.detail-content h2{
  font-family:var(--font-display);
  font-size:max(32px, 1.667vw);
  color:var(--color-dark);
  text-transform:uppercase;
  margin:50px 0 18px;
  letter-spacing:0.02em;
}
.detail-content h3{
  font-family:var(--font-display);
  font-size:max(24px, 1.25vw);
  color:var(--color-dark);
  text-transform:uppercase;
  margin:30px 0 14px;
}
.detail-content p{margin-bottom:24px}
.detail-content blockquote{
  border-left:3px solid var(--color-dark);
  padding:20px 28px;
  margin:36px 0;
  font-style:italic;
  color:var(--color-dark);
  font-size:max(22px, 1.146vw);
  line-height:1.5;
}
.detail-content img{
  border-radius:12px;
  margin:30px 0;
}
.detail-content ul{
  list-style:disc;
  padding-left:24px;
  margin-bottom:24px;
}
.detail-content ul li{margin-bottom:10px}

.detail-gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  max-width:max(1280px, 66.667vw);
  margin:0 auto;
  padding:0 var(--page-gutter) 80px;
}
.detail-gallery img{
  width:100%;
  height:280px;
  object-fit:cover;
  border-radius:10px;
}

/* ============================================
   17. 关于页面 (About)
   ============================================ */
.about-section{
  padding:100px 24px;
  max-width:max(1100px, 57.292vw);
  margin:0 auto;
}
.about-section .about-intro{
  text-align:center;
  margin-bottom:80px;
}
.about-section .eyebrow{
  display:inline-block;
  font-size:max(11px, 0.573vw);
  letter-spacing:0.32em;
  text-transform:uppercase;
  background:var(--color-dark);
  color:#fff;
  padding:10px 22px;
  border-radius:999px;
  margin-bottom:20px;
}
.about-section h1{
  font-family:var(--font-display);
  font-size:max(36px, 5vw);
  text-transform:uppercase;
  line-height:1.1;
  color:var(--color-dark);
  margin-bottom:24px;
}
.about-section .lead{
  font-family:var(--font-serif);
  font-size:max(18px, 0.938vw);
  line-height:1.8;
  color:var(--color-text);
  max-width:max(760px, 39.583vw);
  margin:0 auto;
}
.about-mission{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  margin-bottom:80px;
  align-items:center;
}
.about-mission .img{
  height:500px;
  background-size:cover;
  background-position:center;
  border-radius:16px;
}
.about-mission h2{
  font-family:var(--font-display);
  font-size:max(42px, 2.188vw);
  text-transform:uppercase;
  color:var(--color-dark);
  margin-bottom:24px;
  line-height:1.1;
}
.about-mission p{
  font-family:var(--font-serif);
  font-size:max(17px, 0.885vw);
  line-height:1.8;
  color:var(--color-text);
  margin-bottom:18px;
}
.values-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:60px;
}
.value-item{
  background:var(--color-bg);
  border-radius:16px;
  padding:36px 28px;
  text-align:center;
}
.value-item .icon{
  width:60px;height:60px;
  margin:0 auto 20px;
}
.value-item .icon img{width:100%;height:100%;object-fit:contain}
.value-item h3{
  font-family:var(--font-display);
  font-size:max(22px, 1.146vw);
  text-transform:uppercase;
  color:var(--color-dark);
  margin-bottom:10px;
}
.value-item p{
  font-family:var(--font-serif);
  font-size:max(14px, 0.729vw);
  line-height:1.6;
  color:var(--color-text);
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  margin-top:60px;
}
.team-card{
  text-align:center;
}
.team-card .img{
  width:100%;
  height:280px;
  background-size:cover;
  background-position:center;
  border-radius:14px;
  margin-bottom:18px;
  background-color:var(--color-bg);
}
.team-card h3{
  font-family:var(--font-display);
  font-size:max(22px, 1.146vw);
  text-transform:uppercase;
  color:var(--color-dark);
  margin-bottom:4px;
}
.team-card .role{
  font-size:max(11px, 0.573vw);
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--color-text);
}

/* ============================================
   18. 联系页
   ============================================ */
.contact-section{
  padding:100px 24px;
  max-width:max(1280px, 66.667vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
}
.contact-info .eyebrow{
  display:inline-block;
  font-size:max(11px, 0.573vw);
  letter-spacing:0.32em;
  text-transform:uppercase;
  background:var(--color-dark);
  color:#fff;
  padding:10px 22px;
  border-radius:999px;
  margin-bottom:20px;
}
.contact-info h1{
  font-family:var(--font-display);
  font-size:max(36px, 4.5vw);
  text-transform:uppercase;
  line-height:1.1;
  color:var(--color-dark);
  margin-bottom:24px;
}
.contact-info .lead{
  font-family:var(--font-serif);
  font-size:max(17px, 0.885vw);
  line-height:1.7;
  color:var(--color-text);
  margin-bottom:36px;
}
.contact-info .info-list{
  margin-top:30px;
}
.contact-info .info-item{
  display:flex;align-items:flex-start;gap:14px;
  margin-bottom:20px;
}
.contact-info .info-item .ico{
  width:38px;height:38px;
  background:var(--color-bg);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:max(16px, 0.833vw);
  flex-shrink:0;
}
.contact-info .info-item .label{
  font-size:max(11px, 0.573vw);
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--color-text);
  margin-bottom:4px;
}
.contact-info .info-item .val{
  font-family:var(--font-serif);
  font-size:max(15px, 0.781vw);
  color:var(--color-dark);
}

.contact-form{
  background:var(--color-bg);
  border-radius:20px;
  padding:50px 44px;
}
.contact-form h3{
  font-family:var(--font-display);
  font-size:max(28px, 1.458vw);
  text-transform:uppercase;
  color:var(--color-dark);
  margin-bottom:8px;
}
.contact-form p{
  font-family:var(--font-serif);
  font-size:max(14px, 0.729vw);
  color:var(--color-text);
  margin-bottom:30px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:18px;
}
.form-field{margin-bottom:18px}
.form-field label{
  display:block;
  font-size:max(11px, 0.573vw);
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--color-text);
  margin-bottom:8px;
  font-weight:600;
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  padding:14px 18px;
  border:1.5px solid rgba(0,0,0,0.08);
  border-radius:10px;
  background:#fff;
  font-size:max(15px, 0.781vw);
  color:var(--color-dark);
  font-family:var(--font-body);
  outline:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(4,107,210,0.08);
}
.form-field textarea{
  resize:vertical;
  min-height:120px;
}
.form-submit{
  background:var(--color-dark);
  color:#fff;
  border:none;
  padding:16px 32px;
  border-radius:999px;
  font-size:max(12px, 0.625vw);
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .25s ease;
  font-family:var(--font-body);
}
.form-submit:hover{background:var(--color-primary)}
.form-message{
  margin-top:14px;
  padding:12px 16px;
  border-radius:8px;
  font-size:max(14px, 0.729vw);
  display:none;
}
.form-message.success{background:#d1fae5;color:#065f46;display:block}
.form-message.error{background:#fee2e2;color:#991b1b;display:block}

/* ============================================
   18.5 语言切换器 (导航栏内，菜单与CTA之间)
   ============================================ */
.lang-switcher{
  display:flex;
  align-items:center;
  gap:max(8px, 0.42vw);
  font-family:var(--font-body);
  font-size:max(12px, 0.63vw);
  font-weight:600;
  letter-spacing:0.16em;
  /* 2026-07-14 改:简中|English 一直保持白色,不再随滚动变色 */
  color:#ffffff !important;
  user-select:none;
  white-space:nowrap;
  flex-shrink:0;
  margin:0 max(4px, 0.21vw);
}
/* 2026-07-14 删:.site-navbar.is-scrolled .lang-switcher{ color:var(--color-text); } ——
     用户要求"简体中文|English 不变色,一直用白色" */
.lang-switcher a{
  cursor:pointer;
  padding:4px 6px;
  opacity:0.55;
  transition:opacity .25s ease, color .25s ease;
  text-decoration:none;
  line-height:1;
}
.lang-switcher a.active{ opacity:1; font-weight:700; }
.lang-switcher a:hover{ opacity:1; }
.lang-switcher .sep{ opacity:0.35; }
@media (max-width:1024px){
  .lang-switcher{ font-size:max(11px, 0.573vw); gap:6px; margin:0 2px; }
  .lang-switcher a{ padding:4px 3px; }
}
@media (max-width:768px){
  /* 移动端隐藏，移动端菜单中通过 lang-mobile 提供 */
  .lang-switcher{ display:none; }
}
/* 移动端菜单中的语言切换 */
.lang-mobile{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 24px;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:max(13px, 0.68vw);
  font-weight:600;
  letter-spacing:0.16em;
}
.lang-mobile a{
  cursor:pointer;
  opacity:0.55;
  transition:opacity .25s ease;
}
.lang-mobile a.active{ opacity:1; }
.lang-mobile a:hover{ opacity:1; }
@media (min-width:769px){ .lang-mobile{ display:none; } }

/* 中文字体优化 */
body.lang-zh{
  font-family:'PingFang SC','Microsoft YaHei','Hiragino Sans GB','Heiti SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
body.lang-zh .hero-title,
body.lang-zh .brand-statement h2,
body.lang-zh .cultural-entries h2,
body.lang-zh .featured-header h2,
body.lang-zh .destinations-section h2,
body.lang-zh .travelogue-section h2,
body.lang-zh .enter-info h2,
body.lang-zh .enter-image-card h2,
body.lang-zh .detail-content h2,
body.lang-zh .l-card h3,
body.lang-zh .about-section h1,
body.lang-zh .about-mission h2{
  font-family:'PingFang SC','Microsoft YaHei','Hiragino Sans GB','Heiti SC',sans-serif;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:none;
}
body.lang-zh .hero-eyebrow,
body.lang-zh .brand-statement .eyebrow,
body.lang-zh .nav-menu a,
body.lang-zh .nav-cta .cta-btn,
/* 2026-08-02 改:删除 body.lang-zh .footer-slogan —— JS 用 inline style 设的
   --footer-slogan-fit-spacing 比类选择器 specificity 更高,旧条目会盖 JS 注入,
   这里剔除以保证中英页面均走 JS 拟合。 */
body.lang-zh .btn,
body.lang-zh .form-submit,
body.lang-zh .destinations-section .eyebrow,
body.lang-zh .cultural-entries .eyebrow,
body.lang-zh .featured-header .eyebrow,
body.lang-zh .travelogue-section .eyebrow,
body.lang-zh .enter-info .eyebrow,
body.lang-zh .contact-info .eyebrow,
body.lang-zh .page-head .eyebrow,
body.lang-zh .lang-switcher,
body.lang-zh .destination-tags a,
body.lang-zh .filter-bar a{
  text-transform:none;
  letter-spacing:0.05em;
}

@media (max-width:1200px){
  .entry-grid{grid-template-columns:1fr 1fr}
  .entry-card.big{grid-column:span 2;grid-row:auto;min-height:280px}
  /* 2026-08-02 改:1200 断点不再无条件让 .footer-brand 独占一整行 —
     旧规则在桌面浏览器放大 125%-200%(CSS viewport 落到 ≤1200)时把 footer 高度几乎翻倍,
     是"footer+footer-letters 同屏放不下"的最大单一因素。
     新规则:只在 (宽度 ≤1200 且高度 ≥720) 时才走"品牌独占整行 + 3 列导航"两行布局;
     高度不足的短视口保留两栏 + 自动收缩,避免总高超过 viewport。 */
  .footer-grid{grid-template-columns:minmax(0, 28vw) minmax(0, 1fr);gap:clamp(16px, 2vw, 32px)}
  .footer-grid .footer-brand{text-align:left}
  .footer-grid .footer-brand .contact-item--address{margin:0}
  .footer-grid .footer-col{text-align:center}
  .footer-qr-row{max-width:min(100%, 360px)}
}
@media (max-width:1200px) and (min-height:720px){
  /* 高度充裕但宽度不足:此时才允许 brand 独占整行,
     因为水平方向已无空间并排 4 列内容 */
  .footer-grid{grid-template-columns:repeat(3, minmax(0, 1fr));gap:max(30px, 4vw)}
  .footer-grid .footer-brand{grid-column:1 / -1;text-align:center}
  .footer-grid .footer-brand .contact-item--address{margin:0 auto}
  .footer-qr-row{max-width:min(100%, 720px);margin:0 auto}
}
@media (max-width:1320px){
  /* 压缩态固定为单行:logo | 弹性空白 | 语言 | 汉堡包。
     显式指定同一 grid-row,避免 .nav-right 和 .nav-toggle 占用同一列时被自动排到两行。
     1fr 吸收中间空间,语言切换器向页面中间移动,汉堡包保持在右缘并与 logo 垂直居中。 */
  .nav-inner{
    grid-template-columns:auto minmax(0, 1fr) auto auto;
    column-gap:clamp(12px, 1.5vw, 24px);
  }
  .nav-logo{grid-column:1;grid-row:1;align-self:center;justify-self:start}
  .nav-right{grid-column:3;grid-row:1;align-self:center;justify-self:end}
  .nav-toggle{grid-column:4;grid-row:1;align-self:center;justify-self:end}
  /* 2026-07-14 改:断点从 900px 升到 1100px ——
     桌面 nav (logo + 6 menu items + lang + CTA) 自然宽度约 1110px,
     <1100px 时 CTA 会被推到窗口外;在此断点切到汉堡包布局,把 CTA 收入下拉菜单 */
  /* 下拉框:与 header 默认底色(rgba(0,0,0,0.45) + blur 6px)一致,紧贴 header 右缘;默认隐藏,需点击汉堡才展开
     2026-07-14 改:width 200px → 240px,内 padding 10 → 14,gap 4 → 6,菜单项 padding 3px 0 → 7px 0,
     font-size 10 → 12 —— 用户反馈"手机下 headers 压缩的内容",放开菜单项间距和字号,更好点击 */
  .nav-menu{display:none;position:absolute;top:100%;right:32px;left:auto;width:240px;background:rgba(0,0,0,0.45);backdrop-filter:saturate(160%) blur(6px);-webkit-backdrop-filter:saturate(160%) blur(6px);flex-direction:column;padding:14px;gap:6px;box-shadow:0 6px 20px rgba(0,0,0,0.4);border-radius:0 0 0 6px}
  /* 不再 .is-scrolled .nav-menu{display:flex} —— 滚动不自动展开,需点击 .open 才显示 */
  .nav-menu a{color:#fff!important;font-size:max(13px, 0.78vw);letter-spacing:0.08em;padding:7px 0}
  .nav-menu.open{display:flex}
  .nav-toggle{display:block}
  .nav-cta-btn{display:none}
  /* 移动菜单里显示 CTA 胶囊(桌面隐藏)
     2026-07-14 改:font-size 12→10 + letter-spacing 0.16em→0.08em + padding 12px 26px→10px 18px +
     text-align:center + white-space:nowrap ——
     原配置 "PLAN YOUR JOURNEY" 文本宽 ~203px,超出 200px 下拉框的 180px 内容区,
     文本会越过橙色胶囊右缘显示。修正后文本宽 ~149px,完整包在胶囊内 */
  .nav-menu-cta{
    /* 2026-07-14 改:页面放大后,header 下拉菜单里的 plan your journey 框要加长 —
       display 改 block + width 100% 占满下拉框内容区;padding 加大;font-size 适度放大 */
    display:block;
    align-self:stretch;
    margin:8px 0 0;
    padding:14px 24px;
    font-size:max(11px, 0.573vw);
    letter-spacing:0.10em;
    text-align:center;
    white-space:nowrap;
    width:100%;
    box-sizing:border-box;
  }
  .keeper-grid{grid-template-columns:repeat(3, 1fr)}
  .journey-cards,
  .card-grid{grid-template-columns:repeat(2, 1fr)}
  .card-grid.cols-4{grid-template-columns:repeat(2, 1fr)}
  .enter-section{grid-template-columns:1fr}
  .about-mission{grid-template-columns:1fr;gap:30px}
  .about-mission .img{height:340px;order:-1}
  .team-grid{grid-template-columns:repeat(2, 1fr)}
  .contact-section{grid-template-columns:1fr;gap:30px}
  .story-grid{grid-template-columns:1fr 1fr}
  .story-grid .story-card:nth-child(3){grid-column:span 2;height:360px}
  .wayon-social-float{right:max(14px, 1.25vw)}
  /* 2026-09-05 居中模态;尺寸随 About request form 公式自适应,仅缩小外边距 */
  .subscribe-popup{padding:16px}
}
@media (max-width:768px){
  :root{--page-gutter:18px}
  .nav-inner{padding:0 var(--page-gutter)}
  .nav-logo img{height:38px}
  /* .home-hero / .hero-stage / .hero-stage-bottom / .hero-title / .hero-divider /
     .hero-buttons 等的 <768 fallback 由第 §2 hero 块内的 @media (max-width:767px) 统一管理 */
  .brand-statement:not(.brand-statement--stamp){padding:80px 24px}
  .keeper-grid{grid-template-columns:1fr 1fr;gap:12px}
  .keeper-card{padding:24px 20px 80px;min-height:280px}
  .entry-grid{grid-template-columns:1fr;gap:14px}
  .entry-card.big{grid-column:auto;min-height:240px}
  .journey-cards,
  .card-grid,
  .card-grid.cols-2,
  .card-grid.cols-4{grid-template-columns:1fr;gap:18px}
  .values-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .footer-grid .footer-brand,
  .footer-grid .footer-col{text-align:left}
  .footer-qr-row{grid-template-columns:repeat(2, minmax(0, 1fr));gap:18px;max-width:none;margin:0}
  .footer-qr-item{align-items:flex-start}
  .footer-qr-img{width:max(86px, 24vw)}
  .form-row{grid-template-columns:1fr}
  /* 2026-09-05 居中模态在 768 以下依然显示,只缩小外边距 */
  .subscribe-popup{padding:12px}
  .wayon-social-float{display:none}
  .detail-content{padding:50px 20px;font-size:max(16px, 0.833vw)}
  .detail-content blockquote{font-size:max(18px, 0.938vw);padding:16px 20px}
}
@media (max-width:480px){
  .keeper-grid{grid-template-columns:1fr}
  /* .hero-buttons / .hero-buttons .btn <480 由 §2 内 767 块管,不再重复 */
  .enter-image-card{padding:40px 28px;min-height:420px}
  .contact-form{padding:32px 24px}
}

/* ============================================
   2026-08-02 新增:短高度 viewport 适配(footer + footer-letters 同屏兜底)
   触发条件:浏览器高度 < 800px(典型笔记本 13-14" 默认 zoom、桌面浏览器缩小到 80%、
   短高横屏手机、部分窗口分屏),此时视口高度本身就不够,需要压缩底部 stack。
   关键目标:footer-letters + footer 整体在一屏内可看全,且**不直接覆盖派生字号/padding**,
   只调整 .wayon-footer 的 token —— 保证 slogan/logo/地址/QR 等元素连续平滑过渡,
   不再有 .footer-slogan 在 800/640 跳 clamp()、.footer-brand img 跳 28px 的断层。
   ============================================ */
@media (max-height:800px){
  .wayon-footer{
    padding:0 0 0.2vw;          /* 短屏仍要 letter-band 紧贴 footer 顶端 */
    --footer-pad-y: clamp(10px, 1vw, 16px);
    /* 2026-08-02 改:删除 --footer-page-gutter: clamp(20,3vw,40) 覆盖 —— 局部 gutter
       会让 .footer-shell 的 padding-left 与 header .nav-inner 不同(后者仍走 root
       var(--page-gutter) = 7.5vw),从而 footer-logo 左缘在 1920×800 短屏下偏离 header
       logo 左缘达 100+px ("一缩放就变形"的根因)。现在 footer 永远跟随 root gutter,
       永远与 header 左对齐。 */
    --footer-row-gap: 1.6vw;
    --footer-grid-margin-y: 1.4vw;
    /* 短屏保留"图与首段文本拉开"的视觉,但整体往下压 */
    --footer-letters-pad-y: 0;
    --footer-letters-pad-bottom: clamp(16px, 2vw, 28px);
    --footer-slogan-pad-y: clamp(16px, 2.2vw, 32px);
    --footer-logo-margin: 1vw;
  }
  /* 字号/padding 由 token 派生,这里不再单独覆盖 */
  .footer-h3{margin-bottom:0.8vw}
  .footer-h3--big{margin-bottom:1vw}
  .footer-social{margin-top:1.2vw}
}
@media (max-height:640px){
  /* 极端短高度(老笔记本默认 zoom / 缩小浏览器到 75%):进一步压缩 token。
     关键:不再把 logo height 锁死 28px、slogan 锁 clamp(18,2vw,28) —— 这些都让对应
     元素在不同 zoom 间出现断崖跳变。现在全部通过 token 缩小,字号连续。 */
  .wayon-footer{
    --footer-row-gap: 1vw;
    --footer-grid-margin-y: 0.8vw;
    --footer-letters-pad-y: 0;
    --footer-letters-pad-bottom: clamp(10px, 1.2vw, 18px);
    --footer-slogan-pad-y: clamp(12px, 1.6vw, 22px);
    /* 2026-08-02 改:删除 --footer-page-gutter: 16px —— 同 max-height:800,
       保持 footer 跟随 root --page-gutter,与 header 永远左对齐 */
    /* 2026-08-02 改:不再删 --footer-slogan-size —— 现在由 CSS 的
       var(--footer-slogan-size) = clamp(48,5.4vw,100) 决定,JS 不再写 font-size;
       本块只需负责 freeze 让它在极短屏稳定 56px。 */
    --footer-logo-height: clamp(40px, 2.2vw, 44px);   /* 与 base / header logo 同步 */
    --footer-logo-margin: 0.6vw;
  }
  .footer-h3{font-size:14px;margin-bottom:0.4vw;line-height:1.4}
  .footer-h3--big{font-size:16px;margin-bottom:0.6vw;line-height:1.4}
  .footer-brand .contact-item{font-size:11px;line-height:1.4;margin-bottom:3px}
  .footer-col ul li{font-size:11px;line-height:1.4}
  /* 2026-08-02 新:slogan 在 max-height:640 同步 freeze。
     与 frozen .footer-h3--big = 16px 形成 3.5:1 比例
     (基础态 3.84:1),zoom 跨 640 断点不再孤悬漂移。 */
  .footer-slogan{font-size:56px}
  .footer-qr-img{width:48px}
  .footer-qr-name{font-size:10px}
}

/* ============================================
   SPLASH — 首页 4 秒品牌入场图
   2026-07-14 改:display:none → display:flex —— 旧版默认 hidden,JS 加载完才加 .is-active
   才显示,导致首页内容先渲染一帧再被 splash 覆盖("闪现首页后跳到 splash")。
   现默认 display:flex,splash 从首屏渲染起就覆盖视口,JS 仍负责 dismiss 与 sessionStorage
   判定。无 JS 兜底在 base.njk 用 <noscript> 注入 display:none !important 隐藏 splash。
   ============================================ */
.wayon-splash{
  position:fixed;
  inset:0;
  z-index:99999;
  background:#000;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  cursor:pointer;
}
.wayon-splash-seen .wayon-splash{
  display:none;
}

/* 2026-09-06:右下角 skip 提示,告诉用户 splash 可点击 / 键盘关闭 */
.splash-skip{
  position:absolute;
  right:clamp(16px, 2vw, 32px);
  bottom:clamp(16px, 2vw, 32px);
  font-family:var(--font-display);
  font-size:max(0.75rem, 0.9vw);
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.7);
  background:rgba(0,0,0,0.25);
  padding:clamp(6px, 0.6vw, 10px) clamp(12px, 1.2vw, 18px);
  border-radius:999px;
  pointer-events:none;
  user-select:none;
  animation: splash-skip-fade 4.5s ease-out forwards;
}
@keyframes splash-skip-fade{
  0%, 70% { opacity:1; }
  100%     { opacity:0.45; }
}
@media (prefers-reduced-motion: reduce){
  .splash-skip{ animation:none; }
}


/* ============================================
   RECOVERY (2026-07-12): 从 12:57 备份 + _scratch/about-css.css 恢复的样式
   修复: about 页 + china-map-province-list + destinations 页 + enter-cta 新结构
   ============================================ */

/* enter-cta 右侧图片块 — 缺失的 CSS */
.enter-cta-grid{
  display:grid;
  /* 2026-07-24 fix:minmax(0, 1fr) 而非 1fr ——
     1fr 默认 = minmax(auto, 1fr),auto = min-content,
     左列 enter-title("TELL US WHAT YOU WANT TO ENTER CHINA." 32 字符 × 60px)
     + 右列 picture(srcset 960w) 都会撑出列宽,把对方挤掉,出现"左占大半 / 右图裁切"。
     minmax(0, 1fr) 把 min-content 锁成 0,允许子元素按 1fr 等分,
     文字超出就换行,图片超出就靠 min-width:0 让 picture 缩到 cell 宽 */
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:60px;
  align-items:stretch;
  width:100%;
}
.enter-cta > .section-shell.enter-cta-shell{
  /* 2026-07-24 改:参考 .featured-journeys > .section-shell 把左右 padding 设为 0,
     让 .enter-cta-grid(2 列 1fr 1fr)的右 cell 占满 viewport 右半(从中线到右边),
     而不是只占 grid 1fr 分配的 (viewport-2*gutter)/2 区域。
     左列 .enter-text 单独加 padding-left:var(--home-gutter) 让左文本起点仍跟其他 section 同 x 轴 */
  padding-left:0 !important;
  padding-right:0 !important;
}
.enter-text{
  display:flex;
  flex-direction:column;
  /* 2026-07-24 改:section-shell padding:0 后,左列加 padding-left:var(--home-gutter)
     让左文本(about-main-title / desc / values)起点跟其他 home section 严格同 x 轴 */
  padding-left:var(--home-gutter);
  padding-right:0;
}
.enter-cta-right{
  min-height:0;
  min-width:0;
  overflow:hidden;
  position:relative;
  /* 2026-07-24 改:section-shell padding:0 + grid 1fr 1fr + gap 让右 cell 占据 viewport 右半
     (中线到右边 ~960px @1920,不含 gap),图片水平拉满到 viewport 右。
     width:100%(跟 grid 分配走)+ height:100%(跟左列内容等高)+ align-self:stretch */
  width:100%;
  height:100%;
  align-self:stretch;
}
@media(max-width:900px){
  .enter-cta-right{aspect-ratio:auto;max-height:none}
}
.enter-cta-right .enter-image{
  position:relative;
  min-height:0;
  height:100%;
  width:100%;
  flex:1 1 auto;
  overflow:hidden;
  background:transparent;
}
.enter-cta-right .enter-image > picture,
.enter-cta-right .enter-image > picture img,
.enter-cta-right .enter-image > img{
  width:100%;        /* 2026-07-24 fix:补 width/height —— 之前只设 object-position,图片按固有 960px 显示,被 cell 裁切 */
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center bottom;
}
.enter-cta-right .enter-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.72) 100%);
  z-index:0;
}
.enter-image-content{
  /* 2026-07-14 改:relative + flex column + flex-start,标题贴左上角(bottom 内容用 margin-top:auto 推到底) */
  position:relative;
  z-index:2;
  padding:clamp(24px, 2.6vw, 48px);
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
}
.enter-image-tell{
  font-family:var(--font-display);
  font-size:max(28px, 3.1vw);
  font-weight:800;
  color:#fff;
  text-transform:uppercase;
  line-height:1.05;
  margin:0;
  text-align:left;
  align-self:flex-start;
  max-width:90%;
}
.enter-image-bottom{
  /* 2026-07-14 改:margin-top:auto 把 bottom 内容推到底 */
  margin-top:auto;
  width:100%;
}
.enter-image-whether{
  font-family:var(--font-body);
  /* 2026-07-14 改:clamp(13, 1.1vw, 28) → max(13px, 1.1vw) ——
     跟 enter-desc / footer / 其他段缩放同步 */
  font-size:max(13px, 1.1vw);
  line-height:1.65;
  color:rgba(255,255,255,0.9);
  margin:0 0 18px;
}
.enter-btn-plan{
  display:inline-block;
  padding:clamp(8px, 0.65vw, 13px) clamp(20px, 1.5vw, 30px);
  background:var(--color-brand);
  color:#fff;
  border:2px solid var(--color-brand);
  font-family:var(--font-display);
  /* .xd "Plan Your Journey" 24 Bold / 1920 = 1.25vw, min 13, max 30 */
  font-size:max(13px, 1.25vw);
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .2s,border-color .2s;
}
.enter-btn-plan:hover{
  background:#8e3610;
  border-color:#8e3610;
}
.enter-btn-work{
  /* 2026-07-17 改:用 inline-flex + align-items:center 让文本垂直居中 —
     之前 inline-block + 12px padding + 14px font-size 默认行高会导致文本偏上 */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* 2026-07-17 再改:用户要求按钮长度增加 → padding:12px 56px(原来 28px),1920 视口按钮更长 */
  /* 2026-07-17 再改:用户要求字号跟 .enter-btn-plan 一致 → clamp(13px, 1.25vw, 30px)
     用 var(--font-display) 即 Poppins(参见 --font-display 声明) */
  padding:12px 56px;
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,0.7);
  font-family:var(--font-display);
  font-size:max(13px, 1.25vw);
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  transition:border-color .2s,background .2s;
}
.enter-btn-work:hover{
  border-color:#fff;
  background:rgba(255,255,255,0.1);
}
@media(max-width:900px){
  .enter-cta-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .enter-text{padding-left:var(--home-gutter);padding-right:clamp(20px,3vw,40px)}
  .enter-cta-right{margin-right:0;min-height:420px}
  .enter-cta-right .enter-image{min-height:420px}
  .enter-values{gap:42px 30px}
}
@media(max-width:480px){
  .enter-image-content{padding:28px 24px}
}

.china-map-stage{
  flex:1 1 0;
  min-width:0;
}
.china-map-province-list{
  flex:0 0 auto;
  width:clamp(100px,12vw,160px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(2px,.6vw,7px);
  padding:0 0 0 clamp(8px,1.2vw,18px);
  align-self:center;
}
.china-map-province-item{
  font-family:var(--font-display);
  font-size:max(9px, .95vw);
  font-weight:600;
  color:var(--color-text);
  cursor:pointer;
  padding:clamp(2px,.35vw,4px) 0 clamp(2px,.35vw,4px) clamp(5px,.6vw,8px);
  border-left:2px solid transparent;
  transition:color .2s,border-color .2s;
  line-height:1.3;
  letter-spacing:0.03em;
}
.china-map-province-item:hover,
.china-map-province-item.active{
  color:var(--color-brand);
  border-left-color:var(--color-brand);
  font-weight:700;
}

@media (max-width:767px){
  .china-map-layout{flex-direction:column}
  .china-map-province-list{
    flex-direction:row;
    width:100%;
    flex-wrap:wrap;
    gap:8px;
    padding:16px 0 0;
    align-self:auto;
    justify-content:center;
  }
  .china-map-province-item{
    border-left:none;
    padding-left:0;
    border-bottom:2px solid transparent;
    padding-bottom:3px;
  }
  .china-map-province-item:hover,
  .china-map-province-item.active{
    border-left-color:transparent;
    border-bottom-color:var(--color-brand);
  }
}

/* DESTINATIONS · PAGE CONTENT 已迁至 secondary.css §3.1
   (.destinations-content* — china-map-* 共享块仍在本文件) */

/* ============================================
   ABOUT PAGE (merged from _scratch/about-css.css, 2026-07-12)
   8 sections: main / brand / mission / people / team / reviews / seen / submit / contact
   ============================================ */
/* 1. ABOUT MAIN(2026-07-15 改:白底 + 2 列布局) */
.about-main{
  position:relative; width:100%;
  background:#fff; color:var(--color-dark);
  padding:clamp(48px, 6vw, 96px) var(--page-gutter);
  box-sizing:border-box;
}
.about-main-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px, 4vw, 64px);
  align-items:start;
  max-width:max(1480px, 77.083vw); margin:0 auto;
}
@media (max-width:767px){
  .about-main-inner{ grid-template-columns:1fr; gap:24px; }
}
.about-main-pill{
  /* 2026-07-16 改:ABOUT pill 改为绿字 + 橙色下划线 ——
     用户要求"绿字橙色下划线",旧规则是绿字 + 绿边 pill 样式,
     改成 display:inline-block + 绿字 + 下方橙色 line */
  display:inline-block;
  font-family:var(--font-display);
  font-size:max(1.6rem, 3.2vw);
  font-weight:800;
  color:var(--color-accent-mint);
  letter-spacing:0.02em;
  text-transform:uppercase;
  padding:0 0 clamp(4px, 0.5vw, 8px);
  margin-bottom:clamp(12px, 1.4vw, 22px);
  border:none;
  border-radius:0;
  border-bottom:max(3px, 0.35vw) solid var(--color-brand);
}
.about-main-title{
  font-family:var(--font-display);
  font-size:max(2.4rem, 3.6vw);
  font-weight:900;
  line-height:1.05;
  margin:0 0 clamp(12px, 1.4vw, 22px);
  color:var(--color-brand);
  text-transform:uppercase;
  letter-spacing:0.005em;
}
.about-main-title .title-line{ display:block; white-space:pre-line; }
.about-main-desc{
  font-family:var(--font-serif);
  font-size:max(1rem, 1.25vw);
  color:var(--color-text);
  line-height:1.65;
  margin:0 0 clamp(14px, 1.8vw, 24px);
  max-width:62ch;
}
.about-main-tagline{
  font-family:var(--font-display);
  font-size:max(1rem, 1.2vw);
  color:var(--color-text);
  font-style:italic;
  margin:0;
}
.about-main-media{
  display:flex; flex-direction:column;
  gap:clamp(10px, 1.4vw, 18px);
}
.about-main-img{
  width:100%; height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
.about-main-media-caption{
  font-family:var(--font-serif);
  font-size:max(0.85rem, 1vw);
  color:var(--color-accent-mint);
  line-height:1.55;
  margin:0;
}

/* 2. ABOUT BRAND STATEMENT(2026-07-15 改:白底;WAYON 单词放大;白字不加粗) */
.about-brand{
  position:relative; width:100%;
  background:#fff; color:var(--color-dark);
  padding:clamp(48px, 6vw, 96px) var(--page-gutter);
  box-sizing:border-box;
}
.about-brand-inner{
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:clamp(24px, 4vw, 80px);
  align-items:start;
  max-width:max(1480px, 77.083vw); margin:0 auto;
}
.about-brand-head{
  display:flex; flex-direction:column; gap:clamp(8px, 1vw, 14px);
}
.about-brand-title{
  font-family:var(--font-display);
  font-size:max(1.6rem, 2.4vw);
  font-weight:500;
  color:var(--color-accent-mint);
  text-transform:uppercase;
  margin:0;
  line-height:1.05;
  letter-spacing:0.005em;
}
/* WAYON 单词放大(用户要求"加大WAYON这个单词") */
.about-brand-title b,
.about-brand-title strong{ font-size:1.4em; font-weight:900; color:var(--color-brand); }
.about-brand-title em{ font-style:normal; font-size:1.4em; font-weight:900; color:var(--color-brand); }
.about-brand-divider{
  width:clamp(40px, 4vw, 72px);
  height:max(4px, 0.36vw);
  background:var(--color-brand);
}
.about-brand-body{
  display:flex; flex-direction:column; gap:clamp(12px, 1.6vw, 22px);
}
.about-brand-desc{
  font-family:var(--font-serif);
  font-size:max(0.95rem, 1.1vw);
  color:var(--color-text);
  line-height:1.7;
  margin:0;
  font-weight:400;        /* 不加粗(用户要求) */
}
.about-brand-quote{
  font-family:var(--font-display);
  font-size:max(1.05rem, 1.3vw);
  color:var(--color-dark);
  font-weight:400;        /* 不加粗(用户要求) */
  line-height:1.5;
  white-space:pre-line;
  margin:0;
}
@media (max-width:767px){
  .about-brand-inner{ grid-template-columns:1fr; gap:24px; }
}

/* 3. ABOUT TEAM INTRO(2026-07-15 改:白底;WAYON 单词放大) */
.about-team-intro{
  position:relative; width:100%;
  background:#fff; color:var(--color-dark);
  padding:clamp(32px, 4vw, 64px) var(--page-gutter) clamp(48px, 6vw, 96px);
  box-sizing:border-box;
}
.about-team-intro-inner{
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:clamp(24px, 4vw, 80px);
  align-items:start;
  max-width:max(1480px, 77.083vw); margin:0 auto;
}
.about-team-intro-head{
  display:flex; flex-direction:column; gap:clamp(8px, 1vw, 14px);
}
.about-team-intro-title{
  font-family:var(--font-display);
  font-size:max(1.6rem, 2.4vw);
  font-weight:500;
  color:var(--color-accent-mint);
  text-transform:none;
  margin:0;
  line-height:1.05;
}
.about-team-intro-title b,
.about-team-intro-title strong{ font-size:1.4em; font-weight:900; color:var(--color-brand); }
.about-team-intro-title em{ font-style:normal; font-size:1.4em; font-weight:900; color:var(--color-brand); }
.about-team-intro-divider{
  width:clamp(40px, 4vw, 72px);
  height:max(4px, 0.36vw);
  background:var(--color-brand);
}
.about-team-intro-body{
  display:flex; flex-direction:column; gap:clamp(12px, 1.6vw, 22px);
}
.about-team-intro-desc{
  font-family:var(--font-serif);
  font-size:max(0.95rem, 1.1vw);
  color:var(--color-text);
  line-height:1.7;
  margin:0;
}
@media (max-width:767px){
  .about-team-intro-inner{ grid-template-columns:1fr; gap:24px; }
}

/* 4. ABOUT PEOPLE BEHIND(2026-07-15 改:白底;图片缩小;图右→左→右交替) */
.about-people{
  position:relative; width:100%;
  background:#0F1B16; color:#fff;
}
@media (max-width:767px){ .about-people{ padding:10vw var(--page-gutter) 14vw; } }
@media (min-width:768px){
  .about-people-inner{
    width:100vw; aspect-ratio:auto; min-height:0;
    padding:6vw var(--page-gutter) 8vw;
  }
}
.about-people-title{
  font-family:var(--font-display); font-weight:700;
  color:#33B481; font-size:max(1.6rem, 2.6vw);
  margin:0 0 4vw; letter-spacing:0.02em;
}
.about-people-grid{
  display:grid; gap:clamp(1.5rem, 3vw, 3.5rem);
}
@media (max-width:767px){ .about-people-grid{ grid-template-columns:1fr; gap:6vw; } }
@media (min-width:768px){ .about-people-grid{ grid-template-columns:repeat(5, 1fr); gap:1.8vw; } }
.about-person{ display:flex; flex-direction:column; }
.about-person-portrait{
  position:relative; width:100%;
  aspect-ratio:3/4; background:#1B2A21; margin-bottom:clamp(0.8rem, 1.2vw, 1.4rem);
  overflow:hidden;
}
.about-person-portrait-placeholder{ display:block; width:100%; height:100%; background:linear-gradient(135deg, #1B2A21 0%, #243C2D 100%); }
.about-person-img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-person-name{
  font-family:var(--font-display); font-weight:700;
  color:#33B481; font-size:max(1rem, 1.3vw);
  margin:0 0 0.4vw; line-height:1.2;
}
.about-person-role{
  font-family:var(--font-display); font-weight:700;
  color:#33B

/* END — about-people 旧版块(已迁出到 secondary.css)
   本块前面是被截断的旧 about-people 规则;实际新版在 secondary.css .about-people-* 块
   为防止 CSS 截断,补全右侧大括号: */
}

/* 5. ABOUT REVIEWS — 客户评价(已在 secondary.css 重写) */
_.about-reviews-old-block{ display:none }

/* ============================================
   6. 2026-07-17 通用:从 background-image 改 <picture> 的样式适配
   影响容器:.keeper-photo / .entry-photo / .featured-photo /
          .travelogue-photo / .enter-image / .hero-slide
   行为:绝对定位填充父容器,object-fit: cover 模拟 background-size: cover
   ============================================ */
.keeper-photo picture,
.keeper-photo img,
.entry-photo picture,
.entry-photo img,
.featured-photo picture,
.featured-photo img,
.travelogue-photo picture,
.travelogue-photo img,
.enter-image > picture,
.enter-image > picture img,
.enter-image > img{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
/* 父容器需要 overflow:hidden + position:relative(已基本都有,这里兜底) */
.keeper-photo,.entry-photo,.featured-photo,.travelogue-photo,.enter-image{
  overflow:hidden;
}
/* hover 放大效果迁移到 img 自身 */
.keeper-card:hover .keeper-photo img,
.travelogue-card:hover .travelogue-photo img{
  transform:scale(1.06);
  transition:transform .6s ease;
}
.keeper-card--portrait-contain .keeper-photo img{
  object-fit:contain;
  background:#120b07;
}
.keeper-card--portrait-contain:hover .keeper-photo,
.keeper-card--portrait-contain:hover .keeper-photo img{
  transform:none;
}