/* ============================================================
   KDY 余庆里 · PC 内页（覆盖式面板）样式
   2026-09-24：客户定「点栏目 → 从下方带入、覆盖整个窗口的一个页面，
   在这个页面里单独排版」。宽屏杂志风，左右结构。

   设计依据（客户手绘草图 2026-09-24）：
     左侧一整幅图 ｜ 右侧文案分组成行 + 中间嵌小方块图 ｜ 底部一条收尾带
   宽屏发挥（不照搬手机版）：
     · 首屏左右分栏：左图右文，文字垂直居中
     · 章节：左图 sticky 钉住，右栏文字滚动 —— 竖屏做不出来的一手
     · 名录（文明篇 17 位）改多列网格，不再逐条占满一屏
     · 全程留白加大、正文栏收窄，靠"图宽文窄"的差值做杂志感

   【命名】所有类名带 pg- 前缀。pc.css 里有裸 h1 / .eyebrow / .line / .tagline
   规则（首页文案块用的），不加前缀两边会互相污染。

   【配色】沿用手机版四个内页的定稿值，一个不新调：
     纸色 #EFEDE6 / 墨色 #17181A / 青铜 #8F7142 / 页脚墨绿 #173c2c
   ============================================================ */

@font-face {
  font-family: "KDY Pages Serif";
  src: url("/fonts/NotoSerifSC-Light-pages.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007F, U+00A0-00FF, U+2000-206F, U+3000-303F, U+4E00-9FFF, U+FF00-FFEF;
}
@font-face {
  font-family: "KDY Pages Serif";
  src: url("/fonts/NotoSerifSC-Regular-pages.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007F, U+00A0-00FF, U+2000-206F, U+3000-303F, U+4E00-9FFF, U+FF00-FFEF;
}

/* 士林润园补字：两端分别托管，保持现有共享字体不变。 */
@font-face {
  font-family: "KDY Pages Serif";
  src: url("../media/fonts/NotoSerifSC-Shilin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+58EB, U+6797;
}
@font-face {
  font-family: "KDY Pages Serif";
  src: url("../media/fonts/NotoSerifSC-Shilin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+58EB, U+6797;
}

/* gad 迪拜作品名单补字。 */
@font-face {
  font-family: "KDY Pages Serif";
  src: url("../media/fonts/NotoSerifSC-Dubai-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+62DC, U+8FEA;
}
@font-face {
  font-family: "KDY Pages Serif";
  src: url("../media/fonts/NotoSerifSC-Dubai-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+62DC, U+8FEA;
}

/* Cormorant 400：pc.css 只注册了 300（首页用），而内页英文按手机版要走 400
   （手机版 html[lang="en"] .hero-title 就是 font-weight: 400）。
   不注册的话设 400 会被浏览器合成假粗，笔画发糊。 */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/CormorantGaramond-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============ 面板外壳 ============
   从下方滑入覆盖整个窗口（客户定：不用新 HTML 页、不用跳转，保持熟悉的手感）。
   面板内部自己滚，首页那条【不滚动】的舞台不受影响 —— 两者不抢滚轮。 */

.pg-panel {
  --pg-paper: #efede6;
  --pg-ink: #17181a;
  --pg-ink-soft: #33342f;
  --pg-muted: #6f6c63;
  --pg-hairline: #d9d4c8;
  --pg-bronze: #8f7142;
  --pg-green: #173c2c;

  --pg-serif-cn: "KDY Pages Serif", "Songti SC", "STSong", serif;
  --pg-serif-en: "Cormorant Garamond", "Times New Roman", serif;
  --pg-sans: -apple-system, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --pg-ease: cubic-bezier(0.16, 1, 0.3, 1);

  --pg-pad: clamp(32px, 6vw, 120px); /* 版心左右留白 */
  --pg-col: 620px;                   /* 正文栏宽：宽屏下刻意收窄 */
  --pg-head-h: 76px;                 /* 面板内页头高度（sticky 偏移量） */

  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--pg-paper);
  color: var(--pg-ink);
  font-family: var(--pg-serif-cn);
  font-weight: 300;
  line-height: 1.9;
  text-align: left;
  -webkit-font-smoothing: antialiased;

  transform: translateY(100%);
  visibility: hidden;
  /* 关闭时：位移先跑，跑完再把 visibility 收掉（否则会看见它滑下去的全过程） */
  transition: transform 780ms var(--pg-ease), visibility 0s linear 780ms;
}

.pg-panel.is-open {
  transform: none;
  visibility: visible;
  transition: transform 780ms var(--pg-ease), visibility 0s;
}

.pg-panel * {
  box-sizing: border-box;
}

.pg-panel p,
.pg-panel h1,
.pg-panel h2,
.pg-panel h3,
.pg-panel h4,
.pg-panel ul,
.pg-panel li,
.pg-panel figure,
.pg-panel figcaption,
.pg-panel blockquote {
  margin: 0;
  padding: 0;
}

.pg-panel ul {
  list-style: none;
}

/* 面板内的滚动容器。overscroll-behavior 防止滚到底后把滚动传给外层。 */
.pg-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* ============ 面板内页头（栏目名 + 关闭叉） ============
   压在首屏大图上时是白字；滚过首屏后转成纸色毛玻璃条（同手机版 .is-solid 手感）。 */

.pg-head {
  /* 页头与 .pg-scroll 是同级；固定在面板内即可，不需要嵌套 fixed。 */
  position: absolute;
  z-index: 6;
  top: var(--pc-view-top, 0px);
  left: var(--pc-view-left, 0px);
  width: var(--pc-view-width, 100%);
  max-width: 100vw;
  max-width: 100dvw;
  height: var(--pg-head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--pg-pad);
  color: #fff;
  pointer-events: none;
  transition: background 420ms var(--pg-ease), color 420ms var(--pg-ease);
}

.pg-head__brand {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  opacity: 0;
  transition: opacity 420ms var(--pg-ease);
}

.pg-head__brand span:first-child {
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing: 0.14em;
}

.pg-head__brand span:last-child {
  font-family: var(--pg-serif-en);
  font-size: clamp(10px, 0.72vw, 12px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.7;
}

.pg-head.is-solid {
  background: color-mix(in srgb, var(--pg-paper) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--pg-hairline);
  color: var(--pg-ink);
}

/* 首屏顶部已有大标题，栏目名要等滚过首屏再出现，免得重复 */
.pg-head.is-solid .pg-head__brand {
  opacity: 1;
}

/* 关闭叉（客户 2026-09-24 三条要求：更大 / 暗底上用白色 / 上滑后变色）
   1. 尺寸：杆长 18px→26px，热区 52px→64px
   2. 颜色：压在首屏大图上是【纯白】——原来继承 currentColor，
      而 .pg-head 初始 color 是 #fff，但底图暗角不均匀，仍有几处发灰看不清，
      所以这里写死白色 + 一点投影，保证在任何画面上都立得住
   3. 上滑后：.pg-head.is-solid 时随页头一起转墨色（见下一条规则） */
.pg-close {
  pointer-events: auto;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  margin-right: -18px;
  border: 0;
  background: none;
  padding: 0;
  position: relative;
  color: #fff;
}

.pg-close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  /* 压图时的可读性：深色画面上一道极淡的投影，比加描边干净 */
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  transition: transform 320ms var(--pg-ease), background 420ms var(--pg-ease),
    box-shadow 420ms var(--pg-ease);
}

/* 打开面板时仍把焦点送到关闭按钮；鼠标操作不显示系统蓝框。
   Tab 键导航保留明确的焦点提示。 */
.pg-close:focus {
  outline: none;
}

.pc-keyboard-input .pg-close:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.pg-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.pg-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.pg-close:hover span:first-child {
  transform: translate(-50%, -50%) rotate(135deg);
}

.pg-close:hover span:last-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* 上滑到纸色页头之后：转墨色、去掉投影（浅底上投影会显脏），悬停转青铜 */
.pg-head.is-solid .pg-close {
  color: var(--pg-ink);
}

.pg-head.is-solid .pg-close span {
  box-shadow: none;
}

.pg-head.is-solid .pg-close:hover {
  color: var(--pg-bronze);
}

/* 品牌篇首屏也是浅纸色，关闭按钮始终使用深色。 */
#pg-panel-pp .pg-close {
  color: var(--pg-ink);
}

#pg-panel-pp .pg-close span {
  box-shadow: none;
}

#pg-panel-pp .pg-close:hover {
  color: var(--pg-bronze);
}

/* 面板打开时锁住背后的首页交互 */
.pc.has-panel-open .topbar,
.pc.has-panel-open .edge-nav,
.pc.has-panel-open .switch-ui,
.pc.has-panel-open .bottom-ui,
.pc.has-panel-open .scroll-cue {
  pointer-events: none;
}

/* ============ 首屏：满幅横版大图 + 字压天空（居中） ============
   2026-09-24 客户定：首屏不分左右，横版大图压字；
   随后又定「字居中排在天幕上，就是画面的天空上」。

   这张图（1890×1064）天空占上半部约 55%，云层聚在左上与中上、右侧偏净，
   字压在天空区可读；所以文案块【上对齐】而不是底部对齐 ——
   原来是 align-items: flex-end（贴地平线），现在改成把文字放进上方的天空带。

   高度 86vh 而非 100vh：留一条缝让人看见下面还有内容。
   下方各章节仍是左图右文的杂志结构（见 .pg-split）。 */

.pg-opener {
  position: relative;
  height: 86vh;
  min-height: 460px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.pg-opener__media {
  position: absolute;
  inset: 0;
  background: #dcd8cd;
  overflow: hidden;
  /* 裁切与遮罩保持原位，不参与首屏入场及滚动位移。 */
  transform: translateZ(0);
  isolation: isolate;
}

.pg-opener__motion {
  width: 100%;
  height: 100%;
}

.pg-opener__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 地脉、联名首图试加 20% 黑色蒙层，压暗背景，文字保持原亮度。 */
#pg-panel-dm .pg-opener__media::after,
#pg-panel-sj .pg-opener__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* 压字要读得出来：上中下各压一层，底部最重（字在下方）。
   竖版素材横过来铺会裁掉上下，蒙版中间留亮、保住画面主体。 */
.pg-opener__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 11, 10, 0.42) 0%,
    rgba(10, 11, 10, 0.10) 34%,
    rgba(10, 11, 10, 0.40) 72%,
    rgba(10, 11, 10, 0.80) 100%
  );
}

/* 字压天空：居中、上对齐，落在画面顶部往下约 8%~40% 的那条带里。
   max-width 收窄，长标题折行后仍是一块居中的方正文字块，不像通栏标语。 */
.pg-opener__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(980px, 76vw);
  margin: 0 auto;
  padding: clamp(96px, 16vh, 190px) var(--pg-pad) 0;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.6vh, 20px);
}

/* 地脉、文明、联名：完整文字组统一在首屏大图中央排布。 */
#pg-panel-dm .pg-opener,
#pg-panel-sj .pg-opener,
#pg-panel-mp .pg-opener {
  align-items: center;
}

#pg-panel-dm .pg-opener__copy,
#pg-panel-sj .pg-opener__copy,
#pg-panel-mp .pg-opener__copy {
  padding-top: 0;
  padding-bottom: 0;
}

/* 滚动运动层与图像入场分离，外层裁切和遮罩固定。
   面板打开期间保持稳定图层，不在滚出 / 返回首屏时反复升降层。 */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .pg-panel.is-open .pg-opener__motion,
  .pg-panel.is-open .pg-opener__copy {
    will-change: transform;
  }
}

/* 主标：字距与行距照手机版定（客户 2026-09-24：统一一下）。
   手机版 .hero-title 是 letter-spacing 0.08em / line-height 1.34，
   PC 原来是 0.02em / 1.24 —— 字距太挤，与手机版的疏朗调性不一致。
   字号仍走 PC 自己的 clamp：宽屏一句一行（见上面的 nowrap），不需要手机版那么大的 vw
   （手机版 8.2vw 在 1440 宽会到 108px 上限，PC 上会顶掉整块版心）。 */
.pg-opener__title {
  font-weight: 300;
  font-size: clamp(34px, 4.2vw, 72px);
  line-height: 1.34;
  letter-spacing: 0.08em;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

.pg-opener__title span:empty,
.pg-opener__sub:empty {
  display: none;
}

/* ---------- 中文主标：一句一行，不折行（客户 2026-09-24） ----------
   「因为现在 PC 版是宽屏，所以主标题的排布不用像手机版一样折好多行。
    比如一句主标可以一行就在页面里排好，不用折好几行。」

   做法与手机版一致（dm/js/main.js 的 fitBlock）：
     · 中文【不折行】—— 一句就是一行
     · 不折之后若超出栏宽，由 pages.js 的 fitChineseBlocks() 按实测收字号
     · 英法【不套用】—— 它们的词条本来就是封面式断行（一行一个短词组），
       强行不折会把字号收到读不了；让西文按自然规则折行才是杂志排法

   ⚠️ nowrap 必须在中文时才有；英法这条规则不生效，见下面 :lang 闸门。 */
.pg-panel[lang="zh-CN"] .pg-opener__title span,
.pg-panel[lang="zh-CN"] .pg-intro__title span,
.pg-panel[lang="zh-CN"] .pg-lead-text span,
.pg-panel[lang="zh-CN"] .pg-sechead__mark,
.pg-panel[lang="zh-CN"] .pg-signatories span,
.pg-panel[lang="zh-CN"] .pg-vow__text span {
  white-space: nowrap;
}

/* 英法主标：走封面式断行（一行一个短词组），字距放开才有封面的量级。
   数值照手机版 html[lang="en"] .hero-title 定：weight 400 / 0.04em / 1.24。
   手机版 line-height 1.24 比中文那套（1.34）紧 —— 全大写没有升部降部，
   行距留给字距，太松会散。PC 照抄这个关系。 */
.pg-panel[lang="en"] .pg-opener__title,
.pg-panel[lang="fr"] .pg-opener__title {
  font-family: var(--pg-serif-en);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.24;
}

/* 副题：手机版是 sans + 0.28em 大字距的封面 kicker（.hero-sub），照它对齐。
   中文词条为空即隐藏，所以这条实际只作用在英法页。 */
.pg-opener__sub {
  font-family: var(--pg-sans);
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 400;
  letter-spacing: 0.28em;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
}

/* 压在图上的眉题与装饰小英文：纸色系配色在黑底上会糊掉，这里一律走白 */
.pg-opener .pg-eyebrow {
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- 首屏入场：大图缓推 + 文案按字号分层浮现 ----------
   客户 2026-09-24：一是「首屏大图要像手机版那样加一个微微缩放的动效」（第一版没看见），
   二是「文字淡入分几个层次，根据字体大小分开淡入：1. 主标 2. 副标」。

   第一版没看见的原因有两条，都记在这里：
     a) 时长太短 —— 原来 1600ms、缩到 1.075→1，且从 0ms 就起手，
        与面板滑入的 780ms 完全重叠；等页面落定、眼睛跟上，动画已经演完了。
        手机版是 hero-drift 14s（scale 1.14 → 1.02），慢到像呼吸才看得见。
     b) 起手太早 —— 现在给全部动效加 620ms 起手延迟，
        落在面板滑入的后半段：画面先就位，动效再接着演。

   分层按【字号】分档（客户要求），不是均匀错峰：
     · 眉题   最早、最短、位移最小 —— 它是点火，不该抢戏
     · 主标   最晚、最长、位移最大 + 轻微放大收束 —— 视觉重心，压轴出场
     · 副标   紧跟主标、比主标快 —— 主标一落就补上，形成一主一从
     · 装饰小英文 最后、最轻 */

.pg-opener.is-staging .pg-opener__media img {
  /* 与手机版同量级的缓推：起点放大、终点仍略大于 1，全程十几秒不紧不慢 */
  animation: pgOpenerZoom 14000ms var(--pg-ease) 620ms both;
}

/* 文案分层：默认（眉题 / 装饰小英文）这一档 */
.pg-opener.is-staging .pg-opener__copy > * {
  animation: pgRiseSubtle 900ms var(--pg-ease) both;
  animation-delay: calc(620ms + var(--stage-d, 0ms));
}

/* 主标：位移大、时长长、带一点放大收束 —— 一眼就知道它是主角 */
.pg-opener.is-staging .pg-opener__copy > .pg-opener__title {
  animation: pgRiseTitle 1500ms var(--pg-ease) both;
  animation-delay: 860ms;
}

/* 副标：跟在主标后面，位移中小、时长中等 */
.pg-opener.is-staging .pg-opener__copy > .pg-opener__sub {
  animation: pgRiseSub 1100ms var(--pg-ease) both;
  animation-delay: 1180ms;
}

@keyframes pgOpenerZoom {
  from { transform: translateY(-1.4%) scale(1.14); }
  to   { transform: translateY(0) scale(1.02); }
}

/* 主标：升起 + 极轻微放大收束 */
@keyframes pgRiseTitle {
  from {
    opacity: 0;
    transform: translateY(38px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 副标：位移比主标小一档 */
@keyframes pgRiseSub {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 眉题 / 装饰小英文：几乎只是"显影"，不位移太多 */
@keyframes pgRiseSubtle {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============ 通用排版小件 ============ */

.pg-eyebrow {
  font-family: var(--pg-sans);
  font-size: clamp(11px, 0.78vw, 13px);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pg-bronze);
}

/* ---------- 装饰性小英文（deco）----------
   由来（手机中文版的做法，客户 2026-09-24 要求 PC 内页沿用）：
     客户觉得「中文字体排版没有英文洋气」，所以在中文内页里给重点标题配了
     对应的英文小字，用来提升页面的时尚感。词条只在中文字典里有值，
     英法字典里是空串 —— 所以英法页面天然不显示。

   ⚠️ 两条硬约束，别改：
     1. 只有中文版显示。除了"英法词条为空串"，下面再加一道 CSS 闸门兜底，
        无论数据怎么变都不会漏出英文。
     2. 字号按【层级】分档，不是一律小字。手机版首屏那条是
        clamp(26px,5.6vw,68px) 的大字 —— 它是造型元素，不是脚注。
        一律压成 12px 就完全失去那个"洋气"的作用了（PC 第一版就是这么写的，已修）。 */

.pg-deco {
  font-family: var(--pg-serif-en);
  /* 与手机版 .deco-en 对齐：正体（不是斜体）+ 全大写 + 宽字距。
     之前 PC 写成了斜体小字，调性跟手机版完全是两回事（客户 2026-09-24 指出）。 */
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--pg-muted);
  line-height: 1.6;
}

.pg-deco:empty {
  display: none;
}

/* 语言闸门（兜底）：非中文一律不显示，与手机版 html:not([lang="zh-CN"]) 同一手法 */
.pg-panel:not([lang="zh-CN"]) .pg-deco {
  display: none;
}

/* 一档 · 首屏标题之下：整页最大的装饰英文，主要造型元素。
   手机版是 clamp(26px,5.6vw,68px) —— 那是造型，不是脚注，
   PC 宽屏按同一定位取一个略收的值（宽屏 5.6vw 会到 80px，偏大）。 */
.pg-opener .pg-deco {
  font-size: clamp(20px, 2.1vw, 38px);
  letter-spacing: 0.18em;
}

/* 二档 · 通栏压图大字、门牌大字之下（手机版 clamp(18px,3.9vw,48px)） */
.pg-band .pg-deco,
.pg-split .pg-sechead__mark + .pg-deco {
  font-size: clamp(17px, 1.7vw, 30px);
  letter-spacing: 0.14em;
}

/* 三档 · 引文标题、章节标题之下（手机版 clamp(17px,2.8vw,35px)） */
.pg-creed .pg-deco,
.pg-vow .pg-deco {
  font-size: clamp(15px, 1.4vw, 25px);
  letter-spacing: 0.16em;
}

/* 四档 · 引句与页脚格言、题献之下（手机版 clamp(14px,1.8vw,22px)） */
.pg-foot .pg-deco {
  font-size: clamp(13px, 1.1vw, 19px);
  letter-spacing: 0.24em;
  color: color-mix(in srgb, var(--pg-paper) 62%, var(--pg-green));
}

/* 五档 · 区位注释、收束句之下：最小一档，只作收边（手机版 clamp(11px,3vw,14px)） */
.pg-addr__note .pg-deco {
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: 0.26em;
}

/* 压在图上的装饰英文（首屏／通栏）：黑底上走白，否则纸色系会糊掉 */
.pg-opener .pg-deco,
.pg-band .pg-deco {
  color: rgba(255, 255, 255, 0.78);
}

/* 章节头：细线 + 序号 + 大号章节名 + 小号大写英文 */
.pg-sechead {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: clamp(20px, 3vh, 34px);
  border-bottom: 1px solid var(--pg-hairline);
  margin-bottom: clamp(28px, 4vh, 48px);
}

.pg-sechead__index {
  font-family: var(--pg-serif-en);
  font-size: clamp(12px, 0.95vw, 16px);
  letter-spacing: 0.3em;
  color: var(--pg-bronze);
}

.pg-sechead__mark {
  font-weight: 300;
  font-size: clamp(26px, 2.9vw, 46px);
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.pg-sechead__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.pg-firm {
  font-family: var(--pg-serif-en);
  font-size: clamp(14px, 1.05vw, 18px);
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: var(--pg-ink-soft);
}

.pg-works {
  font-family: var(--pg-sans);
  font-size: clamp(11px, 0.8vw, 13px);
  letter-spacing: 0.12em;
  color: var(--pg-muted);
}

/* ============ 章节：左图 sticky + 右栏文字 ============
   这是宽屏专属的一手：右栏文字滚动时左侧大图钉住不动，
   图与文字形成持续的对位关系，而不是各滚各的。 */

.pg-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  padding: clamp(56px, 9vh, 120px) var(--pg-pad);
  align-items: start;
}

.pg-split__media {
  position: sticky;
  top: var(--pg-head-h);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 22px);
}

/* 外滩图与标题固定对齐：取消本节 sticky 与揭示位移，仅保留淡入。
   宽屏左图让出右栏「01」的行高、间距及中文字形上方留白。 */
#pg-dm-bund {
  --bund-index-size: clamp(12px, 0.95vw, 16px);
  --bund-heading-gap: 10px;
  --bund-title-size: clamp(26px, 2.9vw, 46px);
  --bund-ink-offset: 0px;
}

/* Noto Serif SC Light：1.2 行高内「百年外滩」字形顶距约 0.18em。
   让图片对齐可见笔画，补偿量随标题字号一起缩放。 */
#pg-panel-dm[lang="zh-CN"] #pg-dm-bund {
  --bund-ink-offset: calc(var(--bund-title-size) * 0.18);
}

#pg-dm-bund .pg-sechead__mark {
  font-size: var(--bund-title-size);
}

#pg-dm-bund > .pg-split__media {
  position: static;
}

#pg-dm-bund .pg-sechead {
  gap: var(--bund-heading-gap);
}

#pg-dm-bund .pg-sechead__index {
  font-size: var(--bund-index-size);
  line-height: 1.9;
}

#pg-dm-bund .pg-media[data-photo-reveal],
#pg-dm-bund .pg-sechead[data-reveal] {
  transform: none;
  transition-property: opacity;
}

@media (min-width: 1025px) {
  #pg-dm-bund > .pg-split__media {
    padding-top: calc(var(--bund-index-size) * 1.9 + var(--bund-heading-gap) + var(--bund-ink-offset));
  }
}

.pg-split__body {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 28px);
  /* ⚠️ 这里原本有一条 padding-top: clamp(0px, 2vh, 24px)（早期给右栏文字让出一点呼吸）。
     去掉的原因（客户 2026-09-24）：引言块拎出去居中之后，右栏第一个元素变成了章节标题
     「01 / 百年外滩」，而左栏图没有这个内边距 —— 图会比章节标题高出一小截，两栏对不齐。
     现在两栏都从各自的顶边起，图与章节标题同一基线。
     若以后右栏又要单独下沉，改 media 那侧一起沉，别只动这一边。 */
}

/* KPF：公司标题单独一行，图片与正文共用下一行的顶边。 */
#pg-sj-kpf {
  grid-template-areas: ". heading" "media body";
  /* 延续公司信息到正文原有的间距，由整行共同留白。 */
  row-gap: calc(clamp(28px, 4vh, 48px) + clamp(16px, 2.4vh, 28px));
}

#pg-sj-kpf > .pg-sechead {
  grid-area: heading;
  margin-bottom: 0;
}

#pg-sj-kpf > .pg-split__media {
  grid-area: media;
}

#pg-sj-kpf > .pg-split__body {
  grid-area: body;
}

/* gad：少量资料延续 KPF 的两栏节奏，完整展示客户横图。 */
#pg-sj-gad {
  grid-template-areas: ". heading" "media body";
  row-gap: clamp(40px, 6vh, 64px);
}

#pg-sj-gad > .pg-sechead {
  grid-area: heading;
  margin-bottom: 0;
}

#pg-sj-gad > .pg-split__media {
  grid-area: media;
  position: static;
}

#pg-sj-gad > .pg-split__body {
  grid-area: body;
}

#pg-sj-gad .pg-figcaption { text-transform: none; }

#pg-sj-gad .pg-works {
  line-height: 1.9;
}

/* SHoP：标题对齐右侧照片 → 两张并列大图 → 正文 → 手绘稿。 */
#pg-sj-shop {
  --shop-column-gap: clamp(32px, 5vw, 96px);
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(40px, 6vh, 80px);
}

#pg-sj-shop > .pg-shop-quote,
#pg-sj-shop > .pg-sechead,
#pg-sj-shop > .pg-split__body {
  width: calc((100% - var(--shop-column-gap)) / 2);
  justify-self: end;
}

#pg-sj-shop > .pg-shop-quote {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(25px, 2.3vw, 36px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

.pg-shop-quote p { margin: 0; }

.pg-shop-quote footer {
  margin-top: 20px;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.5;
}

#pg-sj-shop > .pg-sechead {
  margin-bottom: 0;
}

#pg-sj-shop > .pg-split__media {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--shop-column-gap);
  align-items: start;
}

#pg-sj-shop > .pg-sketches {
  padding: clamp(16px, 2vh, 28px) 0 0;
}

#pg-sj-shop .pg-sketches__title {
  display: block;
}

/* 淡入时 figure 的 opacity/transform 会创建独立混合组。
   在组内提供同色纸底，multiply 从第一帧起就有正确底色可混合。 */
#pg-sj-shop .pg-sketch {
  background: var(--pg-paper);
  isolation: isolate;
}

#pg-sj-shop .pg-sketches__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
}

#pg-sj-shop .pg-sketch figcaption {
  justify-content: center;
  text-align: center;
}

/* 手稿动效试排：1720ms 淡入，依次错开 360ms，独立 translate 承担滚动视差。 */
#pg-sj-shop [data-sketch-reveal] {
  opacity: 0;
  transform: translateY(32px);
  translate: 0 var(--sketch-parallax, 0px);
  transition: opacity 1720ms ease-in-out,
    transform 1720ms cubic-bezier(0.22, 1, 0.36, 1);
}

#pg-sj-shop .is-revealed > [data-sketch-reveal] {
  opacity: 1;
  transform: none;
}

#pg-sj-shop .is-revealed > [data-sketch-reveal]:nth-child(2) {
  transition-delay: 360ms;
}

#pg-sj-shop .is-revealed > [data-sketch-reveal]:nth-child(3) {
  transition-delay: 720ms;
}

#pg-sj-shop .is-resetting > [data-sketch-reveal] {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  #pg-sj-shop [data-sketch-reveal],
  #pg-sj-shop .is-revealed > [data-sketch-reveal]:nth-child(n) {
    translate: none;
    transform: none;
    transition: none;
    transition-delay: 0ms;
  }
}

/* 章节之间的细线分隔 */
.pg-split + .pg-split {
  border-top: 1px solid var(--pg-hairline);
}

/* ============ 图版 ============ */

.pg-frame {
  overflow: hidden;
  background: color-mix(in srgb, var(--pg-hairline) 40%, var(--pg-paper));
}

.pg-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.pg-figcaption {
  margin-top: 12px;
  font-family: var(--pg-sans);
  font-size: clamp(10px, 0.74vw, 12px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pg-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.pg-credit {
  color: color-mix(in srgb, var(--pg-muted) 72%, var(--pg-paper));
}

/* 竖构图：4:5，与手机版卡片同比例 */
.pg-media--tall .pg-frame {
  aspect-ratio: 4 / 5;
}

/* 宽构图 */
.pg-media--wide .pg-frame {
  aspect-ratio: 16 / 9;
}

/* 原比例不裁：图内自带「效果图」标注，裁切会连标注一起切掉 */
.pg-media--plate .pg-frame {
  aspect-ratio: auto;
}

.pg-media--plate img {
  height: auto;
}

/* 三联画：三张方形细部。宽屏三格并排，是这一页的尺度插曲 */
/* 三联画：上二小、下一大（客户 2026-09-24 草图）。
   ⚠️ 与手机版【相反】—— 手机版 dm/css/style.css 的 .media--trio 是「上一大、下二小」
      （first-child 独占整行）。PC 按草图来，别照着手机版"顺手改回去"。
   两小格是方形，大格横一些（4:3），压住这一段的底部。 */
.pg-trio {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 1vw, 16px);
}

.pg-trio .pg-frame {
  aspect-ratio: 1 / 1;
}

/* 第三张独占整行：因为它在 DOM 里排最后，所以是"上二小、下一大" */
.pg-trio .pg-frame:last-child {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 3;
}

/* PC 专用颜色校正：把共享原图的米色底映射为页面纸色，保留原图尺寸。 */
.pg-map-filter {
  position: absolute;
  pointer-events: none;
}

.pg-media--map img {
  width: 100%;
  height: auto;
  display: block;
  filter: url(#pc-map-paper);
}

/* ============ 正文块 ============ */

/* 引言：居中横排，独立成块（客户 2026-09-24 定）
   原先挂在 01 章节右栏，与章节标题挤一列；现在拎到章节之前单独居中 ——
   满幅首屏之后先换一口气，再进左右结构的章节。
   宽度比正文栏（--pg-col）宽一档：这是全页的引子，气势要比正文足。 */
.pg-intro {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(64px, 11vh, 130px) var(--pg-pad);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.8vh, 20px);
}

.pg-intro__title {
  font-weight: 300;
  font-size: clamp(23px, 2.4vw, 38px);
  line-height: 1.5;
  letter-spacing: 0.06em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pg-intro__title span:empty {
  display: none;
}

/* 引言下的装饰英文：客户要求比手机版大一点、正体、一行放下。
   字距比别处收一点（0.14em），一行才放得稳。 */
.pg-intro .pg-deco {
  font-size: clamp(15px, 1.45vw, 26px);
  letter-spacing: 0.14em;
}

.pg-intro__lead {
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--pg-ink-soft);
}

/* 联名篇：大图下方的内页标题与事务所链接，深色居中。 */
.pg-intro--firms {
  color: var(--pg-ink);
}

.pg-intro--firms .pg-eyebrow,
.pg-intro--firms .pg-deco {
  color: var(--pg-ink-soft);
}

/* 标题组与事务所目录之间留出更宽的杂志式留白。 */
.pg-intro--firms .pg-index {
  margin-top: clamp(40px, 6vh, 72px);
}

@media (min-width: 1025px) {
  #pg-panel-mp[lang="zh-CN"] .pg-opener__title,
  #pg-panel-sj[lang="zh-CN"] .pg-opener__title,
  #pg-panel-sj[lang="zh-CN"] .pg-intro--firms .pg-intro__title {
    flex-direction: row;
    justify-content: center;
    white-space: nowrap;
  }
}

.pg-lead-text {
  font-weight: 300;
  font-size: clamp(19px, 1.85vw, 30px);
  line-height: 1.5;
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
}

.pg-lead-text span:empty {
  display: none;
}

.pg-body {
  max-width: var(--pg-col);
  font-size: clamp(14px, 1.02vw, 17px);
  line-height: 2;
  color: var(--pg-ink-soft);
}

.pg-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: var(--pg-col);
}

.pg-list li {
  position: relative;
  padding-left: 24px;
  font-size: clamp(14px, 1.02vw, 17px);
  line-height: 1.95;
  color: var(--pg-ink-soft);
}

/* 条列标记用一根青铜短横，比圆点更接近杂志的处理 */
.pg-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 11px;
  height: 1px;
  background: var(--pg-bronze);
}

.pg-line {
  display: block;
}

/* ============ 通栏：满幅图压字（章节转折） ============ */

.pg-band {
  position: relative;
  min-height: clamp(420px, 74vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pg-band__media {
  position: absolute;
  inset: 0;
}

.pg-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pg-band__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 11, 10, 0.46);
}

.pg-band__copy {
  position: relative;
  max-width: var(--pg-col);
  padding: 0 var(--pg-pad);
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.pg-band__title {
  font-weight: 300;
  font-size: clamp(24px, 2.7vw, 44px);
  line-height: 1.4;
  letter-spacing: 0.03em;
  display: flex;
  flex-direction: column;
}

.pg-band__close {
  font-size: clamp(18px, 1.7vw, 28px);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* ---------- 收束段：图在上、文字在下（客户 2026-09-24） ----------
   客户原话：不希望图片与页脚粘连，参考手机版的处理 —— 把图单独拎出来，
   文字放到图下方，与墨绿页脚隔开。

   与上面那条「满幅图压字」的通栏区别：
     · 图不再铺满整段，也不再压蒙版 —— 它是一张独立的图，文字在它下面
     · 文字回到纸色上（所以颜色要走墨色族，不能再用白字）
     · 与页脚之间留出大留白，断开"图直接顶着墨绿块"的粘连感
       （那正是手机版截图里的做法：一段纸色空白收尾，再进墨绿页脚） */

.pg-band--close {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;      /* 覆盖 .pg-band 的 min-height：这段不再是满屏通栏 */
  overflow: visible;  /* 同上：不需要裁剪 */
  gap: clamp(28px, 5vh, 56px);
  padding: clamp(48px, 8vh, 100px) var(--pg-pad) clamp(72px, 13vh, 160px);
}

/* 图：仍是满幅构图，但只占这一段自己的高度 */
.pg-band--close .pg-band__media {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.pg-band--close .pg-band__copy {
  max-width: var(--pg-col);
  padding: 0;
  color: var(--pg-ink);
}

/* 收束句与它下面的小英文：纸色上的墨色，不再是被图压着的白字。
   字号/字距照手机版 .band-close-line 的语言分档定
   （中文 0.2em 大字距；英法 0.04em、行高收到 1.4）。 */
.pg-band--close .pg-band__close {
  color: var(--pg-ink-soft);
  font-size: clamp(20px, 2vw, 34px);
  line-height: 1.5;
  letter-spacing: 0.2em;
}

.pg-band--close .pg-deco {
  color: var(--pg-muted);
  /* 客户 2026-09-24：英文最多两行（原来是四行）。
     收窄字距 + 限制在 34em 内，让整句在宽屏上排成两行。 */
  font-size: clamp(15px, 1.45vw, 26px);
  letter-spacing: 0.1em;
  line-height: 1.5;
  max-width: 34em;
}

/* 英法：收束句字距收回来，行高紧一档（同手机版 html[lang="en"] .band-close-line） */
.pg-panel[lang="en"] .pg-band--close .pg-band__close,
.pg-panel[lang="fr"] .pg-band--close .pg-band__close {
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* ============ 引文块（文明篇「门牌即身份」／品牌篇誓词） ============ */

.pg-creed {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(72px, 13vh, 150px) var(--pg-pad);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.pg-creed__title {
  font-weight: 300;
  font-size: clamp(28px, 3vw, 48px);
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.pg-creed__text {
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 2.05;
  letter-spacing: 0.03em;
  color: var(--pg-ink-soft);
}

.pg-creed__rule {
  width: 52px;
  height: 1px;
  background: var(--pg-bronze);
  margin-top: 6px;
}

/* ============ 名录（文明篇 17 位）：滚动驱动的肖像画廊 ============
   2026-09-24 客户定（照参考截图给的做法）：
     · 左侧 = 人物介绍（路名门牌 / 姓名 / 身份）
     · 中间 = 肖像【原地】做遮罩切换（不是翻页、不是淡入淡出）
     · 右侧 = 门牌号纵列，随滚动上下移动，点亮当前那一条
   底色仍是我们这套米色浅底 —— 只借它的动效与呈现，不套用它的黑底。

   为什么换掉原来的「17 张网格平铺」：门牌号堆在一起太密，
   一屏六七个人像反而谁都记不住；改成一次看一位，17 个人各得其所。

   实现分三段：
     · .pg-gallery        高度 = (人数-1) × 每步距离 + 一屏（总滚动距离即"片长"）
     · .pg-gallery__stage sticky 钉住一屏，内部三栏
     · 进度由 pages.js 按 .pg-scroll 的 scrollTop 换算，驱动索引与右栏位移 */

.pg-gallery {
  /* 每多一位要滚多远；调大 = 每个人物停留更久。17 位 → 16 步 */
  --gallery-step: calc(52vh * var(--gallery-step-scale, 1));
  --gallery-count: 17;
  /* 门牌号每格行高（客户要求行距加大，2026-09-24） */
  --gallery-rail-line: clamp(62px, 7.4vw, 104px);
  /* 肖像框：客户要求老照片缩小 20%（原 min(74vh,660px) → 约 0.8 倍）。
     右栏高度跟着同一变量，两栏才齐平、圆点也才落在照片的中线上。 */
  --gallery-frame-h: min(59vh, 528px);
  --gallery-gap: clamp(24px, 3.2vw, 64px);
  /* 切换时长：客户要"拉长一点"，原 820ms → 1150ms */
  --gallery-wipe: 1150ms;

  position: relative;
  height: calc((var(--gallery-count) - 1) * var(--gallery-step) + 100vh);
}

/* 文明篇：短横线到首张照片的留白缩短 1/3。
   原间距 = 引文底部 padding + 一屏居中照片的上方留白。
   只提前画廊入口，保留照片尺寸、sticky 居中和每位人物的滚动距离。 */
.pg-creed + .pg-gallery {
  margin-top: calc((clamp(72px, 13vh, 150px) + (100vh - var(--gallery-frame-h)) / 2) / -3);
}

/* 钉住的一屏：三栏纵向居中，从同一基线起 */
.pg-gallery__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  /* 保留原左栏宽度与照片位置；中栏按照片实宽收口，使照片两侧间距相等。 */
  grid-template-columns:
    calc((100% - var(--gallery-gap) * 2) * 0.24)
    calc(var(--gallery-frame-h) * 0.8)
    minmax(0, 1fr);
  align-items: center;
  gap: var(--gallery-gap);
  padding: 0 var(--pg-pad);
  overflow: hidden;
}

/* ---------- 左栏：人物介绍 ---------- */

.pg-gallery__info {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 18px);
  align-items: flex-end;   /* 贴向中间肖像，与右栏形成对称 */
  text-align: right;
}

.pg-gallery__text {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.1vh, 14px);
  align-items: flex-end;
  /* 客户 2026-09-24：「右侧介绍文字的淡出淡入节奏放缓，不要太快」——
     原来是 300ms，被嫌快；现在 520ms（与 pages.js 里 setGalleryInfo 的等待时长配套，
     那个值改了这里也要改，否则会出现"文字还没淡透就被换掉"或"换完了还在淡出"）。 */
  transition: opacity 520ms var(--pg-ease), transform 520ms var(--pg-ease);
}

/* 换人时左栏文字先淡出下沉，再随新内容淡入 —— 与肖像同一个节拍 */
.pg-gallery__info.is-swapping .pg-gallery__text {
  opacity: 0;
  transform: translateY(8px);
}

/* 门牌：路名 + 大号数字 + 单位。数字是这一栏的视觉锚点 */
.pg-gallery__no {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0 10px;
  font-family: var(--pg-sans);
  font-size: clamp(10px, 0.74vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pg-muted);
}

.pg-gallery__no em {
  font-family: var(--pg-serif-en);
  font-style: normal;
  font-size: clamp(30px, 3vw, 50px);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--pg-bronze);
}

.pg-gallery__unit:empty {
  display: none;
}

.pg-gallery__name {
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 38px);
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.pg-gallery__role {
  font-size: clamp(12px, 0.94vw, 16px);
  line-height: 1.85;
  color: var(--pg-ink-soft);
  max-width: 24em;
}

.pg-gallery__role .nb {
  white-space: nowrap;
}

/* ---------- 中栏：肖像原地遮罩切换 ---------- */

.pg-gallery__frame {
  position: relative;
  height: var(--gallery-frame-h);
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  overflow: hidden;
  background: color-mix(in srgb, var(--pg-hairline) 40%, var(--pg-paper));
}

/* 17 张肖像全叠在同一个框里 —— 切换时新的一张用水平边扫过来盖住旧的。
   「原地」就体现在这里：框不动、位置不跳，动的只有那条边。

   ⚠️ 遮罩【不是】定时动画（客户 2026-09-24 定）：
      客户原话「数字从 1 移到 2 用了 5 秒，照片从 1 切换到 2 也用 5 秒……
      鼠标滑到一半，照片切换也到一半并暂停；鼠标停止滑动，照片保持静止」。
      所以 clip-path 由 pages.js 的 scrubPortraits() 每帧按滚动进度写死，
      CSS 这边【不要】加 transition / animation —— 一加就跟滚动脱钩、变成定时补间。 */
.pg-gallery__photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  filter: grayscale(1) contrast(1.02);
  /* 初始不可见；参与当前擦拭的那两张由 JS 每帧改写 */
  clip-path: inset(0 0 100% 0);
}

.pg-gallery__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 参与当前擦拭的两位（旧的那张 + 正在展开的那张）还原彩色 ——
   这样擦拭边上不会出现"彩色撞灰白"的跳色。其余未上场的保持黑白。 */
.pg-gallery__photo.is-shown {
  filter: none;
}

/* ---------- 右栏：门牌号纵列 ---------- */

.pg-gallery__rail {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: clamp(18px, 1.6vw, 28px);
  align-items: center;
  height: var(--gallery-frame-h);
  overflow: hidden;
}

/* 数字的滚动窗口：上下淡出在这一层做 ——
   ⚠️ 不能做在 .pg-gallery__rail 上，那样会连锚定行一起淡掉，而锚定行是常驻的。 */
.pg-gallery__rail-clip {
  position: relative;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}

/* ---------- 锚定行（固定不动，起装饰作用） ----------
   客户 2026-09-24：「就这一行跟那个锚点一样固定在那不动的，起一个装饰作用」。
   英文路名 + 青铜点，横向排在右栏的垂直中线上，永不位移。
   左侧 fixed 宽度 = 路名栏，右侧留出数字列的位置 —— 数字滚过圆点右侧。 */
.pg-gallery__anchor {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
  pointer-events: none;
}

/* 英文路名：拉丁衬线大写、宽字距，与设计稿那行 HUAIHAI ROAD (M) 一致 */
.pg-gallery__anchor-road {
  font-family: var(--pg-serif-en);
  font-size: clamp(13px, 1.15vw, 20px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pg-muted);
  white-space: nowrap;
}

/* 青铜点：这次按客户要求整体加大（原 6px → 9px） */
.pg-gallery__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pg-bronze);
}

/* 数字列：从圆点右侧起排，整列按进度位移 */
.pg-gallery__rail ul {
  position: absolute;
  top: calc(var(--gallery-frame-h) / 2 - var(--gallery-rail-line) / 2);
  left: 0;
  right: 0;
  /* 位移由 JS 每帧写 transform —— 这里不要加 transition，会拖影 */
}

.pg-gallery__rail li {
  display: flex;
  align-items: center;
  height: var(--gallery-rail-line);
  font-family: var(--pg-serif-en);
  letter-spacing: 0.04em;
  font-size: clamp(30px, 3vw, 52px);   /* 客户要求整体加大（原 26/44） */
  color: var(--pg-hairline);
  transition: color 380ms var(--pg-ease), font-size 380ms var(--pg-ease);
}

/* 当前那一条：墨色 + 字号放大（客户要求"当前数字再变大一些"）。
   ⚠️ 用 font-size 放大而不是 transform: scale —— scale 会让这一行的高度视觉上变大，
      而 ul 的位移是按固定行高算的，两者会打架、行距看起来忽大忽小。 */
.pg-gallery__rail li.is-front {
  color: var(--pg-ink);
  font-size: clamp(40px, 4.2vw, 74px);
}

/* 相邻两条给一点过渡色，让"上下移动"读得出层次 */
.pg-gallery__rail li.is-near {
  color: color-mix(in srgb, var(--pg-hairline) 45%, var(--pg-muted));
}


/* ============ 主创名片 + 手写签名（联名篇） ============ */

.pg-lead {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  padding: clamp(40px, 6vh, 80px) var(--pg-pad);
}

.pg-lead--flip .pg-lead__photo {
  order: 2;
}

/* KPF / SHoP 主创：签名在左、肖像在右，统一尺寸及底边对齐。 */
.pg-lead--compact {
  grid-template-columns: minmax(0, 340px) minmax(0, 380px);
  justify-content: center;
  align-items: end;
  column-gap: clamp(32px, 5vw, 72px);
}

.pg-lead--compact > .pg-lead__photo {
  width: 100%;
  max-width: 380px;
  justify-self: center;
}

.pg-lead--compact > .pg-lead__info {
  width: 100%;
  max-width: 340px;
  justify-self: center;
}

/* 试排：沿用上下建筑图文的两列轴线，尺寸与底边对齐保持不变。
   回退本次试排只需移除这组宽屏覆盖规则。 */
@media (min-width: 1025px) {
  .pg-lead--compact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 96px);
  }

  .pg-lead--compact > .pg-lead__info {
    justify-self: end;
  }

  .pg-lead--compact > .pg-lead__photo {
    justify-self: start;
  }
}

.pg-lead__photo .pg-frame {
  aspect-ratio: 4 / 5;
}

.pg-lead__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pg-lead__name {
  font-family: var(--pg-serif-en);
  font-size: clamp(24px, 2.3vw, 38px);
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.pg-lead__role {
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.8;
  color: var(--pg-ink-soft);
}

.pg-sig {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  max-width: 340px;
}

.pg-sig__lottie {
  width: 100%;
}

.pg-sig__replay {
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--pg-sans);
  font-size: clamp(10px, 0.72vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pg-muted);
  opacity: 0;
  transition: opacity 320ms var(--pg-ease), color 320ms var(--pg-ease);
}

/* 重播按钮等签名写完再出现，免得提前干扰 */
.pg-sig.is-done .pg-sig__replay {
  opacity: 1;
}

.pg-sig__replay:hover {
  color: var(--pg-bronze);
}

/* ============ 主创手稿（联名篇）：白底墨线融进纸色 ============ */

.pg-sketches {
  padding: clamp(48px, 7vh, 90px) var(--pg-pad);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.4vh, 44px);
}

.pg-sketches__head {
  max-width: var(--pg-col);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pg-sketches__title {
  font-weight: 300;
  font-size: clamp(20px, 1.95vw, 32px);
  line-height: 1.5;
  letter-spacing: 0.03em;
  display: flex;
  flex-direction: column;
}

.pg-sketch img {
  width: 100%;
  height: auto;
  display: block;
  /* 手稿是白底扫描件，multiply 让白底吃掉、只留墨线 */
  mix-blend-mode: multiply;
}

.pg-sketch figcaption {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--pg-sans);
  font-size: clamp(10px, 0.74vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pg-muted);
}

.pg-sketch figcaption i {
  font-family: var(--pg-serif-en);
  font-style: normal;
  font-size: clamp(13px, 1vw, 17px);
  letter-spacing: 0.1em;
  color: var(--pg-bronze);
}

/* 首图大、后两张并排（草图里"一大两小"的节奏） */
.pg-sketches__lead {
  max-width: 760px;
  margin: 0 auto;
}

.pg-sketches__pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: start;
}

/* ============ 事务所目录（联名篇）：点击滚到对应小节 ============ */

.pg-index {
  width: 100%;
  max-width: var(--pg-col);
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--pg-hairline);
  margin-top: 8px;
}

.pg-index li {
  border-bottom: 1px solid var(--pg-hairline);
}

.pg-index a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
  padding: 20px 4px;
  text-decoration: none;
  color: inherit;
  transition: color 320ms var(--pg-ease);
}

.pg-index a:hover {
  color: var(--pg-bronze);
}

.pg-index em {
  font-family: var(--pg-serif-en);
  font-style: normal;
  font-size: clamp(20px, 1.8vw, 30px);
  letter-spacing: 0.06em;
}

.pg-index span {
  display: flex;
  flex-direction: column;
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.6;
}

.pg-index small {
  font-family: var(--pg-sans);
  font-size: clamp(10px, 0.72vw, 12px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pg-muted);
}

.pg-index b {
  font-weight: 300;
  color: var(--pg-bronze);
  transition: transform 320ms var(--pg-ease);
}

.pg-index a:hover b {
  transform: translateY(4px);
}

/* ============ 品牌篇：署名与誓词（纯字，无图） ============ */

.pg-vow {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(120px, 20vh, 220px) var(--pg-pad);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.pg-signatories {
  font-weight: 300;
  font-size: clamp(26px, 3vw, 48px);
  line-height: 1.35;
  letter-spacing: 0.05em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pg-cross {
  font-style: normal;
  font-size: 0.5em;
  line-height: 1;
  color: var(--pg-bronze);
}

.pg-vow__text {
  font-weight: 300;
  font-size: clamp(19px, 1.8vw, 29px);
  line-height: 1.7;
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ============ 共用墨绿页脚（四页收尾） ============
   底色 #173c2c ＝ 品牌墨绿，与手机版四个内页的 --foot-bg 同值。 */

.pg-foot {
  background: var(--pg-green);
  color: var(--pg-paper);
  padding: clamp(80px, 15vh, 170px) var(--pg-pad) clamp(40px, 7vh, 76px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pg-foot__rule {
  width: 1px;
  height: clamp(36px, 6vh, 64px);
  background: var(--pg-bronze);
  margin-bottom: 10px;
}

.pg-foot__creed {
  max-width: var(--pg-col);
  font-size: clamp(22px, 2.5vw, 40px);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: 0.06em;
}

/* 「余庆」标青铜 —— 墨绿底上要提亮才认得出（同手机版 pp 的处理） */
.pg-foot__creed b {
  font-weight: 300;
  color: color-mix(in srgb, var(--pg-paper) 42%, var(--pg-bronze));
}

.pg-foot__note {
  font-family: var(--pg-sans);
  font-size: clamp(11px, 0.8vw, 13px);
  letter-spacing: 0.24em;
  color: color-mix(in srgb, var(--pg-paper) 52%, var(--pg-green));
}

.pg-foot__dedicate {
  margin-top: clamp(20px, 3.4vh, 44px);
  font-size: clamp(16px, 1.45vw, 24px);
  letter-spacing: 0.1em;
  line-height: 1.6;
}

.pg-foot__meta {
  margin-top: clamp(36px, 6vh, 72px);
  padding-top: 22px;
  width: 100%;
  max-width: 1400px;
  border-top: 1px solid color-mix(in srgb, var(--pg-paper) 18%, var(--pg-green));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--pg-sans);
  font-size: clamp(10px, 0.74vw, 12px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pg-paper) 56%, var(--pg-green));
}

.pg-foot__top {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  transition: color 320ms var(--pg-ease);
}

.pg-foot__top:hover {
  color: var(--pg-paper);
}

/* ============ 滚动揭示 ============ */

.pg-panel [data-photo-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1300ms ease-in-out, transform 1300ms var(--pg-ease);
}

.pg-panel [data-photo-reveal].is-photo-in {
  opacity: 1;
  transform: none;
}

#pg-sj-shop > .pg-split__media > [data-photo-reveal]:nth-child(2).is-photo-in,
.pg-panel .pg-trio > [data-photo-reveal]:nth-child(2).is-photo-in {
  transition-delay: 360ms;
}

.pg-panel .pg-trio > [data-photo-reveal]:nth-child(3).is-photo-in {
  transition-delay: 720ms;
}

/* 图框和图注保持原位，只让框内的摄影画面轻微移动。 */
#pg-sj-shop > .pg-split__media .pg-frame img,
.pg-panel .pg-trio .pg-frame img {
  transform: translateY(var(--photo-parallax, 0px)) scale(1.07);
}

.pg-panel.is-resetting-photos [data-photo-reveal] {
  transition: none;
}

.pg-panel [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 860ms var(--pg-ease), transform 860ms var(--pg-ease);
}

.pg-panel [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* 已打开过的面板不再播揭示动画（第二次进来直接就是最终态） */
.pg-panel.is-seen [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ============ 响应式 ============
   窄屏（iPad 竖屏 / 小笔记本）退成单列，并取消 sticky ——
   单列下 sticky 会让图占满一屏、文字永远进不来。 */

@media (max-width: 1024px) {
  .pg-panel {
    --pg-pad: clamp(24px, 5vw, 48px);
    --pg-col: 100%;
    --pg-head-h: 64px;
  }

  .pg-opener {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  /* 单列时图占 62vh：既是首屏主体，又给下面留出"还有内容"的提示 */
  .pg-opener__media {
    height: 62vh;
    min-height: 320px;
  }

  .pg-opener__copy {
    padding-top: clamp(32px, 5vh, 56px);
  }

  .pg-split {
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vh, 32px);
  }

  .pg-split__media {
    position: static;
  }

  #pg-sj-kpf,
  #pg-sj-gad {
    grid-template-areas: "heading" "media" "body";
    row-gap: clamp(20px, 3vh, 32px);
  }

  .pg-lead {
    grid-template-columns: 1fr;
  }

  .pg-lead--flip .pg-lead__photo {
    order: 0;
  }

  .pg-sketches__pair {
    grid-template-columns: 1fr;
  }

  .pg-foot__meta {
    flex-direction: column;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg-opener.is-staging .pg-opener__media,
  .pg-opener.is-staging .pg-opener__media img,
  .pg-opener.is-staging .pg-opener__copy > :nth-child(n) {
    animation: none;
  }

  .pg-panel [data-photo-reveal],
  .pg-panel .pg-trio > [data-photo-reveal]:nth-child(n).is-photo-in,
  #pg-sj-shop > .pg-split__media > [data-photo-reveal]:nth-child(2).is-photo-in {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0ms;
  }

  #pg-sj-shop > .pg-split__media .pg-frame img,
  .pg-panel .pg-trio .pg-frame img {
    transform: none;
  }

  .pg-panel,
  .pg-panel.is-open {
    transition: none;
  }

  .pg-panel [data-reveal],
  .pg-panel.is-seen [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pg-sig__replay {
    opacity: 1;
  }
}