:root {
  --green: #2F4A3A; --green-d: #1C2E22;
  --gold: #C8A15A; --gold-l: #E0C58C;
  --white: #FFFFFF; --off: #F5EEE0;
  --gray: #6B7280; --gray-l: #9CA3AF;
  --line: #EDF0F2; --bg: #F7F8F5;
  --r: 8px; --shadow: 0 2px 12px rgba(0,0,0,.06); --shadow-l: 0 8px 30px rgba(0,0,0,.12);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif; color: #333; background: var(--bg); line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.en {  font-size: 12px; letter-spacing: 6px; color: var(--gold); text-transform: uppercase; }
h2 { font-size: 28px; letter-spacing: 2px; color: var(--green); font-weight: 600; }
h3 { font-size: 19px; color: var(--green); }
h4 { font-size: 16px; color: var(--green); }
.lead { color: var(--gray); max-width: 640px; margin: 0 auto; }
.btn { display: inline-block; padding: 12px 30px; border-radius: 4px; font-size: 14px; letter-spacing: 2px; cursor: pointer; border: none; transition: .3s; }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: #B89048; }

/* ===== 顶部通栏 ===== */
.site-header { background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); }
/* 手机菜单的遮罩层：默认在桌面端彻底隐藏（它的定位/外观样式只在 ≤820px 里定义，
   若不在这里 display:none，桌面端它会作为一个空块占位）。 */
.menu-mask { display: none; }
.top-bar { background: var(--green-d); color: #fff; font-size: 12.5px; letter-spacing: 1px; padding: 8px 0; }
.top-bar-inner { display: flex; justify-content: space-between; align-items: center; }
.top-slogan { letter-spacing: 1px; }
.top-links { display: flex; gap: 12px; align-items: center; }
.top-links .dot { color: var(--gold); }
.main-bar { padding: 16px 0; }
.main-bar-inner { display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; flex-direction: column; line-height: 1.1; }
.logo-cn { font-size: 22px; letter-spacing: 4px; padding-left: 4px; color: var(--green); font-weight: 700; }
.logo-en {  font-size: 9px; letter-spacing: 2.2px; padding-left: 2.2px; color: var(--gray); }

/* 印章 Logo：放在品牌名左侧，高度跟随品牌文字块 */
.logo.has-mark { flex-direction: row; align-items: center; gap: 11px; }
/* 品牌文字块整体居中：中文两行居中对称，和左侧印章形成规整的组合
   （原来中英都左对齐、但英文字距大导致右边戳出来，看起来歪） */
.logo .logo-text { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.12; }
.logo .logo-text .logo-en { margin-top: 3px; }
/* 无印章时（纯文字）保持原来的左对齐观感 */
.logo:not(.has-mark) .logo-text { align-items: flex-start; }
.logo-mark {
  height: 42px;
  width: auto;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
  /* 红色印章很抓眼，稍微收一点锐度让它和深绿/金色更协调 */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.16));
  /* 注：这里原先有一条悬停放大效果（鼠标移上印章会放大 4%），
     用户明确不要 —— 会显得突兀，已删除；随之的 transition 也一并去掉。 */
}
/* 页脚的 Logo 放在深色底上，略小一点 */
.site-footer .logo-mark { height: 38px; }
.site-footer .logo.has-mark { gap: 10px; }
.main-nav ul { display: flex; gap: 16px; list-style: none; }
.main-nav a { padding: 8px 16px; font-size: 15px; color: var(--gray); border-radius: 4px; transition: .2s; }
.main-nav a:hover { color: var(--green); background: var(--off); }
.main-nav li.active a { color: var(--green); font-weight: 600; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 26px; height: 26px; justify-content: center; background: none; border: none; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: var(--green); border-radius: 2px; transition: .3s; }

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 580px;
  display: flex;
  align-items: center;
  background-color: var(--green);
  max-width: 1240px;
  margin: 24px auto 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-l);
}
.hero.has-image {
  /* 背景图由页面内联样式给出（后台可换图）；这里只兜底默认图与渐变遮罩 */
  background-image: linear-gradient(100deg, rgba(28,46,34,.92) 0%, rgba(28,46,34,.68) 42%, rgba(28,46,34,.25) 100%), url('../assets/hero_home.jpg');
  background-size: cover;
  /* 焦点：水平居中，垂直略高于中线（30%）。
     原因：hero 是 1240×580（约 2.14:1）的横条，而多数主视觉是竖一点的构图，
     cover 会把上下裁掉一部分。垂直居中（50%）容易切掉人物头顶，
     30% 能在"保住头部"和"露出下方主体（项链/产品）"之间取得平衡。
     所有断点统一用这个值 —— 之前桌面是 left center、窄屏又改成 center，两套不一致。 */
  background-position: center 30%;
  background-repeat: no-repeat;
}
.hero-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 75% 55%, rgba(200,161,90,.15), transparent 62%); }
.hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: flex-end; }

/* Hero 品牌区：印章贴紧公司名，英文副标题居中于中文下方。
   做法：文字块用 width:fit-content 收缩到中文标题的宽度，这样
     · 中文标题在文字块内居中
     · 英文副标题也相对**中文标题**居中（而不是相对整个主视觉区），满足"居中在中文下方"
     · 描述文字相对同一中心线居中
   印章用绝对定位贴到文字块左侧（间距 10px），**不占布局宽度**，所以不会把标题挤偏。 */
/* .hero-brand 必须是定位上下文：印章是它的直接子节点，
   若只给 .hero-brand-text 设 relative，印章会相对视图左侧定位而跑出屏幕。 */
.hero-brand { position: relative; display: flex; flex-direction: column; align-items: center; }
.hero-brand-text {
  position: relative;
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-brand .hero-title { margin: 0 0 10px; }
.hero-brand .hero-sub { margin: 0; }
/* 印章**始终**绝对定位，贴合「中文标题 + 英文副标题」整体的左缘。
   --mk-h = 文字块总高（标题行盒 60 + 边距 10 + 副标题行盒 32 ≈ 96px），
   即"印章高度与 中文标题+英文 整块等高"；--mk-gap = 与文字左缘的目标间距。

   ★ 定位用 `left: 0` + `translateX(-100%)`，而不是手算 left 像素值。
     这样印章右缘**天然对齐 .hero-brand-text 的左缘**，不需要知道块内还有多少留白。
     （之前用"手算 left = 印章宽+间距+留白"的写法踩了坑：留白用 em 写，
       而 .hero-mark 的 font-size 继承页面默认 16px、不是标题的 50px，
       于是 .8em 只算出 12.8px、实际需要 40px，印章离文字差了 50px 贴不上。）
     垂直方向同理用 `top: 50%` + `translateY(-50%)`，与文字块垂直居中对齐。 */
/* ── 主视觉印章：结构与参数与后台登录页 (.seal) 完全一致 ──
   后台结构：.seal > [.ripple ×3] + .imgwrap > img + .shine > ::after
   前台同构：.hero-seal > [.ripple ×3] + .hero-imgwrap > img.hero-mark + .shine > ::after

   ⚠️ 两条硬约束（改动前必读）：
   1) 定位：.hero-seal 用 left/top + translateY(-50%) 定位（右缘贴文字左缘）。
      盖印动画放在 .hero-imgwrap 上，绝不放在 .hero-seal 上，否则会覆盖定位。
   2) 印章高度跟随断点（--mk-h），所以这里所有尺寸都按 --mk-h 计算。 */
.hero-seal {
  display: none;
  position: absolute;
  --mk-h: 96px;                       /* 与「中文标题+英文」整块等高 */
  --mk-gap: 4px;                      /* 印章与文字左缘的目标间距 */
  height: var(--mk-h);
  width: auto;
  left: 0;
  right: auto;
  top: 50%;
  transform: translate(calc(-100% - var(--mk-gap)), -50%);
}
.hero-brand.has-mark .hero-seal { display: block; }
/* 印章图片本身：只负责撑满容器 */
.hero-mark {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  /* 投影不写在这里 —— 统一由 theme-jade.css 的 .hero-mark 负责（红 + 黑两层）。
     本文件在 theme-jade.css 之前加载，写这里会被覆盖，容易看错来源。 */
}
/* 印章包裹层：承担盖印动画 + 投影（对应后台的 .imgwrap） */
.hero-imgwrap {
  position: relative;
  z-index: 1;
  display: block;
  height: var(--mk-h);
  width: auto;
  /* 注意：这里刻意不写 filter。
     投影已挪到图片 .hero-mark 上 —— 如果动画层自己带基础 filter，
     又要在 @keyframes 里动 filter，iOS Safari 的合成会打架（表现为一直糊着）。
     fill-mode 用 forwards 而不是 both：
     动画万一没启动，元素回落到自身样式（完整可见），不会停在 0% 的 opacity:0 上"隐身"。 */
  animation: heroStamp 1.15s cubic-bezier(.16,1.2,.3,1) forwards;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@keyframes heroStamp {
  /* 模糊按印章高度等比缩放：
       桌面 --mk-h:96px → 10.7px / 5.3px（与原值 10 / 4 基本一致）
       iPhone --mk-h:53px → 5.9px / 2.9px（原来的固定 10 / 4 会把篆字糊没） */
  0%  {transform:scale(.03) rotate(-24deg);opacity:0;filter:blur(calc(var(--mk-h) / 9))}
  26% {opacity:1;filter:blur(calc(var(--mk-h) / 18))}
  44% {transform:scale(1.75) rotate(5deg);filter:blur(0)}
  55% {transform:scale(1.14,.86) rotate(-1deg)}
  68% {transform:scale(.94,1.07) rotate(.8deg)}
  80% {transform:scale(1.05,.97) rotate(-.4deg)}
  90% {transform:scale(.985,1.01)}
  100%{transform:scale(1) rotate(0);opacity:1}
}
/* ── 3 圈水波纹（参数与后台 .seal .ripple 完全一致） ── */
.hero-seal .ripple {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--mk-h); height: var(--mk-h);
  margin-left: calc(var(--mk-h) / -2);
  margin-top: calc(var(--mk-h) / -2);
  border-radius: 50%;
  border: 2px solid rgba(201,169,106,.62);
  filter: blur(2px);
  box-shadow: 0 0 12px rgba(227,211,172,.45);
  pointer-events: none;
  animation: heroRipple 2.2s cubic-bezier(.16,.7,.25,1) .62s both;
}
.hero-seal .ripple.w2 { border-color: rgba(207,175,116,.52); animation-delay: .86s; }
.hero-seal .ripple.w3 { border-color: rgba(227,211,172,.46); animation-delay: 1.10s; }
@keyframes heroRipple {
  0%  {transform:scale(.5);opacity:0;border-width:3px}
  10% {opacity:1}
  100%{transform:scale(3.6);opacity:0;border-width:1px}
}
/* ── 扫光（参数与后台 .seal .shine 完全一致；位移用 translateX 以保持可组合） ── */
/* ── 扫光容器：遮罩用 logo 图本身，光影精确落在印章形状内 ──
   为什么用图片遮罩：光带是斜切矩形，用圆形遮罩时两端会露出直角
   （浅色登录页看不出来，深色主视觉照片上很明显）。
/* ══════════════════════════════════════════════════════════════
   扫光 —— 从后台 admin/login.php 的 .seal .shine 原样复制过来
   后台原文：
     .seal .shine{position:absolute;inset:0;overflow:hidden;border-radius:12px;z-index:2;
       -webkit-mask:radial-gradient(circle at 50% 50%, #000 62%, transparent 72%);
               mask:radial-gradient(circle at 50% 50%, #000 62%, transparent 72%);
       pointer-events:none}
     .seal .shine::after{content:'';position:absolute;top:-40%;bottom:-40%;left:-70%;width:38%;
       background:linear-gradient(100deg, transparent, rgba(255,246,214,.95) 50%, transparent);
       transform:skewX(-18deg);animation:sealShine 3.4s ease-in-out 1.5s infinite}
     @keyframes sealShine{0%{left:-70%} 55%{left:150%} 100%{left:150%}}

   复制到前台的三处适配（其余全部原样照抄）：
     ① 选择器 .seal → .hero-seal
     ② 位移 left:-70%→150% 改为 translateX(-70%)→150%（前台印章靠 left 定位，
        用 left 做动画会与之互相覆盖；百分比相对自身宽度，数值等价）
     ③ 遮罩换成 logo 图（后台是圆形渐变；前台按需求用印章形状，尺寸与印章一致）
   ══════════════════════════════════════════════════════════════ */
.hero-seal .shine {
  /* ⚠️ 关键：容器必须是 96×96 正方形，与后台 .seal 完全同尺寸。
     原因：::after 的 width:38% 是相对【容器宽度】计算的 ——
       后台 .seal 是 96×96（印章接近圆形）→ 光带 = 96 × 38% = 36.5px
       若容器只有 57.66 宽（贴合竖长印章）→ 光带 = 21.9px，比后台细 40%
     所以把遮罩容器做成与后台一样的正方形，再用 --mk-h 负边距居中到印章上。
     遮罩仍是 logo 图 → 光沿印章轮廓切出，不会真的盖住整个方框。 */
  position: absolute;
  top: 50%; left: 50%;
  width: var(--mk-h); height: var(--mk-h);
  margin-left: calc(var(--mk-h) / -2);
  margin-top: calc(var(--mk-h) / -2);
  overflow: hidden;
  border-radius: 12px;
  z-index: 2;
  -webkit-mask-image: url(../assets/site-logo.png);
          mask-image: url(../assets/site-logo.png);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  /* 保持 logo 原比例：宽度占满容器（= 印章宽度），高度自动。
     ⚠️ 不能写 100% 100% —— 那会把竖长 logo 拉成正方形，遮罩与印章错位。 */
  /* 按比例算尺寸：logo 宽高比 = 179/298 = 0.601。
     遮罩 = 96×0.601 × 96 = 57.7 × 96，与印章渲染尺寸一致。
     ⚠️ 不能写 100% 100%（会拉成正方形）；100% auto 在 mask 上也会被拉宽。 */
  -webkit-mask-size: calc(var(--mk-h) * 0.601) var(--mk-h);
          mask-size: calc(var(--mk-h) * 0.601) var(--mk-h);
  pointer-events: none;
}
/* ⚠️ 光带形状：后台是三段式（transparent → 最亮 50% → transparent）。
   但后台光带 36.5px 落在 96px 的容器里很合适；
   前台印章只有 57.7px 宽，同样的 36.5px 光带会占满印章，看起来像"一根竖柱"。
   所以这里把亮芯收窄、两侧渐隐拉长，并加一点模糊。
   行程（-70% → 395%）、时长（3.4s）、容器（96×96）、遮罩（logo 图）全部保持不变。 */
/* ⚠️ 颜色用米白（与后台一致）：rgba(255,250,232) / rgba(255,246,214)。
   试过改成品牌金色 rgba(226,196,130)，但在深色照片上显得像一块色带而不是光，
   所以回到米白 —— 光本来就该偏白。 */
/* ⚠️ 光带浓度与模糊的两个取向（按用户选择）：
     · 高浓度 .95 + 无/少模糊 → 金色明显，但边界偏硬（接近后台原版）
     · 低浓度 .78 + blur(2px) → 柔和不柱子，但暖调被冲淡、偏白
   当前采用【低浓度 + 模糊】。渐变用 6 段（亮芯 44%~56%，两侧渐隐）以避免硬边。 */
.hero-seal .shine::after {
  content: '';
  position: absolute;
  top: -40%; bottom: -40%;
  left: 0;
  width: 38%;
  background: linear-gradient(100deg,
      transparent 0%,
      rgba(255,246,214,.30) 26%,
      rgba(255,250,232,.95) 44%,
      rgba(255,250,232,.95) 56%,
      rgba(255,246,214,.30) 74%,
      transparent 100%);
  filter: blur(2px);
  transform: translateX(-70%) skewX(-18deg);
  /* 总时长 8s = 扫过 0.8s（刻度 10%，linear 匀速）+ 停顿 7.2s。
     ⚠️ 刻度与总时长联动：扫过时长 = 总时长 x 刻度。
        改任一项必须同比调整另一项，否则扫过速度会变。 */
  animation: heroShine 8.0s linear 1.5s infinite;
}
@keyframes heroShine {
  /* ⚠️ translateX 的百分比相对【光带自身宽度】，而后台 left 的百分比相对【容器宽度】，
     两者不等价（这是我之前判断错的地方，导致光带停在容器 57% 处不走完，且慢 5 倍）。
     换算：光带宽 = 容器 96px × 38% = 36.47px
       起点 -70%% 自身宽 = -25.5px（光带完全在容器左侧之外，与后台一致）
       终点 395%% 自身宽 = 144px（= 后台的 left:150%% × 96px，与后台完全一致） */
  0%  {transform:translateX(-70%) skewX(-18deg)}
  10% {transform:translateX(395%) skewX(-18deg)}   /* 扫过段结束（linear 匀速）*/
  100%{transform:translateX(395%) skewX(-18deg)}
}

@media (prefers-reduced-motion: reduce) {
  .hero-imgwrap { animation: none; }
  .hero-seal .ripple, .hero-seal .shine::after { animation: none; opacity: 0; }
}

/* 手机端（--mk-h 只有 53px 左右）：盖印动画去掉模糊。
   原因：印章本来就小，再多一点点模糊，白色篆字就认不出来了 ——
   只保留缩放 + 旋转 + 淡入，弹起的效果一样，字始终清楚。 */
@media (max-width: 550px) {
  @keyframes heroStamp {
    0%  {transform:scale(.03) rotate(-24deg);opacity:0}
    26% {opacity:1}
    44% {transform:scale(1.75) rotate(5deg)}
    55% {transform:scale(1.14,.86) rotate(-1deg)}
    68% {transform:scale(.94,1.07) rotate(.8deg)}
    80% {transform:scale(1.05,.97) rotate(-.4deg)}
    90% {transform:scale(.985,1.01)}
    100%{transform:scale(1) rotate(0);opacity:1}
  }
}

/* Hero 文字区：不加任何色块，靠文字自身阴影保证可读；
   如果背景图特别亮，可调 --hero-scrim 加深（0 就是完全不加）。 */
.hero-text {
  position: relative;
  max-width: 560px;
  text-align: center;
  padding: 44px 40px;
  --hero-scrim: .16;
}
.hero-text::before {
  content: ''; position: absolute; inset: -12% -4%; z-index: -1;
  background: radial-gradient(ellipse at center,
    rgba(16,28,21,var(--hero-scrim)) 0%, rgba(16,28,21,calc(var(--hero-scrim) * .55)) 45%, rgba(16,28,21,0) 76%);
}
.hero-title {
  font-size: 50px; font-weight: 700; line-height: 1.2; letter-spacing: .10em;
  margin: 0 0 14px; padding-left: .10em;   /* 抵消末字多出的字距，视觉更居中 */
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.62), 0 1px 3px rgba(0,0,0,.45), 0 0 44px rgba(200,161,90,.20);
}
.hero-sub {
  
  /* 字号给一个合理的基准；实际字距由 js/main.js 反算，使英文与中文标题等宽。
     --en-max-ls : 允许的最大字距（px），防止极端情况下字距过大 */
  font-size: 18px; letter-spacing: .30em; padding-left: .30em;
  --en-max-ls: 12px;
  color: var(--gold-l); margin: 0; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0,0,0,.72), 0 1px 2px rgba(0,0,0,.5);
}
/* 标题与正文之间的金色分隔线 */
.hero-rule {
  width: 54px; height: 1px; margin: 0 auto 20px;
  background: linear-gradient(90deg, transparent, var(--gold-l), transparent);
  position: relative;
}
.hero-rule::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  border-radius: 50%; background: var(--gold-l); transform: translate(-50%,-50%);
  box-shadow: 0 0 10px rgba(224,197,140,.85);
}
.hero-desc {
  font-size: 15px; line-height: 1.95; letter-spacing: .04em;
  color: #fff; margin: 0 auto; max-width: 430px;
  text-shadow: 0 1px 14px rgba(0,0,0,.72), 0 1px 3px rgba(0,0,0,.5);
}

/* ===== 通用区块 ===== */
/* 内页删掉「页面标题栏」后，首屏区块的上边距（.section 的 84px）会让顶部显得空旷，
   所以只把**内页第一块**的上边距单独设小；区块之间与首页不受影响。
   早期是 84px → 48px → 10px，最终定为 20px。 */
.site-main > .section:first-child { padding-top: 20px; }
.section { padding: 84px 0; }
.section.bg-white { background: #fff; }
.section-head { text-align: center; margin-bottom: 52px; }
.section-head .en { display: block; margin-bottom: 10px; }
.section-head h2 { margin-bottom: 12px; }
/* 内页首屏若以「居中标题」开头（服务保障 / 联系我们），h2 的 line-height 会在文字上方
   留出约 11.8px 空白（28px 字号 + 47.6px 行高），导致可见文字比其他内页低一截
   —— 盒模型位置其实相同，但肉眼差 11px。这里把这段行高留白补掉。
   0.42em ≈ 11.8px / 28px，随字号自动缩放；只作用于首屏第一个区块标题。 */
.site-main > .section:first-child .section-head > h2:first-child { margin-top: -0.42em; }

/* ===== 特色卡片 ===== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.feature-card {
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: .3s;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); }
.feature-card .img-placeholder { height: 250px; background: var(--off); }
.feature-card .body { padding: 24px; text-align: center; }
.feature-card h3 { margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: var(--gray); }

/* ===== 关于品牌 ===== */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 60px; max-width: 1152px; margin-left: auto; margin-right: auto; padding: 0 24px; }
.about-visual { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-l); }
.about-visual .img-placeholder { min-height: 380px; background: var(--off); }
.about-text h2 { margin-bottom: 20px; }
.about-text p { color: var(--gray); margin-bottom: 28px; line-height: 2; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid var(--line); padding-top: 48px; max-width: 1100px; margin: 0 auto; }
.metric-card { text-align: center; }
.metric-card .num { font-size: 40px; font-weight: 700; color: var(--green); letter-spacing: 1px; }
.metric-card .lab { font-size: 14px; color: var(--gray); margin-top: 6px; }

/* ===== 品牌理念 ===== */
.mission { background: var(--green); color: #fff; padding: 76px 0; }
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.mission h2 { color: #fff; margin-bottom: 20px; }
.mission p { color: rgba(255,255,255,.86); line-height: 2; }
.mission .img-placeholder { min-height: 350px; background: rgba(255,255,255,.07); border-radius: var(--r); }

/* ===== 产品 ===== */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.product-card { background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); transition: .3s; position: relative; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); }
.product-card .img-placeholder { height: 280px; background: var(--off); }
.product-card .tag { position: absolute; top: 14px; left: 14px; background: var(--gold); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 3px; }
.product-card .body { padding: 20px; text-align: center; }
.product-card h3 { font-size: 17px; margin-bottom: 6px; }
.product-card .sub { font-size: 13px; color: var(--gray-l); margin-bottom: 10px; }
/* 产品卡片底部：原为价格，现改为「查看详情」（原先带 → 箭头，用户要求去掉）。
   字号 16px：比原来的 14px 大，作为卡片的行动入口更醒目。
   字重：常规（不设 font-weight，继承 body 的 400）。
        中途曾按用户要求加粗到 600，之后用户又明确要求去掉，故已移除。

   悬停效果：无 —— 用户明确要求去掉「变绿」和「放大」两种反馈。
   背景：放大（transform:scale 或改 font-size）会让字体脱离 16px 的 hinting 基准，
         笔画变淡约 12%，鼠标移开缩回时会突然变实，观感像"粗细跳变"；
         用户不接受这个副作用，因此文字悬停不做任何变化。
   随之 transition 也删掉 —— 没有可过渡的属性了。
   卡片本身的悬停效果（上浮 + 阴影 + 描边转金）不受影响，仍在 .product-card:hover 上。 */
.product-card .card-more {
  display: inline-block; font-size: 16px; color: var(--green); letter-spacing: 1px;
}
.empty-tip { text-align: center; color: var(--gray); padding: 60px 0; background: #fff; border-radius: var(--r); max-width: 760px; margin: 0 auto; }

/* ===== 筛选 ===== */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
.filter-bar a { padding: 8px 22px; border-radius: 20px; font-size: 14px; color: var(--gray); background: #fff; border: 1px solid var(--line); transition: .2s; }
.filter-bar a:hover, .filter-bar a.active { background: var(--green); color: #fff; border-color: var(--green); }

/* ===== 门店 ===== */
.store-hero-card { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-l); max-width: 1140px; margin: 0 auto; }
.store-hero-card .img-placeholder { height: 100%; min-height: 370px; background: var(--off); padding: 0; }
/* 说明：通用规则 .img-placeholder 带 padding:20px（给"无图时的占位文字"留内边距），
   门店首屏卡片里图片是铺满的，这 20px 会变成多余空隙，导致该页顶部比其它内页多 20px，
   所以这里单独归零（实测页头→内容间距由 68px 回到与其它页一致的 48px）。 */
.store-hero-info { padding: 44px 38px; display: flex; flex-direction: column; justify-content: center; }
.store-hero-info .city {  font-size: 12px; letter-spacing: 4px; color: var(--gold); }
.store-hero-info h2 { font-size: 27px; color: var(--green); margin: 8px 0 20px; }
.store-hero-info .meta { margin-bottom: 24px; }
.store-hero-info .meta div { font-size: 14px; color: var(--gray); margin-bottom: 10px; display: flex; gap: 10px; }
.store-hero-info .meta div span:first-child { color: var(--green); font-weight: 600; min-width: 72px; }
.store-hero-info .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.store-card { background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); transition: .3s; }
.store-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-l); }
.store-card .img-placeholder { height: 210px; background: var(--off); }
.store-card .body { padding: 22px; }
.store-card .city {  font-size: 11px; letter-spacing: 3px; color: var(--gold); }
.store-card h3 { font-size: 17px; margin: 6px 0 10px; }
.store-card p { font-size: 13px; color: var(--gray); line-height: 1.7; }
.store-card .hours { color: var(--green); margin-top: 8px; }
.services-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1050px; margin: 0 auto; }
.sv-card { background: #fff; border-radius: var(--r); padding: 28px; text-align: center; box-shadow: var(--shadow); transition: .3s; }
.sv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); }
.sv-card .icon { font-size: 28px; color: var(--gold); margin-bottom: 14px; }
/* 线性图标：内置 256×256 透明 PNG，卡片里按 40px 显示（2 倍屏也清楚） */
.sv-card .icon .ico { width: 40px; height: 40px; display: block; margin: 0 auto; }
.sv-card .icon .icon-glyph { font-size: 28px; line-height: 40px; }
.sv-card h4 { margin-bottom: 8px; }
.sv-card p { font-size: 13.5px; color: var(--gray); }

/* ===== 服务保障 ===== */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1060px; margin: 0 auto; }
.promise-bar { background: var(--off); border-radius: var(--r); padding: 52px; text-align: center; max-width: 960px; margin: 0 auto; }
.promise-bar h3 { font-size: 25px; margin-bottom: 14px; }
.promise-bar p { color: var(--gray); max-width: 660px; margin: 0 auto 24px; line-height: 1.9; }
.faq-list { border-top: 1px solid var(--line); max-width: 880px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; padding: 22px 0; background: none; border: none; font-size: 16px; color: var(--green); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: inherit; }
.faq-q .arr { font-size: 22px; color: var(--gold); transition: .3s; }
.faq-item.open .faq-q .arr { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a p { padding: 0 0 20px; color: var(--gray); line-height: 1.9; }

/* ===== 联系我们 ===== */
.info-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1120px; margin: 0 auto; }
.info-card { background: #fff; border-radius: var(--r); padding: 36px 24px; text-align: center; box-shadow: var(--shadow); transition: .3s; border-top: 3px solid var(--gold); }
.info-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-l); }
.info-card .icon { font-size: 26px; color: var(--gold); margin-bottom: 16px; }
.info-card .icon .ico { width: 52px; height: 52px; display: block; margin: 0 auto; }
.info-card .icon .icon-glyph { font-size: 26px; line-height: 52px; }
.info-card h4 { margin-bottom: 12px; }
.info-card p { font-size: 13.5px; color: var(--gray); line-height: 1.9; }

/* ===== 页脚 ===== */
.site-footer { background: var(--green-d); color: rgba(255,255,255,.78); padding-top: 60px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 44px; max-width: 1220px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.footer-brand .logo { margin-bottom: 16px; }
.footer-brand .logo-cn { color: #fff; }
.footer-brand .logo-en { color: var(--gold-l); }
.footer-brand p { font-size: 13px; margin-bottom: 6px; line-height: 1.8; }
.footer-col h4 { color: var(--gold); font-size: 15px; margin-bottom: 16px; letter-spacing: 1px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: rgba(255,255,255,.7); font-size: 13.5px; transition: .2s; }
.footer-col a:hover { color: var(--gold-l); }
.copyright { background: rgba(0,0,0,.2); padding: 18px 0; font-size: 12.5px; color: rgba(255,255,255,.5); }
/* 横排居中：版权文字与备案信息并排、间距紧凑（原来用 space-between 会被推到左右两端、隔着上千像素） */
.copyright .container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; }
.copyright .icp-line { position: relative; display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
/* 备案号是链接：默认不画下划线，悬停时用下划线提示可点击（管局只要求可点击跳转） */
.copyright .icp-line:hover { color: rgba(255,255,255,.8); text-decoration: underline; }
/* 内置的备案图标，放在备案号之前 */
.copyright .icp-icon { height: 16px; width: auto; display: block; flex: 0 0 auto; }
/* 与前面版权文字之间的分隔竖线 */
.copyright .icp-line::before {
  content: ''; position: absolute; left: -9px; top: 50%; width: 1px; height: 11px;
  background: rgba(255,255,255,.22); transform: translateY(-50%);
  text-decoration: none;
}

/* ===== 后台 ===== */
.tab { display: flex; gap: 0; border-bottom: 2px solid var(--line); margin-bottom: 24px; flex-wrap: wrap; }
.tab button { padding: 12px 20px; font-size: 14px; color: var(--gray); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: .2s; background: none; border-left: none; border-right: none; border-top: none; cursor: pointer; }
.tab button.active { color: var(--green); border-bottom-color: var(--gold); font-weight: 600; }
.panel { display: none; } .panel.active { display: block; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* 原来用虚线，看起来像「这里还没做好」。改成浅实线，和后台其它卡片一致。 */
.hero-preview { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 20px; background: #fafafa; }
.hero-preview img { display: block; width: 100%; height: 190px; object-fit: cover; }
/* 主视觉预览专用：定高 190px 在宽屏后台里会变成 6.8:1 的细缝，根本看不出效果。
   改为按前台 hero 的真实比例（1240×580）显示，并用与前台一致的焦点（center 30%），
   这样后台看到的就是前台实际裁切的样子。 */
.hero-preview-shot { max-width: 620px; }
.hero-preview-shot img { height: auto; aspect-ratio: 1240 / 580; object-position: center 30%; }
/* 手机端主视觉预览：窄屏 hero 是 390×320（约 1.22:1），按同一个比例预览才准 */
.hero-preview-shot-mobile { max-width: 300px; }
.hero-preview-shot-mobile img { height: auto; aspect-ratio: 390 / 320; object-position: center 30%; }
.hero-preview-note { display: block; margin: -12px 0 20px; font-size: 12.5px; color: #888; line-height: 1.8; }
.hero-preview .path, .hero-preview .empty { display: block; padding: 8px 12px; font-size: 12.5px; color: var(--gray); font-family: monospace; }

/* ===== 占位图 ===== */
.img-placeholder { width: 100%; height: 100%; min-height: 220px; background: linear-gradient(135deg, #F0EAD8, #E8DFC8); display: flex; align-items: center; justify-content: center; color: #B7A47F; font-size: 13px; letter-spacing: 2px; text-align: center; padding: 20px; }
/* 占位容器里的真实图片要铺满卡片，避免高度不一时对不齐 */
.img-placeholder > img { width: 100%; height: 100%; object-fit: cover; }

/* ===== 品牌历程时间轴（公司介绍页）===== */
.timeline { position: relative; max-width: 920px; margin: 0 auto; padding: 8px 24px 0; }
.timeline::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--off), var(--gold-l), var(--off)); transform: translateX(-1px);
}
.tl-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 34px; }
.tl-item .tl-year {
  grid-column: 1; text-align: right; padding-right: 12px;
   font-size: 26px; font-weight: 700; color: var(--gold); letter-spacing: 1px;
  align-self: start; padding-top: 12px;
}
.tl-item .tl-card {
  grid-column: 2; background: #fff; border-radius: var(--r); padding: 22px 24px;
  box-shadow: var(--shadow); position: relative;
}
.tl-item .tl-card::before {
  content: ''; position: absolute; left: -26px; top: 26px; width: 11px; height: 11px;
  border-radius: 50%; background: #fff; border: 2px solid var(--gold);
}
.tl-item .tl-card h4 { margin-bottom: 8px; }
.tl-item .tl-card p { font-size: 13.5px; color: var(--gray); line-height: 1.9; }
.tl-item:nth-child(even) .tl-year { grid-column: 2; text-align: left; padding-left: 12px; padding-right: 0; }
.tl-item:nth-child(even) .tl-card { grid-column: 1; grid-row: 1; }
.tl-item:nth-child(even) .tl-card::before { left: auto; right: -26px; }

/* 公司介绍页指标区（浅色底，和首页深色理念区区分开） */
.metrics-section { background: #fff; }
.metrics-section .metrics-grid { border-top: none; padding-top: 0; }

/* ===== 产品详情页 ===== */
.product-detail { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; max-width: 1120px; margin: 0 auto; padding: 0 24px; align-items: start; }
.pd-visual { background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.pd-visual img { width: 100%; height: auto; display: block; }
.pd-visual .img-placeholder { min-height: 420px; }
.pd-info .pd-cat {  font-size: 12px; letter-spacing: 4px; color: var(--gold); text-transform: uppercase; }
.pd-info h1 { font-size: 30px; color: var(--green); letter-spacing: 1px; margin: 10px 0 10px; }
.pd-info .pd-sub { color: var(--gray); font-size: 15px; margin-bottom: 20px; line-height: 1.9; }
/* 价格删掉后，.pd-meta 紧接着副标题。原来「价格 → 元信息」的节奏是
   价格 6px 下边距 + 元信息 22px 上边距，现在直接衔接略显局促，
   把元信息上间距按 20px 微调，保留那条分隔线作为视觉分界。 */
.pd-meta { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 22px; }
.pd-meta .row { display: flex; gap: 14px; font-size: 14px; color: var(--gray); padding: 7px 0; }
.pd-meta .row span:first-child { color: var(--green); min-width: 86px; }
.pd-desc { margin-top: 24px; }
.pd-desc h2 { font-size: 18px; margin-bottom: 12px; }
.pd-desc p { color: var(--gray); line-height: 2; margin-bottom: 12px; }
.pd-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.pd-back { margin-top: 16px; display: block; font-size: 13.5px; color: var(--gray); }
.pd-back:hover { color: var(--green); }
.product-card a.card-link { display: block; }

/* ===== 响应式 ===== */
@media(max-width:1080px){
  .features-grid, .products-grid, .store-grid, .services-grid, .services-row, .info-cards { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .mission-grid { grid-template-columns: 1fr; gap: 36px; }
  .store-hero-card { grid-template-columns: 1fr; }
  .product-detail { grid-template-columns: 1fr; gap: 28px; }
  .hero { min-height: 460px; }
  .hero-title { font-size: 40px; letter-spacing: .12em; padding-left: .12em; }
  .hero-sub { font-size: 15px; }
  /* 印章高度 = 文字块总高 = 标题行盒 40×1.2 + 边距 10 + 副标题行盒 15×1.2 ≈ 76px */
  .hero-seal { --mk-h: 76px; }
  .hero-text { max-width: 480px; padding: 38px 34px; }
  .timeline::before { left: 7px; }
  .tl-item, .tl-item:nth-child(even) { grid-template-columns: 46px 1fr; gap: 16px; }
  .tl-item .tl-year, .tl-item:nth-child(even) .tl-year {
    grid-column: 1; grid-row: 2; text-align: left; padding: 0; font-size: 15px; padding-top: 4px;
  }
  .tl-item .tl-card, .tl-item:nth-child(even) .tl-card { grid-column: 2; grid-row: 1 / span 2; }
  .tl-item .tl-card::before, .tl-item:nth-child(even) .tl-card::before { left: -25px; right: auto; }
}
@media(max-width:820px){
  .nav-toggle { display: flex; }
  .logo-mark { height: 36px; }
  .logo.has-mark { gap: 9px; }
  .site-footer .logo-mark { height: 34px; }
  /* 手机端滑出菜单：
     · padding-top 收紧到 18px，菜单项贴近顶部，不再有一大片空白
     · 关闭方式改为「点外部遮罩 / 点菜单项 / Esc / 左滑」，不再用右上角 X
     · 菜单打开时汉堡按钮被遮罩盖住 → 顺手把它隐藏，避免露出半个图标 */
  .main-nav { position: fixed; top: 0; right: -100%; width: 270px; height: 100vh; background: #fff; box-shadow: -4px 0 20px rgba(0,0,0,.1); transition: .35s; padding: 18px 20px 30px; z-index: 999; }
  .main-nav.open { right: 0; }
  .main-nav ul { flex-direction: column; gap: 4px; }
  /* 展开时隐藏汉堡按钮（遮罩接管关闭操作） */
  body.menu-open .nav-toggle { opacity: 0; pointer-events: none; }
  .nav-toggle { transition: opacity .2s; }
  /* 菜单外遮罩：点半透明区域关闭菜单。
     ⚠️ 关键：它覆盖整屏（inset:0）且层级高于页头，
     所以**隐藏时必须 pointer-events:none** —— 否则这层看不见的遮罩会把
     包括汉堡按钮在内的所有点击都吃掉，导致菜单根本打不开（曾经踩过这个坑）。 */
  .menu-mask { display: block; position: fixed; inset: 0; background: rgba(17,26,20,.5); z-index: 998; opacity: 0; pointer-events: none; transition: opacity .35s; }
  .menu-mask:not([hidden]) { opacity: 1; pointer-events: auto; }
  .main-nav a { display: block; padding: 14px 16px; font-size: 16px; border-radius: 6px; }
  body.menu-open { overflow: hidden; }
  
  .hero { min-height: 440px; max-width: 98%; border-radius: 10px; margin-top: 16px; }
  /* 窄屏：图片被居中裁切，文字容易压在亮部，加一层自下而上的暗色渐变兜底 */
  .hero.has-image .hero-overlay {
    background:
      linear-gradient(180deg, rgba(16,28,21,.30) 0%, rgba(16,28,21,.10) 26%, rgba(16,28,21,.52) 62%, rgba(16,28,21,.76) 100%),
      radial-gradient(circle at 75% 55%, rgba(200,161,90,.14), transparent 62%);
  }
  /* 窄屏也把文字块靠右并收窄：主视觉里主体在画面左侧，文字居中会正好压住她的脸。
     描述字号 15→14px：每字变窄，2 行能容下的字数不变而所需宽度变少，
     于是 max-width 可以从 46% 收到 43%，整块再右移约 20px。
     再窄就会把描述挤成 3 行且末行只剩两三个字（孤字）。 */
  .hero-inner { justify-content: flex-end; padding-right: 8px; }
  .hero-text { max-width: 43%; padding: 26px 18px; --hero-scrim: .34; }
  .hero-desc { font-size: 14px; }
  /* 印章高度 = 文字块总高 = 标题行盒 34×1.2 + 边距 10 + 副标题行盒 13×1.2 ≈ 67px */
  .hero-seal { --mk-h: 67px; --mk-gap: 4px; }
  .hero-title { font-size: 34px; letter-spacing: .10em; padding-left: .10em; }
  .hero-sub { font-size: 13px; }
  .hero-rule { margin-bottom: 16px; }
  /* 注：这里原来有一条 `.hero.has-image { background-position: center; }`，
     与基础规则里的 left center 冲突（桌面左对齐、窄屏居中）。
     现已在基础规则统一为 center 30%，故删除此覆盖。 */
  
  .section { padding: 60px 0; }
  .row2 { grid-template-columns: 1fr; }
  /* 窄屏：版权与备案改为两行居中，此时分隔竖线就不需要了 */
  .copyright .container { flex-direction: column; gap: 6px; text-align: center; }
  .copyright .icp-line::before { display: none; }
}
@media(max-width:550px){
  .container { padding: 0 16px; }
  .hero { min-height: 320px; max-width: 100%; border-radius: 0; margin-top: 0; }
  /* 印章高度 = 文字块总高 = 标题行盒 26×1.2 + 边距 8 + 副标题行盒 11×1.2 ≈ 53px */
  .hero-seal { --mk-h: 53px; --mk-gap: 3px; }
  .hero-brand .hero-title { margin-bottom: 8px; }
  .hero-title { font-size: 26px; letter-spacing: .08em; padding-left: .08em; }
  .hero-sub { font-size: 11px; }
  .hero-desc { font-size: 13px; line-height: 1.85; }
  .hero-rule { width: 40px; margin-bottom: 13px; }
  .features-grid, .products-grid, .store-grid, .services-grid, .services-row, .info-cards,
  .metrics-grid { grid-template-columns: 1fr; }

  /* 页脚：三组链接排两列（品牌块独占一行），并全面收紧间距。
     原来和上面一起塌成单列 + 桌面级间距（组间距 44px），390px 屏页脚高达 880px。 */
  .site-footer { padding-top: 34px; }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 22px 18px;
    padding-bottom: 26px;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand .logo { margin-bottom: 12px; }
  .footer-brand p { font-size: 12.5px; margin-bottom: 5px; line-height: 1.7; }
  .footer-col h4 { font-size: 14px; margin-bottom: 9px; }
  .footer-col li { margin-bottom: 5px; }
  .footer-col a { font-size: 13px; }
  /* 手机顶栏：排成一行（居中），放不下才换行。
     原来是 flex-direction:column 上下叠，间距只有 4px，看着像挤在一起。 */
  .top-bar { font-size: 12px; letter-spacing: 1px; padding: 9px 0; }
  .top-bar-inner {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px 16px;          /* 换行时行间距 5px、同行间距 16px */
    text-align: center;
  }
  .top-bar .top-slogan { white-space: nowrap; }
  .top-bar .top-links { white-space: nowrap; }
  h2 { font-size: 23px; }
  .section { padding: 44px 0; }
  .promise-bar { padding: 28px 16px; }
  .btn { padding: 11px 24px; font-size: 13px; }
  /* 手机档再贴右一点，并把文字块收窄到 52%（描述仍是 3 行 12/12/12） */
  .hero-inner { padding-right: 6px; }
  .hero-text { max-width: 52%; padding: 20px 12px; }
  .pd-info h1 { font-size: 24px; }
  .product-detail { padding: 0 16px; }
}

/* ---------- 照片墙 ----------------------------------------------------------
   两列排布：上面照片、下面一行说明文字。手机端自动变一列。 */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* align-items:start —— 卡片各按自己的内容取高度。
     默认的 stretch 会把 1 行说明的卡片拉到和 3 行邻居一样高，下面空一块。 */
  align-items: start;
  gap: 36px 40px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.gallery-card {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line, #EDE4D2);
  border-radius: 10px;
  overflow: hidden;
  /* 纵向 flex：让说明栏 flex:1 吃掉剩余高度。
     同一行里两行说明和一行说明的卡片本来就会差 27px，
     这样撑开之后两张卡的说明区一样高、文字垂直居中，看着才齐。 */
  display: flex;
  flex-direction: column;
}
/* 注意：通用规则 .img-placeholder 带 height:100% / min-height:220px / padding:20px，
   子图片也带 height:100% —— 那会让图片撑满整张卡片，
   下面的 <figcaption> 溢出后被 .gallery-card{overflow:hidden} 裁掉（只剩图、没有说明）。
   所以这里必须把这几条全部覆盖回来，让图片按 4:3 自己决定高度。 */
.gallery-card .img-placeholder {
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--off, #F5EEE0);
}
/* 统一 4:3 画框，但照片用 contain 完整放进框里：
   比例不符时四周留白（底色和卡片一致，看着像相框的卡纸），不裁掉内容。
   悬停不再放大 —— 留白模式下放大会把照片顶出画框。 */
.gallery-card .img-placeholder img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--cream, #FCFAF6);
  transition: filter .35s ease;
}
.gallery-card:hover .img-placeholder img { filter: brightness(1.03); }
.gallery-card figcaption {
  padding: 4px 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2, #6B5D4A);
  text-align: center;
  border-top: 1px solid var(--line, #EDE4D2);
  background: var(--cream, #FCFAF6);
  /* 说明栏按内容自然高度：
       1 行 → 1 行高，2 行 → 2 行高，3 行 → 3 行高
       超过 3 行 → 停在 3 行高，多余的裁掉，框不再变长
     3 行的高度 = 内边距 4+4 + 行高 14.5×1.5×3 ≈ 75px，
     这里按 em 算，字号改了也跟着变。 */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 高度由前台算好的 --cap-lines 决定（= 全墙最长行数，最多 3）：
       1 行 ≈ 32px、2 行 ≈ 54px、3 行 ≈ 75px，所有卡片一致。
     行高 1.5em = 21.75px（中文需要 1.4~1.5 才不被切），加内边距 4+4 再加 2px 余量 → 10px。 */
  height: calc(1.5em * var(--cap-lines, 1) + 10px);
  max-height: calc(1.5em * 3 + 10px);
  overflow: hidden;
}

/* 说明文字本体：用 -webkit-line-clamp 钳制行数。
   flex 容器里的 overflow:hidden 藏不住溢出的行，所以钳制放在这一层。 */
.gallery-card figcaption > span {
  display: -webkit-box;
  -webkit-line-clamp: var(--cap-lines, 1);
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}
@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: 1fr; gap: 26px; padding: 0 20px; }
}

/* 照片墙的页首说明：全局 .lead 没设字号（继承正文 14px），在这一页顶部偏小，
   这里单独放大并加深，让它更显眼。只作用于本页，不影响其它页面的 .lead。 */
#gallery .section-head { margin-bottom: 44px; }
/* 标题下的金色细线：全局是固定 88px（按 14px 正文调的），
   本页说明文字 25px，按比例 88 × 25/14 ≈ 157px 才协调。 */
#gallery .section-head::after { width: 157px; }
#gallery .section-head .lead {
  font-size: 25px;
  line-height: 1.7;
  letter-spacing: 1.5px;
  max-width: 860px;      /* 不写 color，用回主题里的 .section-head .lead 颜色 */
}