/* 诚愿九华官网 · 公共样式（设计令牌一处改全站改）
   由 index.html 抽取，栏目页与文章页共用 */

/* ========== 自托管标题字体（思源宋体子集） ==========
   为什么要自托管：macOS 的 Songti SC 只有 300/400/700/900 —— **没有 600 面**，
   浏览器把 font-weight:600 直接映射到 700，导致「深底浅字降一档」这套设计
   在 Mac 上根本不生效；Windows 又各用各的（华文中宋/宋体，还可能合成加粗）。
   自托管后：所有平台看到同一套字形，且 600 是真 SemiBold。
   子集由 生成字体子集.py 产出（全站标题实际用字，改过标题文案要重跑脚本）。 */
@font-face{
  font-family:"ChengYuan Serif";
  src:url("fonts/site-serif-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"ChengYuan Serif";
  src:url("fonts/site-serif-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}

/* ========== 设计令牌（一处改全站改） ========== */
:root{
  --ink:#1A1A18;      /* 主文字/标题 */
  --ink-2:#4A4640;    /* 正文 */
  --ink-3:#8A837A;    /* 弱化说明 */
  --paper:#FAF8F5;    /* 页面主底（宣纸白） */
  --paper-2:#F1ECE4;  /* 卡片底/产品图底 */
  --line:#E3DCD1;     /* 分隔线/描边 */
  --tan:#8B6F4E;      /* 主点缀 */
  --clay:#B4673C;     /* 次点缀 */
  --gold:#C9A961;     /* 仅深色区块 */
  --cinnabar:#A63A2E; /* 印章，全站≤3处 */
  --sku-bg:#AD9D95;   /* 产品图抠图底色 */

  --serif:"Source Han Serif SC","Noto Serif SC","Songti SC","STSong","SimSun",serif;
  /* 大字号标题专用：首位是自托管思源宋体子集（跨端一致 + 600 真实生效），
     后面全是回退链——字体没下下来/没加载完时落到系统衬线，不会白屏不会缺字。
     （实测 Songti SC 400 在 80px 以上笔画太单薄，700 才有骨有肉） */
  --serif-display:"ChengYuan Serif","Source Han Serif SC VF","Source Han Serif SC","Noto Serif SC","STZhongsong","华文中宋","Songti SC","STSongti-SC-Bold","STSong","SimSun",serif;
  --sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,sans-serif;
  --wrap:1200px;
  --read:720px;
  --gap:112px;        /* 区块上下间距 */
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--sans);font-size:16px;line-height:1.9;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:500;margin:0;letter-spacing:.05em;}
/* 标题统一规范（真机实测结论）：
   26px 以上用 --serif + 500 笔画太单薄（渲出来像报纸，没品牌骨），统一改走
   --serif-display + 粗宋；20px 级 h3 保持 500——小字号粗宋会发闷。
   ≤22px 的浅底 h2（如 FAQ）降到 600；深底浅字因发光膨胀感，比同尺寸浅底再降一档。 */
h1{font-family:var(--serif-display);font-weight:700;font-size:44px;line-height:1.35;letter-spacing:.06em;}
h2{font-family:var(--serif-display);font-weight:700;font-size:30px;line-height:1.4;letter-spacing:.06em;}
h3{font-size:20px;line-height:1.5;}
p{margin:0 0 1.1em;}
a{color:var(--tan);text-decoration:none;}
a:hover{color:var(--ink);}
img{max-width:100%;display:block;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}
.read{max-width:var(--read);margin:0 auto;}
section{padding:var(--gap) 0;}
.muted{color:var(--ink-3);font-size:13px;line-height:1.6;}

/* ========== 导航 ========== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .25s,border-color .25s;border-bottom:1px solid transparent;}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;}
.brand{font-family:var(--serif);font-size:20px;letter-spacing:.14em;color:var(--paper);}
.nav.solid{background:var(--paper);border-bottom-color:var(--line);}
.nav.solid .brand{color:var(--ink);}
.nav.solid .navlinks a{color:var(--ink-2);}
.navlinks{display:flex;gap:34px;list-style:none;margin:0;padding:0;}
.navlinks a{color:rgba(250,248,245,.82);font-size:15px;letter-spacing:.06em;}
.navlinks a:hover{color:var(--gold);}
.nav.solid .navlinks a:hover{color:var(--tan);}
.navtoggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.navtoggle span{display:block;width:22px;height:1px;background:var(--paper);margin:6px 0;transition:.2s;}
.nav.solid .navtoggle span{background:var(--ink);}

/* ========== 工艺 · 下水前/全红后 对比图（REPLACE-IMG） ========== */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;}
.ba-item{position:relative;background:var(--paper);border:1px solid var(--line);aspect-ratio:1/1;overflow:hidden;}
.ba-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;}
.ba-item .ph-txt{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--ink-3);font-size:12px;letter-spacing:.14em;line-height:2;padding:16px;}
.ba-item .ph-txt b{font-family:var(--serif);font-size:15px;color:var(--ink-2);font-weight:500;letter-spacing:.1em;margin-bottom:6px;}
.ba-item .flag{position:absolute;left:0;bottom:0;z-index:3;background:rgba(26,26,24,.78);color:var(--paper);
  font-size:12px;letter-spacing:.12em;padding:6px 14px;}

/* ========== S1 Hero（全站唯一深色屏 · 黑底鎏金） ========== */
/* 背景四层：左上暖金主光 + 右下冷侧光 + 底部压深 + 斜向体质；
   再叠一层 feTurbulence 颗粒，消掉纯色大块的塑料感 */
.hero{position:relative;overflow:hidden;color:var(--paper);background:#100F0D;
  min-height:100vh;padding-top:72px;display:flex;flex-direction:column;}
/* 光是收着的：右上一束暖金主光 + 标题背后一团薄薄的金雾 + 左下一点余温，
   底色沉到 #0B0A09，金色才亮得起来（铺满整屏的大面积暖光只会把画面搅成灰褐色） */
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(46% 38% at 79% 14%, rgba(201,169,97,.18), rgba(201,169,97,.05) 44%, rgba(201,169,97,0) 72%),
  radial-gradient(52% 40% at 24% 41%, rgba(201,169,97,.10), rgba(201,169,97,0) 62%),
  radial-gradient(42% 36% at 12% 82%, rgba(176,138,80,.07), rgba(176,138,80,0) 70%),
  linear-gradient(176deg,#17150F 0%,#0F0E0D 46%,#090807 100%);}
.hero-bg::after{content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;}
/* 背景巨型水印「悟」，极低透明度，只做留白里的呼吸感 */
.hero-mark{position:absolute;right:1.5vw;bottom:-7vh;z-index:1;pointer-events:none;user-select:none;
  font-family:var(--serif-display);font-weight:700;font-size:min(32vw,410px);line-height:.76;
  color:rgba(250,248,245,.042);letter-spacing:0;}
.hero .vert{position:absolute;left:32px;top:50%;transform:translateY(-50%);z-index:2;
  font-family:var(--serif);font-size:11px;letter-spacing:.5em;color:rgba(250,248,245,.3);
  writing-mode:vertical-rl;line-height:2;}
/* 注意：.wrap 自带 margin:0 auto，在 flex 父级里会把宽度收成 fit-content（实测只剩 604px，
   整块内容被挤成中间一条窄带）。必须显式 width:100% 才能撑回 1200 网格 */
.hero > .wrap{position:relative;z-index:3;width:100%;}
/* 首屏双栏：左文案 / 右实拍。.heroinner 撑满剩余高度（顶住底部数字带），
   左右 padding 交给 .wrap，文案左边界因此与导航 logo 对齐 */
.heroinner{flex:1;display:grid;grid-template-columns:1fr .78fr;gap:clamp(28px,4vw,72px);align-items:center;}
.herocopy{display:flex;flex-direction:column;justify-content:center;padding:56px 0 48px;}
/* 实拍图：等比缩放、不裁不抠，只用一道细金边收住边线 + 一片投影让它从暗底浮起来。
   宽度不再用 max-height 反推（那样外层盒子量不到图片实际宽度），而是直接由高度上限 × 原图比例算出来，
   外层 .heroshot 宽度就会贴合图片本身 —— 落款印章才能精准压在图片角上。
   ★ 换图时同步改 --shot-ar（= 原图宽 ÷ 高；当前 900/1200 = .75） */
.herofig{margin:0;display:flex;flex-direction:column;gap:14px;align-items:flex-end;}
.heroshot{position:relative;display:block;width:fit-content;--shot-ar:.75;}
.heroshot img{display:block;width:calc(min(58vh,610px) * var(--shot-ar));max-width:100%;height:auto;
  border:1px solid rgba(201,169,97,.22);box-shadow:0 34px 90px -34px rgba(0,0,0,.9);}
/* 落款印：复用品牌印章资产 seal-square.svg（朱文方印 + 石章斑驳做旧）的内容，
   内联进来是为了让印面四字走上自托管思源宋体（SVG 用 <img> 引入时无法加载 webfont，会掉回系统字体）。
   压在图片右下角并轻微出血 —— 扣在画面角上比规规矩矩收在图内更像"盖上去的"；
   轻微旋转 = 手工盖印的不正感。★ 类名不叫 .seal，页脚另有一枚 .seal 方印（56px），避免互相污染 */
.sealstamp{position:absolute;right:-12px;bottom:30px;z-index:2;
  width:72px;height:72px;pointer-events:none;
  transform:rotate(-3.2deg);
  font-family:var(--serif-display);font-weight:700;
  /* 第一层：极淡的朱砂外晕（印泥在纸上微微洇开的观感，也让红在暗底上更跳）；
     第二层：黑色投影，把印章从照片上"抬"起来 */
  filter:drop-shadow(0 0 9px rgba(166,58,46,.34)) drop-shadow(0 7px 18px rgba(0,0,0,.62));}
.herofig figcaption{font-family:var(--serif);font-size:12.5px;letter-spacing:.14em;
  color:rgba(250,248,245,.48);text-align:right;}
.hero .eyebrow{font-family:var(--serif);font-size:11.5px;letter-spacing:.44em;
  color:var(--gold);opacity:.9;margin-bottom:28px;}
.hero h1{font-family:var(--serif-display);font-weight:700;color:var(--gold);
  font-size:clamp(48px,6.3vw,94px);line-height:1.22;letter-spacing:.26em;
  margin:0 0 30px -.26em; /* 负左距抵掉字距在末字后多出的空位，视觉左对齐才准 */
  /* 亮—沉—回光，模拟金条的反射面，比单色金更像金属 */
  background:linear-gradient(168deg,#F6EDD3 0%,#E0C88E 20%,#C9A961 44%,#A07E3B 66%,#C9A961 84%,#E6D3A2 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 20px rgba(201,169,97,.18));}
.hero .sub{font-family:var(--serif);font-size:clamp(17px,1.7vw,21px);color:rgba(250,248,245,.92);
  letter-spacing:.16em;margin-bottom:28px;}
.hero .rule{display:block;width:72px;height:1px;margin-bottom:28px;
  background:linear-gradient(90deg,var(--gold),rgba(201,169,97,0));}
.hero .lead{max-width:540px;color:rgba(250,248,245,.76);font-size:16px;line-height:2.15;margin-bottom:46px;}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;}
.herofacts{border-top:1px solid rgba(201,169,97,.2);}
/* 数字事实带：6 格（2016 线下店 → 2020 入驻三大线上渠道 → 2023 商标 → 2024 公司化 → 5 类材质 → 一物一图），
   时间四项排在最前，AI 抽「品牌沿革」时能按顺序读成一条时间线。
   6 格比 5 格窄，gap 与 span 字距同步收窄，保证「入驻天猫、抖音、视频号」单行不换行 */
.facts{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;list-style:none;margin:0;padding:26px 0 44px;}
.facts b{display:block;font-family:var(--serif-display);font-weight:700;font-size:27px;line-height:1.3;
  color:var(--gold);letter-spacing:.06em;margin-bottom:6px;}
.facts span{font-size:12px;letter-spacing:.1em;color:rgba(250,248,245,.5);}
.btn{display:inline-block;padding:13px 34px;border:1px solid var(--gold);color:var(--gold);font-size:15px;letter-spacing:.08em;transition:.2s;}
.btn:hover{background:var(--gold);color:var(--ink);}
.btn-solid{display:inline-block;padding:13px 32px;border:1px solid rgba(201,169,97,.9);color:#191712;
  background:linear-gradient(168deg,#E4CF9C 0%,#C9A961 52%,#AE8B44 100%);
  font-size:15px;letter-spacing:.08em;transition:.2s;}
.btn-solid:hover{background:none;border-color:var(--gold);color:var(--gold);}
.btn-ghost{display:inline-block;padding:13px 0;color:rgba(250,248,245,.66);font-size:14.5px;letter-spacing:.1em;transition:.2s;}
.btn-ghost:hover{color:var(--gold);}
.btn-dark{display:inline-block;padding:13px 34px;border:1px solid var(--ink);color:var(--ink);font-size:15px;letter-spacing:.08em;transition:.2s;}
.btn-dark:hover{background:var(--ink);color:var(--paper);}

/* ========== S2 导语段（GEO 主抓区） ========== */
.intro{background:var(--paper);padding:var(--gap) 0;}
.intro p{font-family:var(--serif);font-size:20px;line-height:2.1;color:var(--ink);letter-spacing:.04em;text-align:justify;}
.intro .sig{margin-top:36px;text-align:center;color:var(--tan);font-size:13px;letter-spacing:.3em;}

/* ========== 通用区块头 ========== */
.shead{display:flex;align-items:baseline;gap:18px;margin-bottom:52px;}
.shead .en{font-family:var(--serif);font-size:12px;letter-spacing:.34em;color:var(--tan);}
.shead h2{margin-right:auto;}
.shead .more{font-size:14px;letter-spacing:.06em;color:var(--ink-3);}
.shead .more:hover{color:var(--tan);}

/* ========== S3 三大材质 ========== */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.mcard{background:transparent;border:1px solid var(--line);padding:0 0 26px;transition:border-color .2s;}
.mcard:hover{border-color:var(--tan);}
.pic{background:var(--paper-2);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:12px;letter-spacing:.16em;overflow:hidden;}
.pic img{display:block;width:100%;height:100%;object-fit:cover;}
.mcard h3{margin:26px 28px 8px;}
.mcard p{margin:0 28px;font-size:14px;color:var(--ink-3);}

/* ========== S4 工艺屏 ========== */
/* 同 .cert.tex 的「极淡档」：米色区块只让纸面不死白，不追求看清珠粒。
   浓度取 95/96 —— 浅底铺满一旦浓于 90% 就会和相邻纸白区块对比成水渍（踩过的坑）。 */
.craft{background:var(--paper-2);
  background-image:linear-gradient(rgba(241,236,228,.95),rgba(241,236,228,.96)),
                   url("img/tex-beads-a.jpg?v=20261007a");
  background-size:auto,cover;background-position:center,center;background-repeat:no-repeat;}
.craftwrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.craftpic{background:var(--paper);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--ink-3);font-size:12px;letter-spacing:.14em;text-align:center;padding:24px;line-height:2;}
.steps{list-style:none;margin:36px 0 0;padding:0;counter-reset:s;}
.steps li{position:relative;padding:0 0 30px 66px;border-left:1px solid var(--line);}
.steps li:last-child{border-left-color:transparent;padding-bottom:0;}
.steps .num{position:absolute;left:-1px;top:-6px;width:66px;font-family:var(--serif);font-size:26px;color:var(--tan);letter-spacing:.1em;}
.steps h3{margin-bottom:8px;}
.steps p{font-size:14px;color:var(--ink-3);margin:0;}

/* ========== S5 品牌故事 6 章 ========== */
.chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 40px;}
.chap{padding-top:22px;border-top:1px solid var(--line);transition:.2s;}
.chap:hover{border-top-color:var(--tan);}
.chap .cn{font-family:var(--serif);font-size:28px;color:var(--tan);letter-spacing:.1em;line-height:1.4;}
.chap h3{margin:12px 0 10px;}
.chap p{font-size:14px;color:var(--ink-3);margin:0;}

/* ========== S6 收藏故事 ========== */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.scard{background:var(--paper-2);border:1px solid var(--line);padding:20px;}
.scard .pic{background:var(--paper);border:1px solid var(--line);aspect-ratio:4/3;}
.scard .who{font-size:13px;color:var(--ink-3);margin:18px 0 10px;letter-spacing:.08em;}
.scard blockquote{margin:0;font-family:var(--serif);font-size:16px;line-height:1.9;color:var(--ink-2);}
.scard .when{margin-top:16px;font-size:13px;color:var(--ink-3);}

/* ========== S7 知识 ========== */
.kcard{border:1px solid var(--line);padding:30px 28px;display:flex;flex-direction:column;transition:.2s;}
.kcard:hover{border-color:var(--tan);}
.tag{align-self:flex-start;font-size:12px;letter-spacing:.14em;color:var(--tan);border:1px solid var(--line);padding:3px 12px;margin-bottom:20px;}
.kcard h3{margin-bottom:14px;}
.kcard p{font-size:14px;color:var(--ink-3);flex:1;}
.kcard .date{font-size:13px;color:var(--ink-3);margin:18px 0 0;}

/* ========== S8 证书查询 ========== */
.cert{background:var(--paper-2);text-align:center;}
/* 虚化手串底纹：底图已由 PIL 做好「降采样 1/16 → 高斯模糊 → 放回原尺寸」，
   不靠 CSS filter:blur()（后者要 GPU 实时算、模糊后容器边缘还会露白，且无法被缓存）。
   ★ 参数是反复调出来的，别随手改：
     · 模糊半径 <12px → 放大到区块尺寸后珠粒边界可见，看起来像墙面斑渍，不是高级；
       >24px → 只剩均匀色块，白加了。18~20px 是「看得出是珠串、但不抢戏」的区间。
     · 源图必须选「珠粒密集、光照均匀」的（手心原籽最佳）。带大块明暗反光的
       （柜台照、带背景板的产品图）模糊后是一块块脏斑 —— 这是踩过的坑。
     · 铺满式底纹的浓度上限很低：浅底 >90% 就开始显脏（与相邻纸白区块一比像水渍），
       深底 >88% 会压掉页脚文字的对比度。所以这里只取「让纸面不死白」的极淡量。
       ★ 想要「看得出手串」的效果，别调这里的透明度 —— 用下面 .texband 图带。 */
.cert.tex{
  background-image:linear-gradient(rgba(241,236,228,.95),rgba(241,236,228,.96)),
                   url("img/tex-beads-a.jpg?v=20261007a");
  background-size:auto,cover;background-position:center,center;background-repeat:no-repeat;
}
.certform{display:flex;gap:0;max-width:520px;margin:32px auto 0;}
.certform input{flex:1;padding:14px 18px;border:1px solid var(--line);border-right:none;background:var(--paper);font-family:var(--sans);font-size:15px;color:var(--ink);outline:none;border-radius:0;}
.certform input:focus{border-color:var(--ink);}
.certform button{padding:14px 30px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-size:15px;letter-spacing:.08em;cursor:pointer;border-radius:0;}
.certform button:hover{background:var(--clay);border-color:var(--clay);}

/* ========== 虚化手串图带（装饰性过渡带） ==========
   为什么单独做一条深色图带，而不是把浅色区块的背景调浓 —— 实测结论：
   浅底铺满式底纹一旦浓到「看得出手串」就显脏（与相邻纸白区块对比像水渍）。
   深色带没有这个矛盾：遮罩 66~70% 时珠串暗纹清晰可辨，且金色标题压得住。
   ★ 高度 240px 是为了让 cover 裁切后仍保留珠串的可读轮廓；
     再矮（<180px）就只剩一条色块了。
   ★ 换底图必须选「珠粒密集均匀」的源图。 */
.texband{
  position:relative;display:grid;place-items:center;height:240px;text-align:center;
  background:#100E0C;
  background-image:linear-gradient(rgba(16,14,12,.70),rgba(16,14,12,.64)),
                   url("img/tex-beads-a.jpg?v=20261007a");
  background-size:auto,cover;background-position:center,center;background-repeat:no-repeat;
}
.texband .tb-rule{display:block;width:64px;height:1px;margin:0 auto 20px;
  background:linear-gradient(90deg,rgba(201,169,97,0),var(--gold),rgba(201,169,97,0));}
/* ★ grid 的 place-items:center 会让 .wrap 塌成 fit-content（同 flex 里的老坑），
   必须显式 width:100% 才能让整条带子的文字都以容器中心对齐 */
.texband > .wrap{width:100%;text-align:center;}
/* 与首屏 h1 同一套鎏金渐变配方，字距放到 .4em 再补一个左偏移做视觉居中 */
.texband .tb-main{font-family:var(--serif-display);font-weight:700;font-size:27px;letter-spacing:.4em;
  margin:0 0 16px;margin-left:.4em;
  background:linear-gradient(168deg,#F6EDD3 0%,#E0C88E 20%,#C9A961 44%,#A07E3B 66%,#C9A961 84%,#E6D3A2 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.texband .tb-sub{font-size:13px;letter-spacing:.18em;color:rgba(250,248,245,.56);margin:0;}

/* ========== 页脚 ========== */
/* 深色页脚挂另一张：series-vajra 那圈手串在暗部会「若隐若现」成一环珠影，
   浅底用它会泛出绿松石的青斑（不搭暖调），深底反而正好。
   注意顺序：先 background 简写定底色（会重置所有 background-*），再 background-image 叠层。 */
footer{background:var(--ink);color:rgba(250,248,245,.6);padding:88px 0 44px;font-size:13px;line-height:2;
  background-image:linear-gradient(rgba(26,26,24,.90),rgba(26,26,24,.86)),
                   url("img/tex-beads-b.jpg?v=20261007a");
  background-size:auto,cover;background-position:center,center;background-repeat:no-repeat;}
footer a{color:rgba(250,248,245,.72);}
footer a:hover{color:var(--gold);}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;}
footer h4{font-family:var(--serif);font-size:15px;color:var(--paper);letter-spacing:.1em;margin:0 0 20px;font-weight:500;}
.fcol ul{list-style:none;margin:0;padding:0;}
.fcol li{margin-bottom:10px;}
.disclaim{margin-top:56px;padding-top:32px;border-top:1px solid rgba(250,248,245,.14);font-size:12px;line-height:2;color:rgba(250,248,245,.44);max-width:var(--read);}
.seal{width:56px;height:56px;margin-bottom:24px;}

/* ========== 移动端 ========== */
@media (max-width:900px){
  :root{--gap:64px;}
  .wrap{padding:0 20px;}
  .navtoggle{display:block;}
  .navlinks{position:fixed;top:72px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 20px 20px;display:none;}
  .navlinks.open{display:flex;}
  .navlinks li{border-bottom:1px solid var(--line);}
  .navlinks a{display:block;padding:14px 0;color:var(--ink-2);font-size:16px;}
  .ba{grid-template-columns:1fr 1fr;gap:8px;}
  .hero{min-height:auto;padding-top:72px;}
  .hero .vert{display:none;}
  .hero-mark{display:none;} /* 手机屏小，水印只会跟标题打架 */
  /* 手机端首屏塌成单列：文案在上、实拍在下。图缩到 250px 宽居中——
     既留住"主推款一眼可见"，又不至于把首屏拉成两屏高（数字带还能露头） */
  .heroinner{grid-template-columns:1fr;gap:26px;align-items:start;}
  .herocopy{padding:40px 20px 26px;}
  .herofig{align-items:center;}
  .heroshot img{width:min(74vw,278px);}
  /* 手机端印章跟着缩一档：图只剩 278px 宽，印章再大就抢主体了 */
  .sealstamp{width:54px;height:54px;right:-8px;bottom:24px;}
  .herofig figcaption{text-align:center;}
  .hero .eyebrow{font-size:10px;letter-spacing:.28em;white-space:nowrap;margin-bottom:22px;}
  .hero h1{font-size:clamp(38px,11.5vw,50px);letter-spacing:.14em;margin-right:-.14em;margin-bottom:24px;}
  .hero .sub{font-size:16.5px;letter-spacing:.1em;margin-bottom:22px;}
  .hero .lead{font-size:15px;margin-bottom:32px;}
  .hero .cta{gap:10px;}
  .btn,.btn-solid{padding:12px 24px;font-size:14.5px;}
  .facts{grid-template-columns:1fr 1fr;gap:18px 16px;padding:18px 0 26px;}
  .facts b{font-size:20px;}
  .facts span{font-size:11.5px;letter-spacing:.06em;}
  .intro p{font-size:17px;line-height:2;}
  .grid3,.chapters,.stories,.fgrid{grid-template-columns:1fr;}
  .craftwrap{grid-template-columns:1fr;gap:36px;}
  /* 手机端 h2 保持 700：600 只留给「深色屏 + FAQ + 内联小标题」这几个场景，
     它们各自字符集很小（自托管 600 子集仅 9KB）；若手机端也走 600，
     就得再准备一份全量 600 子集（+70KB），得不偿失。 */
  h1{font-size:30px;}h2{font-size:24px;}h3{font-size:18px;}
  .shead{flex-wrap:wrap;gap:10px;}
  .certform{flex-direction:column;}
  .certform input{border-right:1px solid var(--line);margin-bottom:10px;}
  /* 图带窄屏：高度压到 180px，标题缩一档并同步收字距（字距是 .4em，漏改会顶出边界） */
  .texband{height:180px;}
  .texband .tb-main{font-size:20px;letter-spacing:.3em;margin-left:.3em;margin-bottom:12px;}
  .texband .tb-sub{font-size:11.5px;letter-spacing:.1em;}
}

/* ========== 栏目页 / 文章页（追加） ========== */
.pagehead{padding:132px 0 8px;}
/* 内页标题头带：挂一层虚化手串底纹，向下淡出到纸白，与下面的 .pagesec 之间靠
   那条 border-top 收口，不会出现硬边色块。
   ★ 头带能比正文区块承受更高浓度（93~95% 会淡到看不出）：因为它上面是导航条、
     下面是带分隔线的 pagesec，不夹在两个纯白块之间，所以 88% 也不会像「水渍」。
     这一档是拿 95/88/62 三档实测比出来的 —— 88% 看得出珠纹肌理，仍是素白调。 */
.pagehead.tex{
  background-image:linear-gradient(180deg,rgba(236,228,216,.88) 0%,rgba(243,238,230,.91) 52%,rgba(250,248,245,.97) 100%),
                   url("img/tex-beads-a.jpg?v=20261007a");
  background-size:auto,cover;background-position:center top,center 34%;background-repeat:no-repeat;
}
.crumb{font-size:12px;letter-spacing:.16em;color:var(--ink-3);margin-bottom:22px;}
.crumb a{color:var(--ink-3);}
.crumb a:hover{color:var(--tan);}
.pagehead h1{font-size:40px;line-height:1.35;margin-bottom:24px;}
.pagehead .lead{max-width:var(--read);font-size:16px;line-height:2;}
.subnav{max-width:var(--read);margin:0;list-style:none;padding:18px 0 0;display:flex;flex-wrap:wrap;gap:22px;font-size:14px;}

.pagesec{padding:72px 0;border-top:1px solid var(--line);}
.article{max-width:var(--read);}
.article h2{font-size:26px;margin:0 0 18px;}
.article h3{font-size:19px;margin:40px 0 12px;}
.article p{font-size:16.5px;line-height:1.95;}
.article ul,.article ol{padding-left:1.35em;margin:0 0 1.3em;}
.article li{margin-bottom:12px;line-height:1.9;}
.article table{width:100%;border-collapse:collapse;margin:30px 0;font-size:14.5px;}
.article th,.article td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top;}
.article th{background:var(--paper-2);font-family:var(--serif);font-weight:500;color:var(--ink);}
.article figure{margin:34px 0;}
.article figcaption{font-size:13px;color:var(--ink-3);line-height:1.8;margin-top:12px;}
.key{background:var(--paper-2);border-left:3px solid var(--tan);padding:22px 26px;margin:34px 0;
  font-family:var(--serif);font-size:17px;line-height:1.95;color:var(--ink);}
.key b{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.2em;color:var(--tan);margin-bottom:10px;font-weight:400;}
.note{font-size:13.5px;color:var(--ink-3);line-height:1.9;border-top:1px solid var(--line);padding-top:20px;margin-top:48px;}
.meta{font-size:13px;color:var(--ink-3);letter-spacing:.08em;margin-bottom:16px;}

/* ========== 线下门店实景（about 页） ==========
   图全部保持原始宽高比、等比缩放，不裁不抠 —— 所以不设 aspect-ratio，只用 width:100%+height:auto。
   ★ 并排两张想「等高」又不想裁图，唯一办法是按原始宽高比分配列宽：
     列宽比 = 图 A 比例 : 图 B 比例 → 两边算出来的高度天然相等。
     当前两张为 1.461（柜台俯视 1200×821）与 2.151（柜台近景 1440×670）；
     **换图必须同步改下面这两个 fr 值**，否则两张会一高一矮、图注错位。 */
.storegal{display:grid;grid-template-columns:1fr;gap:16px;margin:32px 0 0;}
.storegal .pair{display:grid;grid-template-columns:1.461fr 2.151fr;gap:16px;align-items:start;}
.storegal figure{margin:0;}
.storegal img{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--paper-2);}
.storegal figcaption{font-size:12.5px;color:var(--ink-3);letter-spacing:.05em;padding:11px 2px 0;line-height:1.8;}

/* ========== 印尼产地实拍（series 页 · 金刚菩提原料端） ==========
   四张竖图：三张 720×1280（比例 0.5625）+ 一张 544×960（比例 0.5667）。
   ★ 为什么用 fr 而不是 repeat(4,1fr)：等宽并排时那 0.4% 的比例差会被放大成
     「第 2 张图矮 4px → 四行图注基线不齐」，肉眼能看出错位。
     按原始宽高比分配列宽（fr 值 = 各图宽高比）后，四张高度精确相等，
     宽度只差约 2px（0.7%，不可见）—— 这才是「不裁不抠又等高」的正解。
   ★ 换图必须重算下面这四个 fr 值，否则一高一矮、图注错位。 */
.origingal{display:grid;grid-template-columns:.5625fr .5667fr .5625fr .5625fr;gap:14px;margin:28px 0 0;align-items:start;}
.origingal figure{margin:0;}
.origingal img{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--paper-2);}
.origingal figcaption{font-size:12.5px;color:var(--ink-3);letter-spacing:.05em;padding:11px 2px 0;line-height:1.8;}

.toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.toc li{border-bottom:1px solid var(--line);}
.toc a{display:flex;gap:20px;align-items:baseline;padding:18px 2px;color:var(--ink-2);font-family:var(--serif);font-size:18px;}
.toc a:hover{color:var(--tan);}
.toc .cn{color:var(--tan);font-size:18px;letter-spacing:.1em;flex:0 0 auto;}

.chapter{padding:56px 0;border-top:1px solid var(--line);scroll-margin-top:96px;}
.chapter:first-of-type{border-top:none;padding-top:0;}
.chapter .cn{font-family:var(--serif);font-size:26px;color:var(--tan);letter-spacing:.1em;margin-bottom:10px;}
.chapter p{font-size:16.5px;line-height:1.95;}

.klist{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:900px){
  .pagehead{padding:104px 0 8px;}
  .pagehead h1{font-size:28px;}
  .klist{grid-template-columns:1fr;}
  .pagesec{padding:48px 0;}
  .article h2{font-size:22px;}
}

/* 栏目页 / 文章页：页头是白底，导航初始即为实心（首页 Hero 是深色才用透明导航） */
body.page .nav{background:var(--paper);border-bottom-color:var(--line);}
body.page .nav .brand{color:var(--ink);}
body.page .navlinks a{color:var(--ink-2);}
body.page .navtoggle span{background:var(--ink);}

.kcard.soon{opacity:.62;}
.kcard.soon h3{color:var(--ink-3);}
.kcard.soon .tag{color:var(--ink-3);}

/* ========== 本季主打 · 树王六瓣小金刚（深色产品屏） ========== */
/* 深底挂 tex-beads-b（那圈手串在暗部会浮成珠影；浅底用它泛青斑，深底才对）。
   比页脚（90/86%）再淡一档到 92/88%：本屏内有三张大产品图 + 正文，
   珠影只做「黑底不死板」的底气，不能跟产品图抢注意力。
   ★ 顺序：先 background 简写定底色（会重置所有 background-*），再叠 background-image。 */
.featured{background:#1E1813;
  background-image:linear-gradient(rgba(30,24,19,.92),rgba(30,24,19,.88)),
                   url("img/tex-beads-b.jpg?v=20261007a");
  background-size:auto,cover;background-position:center,center;background-repeat:no-repeat;}
.featured h2{color:var(--paper);font-weight:600;} /* 深底浅字有发光膨胀感，比同尺寸浅底降一档 */
.featured .shead .en{color:var(--gold);}
.featured .shead .more{color:rgba(250,248,245,.5);}
.featured .shead .more:hover{color:var(--gold);}

.featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.featgrid figure{margin:0;position:relative;overflow:hidden;background:#141110;}
.featgrid img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .7s ease;}
.featgrid figure:hover img{transform:scale(1.035);}
.featgrid figcaption{position:absolute;left:0;right:0;bottom:0;padding:52px 22px 20px;font-size:13px;line-height:1.75;
  letter-spacing:.03em;color:rgba(250,248,245,.82);
  background:linear-gradient(to top,rgba(10,8,6,.94),rgba(10,8,6,.6) 52%,transparent);}
.featgrid figcaption b{display:block;font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:.16em;color:var(--gold);margin-bottom:6px;}

.featfoot{display:grid;grid-template-columns:1fr 1.08fr;gap:60px;align-items:center;margin-top:72px;}
.featfoot h3{font-family:var(--serif-display);font-weight:600;color:var(--paper);font-size:24px;margin-bottom:20px;letter-spacing:.06em;}
.featfoot p{font-size:15px;line-height:2.05;color:rgba(250,248,245,.7);margin:0 0 20px;}
.featfoot .chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:26px 0 0;}
.featfoot .chips li{border:1px solid rgba(201,169,97,.4);color:var(--gold);font-size:13px;letter-spacing:.12em;padding:7px 15px;}
.featwide{margin:0;}
.featwide img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid rgba(201,169,97,.2);}
.featwide figcaption{font-size:12.5px;color:rgba(250,248,245,.42);letter-spacing:.05em;padding:14px 2px 0;line-height:1.8;}

@media (max-width:900px){
  .featgrid{grid-template-columns:1fr;gap:14px;}
  .featfoot{grid-template-columns:1fr;gap:34px;margin-top:48px;}
  .featfoot h3{font-size:20px;}
}

/* 通用表格：覆盖 .read / 页面任意位置的表格（品牌信息表等），与 .article 内表格保持同一套外观 */
table{border-collapse:collapse;font-size:14.5px;}
th,td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top;word-break:break-word;}
th{font-weight:500;background:var(--paper-2);}
.read table,.pagesec > .wrap > table{width:100%;margin:26px 0;}

/* ========== 系列页 / 收藏故事页 ========== */
.srow{display:grid;grid-template-columns:0.86fr 1fr;gap:56px;align-items:start;padding:60px 0;border-top:1px solid var(--line);scroll-margin-top:96px;}
.srow:first-of-type{border-top:none;padding-top:0;}
.srow figure{margin:0;}
.srow .pic{background:var(--paper-2);}
.srow figcaption{font-size:12.5px;color:var(--ink-3);letter-spacing:.05em;padding:12px 2px 0;line-height:1.8;}
.srow .en{display:block;font-size:12px;letter-spacing:.22em;color:var(--tan);margin-bottom:8px;}
.srow h2{font-size:26px;margin:0 0 22px;}
.srow p{font-size:16px;line-height:2;}
.srow ul{margin:0 0 18px;}
.srow li{font-size:15px;line-height:2;color:var(--ink-2);}
.srow table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14px;}
.srow th,.srow td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top;}
.srow th{background:var(--paper-2);font-weight:500;white-space:nowrap;}
.srow .links{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;margin-top:4px;}

/* 系列定位语（可整段引用，AI 抓取友好） */
.pos{font-family:var(--serif);font-size:19px;line-height:1.95;color:var(--ink);
  border-left:3px solid var(--tan);background:var(--paper-2);padding:20px 24px;margin:0 0 26px;}
.pos b{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;color:var(--tan);font-weight:400;margin-bottom:8px;}

/* 点缀材质小卡 */
.mnote{border:1px solid var(--line);padding:26px 28px;background:var(--paper);}
.mnote h3{font-size:19px;margin-bottom:12px;}
.mnote p{font-size:15px;line-height:1.95;color:var(--ink-2);margin:0;}

/* 收藏故事页 */
.cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.ccard{display:grid;grid-template-columns:132px 1fr;gap:22px;background:var(--paper-2);border:1px solid var(--line);padding:20px;}
.ccard .pic{background:var(--paper);border:1px solid var(--line);aspect-ratio:1/1;align-items:center;justify-content:center;
  font-size:11px;color:var(--ink-3);letter-spacing:.1em;text-align:center;padding:8px;}
.ccard .who{font-size:13px;color:var(--ink-3);letter-spacing:.08em;margin:0 0 10px;}
.ccard blockquote{margin:0;font-family:var(--serif);font-size:16px;line-height:1.9;color:var(--ink-2);}
.ccard .when{margin:14px 0 0;font-size:13px;color:var(--ink-3);}
.ccard .what{margin:6px 0 0;font-size:12.5px;color:var(--tan);letter-spacing:.06em;}
.callout{border:1px solid var(--line);border-left:3px solid var(--tan);background:var(--paper-2);padding:28px 30px;margin-top:56px;}
.callout h3{font-size:19px;margin-bottom:14px;}
.callout ol{margin:0;padding-left:20px;}
.callout li{font-size:15px;line-height:2;color:var(--ink-2);}
/* FAQ 问答块：把客户真会问的问题写成成对的「问-答」，AI 摘段时能拿到完整答案而不是半句 */
.faq{border-top:1px solid var(--line);margin-top:60px;padding-top:10px;}
.faq > h2{font-size:22px;font-weight:600;margin:0 0 6px;} /* 22px 级降到 600，粗宋在这个字号会发闷 */
.faq h3{font-size:16px;font-weight:500;color:var(--ink);line-height:1.75;margin:28px 0 0;}
.faq p{margin:8px 0 0;font-size:15px;line-height:2;color:var(--ink-2);}
/* 定义句：正文开头那句「XX 是一种 XX」，AI 摘段优先取的判断句，给一点视觉分量 */
.define{font-family:var(--serif);font-size:17.5px;line-height:2;color:var(--ink);
  padding:16px 0 18px 18px;border-left:3px solid var(--tan);margin:0 0 8px;}

@media (max-width:900px){
  .srow{grid-template-columns:1fr;gap:26px;padding:44px 0;}
  .srow h2{font-size:22px;}
  .pos{font-size:16.5px;padding:16px 18px;}
  .cgrid{grid-template-columns:1fr;}
  .ccard{grid-template-columns:96px 1fr;gap:16px;padding:16px;}
  /* 表格在窄屏横向滚动，避免撑破页面；scrollbar 显式变细，提示可滑动 */
  .read table,.article table,.srow table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    font-size:13.5px;scrollbar-width:thin;}
  /* 表头与数据列整词不断行（否则「10mm」会被拆成「10m / m」、表头被拆成两行）；
     仅最末说明列允许折行，避免整表被一列长文案撑得过宽 */
  .read th,.article th,.srow th{white-space:nowrap;}
  .read td,.article td,.srow td{padding:8px 10px;white-space:nowrap;}
  .read td:last-child,.article td:last-child,.srow td:last-child{white-space:normal;min-width:104px;}
  .callout{padding:22px 18px;}
  .callout ol{padding-left:18px;}
  .faq{margin-top:44px;}
  .faq > h2{font-size:19px;}
  .faq h3{font-size:15.5px;margin-top:24px;}
  .define{font-size:16px;padding:12px 0 14px 14px;}
  .storegal{grid-template-columns:1fr;gap:16px;}
  .storegal .pair{grid-template-columns:1fr;gap:16px;}
  /* 产地四图：手机上走 2 列（竖图若塌成 1 列，四张要滚 2200px 以上；
     2 列时每张约 148px 宽 —— 这组图的作用是「产地氛围」而非看清纹理，
     信息由下方图注承担，所以宁可小图并排也不做长滚动） */
  .origingal{grid-template-columns:1fr 1fr;gap:14px 12px;margin-top:24px;}
  .origingal figcaption{font-size:11.5px;letter-spacing:.04em;}
  .fgrid{gap:28px;}
}