/* 《齐谐》—— 宣纸与墨。
 *
 * 本版按「档案界面」的信息设计原则重整（参考 RhineLabUI 的视觉基准：
 * 暖灰白底、黑字、暖杏金作选中信号，以细线与紧凑排字组织），要点：
 *   1. 引入真正的令牌层：间距阶、字号阶、线宽、信号色。此前尺寸都是散落的近似值
 *      （1.02/1.06/1.1/1.14/1.16/1.24/2.1/2.3/2.4rem），没法推理也没法统一调。
 *   2. 区分「交互色」与「信号色」：铁锈红负责可点击，暖杏金负责「当前/选中/已校」。
 *      此前一个铁锈红干了所有事，层级反而糊了。
 *   3. 细线化：可点击的容器不再靠阴影浮起，靠 1px 线与底色深浅区分。
 *   4. 紧凑排字：区块间距从 3rem 收到 2.4rem，卡片内边距收紧；
 *      但**正文的行高与行宽不动**——阅读舒适度不能为「紧凑」让步。
 *
 * 字体仍只用系统栈，不加载外部字体（大陆网络环境下 Google Fonts 不可用）。
 */

:root {
  --serif: "Songti SC", "Source Han Serif SC", "Source Han Serif CN", "Noto Serif CJK SC",
           "STSong", "SimSun", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, "SF Mono", "Menlo", "Consolas", "Courier New", monospace;

  /* ---- 间距阶（4px 基准；0.25rem = 4px） ---- */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 2.5rem;  --s8: 3.5rem;

  /* ---- 字号阶 ---- */
  --t-xs: .7rem;    /* 标签、徽标 */
  --t-sm: .78rem;   /* 元信息、小字 */
  --t-base: .92rem; /* 次要段落 */
  --t-md: 1.02rem;  /* 导语 */
  --t-lg: 1.14rem;  /* 小标题 */
  --t-xl: 1.4rem;   /* 区块标题 */
  --t-2xl: 1.75rem; /* 页面标题（窄屏） */
  --t-3xl: 2.3rem;  /* 页面标题 */
  --t-4xl: 3rem;    /* 母题标题 */
  --body: 17px;     /* 正文基准 */

  /* ---- 底色与墨色：暖灰白纸，不是纯白也不是米黄 ---- */
  --paper: #f6f2ea;      /* 页面底 */
  --paper-2: #fbf8f2;    /* 抬起面（卡片、层） */
  --paper-3: #efe9dd;    /* 凹陷面（引文、代码） */
  --paper-4: #e7dfd0;    /* 更深的塌陷（表头） */

  --ink: #1e1c18;        /* 正文 */
  --ink-2: #433d34;      /* 次级正文 */
  --muted: #6f665a;      /* 说明 */
  /* 注解小字。此前 #857c6d 在纸底上对比度只有 3.69，低于 WCAG AA 的 4.5，
     而它正是著录项标签、层提示这些**小字**在用的颜色。现为 4.76（纸底）/ 5.01（卡片底）。 */
  --faint: #736a5e;

  /* ---- 线：三档，全部 1px，靠颜色深浅分层 ---- */
  --rule: #d8cebb;       /* 主要分隔 */
  --rule-2: #e6ddcb;     /* 轻微分隔 */
  --rule-strong: #bfb39d;

  /* ---- 交互色（可点击） ---- */
  --accent: #9c3b2c;
  --accent-2: #b8553f;
  --accent-soft: #f2e4de;

  /* ---- 信号色：当前页 / 选中 / 已校 / 母题码。只在「状态」上用，不当链接色 ---- */
  --signal: #8a6231;
  --signal-soft: #f0e6d4;

  /* ---- 语义色 ---- */
  --ok: #46663f;
  --warn: #8f6425;

  --radius: 3px;         /* 收紧：更接近「排版」而非「卡片 UI」 */
  --radius-lg: 5px;
  --wrap: 78rem;
  --shadow: 0 1px 0 rgba(60, 48, 32, .04);
}

/* 深色令牌：既响应系统偏好，也可由用户显式指定（按钮写入 data-theme）。
   显式选浅色时系统深色偏好必须让位，所以用 :not([data-theme="light"])。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --dark-on: 1; }
}

:root[data-theme="dark"] { --dark-on: 1; }

:root[data-theme="light"] { --dark-on: 0; color-scheme: light; }

/* 深色令牌只写一份，由上面的开关选择；此前在两处重复定义同一组值。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14130f; --paper-2: #1b1a15; --paper-3: #221f19; --paper-4: #2a2620;
    --ink: #ece5d8; --ink-2: #c6bcaa; --muted: #a2988a; --faint: #928879;
    --rule: #332e26; --rule-2: #272319; --rule-strong: #453e33;
    --accent: #d4785f; --accent-2: #e08e75; --accent-soft: #2c211c;
    --signal: #c5a16b; --signal-soft: #2a2318;
    --ok: #8fae8f; --warn: #cfa963;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #14130f; --paper-2: #1b1a15; --paper-3: #221f19; --paper-4: #2a2620;
  --ink: #ece5d8; --ink-2: #c6bcaa; --muted: #a2988a; --faint: #928879;
  --rule: #332e26; --rule-2: #272319; --rule-strong: #453e33;
  --accent: #d4785f; --accent-2: #e08e75; --accent-soft: #2c211c;
  --signal: #c5a16b; --signal-soft: #2a2318;
  --ok: #8fae8f; --warn: #cfa963;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--body);
  line-height: 1.9;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* 极淡的纸纹 */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(140, 110, 70, .04), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(140, 110, 70, .035), transparent 46%);
}

.wrap { width: min(var(--wrap), 100% - 3rem); margin-inline: auto; position: relative; z-index: 1; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--s4); top: var(--s4); z-index: 99;
  background: var(--paper-2); padding: var(--s2) var(--s4);
  border: 1px solid var(--signal);
}

/* 焦点态：键盘用户必须看得见。此前完全没有 focus 样式。 */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 2px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .2em; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .94em; letter-spacing: -.01em; }

/* ---------- 页眉 ---------- */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper-2) 88%, transparent);
  backdrop-filter: saturate(150%) blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.masthead-inner {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s5); padding: var(--s3) 0;
}
.brand { display: flex; align-items: baseline; gap: var(--s2); color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-name { font-size: 1.4rem; letter-spacing: .3em; font-weight: 600; }
.brand-sub {
  font-size: var(--t-xs); color: var(--faint);
  letter-spacing: .22em; font-family: var(--sans);
}
.topnav {
  display: flex; gap: var(--s5); font-family: var(--sans);
  font-size: var(--t-sm); letter-spacing: .1em; flex-wrap: wrap;
}
.topnav a { color: var(--ink-2); }
.topnav a:hover { color: var(--accent); text-decoration: none; }
/* 当前页：用信号色标出，而不是让它看起来和别的链接一样 */
.topnav a[aria-current="page"] { color: var(--signal); font-weight: 600; }
.nav-search { border: 1px solid var(--rule); padding: .1rem var(--s3); border-radius: 999px; }
.theme-toggle {
  font-family: var(--sans); font-size: var(--t-sm); line-height: 1.6;
  background: transparent; color: var(--ink-2); cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: .05rem var(--s3);
}
.theme-toggle:hover { color: var(--signal); border-color: var(--signal); }

/* ---------- 首页 ---------- */
.hero { padding: var(--s8) 0 var(--s7); text-align: center; }
.hero-kicker {
  font-family: var(--sans); font-size: var(--t-xs); letter-spacing: .34em;
  color: var(--faint); margin: 0 0 var(--s5);
}
.hero-title {
  font-size: clamp(3.2rem, 11vw, 6.2rem); letter-spacing: .22em;
  margin: 0 0 var(--s4); font-weight: 500; line-height: 1; text-indent: .22em;
}
.hero-quote { color: var(--muted); margin: 0 0 var(--s6); font-size: var(--t-md); }
.hero-quote span { color: var(--faint); font-size: .86rem; margin-left: var(--s2); font-family: var(--sans); }
.hero-lede { max-width: 40rem; margin: 0 auto var(--s7); color: var(--ink-2); }
.stats { display: flex; justify-content: center; gap: var(--s7); flex-wrap: wrap; margin-bottom: var(--s7); }
.stats div { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.stats b {
  font-size: 2rem; font-weight: 500; color: var(--signal);
  font-family: var(--mono); letter-spacing: -.02em;
}
/* ⚠️ 必须限定为直接子级：数字滚动会在 <b> 里注入 .roll-col/.roll-strip（都是 span），
   宽松的 `.stats span` 会把它们一起命中，把 32px 的等宽数字压成 11.2px 的无衬线小字。
   实测过：数字显示正确但尺寸缩到三分之一。 */
.stats > div > span { font-family: var(--sans); font-size: var(--t-xs); color: var(--faint); letter-spacing: .14em; }
.hero-actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }
.btn {
  font-family: var(--sans); font-size: var(--t-sm); letter-spacing: .12em;
  padding: .58rem var(--s5); border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: #fff;
}
.btn:hover { text-decoration: none; background: var(--accent-2); border-color: var(--accent-2); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); }

/* ---------- 区块 ---------- */
.block { margin: var(--s7) 0; }
.block-title {
  font-size: var(--t-lg); letter-spacing: .14em; font-weight: 500;
  margin: 0 0 var(--s4); padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
}
.block-note {
  font-family: var(--sans); font-size: var(--t-xs); color: var(--faint);
  letter-spacing: .1em; font-weight: 400;
}

/* ---------- 母题家族 ---------- */
.families { display: grid; gap: var(--s6); }
.family-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s1); }
.family-head h2 { font-size: 1.2rem; letter-spacing: .12em; font-weight: 500; margin: 0; }
.family-count { margin-left: auto; font-family: var(--mono); font-size: var(--t-sm); color: var(--muted); }
.family-count b { color: var(--signal); font-weight: 500; }
/* 家族代号：信号色描边而非填充，避免与链接色抢注意力 */
.family-code {
  font-family: var(--mono); font-size: .8rem; color: var(--signal);
  border: 1px solid var(--signal); border-radius: 2px; padding: 0 .34rem; line-height: 1.6;
}
.family-en { font-family: var(--sans); font-size: var(--t-xs); color: var(--faint); letter-spacing: .1em; }
.family-note { color: var(--muted); font-size: var(--t-base); margin: .2rem 0 var(--s4); max-width: 52rem; }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--s2); }
.mini {
  display: flex; align-items: baseline; gap: var(--s2); padding: var(--s2) var(--s3);
  border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--paper-2);
  color: var(--ink-2); font-size: var(--t-base);
}
.mini:hover { border-color: var(--signal); text-decoration: none; color: var(--ink); background: var(--signal-soft); }
.mini b { font-family: var(--mono); font-size: var(--t-sm); color: var(--signal); font-weight: 500; }
.mini i { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: var(--t-sm); color: var(--faint); }
.mini.is-empty { opacity: .55; }
.family-meter { height: 2px; background: var(--rule-2); margin-top: var(--s3); overflow: hidden; }
.family-meter span { display: block; height: 100%; background: var(--signal); opacity: .5; }

/* ---------- 卡片 ---------- */
/* 细线化：去掉投影，靠 1px 线与底色深浅分层；悬停抬边框而不是位移。 */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--s3); }
.card {
  display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s4) var(--s3);
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2);
  color: var(--ink); transition: border-color .15s, background-color .15s;
}
.card:hover { border-color: var(--rule-strong); background: var(--paper-3); text-decoration: none; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.card-head h3 { margin: 0; font-size: 1.08rem; font-weight: 500; letter-spacing: .05em; }
.card-cul {
  font-family: var(--sans); font-size: var(--t-xs); color: var(--signal);
  letter-spacing: .1em; white-space: nowrap;
}
.card-sub {
  margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.75;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-foot {
  margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--rule-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap;
}
.card-src { font-family: var(--sans); font-size: var(--t-xs); color: var(--faint); }

/* ---------- 标签 ---------- */
.chips { display: flex; gap: var(--s1); flex-wrap: wrap; }
.chip {
  font-family: var(--sans); font-size: var(--t-xs); letter-spacing: .05em;
  padding: .08rem var(--s2); border-radius: 999px;
  border: 1px solid var(--rule); color: var(--muted); background: var(--paper);
}
/* 母题标签是「分类」，用信号色；标签是「描述」，保持中性。原先两者同色。 */
.chip-link { border-color: var(--signal); color: var(--signal); background: var(--signal-soft); }
.chip-link:hover { text-decoration: none; background: var(--signal); color: var(--paper-2); }
.chip-live { border-color: var(--ok); color: var(--ok); }
.chip-pending { border-style: dashed; color: var(--faint); }

/* ---------- 母题卡片 ---------- */
.motif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--s3); }
.motif-card {
  display: grid; gap: var(--s1); padding: var(--s4); border: 1px solid var(--rule);
  border-radius: var(--radius); background: var(--paper-2); color: var(--ink); position: relative;
  transition: border-color .15s, background-color .15s;
}
.motif-card:hover { border-color: var(--rule-strong); background: var(--paper-3); text-decoration: none; }
.motif-card.is-empty { opacity: .6; border-style: dashed; }
.motif-code { font-family: var(--mono); font-size: var(--t-xs); color: var(--signal); letter-spacing: .08em; }
.motif-name { font-size: 1.04rem; letter-spacing: .07em; }
.motif-sum { color: var(--muted); font-size: .85rem; line-height: 1.7; }
.motif-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s1); }
.motif-culs { font-family: var(--sans); font-size: var(--t-xs); color: var(--faint); }

/* ---------- 杂项页头 ---------- */
.crumbs {
  font-family: var(--sans); font-size: var(--t-sm); color: var(--faint);
  padding-top: var(--s6); letter-spacing: .07em;
}
.crumbs .sep { margin: 0 .3rem; opacity: .5; }
.crumbs span { color: var(--ink-2); }
.page-title { font-size: var(--t-3xl); letter-spacing: .18em; font-weight: 500; margin: var(--s5) 0 var(--s2); }
.page-lede, .page-sub { color: var(--muted); max-width: 48rem; margin: 0 0 var(--s5); }
.page-sub { font-family: var(--sans); font-size: .8rem; letter-spacing: .1em; color: var(--faint); }
.page-head { margin-bottom: var(--s6); }

/* ---------- 母题详情 ---------- */
.motif-head {
  padding-top: var(--s5); margin-bottom: var(--s7);
  border-bottom: 1px solid var(--rule); padding-bottom: var(--s5);
}
.motif-crumb {
  font-family: var(--sans); font-size: var(--t-sm); color: var(--faint);
  letter-spacing: .1em; margin: 0 0 var(--s2);
}
.motif-head h1 { font-size: var(--t-4xl); letter-spacing: .16em; font-weight: 500; margin: 0 0 .4rem; }
.motif-en { font-family: var(--sans); font-size: .82rem; color: var(--faint); letter-spacing: .06em; margin: 0 0 var(--s4); }
.motif-summary { max-width: 46rem; margin: 0 0 var(--s4); }
/* 母题的那个「问题」是本站的思考入口，给它信号色而不是铁锈红 */
.motif-q {
  border-left: 2px solid var(--signal); margin: var(--s4) 0;
  padding: .2rem 0 .2rem var(--s4); color: var(--signal); font-size: var(--t-md);
}
.motif-count { font-family: var(--sans); font-size: var(--t-sm); color: var(--faint); letter-spacing: .1em; margin: 0; }

/* ---------- 条目页 ---------- */
.tale { padding-top: var(--s5); }
.tale-head { margin-bottom: var(--s7); padding-bottom: var(--s5); border-bottom: 1px solid var(--rule); }
.tale-kicker {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--signal);
  letter-spacing: .16em; text-transform: uppercase; margin: 0 0 var(--s2);
}
.tale-head h1 { font-size: var(--t-3xl); letter-spacing: .13em; font-weight: 500; margin: 0 0 var(--s2); }
.tale-sub { color: var(--muted); margin: 0 0 var(--s4); font-size: var(--t-md); }

/* 档案式著录项：标签小字居上、值居下，细线分隔，可扫读。
   原先这些信息挤在一行里用「·」连接，既难扫也难摘。 */
.slots {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0; margin: 0 0 var(--s4); padding: 0;
  border-top: 1px solid var(--rule-2); border-left: 1px solid var(--rule-2);
}
.slot {
  padding: var(--s3) var(--s3) var(--s3) 0;
  border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2);
  padding-left: var(--s3); min-width: 0;
}
.slot dt {
  font-family: var(--sans); font-size: var(--t-xs); letter-spacing: .16em;
  color: var(--faint); margin: 0 0 .35rem; text-transform: none;
}
.slot dd {
  margin: 0; font-size: var(--t-base); color: var(--ink-2);
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: center;
}
.slot dd a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.slot dd a:hover { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }
/* 末项铺满最后一行：否则著录项数不是列数整数倍时，栅格右下会留下两个空格子，
   看着像没做完（7 项 3 列时实测过）。 */
.slot:last-child { grid-column: 1 / -1; }

/* ---------- 三层体例 ---------- */
/* 从「三张等重的盒子」改为「细线分隔的段落 + 左侧等宽标签」：
   阅读时列是连续的，不会被框切成三截；原文层仍用底色标出「这是引文」。 */
.layer {
  margin: 0 0 var(--s6); padding: var(--s5) 0 0;
  border: none; border-top: 1px solid var(--rule);
  background: none; border-radius: 0;
}
.layer-head {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  margin: 0 0 var(--s4);
}
.layer-head h2 {
  font-size: var(--t-lg); letter-spacing: .16em; font-weight: 500; margin: 0;
}
.layer-head h2::before {
  content: attr(data-idx); font-family: var(--mono); font-size: var(--t-sm);
  color: var(--signal); margin-right: var(--s2); letter-spacing: 0;
}
.layer-hint {
  font-family: var(--sans); font-size: var(--t-xs); color: var(--muted);
  margin: 0; width: 100%; letter-spacing: .02em; line-height: 1.7;
}
.layer-cite {
  font-family: var(--sans); font-size: var(--t-sm); color: var(--muted);
  margin: 0 0 var(--s4); letter-spacing: .03em; line-height: 1.8;
}

.badge {
  font-family: var(--sans); font-size: var(--t-xs);
  padding: .05rem var(--s2); border-radius: 999px; letter-spacing: .06em;
}
.badge-ok { color: var(--ok); border: 1px solid var(--ok); }
.badge-warn { color: var(--warn); border: 1px dashed var(--warn); }

/* 原文影录：唯一的「凹陷」面，表示这是照录的他人文本 */
.layer-verbatim {
  background: var(--paper-3); border-top-color: var(--rule-strong);
  padding: var(--s5) var(--s5); border-radius: var(--radius-lg); margin-bottom: var(--s6);
}
.layer-verbatim .prose { border-left: 2px solid var(--rule-strong); padding-left: var(--s4); }
.layer-verbatim .prose p { letter-spacing: .04em; }
/* AI 重述：本站自己的文字，用信号色标题点出 */
.layer-retelling .layer-head h2 { color: var(--accent); }
.layer-literal .layer-head h2 { color: var(--ink-2); }
.layer-note { background: none; border-top-style: dashed; }
.layer-note .layer-head h2 { color: var(--muted); }

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 1.05em; text-align: justify; }
.prose blockquote {
  margin: 1.2em 0; padding: .1em 0 .1em var(--s4); border-left: 2px solid var(--rule);
  color: var(--ink-2);
}
.prose h3 { font-size: 1rem; letter-spacing: .13em; margin: 1.8em 0 .7em; font-weight: 500; color: var(--muted); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: .35em 0; }
.prose code {
  font-family: var(--mono); font-size: .86em;
  background: var(--paper-3); padding: .1em .35em; border-radius: 2px;
}
.prose hr { border: none; border-top: 1px solid var(--rule-2); margin: 2em 0; }
.prose strong { font-weight: 600; }
.xref { border-bottom: 1px dotted var(--accent); }
.xref-missing { color: var(--faint); border-bottom: 1px dotted var(--faint); }
.dim { color: var(--faint); font-size: var(--t-base); }

/* ---------- 文化圈 ---------- */
.culture-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--s3); }
.culture-card {
  display: grid; gap: var(--s2); padding: var(--s4); border: 1px solid var(--rule);
  border-radius: var(--radius); background: var(--paper-2); color: var(--ink);
  transition: border-color .15s, background-color .15s;
}
.culture-card:hover { border-color: var(--rule-strong); background: var(--paper-3); text-decoration: none; }
.culture-card.is-empty { opacity: .62; border-style: dashed; }
.culture-card h3 { margin: 0; font-size: 1.12rem; font-weight: 500; letter-spacing: .1em; }
.culture-card h3 span {
  font-family: var(--sans); font-size: var(--t-xs); color: var(--faint);
  margin-left: var(--s2); letter-spacing: .06em; font-weight: 400;
}
.culture-meta { font-family: var(--sans); font-size: var(--t-xs); color: var(--signal); margin: 0; letter-spacing: .08em; }
.culture-note { color: var(--muted); font-size: .87rem; margin: 0; line-height: 1.75; }
.culture-count { font-family: var(--mono); font-size: var(--t-sm); color: var(--faint); margin: 0; }

/* ---------- 表格 ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.table th, .table td { text-align: left; padding: var(--s3) var(--s3); border-bottom: 1px solid var(--rule-2); }
.table th {
  font-family: var(--sans); font-size: var(--t-xs); letter-spacing: .12em;
  color: var(--faint); font-weight: 400; border-bottom-color: var(--rule);
  background: var(--paper-3);
}
.table tr:hover td { background: color-mix(in srgb, var(--signal-soft) 40%, transparent); }
.table tr.is-empty { opacity: .55; }
.table a { color: var(--ink); }
.table a:hover { color: var(--accent); }

/* ---------- 检索 ---------- */
.searchbox { display: flex; align-items: center; gap: var(--s4); margin: var(--s5) 0 var(--s6); }
.searchbox input {
  flex: 1; font-family: var(--serif); font-size: 1.05rem; padding: var(--s3) var(--s4);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2); color: var(--ink);
}
.searchbox input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.search-count { font-family: var(--sans); font-size: var(--t-sm); color: var(--faint); white-space: nowrap; }
.search-hint { font-family: var(--sans); font-size: var(--t-sm); color: var(--faint); margin-top: var(--s6); }
.deep-toggle {
  display: flex; align-items: flex-start; gap: var(--s2); margin: 0 0 var(--s5);
  font-family: var(--sans); font-size: var(--t-sm); line-height: 1.65;
  color: var(--muted); max-width: 46rem;
}
.deep-toggle input { margin-top: .28rem; accent-color: var(--signal); }
.deep-toggle span { display: block; }
mark { background: var(--signal-soft); color: var(--signal); padding: 0 .1em; }

/* ---------- 空态 ---------- */
.empty { text-align: center; padding: var(--s8) var(--s4); color: var(--muted); }
.empty h1, .empty h2 { font-size: 1.5rem; letter-spacing: .22em; font-weight: 500; color: var(--ink); }

/* ---------- 页脚 ---------- */
.footer {
  margin-top: var(--s8); border-top: 1px solid var(--rule);
  background: var(--paper-2); padding: var(--s7) 0 var(--s8);
  font-size: .84rem; color: var(--muted);
}
.footer p { margin: var(--s2) 0; max-width: 52rem; }
.footer-quote { color: var(--signal); }
.footer-meta { font-family: var(--sans); font-size: var(--t-xs); color: var(--faint); letter-spacing: .08em; }

/* ---------- 编纂日志 ---------- */
.stats-left { justify-content: flex-start; gap: var(--s6); margin: var(--s5) 0 var(--s7); }
.log-list { display: grid; gap: var(--s4); }
/* 日志条目的左侧竖线用信号色：它标的是「一轮记录」，不是可点击卡片 */
.log-entry {
  border: 1px solid var(--rule); border-left: 2px solid var(--signal);
  border-radius: var(--radius); background: var(--paper-2); padding: var(--s4) var(--s5);
}
.log-head { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.log-round { font-size: 1rem; letter-spacing: .1em; font-weight: 500; }
.log-time { font-family: var(--mono); font-size: var(--t-sm); color: var(--faint); }
.log-reason { color: var(--ink-2); font-size: var(--t-base); margin: .3rem 0 var(--s2); }
.log-meta { font-family: var(--sans); font-size: var(--t-sm); color: var(--ok); margin: var(--s2) 0 0; letter-spacing: .03em; }
.log-fail {
  margin-top: var(--s3); padding: var(--s3) var(--s3);
  border: 1px dashed var(--warn); border-radius: var(--radius);
  background: var(--paper); font-size: .85rem;
}
.log-fail b { color: var(--warn); font-family: var(--sans); font-size: var(--t-xs); letter-spacing: .1em; }
.log-fail ul { margin: .45rem 0 0; padding-left: 1.2rem; }
.log-fail li { margin: .3rem 0; color: var(--ink-2); }
.log-notes { color: var(--muted); font-size: .85rem; margin: var(--s3) 0 0; }

/* ---------- 分页 ---------- */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1);
  margin: var(--s5) 0 var(--s6); font-family: var(--sans); font-size: .8rem;
}
.pg {
  padding: .18rem var(--s3); border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--ink-2); background: var(--paper-2);
}
.pg:hover { border-color: var(--signal); color: var(--signal); text-decoration: none; }
.pg-now { border-color: var(--signal); color: var(--paper-2); background: var(--signal); }
.pg-gap { color: var(--faint); padding: 0 .2rem; }

/* ---------- 正文可读性 ---------- */
/* 整站容器宽 78rem 适合网格，但**正文不该铺满**：中文长行会让换行时找不着下一行。
   舒服的中文行宽约 30—42 字。做法是把「层」本身收窄到 44rem 并居中，
   而不是把容器撑到 52rem 再把里面的文字居中 —— 后者会让层标题与正文对不齐。 */
.tale-head, .layer { max-width: 44rem; margin-inline: auto; }
.tale > .block { max-width: var(--wrap); }
.prose { max-width: none; }
.layer > .prose { margin-inline: 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  :root { --t-3xl: 1.6rem; --t-4xl: 1.8rem; --t-2xl: 1.5rem; }
  .wrap { width: min(var(--wrap), 100% - 2rem); }
  .masthead-inner { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .topnav { gap: var(--s4); font-size: var(--t-xs); }
  .hero { padding: var(--s7) 0 var(--s6); }
  .stats { gap: var(--s5); }
  .layer { padding: var(--s4) 0 0; }
  .layer-verbatim { padding: var(--s4); }
  .page-title, .tale-head h1, .motif-head h1 { font-size: 1.65rem; letter-spacing: .1em; }
  .card, .motif-card, .culture-card { padding: var(--s3) var(--s4); }
  /* 窄屏下著录项两列，避免每一项都占一整行 */
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot { padding: var(--s2) var(--s2) var(--s2) var(--s3); }
}

@media print {
  .masthead, .footer, .hero-actions, .searchbox, .pager, .deep-toggle { display: none; }
  body { background: #fff; font-size: 11pt; }
  .layer { break-inside: avoid; border-top-color: #bbb; max-width: none; }
  .slots { border-color: #ccc; }
  .slot { border-color: #ccc; }
  a { color: #000; }
}

/* 尊重系统的「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   特效层（effects.js）
   --------------------------------------------------------------------------
   原则：**动画只负责「揭示本来就在的内容」**，绝不把内容藏起来等动画。
   所有初始隐藏态都挂在 `.js` 下 —— 由 layout 里一行内联脚本设置。
   JS 一旦失败，`.js` 不存在，内容就是普通可见状态，页面不会空白。
   ========================================================================== */

/* ---------- 1. 数字滚动（按位成列） ---------- */
.roll {
  display: inline-flex;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}
/* 滚动内部一律继承宿主字号/字体，不受任何外部 span 规则影响 */
.roll-col, .roll-strip, .roll-strip i {
  font-size: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  line-height: 1;
}
.roll-col { display: inline-block; height: 1em; overflow: hidden; }
.roll-strip {
  display: block;
  transition: transform 620ms cubic-bezier(.2, .85, .25, 1);
  will-change: transform;
}
.roll-strip i {
  display: block; height: 1em; line-height: 1;
  font-style: normal; font-weight: inherit; color: inherit;
}

/* ---------- 2. 标题落定（纯 CSS 动画，不依赖 JS） ---------- */
/* 用 CSS 动画而不是「JS 加类 + transition」：后者一旦 JS 失败或 rAF 不被调度，
   标题就永远停在透明 + 模糊态。CSS 动画带 both 填充，无论脚本是否执行都必然落到终态。 */
@keyframes qx-settle {
  from { opacity: 0; transform: translateY(.42em); filter: blur(4px); }
  to   { opacity: 1; transform: none;             filter: none; }
}
.js .hero-title {
  animation: qx-settle .62s cubic-bezier(.2, .85, .25, 1) both;
}
/* 旧的字槽方案已弃用，保留类名以防旧缓存页面错位 */
.settle-ch { display: inline-block; }

/* ---------- 3. 导航滑动下划线（180ms 连续移动） ---------- */
.topnav { position: relative; }
.nav-ink {
  position: absolute; left: 0; bottom: -.28rem; height: 1px;
  background: var(--signal);
  opacity: 0;
  transition: transform 180ms cubic-bezier(.2, .85, .25, 1),
              width 180ms cubic-bezier(.2, .85, .25, 1),
              opacity .18s ease;
  pointer-events: none;
}
.nav-ink.on { opacity: 1; }

/* ---------- 4. 错峰入场 ---------- */
/* 隐藏态只挂在 JS 主动加的 .reveal-armed 上，且只挂给首屏之外的元素。
   没有 JS、或 IO 不触发，元素就是普通可见状态 —— 内容永远不会丢。 */
.js [data-reveal].reveal-armed {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .42s ease,
              transform .42s cubic-bezier(.2, .85, .25, 1);
}
.js [data-reveal].revealed { opacity: 1; transform: none; }

/* ---------- 5. 核校扫描线 ---------- */
/* 扫过「原文影录」层，扫完点亮核校徽标。本站立身之本是原文可核，
   把「核验」这个动作显形，比任何装饰都贴合。 */
.layer-verbatim { position: relative; overflow: hidden; }
.scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--signal) 50%, transparent 100%);
}
.layer-verbatim.scanning .scan { animation: qx-scan 1.5s cubic-bezier(.3, .7, .4, 1) 1; }
@keyframes qx-scan {
  0%   { top: 0;     opacity: 0; }
  12%  {             opacity: .85; }
  88%  {             opacity: .85; }
  100% { top: 100%;  opacity: 0; }
}
.layer-verbatim.scanned .badge-ok { animation: qx-badge .55s ease .12s 1; }
@keyframes qx-badge {
  0%   { box-shadow: 0 0 0 0 var(--signal-soft); }
  45%  { box-shadow: 0 0 0 5px var(--signal-soft); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- 减少动态效果：全部落到终态，不做任何位移 ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .hero-title { animation: none; }
  .js [data-reveal].reveal-armed { opacity: 1 !important; transform: none !important; }
  .layer-verbatim.scanning .scan { animation: none; opacity: 0; }
  .roll-strip { transition: none; }
  .nav-ink { transition: none; }
}