/* ==========================================================================
   老牛 · 第二经营部  ·  官网视觉系统 v3
   --------------------------------------------------------------------------
   方向：把「个人履历页」改成「一间有门面的铺子」。
         宣纸的底 / 墨的字 / 一方朱印 / 一张茶席 / 一句手写批注。

   与旧版的区别（一句话）：
     旧版靠留白和衬线排版撑气质；新版靠**材质**和**具体的物**撑气质 ——
     纸的厚度、茶席的实拍、印章的重量、批注的手感。

   【变量名刻意沿用旧版】--paper/--ink/--rust/--line/--radius/--shadow/--sans/--serif
     27 个页面的 <style> 里散落着 var(--rust) 一类引用；沿用名字，
     这些页内样式会自动跟着换皮，不用逐页去改。

   【本文件是全站唯一的样式层】PC 与手机都在这里，旧 style.css / mobile.css
     不再被任何页面引用（文件留在盘上，供回滚）。

   【手机端必须保留的功能点】（移植自 mobile.css v2，一条都不能丢）
     · 顶栏 54px + 滚动后右侧淡入「当前页名」(.m-page)
     · 本页目录条 (.m-toc / .m-toc-panel / .m-scrim)，由 main.js 现场生成
     · 底部 dock (.mtabbar) + 牛印行动钮 (.m-cta)，下滚收起 m-dock-hide
     · 弹窗与抽屉都改成「底部面板」（下沿起、上圆角、带抓手）
     · 块级可点 <44px = 0；承载内容的文字 ≥12px
     · 首页首屏顺序重排（定位句提到十问之前），靠 order 不靠改 DOM
     · 极窄屏 ≤350px 退回单列、横屏面板加高、prefers-reduced-motion 降级
   ========================================================================== */

/* ==========================================================================
   1. 令牌
   ========================================================================== */
:root {
  /* —— 纸：宣纸的三种厚度。底比旧版暖半档，衬托茶席的黄 —— */
  --paper:      #FAF7F0;
  --paper-2:    #F3EDE1;
  --paper-3:    #EAE1D0;
  --card:       #FFFFFF;

  /* —— 墨：五档明度 —— */
  --ink:        #16150E;
  --ink-1:      #2A2720;
  --ink-2:      #4B463B;
  --ink-3:      #66604F;
  --ink-4:      #8F8878;

  /* —— 线：纸上的折痕，不是框 —— */
  --line:       #E5DECE;
  --line-2:     #D2C7B0;
  --line-dark:  rgba(250, 247, 240, .16);

  /* —— 朱：全站唯一强色。牛印、主按钮、当前页。 —— */
  --rust:       #A63A1E;
  --rust-deep:  #7F2B12;
  --rust-soft:  #C96348;
  /* 深墨绿底上的朱色：rust-soft 在 jade 上只有 3.45:1 */
  --rust-on-dark: #D98B70;
  /* 深墨绿/墨黑底上的茶金（keyman 气泡 b 实测 --gold 只有 3.72:1）*/
  --gold-on-dark: #D8A96F;
  --rust-wash:  #FBEEE8;

  /* —— 墨绿：深色区块（页脚、茶馆条、结尾号召）—— */
  --jade:       #2B3026;
  --jade-2:     #3B4133;
  --jade-wash:  #EDEFE7;

  /* —— 茶褐：次要强调，比朱轻、比墨暖 —— */
  --tea:        #7E6139;
  --tea-wash:   #F7F0E3;

  /* 旧名兼容：页内 <style> 仍在用的 --gold / --green 系列 */
  --gold:       #8A6B43;
  --gold-wash:  #F7F0E3;
  --green:      #2B3026;
  --green-wash: #EDEFE7;

  /* —— 尺度 —— */
  --radius-s:   3px;
  --radius:     6px;
  --radius-l:   12px;
  --shadow-s:   0 1px 2px rgba(22, 21, 14, .04);
  --shadow:     0 1px 3px rgba(22, 21, 14, .05), 0 10px 26px rgba(22, 21, 14, .06);
  --shadow-l:   0 2px 6px rgba(22, 21, 14, .06), 0 22px 54px rgba(22, 21, 14, .10);

  /* —— 字 ——
     正文无衬线，标题宋体，批注楷体。
     楷体只在「像人写的」地方出现：手写批注、落款、印章边的短句。
     它一多就假，所以用量controlled —— 全站不超过 5 处。 */
  --sans: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
          "Microsoft YaHei UI", "Microsoft YaHei", "Hiragino Sans GB",
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong",
           "SimSun", Georgia, "Times New Roman", serif;
  --hand: "Kaiti SC", "STKaiti", "KaiTi", "楷体", "Source Han Serif SC",
          "Noto Serif SC", "Songti SC", serif;

  --nav-h: 76px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   2. 基础
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-1);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: .012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: break-word;
  word-break: normal;
}

/* 纸纹：比旧版更细更淡。旧版 28px 网点在 2x 屏上看得出颗粒，
   新版收到 22px 并把透明度压到 .22 —— 只剩"手摸过"的感觉。 */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: .22;
  background-image:
    radial-gradient(rgba(22, 21, 14, .05) 1px, transparent 1px),
    radial-gradient(rgba(22, 21, 14, .035) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
  background-position: 0 0, 11px 11px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .22s var(--ease); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

::selection { background: var(--rust); color: #fff; }

:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
.wrap-narrow { max-width: 800px; }
.center { text-align: center; }

/* ==========================================================================
   3. 排版
   ========================================================================== */
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: -.01em; line-height: 1.28; }

/* 大标：宋体。这是新版气质的第一处开关 ——
   同一句话，无衬线是"说明"，宋体是"题字"。 */
.display {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.6vw, 3.35rem);
  line-height: 1.24;
  letter-spacing: -.005em;
  font-weight: 700;
}

.h2 {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.9vw, 2.15rem);
  line-height: 1.36;
  letter-spacing: -.005em;
  font-weight: 700;
}

.h3 { font-size: clamp(1.12rem, 1.9vw, 1.34rem); line-height: 1.55; }
.h4 { font-size: 1.04rem; line-height: 1.6; }

.serif { font-family: var(--serif); font-weight: 600; letter-spacing: .01em; }

.lead {
  font-size: clamp(.98rem, 1.4vw, 1.1rem);
  color: var(--ink-2);
  line-height: 1.85;
}

.tiny { font-size: .8rem; line-height: 1.7; color: var(--ink-3); }
.small { font-size: .88rem; }
.muted { color: var(--ink-3); }
.rust { color: var(--rust); }
.hl { background: linear-gradient(transparent 62%, var(--rust-wash) 62%); }

/* 栏目序号标签：改成朱色小字 + 前置短横，比全大写更静。 */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  color: var(--rust); text-transform: none;
}
.eyebrow::before {
  content: ""; width: 16px; height: 1px; background: currentColor; opacity: .55;
}

/* 章节头 */
.sec-head { margin-bottom: 34px; }
.sec-head .h2 { margin-top: 12px; }
.sec-head .h2 + .lead { margin-top: 14px; max-width: 640px; }
.sec-head.center { text-align: center; }
.sec-head.center .lead { margin-left: auto; margin-right: auto; }

/* 引文：宋体 + 左侧无竖线（竖线太常见），改用**上方一道朱色短横**。 */
.quote {
  margin: 0; font-family: var(--serif);
  font-size: clamp(1.06rem, 1.9vw, 1.24rem);
  line-height: 1.82; color: var(--ink); font-weight: 600;
}
.quote::before {
  content: ""; display: block; width: 30px; height: 3px;
  background: var(--rust); margin-bottom: 18px; border-radius: 2px;
}

/* 文字链接 */
.link-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .88rem; font-weight: 600; color: var(--rust);
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: border-color .22s var(--ease), gap .22s var(--ease);
}
.link-more:hover { border-bottom-color: var(--rust); gap: 10px; }

/* ==========================================================================
   4. 按钮
   参考图里按钮是**小圆角矩形**（不是药丸）：纸上有分量的实心块，
   像盖上去的，不像贴上去的。
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--radius-s);
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  letter-spacing: .02em; text-align: center; cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .16s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn .arrow { transition: transform .22s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary {
  background: var(--rust); color: #FDFAF5; border-color: var(--rust);
  box-shadow: 0 1px 2px rgba(127, 43, 18, .18);
}
.btn-primary:hover { background: var(--rust-deep); border-color: var(--rust-deep); color: #fff; }
.btn-primary:active { transform: translateY(1px); }

.btn-ghost {
  background: transparent; color: var(--ink-1); border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--ink-1); color: var(--ink); }

/* 深色块上的描边按钮 */
.btn-line-light {
  background: transparent; color: var(--paper);
  border-color: rgba(250, 247, 240, .34);
}
.btn-line-light:hover { background: rgba(250, 247, 240, .1); border-color: rgba(250, 247, 240, .6); }

.btn-sm { min-height: 40px; padding: 0 17px; font-size: .88rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ==========================================================================
   5. 区块底色
   .alt = 深一档的纸；.ink = 墨绿；.tight = 收一半节奏
   ========================================================================== */
.section { padding: 88px 0; }
.section.tight { padding: 54px 0; }
.section.alt { background: var(--paper-2); }
.section.ink { background: var(--jade); color: rgba(250, 247, 240, .82); }
.section.ink h1, .section.ink h2, .section.ink h3, .section.ink h4 { color: var(--paper); }
.section.ink .lead { color: rgba(250, 247, 240, .72); }
.section.ink .eyebrow { color: var(--rust-on-dark); }
.section.ink .quote { color: var(--paper); }
/* 深色区块里的浅色卡片：卡内文字必须回到深墨色。
   否则继承区块的 rgba(250,247,240,.82) → 白底白字（about.html #ai 实测）。 */
.section.ink .tri-item, .section.ink .svc, .section.ink .stage,
.section.ink .tea-item, .section.ink .post, .section.ink .side-card,
.section.ink .form-card, .section.ink .cmp, .section.ink .bubble,
.section.ink .doc-deliver { color: var(--ink-2); }
.section.ink .tri-item b, .section.ink .tri-item h4,
.section.ink .svc h3, .section.ink .stage h4,
.section.ink .tea-item h4, .section.ink .post h4 { color: var(--ink); }

/* ==========================================================================
   6. 首屏 Hero
   参考图的 hero 是一次**立场声明**：左边十问（老板的问题）占 1/3，
   右边一张茶席（老牛的场）占 1/3，中间是那句话。
   视觉重心刻意压在**右侧的实拍**上 —— 这是全站唯一一张真实照片，
   它承担"这个人真在做事"的全部举证责任。
   ========================================================================== */
.hero {
  padding: 48px 0 0;
  position: relative;
  overflow: hidden;
}
/* 右上角一片极淡的暖光，让纸"被照到"而不是平涂。 */
.hero::after {
  content: "";
  position: absolute; right: -14%; top: -34%;
  width: 62%; padding-bottom: 62%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138, 107, 67, .1), rgba(138, 107, 67, 0) 66%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  gap: 60px;
  align-items: start;
}

.hero h1.display { margin: 0; }
.hero h1.display em { font-style: normal; color: var(--rust); }

.hero-sub {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 20px;
}
.hero-sub em {
  font-style: normal; font-family: var(--serif);
  font-size: 1.02rem; font-weight: 600; color: var(--ink);
}
.hero-sub em + em::before {
  content: "·"; margin-right: 12px; color: var(--ink-4); font-weight: 400;
}

.hero-desc {
  margin: 18px 0 0; max-width: 560px;
  font-size: 1rem; line-height: 1.88; color: var(--ink-2);
}

.hero .btn-row { margin-top: 30px; }

/* —— 十问清单：首页真正的入口 ——
   旧版是"序号 + 文字"两列纯文本，视觉上像目录页码；
   新版每一行是一个**完整的问题条目**：图标 / 问题 / 分类 / 箭头。
   chip（分类）是关键 —— 老板扫十行，先认出"哪一类是我的事"。 */
.hero-asks { margin-top: 38px; }
.hero-asks-head {
  display: flex; align-items: center; gap: 12px;
  font-size: .84rem; font-weight: 700; letter-spacing: .14em;
  color: var(--ink-3); margin-bottom: 6px;
}
.hero-asks-head::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}

.hero-asks-list { display: grid; grid-template-columns: 1fr 1fr; }

.hero-asks-list a {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto 12px;
  align-items: center; gap: 9px;
  padding: 14px 8px 14px 2px;
  border-bottom: 1px solid var(--line);
  font-size: .94rem; line-height: 1.5; color: var(--ink-1);
  transition: background .2s var(--ease), padding-left .2s var(--ease), color .2s var(--ease);
}
.hero-asks-list a:hover {
  background: rgba(166, 58, 30, .035);
  padding-left: 8px; color: var(--ink);
}
.hero-asks-list a:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }

.hero-asks-list .qa-ico {
  width: 20px; height: 20px; color: var(--ink-4);
  transition: color .2s var(--ease);
}
.hero-asks-list a:hover .qa-ico { color: var(--rust); }

.hero-asks-list .qa-t {
  min-width: 0; font-size: .9rem;
  /* 十问是首页入口，必须完整可读：不截断，允许折到第二行 */
}
/* 分类 chip：纸色底 + 茶褐字。它在十行里是"归类"的锚点，
   所以对比度要够，但不能抢过问题本身。 */
.hero-asks-list .qa-cat {
  flex: 0 0 auto;
  padding: 2px 9px; border-radius: 3px;
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  color: var(--tea); white-space: nowrap;
}
.hero-asks-list .arrow {
  color: var(--ink-4); font-size: .9rem; opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.hero-asks-list a:hover .arrow { opacity: 1; transform: none; color: var(--rust); }

/* 旧版的 .no 序号：新版不用，但保留极简定义防旧页面引用时塌掉 */
.hero-asks-list .no {
  font-family: var(--serif); font-size: .74rem; letter-spacing: .1em;
  color: var(--rust); flex-shrink: 0;
}

/* —— hero 右侧：茶席 —— */
.portrait {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  /* 3:4 竖构图，与茶席实拍的留白呼应 */
  aspect-ratio: 4 / 3.4;
  box-shadow: var(--shadow-l);
}
.portrait-inner { width: 100%; height: 100%; }
.portrait-inner img { width: 100%; height: 100%; object-fit: cover; }
.portrait-silhouette {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 120px; height: 120px; opacity: .5;
}
/* 占位态（后台上传照片前）：纸色 + 虚线 */
.portrait-inner:not(:has(img)) {
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 9px, rgba(22,21,14,.022) 9px 18px),
    var(--paper-2);
}

/* 手写批注：叠在茶席的留白处。这是全站的签名元素 ——
   像老牛在照片上随手写了一句话。只在 hero 与茶馆页出现。 */
.hand-note {
  position: absolute; left: 8%; top: 12%;
  max-width: 62%;
  font-family: var(--hand);
  font-size: clamp(1.1rem, 1.9vw, 1.42rem);
  line-height: 1.65; color: var(--ink-1);
  letter-spacing: .06em;
  text-shadow: 0 1px 12px rgba(250, 247, 240, .8);
  pointer-events: none;
}
.hand-note b { font-weight: 400; display: block; }

/* 朱印：叠在图上。全站只有三处用印（顶栏 logo、hero、手机行动钮）。 */
.seal {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; line-height: 1;
  color: #FDFAF5; background: var(--rust);
  border-radius: 4px;
}

.portrait .seal-mark {
  position: absolute; right: 18px; bottom: 18px;
  width: 46px; height: 46px; font-size: 1.42rem;
  border-radius: 6px;
  box-shadow: 0 3px 14px rgba(127, 43, 18, .3);
}

/* 人物落款（占位态时用；有实拍图后可保留） */
.portrait-tag {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 18px 16px;
  background: linear-gradient(to top, rgba(22, 21, 14, .72), rgba(22, 21, 14, 0));
  color: var(--paper);
  display: flex; align-items: baseline; gap: 10px;
}
.portrait-tag b { font-family: var(--serif); font-size: 1.06rem; }
.portrait-tag > span { font-size: .78rem; color: rgba(250, 247, 240, .72); }

/* 首页用的竖向人像位（保留断言：aspect-ratio 由内联 style 给） */
.hero-strip {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.hero-strip .item {
  flex: 1 1 0; min-width: 96px;
  padding-right: 16px;
}
.hero-strip .item b {
  display: block; font-family: var(--serif);
  font-size: 1.28rem; color: var(--ink); line-height: 1.3;
}
.hero-strip .item b i { font-style: normal; font-size: .82rem; color: var(--ink-3); }
.hero-strip .item > span {
  display: block; margin-top: 3px;
  font-size: .78rem; line-height: 1.5; color: var(--ink-3);
}
/* 属性选择器兜底：旧标记里数据条的文字在 <span> 上，无 class */
.hero-strip .item span:only-child { font-size: .78rem; }

/* ==========================================================================
   7. 深色横条 / 茶馆条
   参考图里 hero 下面那条"到财王爷茶馆，喝杯茶，把事情聊一聊。"
   它是一条**低矮的分隔带**，作用是让首屏有个自然的落点。
   ========================================================================== */
.tea-band {
  background: var(--jade);
  color: rgba(250, 247, 240, .86);
  padding: 26px 0;
}
.tea-band-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px 28px; justify-content: space-between;
}
.tea-band p {
  margin: 0; font-family: var(--serif);
  font-size: clamp(1.04rem, 1.7vw, 1.24rem); font-weight: 600;
  color: var(--paper); line-height: 1.6;
}
.tea-band .hand-note-static {
  font-family: var(--hand); font-size: .96rem;
  color: rgba(250, 247, 240, .6); letter-spacing: .06em;
}
.tea-band .btn { flex: 0 0 auto; }

/* 底部大茶馆条（含实拍背景） */
.tea-banner {
  position: relative;
  background: var(--jade);
  color: rgba(250, 247, 240, .84);
  padding: 68px 0;
  overflow: hidden;
}
.tea-banner-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 62%;
  opacity: .3;
  pointer-events: none;
}
.tea-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--jade) 12%, rgba(43, 48, 38, .86) 46%, rgba(43, 48, 38, .5));
  pointer-events: none;
}
.tea-banner-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px 48px; align-items: center;
}
.tea-banner h2 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--paper); line-height: 1.44; margin: 0;
}
.tea-banner p { margin: 14px 0 0; font-size: .96rem; color: rgba(250, 247, 240, .7); }
.tea-banner .hand-note-static {
  font-family: var(--hand); font-size: 1rem;
  color: rgba(250, 247, 240, .58); letter-spacing: .07em;
}
.tea-banner-facts {
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--line-dark);
}
.tea-banner-facts .f { display: flex; flex-direction: column; gap: 4px; }
.tea-banner-facts .f span {
  font-size: .78rem; letter-spacing: .12em;
  color: rgba(250, 247, 240, .62);
}
.tea-banner-facts .f b {
  font-family: var(--serif); font-size: 1.06rem;
  color: var(--paper); font-weight: 600;
}
.tea-banner-facts .f a { color: var(--paper); }
.tea-banner .btn-row { margin-top: 26px; }

/* ==========================================================================
   8. 顶栏
   参考图的顶栏是一张纸的**上边缘**：没有色块、没有阴影，只有一条线。
   品牌靠一方朱印立住，导航安静地靠右 —— 主角是下面那张照片。
   ========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 247, 240, .9);
  -webkit-backdrop-filter: saturate(165%) blur(14px);
  backdrop-filter: saturate(165%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .24s var(--ease), box-shadow .24s var(--ease);
}
.topbar.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 18px rgba(22, 21, 14, .055);
}

.topbar-inner {
  display: flex; align-items: center; gap: 22px;
  height: var(--nav-h);
}

/* 品牌：朱印 + 双行字 */
.logo { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 5px;
  background: var(--rust); color: #FDFAF5;
  font-family: var(--serif); font-size: 1.16rem; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(127, 43, 18, .26);
  flex: 0 0 auto;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-text b {
  font-family: var(--serif); font-size: 1.02rem; font-weight: 700;
  color: var(--ink); letter-spacing: .01em; white-space: nowrap;
}
.logo-text > span {
  font-size: .66rem; letter-spacing: .09em; color: var(--ink-3);
  margin-top: 3px; white-space: nowrap;
}

/* 导航：右对齐，当前页用朱色 + 一道短横 */
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a {
  position: relative; padding: 9px 13px;
  font-size: .95rem; color: var(--ink-2); white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px;
  height: 2px; background: var(--rust); border-radius: 1px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .24s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: none; }
.nav a.active { color: var(--rust); font-weight: 600; }
.nav a.active::after { transform: none; }

.topbar .btn { flex: 0 0 auto; }

/* 汉堡：只在手机上出现 */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  margin-left: auto;
}
.burger span {
  display: block; width: 20px; height: 1.6px;
  background: var(--ink-1); border-radius: 2px;
  transition: transform .26s var(--ease), opacity .2s var(--ease);
}
.burger.open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* 抽屉（PC：右侧滑出。手机上在响应式段改写成底部面板） */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(340px, 84vw);
  padding: 96px 30px 34px;
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 48px rgba(22, 21, 14, .14);
  transform: translateX(100%);
  transition: transform .34s var(--ease);
  overflow-y: auto;
}
.drawer.open { transform: none; }
.drawer a {
  display: flex; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: 1rem; color: var(--ink-1);
}
.drawer a:hover, .drawer a.active { color: var(--rust); }
.drawer .btn { margin-top: 22px; width: 100%; }

/* 右侧固定 CTA：新版从简，收起（入口在顶栏、首屏、页尾各有一处）。
   要恢复的话，把下面这条删掉即可。 */
.float-cta { display: none !important; }

/* ==========================================================================
   9. 内页首屏 / 面包屑 / 副导航
   ========================================================================== */
.page-hero { padding: 44px 0; position: relative; }
.page-hero .h1,
.page-hero h1.display {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-size: clamp(1.72rem, 3.5vw, 2.5rem);
  line-height: 1.36; letter-spacing: -.005em;
}
.page-hero .lead { margin-top: 18px; max-width: 720px; }
.page-hero .btn-row { margin-top: 28px; }

.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin-bottom: 16px;
  font-size: .8rem; color: var(--ink-3);
}
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--rust); }
.crumb i { font-style: normal; color: var(--ink-3); }
.crumb b { color: var(--ink-2); font-weight: 600; }
.crumb > span { color: var(--ink-2); }

/* 副导航：一条纸边下的目录。吸顶，随滚动高亮当前节 */
.subnav {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: rgba(250, 247, 240, .94);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.subnav-inner {
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a {
  position: relative; flex: 0 0 auto;
  padding: 15px 14px; font-size: .88rem; color: var(--ink-3);
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.subnav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 2px; background: var(--rust);
  transform: scaleX(0); transform-origin: left;
  transition: transform .24s var(--ease);
}
.subnav a:hover { color: var(--ink); }
.subnav a.on { color: var(--rust); font-weight: 600; }
.subnav a.on::after { transform: none; }

/* ==========================================================================
   10. 卡片与网格
   统一语言：白纸 + 一道发丝边框 + 悬停时边框加深并抬起 2px。
   不用阴影堆叠 —— 纸叠纸靠的是"边缘"，不是"影子"。
   ========================================================================== */
.card-grid { display: grid; gap: 18px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

/* 分类卡（执行资源八入口 / 首页具体业务项目） */
.cat {
  display: flex; flex-direction: column;
  padding: 24px 22px 20px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}
.cat:hover { border-color: var(--line-2); transform: translateY(-2px); }
.cat-ico {
  width: 38px; height: 38px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rust-wash); color: var(--rust);
  margin-bottom: 15px; flex: 0 0 auto;
}
.cat-ico svg { width: 19px; height: 19px; }
.cat h4 { font-family: var(--serif); font-size: 1.06rem; margin-bottom: 11px; }
.cat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.cat li {
  position: relative; padding-left: 13px;
  font-size: .84rem; line-height: 1.7; color: var(--ink-3);
}
.cat li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--line-2);
}
.cat .go, .cat-go {
  margin-top: auto; padding-top: 14px;
  font-size: .82rem; font-weight: 600; color: var(--rust);
  display: flex; align-items: center; gap: 5px;
  transition: gap .22s var(--ease);
}
.cat:hover .go { gap: 9px; }

/* 场景卡 */
.scene {
  position: relative;
  padding: 26px 24px 22px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}
.scene:hover { border-color: var(--line-2); transform: translateY(-2px); }
.scene-no {
  display: block; margin-bottom: 10px;
  font-family: var(--serif); font-size: .78rem; letter-spacing: .16em;
  color: var(--rust);
}
.scene h4 { font-family: var(--serif); font-size: 1.04rem; margin-bottom: 9px; }
.scene p { margin: 0; font-size: .88rem; line-height: 1.8; color: var(--ink-2); }

/* 支柱 */
.pillar {
  padding: 28px 24px;
  background: var(--paper-2); border-radius: var(--radius);
  border: 1px solid transparent;
}
.pillar h4 { font-family: var(--serif); font-size: 1.08rem; margin-bottom: 10px; }
.pillar p { margin: 0; font-size: .89rem; line-height: 1.82; color: var(--ink-2); }

/* 提示条：留"左侧一道朱线"这个有效结构，底色换纸 */
.note {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 22px;
  background: var(--paper-2);
  border-left: 3px solid var(--rust);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .89rem; line-height: 1.8; color: var(--ink-2);
}
.note b { color: var(--ink); font-weight: 600; }
.note svg { flex: 0 0 auto; color: var(--rust); margin-top: 3px; }

/* 电话提示条（contact 侧栏） */
.note-call {
  padding: 18px 20px;
  background: var(--jade-wash);
  border-left: 3px solid var(--jade);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.note-call .phone-link {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 700;
  color: var(--jade); letter-spacing: .01em;
}
.note-call svg { color: var(--jade); }

/* 两栏内容 */
.two-col {
  display: grid; grid-template-columns: minmax(0, 1fr) 316px;
  gap: 52px; align-items: start;
}
.two-col.wide-side { grid-template-columns: minmax(0, 1fr) 380px; }
.sticky-side { position: sticky; top: calc(var(--nav-h) + 28px); }

.side-card {
  padding: 24px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.side-card + .side-card { margin-top: 18px; }
.side-card h4 { font-family: var(--serif); font-size: 1rem; margin-bottom: 10px; }
.side-card p { margin: 0 0 12px; font-size: .86rem; line-height: 1.75; color: var(--ink-2); }

/* ==========================================================================
   11. 文档体（问答题 / 长文说明）
   ========================================================================== */
.doc { font-size: 1rem; }
.doc-wrap { max-width: 800px; }

.doc-sec { padding: 30px 0; border-top: 1px solid var(--line); }
.doc-sec:first-child { border-top: 0; padding-top: 0; }
.doc-sec[id] { scroll-margin-top: 100px; }
.doc-no {
  display: block; margin-bottom: 12px;
  font-family: var(--serif); font-size: .84rem; letter-spacing: .16em;
  color: var(--rust);
}
.doc h2 {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.005em;
  font-size: clamp(1.22rem, 2.3vw, 1.56rem); line-height: 1.5;
  color: var(--ink); margin: 0 0 15px;
}
.doc h3 { font-family: var(--serif); font-size: 1.12rem; margin: 26px 0 10px; color: var(--ink); }
.doc p { font-size: 1rem; line-height: 1.9; color: var(--ink-2); margin: 0 0 14px; }
.doc p:last-child { margin-bottom: 0; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--rust); border-bottom: 1px solid var(--rust-wash); }
.doc a:hover { border-bottom-color: var(--rust); }

.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.doc-list li {
  position: relative; padding-left: 21px;
  font-size: 1rem; line-height: 1.78; color: var(--ink-2);
}
.doc-list li::before {
  content: ""; position: absolute; left: 2px; top: .76em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--rust); opacity: .5;
}

/* 编号列表：宋体序号 + 发丝线 */
.doc-num { counter-reset: dn; list-style: none; margin: 0; padding: 0; }
.doc-num li {
  counter-increment: dn; position: relative;
  padding: 13px 0 13px 46px;
  border-top: 1px solid var(--line);
  font-size: 1rem; line-height: 1.7; color: var(--ink);
}
.doc-num li:first-child { border-top: 0; }
.doc-num li::before {
  content: counter(dn, decimal-leading-zero);
  position: absolute; left: 0; top: 13px;
  font-family: var(--serif); font-size: .86rem; font-weight: 700;
  letter-spacing: .06em; color: var(--rust);
}

/* 客户原话 */
.doc-say {
  margin: 0; padding: 20px 24px;
  background: var(--paper-2);
  border-left: 3px solid var(--rust);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--serif); font-size: clamp(1.04rem, 1.9vw, 1.2rem);
  line-height: 1.78; color: var(--ink); font-weight: 600;
}

/* 交付物 */
.doc-deliver {
  margin: 8px 0 0; padding: 24px 26px;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--radius);
}
.doc-deliver > b {
  display: block; font-family: var(--serif); font-size: 1.14rem;
  color: var(--ink); margin-bottom: 5px;
}
.doc-deliver > span { display: block; font-size: .84rem; color: var(--ink-3); margin-bottom: 6px; }

.doc-quotes { display: grid; gap: 10px; margin: 6px 0 0; }
.doc-quotes span { font-family: var(--serif); font-size: 1.02rem; line-height: 1.75; color: var(--ink); }
.doc-kicker {
  font-family: var(--serif); font-size: clamp(1.06rem, 2vw, 1.28rem);
  line-height: 1.78; color: var(--ink); font-weight: 600;
}

.doc-others { display: grid; }
.doc-others a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 2px; border-bottom: 1px solid var(--line);
  font-size: .96rem; color: var(--ink-2);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.doc-others a:hover { color: var(--rust); padding-left: 8px; }
.doc-others a .no {
  font-family: var(--serif); font-size: .8rem; letter-spacing: .1em;
  color: var(--rust); flex-shrink: 0;
}
.doc-others a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.doc-others a[aria-current="page"] .no { color: var(--ink); }

/* ==========================================================================
   12. 服务页组件
   ========================================================================== */
.svc {
  padding: 28px 26px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}
.svc:hover { border-color: var(--line-2); transform: translateY(-2px); }
.svc-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.svc-head h3 { font-family: var(--serif); font-size: 1.16rem; margin: 0; }
.svc-tag {
  padding: 2px 9px; border-radius: 3px;
  background: var(--tea-wash); border: 1px solid var(--line);
  font-size: .72rem; font-weight: 600; color: var(--tea);
}
.svc-body { font-size: .9rem; line-height: 1.82; color: var(--ink-2); }
.svc-body p { margin: 0 0 12px; }
.svc-body p:last-child { margin-bottom: 0; }
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.svc-list li {
  position: relative; padding-left: 20px;
  font-size: .88rem; line-height: 1.74; color: var(--ink-2);
}
.svc-list li::before {
  content: ""; position: absolute; left: 2px; top: .74em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--rust); opacity: .5;
}
.svc-foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 10px; }
.svc-value {
  display: flex; align-items: baseline; gap: 8px;
  padding-top: 14px; margin-top: auto;
  border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--ink-3);
}
.svc-value b { font-family: var(--serif); font-size: 1rem; color: var(--ink); }

.stage { padding: 24px 22px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
.stage-no { display: block; font-family: var(--serif); font-size: .78rem; letter-spacing: .16em; color: var(--rust); margin-bottom: 9px; }
.stage-grid { display: grid; gap: 16px; }
.stage-note { margin-top: 10px; font-size: .84rem; color: var(--ink-3); }
.to { color: var(--ink-3); }

.tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tri-item {
  padding: 24px 22px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.tri-item h4 { font-family: var(--serif); font-size: 1.04rem; margin-bottom: 10px; }
.tri-role {
  display: inline-block; margin-bottom: 10px; padding: 2px 9px;
  border-radius: 3px; background: var(--paper-2); border: 1px solid var(--line);
  font-size: .72rem; font-weight: 600; color: var(--tea);
}

.qa { margin-top: 8px; }
.q { font-family: var(--serif); font-size: 1.08rem; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.a { font-size: .96rem; line-height: 1.85; color: var(--ink-2); margin: 0 0 24px; }
.block-question {
  padding: 26px 26px 18px;
  background: var(--paper-2); border-radius: var(--radius);
  border-left: 3px solid var(--rust);
}

.bubble { display: flex; gap: 13px; align-items: flex-start; padding: 15px 0; }
.bubble.you { flex-direction: row-reverse; }
.bubble-av {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-3); color: var(--ink-2);
  font-family: var(--serif); font-size: .88rem; font-weight: 700;
}
.bubble.boss .bubble-av { background: var(--rust); color: #FDFAF5; }
.bubble-txt {
  max-width: 76%; padding: 13px 17px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 2px 10px 10px 10px;
  font-size: .93rem; line-height: 1.8; color: var(--ink-1);
}
.bubble.you .bubble-txt { border-radius: 10px 2px 10px 10px; background: var(--jade-wash); border-color: transparent; }

.case-item { padding: 24px 0; border-top: 1px solid var(--line); }
.case-item:first-child { border-top: 0; padding-top: 0; }
.case-line { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 9px 0; font-size: .88rem; color: var(--ink-2); }
.case-line b { font-family: var(--serif); color: var(--ink); font-weight: 600; min-width: 72px; }

.num-list { counter-reset: nl; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.num-list li {
  counter-increment: nl; position: relative; padding: 14px 0 14px 44px;
  border-top: 1px solid var(--line);
  font-size: .96rem; line-height: 1.78; color: var(--ink-2);
}
.num-list li:first-child { border-top: 0; }
.num-list li::before {
  content: counter(nl, decimal-leading-zero);
  position: absolute; left: 0; top: 14px;
  font-family: var(--serif); font-size: .84rem; font-weight: 700; color: var(--rust);
}

.cmp-wrap { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cmp th, .cmp td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp th { font-family: var(--serif); font-size: .9rem; color: var(--ink); background: var(--paper-2); font-weight: 700; }
.cmp td { color: var(--ink-2); vertical-align: top; }
.cmp tr:last-child td { border-bottom: 0; }

.split-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.split-table th, .split-table td { padding: 13px 16px; border: 1px solid var(--line); text-align: left; }
.split-table th { background: var(--paper-2); font-weight: 700; font-family: var(--serif); }
.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tag-cloud span {
  padding: 5px 13px; border-radius: 3px;
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: .82rem; color: var(--ink-2);
}

.contact-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line); }
.contact-item:first-child { border-top: 0; }
.contact-ico {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rust-wash); color: var(--rust);
}
.contact-item b { display: block; font-family: var(--serif); font-size: 1.04rem; color: var(--ink); }
.contact-item span { font-size: .86rem; color: var(--ink-3); }

.qr {
  position: relative; width: 160px; height: 160px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.qr img { width: 100%; height: 100%; object-fit: contain; }
.qr-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: .72rem; line-height: 1.5;
  color: var(--ink-3); background: var(--paper-2);
}
.qr img + .qr-hint { display: none; }
.qr-sm { width: 104px; height: 104px; }
.qr-lg { width: 200px; height: 200px; }
.qr-block { margin-top: 18px; }
.qr-tip { font-size: .82rem; color: var(--ink-3); }

/* ==========================================================================
   13. 表单
   ========================================================================== */
.field { display: flex; flex-direction: column; margin-bottom: 15px; }
.field label {
  font-size: .82rem; font-weight: 600; color: var(--ink-2);
  margin-bottom: 7px; letter-spacing: .02em;
}
.field .req { color: var(--rust); margin-left: 3px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px;
  background: var(--card); color: var(--ink-1);
  border: 1px solid var(--line-2); border-radius: var(--radius-s);
  font-size: .94rem; line-height: 1.6;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0; border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(166, 58, 30, .1);
}
.field textarea { min-height: 104px; resize: vertical; }
.field-error { margin: 7px 0 0; font-size: .8rem; line-height: 1.6; color: var(--rust); }
.hint { margin: 7px 0 0; font-size: .8rem; color: var(--ink-3); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.form-foot .tiny { flex: 1 1 200px; }

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: block; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  font-size: .84rem; line-height: 1.5; color: var(--ink-2);
  text-align: center;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.choice input:checked + span {
  border-color: var(--rust); background: var(--rust-wash);
  color: var(--rust-deep); font-weight: 600;
}

.form-card {
  padding: 30px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.form-status { margin: 14px 0 0; font-size: .88rem; line-height: 1.7; }
.form-status.err { color: var(--rust); }
.form-status.ok { color: var(--jade); }

.toast {
  position: fixed; left: 50%; bottom: 40px; z-index: 200;
  transform: translate(-50%, 12px);
  padding: 13px 24px; border-radius: var(--radius);
  background: var(--jade); color: var(--paper);
  font-size: .9rem; box-shadow: var(--shadow-l);
  opacity: 0; pointer-events: none;
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   14. 咨询弹窗
   ========================================================================== */
.modal {
  position: fixed; inset: 0; z-index: 120;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(22, 21, 14, .52);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal.open { display: flex; }
.modal-box {
  position: relative;
  width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto;
  padding: 36px 38px 30px;
  background: var(--paper);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  animation: modalIn .3s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.modal-box h3 {
  font-family: var(--serif); font-size: 1.42rem; margin: 0 0 8px;
  color: var(--ink); padding-right: 60px;
}
.modal-box > p { margin: 0 0 20px; font-size: .92rem; color: var(--ink-3); }
.modal-close {
  position: absolute; right: 14px; top: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1; color: var(--ink-3);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.modal-close:hover { background: var(--paper-3); color: var(--ink); }

.m-phone-row { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; }
.m-phone-row svg { flex: 0 0 auto; color: var(--rust); }
.phone-link {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 700;
  color: var(--rust); letter-spacing: .01em;
}

.modal-qr {
  display: flex; align-items: center; gap: 18px;
  margin-top: 22px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.modal-qr-text b { display: block; font-size: .92rem; color: var(--ink); margin-bottom: 5px; }
.modal-qr-text span { font-size: .82rem; line-height: 1.7; color: var(--ink-3); }
.q-break { display: none; }

/* ==========================================================================
   15. 页脚
   从"浅色四列"改成**墨绿底**：整站最后落在深色上，像合上一本册子。
   ========================================================================== */
.footer {
  background: var(--jade);
  color: rgba(250, 247, 240, .74);
  padding: 62px 0 26px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px; padding-bottom: 38px;
  border-bottom: 1px solid var(--line-dark);
}
.footer .logo { gap: 11px; }
.footer .logo-mark { background: var(--rust); }
.footer .logo-text b { color: var(--paper); }
.footer .logo-text > span { color: rgba(250, 247, 240, .42); }
.footer .slogan { margin: 18px 0 0; font-family: var(--serif); font-size: 1.04rem; color: var(--paper); }
.footer h4 { font-family: var(--serif); font-size: .96rem; color: var(--paper); margin: 0 0 16px; letter-spacing: .03em; }
.footer-grid a {
  display: block; padding: 6px 0;
  font-size: .88rem; color: rgba(250, 247, 240, .66);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.footer-grid a:hover { color: var(--paper); padding-left: 4px; }
.footer .tiny { color: rgba(250, 247, 240, .5); }

.footer-contact {
  display: flex; flex-wrap: wrap; gap: 26px 54px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line-dark);
}
.fc-item { display: flex; flex-direction: column; gap: 5px; }
.fc-label { font-size: .74rem; letter-spacing: .14em; color: rgba(250, 247, 240, .45); }
.fc-item b { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; color: var(--paper); }
a.fc-item:hover b { color: var(--rust-soft); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  padding-top: 22px;
  font-size: .78rem; color: rgba(250, 247, 240, .44);
}
.footer-bottom a { color: rgba(250, 247, 240, .54); }
.footer-bottom a:hover { color: var(--paper); }
.footer-icp { margin-left: auto; }

/* ==========================================================================
   16. 工作博客 · 列表页
   参考图给出的是**能被搜索的一页**：大标题、一个大搜索框、两层筛选、
   然后是"图 + 题 + 摘要 + 日期 + 箭头"的横向条目。
   它把博客从"文章归档"变成了"可以查的东西"。
   ========================================================================== */
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .86rem; color: var(--ink-3);
}
.hero-meta b { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); margin: 0 2px; }

/* 搜索框 */
.blog-search { margin-top: 30px; max-width: 620px; }
.blog-search form {
  display: flex; align-items: center; gap: 0;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 5px 5px 5px 16px;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.blog-search form:focus-within {
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(166, 58, 30, .09);
}
.blog-search svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--ink-4); }
.blog-search input {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 12px; border: 0; background: none;
  font-size: .94rem; color: var(--ink-1);
}
.blog-search input:focus { outline: 0; }
.blog-search input::placeholder { color: var(--ink-3); }
.blog-search button { flex: 0 0 auto; }

/* 两层筛选 */
.blog-filters { margin-top: 22px; }
.f-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.f-row + .f-row { margin-top: 10px; }
.f-row .f-label {
  flex: 0 0 auto; margin-right: 4px;
  font-size: .76rem; letter-spacing: .12em; color: var(--ink-3);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  font-size: .82rem; color: var(--ink-2);
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.chip:hover { border-color: var(--line-2); color: var(--ink); }
.chip.on {
  background: var(--rust); border-color: var(--rust);
  color: #FDFAF5; font-weight: 600;
}
.chip .x { font-size: .9em; opacity: .75; }
.chip-clear {
  padding: 6px 10px; font-size: .8rem; color: var(--ink-3);
  border-bottom: 1px solid transparent;
}
.chip-clear:hover { color: var(--rust); border-bottom-color: var(--rust); }

/* 列表 */
.lg-list { display: grid; gap: 16px; }

.lg-card {
  display: grid; grid-template-columns: 232px minmax(0, 1fr) auto;
  gap: 26px; align-items: center;
  padding: 20px 24px 20px 20px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}
.lg-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.lg-card.no-cover { grid-template-columns: minmax(0, 1fr) auto; }

.lg-card-cover { display: block; overflow: hidden; border-radius: var(--radius-s); background: var(--paper-2); }
.lg-card-cover img { display: block; width: 100%; height: 152px; object-fit: cover; transition: transform .5s var(--ease); }
.lg-card:hover .lg-card-cover img { transform: scale(1.035); }

.lg-card-body { display: flex; flex-direction: column; min-width: 0; }
.lg-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  font-size: .78rem; color: var(--ink-3);
}
.lg-card-meta time { font-family: var(--serif); font-weight: 600; letter-spacing: .02em; }
.lg-tag {
  padding: 2px 9px; border-radius: 3px;
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: .72rem; font-weight: 600; color: var(--tea);
}
.lg-card-title {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 700;
  line-height: 1.5; margin: 12px 0 0; letter-spacing: -.005em;
}
.lg-card-title a { color: var(--ink); }
.lg-card-title a:hover { color: var(--rust); }
.lg-card-sum {
  margin: 10px 0 0; font-size: .9rem; line-height: 1.85; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lg-more {
  display: none; /* 日期与箭头在右侧列显示，正文区不再重复一个"读这一篇" */
}
.lg-card-go {
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; gap: 14px; align-self: stretch;
  justify-content: space-between;
}
.lg-card-go time { font-family: var(--serif); font-size: .82rem; color: var(--ink-3); white-space: nowrap; }
.lg-card-go .arrow {
  color: var(--ink-3); font-size: 1.1rem;
  transition: transform .24s var(--ease), color .24s var(--ease);
}
.lg-card:hover .lg-card-go .arrow { transform: translateX(5px); color: var(--rust); }

/* 紧凑型（相关推荐） */
.lg-list.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lg-card.small { grid-template-columns: minmax(0, 1fr); padding: 24px; align-items: start; }
.lg-card.small .lg-card-title { font-size: 1.06rem; }
.lg-card.small .lg-card-sum { font-size: .86rem; -webkit-line-clamp: 3; }
.lg-card.small .lg-card-go { flex-direction: row; align-items: center; gap: 10px; align-self: auto; }

.lg-empty {
  padding: 64px 34px; text-align: center;
  background: var(--card); border: 1px dashed var(--line-2);
  border-radius: var(--radius);
}
.lg-empty p { margin: 0 0 8px; font-family: var(--serif); font-size: 1.12rem; color: var(--ink-2); }

/* 分页 */
.lg-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 42px; }
.pg-btn {
  padding: 11px 20px; border-radius: var(--radius-s);
  border: 1px solid var(--line-2); background: var(--card);
  font-size: .87rem; color: var(--ink-2);
  transition: border-color .22s var(--ease), color .22s var(--ease);
}
.pg-btn:hover { border-color: var(--ink); color: var(--ink); }
.pg-btn.disabled { opacity: .38; }
.pg-now { font-size: .82rem; color: var(--ink-3); }

/* ==========================================================================
   17. 工作博客 · 详情页
   ========================================================================== */
.lg-article { padding: 0 0 20px; }
.lg-article-head { padding: 52px 0 30px; }
.lg-article-head .h1 {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.6vw, 2.42rem);
  line-height: 1.42; letter-spacing: -.008em;
}
.lg-article-head .lead { margin-top: 18px; color: var(--ink-2); }

.lg-hero-cover { margin: 0 0 8px; }
.lg-hero-cover img { display: block; width: 100%; max-height: 520px; object-fit: cover; }

/* 正文：宋体标题 + 无衬线正文。行高 1.95 —— 长文要的是"能一直读下去"。 */
.lg-article-body { padding: 34px 0 10px; font-size: 1.03rem; line-height: 1.98; color: var(--ink-1); }
.lg-article-body > *:first-child { margin-top: 0; }
.lg-article-body p { margin: 0 0 22px; }
.lg-article-body h2 {
  font-family: var(--serif); font-size: 1.42rem; font-weight: 700;
  margin: 48px 0 18px; line-height: 1.52; color: var(--ink);
}
.lg-article-body h2::before {
  content: ""; display: block; width: 30px; height: 3px;
  background: var(--rust); border-radius: 2px; margin-bottom: 16px;
}
.lg-article-body h3 {
  font-family: var(--serif); font-size: 1.14rem; font-weight: 700;
  margin: 34px 0 13px; color: var(--ink);
}
.lg-article-body h4 { font-size: 1rem; font-weight: 700; margin: 26px 0 11px; color: var(--ink); }
.lg-article-body strong { font-weight: 700; color: var(--ink); }
.lg-article-body a { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; }
.lg-article-body ul, .lg-article-body ol { margin: 0 0 22px; padding-left: 1.4em; }
.lg-article-body li { margin-bottom: 10px; }
.lg-article-body blockquote {
  margin: 30px 0; padding: 6px 0 6px 24px;
  border-left: 3px solid var(--rust);
  font-family: var(--serif); font-size: 1.1rem; color: var(--ink-1); line-height: 1.92;
}
.lg-article-body blockquote p:last-child { margin-bottom: 0; }
.lg-article-body img {
  display: block; max-width: 100%; height: auto; margin: 30px auto;
  border-radius: var(--radius); box-shadow: var(--shadow-s);
}
.lg-article-body figure { margin: 30px 0; }
.lg-article-body figcaption {
  margin-top: 12px; text-align: center;
  font-family: var(--hand); font-size: .9rem; color: var(--ink-3);
  letter-spacing: .04em;
}
.lg-article-body hr {
  border: 0; height: 1px; margin: 42px 0;
  background: var(--line);
}
.lg-article-body code {
  background: var(--paper-2); padding: 2px 6px; border-radius: 4px;
  font-size: .9em; font-family: ui-monospace, Consolas, monospace;
}
.lg-article-body pre {
  background: var(--jade); color: #E8E2D7;
  padding: 20px; border-radius: var(--radius); overflow-x: auto;
}
.lg-article-body pre code { background: none; color: inherit; padding: 0; }
.lg-article-body table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: .92rem; }
.lg-article-body th, .lg-article-body td { border: 1px solid var(--line); padding: 11px 14px; text-align: left; }
.lg-article-body th { background: var(--paper-2); font-weight: 600; }

/* 页尾：分享 + 上下篇 */
.lg-article-foot { padding: 42px 0 0; border-top: 1px solid var(--line); margin-top: 20px; }
.lg-share {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; padding: 24px 26px;
  background: var(--paper-2); border-radius: var(--radius);
}
.lg-share-info b { display: block; font-size: .96rem; color: var(--ink); margin-bottom: 5px; }
.lg-share-info span { font-size: .84rem; color: var(--ink-3); }
.lg-share-btns { display: flex; gap: 10px; }

.lg-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 0; }
.lg-nav-item {
  display: block; padding: 20px 22px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}
a.lg-nav-item:hover { border-color: var(--line-2); transform: translateY(-2px); }
.lg-nav-item span {
  display: block; font-size: .74rem; letter-spacing: .12em;
  color: var(--ink-3); margin-bottom: 8px;
}
.lg-nav-item b { font-family: var(--serif); font-size: .98rem; color: var(--ink); font-weight: 600; line-height: 1.6; }
.lg-nav-item.disabled { opacity: .45; }
.lg-nav-item:nth-child(2) { text-align: right; }

/* 正文图片放大 */
.img-zoom {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 13, 10, .93);
  display: grid; place-items: center; padding: 24px;
  cursor: zoom-out; animation: zoomIn .22s var(--ease);
}
.img-zoom img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
@keyframes zoomIn { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   18. 茶馆页（/teahouse.html）
   ========================================================================== */
.tea-hero {
  position: relative;
  background: var(--jade);
  color: rgba(250, 247, 240, .82);
  overflow: hidden;
}
.tea-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 58%;
  opacity: .34;
}
.tea-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(43, 48, 38, .96) 8%, rgba(43, 48, 38, .8) 46%, rgba(43, 48, 38, .42));
}
.tea-hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 56px; align-items: center;
  padding: 84px 0;
}
.tea-hero .crumb { color: rgba(250, 247, 240, .55); }
.tea-hero .crumb a, .tea-hero .crumb b, .tea-hero .crumb > span,
.tea-hero .crumb i { color: rgba(250, 247, 240, .72); }
.tea-hero .crumb a:hover { color: var(--paper); }
.tea-hero .eyebrow { color: var(--rust-on-dark); }
.tea-hero h1 {
  font-family: var(--serif); color: var(--paper);
  font-size: clamp(1.85rem, 3.6vw, 2.5rem); line-height: 1.36;
  margin: 16px 0 0; letter-spacing: -.008em;
  text-wrap: balance;
}
.tea-hero .lead { color: rgba(250, 247, 240, .74); margin-top: 18px; max-width: 560px; }
.tea-hero .btn-row { margin-top: 30px; }
.tea-hero .hand-note-static {
  font-family: var(--hand); font-size: 1.06rem;
  color: rgba(250, 247, 240, .5); letter-spacing: .08em;
  margin-top: 26px; display: block;
}

/* 茶馆信息卡 */
.tea-card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-l);
}
.tea-card h3 {
  font-family: var(--serif); font-size: 1.2rem; margin: 0 0 6px; color: var(--ink);
}
.tea-card .sub { font-size: .84rem; color: var(--ink-3); margin: 0 0 20px; }
.tea-card .facts { display: grid; gap: 14px; }
.tea-card .fact { display: flex; gap: 12px; align-items: flex-start; }
.tea-card .fact svg { flex: 0 0 auto; color: var(--rust); margin-top: 3px; }
.tea-card .fact b {
  display: block; font-family: var(--serif); font-size: 1.04rem;
  color: var(--ink); font-weight: 600;
}
.tea-card .fact span { display: block; font-size: .78rem; color: var(--ink-3); letter-spacing: .06em; }
.tea-card .btn-row { margin-top: 24px; }
.tea-card .btn { flex: 1 1 0; min-width: 130px; }

/* 茶馆三件事 */
.tea-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tea-item { padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.tea-item .no {
  display: block; font-family: var(--serif); font-size: .8rem;
  letter-spacing: .16em; color: var(--rust); margin-bottom: 12px;
}
.tea-item h4 { font-family: var(--serif); font-size: 1.06rem; margin-bottom: 10px; }
.tea-item p { margin: 0; font-size: .89rem; line-height: 1.8; color: var(--ink-2); }

/* ==========================================================================
   19. 响应式 · 桌面收窄
   ========================================================================== */
@media (max-width: 1180px) {
  .hero-grid { gap: 44px; }
}

@media (max-width: 1080px) {
  /* 两列档开始吃紧：hero 收成"文 + 图"两列但图变窄 */
  .hero-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tea-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  /* ≤960：顶栏放不下「logo + 5 项导航 + CTA」，导航收进汉堡 → 抽屉。
     不这样做的话 761–960 这一段文档会被撑宽（实测 768px 溢出 16px）。 */
  .nav, .topbar .btn-sm { display: none; }
  .burger { display: flex; }
  .two-col, .two-col.wide-side { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .sticky-side { position: static; }
  .g-3, .cols-3, .tri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tea-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 60px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .lg-list.compact { grid-template-columns: 1fr; }
  .lg-card { grid-template-columns: 200px minmax(0, 1fr) auto; gap: 20px; }
  .lg-card-cover img { height: 136px; }
}

/* ==========================================================================
   20. 手机端（≤760px）
   手机上这套界面是**另一次设计**，不是 PC 的缩小版：
     · 顶栏成 app-bar（54px），滚动后右侧淡入当前页名
     · 副导航变成"本页目录"（一条可展开的条，取代横滑 chip）
     · 底部常驻 dock（5 个入口）+ 一枚浮起的朱印行动钮
     · 弹窗与抽屉都改成"底部面板"（拇指可达、不撞浏览器边缘手势）
   ========================================================================== */
@media (max-width: 760px) {

  /* ---------------------------------------------------------------------
     20.0 令牌与节奏
     --------------------------------------------------------------------- */
  :root {
    --nav-h: 54px;
    --m-toc-h: 44px;
    --m-dock-h: 54px;
    --m-pad: 16px;
  }

  /* 锚点跳转要给常驻的「顶栏 + 目录条」让位 */
  html body [id] { scroll-margin-top: calc(var(--nav-h) + var(--m-toc-h) + 12px); }
  /* 给 dock 让出高度 */
  body { padding-bottom: calc(var(--m-dock-h) + env(safe-area-inset-bottom, 0px)); }

  /* 纵向节奏：手机上"一屏能看到多少"比"留白好不好看"重要 */
  body .section { padding: 40px 0; }
  body .section.tight { padding: 28px 0; }
  body .wrap { padding: 0 var(--m-pad); }
  body .sec-head { margin-bottom: 22px; }
  body .sec-head .h2 + .lead { margin-top: 12px; }
  body .lead { font-size: .95rem; line-height: 1.78; }

  /* ---------------------------------------------------------------------
     20.1 顶栏
     --------------------------------------------------------------------- */
  body .topbar, body .topbar-inner { height: var(--nav-h); }
  body .topbar-inner { gap: 10px; }
  body .topbar.scrolled { border-bottom-color: var(--line); }

  body .topbar .logo-text > span { display: none; }
  body .topbar .logo-mark { width: 30px; height: 30px; font-size: 1rem; border-radius: 4px; }
  body .topbar .logo-text b { font-size: .92rem; }
  body .topbar .logo { min-height: 44px; }
  body .topbar .logo-text { transition: opacity .26s var(--ease); }
  body.m-anav .topbar .logo-text { opacity: 0; }

  /* 当前页名（main.js 从 .crumb 或 h1 取）*/
  body .m-page {
    display: block !important;
    flex: 1 1 auto; min-width: 0;
    text-align: right;
    font-size: .8rem; font-weight: 600; color: var(--ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transform: translateY(5px);
    transition: opacity .26s var(--ease), transform .26s var(--ease);
  }
  body.m-anav .m-page { opacity: 1; transform: none; }

  /* 桌面导航已在 ≤960 段收起（见上），这里只管汉堡本身的尺寸与位置 */
  body .burger {
    display: flex !important;
    flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto;
  }
  /* 顶栏 CTA 在手机上收起（首屏有主按钮、底部有常驻牛印钮，三处重复） */
  body .topbar .btn-sm { display: none !important; }

  /* ---------------------------------------------------------------------
     20.2 副导航 → 本页目录条
     横滑 chip 在微信里会撞屏幕左缘的返回手势；而且右侧的项根本看不见。
     做法：整条换成「本页 N 节 · 当前：03 xxx」+ 展开面板。
     全部由 main.js 从既有 .subnav 现场生成，HTML 一个字不用改。
     --------------------------------------------------------------------- */
  body .subnav { top: var(--nav-h); border-top: 0; }
  html.m-toc-ready body .subnav-inner { display: none; }
  body .subnav-inner { padding: 4px 0; }
  body .subnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; }
  /* JS 没跑起来时的兜底：右侧渐隐提示"还能往右划" */
  body .subnav { position: sticky; }
  body .subnav::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 30px;
    pointer-events: none; transition: opacity .2s var(--ease);
    background: linear-gradient(to right, rgba(250, 247, 240, 0), rgba(250, 247, 240, .96));
  }
  body .subnav.at-end::after { opacity: 0; }

  body .m-toc {
    display: flex !important;
    align-items: center; gap: 8px;
    width: 100%; height: var(--m-toc-h);
    padding: 0 var(--m-pad);
    font-size: .8rem; color: var(--ink-2); text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  body .m-toc-n {
    flex: 0 0 auto;
    font-size: .75rem; font-weight: 700; letter-spacing: .1em;
    color: var(--rust);
  }
  body .m-toc-cur {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--ink); font-weight: 600;
  }
  body .m-toc-ar {
    flex: 0 0 auto; width: 16px; height: 16px; color: var(--ink-4);
    transition: transform .24s var(--ease);
  }
  body .m-toc[aria-expanded="true"] .m-toc-ar { transform: rotate(180deg); }

  body .m-toc-panel {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 3;
    max-height: min(58vh, 430px); overflow-y: auto;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 34px rgba(22, 21, 14, .13);
    overscroll-behavior: contain;
  }
  body .m-toc-panel.open { display: block !important; }
  body .m-toc-panel a {
    display: flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 10px var(--m-pad);
    border-bottom: 1px solid var(--line);
    font-size: .87rem; line-height: 1.5; color: var(--ink-1);
    position: relative;
  }
  body .m-toc-panel a:last-child { border-bottom: 0; }
  body .m-toc-panel a > b {
    flex: 0 0 auto; width: 22px;
    font-family: var(--serif); font-size: .8rem; font-weight: 700; color: var(--ink-3);
  }
  body .m-toc-panel a.on { background: var(--rust-wash); color: var(--ink); }
  body .m-toc-panel a.on > b { color: var(--rust); }
  body .m-toc-panel a.on::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
    background: var(--rust);
  }

  body .m-scrim {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(22, 21, 14, .26);
    opacity: 0; transition: opacity .24s var(--ease);
  }
  body .m-scrim.open { opacity: 1; }

  /* ---------------------------------------------------------------------
     20.3 底部 dock + 牛印行动钮
     --------------------------------------------------------------------- */
  body .mtabbar {
    display: flex !important;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 86;
    height: calc(var(--m-dock-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(250, 247, 240, .965);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(22, 21, 14, .055);
    transition: transform .3s var(--ease);
    will-change: transform;
  }
  body.m-dock-hide .mtabbar { transform: translateY(calc(100% + 2px)); }

  body .mtabbar > a,
  body .mtabbar > button {
    flex: 1 1 0; min-width: 0; min-height: 44px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px; padding: 0;
    border: 0; background: none;
    font-size: .75rem; font-weight: 600; letter-spacing: 0;
    color: var(--ink-3); text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s var(--ease);
  }
  body .mtabbar svg { width: 21px; height: 21px; display: block; }
  body .mtabbar > a.active,
  body .mtabbar > button.active { color: var(--rust); }
  body .mtabbar > a > span {
    max-width: 100%; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }

  /* 牛印行动钮：浮在 dock 上方右侧 —— 拇指自然落点，全站唯一的高饱和色块。
     它是「老牛」这个人的印记（与顶栏 logo 的牛印同源），不是又一个 tab。 */
  body .m-cta {
    display: flex !important;
    position: fixed; right: var(--m-pad);
    bottom: calc(var(--m-dock-h) + env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 87;
    align-items: center; gap: 7px;
    height: 46px; padding: 0 16px 0 9px;
    border-radius: 999px;
    background: var(--rust); color: #FDFAF5;
    box-shadow: 0 6px 20px rgba(166, 58, 30, .32);
    font-size: .86rem; font-weight: 700; letter-spacing: .02em;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  body .m-cta:active { transform: scale(.955); }
  body .m-cta .seal {
    width: 30px; height: 30px; border-radius: 7px;
    background: rgba(253, 250, 245, .16);
    border: 1px solid rgba(253, 250, 245, .3);
    font-family: var(--serif); font-size: 1.02rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
  }
  body.m-dock-hide .m-cta { transform: translateY(calc(100% + var(--m-dock-h) + 14px)); opacity: 0; }

  /* ---------------------------------------------------------------------
     20.4 弹窗 / 抽屉 → 底部面板
     下沿起、上圆角、顶部抓手、内容内部滚动。拇指够得到，也不会划进
     浏览器的边缘返回手势区。
     --------------------------------------------------------------------- */
  body .modal { align-items: flex-end; padding: 0; overscroll-behavior: none; }
  body .modal-box {
    max-width: none; max-height: 84vh;
    border-radius: 16px 16px 0 0;
    padding: 26px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 40px rgba(22, 21, 14, .22);
    animation: mSheetUp .3s var(--ease);
    overscroll-behavior: contain;
  }
  @keyframes mSheetUp { from { transform: translateY(14%); opacity: .6; } to { transform: none; opacity: 1; } }

  body .modal-box::before {
    content: ""; position: absolute; left: 50%; top: 9px;
    width: 38px; height: 4px; margin-left: -19px;
    border-radius: 999px; background: var(--line-2);
  }

  /* 头部：标题在左、电话号码在右，同一行（v53 结论，保留） */
  body .modal-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
  }
  body .modal-box h3 {
    grid-column: 1; grid-row: 1; align-self: center;
    padding-right: 0; margin: 0; font-size: 1.22rem;
  }
  /* 引导语：标题行已被电话号码占满，去掉 */
  body .modal-box > p { display: none !important; }
  body .modal-close,
  body .modal-close:hover {
    right: 12px; top: 26px;
    width: 44px; height: 44px; font-size: 1.7rem; border-radius: 50%;
    background: var(--ink); color: var(--paper);
    box-shadow: 0 4px 14px rgba(22, 21, 14, .26);
  }
  body .modal-close:active { background: var(--rust); transform: scale(.94); }

  body .modal-box .m-phone-row {
    grid-column: 2; grid-row: 1; align-self: center;
    display: flex !important;
    align-items: center !important; justify-content: flex-end;
    gap: 7px !important; margin: 0 !important;
    padding: 0 46px 0 0;
    background: none; border: 0; border-radius: 0;
  }
  body .modal-box .m-phone-row svg { width: 16px; height: 16px; }
  body .modal-box .m-phone-row .phone-link {
    flex: 0 1 auto; min-width: 0; min-height: 44px;
    font-size: 1.05rem !important; letter-spacing: .01em; white-space: nowrap;
    color: var(--rust); font-weight: 700;
  }

  body .modal-box form,
  body .modal-box .modal-qr { grid-column: 1 / -1; }
  body .modal-box form { margin-top: 16px; }
  body .modal-box .form-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  body .modal-box .field { margin-bottom: 11px; }
  body .modal-box .field label { font-size: .74rem; margin-bottom: 5px; }
  body .modal-box .field input { padding: 10px; font-size: .84rem; border-radius: 6px; }
  body .modal-box .choice-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  body .modal-box .choice:first-child { grid-column: 1 / -1; }
  body .modal-box .choice span {
    padding: 7px 6px; font-size: .66rem; line-height: 1.35;
    border-radius: 6px; text-align: center;
    word-break: keep-all; overflow-wrap: anywhere;
  }
  body .modal-box .form-foot { gap: 8px; margin-top: 4px; }
  body .modal-box .form-foot .tiny { font-size: .7rem; line-height: 1.5; min-width: 100%; }
  /* 提交钮降一档：电话已是主出口，避免两个主按钮抢注意力 */
  body .modal-box .form-foot .btn-primary {
    background: var(--ink); border-color: var(--ink); color: var(--paper);
    width: 100%;
  }
  body .modal-box .form-foot .btn-primary:active { background: var(--rust); border-color: var(--rust); }

  body .modal-box .modal-qr {
    flex-direction: row; align-items: center; gap: 12px;
    margin-top: 14px; padding-top: 14px;
  }
  body .modal-box .modal-qr .qr-sm { width: 86px; height: 86px; }
  body .modal-box .modal-qr .qr-hint { padding: 0 6px; font-size: .58rem; line-height: 1.35; }
  body .modal-box .modal-qr-text b { font-size: .84rem; margin-bottom: 4px; }
  body .modal-box .modal-qr-text span { font-size: .74rem; line-height: 1.65; }
  body .modal-box .modal-qr-text .q-break { display: block; height: 0; line-height: 0; }
  body .modal-box .modal-qr-text a { white-space: nowrap; }

  /* 抽屉：同语言，底部面板 */
  body .drawer {
    inset: auto 0 0 0;
    width: auto;
    max-height: 84vh; overflow-y: auto;
    border-radius: 16px 16px 0 0;
    border-left: 0;
    padding: 30px var(--m-pad) calc(26px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform .3s var(--ease);
    box-shadow: 0 -8px 40px rgba(22, 21, 14, .2);
    overscroll-behavior: contain;
  }
  body .drawer::before {
    content: ""; position: absolute; left: 50%; top: 10px;
    width: 38px; height: 4px; margin-left: -19px;
    border-radius: 999px; background: var(--line-2);
  }
  body .drawer.open { transform: none; }
  body .drawer a {
    display: flex; align-items: center;
    min-height: 52px; padding: 0;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--line);
  }
  body .drawer a.active { color: var(--rust); }
  body .drawer .btn { margin-top: 18px; }

  /* ---------------------------------------------------------------------
     20.5 首屏重排
     手机上首屏只做一件事：让人愿意往下滑。
     顺序改成「标题 → 定位句 → 十问 → 说明 → 主按钮 → 数据 → 茶席图」
     （DOM 顺序不动，用 order；PC 与读屏器读到的顺序也不变）
     --------------------------------------------------------------------- */
  body .hero { padding-top: 26px; }
  body .hero::after { display: none; }
  body .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body .hero .hero-grid > div:first-child { display: flex; flex-direction: column; }
  body .hero .hero-grid > div:first-child > .display { order: 1; }
  body .hero .hero-grid > div:first-child > .hero-sub { order: 2; }
  body .hero .hero-grid > div:first-child > .hero-asks { order: 3; }
  body .hero .hero-grid > div:first-child > .hero-desc { order: 4; }
  body .hero .hero-grid > div:first-child > .btn-row { order: 5; }
  body .hero .hero-grid > div:first-child > .hero-strip { order: 6; }
  /* 茶席图排到最后，做成一条 16:9 横幅 */
  body .hero .hero-grid > .portrait { order: 7; margin-top: 30px; aspect-ratio: 16 / 10; }
  body .hero .hero-grid > .portrait .hand-note { font-size: 1.08rem; left: 7%; top: 9%; max-width: 66%; }
  body .hero .hero-grid > .portrait .seal-mark { width: 38px; height: 38px; font-size: 1.16rem; right: 12px; bottom: 12px; }
  body .portrait-tag { display: none; }

  body .hero h1.display { font-size: clamp(1.66rem, 7.6vw, 2.1rem); line-height: 1.3; }
  body .hero-sub { margin-top: 14px; gap: 4px 10px; }
  body .hero-sub em { font-size: .92rem; }
  body .hero-desc { margin-top: 14px; font-size: .94rem; }

  body .hero-asks { margin-top: 24px; }
  body .hero-asks-head { font-size: .78rem; }
  body .hero-asks-list { grid-template-columns: 1fr; }
  body .hero-asks-list a {
    grid-template-columns: 20px minmax(0, 1fr) auto 12px;
    gap: 10px; padding: 14px 2px;
    font-size: .92rem; min-height: 52px;
  }
  body .hero-asks-list .qa-t { white-space: normal; }
  body .hero-asks-list .arrow { opacity: 1; transform: none; }

  body .hero-strip { margin-top: 30px; gap: 0 0; }
  body .hero-strip .item { flex: 1 1 50%; min-width: 50%; padding: 0 12px 14px 0; }

  /* ---------------------------------------------------------------------
     20.6 卡片与内容
     --------------------------------------------------------------------- */
  body .card-grid { gap: 12px; }
  body .g-2, body .g-3, body .g-4,
  body .cols-3, body .cols-4, body .tri, body .tea-grid { grid-template-columns: 1fr; }
  body .split-row { grid-template-columns: 1fr; }
  body .card-grid.g-4, body .card-grid.g-3 { grid-template-columns: 1fr 1fr; }

  body .cat, body .scene, body .svc, body .stage,
  body .side-card, body .tri-item, body .tea-item, body .form-card,
  body .lg-card, body .lg-nav-item { border-radius: 8px; }

  body .cat { padding: 16px 15px 14px; }
  body .cat h4 { font-size: .94rem; margin-bottom: 8px; }
  body .cat li { font-size: .76rem; line-height: 1.7; }
  body .cat-ico { width: 30px; height: 30px; border-radius: 6px; margin-bottom: 10px; }
  body .cat-ico svg { width: 16px; height: 16px; }
  body .cat .go { padding-top: 10px; font-size: .76rem; }

  body .scene { padding: 18px 16px; }
  body .svc { padding: 20px 18px; }

  /* 文档体（问答题） */
  body .doc-sec { padding: 22px 0; }
  body .doc h2 { font-size: 1.16rem; }
  body .doc p, body .doc-list li { font-size: .96rem; line-height: 1.84; }
  body .doc-say { padding: 16px 18px; font-size: 1.02rem; }
  body .doc-deliver { padding: 20px 18px; }
  body .doc-num li { padding: 12px 0 12px 38px; }
  body .doc-num li::before { top: 12px; }
  body .num-list li { padding: 12px 0 12px 36px; }
  body .num-list li::before { top: 12px; }

  /* 页面首屏 */
  body .page-hero { padding: 28px 0 30px; }
  body .page-hero .h1, body .page-hero h1.display { font-size: clamp(1.5rem, 6.6vw, 1.86rem); }
  body .page-hero .lead { margin-top: 14px; font-size: .94rem; }
  body .page-hero .btn-row { margin-top: 22px; }
  /* 首屏按钮组在手机上收起（底部常驻牛印钮已是主要入口） */
  body .page-hero .btn-row { display: none; }
  body .page-hero .crumb { margin-bottom: 10px; }

  /* 茶馆条 */
  body .tea-band { padding: 22px 0; }
  body .tea-band-inner { gap: 14px; }
  body .tea-band p { font-size: 1rem; }
  body .tea-band .btn { width: 100%; }
  body .tea-banner { padding: 44px 0; }
  body .tea-banner-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body .tea-banner-facts { gap: 14px 24px; }
  body .tea-banner .btn { width: 100%; }
  body .tea-hero-inner { padding: 40px 0 44px; }
  body .tea-card { padding: 24px 20px; }
  body .tea-card .btn { flex: 1 1 100%; }

  /* ---------------------------------------------------------------------
     20.7 页脚
     PC 四列 → 品牌块独占一行；三组栏目各占一行、组内两列并排
     --------------------------------------------------------------------- */
  body .footer { padding: 40px 0 22px; }
  body .footer-grid { grid-template-columns: 1fr; gap: 20px; padding-bottom: 24px; }
  body .footer-grid > div:not(:first-child) {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 18px; align-content: start;
  }
  body .footer-grid > div:not(:first-child) > h4 { grid-column: 1 / -1; margin-bottom: 8px; }
  body .footer-grid > div:nth-child(n + 3) {
    border-top: 1px solid var(--line-dark);
    padding-top: 18px;
  }
  body .footer-grid a { font-size: .85rem; }
  body .footer .logo-text > span { display: none; }
  body .footer .slogan { margin-top: 12px; }
  body .footer-contact { gap: 18px 30px; padding: 22px 0; }
  body .fc-item { min-width: 44%; }

  /* ---------------------------------------------------------------------
     20.8 博客列表 / 详情
     --------------------------------------------------------------------- */
  body .blog-search { margin-top: 22px; }
  body .blog-filters { margin-top: 18px; }
  body .f-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  body .f-row::-webkit-scrollbar { display: none; }
  body .chip { flex: 0 0 auto; min-height: 36px; }

  body .lg-list { gap: 14px; }
  body .lg-card {
    grid-template-columns: 1fr;
    gap: 0; padding: 0; overflow: hidden;
  }
  body .lg-card-cover img { height: 186px; }
  body .lg-card-body { padding: 18px 18px 20px; }
  body .lg-card-title { font-size: 1.16rem; margin-top: 10px; }
  body .lg-card-sum { -webkit-line-clamp: 3; padding-right: 30px; }
  body .lg-card-go {
    position: absolute;
  }
  /* 手机上把"日期 + 箭头"压成标题行右侧的一个小箭头，日期移到 meta 里 */
  body .lg-card { position: relative; }
  body .lg-card-go {
    right: 16px; bottom: 18px;
    flex-direction: row; align-items: center; gap: 8px;
    align-self: auto;
  }
  body .lg-card-go time { display: none; }
  body .lg-card-go .arrow { font-size: 1rem; }

  body .lg-article-head { padding: 30px 0 22px; }
  body .lg-article-head .h1 { font-size: clamp(1.44rem, 6vw, 1.76rem); }
  body .lg-hero-cover img { max-height: 300px; }
  body .lg-article-body { font-size: 1rem; line-height: 1.78; padding: 24px 0 10px; }
  body .lg-article-body p { margin: 0 0 13px; }
  body .lg-article-body li { margin-bottom: 8px; }
  body .lg-article-body h2 { font-size: 1.24rem; margin-top: 32px; }
  body .lg-article-body h3 { margin: 24px 0 10px; }
  body .lg-article-body hr { margin: 24px 0; }
  body .lg-article-body blockquote { margin: 22px 0; line-height: 1.8; }
  body .lg-share { flex-direction: column; align-items: stretch; padding: 20px; }
  body .lg-share-btns { flex-direction: column; }
  body .lg-share-btns .btn { width: 100%; }
  body .lg-nav { grid-template-columns: 1fr; }
  body .lg-nav-item:nth-child(2) { text-align: left; }
  body .lg-pager { gap: 10px; }
  body .pg-btn { padding: 11px 16px; font-size: .82rem; }
  body .hero-meta { gap: 8px 20px; font-size: .82rem; }

  /* 长文阅读进度条 */
  body .read-bar {
    position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 95;
    pointer-events: none;
  }
  body .read-bar > i {
    display: block; height: 100%; width: 0;
    background: var(--rust); border-radius: 0 2px 2px 0;
  }

  /* 侧栏订阅卡：横排 → 竖排 */
  body .side-card > div[style*="display:flex"] {
    flex-direction: column; gap: 16px !important; text-align: center;
  }
  body .side-card > div[style*="display:flex"] .qr-lg { width: 100%; max-width: 200px; }
  body .qr-lg { max-width: 220px; }

  /* 对比表手机上竖排：每行变卡片 */
  body .cmp thead { display: none; }
  body .cmp, body .cmp tbody, body .cmp tr, body .cmp td { display: block; width: 100%; }
  body .cmp tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  body .cmp tr:last-child { border-bottom: 0; }
  body .cmp td { padding: 5px 0; border: 0; font-size: .9rem; }
  body .cmp td:first-child {
    font-family: var(--serif); font-weight: 700; color: var(--ink);
    font-size: 1.02rem; padding-bottom: 9px;
  }

  /* ---------------------------------------------------------------------
     20.9 触控与字号收口
     块级可点 <44px = 0；承载内容的文字 ≥12px
     --------------------------------------------------------------------- */
  body .crumb a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; margin: 0 -10px; }
  body .link-more { display: inline-flex; align-items: center; min-height: 44px; }
  body .btn-sm { min-height: 44px; }
  body .btn { min-height: 46px; }
  body .footer-grid a { min-height: 44px; display: flex; align-items: center; }
  body .footer-contact a.fc-item { min-height: 44px; justify-content: center; }
  body .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  body a.phone-link { display: inline-flex; align-items: center; min-height: 44px; }
  body .chip { min-height: 40px; }

  /* 字号地板：承载实际内容的标签统一 12px */
  body .eyebrow,
  body .fc-label,
  body .svc-tag,
  body .lg-tag,
  body .post-cat,
  body .post-meta,
  body .hero-asks-list .qa-cat,
  body .cat .go,
  body .portrait-tag > span,
  body .lg-nav-item > span { font-size: .75rem; }

  /* ---------------------------------------------------------------------
     20.10 极窄屏 / 横屏
     --------------------------------------------------------------------- */
  @media (max-width: 350px) {
    body .modal-box { grid-template-columns: minmax(0, 1fr); }
    body .modal-box h3 {
      grid-column: 1 / -1; grid-row: 1; padding-right: 46px;
      min-height: 44px; display: flex; align-items: center;
    }
    body .modal-box .m-phone-row {
      grid-column: 1 / -1; grid-row: 2;
      justify-content: flex-start; padding-right: 0;
    }
    body .modal-box .form-row { grid-template-columns: 1fr; gap: 0; }
    body .card-grid.g-4, body .card-grid.g-3 { grid-template-columns: 1fr; }
    body .mtabbar > a > span { font-size: .7rem; }
    body .hero-asks-list .qa-cat { display: none; }
    body .lg-card-sum { padding-right: 0; }
  }

  @media (orientation: landscape) and (max-height: 520px) {
    body .modal-box { max-height: 92vh; }
    body .drawer { max-height: 92vh; }
    body .m-cta { height: 42px; }
  }
}

/* ==========================================================================
   21. 动效降级
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn .arrow, .cat, .scene, .svc, .lg-card, .nav a::after,
  .subnav a::after, .lg-card-cover img, .lg-card-go .arrow,
  .topbar, .toast, .reveal { transition: none !important; }
  .modal-box { animation: none !important; }
  body .mtabbar, body .drawer, body .m-cta,
  body .m-page, body .m-toc-ar { transition: none !important; }
}

/* 滚动出现（仅在 JS 可用时启用，避免 JS 失效导致内容不可见） */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   22. 补齐组件（原有页面仍在用的几处结构）
   ========================================================================== */

/* 结尾号召区（.section.ink.cta-band）：深墨绿底 + 一角暖光 */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: "";
  position: absolute; right: -120px; bottom: -180px;
  width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(166, 58, 30, .22), rgba(166, 58, 30, 0) 68%);
  pointer-events: none;
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band .display { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }

/* 关于老牛：两栏（人像 + 文字） */
.about-grid {
  display: grid; grid-template-columns: .82fr 1.18fr;
  gap: 60px; align-items: center;
}

/* 观点 / 案例卡（insights 页的静态卡） */
.post {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}
.post:hover { border-color: var(--line-2); transform: translateY(-3px); }
.post-cover {
  aspect-ratio: 16 / 9; position: relative;
  background: linear-gradient(140deg, var(--paper-3), var(--paper-2));
}
.post-cover::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(22, 21, 14, .026) 0 1px, transparent 1px 16px);
}
.post-body { padding: 24px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.post-cat {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  color: var(--rust); margin-bottom: 12px;
}
.post h4 { font-family: var(--serif); font-size: 1.04rem; line-height: 1.6; margin-bottom: 12px; }
.post p { margin: 0; font-size: .86rem; color: var(--ink-3); line-height: 1.8; }
.post-meta { margin-top: 18px; font-size: .74rem; color: var(--ink-3); letter-spacing: .06em; }

/* 强调型阶段卡（.stage.special） */
.stage.special {
  border-color: var(--rust);
  background: var(--rust-wash);
}
.stage.special .stage-no { color: var(--rust-deep); }
a.stage.special:hover { transform: translateY(-2px); border-color: var(--rust-deep); }

/* 责任划分（.k / .v） */
.k {
  font-family: var(--serif); font-size: 1.02rem; font-weight: 700;
  color: var(--ink); margin-top: 22px;
}
.k:first-child { margin-top: 0; }
.v {
  font-size: .92rem; line-height: 1.85; color: var(--ink-2);
  padding: 10px 0 0;
}

/* 老牛的气泡（keyman 页用 .niu，等价于 .boss） */
.bubble.niu .bubble-av { background: var(--rust); color: #FDFAF5; }
.bubble.niu .bubble-txt { border-radius: 2px 10px 10px 10px; }

/* 对话容器 */
.dialogue { display: flex; flex-direction: column; gap: 14px; }

/* 手机底部「更多」按钮（结构由 .mtabbar > button 提供样式，
   这里只补选中态的颜色，与其它 tab 一致） */
.mtab-more.active { color: var(--rust) !important; }

/* 首页副导航在手机上的兜底：JS 失效时仍是横滑条 */
@media (max-width: 760px) {
  body .about-grid { grid-template-columns: 1fr; gap: 28px; }
  body .post-body { padding: 18px 18px 20px; }
  body .cta-band::before { display: none; }
}

/* ==========================================================================
   23. 锚点避让与静态卡（历史上散在各页 <style> 里的两条，收到这里）
   ========================================================================== */
/* 锚点跳转避让吸顶导航：首页 / 资源页 / 服务页共用 */
section[id], .card-grid[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* 公众号预告卡：站内暂无落地页，做成纯展示卡（不假装可点） */
.post-static { cursor: default; }
.post-static:hover { border-color: var(--line); transform: none; }

/* ==========================================================================
   24. 收尾补丁
   ========================================================================== */
/* 后台上传了照片时，隐藏页面自带的默认图与剪影占位
   （.portrait-has-photo 由 render.js 的 markPhotoContainers 打在图片位容器上） */
.portrait-has-photo img:not(.nb-photo) { display: none; }
.portrait-has-photo .portrait-silhouette { display: none; }
.portrait-has-photo .portrait-inner,
.portrait-inner.portrait-has-photo { background: var(--paper-2); }
.portrait-inner > .nb-photo { width: 100%; height: 100%; object-fit: cover; }

/* HTML hidden 属性：防止被区块的 display 覆盖 */
[hidden] { display: none !important; }

/* 观点卡封面：有图时不叠纸纹 */
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-cover:has(img)::after { content: none; }

/* ==========================================================================
   补漏 · 「与 .wrap 同用、但自带 padding 简写」的块
   --------------------------------------------------------------------------
   .tea-hero-inner / .lg-article-head / .lg-article-body / .lg-article-foot
   在 HTML 里都写在 .wrap 上（class="wrap lg-article-body"），
   但它们各自的 `padding: 上 0 下` 会把 .wrap 的**左右内距一并清零** ——
   结果就是手机上正文/文案直接贴到屏幕边缘（实测 390px 下 padL=0）。
   旧的 mobile.css 只对 .lg-article-* 补过手机档，桌面档与茶馆页都没补。

   这里用 (0,2,0) 权重统一补回：足以压过 `body .tea-hero-inner`(0,1,1)
   与 `body .lg-article-body`(0,1,1) 那几条带 body 前缀的规则。
   ========================================================================== */
.wrap.tea-hero-inner,
.wrap.lg-article-head,
.wrap.lg-article-body,
.wrap.lg-article-foot { padding-left: 28px; padding-right: 28px; }   /* 与 .wrap 同值 */

@media (max-width: 760px) {
  .wrap.tea-hero-inner,
  .wrap.lg-article-head,
  .wrap.lg-article-body,
  .wrap.lg-article-foot { padding-left: var(--m-pad); padding-right: var(--m-pad); }
}