/* ============================================================
   secondary.css — 二级页面专属样式
   适用页面:JOURNEYS / DESTINATIONS / TRAVELOGUE / CULTURAL KEEPERS
   加载方式:base.njk 里 front-matter `secondaryStyles: true` 时,
            在 style.css 之后再引入本文件(load order 靠后 → 可 override)

   共享部分仍在 style.css:
     .page-hero 容器、.hero-slideshow / .hero-slide / .hero-overlay / .hero-stage
   本文件只放"二级页面独有"的样式:
     · 二级 page-hero 变体(标题左下 + 橙色分割线)
     · six-ways 双列内容(6 主题 ↔ 3 子文章卡)
     · 后续 destinations / travelogue / keepers 的专属块(见文末规划区)
   ============================================================ */

:root{
  --secondary-content-top-gap:max(72px, 7vw);
  --destinations-content-top-gap:max(104px, 9vw);
}


/* ============================================================
   1. PAGE HERO — 二级页面变体
   .page-hero 容器为二级页专属(首页用 .home-hero,定义在 style.css)。
   仍复用 style.css 的共享块 .hero-slideshow / .hero-slide / .hero-overlay / .hero-stage
   这里定义:16:9 容器 + 标题定位(左对齐 nav-logo 同基线 32px)+ 橙线
   ============================================================ */
.page-hero{
  /* 2026-07-14 改:hero 整体调小,二级页标题在 hero 上直接可见(无需滚动) ——
     旧 aspect-ratio:16/9 + min-height:100svh 在 1080+ 视口上 hero 撑满全屏,标题位置在 bottom
     还是需要一定滚动才能完整看到。改为 aspect-ratio:16/5(更扁)+ min-height:60svh,让 hero
     占视口约 50-60%,标题 + 橙线在 hero 中下,用户首屏即可看到。
     2026-07-14 改:静态缩放 ——
       用户要求"顶图静态缩放顶图即可,没必要用多张图拼接然后缩放"
       background-size: cover + background-position: center 单图静态 cover,
       不要再用多张图拼接或者 JS 缩放 */
  position:relative;
  width:100%;
  aspect-ratio:16 / 5;
  min-height:60svh;
  max-height:70svh;
  overflow:hidden;
  color:#fff;
  background:#000;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
@media (max-width:767px){
  .page-hero{
    aspect-ratio:auto;
    min-height:auto;
    height:auto;
  }
}
.page-hero-stage{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
}
.page-hero-title-block{
  /* 2026-07-14 改:从 top-left 定位 → bottom-center 定位 ——
     top:6.25vw 改为 bottom:6.25vw(放图片底部);
     left:32px 改为 left:50% + transform:translateX(-50%)(水平居中);
     align-items:flex-start 改为 center(标题和橙线在块内居中)
     2026-07-14 改:bottom 6.25vw → 4vw(用户要求"hero 图上的 title 往下挪一点") */
  position:absolute;
  bottom:4vw;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.page-hero-title{
  margin:0;
  font-family:var(--font-display);
  /* 2026-07-14 改:字号缩小 + 用 max(min, vw) 对齐 footer 缩放公式
     旧 clamp(40, 6.4vw, 100) 在 4K cap 到 100px 偏大;改后随视口等比缩,跟 footer slogan / section title 一致 */
  font-size:max(24px, 2.8vw);
  line-height:1.04;
  font-weight:400;
  letter-spacing:0.005em;
  text-transform:uppercase;
  color:#fff;
  text-align:center;
}
.page-hero-divider{
  /* 2026-07-14 改:橙线宽度同样按 max(min, vw) 等比缩,标题居中后橙线也居中
     2026-07-14 改:height 0.156vw → 0.4vw(用户要求"橙线加粗一点") */
  width:max(88px, 6vw);
  height:max(4px, 0.4vw);
  background:var(--color-brand);    /* 二级页橙线区分 */
  margin:max(8px, 0.8vw) 0 0;
}
@media (max-width:767px){
  .page-hero-title-block{
    position:absolute;
    bottom:6svh;
    left:50%;
    transform:translateX(-50%);
    padding:0 var(--page-gutter);
  }
  .page-hero-title{font-size:max(20px, 6.4vw)}
  .page-hero-divider{height:2px;width:72px;margin:10px 0 0}
}

/* 2026-07-15 删:之前为 home travelogue 互换加的 .page-hero-lead / .page-hero-search ——
   现在 secondary page-hero 只保留 pill + title(无 lead 无 search),
   跟 home travelogue 用专属 .travelogue-header-search 区分,避免共用 class 冲突 */
/* 2026-07-15 改:page-hero-pill 默认橙(.pill 共享规则),但 travelogue 加 .pill--orange 强调 */
.page-hero-pill--orange{
  background:var(--color-brand);
  color:#fff;
  letter-spacing:0.18em;
}


/* ============================================================
   2. SIX-WAYS — Journeys 双列内容
   左:6 主题按钮(首项绿色 #33b481 激活,其余橙色 #bd4b16)
   右:每主题 3 张子文章卡(16:9 大图 + 白色标题居中)
   交互:点某行 → 该行变绿 + 右侧切到对应 group(见 main.js)
   token:--color-accent-mint(绿) --color-brand(橙) --font-display(Poppins)
   ============================================================ */
.six-ways{
  position:relative;
  background:#fff;
  color:#1a1a1a;
}
.six-ways-inner{
  display:flex;
  flex-direction:column;
  gap:clamp(24px, 3vw, 48px);
  padding:clamp(32px, 5.5vw, 88px) var(--page-gutter) clamp(48px, 8vw, 120px);
  max-width:100vw;
  box-sizing:border-box;
}
@media (min-width:768px){
  .six-ways-inner{
    flex-direction:row;
    gap:clamp(24px, 3.2vw, 56px);
    padding:clamp(32px, 4vw, 88px) var(--page-gutter) clamp(60px, 6vw, 120px);
    align-items:flex-start;
  }
}

/* 左:6 主题按钮 */
.six-ways-categories{
  display:flex;
  flex-direction:column;
  gap:clamp(14px, 1.8vw, 30px);
  width:100%;
}
@media (min-width:768px){
  .six-ways-categories{ width:30%; max-width:max(440px, 23vw); flex:0 0 auto; }
}
.six-ways-row{
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  text-align:left;
  font-family:var(--font-display);
  /* 2026-07-14 改:clamp(20, 1.7vw, 28) → max(20px, 1.7vw) ——
     旧 clamp 有 max 28px 上限,宽视口(2K+ 4K)下文字被锁在 28px,导致左侧列表在
     大视口下看起来过小(其他元素还在继续放大,文字被锁);改成 max(无 max cap)
     让文字跟视口等比缩放,跟 footer / 路线图 / 入口图同公式,保持缩放一致 */
  font-size:max(20px, 1.7vw);
  font-weight:500;
  letter-spacing:0.01em;
  line-height:1.2;
  color:var(--color-brand, #BD4B16);
  transition:color .25s ease, font-size .25s ease, transform .25s ease;
  outline-offset:4px;
}
.six-ways-row:hover,
.six-ways-row:focus-visible{ color:var(--color-accent-mint, #33B481); }
.six-ways-row.is-active{
  color:var(--color-accent-mint, #33B481);
  /* 同上:去掉 max 28 上限,跟其他元素等比缩 */
  font-size:max(26px, 2.3vw);
}
.six-ways-row-text{ display:inline-block; }

/* 右:子文章卡分组(一次只显示一组)— 2026-07-13 fix:3 张图水平并排(原 column 改成 row) */
.six-ways-articles{ width:100%; min-width:0; }
@media (min-width:768px){
  .six-ways-articles{
    flex:1 1 max(760px, 60vw);
    max-width:max(760px, 60vw);
    margin-left:auto;
  }
}
.six-ways-article-group{
  display:none;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(14px, 1.4vw, 28px);
  align-items:flex-start;               /* 等高时顶端对齐(竖图比例不同时不拉伸) */
}
.six-ways-article-group.is-active{ display:grid; }
.six-ways-article-card{
  position:relative;
  display:block;
  min-width:0;                          /* 防止 flex item 内容撑破 */
  /* 二级 Journeys 卡片锁 3:4 宽高比 */
  aspect-ratio:3 / 4;
  overflow:hidden;
  background:#1a1a1a;
  border-radius:2px;
  text-decoration:none;
  color:#fff;
  /* 2026-07-14 改:图片本身 transform:scale(1.2) ——
     等效直接放大 1.2 倍,配合 overflow:hidden 不会溢出 */
}
.six-ways-article-card--placeholder{ cursor:default; }
.six-ways-article-card--placeholder::after{
  background:linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.66) 100%);
}
.six-ways-article-card--placeholder:hover .six-ways-article-photo{ transform:scale(1.3); }
.six-ways-article-photo{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:50% 50%;
  transform:scale(1.3);
  transition:transform .6s ease;
}
.six-ways-article-card:hover .six-ways-article-photo{ transform:scale(1.34); }
.six-ways-article-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
  transition:opacity .25s ease;
  pointer-events:none;
}
.six-ways-article-card:hover::after{ opacity:.55; }
.six-ways-article-title{
  /* 2026-07-14 改:用户要求"图片上的介绍文本需要居中" ——
     标题位置居中(vertical center),原来在 bottom */
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  margin:0;
  padding:0 clamp(16px, 1.5vw, 24px);
  text-align:center;
  color:#fff;
  font-family:var(--font-display);
  font-size:max(15px, 1.15vw);
  font-weight:500;
  line-height:1.3;
  letter-spacing:0.01em;
  white-space:pre-line;
  max-width:90%;
  text-shadow:0 1px 8px rgba(0,0,0,0.5);
}
/* 2026-07-14 改:左列顶部印花+主题标题(用户要求"Tea&Slow living 上方加一个缩小后的印花,左对齐文本") */
.six-ways-left-mark{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:clamp(32px, 4vw, 72px) var(--page-gutter) 0;
  gap:clamp(8px, 1vw, 14px);
}
.six-ways-left-mark-img{
  /* 2026-07-15 改:用户要求"左侧不是 Logo,是灰色印花图案" ——
     width 大幅放大(40/2.6vw → 160/15vw),opacity 0.8 → 0.3(淡灰色装饰,不抢主内容) */
  width:max(86px, 10vw);
  height:auto;
  object-fit:contain;
  opacity:0.3;
  filter:grayscale(1);
}
.six-ways-empty{
  padding:clamp(40px, 4vw, 64px) 0;
  font-family:var(--font-display);
  /* 2026-07-14 改:clamp(14, 1.1vw, 16) → max(14px, 1.1vw) ——
     去掉 16px 上限,跟其他元素同比例缩 */
  font-size:max(14px, 1.1vw);
  color:#888;
  text-align:center;
  font-style:italic;
}


/* ============================================================
   3. 其余二级页面内容区
   三页共用 §1 PAGE HERO(只换轮播图 + 标题),内容区各自不同。
   共用约定:
     · 断点:< 768px 移动自然流;≥ 768px 桌面
      · 横向留白:var(--page-gutter)(与 header / homepage 对齐)
     · 色板:--color-brand 橙 / --color-accent-mint 绿 / --font-display
   注:keeper-card / keepers-strip / china-map 等与首页共享的类仍在 style.css。
   ============================================================ */

/* ------------------------------------------------------------
   3.1 DESTINATIONS · PAGE CONTENT
   2026-07-14 改:缩放逻辑对齐 .six-ways ———
     旧 max-width:1480 + 固定 padding/gap → 用 clamp 跟视口缩放
     padding:70px 0 90px → clamp(48px, 8vw, 120px) 0 clamp(60px, 6vw, 90px)
     grid-template-columns:1fr 1.2fr → 1fr 1.4fr
     gap:48px → clamp(28px, 4vw, 60px)
   左:省份 / 城市 / 预览   右:中国地图(水平并排)
   ------------------------------------------------------------ */
.destinations-content{
  width:100%;
  /* 2026-07-22 改:padding-bottom 从 2vw → 0 —— 之前 2vw + .stamp-decoration 自身 margin-top 2vw 累计 4vw 空白过大;
     改 0 后,stamp 自身的 margin-top:2vw 单独控制间距,避免双重 padding */
  padding:var(--destinations-content-top-gap) 0 0;
  background:#fff;
  /* 2026-07-22 改:覆盖 .china-map-section 通用 min-height:max(720px, 55vw) ——
     那个 min-height 是给首页地图 section 锁定高度用的,但 destinations 二级页把
     .china-map-section class 套到了 .destinations-content 上(便于共享样式),
     导致 destinations-content 被硬撑到 720-1056px 高度,跟下面 stamp 拉开大量空白。
     改 min-height:0,让容器高度跟随内部内容(provinces + tours + preview + map)自然高度 */
  min-height:0;
}
.destinations-content-outer{
  width:100%;
  margin:0 auto;
  padding:0 var(--page-gutter);
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(300px, .85fr);
  gap:clamp(24px, 3vw, 48px);
  align-items:start;
}
.destinations-content-inner{
  /* 2026-07-21 改:3 列同行 —— 省份 + tours + 预览图
     2026-07-21 再改:列宽比例:省份 1.6fr(扩宽)、tours 2fr、预览图 2fr(变窄),
     让 provinces 列表拥有足够宽度放中文省份名,图片不抢戏
     2026-07-21 再改:借鉴主页 .section-shell 缩放 —— padding 用 max(min,vw)(带 px 下限),
     让窄屏下不会因为 vw 过小导致 padding 归零、布局变形 */
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1.6fr) minmax(0, 2fr) minmax(0, 2fr);
  column-gap:0;
  align-items:start;
  padding:0 clamp(10px, 1.4vw, 28px);
}
.destinations-provinces{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0.35vw;
  z-index:1;
  overflow:visible;
  /* 把 provinces 高度通过 CSS 变量传给预览图 —— JS 监听 ResizeObserver 写回 */
  --provinces-h:auto;
  /* 2026-07-21 改:借鉴主页缩放 —— padding-left 用 max(min,vw)(带 px 下限),
     窄屏不会因为 vw 过小导致 padding 归零 */
  padding-left:clamp(4px, 0.4vw, 12px);
  padding-top:0;
}
/* 2026-07-21 改:provinces / tours / preview 水平对齐,共享同一 padding-left
   2026-07-21 再改:借鉴主页缩放 —— padding-left 用 max(min,vw)(带 px 下限) */
.destinations-tours{
  padding-left:clamp(12px, 3vw, 48px);
}
.destinations-preview{
  padding-left:clamp(12px, 1.6vw, 24px);
}
.destinations-provinces,
.destinations-tours,
.destinations-preview{
  box-sizing:border-box;
  border-left:2px solid var(--color-accent-mint);
}

.destinations-map-side{
  position:relative;
  width:100%;
}
/* 左:省份清单
   2026-07-15 改:用户要求"默认橙色 + 小一号,点击后变绿 + 放大"
   - 默认色 var(--color-brand)(橙),字号 max(16px, 1.4vw)(小一号)
   - 点击激活:绿色 + 字号变大 max(26px, 2.3vw)
   2026-07-20 改:用户要求"改为背景置灰,不要变大变绿" ——
   - 默认/激活都是橙色文字 + 同字号,激活态改为浅灰背景,字号不再变化,不再变绿
   2026-07-21 改:用户要求"省份列扩宽" —— 字号回到 max(16px,1.4vw),行高更舒展 */
.destinations-provinces{
  display:flex;
  flex-direction:column;
  gap:clamp(4px, 0.5vw, 8px);
  position:relative;
  z-index:1;
  overflow:visible;
}
.destinations-province{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(4px, 0.5vw, 8px);
  background:none;
  border:none;
  cursor:pointer;
  padding:clamp(4px, 0.55vw, 9px) clamp(6px, 0.7vw, 12px);
  font-family:var(--font-display);
  /* 2026-07-21 改:借鉴主页缩放 —— 字号用 max(min,vw),窄屏不会因 vw 过小变 0 */
  font-size:clamp(14px, 1.3vw, 25px);
  font-weight:700;
  color:var(--color-brand);
  text-align:left;
  letter-spacing:0.01em;
  line-height:1.2;
  border-radius:2px;
  transition:background-color .2s ease, color .2s ease;
  position:relative;
  z-index:2;
  /* 2026-07-21 改:灰底固定宽度 + 借鉴主页缩放 —— width:max(min,vw) */
  align-self:flex-start;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.destinations-province.is-active{
  /* 2026-07-20 改:active 改为浅灰背景,字号/颜色保持不变
     2026-07-21 改:stretch + width:100% 让灰底覆盖到箭头(箭头在按钮右缘,紧邻 line2) */
  background:#ededed;
  color:var(--color-brand);
}
.destinations-province:hover,
.destinations-province:focus-visible{
  /* 2026-07-20 改:hover 同样只是浅灰背景 */
  background:#ededed;
  color:var(--color-brand);
}
/* 2026-07-21 改:箭头放大 + 借鉴主页缩放 —— font-size:max(min,vw),
   margin-right 用 clamp(带 px 下限) */
.destinations-province-arrow{
  font-size:clamp(12px, 1.2vw, 23px);
  opacity:.85;
  margin-right:clamp(2px, 0.4vw, 6px);
}
/* 中:城市清单 */
.destinations-tours{
  padding-left:clamp(12px, 1.4vw, 24px);
}
.destinations-tours-heading{
  margin:0 0 max(10px, 0.8vw);
  font-family:var(--font-display);
  font-size:max(14px, 0.95vw);
  font-weight:800;
  line-height:1.1;
  letter-spacing:0.08em;
  color:#8f8f8f;
  text-transform:none;
}
.destinations-tour-list{
  list-style:none;
  margin:clamp(4px, 0.55vw, 9px) 0 0;
  padding:0;
  display:none;
}
.destinations-tour-list.is-active{display:block}
.destinations-tour{
  display:flex;
  align-items:center;
  gap:clamp(4px, 0.5vw, 8px);
  padding:clamp(2px, 0.3vw, 5px) 0;
  color:var(--color-dark);
  text-decoration:none;
  font-family:var(--font-display);
  /* 2026-07-21 改:第二列(tours)字号 + 借鉴主页缩放 —— 字号用 max(min,vw) */
  font-size:clamp(12px, 1.1vw, 21px);
  font-weight:400;
  transition:color .2s;
}
.destinations-tour:hover{color:var(--color-brand)}
.destinations-tour-pin{
  display:inline-flex;
  /* 2026-07-21 改:图钉借鉴主页缩放 —— 用 max(min,vw) 带 px 下限 */
  width:max(10px, 0.75vw);
  height:max(10px, 0.75vw);
  flex:0 0 auto;
  color:#c93624;
}
.destinations-tour-pin::before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  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='M12 23S4.5 15.6 4.5 9.3A7.5 7.5 0 0 1 19.5 9.3C19.5 15.6 12 23 12 23Zm0-10.2a3.1 3.1 0 1 0 0-6.2 3.1 3.1 0 0 0 0 6.2Z'/%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='M12 23S4.5 15.6 4.5 9.3A7.5 7.5 0 0 1 19.5 9.3C19.5 15.6 12 23 12 23Zm0-10.2a3.1 3.1 0 1 0 0-6.2 3.1 3.1 0 0 0 0 6.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.destinations-tour-empty{
  /* 2026-07-20 改:空状态文字跟随 tour 字号提升 */
  padding:8px 4px;color:var(--color-text);font-size:clamp(12px, 0.95vw, 18px);font-style:italic;
}
/* 预览大图(可选,保留兼容) */
.destinations-preview{
  /* 2026-07-16 改:.destinations-preview{display:none} 整个容器被隐藏 → 用户看不到任何省图
     改为 display:block,内 .destinations-preview-img 堆叠 + 只 is-active 显示
     .destinations-preview-img 默认 opacity:0,is-active opacity:1
     2026-07-20 改:内层 grid 重新分配后,放大 width 上限让大图跟 selector-group 视觉对齐
     2026-07-21 改:inner 改 3 列同行后,preview 作为第 3 个 grid cell,
     width 跟随列宽自然吃满(不再人为封顶 max(300px,22vw))
     2026-07-21 再改:aspect-ratio 去掉 —— JS 把 provinces 高度写到 inline style,
     让预览图高度 = 竖线高度 = 省份列表高度,保证"图片高度与竖线高度对应"
     2026-07-22 改:加 aspect-ratio fallback 351/615 —— JS ResizeObserver 跑前或未跑时,
     preview 也有可见高度,省份图不会"空白塌陷";JS 跑通后 var(--provinces-h) 覆盖 */
  display:block;
  position:relative;
  width:100%;
  height:var(--provinces-h, auto);
  aspect-ratio:351/615;            /* JS 跑前的兜底高度,跟移动端断点一致 */
  justify-self:stretch;
  min-height:0;
  border-radius:clamp(8px, 0.8vw, 14px);
  overflow:hidden;
  background:#f5f5f5;
  z-index:1;
}
.destinations-preview-img{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .25s ease;
}
.destinations-preview-img.is-active{opacity:1; z-index:1}
/* 地图侧:复用 .china-map-wrap SVG,右列自适应 */
.destinations-map-side .china-map-wrap svg{
  width:min(100%, max(420px, 31vw));
  max-width:100%;
  margin:0 auto;
}
.destinations-map-side .china-map-wrap svg path.active,
.destinations-map-side .china-map-wrap svg path.is-active{
  fill:var(--color-accent-mint) !important;
  stroke-width:1.8;
}
.destinations-map-pin{
  position:absolute;
  left:0;
  top:0;
  width:max(18px, 1.25vw);
  height:max(18px, 1.25vw);
  color:#c93624;
  background:currentColor;
  transform:translate(-50%, -100%);
  pointer-events:none;
  z-index:3;
  opacity:0;
  transition:opacity .2s ease, left .2s ease, top .2s ease;
  -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='M12 23S4.5 15.6 4.5 9.3A7.5 7.5 0 0 1 19.5 9.3C19.5 15.6 12 23 12 23Zm0-10.2a3.1 3.1 0 1 0 0-6.2 3.1 3.1 0 0 0 0 6.2Z'/%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='M12 23S4.5 15.6 4.5 9.3A7.5 7.5 0 0 1 19.5 9.3C19.5 15.6 12 23 12 23Zm0-10.2a3.1 3.1 0 1 0 0-6.2 3.1 3.1 0 0 0 0 6.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.destinations-map-pin.is-visible{opacity:1}
.masters-strip{
  padding-top:var(--secondary-content-top-gap);
  padding-bottom:clamp(48px, 5vw, 88px);
}
/* ============================================
   CULTURAL KEEPERS · MASTERS STRIP (独立页专属)
   2026-08-02 改:
     - 5 张独立卡片，横向排列，响应式缩放
     - 五张图中间白色间隙 gap:clamp(14px,1.5vw,20px)
     - 文本常驻图片上方左下角，白色，左对齐（无 enter 胶囊）
     - 分割线橙色（--color-brand）
     - 点击卡片 → keepersReader 弹窗（复用 travelogue reader 结构）
   ============================================ */
.masters-strip-inner{
  width:100%;
  max-width:calc(var(--container-max) + (var(--page-gutter) * 2));
  margin:0 auto;
  padding:0 var(--page-gutter);
  box-sizing:border-box;
}
/* masters-strip:上下 padding，row full-width 铺满 viewport 对齐 logo */
.masters-strip{
  padding:var(--home-section-y, max(88px, 9.6vw)) 0 clamp(48px, 5vw, 88px);
}
/* cards-row:跟 nav-inner 同宽，左右 padding:0 var(--page-gutter) 对齐 logo */
.masters-cards-row{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content:flex-start;
  gap:clamp(14px, 1.5vw, 20px);
  width:100vw;
  /* 左右 margin:auto，让 row 与 header logo 左边缘 / plan-your-journey 右边缘对齐 */
  margin:0 max(24px, 7.5vw);
  box-sizing:border-box;
  min-width:0;
}
/* 桌面:5张卡+4个gap总宽必须≤section可用宽(≈1054px @ 1258px viewport)
   5×card + 4×18px = 1054 → card ≈ 196px → clamp(160px, 18vw, 195px) */
.keeper-card--overlay{
  --card-w:clamp(160px, 18vw, 195px);
  width:var(--card-w);
  height:calc(var(--card-w) * 1.6384615); /* 532/325 */
  flex-shrink:0;
  display:block;
  position:relative;
  overflow:hidden;
  background:#000;
  color:inherit;
  cursor:pointer;
  border:none;
  padding:0;
  text-decoration:none;
  /* 文本左对齐 */
  text-align:left;
}
/* responsiveImage picture/img 撑满卡片 */
.keeper-card--overlay .keeper-photo{
  position:absolute;
  inset:0;
}
.keeper-card--overlay .keeper-photo img,
.keeper-card--overlay .keeper-photo picture{
  width:100%;
  height:100%;
  display:block;
}
.keeper-card--overlay .keeper-photo img{
  object-fit:cover;
  object-position:center;
}
.keeper-card--overlay.keeper-card--portrait-contain .keeper-photo img{
  object-fit:contain;
  background:#120b07;
}
/* hover 缩放（仅图片） */
.keeper-card--overlay:hover .keeper-photo img{
  transform:scale(1.04);
  transition:transform .6s ease;
}
.keeper-card--overlay.keeper-card--portrait-contain:hover .keeper-photo img{
  transform:none;
}
/* 文字叠加层:absolute 左下角，白色，常驻，左对齐 */
.keeper-text-overlay{
  position:absolute;
  left:0;
  bottom:0;
  z-index:3;
  width:100%;
  padding:clamp(14px, 1.6vw, 26px) clamp(12px, 1.4vw, 22px);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(3px, 0.4vw, 7px);
}
/* 白色文字 */
.keeper-card--overlay .keeper-name{ color:#fff; }
.keeper-card--overlay .keeper-spec-text{ color:#fff; opacity:0.92; }
/* 橙色分割线 */
.keeper-card--overlay .keeper-spec-rule{ background:var(--color-brand); opacity:0.85; }
.keeper-card--overlay .keeper-bio{ color:#fff; opacity:0.82; line-height:1.5; }
/* hover 遮罩:绿/橙渐变（微透明，文字仍清晰） */
.keeper-card--overlay .keeper-overlay{
  opacity:0;
  transition:opacity .35s ease;
  background:linear-gradient(160deg, rgba(51,180,129,.32), rgba(189,75,22,.28));
}
.keeper-card--overlay:hover .keeper-overlay{ opacity:1; }
/* 移动端:允许换行，卡片宽度不小于 160px */
@media (max-width:1024px){
  .masters-cards-row{
    flex-wrap:wrap;
    overflow-x:visible;
  }
  .keeper-card--overlay{
    --card-w:clamp(140px, 28vw, 195px); /* 同桌面比例收紧上限 */
  }
}

/* ============================================
   KEEPERS READER 弹窗 — 复用 travelogue reader 结构
   左侧:肖像图 右侧:姓名 + 城市/省份 + 技艺 + 引言 + 详情正文
   ============================================ */
.keepers-reader{
  --reader-pad:max(10px, 1.4vw);
  --reader-radius:max(14px, 1.25vw);
  --reader-inner-gap:max(8px, 0.8vw);
  position:fixed;
  inset:0;
  z-index:9990;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--reader-pad);
}
.keepers-reader[hidden]{ display:none; }
.keepers-reader-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(0,0,0,.64);
  cursor:pointer;
}
.keepers-reader-panel{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 46%) minmax(0, 54%);
  width:min(calc(100vw - (var(--reader-pad) * 2)), 82vw);
  height:min(calc(100svh - (var(--reader-pad) * 2)), 84svh);
  background:#f7f1e8;
  box-shadow:0 max(20px, 1.8vw) max(56px, 5vw) rgba(0,0,0,.34);
  overflow:hidden;
  border-radius:var(--reader-radius);
}
.keepers-reader-close{
  position:absolute;
  top:var(--reader-inner-gap);
  right:var(--reader-inner-gap);
  z-index:4;
  width:max(36px, 2.6vw);
  height:max(36px, 2.6vw);
  border:1px solid rgba(255,255,255,.65);
  background:rgba(0,0,0,.34);
  color:#fff;
  cursor:pointer;
  font-size:max(24px, 1.8vw);
  line-height:1;
  border-radius:999px;
}
.keepers-reader-media{
  position:relative;
  min-width:0;
  background:#111;
  overflow:hidden;
  margin:var(--reader-inner-gap) 0 var(--reader-inner-gap) var(--reader-inner-gap);
  border-radius:calc(var(--reader-radius) - 4px);
}
.keepers-reader-media-stage,
.keepers-reader-media-stage img,
.keepers-reader-media-stage video{
  width:100%;
  height:100%;
  display:block;
}
.keepers-reader-media-stage img,
.keepers-reader-media-stage video{
  object-fit:cover;
}
.keepers-reader-media-caption{
  position:absolute;
  left:max(18px, 2vw);
  right:max(18px, 2vw);
  bottom:max(18px, 2vw);
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.65);
}
.keepers-reader-media-caption span,
.keepers-reader-media-caption strong{ display:block; }
.keepers-reader-spec{
  font-size:max(11px, .72vw);
  font-weight:700;
  letter-spacing:.16em;
  margin-bottom:max(8px, .55vw);
  text-transform:uppercase;
}
.keepers-reader-media-caption strong{
  font-family:var(--font-display);
  font-size:max(22px, 2.1vw);
  font-weight:500;
  line-height:1.12;
}
.keepers-reader-caption-divider{
  display:block;
  width:max(60px, 6vw);
  height:2px;
  background:var(--color-brand);
  margin:max(8px, 0.6vw) 0;
}
.keepers-reader-article{
  min-width:0;
  height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:max(12px, 1.2vw);
  background:#f7f1e8;
}
body.keepers-reader-open{ overflow:hidden; }

/* Journey detail section typography shares one visual token set. */
.journey-highlights-title,
.journey-cultural-thread-title,
.journey-itinerary-title,
.journey-day-by-day-title,
.journey-why-matters-title,
.journey-info-about-title,
.journey-detail-block-title{
  font-family:var(--font-display);
  font-size:clamp(24px, 2.3vw, 46px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--color-accent-mint);
  text-align:center;
}
.journey-cultural-thread-title .braced-heading-brace,
.journey-itinerary-title .braced-heading-brace{
  font-size:inherit;
  line-height:inherit;
}
.journey-cultural-thread-text,
.journey-itinerary-text,
.journey-why-matters-text,
.journey-detail-block-text{
  font-family:var(--font-body);
  font-size:clamp(15px, 1.12vw, 22px);
  line-height:1.7;
  color:var(--color-accent-mint);
  text-align:center;
}
.journey-cultural-thread,
.journey-itinerary{
  background:#fff;
}

/* 移动端:卡片缩放适配屏宽，间距保持 */
@media (max-width:1100px){
  .masters-cards-row{ gap:max(12px, 1.5vw); }
  .keeper-card--overlay{
    --card-w:min(280px, 28vw);
    --card-h:auto;
    height:auto;
    aspect-ratio:325/532;
  }
}
@media (max-width:768px){
  .masters-cards-row{
    flex-wrap:wrap;
    gap:max(10px, 2vw);
    justify-content:flex-start;
    padding:0 var(--page-gutter);
  }
  .keeper-card--overlay{
    --card-w:min(46vw, 200px);
    --card-h:auto;
    height:auto;
    aspect-ratio:325/532;
  }
  .keepers-reader-panel{
    grid-template-columns:1fr;
    grid-template-rows:minmax(200px, 38svh) minmax(0, 1fr);
    width:calc(100vw - (var(--reader-pad) * 2));
    height:calc(100svh - (var(--reader-pad) * 2));
  }
  .keepers-reader-media{ margin:var(--reader-inner-gap) var(--reader-inner-gap) 0; }
  .keepers-reader-article{ padding:12px; }
}

.destinations-map-side .china-map-layout{display:block}
.destinations-map-side .china-map-province-list{display:none}
/* 2026-07-15 加:移动端地图缩放 ——
   旧 min(66.5vw, 770px) 在 320-768px 视口下地图太小,path 几乎无法点
   改 ≤768px 用 min(95vw, 540px),让地图在移动端占 95% 视口宽,path 变大约 1.4x 更好点 */
@media (max-width:768px){
  .destinations-map-side .china-map-wrap svg{
    width:min(95vw, 540px);
  }
}
@media (max-width:960px){
  .destinations-content-outer{
    grid-template-columns:1fr;
    gap:40px;
  }
}
@media (max-width:560px){
  .destinations-content-inner{grid-template-columns:1fr;gap:20px;padding:0}
  .destinations-provinces,
  .destinations-tours,
  .destinations-preview{border-left:0}
  .destinations-provinces{padding-left:0}
  .destinations-province{justify-content:flex-start;text-align:left}
  .destinations-tours{padding-left:0}
  /* 2026-07-21 加:小屏关掉高度同步(JS inline 变量),让预览图走自然 aspect-ratio */
  .destinations-preview{height:auto;aspect-ratio:351/615}
}


/* ------------------------------------------------------------
   3.2 TRAVELOGUE · LIST SECTION (L2)
   2026-07-14 改:5×n 可扩展网格 ——
     去掉 header / 顶部文本,只保留图片 + 图片上居中白字
     每行 5 张图,行间固定上下间距 + 左右边距
   ------------------------------------------------------------ */
.travelogue-list{
  width:100%;
  background:#fff;
  padding:var(--secondary-content-top-gap) 0 clamp(48px, 6vw, 96px);
  box-sizing:border-box;
}
.travelogue-list-inner{
  width:100%;
  padding:0 var(--page-gutter);
}
.travelogue-list-grid{
  display:grid;
  /* 2026-07-15 改:5 列 → 3 列固定(3×5 = 15 张,用户要求"TRAVELOGUE 应该是 3*5 的布局") */
  grid-template-columns:repeat(3, 1fr);
  /* 2026-07-15 改:行间距固定 gap,3 列网格下 5 行更紧凑;
     用户要求"图与图之间有固定的上下间距" */
  column-gap:max(18px, 1.8vw);
  row-gap:max(34px, 3.4vw);
}
@media (max-width:1280px){
  .travelogue-list-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:768px){
  .travelogue-list-grid{ grid-template-columns:1fr; }
}
.travelogue-list-cell{
  position:relative;
  /* 2026-07-15 改:用户要求"图片放大一点",390×238 → 更大比例(2:1 横幅,更宽更舒展) */
  aspect-ratio:2 / 1;
  overflow:hidden;
  background:#f1eadf;
  border:0;
  border-radius:0;
  cursor:pointer;
  display:block;
  padding:0;
  width:100%;
  font:inherit;
}
.travelogue-list-cell::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.48));
  z-index:1;
  transition:opacity .35s ease;
}
.travelogue-list-cell:hover::after{ opacity:.82; }
.travelogue-list-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  transition:transform .55s ease;
}
.travelogue-list-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.12);
  transition:transform .55s ease;
}
.travelogue-list-cell:hover .travelogue-list-photo img{ transform:scale(1.18) }
.travelogue-list-caption{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(12px, 1.4vw, 22px);
  color:#fff;
  flex-direction:column;
  gap:8px;
  z-index:2;
}
.travelogue-list-caption-loc{
  display:none;
}
.travelogue-list-caption-title{
  font-family:var(--font-display); font-weight:500;
  font-size:max(14px, 1.08vw);
  line-height:1.22;
  color:#fff;
  margin:0;
  text-shadow:0 2px 12px rgba(0,0,0,0.6);
  width:88%;
  max-width:none;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.travelogue-reader{
  --reader-pad:max(10px, 1.4vw);
  --reader-radius:max(14px, 1.25vw);
  --reader-inner-gap:max(8px, 0.8vw);
  position:fixed;
  inset:0;
  z-index:9990;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--reader-pad);
}
.travelogue-reader[hidden]{ display:none; }
.travelogue-reader-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(0,0,0,.64);
  cursor:pointer;
}
.travelogue-reader-panel{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 46%) minmax(0, 54%);
  width:min(calc(100vw - (var(--reader-pad) * 2)), 82vw);
  height:min(calc(100svh - (var(--reader-pad) * 2)), 84svh);
  background:#f7f1e8;
  box-shadow:0 max(20px, 1.8vw) max(56px, 5vw) rgba(0,0,0,.34);
  overflow:hidden;
  border-radius:var(--reader-radius);
}
.travelogue-reader-close{
  position:absolute;
  top:var(--reader-inner-gap);
  right:var(--reader-inner-gap);
  z-index:4;
  width:max(36px, 2.6vw);
  height:max(36px, 2.6vw);
  border:1px solid rgba(255,255,255,.65);
  background:rgba(0,0,0,.34);
  color:#fff;
  cursor:pointer;
  font-size:max(24px, 1.8vw);
  line-height:1;
  border-radius:999px;
}
.travelogue-reader-media{
  position:relative;
  min-width:0;
  background:#111;
  overflow:hidden;
  margin:var(--reader-inner-gap) 0 var(--reader-inner-gap) var(--reader-inner-gap);
  border-radius:calc(var(--reader-radius) - 4px);
}
.travelogue-reader-media-stage,
.travelogue-reader-media-stage img,
.travelogue-reader-media-stage video{
  width:100%;
  height:100%;
}
.travelogue-reader-media-stage img,
.travelogue-reader-media-stage video{
  display:block;
  object-fit:cover;
}
/* Keepers reader:左栏人物图带视频时叠加 Seen on the Journey 播放层(整卡点击跳视频) */
.keepers-reader-media-video{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
}
.keepers-reader-media-video:hover img,
.keepers-reader-media-video:focus-visible img{
  transform:scale(1.04);
}
.keepers-reader-media-video img{
  transition:transform .55s ease, filter .25s ease;
}
.keepers-reader-media-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:clamp(52px, 5.5vw, 88px);
  height:clamp(52px, 5.5vw, 88px);
  z-index:3;
  display:block;
  color:#0F1B16;
  pointer-events:none;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.35));
}
.keepers-reader-media-play svg{
  width:100%;
  height:100%;
  display:block;
}
.travelogue-reader-media-caption{
  position:absolute;
  left:max(18px, 2vw);
  right:max(18px, 2vw);
  bottom:max(18px, 2vw);
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.65);
}
.travelogue-reader-media-caption span{
  display:block;
  font-size:max(11px, .72vw);
  font-weight:700;
  letter-spacing:.16em;
  margin-bottom:max(8px, .55vw);
  text-transform:uppercase;
}
.travelogue-reader-media-caption strong{
  display:block;
  font-family:var(--font-display);
  font-size:max(22px, 2.1vw);
  font-weight:500;
  line-height:1.12;
}
/* 2026-07-24 加:两级标题橙色分割线 ——
   位于 .travelogue-reader-media-caption 的 location(span) 和 title(strong) 之间;
   2026-07-24 再改:width 从 100%(全宽) 缩到 max(60px, 6vw) —— 用户要求"只需要左边一小节",
   跟其他 section divider (clamp(80px, 6vw, 128px)) 风格一致,主题橙 var(--color-brand)。
   "一级标题(无 location)时不用" 通过 main.js 给 .travelogue-reader-caption-divider
   加 [hidden] 属性来隐藏,NJK 已无条件渲染 divider 元素 */
.travelogue-reader-caption-divider{
  display:block;
  width:max(60px, 6vw);
  height:2px;
  background:var(--color-brand);
  margin:max(8px, 0.6vw) 0;
}
.travelogue-reader-caption-divider[hidden]{ display:none; }
.travelogue-reader-article{
  min-width:0;
  height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:max(12px, 1.2vw);
  background:#f7f1e8;
}
.travelogue-reader-article img,
.travelogue-reader-article video{
  display:block;
  width:100%;
  height:auto;
  min-height:120%;
  object-fit:cover;
  object-position:top center;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
/* 2026-09-05:右侧文章图缺数据时的「Story coming soon」占位卡片;
   跟左侧 portrait 视觉对齐(同样 #fff 底 + 阴影),保证网格不塌陷。 */
.travelogue-reader-article .keepers-reader-article-empty{
   display:flex;
   flex-direction:column;
   align-items:flex-start;
   justify-content:center;
   gap:max(10px, 1vw);
   min-height:60%;
   padding:max(28px, 3.4vw) max(20px, 2.4vw);
   background:#fff;
   box-shadow:0 10px 30px rgba(0,0,0,.12);
   box-sizing:border-box;
   text-align:left;
   color:#1f1a14;
 }
.travelogue-reader-article .keepers-reader-article-empty-eyebrow{
   font-size:max(11px, .72vw);
   font-weight:700;
   letter-spacing:.16em;
   text-transform:uppercase;
   color:var(--color-brand);
 }
.travelogue-reader-article .keepers-reader-article-empty-title{
   font-family:var(--font-display);
   font-size:max(22px, 2.1vw);
   font-weight:500;
   line-height:1.18;
   color:var(--color-accent-mint);
 }
.travelogue-reader-article .keepers-reader-article-empty-sub{
   font-size:max(13px, .95vw);
   line-height:1.55;
   color:rgba(31,26,20,.72);
 }
body.travelogue-reader-open{ overflow:hidden; }
@media (max-width:860px){
  .travelogue-reader{
    --reader-pad:10px;
    --reader-radius:16px;
    --reader-inner-gap:8px;
  }
  .travelogue-reader-panel{
    grid-template-columns:1fr;
    grid-template-rows:minmax(220px, 38svh) minmax(0, 1fr);
    width:calc(100vw - (var(--reader-pad) * 2));
    height:calc(100svh - (var(--reader-pad) * 2));
  }
  .travelogue-reader-media{
    margin:var(--reader-inner-gap) var(--reader-inner-gap) 0;
  }
  .travelogue-reader-article{ padding:12px; }
}
@media (max-width:768px){
  :root{ --secondary-content-top-gap:max(58px, 11vw); }
  .travelogue-list-caption-title{
    font-size:max(15px, 4.2vw);
    width:86%;
  }
}


/* 3.3 CULTURAL KEEPERS · MASTERS STRIP 已合并到 style.css §5b (.masters-strip 块)
   这里只保留首页用的 .keeper-card / .keeper-photo / .keeper-overlay / .keeper--green/orange
   二级页(.masters-strip)走 style.css,不走本文件 */

/* ============================================================
   4. ABOUT PAGE — 8 sections (2026-07-13 迁移自 style.css)
   ============================================================ */

/* ============================================
   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 1.2fr;
  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);
}

/* ============================================================
   5. STAMP DECORATION + ABOUT 8 sections (2026-07-13 迁移自 style.css)
   ============================================================ */
/* ============================================
   STAMP DECORATION(2026-07-13 fix)
   二级页底部装饰条(destinations / cultural-keepers / travelogue 三个页面都用了):
     - img 永远水平居中,跟视口缩放,任何宽度下都保持同样比例
     - 宽度 clamp(280px, 46vw, 880px):320px 视口 280px / 1920px 视口 880px / 2560px+ 保持 880px
     - opacity 0.55(二级页装饰,比首页 stamp 0.28 略重;不抢主体内容)
   ============================================ */
.stamp-decoration{
  display:block;
  width:100%;
  text-align:center;
  /* 2026-07-14 改:印花位置统一往下,靠近 wayon footer-letter ——
     旧 margin:clamp(28, 3vw, 56) 0 让印花停留在 page 内容底部、距 footer-letters 较远;
     改为 margin-top:clamp(60, 5vw, 100)(加大顶部距内容)、margin-bottom:0(贴 footer-letters),
     让印花紧贴 WAYON 字母图。
     2026-07-21 改:印花到上面内容距离收窄 —— margin-top clamp(48px,5vw,96px) → 2vw(纯 vw) */
  margin:2vw 0 0;
  padding:0 var(--page-gutter);
  box-sizing:border-box;
}
.stamp-decoration-img{
  display:block;
  margin:0 auto;               /* 水平居中核心 */
  /* 2026-07-15 改:用户要求"二级页面底部印花再缩小"
     0.5x 基础上再缩 30% → clamp(140, 23vw, 440) → clamp(98, 16vw, 308)
     1920 视口 0.5x ≈ 220px(原 0.5x → 440,再 ×0.5 = 220) */
  width:max(180px, 18vw);
  height:auto;                  /* 保持原图比例,跟 viewport 一起缩放 */
  max-width:100%;               /* 窄屏(< 98px) 兜底,避免溢出 */
  opacity:.55;
  pointer-events:none;
  user-select:none;
}

/* ============================================
   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 (顶部 hero) */
.about-main{
  position:relative; width:100vw;
  background:#0F1B16; color:#fff;
  overflow:hidden;
}
@media (max-width:767px){ .about-main{ min-height:100svh; padding:18svh var(--page-gutter) 8svh; display:flex; align-items:flex-start; } }
@media (min-width:768px){
  .about-main{ height:100vh; min-height:100svh; }
}
.about-main-bg{ position:absolute; inset:0; z-index:0; background:#0F1B16; }
.about-main-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.55)); }
.about-main-stage{
  position:relative; z-index:2; width:100%;
  display:flex; flex-direction:column; align-items:flex-start;
}
@media (max-width:767px){
  .about-main-stage{ padding:0 var(--page-gutter); }
  .about-main-pill{ font-family:var(--font-display); font-weight:500; letter-spacing:0.04em; color:#33B481; font-size:max(1.4rem, 5vw); margin-bottom:5vw; }
  .about-main-title{ font-size:max(3rem, 12vw); font-weight:900; line-height:1.05; margin:0 0 6vw; color:#BD4B16; font-family:var(--font-display); }
  .about-main-title .title-line{ display:block; white-space:pre-line; }
  .about-main-desc{ font-size:max(1rem, 3.6vw); color:#33B481; line-height:1.55; margin:0 0 5vw; max-width:90%; font-family:var(--font-display); font-weight:500; }
  .about-main-tagline{ font-size:max(1rem, 3.6vw); color:#33B481; font-style:italic; font-family:var(--font-display); font-weight:500; }
}
@media (min-width:768px){
  .about-main-stage{
    width:100vw; aspect-ratio:16/9; min-height:0;
    padding:6.25vw var(--page-gutter); justify-content:center;
  }
  .about-main-pill{ font-family:var(--font-display); font-weight:500; letter-spacing:0.04em; color:#33B481; font-size:max(1.5rem, 2.3vw); margin-bottom:1.2vw; }
  .about-main-title{
    font-size:max(3.5rem, 4vw);
    font-weight:900; line-height:1.05; margin:0 0 2.5vw;
    color:#BD4B16; font-family:var(--font-display);
  }
  .about-main-title .title-line{ display:block; white-space:pre-line; }
  .about-main-desc{ font-size:max(1.1rem, 1.5vw); color:#33B481; line-height:1.55; margin:0 0 1.8vw; max-width:60vw; font-family:var(--font-display); font-weight:500; }
  .about-main-tagline{ font-size:max(1.1rem, 1.6vw); color:#33B481; font-style:italic; font-family:var(--font-display); font-weight:500; }
}

/* ============================================================
   4. JOURNEYS · ARTICLE DETAIL (L3)
   2026-07-16 加:home cultural-entries 6 tile 跳的三级页模板样式
   复用 .page-hero(.page-hero-pill--orange + .page-hero-title + .page-hero-divider),
   正文块 .journey-article-body 走容器 + 文章阅读样式(typography from style.css)
   ============================================================ */
.journey-article-body{
  background:var(--color-white);
  padding:clamp(60px, 6vw, 120px) 0 clamp(80px, 8vw, 140px);
}
.journey-article-body .container{
  max-width:max(880px, 45.833vw);
  padding:0 var(--page-gutter);
  margin:0 auto;
}
.journey-article-back{
  display:inline-block;
  margin-bottom:clamp(20px, 2vw, 32px);
  font-family:var(--font-display);
  font-size:max(13px, 0.9vw);
  font-weight:600;
  color:var(--color-brand);
  text-decoration:none;
  letter-spacing:0.06em;
  text-transform:uppercase;
  transition:opacity .2s ease;
}
.journey-article-back:hover{ opacity:0.7 }
.journey-article-content{
  font-family:var(--font-serif);
  font-size:max(15px, 1.1vw);
  line-height:1.85;
  color:var(--color-text, #2a2a2a);
}
.journey-article-content h2{
  font-family:var(--font-display);
  font-size:max(22px, 2vw);
  font-weight:700;
  color:var(--color-dark);
  text-transform:uppercase;
  letter-spacing:0.005em;
  margin:clamp(36px, 4vw, 56px) 0 clamp(12px, 1.2vw, 20px);
}
.journey-article-content p{
  margin:0 0 1em;
}
.journey-article-lede{
  font-family:var(--font-display);
  font-size:max(20px, 2vw);
  line-height:1.4;
  color:var(--color-brand);
  font-weight:500;
  margin:0 0 clamp(28px, 3vw, 48px);
  padding-bottom:clamp(20px, 2vw, 32px);
  border-bottom:1px solid rgba(189,75,22,0.25);
}
.journey-article-body .center-action{
  text-align:center;
  margin-top:clamp(40px, 4vw, 64px);
}
.journey-article-body .center-action .btn{
  background:transparent;
  color:var(--color-accent-mint);
  border:1.5px solid var(--color-accent-mint);
  border-radius:999px;
  padding:clamp(14px, 1.1vw, 20px) clamp(32px, 2.4vw, 48px);
  font-family:var(--font-display);
  font-size:max(13px, 0.85vw);
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-decoration:none;
  display:inline-block;
  transition:all .25s ease;
}
.journey-article-body .center-action .btn:hover{
  background:var(--color-accent-mint);
  color:#fff;
}

/* ============================================================
   5. JOURNEYS · DETAIL / L3 — 4 sections
   2026-07-17 加:journey-hero / journey-info / journey-highlights / journey-detail-sections
   ============================================================ */

/* 5.1 JOURNEY HERO — 三级页专属 hero */
.journey-hero,
.journey-info,
.journey-highlights,
.journey-detail-sections{
  --journey-gutter:var(--page-gutter);
  --journey-copy-width:min(100%, max(640px, 58vw));
}

.journey-hero{
  position:relative;
  width:100%;
  aspect-ratio:16 / 7;
  min-height:80svh;
  overflow:hidden;
  color:#fff;
  background:#000;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex;
  align-items:flex-start;
}
.journey-hero .hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.journey-hero-stage{
  position:relative;
  z-index:2;
  width:100%;
  padding:max(124px, 11vw) var(--journey-gutter) clamp(28px, 3.2vw, 48px);
  margin-top:0;
  display:flex;
  justify-content:center;
}
.journey-hero-content{
  width:100%;
  max-width:min(100%, max(760px, 62vw));
  text-align:center;
  margin:0;
}
.journey-hero-location{
  font-family:var(--font-display);
  font-size:clamp(24px, 3.4vw, 64px);
  line-height:1.08;
  font-weight:700;
  letter-spacing:0;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 clamp(4px, 0.6vw, 10px);
  opacity:1;
  white-space:normal;
  overflow-wrap:anywhere;
  text-wrap:balance;
  max-width:100%;
}
.journey-hero-title{
  font-family:var(--font-display);
  font-size:max(20px, 1.7vw);
  line-height:1.12;
  font-weight:800;
  letter-spacing:0;
  color:#fff;
  margin:0 0 clamp(10px, 1.2vw, 18px);
  max-width:none;
}
.journey-hero-brief{
  font-family:var(--font-display);
  font-size:max(20px, 1.55vw);
  font-weight:300;
  line-height:1.4;
  color:#fff;
  margin:0 auto clamp(6px, 0.7vw, 12px);
  width:100%;
  max-width:min(100%, max(720px, 56vw));
  text-align:center;
}
.journey-hero-detail{
  font-family:var(--font-body);
  font-size:max(15px, 1.12vw);
  font-weight:400;
  line-height:1.55;
  color:rgba(255,255,255,0.9);
  margin:0 auto clamp(16px, 2vw, 28px);
  width:100%;
  max-width:min(100%, max(760px, 60vw));
  text-align:center;
}
.journey-hero-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--color-accent-mint);
  color:#fff;
  border:0;
  padding:max(12px, 1vw) max(32px, 3vw);
  font-family:var(--font-display);
  font-weight:400;
  font-size:max(14px, 0.95vw);
  line-height:1;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:999px;
  cursor:pointer;
  transition:background .25s ease;
}
.journey-hero-cta:hover{ background:var(--color-accent-mint); filter:brightness(0.92); }
@media (max-width:767px){
  .journey-hero{
    aspect-ratio:auto;
    min-height:auto;
    align-items:flex-start;
  }
  .journey-hero-stage{
    padding:max(88px, 24vw) var(--page-gutter) max(36px, 10vw);
  }
  .journey-hero-content{ text-align:center; }
  .journey-hero-location{ font-size:clamp(18px, 5.8vw, 32px); }
  .journey-hero-title{ font-size:max(18px, 5vw); font-weight:800; }
  .journey-hero-brief{ font-size:max(18px, 5vw); font-weight:300; }
}

/* 5.2 JOURNEY INFO — 基本信息 */
.journey-info{
  width:100%;
  background:#fff;
  padding:clamp(24px, 3.2vw, 44px) 0 clamp(34px, 4.5vw, 66px);
}
.journey-info-inner{
  max-width:none;
  margin:0 auto;
  padding:0 var(--journey-gutter);
}
.journey-info-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px, 5vw, 80px);
  margin-bottom:clamp(42px, 5vw, 72px);
}
@media (max-width:767px){
  .journey-info-grid{ grid-template-columns:1fr; gap:20px; }
}
.journey-info-item{
  display:flex;
  flex-direction:column;
  gap:clamp(4px, 0.5vw, 8px);
  text-align:center;
}
.journey-info-label{
  font-family:var(--font-display);
  font-size:max(20px, 2vw);
  font-weight:700;
  margin:0;
  line-height:1.1;
  letter-spacing:0.02em;
  text-transform:uppercase;
}
.journey-info-label--when{ color:var(--color-brand); }
.journey-info-label--price{ color:var(--color-accent-mint); }
.journey-info-label--howlong{ color:var(--color-primary); }
.journey-info-value{
  font-family:var(--font-body);
  font-size:max(15px, 1.12vw);
  color:var(--color-text-muted-2);
  margin:0;
  line-height:1.5;
}
.journey-info-about{
  /* 印花容器:相对定位、限定最大宽度,让 .journey-info-about-stamp 居中 */
  position:relative;
  width:100%;
  max-width:var(--journey-copy-width);
  margin:0 auto;
  padding:clamp(60px, 7vw, 110px) clamp(20px, 2.4vw, 40px);
  text-align:center;
  overflow:hidden;
}
.journey-info-about-stamp{
  /* 复用 home 的 .section-stamp-bg 视觉但尺寸小一些,与 .journey-copy-width 容器匹配 */
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:max(220px, 32vw);
  max-width:min(560px, 90%);
  height:auto;
  opacity:0.55;
  z-index:0;
  pointer-events:none;
  user-select:none;
}
.journey-info-about-inner{
  /* 浮在印花之上,水平居中,内容仍走原有宽度 */
  position:relative;
  z-index:1;
  max-width:min(100%, max(720px, 56vw));
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px, 1.1vw, 18px);
}
.journey-info-about-title{
  font-family:var(--font-display);
  font-size:max(24px, 2.3vw);
  font-weight:700;
  color:var(--color-accent-mint);
  margin:0;
  line-height:1.1;
  letter-spacing:0.02em;
  text-align:center;
}
.journey-info-about-text{
  font-family:var(--font-body);
  font-size:max(15px, 1.12vw);
  line-height:1.7;
  color:var(--color-accent-mint);
  margin:0;
  width:100%;
  text-align:center;
}
.journey-info-about-text p{
  margin:0;
}
.journey-info-about-text p:empty{
  display:none;
}

/* 5.3 JOURNEY HIGHLIGHTS — 6 张图 3×2 */
.journey-highlights{
  width:100%;
  background:#fff;
  padding:clamp(28px, 4vw, 60px) 0;
}
.journey-highlights-inner{
  max-width:none;
  margin:0 auto;
  padding:0 var(--journey-gutter);
}
.journey-highlights-title{
  font-family:var(--font-display);
  font-size:max(24px, 2.3vw);
  font-weight:700;
  color:var(--color-accent-mint);
  margin:0 0 clamp(22px, 3vw, 40px);
  letter-spacing:0.02em;
  text-align:center;
  width:100%;
}
.journey-highlights-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px, 2vw, 30px);
}
@media (max-width:960px){
  .journey-highlights-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .journey-highlights-grid{ grid-template-columns:1fr; }
}
.journey-highlights-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  overflow:hidden;
  border-radius:0;
}
.journey-highlights-photo{
  width:100%;
  aspect-ratio:16 / 10;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.journey-highlights-card-body{
  padding:clamp(10px, 1vw, 16px) clamp(6px, 0.7vw, 10px) 0;
  display:flex;
  flex-direction:column;
  gap:clamp(6px, 0.6vw, 10px);
  align-items:center;
  text-align:center;
}
.journey-highlights-card-title{
  font-family:var(--font-display);
  font-size:max(18px, 1.45vw);
  font-weight:700;
  color:var(--color-accent-mint);
  margin:0;
  line-height:1.25;
}
.journey-highlights-divider{
  width:clamp(34px, 3vw, 52px);
  height:2px;
  background:var(--color-brand);
}
.journey-highlights-card-desc{
  font-family:var(--font-body);
  font-size:max(15px, 1.08vw);
  line-height:1.55;
  color:var(--color-accent-mint);
  margin:0;
  width:100%;
  text-align:center;
}

.journey-highlights-card--text{
  border-top:2px solid var(--color-brand);
  background:#fff;
  padding:clamp(18px, 2vw, 28px) clamp(8px, 0.9vw, 14px) clamp(14px, 1.6vw, 22px);
  justify-content:center;
}
.journey-highlights-card--text .journey-highlights-card-body{
  padding:0;
  justify-content:center;
}

/* 5.4 JOURNEY DETAIL SECTIONS — 可配置的详细信息块 */
.journey-detail-sections{
  width:100%;
  background:#fff;
  padding:clamp(6px, 1vw, 16px) 0 clamp(38px, 4.8vw, 72px);
}
.journey-detail-sections-inner{
  max-width:none;
  margin:0 auto;
  padding:0 var(--journey-gutter);
  display:flex;
  flex-direction:column;
  gap:clamp(24px, 2.8vw, 44px);
}
.journey-detail-block{
  width:100%;
  max-width:var(--journey-copy-width);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:clamp(6px, 0.6vw, 10px);
  text-align:center;
}
.journey-detail-block-title{
  font-family:var(--font-display);
  font-size:max(24px, 2.3vw);
  font-weight:700;
  color:var(--color-accent-mint);
  margin:0;
  line-height:1.1;
  letter-spacing:0.02em;
}
.journey-detail-block-text{
  font-family:var(--font-body);
  font-size:max(15px, 1.12vw);
  line-height:1.7;
  color:var(--color-accent-mint);
  margin:0 auto;
  width:100%;
  max-width:min(100%, max(720px, 56vw));
  text-align:center;
}

/* ============================================================
   5.6 DETAIL BLOCK VARIANTS — captain, day-by-day, stay
   ============================================================ */

/* Captain: 4 fixed green sections — uses existing green .journey-detail-block-title */
.journey-detail-block--captain .journey-detail-block-title{
  color:var(--color-accent-mint);
}

/* Day by Day */
.journey-detail-block--day{
  width:100%;
  max-width:var(--journey-copy-width);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:clamp(6px, 0.6vw, 10px);
  text-align:center;
}
.journey-detail-day-steps{
  display:flex;
  flex-direction:column;
  gap:clamp(10px, 1.2vw, 18px);
  width:100%;
  max-width:min(100%, max(720px, 56vw));
  margin:0 auto;
  padding-top:clamp(8px, 0.8vw, 14px);
}
.journey-detail-day-step{
  display:grid;
  grid-template-columns:clamp(60px, 8vw, 110px) 1fr;
  gap:clamp(10px, 1.5vw, 22px);
  align-items:start;
  text-align:left;
}
.journey-detail-day-time{
  font-family:var(--font-display);
  font-size:max(14px, 1.05vw);
  font-weight:700;
  color:var(--color-brand);
  line-height:1.3;
  padding-top:2px;
  white-space:nowrap;
}
.journey-detail-day-activity{
  font-family:var(--font-body);
  font-size:max(14px, 1.05vw);
  line-height:1.6;
  color:var(--color-accent-mint);
}

/* Where You'll Stay — 6-card grid identical to journey-highlights */
.journey-detail-block--stay{
  width:100%;
  max-width:none;
}
.journey-detail-stay-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px, 2vw, 30px);
  margin-top:clamp(16px, 1.5vw, 26px);
}
@media (max-width:960px){
  .journey-detail-stay-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .journey-detail-stay-grid{ grid-template-columns:1fr; }
}
.journey-detail-stay-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  overflow:hidden;
}
.journey-detail-stay-photo{
  width:100%;
  aspect-ratio:16 / 10;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ============================================================
   5.7 SUBMIT REQUEST — reused in journey detail
   (about-submit styles from style.css apply)
   ============================================================ */

/* ============================================================
   5.10 THEMED ARTICLE DETAIL (L3) — 10 sections
   2026-08-02 改:article-detail.njk 重新组合 10 section,
   共享现有 journey-highlights(六卡 grid)/ journey-detail / day-by-day / stay
   样式并新增以下:
     journey-day-by-day       — 标题 + 时间/活动列表
     journey-why-matters      — 标题 + 段落
     journey-accommodation    — 复用 highlights 六卡 grid
     journey-travelogue       — 3 张 travelogue 卡(与 L2 封面一致)
     journey-similar          — 全宽 #F1F1F1,左下角 label + 右侧 3 张
   ============================================================ */

/* Braced heading — green display title flanked by the home hero braces.
   复用首页 hero-brace 资源;适用于 journey-detail 的所有绿色大标题。 */
.braced-heading{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px, 1.4vw, 28px);
  width:100%;
  color:var(--color-accent-mint);
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:0.02em;
  line-height:1.1;
  text-align:center;
  text-transform:none;
}
.braced-heading-text{
  display:inline-block;
}
.braced-heading-brace{
  display:inline-block;
  width:auto;
  flex:0 0 auto;
  align-self:center;
  /* 大标题使用 1.05em ≈ 字号高度,作为相对缩放基准 */
  height:1.05em;
  user-select:none;
}
/* 当作为 section 标题使用时:外层 <h2> 通常居中布局,braced-heading 居中填满 */
.journey-highlights-title.braced-heading,
.journey-day-by-day-title.braced-heading,
.journey-why-matters-title.braced-heading,
.journey-info-about-title.braced-heading,
.journey-detail-block-title.braced-heading,
.journey-similar-label.braced-heading{
  margin:0;
}
.journey-detail-block-title{
  /* h3 上下文不加粗,跟着 parent h3 的 font-weight 走;这里让它继承 700 */
  font-weight:inherit;
}

/* Day by Day */
.journey-day-by-day{
  width:100%;
  background:#fff;
  padding:clamp(22px, 3vw, 44px) 0;
}
.journey-day-by-day-inner{
  max-width:var(--journey-copy-width, min(100%, max(640px, 58vw)));
  margin:0 auto;
  padding:0 var(--journey-gutter, var(--page-gutter));
  display:flex;
  flex-direction:column;
  gap:clamp(12px, 1.4vw, 20px);
  text-align:center;
}
.journey-day-by-day-title{
  font-family:var(--font-display);
  font-size:max(24px, 2.3vw);
  font-weight:700;
  color:var(--color-accent-mint);
  margin:0 0 clamp(8px, 1vw, 16px);
  line-height:1.1;
  letter-spacing:0.02em;
}
.journey-day-by-day-days{
  display:flex;
  flex-direction:column;
  gap:clamp(20px, 2.2vw, 36px);
  width:100%;
  max-width:min(100%, max(720px, 56vw));
  margin:0 auto;
  text-align:center;
}
.journey-day-by-day-day{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(4px, 0.4vw, 8px);
  padding:0;
}
.journey-day-by-day-day-label{
  font-family:var(--font-display);
  font-size:max(16px, 1.2vw);
  font-weight:700;
  color:var(--color-brand);
  line-height:1.2;
  letter-spacing:0.02em;
}
.journey-day-by-day-day-intro{
  font-family:var(--font-display);
  font-size:max(18px, 1.45vw);
  font-weight:700;
  font-style:italic;
  color:var(--color-brand);
  line-height:1.25;
  text-align:center;
}
.journey-day-by-day-day-detail{
  font-family:var(--font-body);
  font-size:max(15px, 1.05vw);
  line-height:1.65;
  color:var(--color-accent-mint);
  margin:clamp(4px, 0.4vw, 8px) auto 0;
  max-width:min(100%, max(640px, 52vw));
  text-align:center;
}

/* Why This Journey Matters */
.journey-why-matters{
  width:100%;
  background:#fff;
  padding:clamp(22px, 3vw, 44px) 0;
}
.journey-why-matters-inner{
  max-width:var(--journey-copy-width, min(100%, max(640px, 58vw)));
  margin:0 auto;
  padding:0 var(--journey-gutter, var(--page-gutter));
  display:flex;
  flex-direction:column;
  gap:clamp(8px, 0.8vw, 14px);
  text-align:center;
}
.journey-why-matters-title{
  font-family:var(--font-display);
  font-size:max(24px, 2.3vw);
  font-weight:700;
  color:var(--color-accent-mint);
  margin:0 0 clamp(8px, 1vw, 14px);
  line-height:1.1;
  letter-spacing:0.02em;
}
.journey-why-matters-text{
  font-family:var(--font-body);
  font-size:max(15px, 1.12vw);
  line-height:1.7;
  color:var(--color-accent-mint);
  margin:0 auto;
  width:100%;
  max-width:min(100%, max(720px, 56vw));
}
.journey-cultural-thread,
.journey-itinerary{
  width:100%;
  background:#fff;
  padding:clamp(22px, 3vw, 44px) 0;
}
.journey-cultural-thread-inner,
.journey-itinerary-inner{
  max-width:var(--journey-copy-width, min(100%, max(640px, 58vw)));
  margin:0 auto;
  padding:0 var(--journey-gutter, var(--page-gutter));
  display:flex;
  flex-direction:column;
  gap:clamp(8px, 0.8vw, 14px);
  text-align:center;
}
.journey-cultural-thread-title,
.journey-itinerary-title{
  font-family:var(--font-display);
  font-size:max(24px, 2.3vw);
  font-weight:700;
  color:var(--color-accent-mint);
  margin:0 0 clamp(8px, 1vw, 14px);
  line-height:1.1;
  letter-spacing:0.02em;
}
.journey-cultural-thread-text,
.journey-itinerary-text{
  font-family:var(--font-body);
  font-size:max(15px, 1.12vw);
  line-height:1.7;
  color:var(--color-accent-mint);
  margin:0 auto;
  width:100%;
  max-width:min(100%, max(720px, 56vw));
}

/* Travelogue strip — 与 L2 封面一致:cover + overlay + center caption
   整体使用页面可用宽度的 3/4,图片长宽比保持 2:1 不变
   2026-08-02 改:上沿 padding 调小,让三张图离上方表单更近 */
.journey-travelogue-strip{
  width:100%;
  background:#fff;
  padding:clamp(14px, 1.6vw, 28px) 0 clamp(36px, 5vw, 72px);
}
.journey-travelogue-inner{
  max-width:none;
  margin:0 auto;
  padding:0 var(--page-gutter);
  /* 三张卡的整行宽度 = 容器可用宽度的 3/4,居中 */
  display:flex;
  flex-direction:column;
  gap:clamp(18px, 2vw, 28px);
  align-items:center;
}
.journey-travelogue-inner > .journey-travelogue-grid{
  width:calc((100% - 2 * var(--page-gutter)) * 3 / 4);
  max-width:none;
}
@media (max-width:768px){
  /* 移动端不再缩,占满 gutter 之内,避免三卡挤到太小 */
  .journey-travelogue-inner > .journey-travelogue-grid{ width:100%; }
}
.journey-travelogue-title-heading{
  font-family:var(--font-display);
  font-size:max(24px, 2.3vw);
  font-weight:700;
  color:var(--color-accent-mint);
  margin:0;
  text-align:center;
  letter-spacing:0.02em;
}
.journey-travelogue-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  column-gap:max(18px, 1.8vw);
  row-gap:max(34px, 3.4vw);
}
@media (max-width:1280px){
  .journey-travelogue-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:768px){
  .journey-travelogue-grid{ grid-template-columns:1fr; }
}
.journey-travelogue-card{
  position:relative;
  display:block;
  aspect-ratio:2 / 1;
  overflow:hidden;
  background:#f1eadf;
  text-decoration:none;
  color:inherit;
}
.journey-travelogue-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.48));
  z-index:1;
  transition:opacity .35s ease;
}
.journey-travelogue-card:hover::after{ opacity:.82; }
.journey-travelogue-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  transition:transform .55s ease;
}
.journey-travelogue-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.12);
  transition:transform .55s ease;
}
.journey-travelogue-card:hover .journey-travelogue-photo img{ transform:scale(1.18); }
.journey-travelogue-caption{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(12px, 1.4vw, 22px);
  color:#fff;
  flex-direction:column;
  gap:8px;
  z-index:2;
}
.journey-travelogue-caption-loc{
  display:none;
}
.journey-travelogue-caption-title{
  font-family:var(--font-display);
  font-weight:500;
  /* 2026-08-02 改:字号缩到 2/3 —— max(14, 1.08vw) → max(9px, 0.72vw) */
  font-size:max(9px, 0.72vw);
  line-height:1.22;
  color:#fff;
  margin:0;
  text-shadow:0 2px 12px rgba(0,0,0,0.6);
  width:88%;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Similar Experiences — 全宽 #F1F1F1;
   桌面/平板:左侧 side 列 + 右侧 3 张 3:4 图
     左侧区域内:印花在右上角(顶对齐,右对齐),
                SIMILAR EXPERIENCES 两行 label 在左下角(底对齐,左对齐) */
.journey-similar{
  width:100%;
  background:#F1F1F1;
  padding:clamp(40px, 5vw, 80px) 0;
}
.journey-similar-inner{
  max-width:none;
  margin:0 auto;
  padding:0 var(--page-gutter);
}
.journey-similar-row{
  display:grid;
  grid-template-columns:minmax(160px, 1fr) minmax(0, 3fr);
  align-items:stretch;
  gap:clamp(20px, 3vw, 48px);
}
.journey-similar-side{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  min-height:100%;
  align-self:stretch;
}
.journey-similar-stamp{
  width:clamp(64px, 7vw, 120px);
  height:auto;
  opacity:0.55;
  filter:grayscale(0.4);
  margin:0;
  align-self:flex-end;
}
.journey-similar-stamp img{
  display:block;
  width:100%;
  height:auto;
}
.journey-similar-label{
  margin:0;
  font-family:var(--font-display);
  font-size:max(26px, 2.4vw);
  font-weight:700;
  color:var(--color-accent-mint);
  letter-spacing:0.04em;
  text-transform:uppercase;
  line-height:1.15;
  text-align:left;
  max-width:clamp(220px, 18vw, 320px);
}
.journey-similar-grid{
  /* 三张图(整体 ~3/4 缩放)放在右侧 */
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(10px, 1vw, 16px);
  width:100%;
  align-self:start;
}
.journey-similar-card{
  position:relative;
  display:block;
  aspect-ratio:3 / 4;
  overflow:hidden;
  background:#1a1a1a;
  text-decoration:none;
  color:#fff;
}
.journey-similar-card:hover .journey-similar-photo{ transform:scale(1.34); }
.journey-similar-photo{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.2);
  transition:transform .6s ease;
}
.journey-similar-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0) 60%);
  transition:opacity .25s ease;
  pointer-events:none;
  z-index:1;
}
.journey-similar-card:hover::after{ opacity:.55; }
.journey-similar-card-title{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  margin:0;
  padding:0 clamp(16px, 1.5vw, 24px);
  width:100%;
  height:100%;
  box-sizing:border-box;
  text-align:center;
  color:#fff;
  font-family:var(--font-display);
  font-size:max(14px, 1.05vw, 16px);
  font-weight:500;
  line-height:1.3;
  letter-spacing:0.01em;
  text-shadow:0 1px 4px rgba(0,0,0,0.5);
}
.journey-similar-grid{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:560px){
  .journey-similar-row{ grid-template-columns:1fr; }
  .journey-similar-side{ min-height:0; padding:clamp(12px, 2vw, 20px) 0; justify-content:flex-start; }
  .journey-similar-label{ margin-top:clamp(12px, 2vw, 20px); }
  .journey-similar-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   JOURNEYS · ARTICLE SKELETON NOTICE
   Shown above the hero on L3 themed articles whose source is
   mock fallback only (no docx story behind them yet). Editors
   use it to spot what is awaiting WP content.
   ============================================================ */
.article-skeleton-notice{
  background:linear-gradient(90deg, rgba(238,140,52,.08) 0%, rgba(238,140,52,.18) 100%);
  border-left:4px solid #ee8c34;
  padding:18px 28px;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0 auto;
  max-width:1180px;
  width:calc(100% - 56px);
  margin-top:48px;
  border-radius:0 6px 6px 0;
  box-sizing:border-box;
}
.article-skeleton-notice-inner{ display:flex; flex-direction:column; gap:8px; }
.article-skeleton-tag{
  display:inline-block;
  background:#ee8c34;
  color:#fff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:2px;
  align-self:flex-start;
}
.article-skeleton-notice p{
  margin:0;
  color:#5a4a3a;
  font-size:14px;
  line-height:1.5;
}

/* ============================================
   CULTURAL KEEPERS · DETAIL · VIDEO CARD
   2026-09-02:
     - 详情页正文末尾嵌一张视频跳转卡(seen on the journey 左图同款视觉)
     - 卡片尺寸套住 detail-content(max-width:780px),横向居中
     - .keeper-video-card-tile--video = 整张可点(href=YouTube)+ 播放圆;hover 图缩放
     - .keeper-video-card-tile--static = 缺 video_url 时只渲染静态图,无播放圆、无 link、hover 无缩放
   ============================================ */
.keeper-video-card{
  display:block;
  margin:clamp(40px, 5vw, 72px) auto clamp(20px, 3vw, 36px);
  padding:0;
  max-width:100%;
  width:100%;
  box-sizing:border-box;
}
.keeper-video-card-tile{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:#1a1a1a;
  overflow:hidden;
  border-radius:6px;
  text-decoration:none;
  color:inherit;
}
.keeper-video-card-tile--video{ cursor:pointer; }
.keeper-video-card-tile--static{ cursor:default; pointer-events:none; }
.keeper-video-card-photo{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform .55s ease, filter .25s ease;
  filter:brightness(.95);
}
.keeper-video-card-tile--video:hover .keeper-video-card-photo,
.keeper-video-card-tile--video:focus-visible .keeper-video-card-photo{
  transform:scale(1.05);
  filter:brightness(1.05);
}
.keeper-video-card-play{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:clamp(48px, 5vw, 72px);
  height:clamp(48px, 5vw, 72px);
  z-index:3;
  display:block;
  color:#0F1B16;
  transition:transform .25s ease;
  pointer-events:auto;
}
.keeper-video-card-tile--video:hover .keeper-video-card-play,
.keeper-video-card-tile--video:focus-visible .keeper-video-card-play{
  transform:translate(-50%,-50%) scale(1.12);
}
.keeper-video-card-play svg{ width:100%; height:100%; display:block; }
.keeper-video-card-caption{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(4px, .6vw, 8px);
  margin:clamp(14px, 1.8vw, 22px) 0 0;
  padding:0;
  text-align:center;
}
.keeper-video-card-caption-eyebrow{
  font-family:var(--font-display);
  font-size:max(0.65rem, 0.78vw);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-brand);
  margin:0;
}
.keeper-video-card-caption-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:max(0.95rem, 1.1vw);
  line-height:1.35;
  color:var(--color-accent-mint);
  margin:0;
}

/* ============================================
   CULTURAL KEEPERS �� DETAIL �� 2-COL LAYOUT (long image on the right)
   2026-09-02:
     - .detail-layout wraps a left text column + right long-image column
     - left column = ԭ������ + ��Ƶ��(.detail-content / .keeper-video-card)
     - right column = ƴ�ϳ�ͼ(.keeper-long-xxx.jpg,�� keepers.js �� keeperLongImageMap)
     - ȱ��ͼʱֻ��Ⱦһ��(��ͬԭ���ĵ���)
     - �ƶ���ջΪ����;��ͼ�������
   ============================================ */
.detail-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:clamp(24px, 3vw, 56px);
  width:100%;
  max-width:max(1480px, 77.083vw);
  margin:clamp(24px, 3vw, 56px) auto 0;
  padding:0 var(--page-gutter);
  box-sizing:border-box;
}
@media (min-width:900px){
  .detail-layout{
    grid-template-columns:minmax(0, 5fr) minmax(0, 4fr);
    align-items:start;
  }
}
.detail-layout-text{
  display:flex; flex-direction:column;
  width:100%; min-width:0;
}
.detail-layout-text > .detail-content{ max-width:none; }
.detail-layout-long{
  display:flex; flex-direction:column;
  width:100%; min-width:0;
}
.detail-layout-long-img{
  display:block;
  width:100%;
  height:auto;
  border-radius:6px;
  /* �� keepers-content-xxx ��ͼԭ��Ƶ��Ӿ��տڶ��� */
  box-shadow:0 12px 40px -24px rgba(15,27,22,0.35);
}