/* ══════════════════════════════════════════════════════════════════
   杏和舒筋堂 · 全站正文排版 v4「定稿版」  2026-10-20
   ──────────────────────────────────────────────────────────────────
   本文件是全站最后加载的一层（放在 </body> 前），只做三件事：
     一、把字号/行高/行宽/留白钉死，压住各页自带的旧规格；
     二、给正文一层宣纸底、墨色字、朱砂与松墨的层次，读起来像帖不像网页；
     三、表格、引文、卡片、标签、图片统一成一套质感。
   不改任何页面结构，不动导航，不动首页，不动工具条逻辑。
   ══════════════════════════════════════════════════════════════════ */

/* ── 0. 设计令牌 ───────────────────────────────────────────── */
html:root,
html:not(#xh-a):not(#xh-b) {
  --xh-墨: #26211c;
  --xh-墨浅: #5b5249;
  --xh-纸: #fbf7ef;
  --xh-纸深: #f4ede0;
  --xh-松: #2e5d4a;
  --xh-松浅: #e8f0e8;
  --xh-檀: #6b4a2a;
  --xh-朱: #9c3b2e;
  --xh-金: #c9a96e;
  --xh-线: rgba(107, 74, 42, .18);
  --xh-字: 18.5px;
  --xh-行: 1.95;
  --xh-宽: 760px;
  --字-正文: 18.5px !important;
  --行高: 1.95 !important;
  --xh-fs: 18.5px !important;
  --和正文: 18.5px !important;
}
@media (max-width: 480px) {
  html:root,
  html:not(#xh-a):not(#xh-b) {
    --xh-字: 17px;
    --字-正文: 17px !important;
    --xh-fs: 17px !important;
    --和正文: 17px !important;
  }
}

/* ── 1. 纸面与墨色 ─────────────────────────────────────────── */
html body {
  font-size: var(--xh-字) !important;
  color: var(--xh-墨) !important;
  letter-spacing: .012em;
  background-color: var(--xh-纸) !important;
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(201, 169, 110, .10), transparent 70%),
    radial-gradient(800px 400px at 100% 100%, rgba(46, 93, 74, .05), transparent 70%);
  background-repeat: no-repeat !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html body::selection,
html body *::selection { background: rgba(156, 59, 46, .16); }

html body p, html body dd, html body dt, html body blockquote {
  font-size: var(--xh-字) !important;
  line-height: var(--xh-行) !important;
}
html body li, html body td, html body th,
html body .article-body, html body .book-content, html body .xh-body {
  font-size: var(--xh-字) !important;
  line-height: 1.85 !important;
  color: var(--xh-墨) !important;
}
html body p { margin: 0 0 1.02em !important; }
html body .xh-body p, html body .xh-body li, html body .xh-body div,
html body .xh-body span, html body .xh-body td, html body .xh-body th {
  font-size: var(--xh-字) !important;
  line-height: var(--xh-行) !important;
}

/* ── 2. 行宽：正文一条纸 780px；版面容器不压窄（否则卡片会被挤成长条） ── */
html body article, html body .article-body, html body .book-content,
html body .book-text, html body .neirong, html body .zhengwen {
  max-width: var(--xh-宽) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
@media (max-width: 480px) {
  html body article, html body .article-body, html body .book-content,
  html body .book-text, html body .neirong, html body .zhengwen {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* 版面容器（列表、网格、卡片区）：不设窄栏，只把超宽屏收在 1240px，
   让卡片有地方呼吸；正文的阅读长度靠下面 p 的 44em 兜住。 */
html body .container, html body .wrap, html body .wrapper,
html body .content, html body .content-wrap, html body .main,
html body main {
  max-width: 61.8vw !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 820px) {
  html body .container, html body .wrap, html body .wrapper,
  html body .content, html body .content-wrap, html body .main,
  html body main { max-width: 100% !important; }
}

/* 阅读长度：一行不超过 44em（约 40 个汉字），再宽的屏也不拉成一条长龙；
   宽容器里的段落居中排，不靠着左边蹋白。 */
html body p, html body dd, html body blockquote {
  max-width: 44em;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body li { max-width: 46em; }

/* ── 3. 标题：墨绿立骨，朱砂点睛 ───────────────────────────── */
html body h1 {
  font-size: 29px !important;
  line-height: 1.42 !important;
  color: var(--xh-墨) !important;
  font-weight: 700 !important;
  text-align: center !important;
  letter-spacing: .02em !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
}
/* 主标题下的一道细金线，像旧书的鱼尾 */
html body h1::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--xh-金), transparent);
  border-radius: 2px;
}

html body h2 {
  font-size: 21px !important;
  line-height: 1.55 !important;
  color: var(--xh-松) !important;
  font-weight: 700 !important;
  text-align: left !important;
  letter-spacing: .015em !important;
  margin: 2.1em 0 .75em !important;
  padding: 0 0 0 14px !important;
  border-left: 4px solid var(--xh-朱) !important;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(156, 59, 46, .045), transparent 55%) !important;
}
html body h3 {
  font-size: 18.5px !important;
  line-height: 1.65 !important;
  color: var(--xh-檀) !important;
  font-weight: 700 !important;
  text-align: left !important;
  margin: 1.7em 0 .55em !important;
  padding: 0 !important;
  border: 0 !important;
}
/* 三级标题前一颗小金菱 */
html body h3::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 9px;
  vertical-align: 2px;
  background: var(--xh-金);
  transform: rotate(45deg);
  border-radius: 1px;
  opacity: .9;
}
html body h4 {
  font-size: 18px !important;
  color: var(--xh-墨浅) !important;
  text-align: left !important;
  margin: 1.4em 0 .5em !important;
  font-weight: 700 !important;
}
@media (max-width: 480px) {
  html body h1 { font-size: 23px !important; }
  html body h1::after { margin-top: 11px; }
  html body h2 { font-size: 19px !important; margin: 1.35em 0 .5em !important; }
  html body h3 { font-size: 17.5px !important; }
}

/* ── 4. 引文：像从书里撕下的一页 ──────────────────────────── */
html body blockquote,
html body .quote {
  margin: 1.7em 0 !important;
  padding: 15px 18px 15px 20px !important;
  background: var(--xh-纸深) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent) !important;
  border: 1px solid var(--xh-线) !important;
  border-left: 3px solid var(--xh-朱) !important;
  border-radius: 2px 10px 10px 2px !important;
  color: var(--xh-墨浅) !important;
  font-size: 17.5px !important;
  line-height: 1.9 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
}

/* ── 5. 表格：竹青表头、隔行米色，不画竖线 ────────────────── */
html body table {
  width: 100% !important;
  max-width: 100% !important;
  margin: 1.6em 0 !important;
  border-collapse: collapse !important;
  font-size: 16.5px !important;
  line-height: 1.75 !important;
  background: #fffdf8 !important;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(107, 74, 42, .08);
}
html body th {
  background: var(--xh-松浅) !important;
  color: var(--xh-松) !important;
  font-weight: 700 !important;
  font-size: 16.5px !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(46, 93, 74, .28) !important;
  padding: 11px 12px !important;
  text-align: left !important;
}
html body td {
  border: 0 !important;
  border-bottom: 1px solid rgba(107, 74, 42, .12) !important;
  padding: 10px 12px !important;
  font-size: 16.5px !important;
  color: var(--xh-墨) !important;
  vertical-align: top !important;
}
html body tr:nth-child(even) td { background: rgba(201, 169, 110, .07) !important; }
html body tr:last-child td { border-bottom: 0 !important; }

/* ── 6. 图：圆角、淡影、居中 ──────────────────────────────── */
html body img, html body p img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 1.5em auto !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(38, 33, 28, .10) !important;
  object-fit: contain !important;
}
html body figure { margin: 1.6em 0 !important; }
html body figcaption {
  font-size: 14.5px !important;
  color: var(--xh-墨浅) !important;
  text-align: center !important;
  margin-top: .5em !important;
}

/* ── 7. 列表、分割线、链接 ────────────────────────────────── */
html body ul, html body ol { margin: 0 0 1.1em !important; padding-left: 1.45em !important; }
html body li { margin: 0 0 .42em !important; }
html body hr {
  border: 0 !important;
  height: 1px !important;
  margin: 2.4em auto !important;
  width: 62% !important;
  background: linear-gradient(90deg, transparent, var(--xh-线), transparent) !important;
}
html body a { color: var(--xh-松) !important; text-decoration: none !important; }
html body p a, html body li a, html body .xh-body a {
  border-bottom: 1px solid rgba(46, 93, 74, .32) !important;
}
html body p a:hover, html body li a:hover { border-bottom-color: var(--xh-松) !important; }
html body strong, html body b { color: #1b1714 !important; font-weight: 700 !important; }

/* ── 8. 顶部横幅（服务页）：一块墨绿锦，压一枚印 ───────────── */
html body .header {
  background: linear-gradient(150deg, #2c5647 0%, #3a5a2c 55%, #2b4a3a 100%) !important;
  color: #fdf9f0 !important;
  padding: 44px 22px 34px !important;
  text-align: center !important;
  position: relative;
  border-bottom: 3px solid var(--xh-金);
}
html body .header h1 {
  color: #fdf9f0 !important;
  font-size: 27px !important;
  margin: 0 0 8px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
html body .header h1::after { background: linear-gradient(90deg, transparent, rgba(201, 169, 110, .95), transparent); }
html body .header p {
  color: rgba(253, 249, 240, .82) !important;
  font-size: 15px !important;
  letter-spacing: .34em !important;
  margin: 10px 0 0 !important;
  text-indent: .34em;
}

/* ── 9. 标签与条目：小圆牌、竖排条目卡 ─────────────────────── */
html body .tags { display: flex !important; flex-wrap: wrap !important; gap: 9px !important; margin: 1.2em 0 1.4em !important; }
html body .tag, html body .pill, html body .badge {
  display: inline-block !important;
  background: #fffdf8 !important;
  color: var(--xh-檀) !important;
  border: 1px solid var(--xh-线) !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  letter-spacing: .02em;
}
html body .list-item {
  position: relative !important;
  margin: .7em 0 !important;
  padding: 10px 14px 10px 34px !important;
  background: rgba(255, 253, 248, .72) !important;
  border: 1px solid rgba(107, 74, 42, .10) !important;
  border-radius: 8px !important;
}
html body .list-item::before {
  content: "";
  position: absolute; left: 13px; top: 19px;
  width: 8px; height: 8px;
  background: var(--xh-金);
  transform: rotate(45deg);
  border-radius: 1px;
}
html body .list-item b { color: var(--xh-松) !important; }

/* ── 10. 卡片块：宣纸上的小笺（只给质感，不改内边距——列表页几百张卡片，
      一加 padding 就多出十几屏，这是 10-20 实测出来的坑） ──────── */
html body .card, html body .box, html body .xh-日新 {
  background: #fffdf8 !important;
  border: 1px solid rgba(107, 74, 42, .14) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(107, 74, 42, .06);
}

/* ── 11. 文末：一条朱砂短线收束 ───────────────────────────── */
html body .footer {
  margin: 2.6em 0 1.2em !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid var(--xh-线);
  text-align: center !important;
  color: var(--xh-墨浅) !important;
  font-size: 13.5px !important;
  letter-spacing: .08em;
}

/* ── 12. 手机：不出横向滚动，字不挤 ───────────────────────── */
@media (max-width: 820px) {
  html { -webkit-text-size-adjust: 100%; }
  html body {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }
  html body > div, html body > main, html body > section, html body > article,
  html body .container, html body .wrapper, html body .wrap, html body .main,
  html body .content, html body .content-wrap, html body .page, html body .box,
  html body .card, html body .article {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body img, html body video, html body iframe, html body canvas,
  html body pre, html body code { max-width: 100% !important; height: auto; }
  html body pre, html body code { white-space: pre-wrap !important; word-break: break-word; }
  html body table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  html body .list-item { padding: 9px 12px 9px 30px !important; }
  html body .list-item::before { left: 11px; top: 17px; }
  html body .header { padding: 32px 16px 26px !important; }
  html body .header h1 { font-size: 23px !important; }
}

/* ── 13. 旧版阅读工具条全部让位，只留新版一条 ─────────────── */
#xh-r, .xh-toolbar, .xh-tip,
#xh-mode, #xh-toc, #xh-resume, #xh-home,
#xh-minus, #xh-plus, #xh-prev, #xh-next { display: none !important; }
#xhtb-root {
  position: fixed !important;
  left: 50% !important; right: auto !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: auto !important;
  width: max-content !important;
  max-width: min(94vw, 720px) !important;
  padding: 6px 10px !important;
  background: rgba(255, 253, 248, .97) !important;
  border: 1px solid #e6ddcd !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 22px rgba(38, 33, 28, .16) !important;
  backdrop-filter: blur(6px);
}
#xhtb-root > * { position: static !important; margin: 0 !important; }
#xhtb-root .xhtb-btn {
  border: 0 !important; background: transparent !important;
  color: #5a3d2e !important; font-size: 16px !important;
  padding: 6px 9px !important; border-radius: 8px !important; cursor: pointer;
}
#xhtb-root .xhtb-btn:active { background: #f3ede2 !important; }
@media (max-width: 480px) {
  #xhtb-root { gap: 2px !important; padding: 5px 6px !important; }
  #xhtb-root .xhtb-btn { font-size: 15px !important; padding: 6px 7px !important; }
}
html body { padding-bottom: 86px !important; }

/* ── 14. 占位页也体面 ─────────────────────────────────────── */
.xh-rel { margin: 8px 0 22px !important; padding-left: 1.2em !important; }
.xh-rel li { margin: 6px 0 !important; }
.xh-rel a { color: var(--xh-檀) !important; }

/* ── 15. 打印／存档 ───────────────────────────────────────── */
@media print {
  html body { background: #fff !important; color: #000 !important; font-size: 12pt !important; }
  html body .header { background: #fff !important; color: #000 !important; border-bottom: 1pt solid #000; }
  html body h1, html body .header h1 { color: #000 !important; }
  #xhtb-root { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   杏和舒筋堂 · 阅读动线层 v5（2026-10-20）
   ──────────────────────────────────────────────────────────────────
   这一层只做一件事：用「视觉权重」把读者的注意力排成一条路。
   不新增一个字，不改一句正文，不弹窗，不放大字广告。

   动线设计（从上到下）：
     ① 立——标题压住场面，一条金线收边，读者心里先"定"；
     ② 入——正文段落节奏 1.02em，节与节之间 2.1em，眼睛不累；
     ③ 重——凡是有 <strong> 的段落，自动成为"要句"，左侧一道朱砂细线；
     ④ 缓——图、引文、表格各自成形，读到这里自然放慢；
     ⑤ 落——文末落款与地址电话收成"一枚印"，读者顺理成章想"去看看"。
   ══════════════════════════════════════════════════════════════════ */

/* ① 立：正文开始前留一口气，标题不贴顶 */
html body h1:first-of-type { margin-top: .2em !important; }
html body > div > h1:first-child,
html body article > h1:first-child { margin-top: .1em !important; }

/* ② 入：首段稍重，像开口第一句 */
html body article p:first-of-type,
html body .article-body p:first-of-type,
html body .content p:first-of-type,
html body .xh-body p:first-of-type {
  font-size: 1.02em !important;
  color: #1f1a16 !important;
}

/* ③ 重：带强调的段落自动浮起来（不靠颜色喊，靠一条线与一点留白） */
html body p:has(strong) {
  position: relative;
  padding-left: 14px !important;
  border-left: 2px solid rgba(156, 59, 46, .55);
  margin-left: 0 !important;
  background: linear-gradient(90deg, rgba(156, 59, 46, .035), transparent 60%) !important;
  border-radius: 0 4px 4px 0;
}
/* 一段里只强调一个词时，给它一层很淡的底，像书上用铅笔划的一道 */
html body strong {
  background: linear-gradient(180deg, transparent 62%, rgba(201, 169, 110, .30) 62%) !important;
  padding: 0 1px;
}

/* ④ 缓：读到这里放慢——图、引文、表格前后多给一点空 */
html body figure, html body blockquote, html body table { margin-top: 1.9em !important; margin-bottom: 1.9em !important; }
html body img + p, html body figure + p, html body table + p { margin-top: 1.15em !important; }

/* ⑤ 落：文末落款收成一枚印；地址与电话是读者最后看到的东西，
      做成可点、可记、不刺眼的样子（这正是"想去看看"的落点） */
html body .footer {
  margin-top: 3em !important;
  padding-top: 22px !important;
  border-top: 1px solid rgba(107, 74, 42, .16) !important;
}
html body .footer::before {
  content: "";
  display: block;
  width: 34px; height: 2px;
  margin: 0 auto 14px;
  background: #9c3b2e;
  opacity: .75;
  border-radius: 2px;
}
html body a[href^="tel:"] {
  color: #9c3b2e !important;
  border-bottom: 1px dashed rgba(156, 59, 46, .45) !important;
  letter-spacing: .02em;
  white-space: nowrap;
}
html body a[href^="tel:"]:hover { border-bottom-style: solid !important; }

/* 文末"回到顶部/相关阅读"这类尾巴，压成一行小字，不抢落款 */
html body .footer a { color: rgba(91, 82, 73, .85) !important; font-size: 13.5px !important; }

/* 手机：动线照旧，只把留白收一档，免得滑得太累 */
@media (max-width: 480px) {
  html body p:has(strong) { padding-left: 11px !important; }
  html body figure, html body blockquote, html body table { margin-top: 1.5em !important; margin-bottom: 1.5em !important; }
  html body .footer { margin-top: 2.2em !important; padding-top: 18px !important; }
}
/* 阅读动线层 v5 END */