/* ===================================================================
   网智工作室 · 东方文脉设计系统（全局共享 · 古风文化版）
   核心叙事：未来的竞争不是价格战，是文化的竞争。
   我们挖掘企业独特的竞争力，为每家企业定制宣传方案；
   以网站建设为抓手，降低企业宣传成本。
   版式沿用编辑式骨架，色彩转向「宣纸 × 玄墨 × 朱砂」，
   字体转向「思源宋体 × 楷体」，编号引入朱文印章。
   =================================================================== */

:root {
  --ink:        #1A1815;   /* 玄墨 */
  --cream:      #F4EFE4;   /* 宣纸 */
  --accent:     #93302A;   /* 朱砂（深）——恒定，只用于色块填充/描边/细线 */
  --accent-inv: #E05A4E;   /* 亮朱——深色底上的前景强调色 */
  --accent-ink: #7A2017;   /* 墨朱——正文级强调文字（AA 达标） */
  --gold:       #B99B5B;   /* 鎏金——深色底上的点缀（分隔、书脊） */
  --gold-ink:   #7A5F26;   /* 深金——浅色底上可读的强调（5.25:1，达 AA） */
  --line:       rgba(26,24,21,0.16);
  --line-inv:   rgba(244,239,228,0.20);
  /* 次级文字：0.62 在宣纸上 4.70:1（0.60 实测只有 4.43:1，不够 AA） */
  --dim:        rgba(26,24,21,0.62);
  --dim-inv:    rgba(244,239,228,0.58);
  --gut:        2.5rem;
}

/* ===================== 上下文标记：深浅底自动切换 =====================
   朱砂 #93302A 压在玄墨 #1A1815 上只有约 2.1:1，直接当深色底上的文字色等于看不见。
   页面用 .on-dark / .on-light / .on-accent 标出区块底色，
   前景强调色 --accent-fg 自动在「朱砂 ↔ 亮朱 ↔ 宣纸」之间切换。
   --accent 仍恒定用于色块填充，两者分开，避免「亮朱底压宣纸字」。
   未标记时 --accent-fg 等于 --accent，行为与从前完全一致。 */
:root { --accent-fg: var(--accent); }

.on-dark,
.on-dark * { --accent-fg: var(--accent-inv); }

.on-dark .on-light,
.on-dark .on-light * { --accent-fg: var(--accent); }

.on-dark .on-light .on-dark,
.on-dark .on-light .on-dark * { --accent-fg: var(--accent-inv); }

.on-accent,
.on-accent *,
.on-dark .on-accent,
.on-dark .on-accent * { --accent-fg: var(--cream); }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', 'STSong', serif;
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  font-size: 17px;
  line-height: 1.75;
}

/* 楷体：引文与点睛处 */
.kai, .quote p, .spine-txt, .lede { font-family: 'Noto Serif SC', 'Kaiti SC', 'KaiTi', 'STKaiti', serif; }

/* 宣纸肌理：轻纤维 + 细噪点，去「塑料感」 */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='4' seed='7'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* 保证正文在主内容层级之上，噪点不遮挡交互 */
main, header, footer { position: relative; z-index: 2; }

.mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
/* 大写数字：正文里的日期与编号（表格内数字、时间线年份） */
.num-han, .stat-n, .idx-n, .tl-y, .tbl .n, .deflist summary .mk {
  font-family: 'Noto Serif SC', 'Songti SC', serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* ===================== 朱文印章（编号） ===================== */
.seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; flex: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: 'Noto Serif SC', 'Songti SC', serif;
  font-size: 13px; letter-spacing: .05em; line-height: 1;
  border-radius: 3px;
  background: transparent;
  transition: background-color .22s ease, color .22s ease;
}
.idx-row:hover .seal { background: var(--accent); color: var(--cream); }
.seal-inv { border-color: var(--accent-inv); color: var(--accent-inv); }

/* 竖排引文：侧边章句 */
.vtext {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: 'Noto Serif SC', 'Kaiti SC', serif;
  letter-spacing: .42em; line-height: 1.6;
  white-space: nowrap;
}

/* 竖排书脊：鎏金细标 + 楷体 */
.spine-txt {
  font-family: 'Noto Serif SC', 'Kaiti SC', serif;
  letter-spacing: .5em; text-transform: none; font-weight: 400;
}

/* ===================== 排版层级 ===================== */
.h1 {
  font-size: clamp(2.9rem, 7.4vw, 6.4rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-weight: 500;
}
.h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
  font-weight: 500;
}
.h3 {
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.h4 {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.4;
  letter-spacing: -0.005em;
  font-weight: 500;
}
.lede {
  font-size: clamp(1.15rem, 1.55vw, 1.45rem);
  line-height: 1.68;
  font-weight: 300;
}
.label {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.5;
}
.body-s { font-size: 1rem; line-height: 1.75; font-weight: 300; }
.body-xs { font-size: 0.875rem; line-height: 1.7; font-weight: 300; }

/* 大号编号：编辑式索引的数字 */
.num-lg {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.stat-n {
  /* 汉字数码比阿拉伯数字占位更宽（「一百五十+」= 5 个字宽），
     字号相应调小，避免在四栏栅格里折行 */
  font-size: clamp(1.9rem, 2.9vw, 2.8rem);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ===================== 版心与分栏 ===================== */
.wrap { max-width: 1440px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
@media (min-width: 1024px) { .wrap { padding-left: 2.5rem; padding-right: 2.5rem; } }

.split { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 1024px) { .split { grid-template-columns: 3.25rem 1fr; gap: 3rem; } }

/* 无书脊的宽版分栏（正文长页用） */
.split-wide { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) { .split-wide { grid-template-columns: 8fr 4fr; gap: var(--gut); align-items: start; } }

/* ===================== 竖排书脊 ===================== */
.spine { display: none; }
@media (min-width: 1024px) {
  .spine {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem;
    position: sticky; top: 6.75rem; align-self: start;
  }
  .spine-rule { width: 2px; height: 2.5rem; background: var(--gold); flex: none; }
  /* 浅色底上的书脊文字：鎏金 #B99B5B 在宣纸上只有 2.33:1，远低于 AA 的 4.5:1。
     改用深金 --gold-ink（5.25:1）；深色底才用亮鎏金。 */
  .spine-txt {
    writing-mode: vertical-rl; text-orientation: mixed;
    font-size: 12px; letter-spacing: 0.5em; text-transform: none;
    font-weight: 400; color: var(--gold-ink); white-space: nowrap;
  }
  .spine-inv .spine-txt { color: var(--gold); }
}

/* ===================== 区块与细线 ===================== */
.band { border-top: 1px solid var(--line); }
.band-inv { border-top: 1px solid var(--line-inv); }
.pad  { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.pad-lg { padding-top: 7rem; padding-bottom: 7rem; }
.pad-sm { padding-top: 3rem; padding-bottom: 3rem; }
@media (max-width: 1023px) {
  .pad { padding-top: 3rem; padding-bottom: 3rem; }
  .pad-lg { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .pad-sm { padding-top: 2.25rem; padding-bottom: 2.25rem; }
}

/* 刊头式元信息行 */
.meta-row {
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
}

/* 面包屑 */
.crumb {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
}
.crumb a { transition: color .2s ease; }
.crumb a:hover { color: var(--accent-ink); }
.crumb .sep { opacity: .4; }

/* ===================== 链接与按钮 ===================== */
.lnk {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: color .2s ease, border-color .2s ease;
}
.lnk:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.lnk-inv:hover { color: var(--accent-inv); border-color: var(--accent-inv); }

/* 文字按钮：方角、细线，hover 反色 */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.5rem;
  font-size: 14px; font-weight: 400; letter-spacing: .06em;
  font-family: 'Noto Serif SC', 'Songti SC', serif;
  border: 1px solid var(--ink);
  color: var(--ink); background: transparent;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.btn:hover { background: var(--ink); color: var(--cream); }
.btn-solid { background: var(--ink); color: var(--cream); }
.btn-solid:hover { background: var(--accent); border-color: var(--accent); color: var(--cream); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--cream); }
.btn-accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-inv { border-color: rgba(244,239,228,0.4); color: var(--cream); }
.btn-inv:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.btn .arw { transition: transform .22s ease; }
.btn:hover .arw { transform: translateX(3px); }

/* ===================== 索引行（编号 / 名称 / 说明 / 箭头） ===================== */
.idx-row {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0 1.25rem;
  align-items: baseline;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
  transition: background-color .22s ease, padding-left .22s ease, padding-right .22s ease, color .22s ease;
}
@media (min-width: 768px) {
  .idx-row { grid-template-columns: 4.5rem minmax(10rem, 16rem) 1fr 2rem; }
}
.idx-row:hover {
  background: var(--ink);
  color: var(--cream);
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}
.idx-row:hover .idx-n { color: var(--accent-inv); }
.idx-row:hover .idx-d { color: var(--dim-inv); }
.idx-row:hover .idx-a { transform: translateX(4px); color: var(--dim-inv); }
.idx-n { font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--dim); transition: color .22s ease; }
.idx-d { color: var(--dim); transition: color .22s ease; }
.idx-a { color: var(--dim); transition: transform .22s ease, color .22s ease; display: inline-block; }

/* 列表式文章行（博客 / 案例列表复用） */
.list-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .25s ease, background-color .25s ease;
}
@media (min-width: 768px) {
  .list-row { grid-template-columns: 7rem 1fr 9rem; gap: 0 2rem; align-items: baseline; }
  .list-row:hover { padding-left: 1rem; background: rgba(26,24,21,0.035); }
}

/* 流程行 */
.step-row {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0 1.25rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}

/* ===================== 图片与图表框 ===================== */
.fig, .case-fig { overflow: hidden; background: rgba(26,24,21,0.06); display: block; }
.fig img, .case-fig img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.04);
  transition: filter .55s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.fig:hover img, .case-fig:hover img { filter: grayscale(0) contrast(1); transform: scale(1.025); }
.fig-cap {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim); margin-top: .75rem;
}

.case-lead { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) {
  .case-lead { grid-template-columns: 7fr 5fr; gap: var(--gut); align-items: end; }
}

/* ===================== 规格表 / 数据表 ===================== */
.spec { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.75rem; font-size: 0.95rem; }
.spec dt { color: var(--dim); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding-top: .2rem; }
.spec dd { margin: 0; font-weight: 400; }

.tbl { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tbl th {
  text-align: left; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500; color: var(--dim); padding: .75rem 1rem .75rem 0;
  border-bottom: 1px solid var(--ink);
}
.tbl td { padding: .9rem 1rem .9rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl .n { font-variant-numeric: tabular-nums; }

/* 标签小片 */
.tag {
  display: inline-block; padding: .3rem .7rem;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400;
  border: 1px solid var(--line); color: var(--dim);
  font-family: 'Noto Serif SC', serif;
}

/* ===================== 引述 ===================== */
.quote { position: relative; padding-left: 3.25rem; }
.quote p {
  font-size: clamp(1.3rem, 1.95vw, 1.75rem);
  line-height: 1.58;
  font-weight: 300;
  letter-spacing: -0.005em;
}
/* 大号衬线引号：楷体开篇，左双引 */
.quote::before {
  content: '\201C';
  position: absolute; left: 0; top: -0.5rem;
  font-family: 'Noto Serif SC', 'Songti SC', serif;
  font-size: 5.5rem; line-height: 1;
  color: var(--accent-ink); opacity: .26;
  transform: scale(.72) translateY(-6px);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .7s ease;
}
.quote.in::before { transform: none; opacity: .3; }

/* ===================== 长文排版（文章 / 案例详情） ===================== */
.prose { font-size: 1.0625rem; line-height: 1.95; font-weight: 300; font-family: 'Noto Serif SC', 'Songti SC', serif; }
.prose > * + * { margin-top: 1.5rem; }
.prose h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.25; letter-spacing: -0.012em; font-weight: 500;
  margin-top: 3.5rem;
}
.prose h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.35; letter-spacing: -0.005em; font-weight: 500;
  margin-top: 2.5rem;
}
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-top: .6rem; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 1.5rem; }
.prose ul > li::before {
  content: ''; position: absolute; left: 0; top: .75em;
  width: .7rem; height: 1px; background: var(--accent-ink);
}
.prose ol { list-style: decimal; }
.prose ol > li::marker { font-variant-numeric: tabular-nums; color: var(--dim); }
.prose blockquote {
  border-left: 2px solid var(--accent-ink);
  padding: .25rem 0 .25rem 1.5rem;
  font-size: 1.15rem; line-height: 1.8;
  color: rgba(26,24,21,0.78);
  font-family: 'Noto Serif SC', 'Kaiti SC', serif;
}
.prose strong { font-weight: 500; }
.prose a { border-bottom: 1px solid currentColor; transition: color .2s ease, border-color .2s ease; }
.prose a:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.prose code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .9em; padding: .1em .35em;
  background: rgba(26,24,21,0.06);
}
.prose figure { margin-top: 2.5rem; }
.prose hr { border: none; border-top: 1px solid var(--line); margin-top: 3rem; }

/* 下拉释义（术语 / FAQ） */
.deflist { border-top: 1px solid var(--line); }
.deflist details { border-bottom: 1px solid var(--line); }
.deflist summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 0; display: flex; align-items: baseline; gap: 1rem;
  font-size: 1.0625rem; font-weight: 400;
  transition: color .2s ease, padding-left .2s ease;
}
.deflist summary::-webkit-details-marker { display: none; }
.deflist summary:hover { color: var(--accent-ink); padding-left: .5rem; }
.deflist summary .mk {
  font-family: 'Noto Serif SC', serif; font-size: 13px;
  color: var(--accent-ink); flex: none; width: 1.5rem;
}
.deflist .ans { padding: 0 0 1.35rem 2.5rem; color: rgba(26,24,21,0.72); font-weight: 300; line-height: 1.9; }
.deflist details[open] summary { color: var(--accent-ink); }

/* ===================== 深色 / 强调色区块 ===================== */
.band-dark { background: var(--ink); color: var(--cream); }
.band-accent { background: var(--accent); color: var(--cream); }

/* ===================== 动效 ===================== */
.fade { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.fade.in { opacity: 1; transform: none; }

/* 逐行揭示：杂志封面式位移入场 */
.ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.ln-i {
  display: block;
  transform: translateY(112%);
  transition: transform 1.05s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.reveal-ln.in .ln-i { transform: none; }
.reveal-ln .ln:nth-child(2) .ln-i { transition-delay: .1s; }
.reveal-ln .ln:nth-child(3) .ln-i { transition-delay: .2s; }

/* 书脊竖线生长 */
.spine-rule { transform: scaleY(0); transform-origin: top center; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.spine.in .spine-rule { transform: scaleY(1); }

/* 细线绘制 */
.idx-row, .step-row, .list-row, .deflist details { position: relative; }
.idx-row::after, .step-row::after, .list-row::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .75s cubic-bezier(.16, 1, .3, 1);
}
.idx-row.in::after, .step-row.in::after, .list-row.in::after { transform: scaleX(1); transition-delay: var(--d, 0ms); }

/* 梯度入场：用 animation，避免覆盖元素自身的 hover transition */
.fade-stg > * { opacity: 0; }
.fade-stg.in > * { animation: stgRise .65s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes stgRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.stat-in.in .stat-n { animation: statRise .8s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes statRise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 复制微信号 */
.cp { cursor: pointer; }
.cp-hint { transition: opacity .2s ease; }
.cp.done .cp-hint, .cp.done .cp-label { color: var(--accent) !important; }
.cp.done .cp-hint-inv, .cp.done .cp-label-inv { color: var(--accent-inv) !important; }

/* 阅读进度 */
#progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: var(--accent); z-index: 60; pointer-events: none;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .fade { opacity: 1 !important; transform: none !important; }
  .ln-i { transform: none !important; }
  .spine-rule { transform: scaleY(1) !important; }
  .idx-row::after, .step-row::after, .list-row::after { transform: scaleX(1) !important; }
  .fade-stg > * { opacity: 1 !important; }
  .fade-stg.in > * { animation: none !important; }
  .quote::before { opacity: .3 !important; transform: none !important; }
  .stat-in.in .stat-n { animation: none !important; }
}

/* ===================== 导航 ===================== */
#navbar {
  color: var(--ink);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
  border-bottom: 1px solid transparent;
}
#navbar.is-solid { background: var(--cream); border-bottom-color: var(--line); }
#navbar .nav-dim { color: var(--dim); transition: color .3s ease; }
#navbar .nav-link { position: relative; transition: opacity .2s ease, color .2s ease; }
#navbar .nav-link:hover { opacity: .55; }
#navbar .nav-link[aria-current]:not([aria-current="false"]) { color: var(--accent-ink); }
#navbar .nav-link[aria-current]:not([aria-current="false"])::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--accent-ink);
}
/* 深色 hero 的页面：默认浅字，滚动后切深字 */
#navbar.nav-hero { color: var(--cream); }
#navbar.nav-hero .nav-dim { color: var(--dim-inv); }
/* 覆盖在深色 hero 上时，当前页高亮必须换成亮朱：
   朱砂 #93302A 在玄墨 #1A1815 上只有 2.1:1，等于看不见 */
#navbar.nav-hero .nav-link[aria-current]:not([aria-current="false"]) { color: var(--accent-inv); }
#navbar.nav-hero .nav-link[aria-current]:not([aria-current="false"])::after { background: var(--accent-inv); }
/* 滚动后底色变宣纸，切回墨朱 */
#navbar.nav-hero.is-solid { color: var(--ink); }
#navbar.nav-hero.is-solid .nav-dim { color: var(--dim); }
#navbar.nav-hero.is-solid .nav-link[aria-current]:not([aria-current="false"]) { color: var(--accent-ink); }
#navbar.nav-hero.is-solid .nav-link[aria-current]:not([aria-current="false"])::after { background: var(--accent-ink); }

/* ===================== 返回顶部 ===================== */
#backToTop {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
  width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--line);
  font-size: 10px; letter-spacing: .08em;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, background-color .2s ease, color .2s ease;
}
#backToTop.show { opacity: 1; pointer-events: auto; }
#backToTop:hover { background: var(--ink); color: var(--cream); }

::selection { background: var(--accent); color: var(--cream); }

/* ===================== 检索：搜索窗口 / 搜索列表页 =====================
   窗口由 assets/js/search.js 注入，17 页共用；搜索列表页 search.html 复用同一套类名。
   朱砂 --accent 在宣纸上是 6.39:1，可安全用于分类标签文字。 */

/* 导航里的触发按钮 */
.wz-trigger {
  display: inline-flex; align-items: center; gap: .45rem;
  color: inherit; background: none; border: 0; cursor: pointer;
  padding: .25rem; line-height: 0;
  transition: opacity .2s ease;
}
.wz-trigger:hover { opacity: .6; }
.wz-trigger svg { width: 17px; height: 17px; display: block; }
.wz-trigger .wz-kbd {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .06em; opacity: .55; line-height: 1;
}
@media (max-width: 1023px) { .wz-trigger .wz-kbd { display: none; } }

/* 遮罩与面板 */
.wz-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(26,24,21,.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: none; overflow-y: auto; padding: 0 1rem 2rem;
}
.wz-scrim.is-open { display: block; }
.wz-panel {
  margin: 7vh auto 0; width: 100%; max-width: 46rem;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--line);
  max-height: 84vh; display: flex; flex-direction: column;
}
@media (max-width: 640px) { .wz-panel { margin-top: 4vh; max-height: 90vh; } }

.wz-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.5rem; border-bottom: 1px solid var(--line); flex: none;
}
.wz-close {
  background: none; border: 1px solid var(--line); cursor: pointer;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .1em; color: var(--dim);
  padding: .3rem .55rem; line-height: 1;
  transition: color .2s ease, border-color .2s ease;
}
.wz-close:hover { color: var(--accent); border-color: var(--accent); }

.wz-field { padding: 1.35rem 1.5rem 1.15rem; border-bottom: 1px solid var(--line); flex: none; }
.wz-input {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--gold);
  font-family: inherit; font-size: clamp(1.3rem, 2.4vw, 1.85rem); font-weight: 500;
  letter-spacing: -.01em; color: var(--ink);
  padding: .35rem 0 .65rem; outline: none; caret-color: var(--accent);
}
.wz-input::placeholder { color: var(--dim); }
.wz-input:focus { border-bottom-color: var(--accent); }
/* 隐藏浏览器自带的搜索清除按钮（蓝色 × 与古风视觉冲突） */
.wz-input::-webkit-search-cancel-button,
.wz-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.wz-body { overflow-y: auto; padding: .25rem 1.5rem 1.25rem; flex: 1 1 auto; }
.wz-sec {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim); padding: 1.1rem 0 .6rem;
}

/* 结果行：窗口内两栏，列表页由 .sr-row 提供序号列 */
.wz-row {
  display: grid; grid-template-columns: 1fr; gap: .35rem;
  padding: 1.05rem 0; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none;
  transition: padding-left .22s ease, padding-right .22s ease, background-color .22s ease;
}
@media (min-width: 768px) {
  .wz-row { grid-template-columns: 6.5rem 1fr; gap: 0 1.5rem; align-items: baseline; }
  .wz-row:hover, .wz-row.is-cur { padding-left: .85rem; padding-right: .85rem; background: rgba(26,24,21,.04); }
}
.wz-t { font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.45; font-weight: 500; }
/* .wz-d 在行内是 <span>，需显式块级才能换行 */
.wz-d { display: block; font-size: .875rem; line-height: 1.7; font-weight: 300; color: var(--dim); margin-top: .3rem; }
.wz-cat {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); font-weight: 500; line-height: 1.9;
}
.wz-mark { background: rgba(147,48,42,.14); color: var(--accent-ink); padding: 0 .08em; }
.wz-arrow { color: var(--accent); font-size: 15px; display: inline-block; }

/* 热门词 / 分类筛选 */
.wz-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.wz-chip {
  background: none; border: 1px solid var(--line); cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 300; color: var(--dim);
  padding: .35rem .85rem; line-height: 1.4;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.wz-chip:hover { color: var(--accent); border-color: var(--accent); }
.wz-chip[data-active="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.wz-empty { padding: 2.75rem 0 1.5rem; }
.wz-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1.5rem; border-top: 1px solid var(--line); flex: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .08em; color: var(--dim);
}
@media (max-width: 640px) { .wz-foot .wz-keys { display: none; } }
.wz-lock { overflow: hidden; }

/* 搜索列表页：带汉字序号的结果行 */
.sr-row {
  display: grid; grid-template-columns: 1fr; gap: .4rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none;
  transition: padding-left .25s ease, background-color .25s ease;
}
@media (min-width: 768px) {
  .sr-row { grid-template-columns: 3.25rem 1fr 7.5rem; gap: 0 2rem; align-items: baseline; }
  .sr-row:hover { padding-left: 1rem; background: rgba(26,24,21,.035); }
}
.sr-n {
  font-size: 1.25rem; line-height: 1.3; color: var(--dim);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.sr-side { text-align: left; }
@media (min-width: 768px) { .sr-side { text-align: right; } }

/* ===================== 鎏金细线：古风分隔 ===================== */
.rule-gold { height: 1px; background: var(--gold); border: none; opacity: .55; }

/* ===================== 打印兜底 ===================== */
@media print {
  .fade, .ln-i, .fade-stg > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  #navbar, #backToTop, #progress { display: none !important; }
  body::before { display: none !important; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 10px; color: #666; }
}