/* @pages-only:start
 *
 * 这一段到 @pages-only:end 之间，只有品牌站自己的页面用得上（首页各节、排盘工具介绍页）。
 * 内容层那四千多页（古籍 / 词条 / 工具落地页）一条都不需要，所以构建时把它切成单独一个
 * 文件，只让品牌页去链——见 build-legal-static.mjs 的 writeCss。
 *
 * 分开的理由不是省那几十 KB 的磁盘，而是：搜索来的访客几乎每次都是第一次访问，
 * 缓存永远轮不到发挥，渲染阻塞的字节是每一次访问都要付的。
 *
 * 加新的首页板块请写在这两个标记之间；写在外面会让四千多页跟着变重。
 */

/* ── Hero ─────────────────────────────────────────────── */

/*
 * 板块介绍页（排盘工具页）与首页共用这一条的基础：居中、留白给足。
 * 首页的首屏另有一整套（.hero-home，见下），这里只是两者共同的骨架。
 */
.hero {
  position: relative;
  padding: 48px 0 40px;
  text-align: center;
}

@media (min-width: 768px) {
  .hero {
    padding: 80px 0 48px;
  }
}

/*
 * 板块页的 h1 是一句标语，走 Cormorant 的 500（拉丁）或宋体 600（CJK）。
 * clamp 的中间项带 rem 分量（规范 §5：纯 vw 在缩放时不长），上下限比不超过 2.5。
 */
.hero h1 {
  margin: 0 auto 1.25rem;
  max-width: 18em;
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.9rem);
  line-height: var(--lh-heading);
  /* 居中多行标题最忌末行只剩一两个字；balance 让各行长度均匀。不支持的浏览器按普通换行。 */
  text-wrap: balance;
}

.hero h1:lang(ja) {
  text-wrap: initial;
}

@supports (word-break: auto-phrase) {
  .hero h1:lang(ja) {
    word-break: auto-phrase;
    text-wrap: balance;
  }
}

/*
 * 首页大标题专用字体。拉丁走 Cormorant 斜体（--display-style），中文落到书法体子集——
 * 一条 font-family 同时管住两种语言（拉丁那份没有 CJK 字形，中文自动往后落）。
 * 只作用于 .display，板块页的 h1 不受影响（书法体子集里没有那些字）。
 *
 * 行高：拉丁的 Cormorant 字身矮、升部长，1.12 就够透气；Great Vibes 那会儿的 1.45
 * 是为花体的上下伸展留的，这里换成 --lh-hero。老师那句同行仍吃 --lh-display。
 */
.hero h1.display {
  max-width: 16em;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.3rem + 4vw, 5.2rem);
  font-style: var(--display-style);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-hero);
}

/* 中文书法体笔画粗重，同字号下比 Cormorant 斜体大一圈，收一档才与拉丁页的分量相当。 */
.hero h1.display:lang(zh-Hans),
.hero h1.display:lang(zh-Hant),
.hero h1.display:lang(ja),
.hero h1.display:lang(ko),
.hero h1.display:lang(th) {
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.6rem);
}

/* 书法体子集只有一个字重。 */
.hero h1.display:lang(zh-Hans),
.hero h1.display:lang(zh-Hant) {
  font-weight: 400;
}

/*
 * 逐字模糊渐显，与应用「问 AI」流式回答的 tokenFade 同参数（0.4s ease-out，
 * opacity 0→1 配 blur(1px)→0）。起跑时刻由 JS 写在各 span 的 animation-delay 上。
 */
.hero h1.display .ch {
  opacity: 0;
  animation: tokenFade 0.4s ease-out forwards;
}

@keyframes tokenFade {
  from {
    opacity: 0;
    filter: blur(1px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1.display .ch {
    opacity: 1;
    animation: none;
  }
}

.hero .lede {
  margin: 0 auto 2.25rem;
  max-width: 40rem;
  color: var(--ink-2);
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
  text-wrap: balance;
}

/*
 * 首页首屏：一幅立轴。
 *
 * 题字（大标题）居中，题上钤一方「康」印，两道发丝线从印章向两侧淡出；右上悬一轮朱日，
 * 纸面最底下压一抹远山（ornaments.mjs 的 inkMountains），一路漫到「渐入中道」那一行下面，
 * 与墨色的中道一节隔着一线留白。四样东西都是装饰，信息仍只有标题、对话框与几句问法。
 *
 * 纸面本身加两层极淡的晕：中间偏上一团暖光（像灯下的纸），四角压暗一点——首屏不再是
 * 一整片平的米白。
 */
.hero-home {
  background: radial-gradient(55% 44% at 50% 36%, rgba(255, 252, 244, 0.95), transparent 72%);
  overflow-x: clip;
}

.hero-home .wrap {
  position: relative;
  z-index: 2;
}

.hero-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 clamp(1.2rem, 3vh, 2rem);
}

.hero-seal img {
  display: block;
  width: 26px;
  height: auto;
}

.hero-seal-rule {
  width: clamp(48px, 9vw, 110px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line));
}

.hero-seal-rule:last-child {
  background: linear-gradient(90deg, var(--gold-line), transparent);
}

/*
 * 一轮朱日。放在首屏右上而不是标题正上方：书画里的日月从不居中，偏在一角才有气口。
 * 边缘用径向渐变化开，像朱砂落在生宣上洇出的一圈。
 */
.hero-sun {
  position: absolute;
  z-index: 1;
  top: clamp(56px, 12vh, 132px);
  right: clamp(24px, 13vw, 240px);
  width: clamp(52px, 6vw, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 42%, #d95a2b 0%, #c9481c 50%, rgba(201, 72, 28, 0.35) 64%, rgba(201, 72, 28, 0) 71%);
  opacity: 0.72;
  pointer-events: none;
}

/*
 * 远山压在首屏最底下，并往下探进「渐入中道」那一行（--enter-h）——那一行本身没有底色，
 * 山从它身后透出来，首屏与入口是同一张纸。探出的部分停在中道一节的上沿，不会压到墨色上。
 */
.ink-hills {
  display: block;
  width: 100%;
  pointer-events: none;
  user-select: none;
}

/*
 * 上下两头都化开：底下是山脚的雾；顶上那一截是保险——画幅已按框的比例拉宽（见 ornaments.mjs
 * 的 aspect），可超宽屏上框还会更扁，最远那层的峰顶仍可能被裁平，化开之后就看不出那道平线。
 */
.hero-hills,
.phero-hills,
.zd-hills {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 42%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 42%, transparent 100%);
}

.hero-hills {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--enter-h));
  height: clamp(170px, 30vh, 320px);
}

@media (max-width: 767px) {
  .hero-sun {
    top: 28px;
    right: 22px;
    opacity: 0.8;
  }

  .hero-hills {
    height: clamp(140px, 24vh, 220px);
  }
}

/*
 * 对话框：一方裱好的纸。
 *
 * 外框一道细线、内里再压一道更淡的线（inset 阴影画的），是书画装裱「一色绫边」的意思；
 * 不再用大圆角与投影——那是应用卡片的语汇，放在这里像把一个输入框从别处搬了过来。
 */
.composer {
  max-width: 780px;
  margin: clamp(1.6rem, 4vh, 2.4rem) auto 0;
  text-align: left;
}

/*
 * 发送键绝对定位在右下角，不单独占一行——占一行会平白把面板拉高一截。
 * 文字不会压到按钮上：textarea 自己留了 padding-bottom，正文永远排在按钮所在的那条带之上。
 */
.composer form {
  position: relative;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 5px var(--surface),
    inset 0 0 0 6px rgba(200, 179, 147, 0.35),
    0 18px 40px -24px rgba(60, 42, 24, 0.28);
  transition: border-color 0.25s ease;
}

.composer form:focus-within {
  border-color: var(--gold);
}

/*
 * 输入框聚焦不做任何描边或高亮：页面一进来就自动聚焦，任何焦点样式都会一直亮着，
 * 看上去像是报错或选中态。文本框本身有闪烁的光标，那已经是它的焦点指示；
 * 外框换成泥金色已经交代了「在这里打字」，发送键仍保留全局的 :focus-visible 轮廓。
 */

/*
 * 轮换占位的容器。
 *
 * 高度锁一行、overflow:hidden，文字才能「从下方推上来」而不是在框外露头。
 * 只覆盖第一行：输入超过一行时 ghost 已经被 JS 隐藏，不会挡住内容。
 */
.composer .field {
  position: relative;
}

.composer .ghost {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.6em;
  overflow: hidden;
  pointer-events: none;
  color: #a08a6c;
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
}

.composer .ghost .t {
  display: block;
  white-space: nowrap;
}

.composer .ghost .t.in {
  animation: ghostIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.composer .ghost .t.out {
  animation: ghostOut 0.24s ease-in both;
}

/* 进出方向一致（都朝上走），读起来才像一条向上滚动的列表，而不是原地闪烁。 */
@keyframes ghostIn {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ghostOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

.composer textarea {
  display: block;
  width: 100%;
  /* 两行正文 + 一条留给发送键的底带。 */
  height: 5.4em;
  max-height: 12rem;
  padding: 0 0 2.2em;
  border: 0;
  outline: none;
  resize: none;
  overflow-y: auto;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
}

.composer textarea::placeholder {
  color: #a08a6c;
}

/* 发送键：一枚墨色的圆，悬停时换成朱砂——全站唯一一处还是圆的按钮，它是一方印。 */
.composer .send {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #f7f0e3;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease;
}

.composer .send:hover {
  background: var(--accent-ink);
}

.composer .hint {
  margin: 0.75rem 0 0;
  color: var(--ink-3);
  font-size: 0.9rem;
  text-align: center;
}

/* 示例问题：点一下带进问 AI。方角细框，像书页边上的签条。 */
.suggests {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}

.suggests a {
  display: inline-block;
  padding: 0.42rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(255, 252, 246, 0.6);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 0.9rem;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background 0.2s ease;
}

.suggests a:hover {
  border-color: var(--gold);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

/* @pages-only:end */
/* @pages-only:start */

/* ── 中道 ─────────────────────────────────────────────── */

/*
 * 首页第二屏，也是首页唯一一屏内容。
 *
 * 整块是一条墨色通栏，与上方米色的 Hero 硬接——这一刀本身就是分界，不再加分隔线。
 * 中心压一层极淡的暖光，像纸被灯照着；四周沉下去，字浮上来。
 *
 * 配色不进 :root：这套墨底金字只服务这一节，放进全局令牌会诱使别处误用。
 */
/*
 * 首屏：Hero 撑到「一屏 − 入口引导 − 顶栏」，于是折叠线正好落在中道那一节的上沿——
 * 首屏因此是完整的一片米白，墨色一点都不露。
 *
 * 顶栏要减掉：它虽然是 sticky，停在页顶时仍然实打实占着文档流的那一格，
 * 并没有浮在 Hero 上面。
 */
.hero:has(+ .tao-enter) {
  display: grid;
  align-content: center;
  min-height: calc(100svh - var(--enter-h) - var(--header-h));
  padding-top: 0;
  padding-bottom: 0;
}

/*
 * 首屏底部的入口：箭头 + 一句引导语，点它进中道。
 *
 * 这块不带底色。此前试过在这里探出一道墨色（先是四级阶梯，后来是一条横带），
 * 两版都不成立：首屏是米白的场，底下压一条黑就把整屏割成两截，
 * 而那条黑既不承载信息也不属于 Hero。现在留白到底，邀请全交给箭头和文字，
 * 墨色一直等到折叠线以下才出现。
 */
.tao-enter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  position: relative;
  z-index: 3;
  height: var(--enter-h);
  text-decoration: none;
}

.tao-enter:hover {
  text-decoration: none;
}

/* 引导语：与箭头同为邀请的一部分，字距放开，像页脚上题的一行小字。 */
.tao-enter-label {
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  letter-spacing: var(--tracking-wide);
  /* 字距是加在每个字右侧的，末字之后那一份会让整行看起来偏左，补回去。 */
  text-indent: var(--tracking-wide);
  transition: color 0.25s ease;
}

.tao-enter:hover .tao-enter-label,
.tao-enter:focus-visible .tao-enter-label {
  color: var(--accent-ink);
}

/* 箭头落在引导语上方。 */
.tao-enter-arrow {
  display: block;
  width: 26px;
  color: var(--line-strong);
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.tao-enter-arrow svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tao-enter:hover .tao-enter-arrow,
.tao-enter:focus-visible .tao-enter-arrow {
  color: var(--accent-ink);
  transform: translateY(3px);
}

/* 一下一下地点，像在招手。指到它上面就停——已经不需要再提示了。 */
@media (prefers-reduced-motion: no-preference) {
  .tao-enter-arrow {
    animation: enterBeckon 2.4s ease-in-out infinite;
  }

  .tao-enter:hover .tao-enter-arrow {
    animation: none;
  }
}

@keyframes enterBeckon {
  0%,
  62%,
  100% {
    transform: translateY(0);
  }

  28% {
    transform: translateY(5px);
  }
}

.tao {
  position: relative;
  background:
    radial-gradient(115% 62% at 50% 34%, rgba(200, 165, 106, 0.11), transparent 62%),
    var(--ink-bg);
  color: var(--ink-fg);
  /*
   * 必须是 clip 不能是 hidden：hidden 会让这一节变成滚动容器，里面 sticky 的舞台
   * 就改为相对它定位，钉屏直接失效。clip 同样挡住横向溢出（起手时放大的圆相），
   * 但不创建滚动容器。
   */
  overflow-x: clip;

  /* 编排进度，由脚本按滚动位置逐帧改写；没有脚本时就是收势那一帧。 */
  --enso: 1;
  --reveal: 1;
  --tail: 1;
  --n: 9999;
}

.tao.anim {
  --enso: 0;
  --reveal: 0;
  --tail: 0;
  --n: 0;
}

.tao-stage {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(1.5rem, 4vh, 2.4rem);
  width: 100%;
  max-width: calc(72rem + var(--gutter) * 2);
  min-height: 100vh;
  margin: 0 auto;
  /* 顶栏是 sticky 的，永远压在这一节上沿，上边距得把它让出来。 */
  padding: calc(clamp(56px, 9vh, 104px) + var(--header-h)) var(--gutter) clamp(56px, 9vh, 104px);
  text-align: center;
}

.tao-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tao-crest {
  position: relative;
  display: grid;
  place-items: center;
  /* 题名按圆径取字号，两者的比例才不会随断点走样。 */
  --crest: clamp(180px, 46vw, 244px);
  width: var(--crest);
  aspect-ratio: 1;
}

/* 圆相：从顶端起笔顺时针描一圈，收笔处留一道口子——圆相本就不闭合。 */
.tao-enso {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-96deg);
  overflow: visible;
}

/*
 * r=112 的周长约 703.7（用户单位，与渲染尺寸无关）。dasharray 取整到 704——
 * 实线与间隔等长且都盖满一整圈，所以圆是闭合的，起收笔处不留缺口；
 * 略微超出周长也是有意的，免得收尾差零点几个单位露出一道发丝缝。
 * dashoffset 从 704 收到 0 就是一笔描完，进度由 --enso 给。
 */
.tao-enso circle {
  fill: none;
  stroke: rgba(212, 180, 126, 0.34);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 704;
  stroke-dashoffset: calc(704 * (1 - var(--enso)));
}

.tao-name {
  position: relative;
  margin: 0;
  font-family: "Hero CJK", var(--font-serif);
  font-weight: 400;
  font-size: calc(var(--crest) * 0.3);
  line-height: 1;
  letter-spacing: var(--tracking-name);
  /* 字距会在末字右侧多留一格，缩进同量补回来才是真居中。 */
  text-indent: var(--tracking-name);
  color: #f7f0e3;
  /* 圆相描到一半时题名才浮出来。 */
  opacity: clamp(0, calc(var(--enso) * 2 - 0.55), 1);
}

.tao-latin {
  margin: 1.15rem 0 0;
  color: rgba(212, 180, 126, 0.82);
  font-size: clamp(0.7rem, 1.5vw, 0.82rem);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-indent: var(--tracking-wide);
  text-transform: uppercase;
  opacity: var(--reveal);
}

/* 引线：从名号垂下来一道金丝，把视线带到偈子上。 */
.tao-rule {
  width: 1px;
  height: clamp(36px, 6vh, 60px);
  margin: 1.5rem 0 0;
  background: linear-gradient(
    180deg,
    rgba(212, 180, 126, 0),
    rgba(212, 180, 126, 0.55),
    rgba(212, 180, 126, 0)
  );
  transform: scaleY(var(--reveal));
  transform-origin: top;
}

/*
 * 竖排偈子。
 *
 * writing-mode: vertical-rl 之后每个 .line 就是一列，从右往左排——与古籍的读序一致，
 * DOM 里照常按第一句到第三句写即可。此时 line-height 管的是列间距，height 管的是列长，
 * 所以给 max-content 让它按最长那句自己撑开，nowrap 兜住不让某句折成两列。
 */
.tao-verse {
  writing-mode: vertical-rl;
  height: max-content;
  margin: 0;
  /*
   * 竖排下 text-align 管的是列内的纵向对齐，继承来的 center 会让短的那列吊在半空。
   * 各列一律从顶端起写，才是古籍的样子。
   */
  text-align: start;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2.4vw, 1.8rem);
  line-height: 2.9;
  letter-spacing: var(--tracking-verse);
  color: #efe4d2;
}

.tao-verse .line {
  display: block;
  white-space: nowrap;
}

/*
 * 中文版把落款竖排收在偈子左侧——竖排卷轴的题款本就写在正文之后，
 * 而 vertical-rl 里「之后」就是更左的那一列。row-reverse 让 DOM 顺序保持
 * 「正文在前、题款在后」（读屏与复制都按这个序），视觉上题款落到左边。
 */
.tao-scroll {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.9rem, 2.5vw, 2rem);
}

.tao-source-aside {
  writing-mode: vertical-rl;
  height: max-content;
  /*
   * 与偈子的末字齐脚。题款比正文短得多，齐头的话下面会空出一大截，
   * 整列像是吊在半空；卷轴上的落款本来也是沉在末尾的。
   */
  align-self: flex-end;
  margin: 0;
  font-size: clamp(0.72rem, 1.6vh, 0.92rem);
  letter-spacing: var(--tracking-aside);
  white-space: nowrap;
  /* 落款跟着偈子的收尾一起浮出来，不自成一拍。 */
  opacity: var(--tail);
}

/*
 * 逐字渗墨。--n 是「已写到第几个字」，--i 是这个字的序号；两者相减钳到 0..1
 * 就是它该显到几分。除以 3 让每个字的渐显跨三格，笔画像是漫上来的，不是一格一格跳。
 * 全部由 CSS 现算，滚动时脚本只改 --n 一个值，不碰 DOM。
 */
.tao-verse .ch {
  --shown: clamp(0, calc((var(--n) - var(--i)) / 3), 1);
  opacity: var(--shown);
  filter: blur(calc((1 - var(--shown)) * 3px));
}

.tao-colophon {
  opacity: var(--tail);
}

.tao-gloss {
  max-width: 30rem;
  margin: 0 auto;
  color: rgba(240, 230, 214, 0.5);
  font-size: 0.9rem;
  line-height: 1.85;
}

/* 落款 */
.tao-source {
  margin: 1.1rem 0 0;
  color: rgba(212, 180, 126, 0.72);
  font-family: var(--font-serif);
  font-size: 0.9rem;
  letter-spacing: var(--tracking-source);
}

.tao-act {
  margin: 1.8rem 0 0;
}

.tao-cta {
  display: inline-block;
  padding: 0.85rem 2.4rem;
  border: 1px solid rgba(212, 180, 126, 0.42);
  /* 方角比胶囊更像一方牌记，与这一节的气口一致；全站的圆角按钮留在别处。 */
  border-radius: 2px;
  background: transparent;
  color: #e8d6b0;
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: var(--tracking-cta);
  text-indent: var(--tracking-cta);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.32s ease,
    border-color 0.32s ease,
    color 0.32s ease;
}

.tao-cta:hover {
  border-color: rgba(212, 180, 126, 0.8);
  background: rgba(212, 180, 126, 0.1);
  color: #f8efdb;
  text-decoration: none;
}

/*
 * 宽屏：题名与落款分列左侧上下，竖排偈子立在右侧，中间大片留白——
 * 这是卷轴的章法，正文在右，题款在后（也就是左）。
 *
 * 徽记的位移由脚本写 transform，所以这里只管收势那一帧的位置；起手的居中大圆
 * 是从这个位置反推出来的，改这里的排布不用回去改脚本。
 */
@media (min-width: 900px) {
  .tao-stage {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "mark  verse"
      ".     verse"
      "colo  verse";
    align-content: stretch;
    justify-items: start;
    gap: 0 clamp(2rem, 7vw, 6rem);
    padding-right: clamp(var(--gutter), 9vw, 148px);
    text-align: left;
  }

  .tao-mark {
    grid-area: mark;
    align-items: flex-start;
  }

  .tao-crest {
    --crest: clamp(104px, 11vw, 140px);
  }

  /*
   * 竖排要立得住：列长跟着视口高走（vh 而不是 vw），一屏之内偈子才占得满，
   * 不至于在大片墨色里缩成一小簇。
   */
  /* 竖排那一栏整体占 verse 格：中文版里它装着偈子与题款两列，英文版只有偈子。 */
  .tao-scroll {
    grid-area: verse;
    align-self: center;
  }

  .tao-verse {
    align-self: center;
    font-size: clamp(1.4rem, 5vh, 2.75rem);
    line-height: 2.5;
  }

  .tao-colophon {
    grid-area: colo;
    align-self: end;
    max-width: 26rem;
  }

  .tao-gloss {
    margin: 0;
  }

  /* 左栏那道金丝拉长成一条界行，把题名与落款之间的空档串起来。 */
  .tao-rule {
    height: clamp(64px, 20vh, 200px);
  }
}

/* 脚本已按减动效偏好整段跳过，这里再兜一层，免得将来改脚本时漏掉。 */
@media (prefers-reduced-motion: reduce) {
  .tao,
  .tao.anim {
    --enso: 1;
    --reveal: 1;
    --tail: 1;
    --n: 9999;
  }
}

/* ── 通用装饰件：眉题、章节序号、汉字字体 ─────────────── */

/*
 * 眉题（ornaments.mjs 的 eyebrow）：大标题上方一行小字，两侧各一道淡出的泥金短线。
 * 汉字眉题（知命 · 测势 之类）另挂 .eyebrow-han：换宋体、放大一点，字距在所有语种下
 * 都放开——它是装饰性的题签，不是正文，方块字拉开是书法题签本来的样子。
 */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0 0 1.1rem;
  color: var(--accent-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-style: normal;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: var(--case-label);
}

.eyebrow-han {
  font-family: var(--font-han);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.32em;
}

.eyebrow-rule {
  flex: none;
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.eyebrow-rule:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* 左对齐的版面里眉题也左齐，只留右边那道线。 */
.eyebrow-start {
  justify-content: flex-start;
}

.eyebrow-start .eyebrow-rule:first-child {
  display: none;
}

/*
 * 章节序号：壹贰叁 / I II III。拉丁是 Cormorant 斜体，汉字是宋体正体（--display-style 在
 * CJK 下为 normal，不会合成出歪斜的方块字）。
 */
.chapter-no {
  display: block;
  margin: 0 0 0.5rem;
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: var(--display-style);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/*
 * 线描与水墨切图落在纸上时一律「正片叠底」：画里的白底被纸色吃掉，画像直接画在纸上，
 * 而不是一张浅色方块贴在更暖一档的纸面上（2026-09 纸色从 #faf9f5 调暖之后，这一条
 * 是那些切图不露边框的前提）。
 */
.entry-art,
.row-art,
.master-portrait,
.scard-art,
.crail-art,
.csys-card-art,
.phero-art img,
.psys-art img {
  mix-blend-mode: multiply;
}

/* ── 入口两卡（人生解读 / 趋势占测） ───────────────────── */

/*
 * 中道之后回到纸面。两栏像两幅并挂的立轴：序号、题名、画、说明自上而下，
 * 中缝一道泥金细线。每一栏身后透着一个极淡的大字（命 / 势），像宣纸背面透过来的墨。
 */
.entries {
  text-align: center;
}

.entries-head {
  max-width: 46rem;
  margin: 0 auto clamp(2.4rem, 7vh, 4.2rem);
}

.entries-head h2 {
  margin: 0 0 0.8rem;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.3rem);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

.entries-head h2 + p {
  margin: 0;
  color: var(--ink-2);
  font-family: var(--font-serif);
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.3rem);
  font-style: var(--display-style);
}

/*
 * 中缝用容器的伪元素画在 50% 处，而不是给右栏加 border-left——后者会贴在栏的左沿，
 * 也就是间隙的右边，不在正中。
 */
.entry-cols {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 8vw, 7rem);
  max-width: 84rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}

.entry-cols::before {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 6%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-line), transparent);
}

.entry-cols li {
  margin: 0;
}

.entry {
  position: relative;
  display: block;
  max-width: 30rem;
  margin: 0 auto;
  color: var(--ink);
  text-decoration: none;
}

.entry:hover {
  text-decoration: none;
}

/*
 * 身后那个大字，落在题名那一行的右侧——板块名很短，右边整块空着，像宣纸背面透过来的墨。
 * top 取画框的高度（画高 + 上下各 10px 内距与 1px 边），紧贴在画框下沿之下。
 */
.entry-glyph {
  position: absolute;
  z-index: 0;
  top: calc(clamp(190px, 22vw, 300px) + 1.6rem);
  right: 0;
  color: rgba(59, 48, 38, 0.055);
  font-family: var(--font-han);
  font-size: clamp(6rem, 9vw, 9rem);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/*
 * 画框：一道细线加一道更淡的内线（装裱的「一色绫边」），里面是那幅画。
 * 画在框内 cover 填满：两张横图的比例不一致（1.38 与 1.91），这样两栏的画与字左右对齐、
 * 彼此等高，下面的标题也就齐平。
 */
.entry-frame {
  position: relative;
  z-index: 1;
  display: block;
  padding: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 5px rgba(200, 179, 147, 0.32);
  overflow: hidden;
  transition: border-color 0.35s ease;
}

.entry-art {
  display: block;
  width: 100%;
  height: clamp(190px, 22vw, 300px);
  object-fit: cover;
  /* 画是插图，别在触屏上被长按当成可保存的图片。 */
  pointer-events: none;
  user-select: none;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 贴右摆：多出来的宽度从左边裁，把焦点留在框内（见 pages.mjs 的 ENTRY_ART.anchor）。 */
.entry-art-right {
  object-position: right center;
}

.entry:hover .entry-frame {
  border-color: var(--gold);
}

.entry:hover .entry-art {
  transform: scale(1.035);
}

.entry-body {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: clamp(1.4rem, 3.5vh, 2.2rem);
}

.entry-no {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: var(--display-style);
  letter-spacing: 0.08em;
}

.entry .t {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.25rem + 1.4vw, 2.5rem);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  transition: color 0.25s ease;
}

.entry:hover .t {
  color: var(--accent-ink);
}

.entry .d {
  display: block;
  margin-top: 0.45rem;
  color: var(--accent-ink);
  font-size: calc(var(--fs-label) + 0.08rem);
  font-weight: 600;
  letter-spacing: var(--tracking-btn);
  text-transform: var(--case-label);
}

.entry-lines {
  display: block;
  margin-top: 1.1rem;
}

/* 一句一行，句子自己该换行就换行。 */
.entry-lines span {
  display: block;
  margin-top: 0.5rem;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.85;
}

/* 一道墨线加一个箭头：这一栏是去往某处的门。悬停时线往前走一截。 */
.entry-go {
  position: relative;
  display: block;
  width: 2.8rem;
  height: 1px;
  margin-top: 1.6rem;
  background: currentColor;
  color: var(--ink);
  transition:
    width 0.35s ease,
    color 0.25s ease;
}

.entry-go::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.entry:hover .entry-go {
  width: 4.6rem;
  color: var(--accent-ink);
}

@media (max-width: 767px) {
  /* 竖排下中缝改成横线：两栏高度不一，伪元素定位不准，交给相邻兄弟的上边框。 */
  .entry-cols {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .entry-cols::before {
    display: none;
  }

  .entry-cols li + li {
    padding-top: 3rem;
    border-top: 1px solid var(--line);
  }

  .entry-glyph {
    font-size: 5.5rem;
  }
}

/*
 * 入场，全站共用一套。
 *
 * 带 data-reveal 的元素是一个入场单元，脚本给它挂 .anim（内部 .reveal 先藏起来），
 * 滚到跟前挂 .in 放行；每个元素差多少由生成时算好的 --d 决定（见 pages.mjs）。
 * .anim 由脚本挂，所以没有 JS 时下面这些「先藏起来」的规则一条都不生效，页面是静态的。
 */
.anim .reveal {
  opacity: 0;
}

.anim.in .reveal {
  animation: entryRise 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms) forwards;
}

/*
 * 画：整幅一起出来，不虚化、不裁切、不放大——头三成时长里就已全显，余下的时间只是轻轻落位，
 * 像把一幅画端端正正挂上去。所有带画的入场单元都走这一条（10-motion.css 里按身份指到这里）。
 */
.anim.in .entry-frame.reveal,
.anim.in .row-art-wrap.reveal,
.anim.in .master-figure.reveal,
.anim.in .phero-art.reveal,
.anim.in img.reveal {
  animation: entryArtIn 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms) forwards;
}

.entries.anim .entry-cols::before {
  transform: scaleY(0);
  transform-origin: top;
}

.entries.anim.in .entry-cols::before {
  animation: entryRule 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.18s forwards;
}

@keyframes entryRise {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(3px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes entryArtIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  32% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes entryRule {
  to {
    transform: scaleY(1);
  }
}

/* 脚本已按减动效偏好整段跳过，这里再兜一层，免得将来改脚本时漏掉。 */
@media (prefers-reduced-motion: reduce) {
  .anim .reveal {
    opacity: 1;
    animation: none;
  }

  .entries.anim .entry-cols::before {
    transform: none;
    animation: none;
  }
}

/* ── 提问条 ───────────────────────────────────────────── */

/*
 * 穿插在各节之间的一条：左边一问（题前一方朱印），右边一个输入框直达问 AI。
 * 整页读到底才见到入口对多数人来说太晚，这一条让人随时能开口。
 *
 * 盒子与首屏对话框同一套装裱：一道细线、一道更淡的内线，方角。
 */
.askband {
  padding: clamp(32px, 6vh, 56px) 0;
}

.askband-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem 2rem;
  max-width: var(--maxw-text);
  margin: 0 auto;
  padding: clamp(1.3rem, 3vw, 2.1rem) clamp(1.3rem, 3.5vw, 2.6rem);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
  box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px rgba(200, 179, 147, 0.3);
}

.askband-title {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
}

/* 题前一方朱印。方角微圆，字是宋体，白字压朱底——与字标右上那枚「康」印同一路。 */
.askband-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 3px;
  background: var(--accent-ink);
  color: #fff6ea;
  font-family: var(--font-han);
  font-size: 0.62em;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.askband-field {
  display: flex;
  align-items: center;
  flex: 1 1 20rem;
  /*
   * 弹性子项的最小宽度默认是 auto，也就是「不小于自身内容」。里面的按钮是 nowrap 的，
   * 窄屏上这一条就把整个输入框顶得比视口还宽，整页跟着能横向拖。显式归零才允许它收缩。
   */
  min-width: 0;
  max-width: 31rem;
  padding: 0.3rem 0.3rem 0.3rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--bg);
  transition: border-color 0.25s ease;
}

.askband-field:focus-within {
  border-color: var(--gold);
}

.askband-field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
}

.askband-field input:focus {
  outline: none;
}

.askband-field button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  padding: 0.6rem 1.15rem;
  border: 0;
  border-radius: 1px;
  background: var(--ink);
  color: #f7f0e3;
  font-family: inherit;
  font-size: calc(var(--fs-label) + 0.06rem);
  font-weight: 600;
  letter-spacing: var(--tracking-btn);
  text-transform: var(--case-label);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease;
}

.askband-field button:hover {
  background: var(--accent-ink);
}

/* 按钮的长短两句，宽屏出长的那句。窄屏对调，见下面 560px 那一档。 */
.askband-cta-short {
  display: none;
}

/*
 * 右边不是输入框而是一个直接跳转的按钮时用它（排盘页九门之前那一条）。
 * 比常规按钮宽一点：这一条右侧只有它一件东西，按常规尺寸会压不住左边那句话。
 */
.askband-cta {
  flex: none;
  padding: 0.8rem 1.9rem;
}

/*
 * 窄屏：一问一框并排放不下，改成上下两行，输入框独占一行。
 * 按钮标签在有些语种里很长（英文的「Ask your first question」），所以这里放开 nowrap，
 * 宁可折成两行也不要把整条顶宽。
 */
@media (max-width: 560px) {
  .askband-box {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    /*
     * 转成一列之后 flex-wrap 必须一起关掉，否则这一条会横着顶出屏幕。
     *
     * 换行的弹性容器，每条流的横向尺寸是按行内各项的 max-content 撑出来的，而 stretch 又让
     * 每一项都长到那个尺寸——于是横排时那句「Ask your first question」有多宽，竖排后整条就有
     * 多宽，容器自己反倒管不着（英文 320 宽的屏上顶出十二像素，整页能横向拖）。竖着排本来
     * 就只有一条流，wrap 在这里没有任何用处，关掉即可，各项这才回去听容器的宽度。
     */
    flex-wrap: nowrap;
  }

  /* 朱印落到问句上方居中：左边一方印、右边两行居中的字，窄屏上重心是歪的。 */
  .askband-title {
    flex-direction: column;
    justify-content: center;
    gap: 0.65rem;
  }

  /*
   * 输入框与按钮上下叠放，各占一整行。并排时大写加字距的按钮要吃掉一半宽度，
   * 占位那句「Saying it is already a beginning」只剩半截。
   */
  .askband-field {
    flex-direction: column;
    align-items: stretch;
    flex-basis: auto;
    gap: 0.6rem;
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .askband-field input {
    padding: 0.8rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    background: var(--bg);
  }

  .askband-field input:focus {
    border-color: var(--gold);
  }

  .askband-field button {
    justify-content: center;
    padding-block: 0.8rem;
  }

  /* 窄屏换上短的那句（见 pages.mjs 的 askBox）。 */
  .askband-cta-long {
    display: none;
  }

  .askband-cta-short {
    display: inline;
  }

  /*
   * 按钮独占一行之后仍允许折行：最长的几个语种（菲律宾语、德语）大写加字距，
   * 320 宽的屏上一行放不下。
   */
  .askband-field button {
    padding-inline: 0.8rem;
    white-space: normal;
    /* 1.4.12 会给每个字加上 0.12em 字距。flex:none 的按钮仍按整句 max-content
     * 定宽，菲律宾语「Itanong ang una mong tanong」会把整页顶出三十多像素。 */
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* ── 康立波老师 ───────────────────────────────────────── */

/*
 * 三段往下排：其人（像左字右）→ 同行那句大字 → 玄天模式与九门。
 * 头一段左右分栏，后两段居中成块，层次才拉得开。
 */
.master {
  background:
    radial-gradient(70% 50% at 30% 20%, rgba(255, 252, 244, 0.8), transparent 70%),
    var(--bg);
}

.master-who {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  /* 两列都按内容定宽再整组居中，不铺满整行——否则右边会空出一大块。 */
  justify-content: center;
  justify-items: center;
  max-width: var(--maxw-text);
  margin: 0 auto clamp(3rem, 8vh, 5rem);
}

@media (min-width: 760px) {
  .master-who {
    grid-template-columns: auto minmax(0, 34rem);
  }
}

.master-intro {
  max-width: 34rem;
}

/*
 * 画像立在一轮「月洞门」里：熟宣色的圆托着线描，外面一道泥金细圈（outline 随圆角走，
 * 不会被这一层的 overflow 裁掉）。画像底边落在圆里，肩线被圆口收住，像一枚肖像章。
 */
.master-figure {
  position: relative;
  width: clamp(210px, 26vw, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #fcf8ef 0%, var(--paper-2) 72%);
  outline: 1px solid var(--gold-line);
  outline-offset: 10px;
  overflow: hidden;
}

.master-portrait {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: 74%;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

.master-name {
  margin: 0;
  font-size: clamp(2.1rem, 1.4rem + 2vw, 3.2rem);
}

.master-since {
  max-width: 32rem;
  margin: 0.9rem 0 0;
  color: var(--ink-2);
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-style: var(--display-style);
  line-height: 1.6;
  text-wrap: pretty;
}

/* 头衔一行一条，前面一道泥金短线。左齐——六行长短不一，右对齐时左缘是一排锯齿。 */
.master-titles {
  margin: 1.4rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  color: var(--ink-2);
  font-size: 0.94rem;
  line-height: 1.6;
}

.master-titles li {
  position: relative;
  margin: 0 0 0.45rem;
  padding-left: 1.4rem;
}

.master-titles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.7rem;
  height: 1px;
  background: var(--gold);
}

@media (max-width: 759px) {
  .master-intro {
    text-align: center;
  }

  .master-intro .eyebrow {
    justify-content: center;
  }

  .master-intro .eyebrow-rule:first-child {
    display: block;
  }

  .master-titles {
    display: inline-block;
    text-align: start;
  }
}

/*
 * 结尾那句同行：拉丁是 Cormorant 斜体，中文套首屏的书法体，逐字浮现。
 *
 * 字是构建期就拆好的（见 pages.mjs 的 typeChars），所以没有 JS 时它只是一行正常的大字；
 * .anim 由脚本挂、.in 由 IntersectionObserver 挂，下面「先藏起来」那条才会生效。
 */
.master-oath {
  /* 放得下中文那句的一整行；英文长句自然折行，靠 balance 匀开。 */
  max-width: 50rem;
  margin: 0 auto;
  padding: clamp(2.4rem, 7vh, 4rem) 0;
  font-family: var(--font-display);
  /* 同 .hero h1：中间那一档要够大，否则手机上这句大字会掉到下限，跟正文分不出来。 */
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3.6rem);
  font-style: var(--display-style);
  font-weight: 500;
  line-height: var(--lh-display);
  text-align: center;
  text-wrap: balance;
}

.master-oath:lang(zh-Hans),
.master-oath:lang(zh-Hant) {
  font-weight: 400;
}

.master-oath .w {
  white-space: nowrap;
}

.master-oath.anim .ch {
  opacity: 0;
}

.master-oath.anim.in .ch {
  animation: tokenFade 0.42s ease-out var(--d, 0ms) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .master-oath.anim .ch {
    opacity: 1;
    animation: none;
  }
}

/*
 * 玄天这段：序号 → 标题 → 九门格 → 解释。
 * 九门正是玄天可调的那些盘，所以标题统领它们，解释放在格子之后收口。
 */
.xuantian {
  margin-top: clamp(1rem, 3vh, 2rem);
  text-align: center;
}

.xuantian-head {
  margin: 0 0 clamp(1.6rem, 4vh, 2.6rem);
  font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.7rem);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
}

/* 与上面的九宫格同宽，左右缘对齐。 */
.xuantian-lede {
  max-width: 52rem;
  margin: clamp(1.8rem, 4.5vh, 2.8rem) auto 0;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.95;
  text-align: center;
  text-wrap: pretty;
}

/* ── 九门术数：1 + 2×4 ────────────────────────────────── */


/*
 * 卡片规格照搬应用（见 h5/components/GuoxueCard.module.css）：竖卡 175×205、整卡底图、
 * 文字压在画面底部居中、10px 圆角、#cab49f 细线。切图 525×615 与卡片同比例，所以铺满
 * 既不拉伸也不裁切。
 *
 * 宽度取正文栏，与下面「立波择吉」那三行左右缘对齐，整页的版心才是一条线。
 * 卡片随之比应用里的 175px 大一点，但切图是 525×615、比版位还大，放大不会糊。
 */
.shushu-grid {
  --scard-gap: 0.7rem;
  display: grid;
  gap: var(--scard-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: var(--maxw-text);
  margin: 0 auto;
}

/* 六列两行：八字占左边两列两行，其余八门填右边四列。 */
@media (min-width: 780px) {
  .shushu-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .scard-lead {
    grid-column: span 2;
    grid-row: span 2;
    /* 跨两格两行时高度由行高决定，不再自带比例，否则会与行高打架。 */
    aspect-ratio: auto;
  }
}

.scard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  /* 175:205 —— 应用里竖卡的尺寸。 */
  aspect-ratio: 175 / 205;
  padding: 0 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  transition:
    border-color 0.25s ease,
    transform 0.25s ease;
}

.scard:hover {
  border-color: var(--accent);
  text-decoration: none;
}

/* 底图铺满整卡，文字直接叠在画面上——与应用一致。 */
.scard-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  transition: transform 0.35s ease;
}

.scard:hover .scard-art {
  transform: scale(1.04);
}

.scard-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  max-width: 164px;
}

.scard .t {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

.scard .d {
  color: #8f6f4c;
  font-size: 0.75rem;
  line-height: 1.35;
}

/* 八字是主位，卡片大一倍，字也跟着放一档。 */
.scard-lead .scard-copy {
  max-width: 22rem;
}

.scard-lead .t {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.scard-lead .d {
  font-size: 0.85rem;
}

@media (min-width: 780px) {
  .scard-lead {
    padding-bottom: 1.4rem;
  }

  /*
   * 风水那张是横版列表卡的切图（616×366），放进竖格若按整卡 cover，等于只取中间三成再放大，
   * 罗盘会撑满整格；若按 contain 整幅缩进去，又比另外八张小一截。
   * 折中：只占上面六成半的高度，在这个盒子里 cover——左右轻裁一点，罗盘的尺度就和其余八门齐了。
   */
  .scard:last-child .scard-art {
    inset: 5% 0 auto;
    height: 70%;
    object-position: center;
  }
}

/*
 * 两列版的末位（风水）横过来占满一行。
 *
 * 九张卡两列排会多出一张落单，而风水那张切图本就是横版列表卡用的（616×366），应用里
 * 也正是把它单独做成横卡（见 GuoxueCard.module.css 的 .list.fengshui）。这里照搬：
 * 画按卡高贴右、不裁，左边留给文字。
 */
@media (max-width: 779px) {
  .scard:last-child {
    grid-column: span 2;
    aspect-ratio: 362 / 122;
    align-items: flex-start;
    justify-content: center;
    padding: 0 0 0 15px;
    text-align: start;
  }

  .scard:last-child .scard-art {
    object-fit: contain;
    object-position: right center;
  }

  .scard:last-child .scard-copy {
    max-width: 68%;
  }
}

/* ── 交错三行 ─────────────────────────────────────────── */

.row-list {
  display: grid;
  gap: clamp(3.5rem, 11vh, 7rem);
  max-width: var(--maxw-text);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.row {
  display: grid;
  gap: clamp(1.6rem, 5vw, 4.5rem);
  align-items: center;
  margin: 0;
}

@media (min-width: 860px) {
  .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
   * 左右交错：DOM 恒为「图在前、字在后」，偶数行靠列序翻转而不是换一套结构——
   * 读屏与窄屏堆叠的顺序才始终一致。
   */
  .row:nth-child(even) .row-art-wrap {
    grid-column: 2;
    grid-row: 1;
  }

  .row:nth-child(even) .row-copy {
    grid-column: 1;
    grid-row: 1;
  }
}

/*
 * 画背后托一轮熟宣色的圆，外面一道泥金细圈——线描没有底，托一轮月才有落脚处。
 * 三张画裁去透明边之后比例各不相同（1.60 / 1.72 / 0.89），所以按等高摆放、宽度各随各的，
 * 三行的分量才一致；否则那张竖的会比另外两张矮一大截。
 */
.row-art-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(220px, 28vw, 340px);
}

.row-art-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(200px, 25vw, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fbf6ec 0%, var(--paper-2) 75%);
  outline: 1px solid var(--gold-line);
  outline-offset: 9px;
  transform: translate(-50%, -50%);
}

.row-art {
  position: relative;
  display: block;
  width: 100%;
  max-width: 26rem;
  height: clamp(190px, 25vw, 290px);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.row-copy h3 {
  margin: 0;
  font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem);
  font-weight: var(--fw-display);
}

.row-sub {
  margin: 0.45rem 0 0;
  color: var(--accent-ink);
  font-size: calc(var(--fs-label) + 0.08rem);
  font-weight: 600;
  letter-spacing: var(--tracking-btn);
  text-transform: var(--case-label);
}

.row-lines {
  margin-top: 1.1rem;
}

.row-lines span {
  display: block;
  margin-top: 0.55rem;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.9;
}

.row-act {
  margin: 1.6rem 0 0;
}

/* ── 用户评价 ─────────────────────────────────────────── */

/* 整条落在熟宣色上：前后都是纸色，这一段稍深一档，读起来是另一种声音。 */
.voices {
  background: var(--paper-2);
}

.voices-head {
  margin: 0 0 clamp(1.8rem, 5vh, 2.8rem);
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.7rem);
  text-align: center;
}

/*
 * 跑马灯：两份同样的卡片并排，一起左移一整份的宽度，走完正好接上，看不出断点。
 * 轨道要出血到版心之外，两端的卡片半露在屏幕边上，才有「还在往下滚」的意思。
 */
.voices-rail {
  display: flex;
  overflow: hidden;
  /* 两端各淡出一截，卡片是滚进滚出而不是被切断。 */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.voices-track {
  --voice-gap: clamp(1rem, 2vw, 1.6rem);
  display: flex;
  flex: none;
  gap: var(--voice-gap);
  margin: 0;
  padding: 0.6rem var(--voice-gap) 0.6rem 0;
  list-style: none;
  animation: voicesRoll 80s linear infinite;
}

@keyframes voicesRoll {
  to {
    transform: translateX(-100%);
  }
}

/* 停下来才读得完：鼠标停住、或键盘走到里面的链接时都暂停。 */
.voices-rail:hover .voices-track,
.voices-rail:focus-within .voices-track {
  animation-play-state: paused;
}

/* 一张笺纸：方角、细线、顶上一道泥金。不给投影——笺是平放在案上的。 */
.voice {
  display: flex;
  flex-direction: column;
  flex: none;
  width: clamp(17rem, 26vw, 23rem);
  margin: 0;
  padding: 1.7rem 1.8rem 1.5rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold-line);
  border-radius: 2px;
  background: var(--surface);
}

.voice-mark {
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 0.7;
}

.voice blockquote {
  flex: 1 1 auto;
  margin: 0.9rem 0 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: var(--display-style);
  line-height: 1.7;
}

.voice-who {
  margin: 1.4rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.85rem;
}

.voice-who .n {
  color: var(--ink);
  font-weight: 600;
}

.voice-who .m::before {
  content: " · ";
}

/*
 * 要求减少动态效果时不自动滚，退成一条可以自己横向拖的卡片带——内容一条都不少。
 * 遮罩也去掉，否则拖到两端的卡片会被淡成半透明。
 */
@media (prefers-reduced-motion: reduce) {
  .voices-rail {
    overflow-x: auto;
    mask-image: none;
  }

  .voices-track {
    animation: none;
  }

  /* 第二份是给无缝滚动用的复制品，不滚了就没有它的位置。 */
  .voices-track[aria-hidden='true'] {
    display: none;
  }
}

/* ── 首页问答 ─────────────────────────────────────────── */

/*
 * 左侧大标题、右侧发丝线手风琴。不再做成纸面卡片——题与答直接落在纸上，
 * 和截图那一栏「FAQs + 展开第一条」同一套骨架。
 * 不写死字号行高：答案吃 --lh-body，德文、泰文、菲律宾语才撑得住。
 */
.home-faq .wrap {
  max-width: var(--maxw-text);
}

.faq-layout {
  display: grid;
  gap: 1.75rem;
  align-items: start;
}

@media (min-width: 900px) {
  .faq-layout {
    grid-template-columns: minmax(11rem, 0.34fr) minmax(0, 1fr);
    gap: 4rem 5.5rem;
  }
}

.home-faq h2 {
  position: relative;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.6rem);
  font-weight: var(--fw-display);
  line-height: 1.15;
  letter-spacing: var(--tracking-heading);
}

.home-faq h2::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 1px;
  margin: 0.15em 0 0.9em;
  background: var(--gold);
}

/*
 * 宽屏把圆点提出文档流，落在段落上边距里，让「问答」和第一条问题齐平。
 * 窄屏圆点仍占一行，叠在标题上头，不跟右侧抢位置。
 */
@media (min-width: 900px) {
  .home-faq h2::before {
    position: absolute;
    top: -1.15em;
    left: 0;
    margin: 0;
  }
}

.faq-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.faq-item {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.35rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 1.16rem;
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  flex: none;
  width: 0.4em;
  height: 0.4em;
  margin-top: 0.38em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  transition: transform 0.2s ease, margin-top 0.2s ease;
}

.faq-item[open] summary::after {
  margin-top: 0.58em;
  transform: rotate(-135deg);
}

.faq-body {
  padding: 0 2.2rem 1.45rem 0;
}

.faq-body p {
  max-width: none;
  margin: 0 0 var(--gap-para);
  color: var(--ink);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  overflow-wrap: break-word;
}

.faq-body p:last-child {
  margin-bottom: 0;
}

.faq-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.55rem;
  font-size: 0.92rem;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-body {
    animation: faqOpen 0.28s ease;
  }
}

@keyframes faqOpen {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after {
    transition: none;
  }
}

@media (max-width: 560px) {
  .home-faq h2 {
    font-size: clamp(1.85rem, 9vw, 2.4rem);
  }

  .faq-item summary {
    padding: 1.15rem 0;
    font-size: 1rem;
  }

  .faq-body {
    padding: 0 1.6rem 1.15rem 0;
  }
}

/* ── 结尾 ─────────────────────────────────────────────── */

/*
 * 页尾：一句中道的话，一个提问框，底下一抹远山。
 * 最近那一层山是实心的墨色（ornaments.mjs 的 ground），直接落进下面同色的页脚——
 * 读到最后，纸上的山一路接进了那一方墨里。
 */
.closing {
  position: relative;
  padding-bottom: clamp(150px, 22vw, 300px);
  text-align: center;
  overflow-x: clip;
}

.closing .wrap {
  position: relative;
  z-index: 1;
}

/*
 * 一句话收束，宽屏上不折行：两头留白多得是，36rem 的旧上限把一句二十来字的话硬折成两行，
 * 末行只剩三四个字。折不折交给版心宽度，真放不下（窄屏）时 balance 让两行一样长。
 */
.closing-lede {
  max-width: 52rem;
  margin: 0 auto clamp(1.8rem, 4.5vh, 2.6rem);
  color: var(--ink-2);
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  font-style: var(--display-style);
  line-height: 1.6;
  text-wrap: balance;
}

.closing-hills {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(140px, 22vw, 320px);
  /* 只化开顶上：底下那层是实心墨色，要严丝合缝落进页脚。 */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%);
  mask-image: linear-gradient(180deg, transparent 0, #000 20%);
}

/* ── 长页版式的板块介绍页（人生解读 / 趋势占测） ───────── */

/* 每一节的标题块：眉题 + h2 + 导语，居中。 */
.phead {
  max-width: 46rem;
  margin: 0 auto clamp(2.4rem, 6vh, 3.6rem);
  text-align: center;
}

.phead h2 {
  margin: 0 0 0.85rem;
  font-size: clamp(2rem, 1.35rem + 2vw, 3.2rem);
  line-height: var(--lh-heading);
}

.phead-lede {
  margin: 0;
  color: var(--ink-2);
  font-size: 1.06rem;
  line-height: 1.8;
  text-wrap: pretty;
}

/* 页头：左字右画。画装在一轮月洞门里，身后压着这一板块的那个大字，底下一抹远山。 */
.phero {
  position: relative;
  padding: clamp(24px, 5vh, 56px) 0 0;
  background: radial-gradient(50% 45% at 70% 38%, rgba(255, 252, 244, 0.9), transparent 72%);
  overflow-x: clip;
}

.phero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: calc(var(--maxw-text) + var(--gutter) * 2);
  padding-bottom: clamp(110px, 16vh, 180px);
}

@media (min-width: 900px) {
  .phero-inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    min-height: clamp(460px, 64vh, 660px);
  }
}

.phero-copy h1 {
  max-width: 13em;
  margin: 0 0 1.2rem;
  font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.6rem);
  line-height: var(--lh-hero);
}

.phero-copy .lede {
  max-width: 34rem;
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(1.04rem, 0.98rem + 0.3vw, 1.18rem);
  line-height: 1.75;
  text-wrap: pretty;
}

.phero-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.8rem;
  margin: 2.2rem 0 0;
}

.phero-link {
  color: var(--ink);
  font-size: 0.98rem;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.phero-link:hover {
  color: var(--accent-ink);
  border-color: var(--accent-ink);
  text-decoration: none;
}

.phero-art {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1;
}

.phero-moon {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fcf8ef 0%, var(--paper-2) 74%);
  outline: 1px solid var(--gold-line);
  outline-offset: 12px;
}

.phero-glyph {
  position: absolute;
  z-index: 2;
  top: 9%;
  left: 3%;
  display: grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  border: 2px solid var(--accent-ink);
  border-radius: 4px;
  background: rgba(255, 252, 246, 0.72);
  box-shadow: inset 0 0 0 3px rgba(255, 252, 246, 0.72), inset 0 0 0 4px rgba(196, 74, 13, 0.35);
  color: var(--accent-ink);
  font-family: var(--font-han);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-weight: 600;
  line-height: 1;
  transform: rotate(-4deg);
  pointer-events: none;
  user-select: none;
}

.phero-art img {
  position: relative;
  z-index: 1;
  display: block;
  width: 94%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.phero-hills {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(120px, 20vh, 230px);
}

@media (max-width: 899px) {
  .phero-art {
    max-width: 340px;
  }
}

/* 读哪几件事：一格一门，顶上一道细线，题前一枚圆印。 */
.aspect-grid {
  display: grid;
  gap: 2.6rem clamp(1.8rem, 3.5vw, 3.2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  max-width: var(--maxw-text);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.aspect {
  margin: 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.aspect-glyph {
  display: inline-grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  color: var(--accent-ink);
  font-family: var(--font-han);
  font-size: 1.45rem;
  line-height: 1;
}

.aspect-t {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 1.2rem + 0.4vw, 1.6rem);
}

.aspect-d {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.8;
}

/* 三步：整条落在熟宣色上，大号序号 + 一道短线。 */
.psteps {
  background: var(--paper-2);
}

.step-list {
  display: grid;
  gap: 2.6rem clamp(2rem, 4vw, 3.6rem);
  max-width: var(--maxw-text);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

@media (min-width: 860px) {
  .step-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.step {
  margin: 0;
}

.step-no {
  display: block;
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 2rem + 1.8vw, 3.8rem);
  font-style: var(--display-style);
  font-weight: 500;
  line-height: 1;
}

.step-no::after {
  content: "";
  display: block;
  width: 2.6rem;
  height: 1px;
  margin: 1.1rem 0 1.2rem;
  background: var(--gold-line);
}

.step-t {
  margin: 0 0 0.55rem;
  font-size: clamp(1.3rem, 1.15rem + 0.4vw, 1.55rem);
}

.step-d {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.8;
}

/* 旁注：左边一道朱线，托在纸色上。 */
.pnote {
  max-width: var(--maxw-text);
  margin: clamp(2.4rem, 6vh, 3.4rem) auto 0;
  padding: 1.2rem 1.5rem;
  border-left: 2px solid var(--accent);
  background: rgba(255, 252, 246, 0.72);
}

.pnote-t {
  margin: 0 0 0.3rem;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: var(--fw-heading);
}

.pnote-d {
  margin: 0;
  color: var(--ink-2);
}

/*
 * 用哪一门：一张题卡，门类插图 + 名字、副名、起盘一路的小签与所长。
 *
 * 两门（人生解读的八字与紫微）任何宽度下都并排一行：两门是对举的，拆成上下两行就读成了先后。
 * 宽屏是横卡（图左字右）；窄屏换竖卡（图上字下），两张才并得进一部手机。
 * 六门（趋势占测）宽屏三列、中屏两列横卡，手机上同样两列竖卡，最窄的屏退成一列横卡。
 */
.psys-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 1.4rem;
  max-width: var(--maxw-text);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

@media (min-width: 1100px) {
  .psys-n6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.psys-grid li {
  margin: 0;
}

.psys-card {
  display: grid;
  grid-template-columns: clamp(5.5rem, 11vw, 7.5rem) minmax(0, 1fr);
  gap: 1.3rem;
  align-items: start;
  /* 同一行的卡被拉成等高时，多出的高度不许分给各行——否则竖卡里短的那张标题会往下掉。 */
  align-content: start;
  height: 100%;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  transition:
    border-color 0.25s ease,
    transform 0.25s ease;
}

.psys-card:hover {
  border-color: var(--gold);
  text-decoration: none;
}

/*
 * 方框取景：图按 --w / --l / --t 放大并挪位，把主体摆到框心（数值与理由见 pages.mjs 的
 * PSYS_CROP）。框必须是正方形——t 与 l 共用框边长作分母，换成别的比例主体就又偏了。
 */
.psys-art {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg);
}

.psys-art img {
  position: absolute;
  top: var(--t, 0%);
  left: var(--l, 0%);
  width: var(--w, 100%);
  max-width: none;
  height: auto;
  transition: transform 0.6s ease;
}

.psys-card:hover .psys-art img {
  transform: scale(1.05);
}

.psys-body .t {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 1.2rem + 0.4vw, 1.6rem);
  font-weight: var(--fw-heading);
  line-height: 1.25;
  transition: color 0.2s ease;
}

.psys-card:hover .t {
  color: var(--accent-ink);
}

/* 副名与起盘一路的小签同在一行，签放不下时自己折到下一行。 */
.psys-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  margin: 0.2rem 0 0.65rem;
}

.psys-body .s {
  display: block;
  color: var(--ink-3);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-style: var(--display-style);
}

/* 时间盘用泥金、摇卦盘用朱色，与上面两路说明的顶线同色，一眼对得上。 */
.psys-tag {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.psys-tag-time {
  color: #876a3f;
}

.psys-tag-shake {
  color: var(--accent-ink);
}

.psys-body .d {
  display: block;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.75;
}

/* 竖卡：图在上，占满卡宽但不超过 12rem，居中；字照旧左齐。 */
@media (max-width: 759px) {
  .psys-grid {
    gap: 0.8rem;
  }

  .psys-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    padding: 0.9rem;
  }

  .psys-art {
    width: 100%;
    max-width: 12rem;
    margin-inline: auto;
  }

  .psys-body .t {
    font-size: 1.25rem;
  }

  .psys-body .d {
    font-size: 0.9rem;
    line-height: 1.7;
  }
}

/* 最窄的屏：六门两列竖卡每张不到一百五十像素宽，退成一列横卡。两门不退，理由见 .psys-grid。 */
@media (max-width: 399px) {
  .psys-n6 {
    grid-template-columns: minmax(0, 1fr);
  }

  .psys-n6 .psys-card {
    grid-template-columns: 5.2rem minmax(0, 1fr);
    gap: 1rem;
  }
}

/*
 * 起盘的两路（趋势占测）：两块并排，顶上一道色线——时间盘泥金、摇卦盘朱色，
 * 与下面卡上的小签同色。
 */
.psys-modes {
  display: grid;
  gap: 1rem 1.4rem;
  max-width: var(--maxw-text);
  margin: 0 auto clamp(1.8rem, 4vh, 2.6rem);
}

@media (min-width: 760px) {
  .psys-modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.psys-mode {
  padding: 1.3rem 1.5rem 1.4rem;
  border-top: 2px solid var(--gold);
  background: rgba(255, 252, 246, 0.72);
}

.psys-mode-shake {
  border-top-color: var(--accent-ink);
}

.psys-mode-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0 0 0.65rem;
}

.psys-mode-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: #876a3f;
  font-family: var(--font-han);
  font-size: 1.05rem;
  line-height: 1;
}

.psys-mode-shake .psys-mode-mark {
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}

.psys-mode-t {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: var(--fw-heading);
  line-height: 1.2;
}

.psys-mode-k {
  color: var(--ink-3);
  font-family: var(--font-serif);
  font-size: 0.98rem;
  font-style: var(--display-style);
}

.psys-mode-d {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.97rem;
  line-height: 1.8;
  text-wrap: pretty;
}

.psys-more {
  margin: clamp(1.8rem, 4vh, 2.6rem) 0 0;
  text-align: center;
}

/* 「查看九种排盘术数 →」整句不折行：箭头掉到下一行、或者字劈成两半，都像是没排完。 */
.psys-more a {
  display: inline-block;
  white-space: nowrap;
}

.psys-more a,
.prel-more a {
  color: var(--ink);
  font-size: calc(var(--fs-label) + 0.08rem);
  font-weight: 600;
  letter-spacing: var(--tracking-btn);
  text-transform: var(--case-label);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
}

.psys-more a:hover {
  color: var(--accent-ink);
  border-color: var(--accent-ink);
  text-decoration: none;
}

/* 可以这样问：一条条签子，题前一方小朱印，末尾一个会往前挪的箭头。 */
.q-list {
  display: grid;
  gap: 0.8rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  max-width: 60rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.q-list li {
  margin: 0;
}

.q-list a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  height: 100%;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
  transition: border-color 0.2s ease;
}

.q-list a:hover {
  border-color: var(--gold);
  text-decoration: none;
}

.q-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 2px;
  background: var(--accent-ink);
  color: #fff6ea;
  font-family: var(--font-han);
  font-size: 0.85rem;
  line-height: 1;
}

.q-t {
  flex: 1 1 auto;
  min-width: 0;
}

.q-go {
  flex: none;
  color: var(--gold);
  transition: transform 0.25s ease, color 0.25s ease;
}

.q-list a:hover .q-go {
  color: var(--accent-ink);
  transform: translateX(4px);
}

/*
 * 一句中道的话，落在一整条墨色上（与首页中道一节、页脚同一块墨）。
 * 顶栏压到这一条上时会换装，靠的是 data-nav-ink（见 chrome.mjs 的 CHROME_SCRIPT）。
 */
.pquote {
  padding: clamp(80px, 14vh, 150px) 0;
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(200, 165, 106, 0.1), transparent 65%),
    var(--ink-bg);
  color: var(--ink-fg);
  text-align: center;
}

.pquote-fig {
  max-width: 48rem;
  margin: 0 auto;
}

.pquote-mark {
  display: block;
  height: 0.5em;
  color: rgba(212, 180, 126, 0.55);
  font-family: var(--font-serif);
  font-size: 6rem;
  line-height: 1;
}

.pquote blockquote {
  margin: 0;
}

.pquote-main {
  margin: 0;
  color: #f3e9d8;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.8rem);
  font-style: var(--display-style);
  font-weight: 500;
  line-height: 1.4;
  text-wrap: balance;
}

.pquote-sub {
  max-width: 36rem;
  margin: 1.6rem auto 0;
  color: rgba(240, 230, 214, 0.62);
  font-size: 1.05rem;
  line-height: 1.85;
  text-wrap: pretty;
}

.pquote-seal {
  display: block;
  width: 30px;
  height: auto;
  margin: 2.4rem auto 0;
}

.pfaq h2 {
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem);
}

/* 相关板块：三张题签，顶上一道泥金。 */
.prel-h {
  margin: 0 0 clamp(1.8rem, 4vh, 2.6rem);
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem);
  text-align: center;
}

.prel-grid {
  display: grid;
  gap: 1.2rem;
  max-width: var(--maxw-text);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .prel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.prel-grid li {
  margin: 0;
}

.prel-card {
  position: relative;
  display: block;
  height: 100%;
  padding: 1.6rem 3.2rem 1.5rem 1.6rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.25s ease;
}

.prel-card:hover {
  border-color: var(--gold);
  text-decoration: none;
}

.prel-card .t {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 1.25rem + 0.4vw, 1.7rem);
  font-weight: var(--fw-heading);
  line-height: 1.25;
}

.prel-card.ext .t::after {
  content: "↗";
  margin-left: 0.35rem;
  font-size: 0.7em;
  opacity: 0.55;
}

.prel-card .d {
  display: block;
  margin-top: 0.35rem;
  color: var(--ink-3);
  font-size: 0.94rem;
}

.prel-card .go {
  position: absolute;
  top: 1.7rem;
  right: 1.5rem;
  color: var(--gold);
  transition: transform 0.25s ease, color 0.25s ease;
}

.prel-card.ext .go {
  display: none;
}

.prel-card:hover .go {
  color: var(--accent-ink);
  transform: translateX(4px);
}

/* 六门三列时每张卡窄一截，插图收小，把宽度让给字。 */
@media (min-width: 1100px) {
  .psys-n6 .psys-card {
    grid-template-columns: 5.6rem minmax(0, 1fr);
    gap: 1.1rem;
  }
}

/* ── 排盘工具页：Hero ───────────────────────────────────── */

/*
 * 这一页的标语要求整句不断行，所以字号得跟着屏宽走，而不是先定死再指望它放得下。
 *
 * 二十二个全角字，占宽正好是字号的二十二倍；版心是屏宽减两侧 20px 的边。3.9vw 这一档
 * 让两者始终差着十几像素：390 宽的手机上排 15.2px，一行 335px 落在 350px 的版心里；
 * 窄到 320 也还剩五像素的余量。早先中间那档取 2.9vw、下限 0.86rem，390 上只有 13.8px
 * ——比正文还小一号，是这一句在手机上显得虚的原因；而到了 320 宽，下限那 13.8px 反而
 * 排不下，会横着顶出版心。
 *
 * 只对中文生效：其余语种那一句长得多，禁止断行会让它横着顶出版心，把整页撑出一条横向滚动条。
 * 繁体那一句与简体同长（二十二个全角字，见 product-copy.mjs），所以两个书写系统一起放进来。
 */
html[lang='zh-Hans'] .hero-charting .lede,
html[lang='zh-Hant'] .hero-charting .lede {
  max-width: none;
  font-size: clamp(0.72rem, 3.9vw, 1.15rem);
  white-space: nowrap;
}

/* ── 排盘工具页：页顶九门跑马灯 ─────────────────────────── */

/*
 * 九张竖卡从右往左滚。做法与「听听他们怎么说」同一套：两份同样的卡片并排，一起向左平移
 * 一整份的宽度，走完正好接上，看不出断点（详见 .voices-rail 那段说明）。轨道出血到版心
 * 之外、两端各淡出一截，卡片是滚进滚出而不是被切断。
 *
 * 卡片刻意不是链接：它一直在动，点移动的目标本身就难受；这一节要说的是「有哪九门」，
 * 真要进去，下面那个主按钮（charting/copy.mjs 的 tryCta）是唯一且明确的入口。
 */
.crail {
  padding: 0 0 clamp(2.2rem, 6vh, 3.4rem);
}

.crail-rail {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.crail-track {
  --crail-gap: clamp(0.7rem, 1.4vw, 1.1rem);
  display: flex;
  flex: none;
  gap: var(--crail-gap);
  margin: 0;
  padding: 0.4rem var(--crail-gap) 0.4rem 0;
  list-style: none;
  animation: crailRoll 56s linear infinite;
}

@keyframes crailRoll {
  to {
    transform: translateX(-100%);
  }
}

/* 停下来才看得清哪张是哪张。 */
.crail-rail:hover .crail-track {
  animation-play-state: paused;
}

/* 与首页九宫格那九张同一个规格：175:205，是应用里竖卡的尺寸。 */
.crail-card {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: clamp(138px, 15vw, 184px);
  aspect-ratio: 175 / 205;
  margin: 0;
  padding: 0 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg);
  overflow: hidden;
  text-align: center;
}

.crail-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/*
 * 风水那张是横版列表卡的切图（616×366）。塞进竖格按整卡 cover，等于只取中间三成再放大，
 * 罗盘会撑破格子；只让它占上面约七成高、在那个盒子里 cover，尺度就和另外八门齐了。
 * 与首页九宫格里 .scard:last-child 同一处理。
 */
.crail-card:last-child .crail-art {
  inset: 6% 0 auto;
  height: 68%;
}

.crail-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.crail-copy .t {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.5vw, 1.24rem);
  font-weight: 600;
  line-height: 1.3;
}

.crail-copy .d {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

/* 按钮在跑马灯之上，紧接着 Hero 那句话。 */
.crail-act {
  margin-bottom: clamp(1.6rem, 4vh, 2.4rem);
  text-align: center;
}

/* 比常规按钮长一截：它是这一页唯一的主入口，短按钮压不住上面那句标语。
 * 375px + 正文 200% 字号时，nowrap 的德文「Jetzt ein Chart stellen」会把整页顶出约 55px。 */
.crail-cta {
  min-width: min(20rem, 78vw);
  max-width: 100%;
  padding: 0.85rem 2.4rem;
  font-size: 1.02rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

/*
 * 要求减少动态效果时不自动滚，退成一条可以自己横向拖的卡片带——内容一条都不少。
 * 遮罩也去掉，否则拖到两端的卡片会被淡成半透明。
 */
@media (prefers-reduced-motion: reduce) {
  .crail-rail {
    overflow-x: auto;
    mask-image: none;
  }

  .crail-track {
    animation: none;
  }

  /* 第二份是给无缝滚动用的复制品，不滚了就没有它的位置。 */
  .crail-track[aria-hidden='true'] {
    display: none;
  }
}

/* ── 排盘工具页：九门交错长节 ───────────────────────────── */

.csys-head {
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 6vh, 3.2rem);
  text-align: center;
}

/*
 * 版心与页上别的东西同宽（--maxw-text）：两个功能板块、这九节、上下两条提问条，四处
 * 左右边沿在一条线上。早先这里独用 84rem，比提问条宽出 8rem，宽屏上看得出参差。
 */
.csys-list {
  display: grid;
  gap: clamp(3.5rem, 10vh, 6.5rem);
  max-width: var(--maxw-text);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/*
 * 版式的两条竖线，两个功能板块与九节共用。
 *
 * --chart-card-w  入口卡 / 演示屏的宽度。卡在栏里居中，栏比它宽出来的那一段就是**左沿线**
 *                 的缩进量，落在左栏的正文与演示屏都按它起排。
 * --chart-text-w  正文的行宽上限。正文在栏里靠左，它的右端就是**右沿线**，落在右栏的
 *                 卡片、演示屏与衬底图都按它收边。
 *
 * 两个值各只写一处，改宽度不会把对齐改坏。
 */
.cfeat,
.csys {
  --chart-card-w: 24rem;
  --chart-text-w: 34rem;
}

.csys {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
  margin: 0;
  /* 顶栏是 sticky，从跑马灯或外链锚点跳过来时要给它让出高度。 */
  scroll-margin-top: calc(var(--header-h) + 16px);
}

@media (min-width: 900px) {
  /* 盘面那栏窄一点：盘本来就有自己的宽度上限，两栏均分会让它孤零零浮在半栏正中。 */
  .csys {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }

  /*
   * 左右交错：DOM 恒为「盘在前、字在后」，偶数节靠列序翻转而不是换一套结构——
   * 读屏与窄屏堆叠的顺序才始终一致。与首页交错三行同一做法。
   *
   * 交错到右边的那几节，盘面靠右沿线收边，不停在栏心。
   *
   * 偶数节的盘面占的正是奇数节正文占的那一栏（都是第 2 列、都是 1fr），所以这里的 100%
   * 与那一栏同宽，100% - 行宽上限 就是正文在栏里靠左之后右边剩下的那一段。把它让成
   * padding、卡片再靠右，卡的右沿便与正文的右端在同一条线上。
   */
  .csys:nth-child(even) .csys-chart {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    padding-right: max(0px, 100% - var(--chart-text-w));
  }

  /*
   * 交错到左边的那几节，正文跟着盘面的左沿走，不去贴版心的外沿。
   *
   * 偶数节的正文占的正是奇数节盘面占的那一栏——都是第 1 列、都是 0.85fr，所以这里的
   * 100% 与那一栏同宽，(100% - 卡宽) / 2 算出来的就是 .csys-frame 在栏内居中时让出的
   * 那段空白。两侧因此逐像素对齐，且栏窄到装不下一张卡时两边同时归零，不必为断点另写一档。
   */
  .csys:nth-child(even) .csys-copy {
    grid-column: 1;
    grid-row: 1;
    padding-left: max(0px, (100% - var(--chart-card-w)) / 2);
  }
}

.csys-chart {
  display: flex;
  justify-content: center;
  min-width: 0;
}

/*
 * 入口卡的位置。
 *
 * 这里原先摆的是问 AI 对话里那张小排盘卡，随内容长高、不封高度。换成插图卡之后改为定比例：
 * 九张插图本来就是同一套竖版切图（175:205），封住比例九节看下来才是齐的，
 * 而卡里那一层起盘动画也需要一个确定的框才好编排。
 */
.csys-frame {
  position: relative;
  width: 100%;
  max-width: var(--chart-card-w);
}

/*
 * 入口卡：插图铺满，底下压一句祈使句（copy.tryCardCta），最上面盖着那一层起盘动画。
 *
 * 与首页九宫格那张卡（.scard）刻意同形——同一张切图、同样的边框圆角、同样的悬停放大。
 * 差别只在这张会动：停上去先演一遍这一门怎么起盘，演完浮出整页排盘（见 chartingScript）。
 */
.csys-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  aspect-ratio: 175 / 205;
  padding: 0 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.csys-card:hover,
.csys-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 6px 24px rgba(60, 42, 24, 0.14);
  text-decoration: none;
}

.csys-card-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  transition: transform 0.35s ease;
}

.csys-card:hover .csys-card-art {
  transform: scale(1.04);
}

/*
 * 末位（风水）那张是横版列表卡的切图（616×366）。竖卡按整卡 cover，等于把罗盘放大到出框：
 * 左右各裁掉一截，盘沿被切平。只让它占中间八成高、在那个盒子里 cover，整只罗盘就落在卡内。
 * 与页顶跑马灯的 .crail-card:last-child、首页九宫格的 .scard:last-child 同一手法；这张卡
 * 比那两处大得多，收到八成即可，不必也收到七成。
 */
.csys:last-child .csys-card-art {
  inset: 10% 0 auto;
  height: 80%;
}

/*
 * 那一句祈使句。
 *
 * 压在插图上，所以要一层从下往上的暗角托底——九张切图深浅不一，只靠字色保证不了对比度。
 */
.csys-card-cta {
  position: relative;
  z-index: 1;
  padding: 0.35em 1.1em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(250, 249, 245, 0.92);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.csys-card:hover .csys-card-cta {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/*
 * 起盘动画那一层。
 *
 * 平时整层透明、不占事件；脚本挂上 .is-casting 才显形（内部九套关键帧见 charting/_cast.css）。
 * 动画期间把卡面那句 CTA 淡掉——话已经听懂了，留着只会挡住正在演的盘。
 */
/*
 * 卡面上的起盘动画——应用里排盘算完之前盖在整页上的那一层，整份搬来（见 charting/reveals.mjs）。
 *
 * 它在应用里是 `position:absolute; inset:0` 铺满一整屏手机，尺寸（门板宽度、梅枝 340×240、
 * 双手贴图、蓍草长度）全是按那个尺度定的。直接塞进两百来像素的卡框，门板会宽得只剩一条缝、
 * 梅枝只露出一截。所以给它一个固定尺寸的虚拟视口，再整体缩放贴进卡框：比例与应用完全一致，
 * 只是小一号。缩放系数由脚本按卡片实测尺寸下发（--rev-scale），CSS 算不出「缩到刚好装下」。
 */
/*
 * 裁切层要盖满整张卡。
 *
 * 负的左右下偏移是在抵消卡片自己的 `padding: 0 6px 12px`——这张卡是 flex 容器，绝对定位子元素
 * 的 inset 落在内容盒上，写 `inset: 0` 会比卡片窄 12px、矮 12px，两侧各露出一条底色。
 * 数值与上面 .csys-card 的 padding 一一对应，改那边记得改这里。
 */
.csys-card-reveal {
  position: absolute;
  inset: 0 -6px -12px;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.csys-card.is-casting .csys-card-reveal {
  opacity: 1;
}

/*
 * 虚拟视口：动画在这块 390×560 里按应用的原尺度铺开，再整体缩放**铺满**卡框
 * （scale 取两个方向的较大者，短边溢出的部分由外层裁掉）。取较小者会在卡里留出黑边，
 * 动画只占中间一小块，看起来像没对齐。缩放系数由脚本按卡片实测尺寸下发。
 */
.csys-card-vp {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 390px;
  height: 560px;
  transform: translate(-50%, -50%) scale(var(--rev-scale, 0.6));
}

.csys-card.is-casting .csys-card-cta {
  opacity: 0;
  transition: opacity 140ms ease-out;
}

/*
 * 入场时整块界面与首页那几张画同一条规则（见 entryArtIn）：整幅先显出来，再轻轻落位。
 */
.anim.in .csys-frame.reveal {
  animation: entryArtIn 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms) forwards;
}

/*
 * 文字那一栏。
 *
 * overflow 收住是为了底纹：那张图贴着栏的外沿、还要探出去一点，不收的话它会把整页撑宽，
 * 在窄屏上多出一条横向滚动条。
 */
.csys-copy {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

/*
 * 文字背后压着的那张门类配图——就是页顶跑马灯上的同一张，放大、调淡、贴在版心外侧。
 *
 * 它不承载信息（alt 为空、aria-hidden），作用是让每一节有自己的气质：九节结构完全相同，
 * 只靠文字区分会读成一张长表格。靠内的一侧用遮罩渐隐，免得图的硬边横穿正文。
 */
.csys-ghost {
  position: absolute;
  z-index: 0;
  top: 50%;
  /*
   * 收在右沿线上，与这一栏正文的右端齐平——它先前是 -1.5rem（贴栏的外沿再探出去一点，
   * 多出的部分由 .csys-copy 的 overflow 切掉），那条线比正文的右端还要靠外六七个字，
   * 一节里于是有两条右边界。
   */
  right: max(0px, 100% - var(--chart-text-w));
  width: auto;
  height: min(115%, 25rem);
  transform: translateY(-50%);
  opacity: 0.085;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 55%);
}

/* 交错到左边那几节，底纹跟着挪到左沿线上，始终背对盘面那一栏。 */
.csys:nth-child(even) .csys-ghost {
  right: auto;
  left: max(0px, (100% - var(--chart-card-w)) / 2);
  mask-image: linear-gradient(270deg, transparent, #000 55%);
}

.csys-text {
  position: relative;
  z-index: 1;
  max-width: var(--chart-text-w);
}

.csys-name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.8vw, 1.75rem);
  line-height: 1.3;
  color: var(--accent-ink);
}

/* 罗马字副名跟在门名后面，小一档淡一档——像书口上的拉丁转写，不与门名争。 */
.csys-sub {
  margin-left: 0.7em;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.68em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.csys-lines {
  margin-top: 1rem;
}

.csys-lines p {
  margin: 0.7rem 0 0;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.95;
}

.csys-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.4rem;
  margin: 1.6rem 0 0;
}

/*
 * 这里曾有一个「排盘示例」的文字按钮，是浮层唯一的触发点。撤了：现在左边整张卡就是触发点，
 * 停上去先演起盘动画再浮出那一页，一个入口比「一张静态卡 + 旁边一行小字」清楚得多。
 */

/*
 * 「××详解」。有内容层工具页的门类是 <a>，还没写的是 <span>（见 charting/page.mjs）。
 * 两种形态同一副字样——它在版面上的分量不该随「那一页写没写」而变。
 */
.csys-wiki {
  color: var(--muted);
  font-size: 0.92rem;
  cursor: default;
}

/*
 * 可点的那一版才给链接的手感。
 *
 * 底线用 text-decoration-color 调淡而不是平时不画、悬停才画：后者会在悬停瞬间把这一行
 * 顶高一点（下划线要占行盒），旁边就是「立即排盘」那个按钮，一起抖。
 */
a.csys-wiki {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.28em;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

a.csys-wiki:hover,
a.csys-wiki:focus-visible {
  color: var(--accent-ink);
  text-decoration-color: currentColor;
}

/* ── 排盘工具页：排盘示例浮层 ───────────────────────────── */

/*
 * 卡面上那一下起盘演完，这一层就从那张卡长出来。
 *
 * 位置与放大原点由脚本按卡片的位置算（见 chartingScript），这里只管外观与那一下放大。
 * 不是模态：没有背板、不锁焦点、指针一离开就收——它是浮起来看一眼的东西，不是要人确认的
 * 对话。所以也没有标题栏，浮层里直接就是那一页排盘；关闭键只在触屏上出，理由见 .cpop-close。
 */
.cpop {
  position: fixed;
  z-index: 90;
  display: flex;
  flex-direction: column;
  width: min(94vw, 30rem);
  max-height: min(86vh, 54rem);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: 0 2px 6px rgba(60, 42, 24, 0.1), 0 18px 50px rgba(60, 42, 24, 0.22);
  overflow: hidden;
  /* 起手是很小的一点，落在卡心上。.cpop-in 再把它放开。 */
  opacity: 0;
  transform: scale(0.12);
  /*
   * 收起时不能接指针，否则它会把卡片的 hover 抢走。
   *
   * 上面那句 `display: flex` 盖过了浏览器默认的 `[hidden] { display: none }`（作者样式恒压
   * UA 样式），所以脚本里的 `pop.hidden = true` 只管无障碍，撤不掉布局——真正让它隐形的是
   * 这里的 opacity。于是关掉之后，一团缩到 12% 的隐形浮层就停在上一张卡的正中：鼠标一碰，
   * 卡片收到 pointerleave、起盘动画被掐断，挪开又从第一帧重演，看着就是「怎么老也弹不出来」。
   * 补一句 display:none 也能解，但那样每次浮起都要现算一整页排盘的布局；留在布局里、
   * 只摘掉命中测试，浮起时就没有这一下停顿。
   */
  pointer-events: none;
}

.cpop-in {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease-out;
}

/*
 * 排盘页在这里是完整的一页，高了就在框内滚。滚动容器是这一层而不是页面本身：
 * 盘面整块 pointer-events:none（它是一幅画，不该被点也不该被选中），自己接不到滚轮。
 */
.cpop-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/*
 * 关闭键：只给手指。
 *
 * 鼠标那一路不需要它——指针离开卡片与浮层，140ms 后自己就收了，画一个叉子上去反倒是在说
 * 「这是个要处理掉的对话」，而它不是。手指没有「离开」这一说：浮层摆下来占掉大半个屏幕，
 * 出路虽有三条（点浮层之外、Esc、再点一次那张卡），可三条都得先猜到。
 *
 * 摆在浮层自己身上而不是那一页的页眉里：页眉是从应用照搬的一条（.ppv-bar），那里画什么都
 * 会被当成应用界面的一部分——而应用的排盘页上并没有这么一个叉子。它属于浮层，不属于盘。
 * 44px 是触控下限，与全站 pointer: coarse 那一段同一个数。
 */
.cpop-close {
  display: none;
}

@media (pointer: coarse) {
  .cpop-close {
    position: absolute;
    z-index: 3;
    top: 2px;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    /* 页眉是浅色的，底下滚过去的是盘面，两种底色都要压得住。 */
    background: rgba(250, 249, 245, 0.88);
    color: var(--muted);
    font-family: inherit;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
  }
}

/* 减少动态效果时不做那一下放大，直接出现——位置仍贴着卡片，交互不受影响。 */
@media (prefers-reduced-motion: reduce) {
  .cpop {
    transform: none;
  }

  .cpop-in {
    transition: none;
  }
}

/*
 * 九节之前的两个功能板块（盘上符号可点、排盘与 AI 同窗）。
 *
 * 一侧文字一侧演示，逐节左右对调。**整套版式与下面九节共用一份**：同样的版心宽度、同样的
 * 两栏比例、同样的断点、左栏内容同样落在盘面卡的左沿上（见 .csys 与 .csys-copy 的说明）。
 * 早先这里是自成一套的——版心不限宽（宽屏上比九节宽出一大截）、左右靠 order 对调而两栏
 * 比例跟着翻，于是「左边那一栏」时宽时窄，与下面九节对不上，滚下来像是两页拼在一起。
 *
 * 演示那一侧是一块手机比例的画，给它固定的最大宽度而不是按比例分栏：演示内容本身有确定
 * 尺度（弹窗、四柱表、输入框都是照应用尺寸搬的），栏宽一变它就得跟着缩放，字会糊。
 */
.cfeat-wrap {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
  max-width: var(--maxw-text);
  margin-inline: auto;
}

/* 断点与 .csys 那条对齐（900px）：两处同宽同比例，就该在同一处并栏。 */
@media (min-width: 900px) {
  .cfeat-wrap {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }

  /*
   * 左右交错：DOM 恒为「先标题后演示」，对调靠列序而不是 order——与九节同一做法，
   * 读屏与 Tab 的次序才不受影响。两栏的比例不跟着翻，第 1 列永远是窄的那一栏。
   */
  .cfeat-flip .cfeat-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .cfeat-flip .cfeat-demo {
    grid-column: 1;
    grid-row: 1;
  }

  /* 正文落在左栏时，缩进与九节同一个算法（见 .csys:nth-child(even) .csys-copy）。 */
  .cfeat:not(.cfeat-flip) .cfeat-copy {
    padding-left: max(0px, (100% - var(--chart-card-w)) / 2);
  }

  /* 演示屏落在右栏时，靠右沿线收边（见 .csys:nth-child(even) .csys-chart）。 */
  .cfeat:not(.cfeat-flip) .cfeat-demo {
    justify-content: flex-end;
    padding-right: max(0px, 100% - var(--chart-text-w));
  }

  /*
   * 演示屏自身只有 340px 宽（尺度是照应用量的，见 charting/_features.css 的 .pp-feat），
   * 比 24rem 的框窄 44px；它默认 `margin: 0 auto` 居中，于是无论落在哪一栏，都比九节那张卡
   * 的边沿又往里缩 22px。所以按它所在的那一栏贴边：在左栏贴左，在右栏贴右，空出来的
   * 那 44px 是透明的，看不出来。
   *
   * 只在双栏时这么摆：并成一栏之后没有要对齐的卡，贴边反倒是整块画偏在屏幕一侧。
   */
  .cfeat-flip .cfeat-frame .ppz.pp-feat {
    margin-inline: 0 auto;
  }

  .cfeat:not(.cfeat-flip) .cfeat-frame .ppz.pp-feat {
    margin-inline: auto 0;
  }
}

/*
 * 标题与正文的字号字色跟下面九节同一套（.csys-name / .csys-lines p），两块读下来才是
 * 一页而不是两页——这两个板块与九节之间只隔着一条分隔线。改这里记得连那边一起改。
 */
.cfeat-name {
  margin: 0 0 0.6em;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.8vw, 1.75rem);
  line-height: 1.3;
  color: var(--accent-ink);
}

/* 行宽上限与九节同一个值（.csys-text）：正文落在右栏时，右端要与那边收在同一条线上。 */
.cfeat-copy {
  max-width: var(--chart-text-w);
}

.cfeat-lines p {
  margin: 0 0 0.85em;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.95;
}

.cfeat-lines p:last-child {
  margin-bottom: 0;
}

/* 与九节的 .csys-chart / .csys-frame 同构：一块与入口卡同宽的框，在栏里居中。 */
.cfeat-demo {
  display: flex;
  justify-content: center;
}

.cfeat-frame {
  width: 100%;
  max-width: var(--chart-card-w);
}

/* ── 排盘工具页：窄屏 ───────────────────────────────────── */

/*
 * 手机上这一页的毛病不在某一处不好看，在于整体太长：九门各占一节，每节先是一张几乎占满
 * 屏宽的竖幅大卡，再接三段文言，一台 390×664 的手机要滚十八屏才到底。而九节结构完全相同，
 * 滚下来像同一屏被复制了九遍——「长」与「重复」叠在一起，人看两节就走了。
 *
 * 这一段只改版式，一句文案都不删：文字本身是这一页的分量，删了就只剩九张图。
 * 900px 这个断点与上面 .csys 分两栏那条对齐，两边合起来正好覆盖所有宽度。
 */
@media (max-width: 899px) {
  /*
   * Hero 与它下面那个主按钮之间不留一节的空。
   *
   * 板块页通用的 Hero 自带 32px 的下边距，是给「Hero 之后是另一节」准备的；这一页的下一样
   * 东西是承接标语的那个按钮，两者本是一句话的两截，中间空出七十来像素就断开了。
   */
  .hero-charting {
    padding-bottom: 8px;
  }

  /*
   * 跑马灯与下一节之间收紧一档。
   *
   * 首屏的次序是：标语、主按钮、九门跑马灯，然后就该露出「哪里不懂点哪里」的标题——
   * 让人一眼知道下面还有东西。原先跑马灯下面留 40px、下一节自己又带 56px 的上边距，
   * 两截加起来正好把那个标题顶到折叠线以下，首屏底下剩一片空白。
   */
  .crail {
    padding-bottom: 1.1rem;
  }

  .crail + .section {
    padding-top: 2rem;
  }

  /*
   * 那张大卡收成一枚小图版。
   *
   * 它在宽屏上是与文字并排的一整栏，收窄成一栏之后却变成了「文字前面挡着一张大图」：
   * 三百五十见方的卡里只有一幅留白很多的插图和一句「试演此盘」，九节加起来近三千像素，
   * 全是要划过去的路。竖幅比例（175:205）保留不动——九张切图都是按这个比例裁的，
   * 改比例就得重裁；只把它缩到一枚图版的大小。它仍是那张可以点开的卡，点它照样浮出整页排盘。
   *
   * 图版靠左浮起来，门名与头几行绕着它排。只缩不浮的话，一枚一百来像素的卡孤零零占着一整行，
   * 右边空出大半行米色，看着像是图没加载完；绕排之后这一节的开头就是「一幅插图 + 一个门名」，
   * 正是书里一门起头的样子。
   */
  .csys {
    display: block;
  }

  /*
   * z-index 不能省，否则这张卡整个点不动。
   *
   * 绕排只收窄行盒，`<h3>` 与 `<p>` 的块盒仍是满栏宽的，横着盖在图版上——它们那一片虽然
   * 不显字，命中测试照样算数。平时这不要紧：按绘制次序，浮动元素排在块盒背景之后，还是浮动
   * 在上。可入场动画（entryRise）给每个 .reveal 挂了 transform，而带 transform 的元素自成
   * 层叠上下文，绘制阶次一下子跳到浮动之上——于是九张卡全被自己旁边的文字挡住，手指点下去
   * 落在段落上。给图版一个层号把它抬回最上面。
   *
   * 只在这里出现是因为宽屏是两栏网格，盘与字各占一格，压根没有重叠。
   */
  .csys-chart {
    position: relative;
    z-index: 1;
    float: left;
    width: clamp(7.5rem, 27vw, 11rem);
    margin: 0 1rem 0.6rem 0;
  }

  .csys-frame {
    max-width: none;
  }

  /*
   * 这一层原本 overflow: hidden 是为了收住底纹（那张图要探出版心）。底纹在窄屏上已经撤了，
   * 而 overflow 非 visible 会另起一个块级格式化上下文——那正好是「不绕浮动元素排」的开关，
   * 留着它文字就会整块让到图版下面去，浮动等于白做。
   */
  .csys-copy {
    overflow: visible;
  }

  /*
   * 文字那一层抬起来是为了压住底纹（.csys-text 的 z-index: 1）。底纹在这一档已经撤了，
   * 这个层号就只剩下副作用：它与上面图版同号而排在后面，同号比后来居上——刚抬起来的图版
   * 又被它压回去，卡还是点不动。放回 auto。
   */
  .csys-text {
    z-index: auto;
  }

  /* 三段文字与下面那排按钮清出浮动，免得按钮挤在图版旁边。 */
  .csys-acts {
    clear: left;
  }

  /* 卡小了，卡面那句话跟着收，否则一枚胶囊就顶满了卡宽。 */
  .csys-card-cta {
    padding: 0.3em 0.9em;
    font-size: clamp(0.82rem, 2.5vw, 1.05rem);
  }

  /*
   * 底纹撤掉。
   *
   * 它在宽屏上的作用是「让每一节有自己的气质」，靠的是把门类插图放大调淡贴在版心外侧。
   * 一栏之后版心没有外侧可贴，它只能压在正文正下方，成了一团横穿三段文字的脏印子；
   * 而那张图此刻已经以图版的样子明明白白摆在门名上头了，同一张图不必再影一遍。
   */
  .csys-ghost {
    display: none;
  }

  /*
   * 节与节之间画一条线。
   *
   * 宽屏上左右交错本身就是分节的记号——上一节的盘在左，下一节的盘在右，一眼看得出换了一节。
   * 一栏之后交错没有了，九节首尾相接只隔着一段空白，滚过去分不清是同一节的下半截还是新的
   * 一节。留白照旧给足，中间补一条发丝线交代边界。
   */
  .csys-list {
    gap: 0;
  }

  .csys + .csys {
    margin-top: clamp(2.2rem, 7vw, 3.2rem);
    padding-top: clamp(2.2rem, 7vw, 3.2rem);
    border-top: 1px solid var(--line);
  }

  /*
   * 正文按手机的尺度重排。
   *
   * 0.95rem 配 1.95 的行距是给宽屏那半栏定的：那里一行二十几个字，行距放开才不串行。
   * 手机上一行只有十七八个字，同样的行距把三段文言撑得又瘦又长，而 15.2px 的文言本来
   * 就偏小。字放大到与正文同号、行距收到 1.8，读着更稳，通篇还短了一截。
   *
   * 两个功能板块与九节共用一套字号字色（见上面 .cfeat-lines p 的说明），一起改。
   */
  .csys-lines p,
  .cfeat-lines p {
    font-size: 1rem;
    line-height: 1.8;
  }

  /*
   * 详解页还没写的那几门，这一项是一行不可点的字。宽屏上鼠标停上去有 title 说明
   * 「尚在编撰」，手指没有「停上去」这一说：那个「›」在触屏上就是一个点了没反应的链接。
   * 记号去掉，留一行素字，不再假装自己通向什么地方。
   *
   * 限定 span：真链接（a.csys-wiki）那几门要留着记号，它们点了确实有下文。
   */
  span.csys-wiki span[aria-hidden] {
    display: none;
  }
}

/* @pages-only:end */
/*
 * 入场动效的第二层：按元素的身份换演法，不再一律「往上浮一下」。
 *
 * 底层那一套（styles.css 的 .anim / .in / entryRise）照旧：脚本挂 .anim 藏、挂 .in 放行，
 * --d 管先后。这里只按元素是什么，把它的那一下换掉——
 *
 *   大标题      墨从左往右洇开（遮罩扫过，边缘是软的），像一笔写出来
 *   眉题        两道发丝线从字边往外抽出，字从虚到实
 *   章节序号    像钤印：略大、略虚，落定
 *   配图        立轴、月洞里的画、肖像：整幅一起显出来再轻轻落位（styles.css 的 entryArtIn）——
 *               不卷帘、不开月、不虚化、不先放大再退远：画一露面就是完整的一幅
 *   卡片        整张先显出来，再从下方浮上来落定（卡里有画，同样不虚化）
 *   问答        从左边轻轻推进
 *
 * 全部是一次性的缓动，没有回弹、没有过冲——节奏见 ritual-ui 的口味：端庄，不弹不跳。
 *
 * 再往下是随滚动走的视差（animation-timeline），只在支持的浏览器上生效：大字背景比正文走得慢、
 * 首屏远山随页面下沉。插图不跟着推拉——放大一点就要裁掉画边。不支持的浏览器就是静止的，不影响任何信息。
 *
 * 选择器一律挂在 .anim.in 下，与底层同一套开关：没有脚本、或系统要求减少动态效果时一条不生效。
 */

@media (prefers-reduced-motion: no-preference) {
  /* ── 大标题：墨从左往右洇开 ── */
  .anim.in h2.reveal,
  .anim.in .xuantian-head.reveal,
  .anim.in .row-copy h3.reveal,
  .anim.in .master-name.reveal,
  .anim.in .cfeat-name.reveal {
    animation: entryInk 1.35s cubic-bezier(0.3, 0.6, 0.2, 1) var(--d, 0ms) both;
  }

  /* ── 眉题：发丝线往外抽，字从虚到实 ── */
  .anim.in .eyebrow.reveal {
    animation: entryFade 0.9s ease var(--d, 0ms) both;
  }

  .anim.in .eyebrow.reveal .eyebrow-rule {
    animation: entryRuleX 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--d, 0ms) + 120ms) both;
    transform-origin: right center;
  }

  .anim.in .eyebrow.reveal .eyebrow-rule:last-child {
    transform-origin: left center;
  }

  .anim.in .eyebrow.reveal .eyebrow-t {
    display: inline-block;
    animation: entryMist 1s ease var(--d, 0ms) both;
  }

  /* ── 章节序号：钤印 ── */
  .anim.in .chapter-no.reveal,
  .anim.in .entry-no.reveal {
    animation: entrySeal 0.9s cubic-bezier(0.2, 0.7, 0.25, 1) var(--d, 0ms) both;
  }

  /* ── 配图（立轴、月洞、肖像）：走 styles.css 的 entryArtIn，这里不另换演法 ── */

  /* ── 卡片：整张先显出来，再浮起落定 ── */
  .anim.in .scard.reveal,
  .anim.in .psys-card.reveal,
  .anim.in .pxt-group.reveal,
  .anim.in .zd-mean-item.reveal,
  .anim.in .zd-gift.reveal {
    animation: entryCard 1.05s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms) both;
  }

  /* ── 问答：从左边推进 ── */
  .anim.in .faq-item.reveal {
    animation: entrySlide 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms) both;
  }

  /* ── 玄天演示：罗盘落定、手机从下方升起 ── */
  .anim.in .xt-orbit.reveal {
    animation: entryDial 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms) both;
  }

  .anim.in .xt-app.reveal,
  .anim.in .demo-slot.reveal {
    animation: entryLift 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms) both;
  }
}

@keyframes entryInk {
  0% {
    opacity: 0;
    filter: blur(5px);
    -webkit-mask-image: linear-gradient(90deg, #000 44%, transparent 56%);
    mask-image: linear-gradient(90deg, #000 44%, transparent 56%);
    -webkit-mask-size: 250% 100%;
    mask-size: 250% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }

  25% {
    opacity: 1;
  }

  99% {
    filter: blur(0);
    -webkit-mask-image: linear-gradient(90deg, #000 44%, transparent 56%);
    mask-image: linear-gradient(90deg, #000 44%, transparent 56%);
    -webkit-mask-size: 250% 100%;
    mask-size: 250% 100%;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  /* 落定后撤掉遮罩：斜体字的出头部分不该被元素的框裁掉。 */
  100% {
    opacity: 1;
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@keyframes entryFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes entryRuleX {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes entryMist {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@keyframes entrySeal {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: scale(1.4);
  }

  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@keyframes entryUnroll {
  from {
    opacity: 0.2;
    clip-path: inset(0 0 100% 0);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes entryCard {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  32% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes entrySlide {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes entryDial {
  from {
    opacity: 0;
    transform: scale(0.94) rotate(-8deg);
  }

  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@keyframes entryLift {
  from {
    opacity: 0;
    transform: translateY(48px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/*
 * 随滚动走的视差。
 *
 * 只动装饰件与插图，正文一律不动——正文跟着滚轮漂移，读起来会晕。
 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* 压在画后面的大字（命 / 势 / 玄）：比正文走得慢，像隔着一层纸。 */
    .entry-glyph,
    .pxt-glyph {
      animation: driftGlyph linear both;
      animation-timeline: view();
      animation-range: cover;
    }

    /* 首屏远山：页面往下走时山往下沉一点，前后就拉开了。 */
    .hero-hills,
    .zd-hills,
    .phero-hills {
      animation: sinkHills linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }

  }
}

@keyframes driftGlyph {
  from {
    translate: 0 48px;
  }

  to {
    translate: 0 -48px;
  }
}

@keyframes sinkHills {
  to {
    translate: 0 56px;
  }
}


/*
 * 中道页的几处专门的演法：中庸罗盘的四个字从各自的方向往中间收，「中」最后钤下；
 * 立轴从上往下展开；三方朱印之间那道细线随后抽出来。
 */
@media (prefers-reduced-motion: no-preference) {
  .anim.in .zd-motto.reveal {
    animation: entryUnroll 1.7s cubic-bezier(0.65, 0, 0.25, 1) var(--d, 0ms) both;
  }

  .anim.in .zd-mean-item.is-mid.reveal {
    animation: entrySeal 1.1s cubic-bezier(0.2, 0.7, 0.25, 1) var(--d, 0ms) both;
  }

  .anim .zd-gifts::before {
    transform: scaleX(0);
  }

  .anim.in .zd-gifts::before {
    transform: scaleX(1);
    transition: transform 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
  }

  .anim .zd-compass .zd-mean-glyph::after {
    opacity: 0;
  }

  .anim.in .zd-compass .zd-mean-glyph::after {
    opacity: 1;
    transition: opacity 1.2s ease 1.2s;
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .anim.in .zd-mean-item.pos-top.reveal {
    animation-name: fromTop;
  }

  .anim.in .zd-mean-item.pos-bottom.reveal {
    animation-name: fromBottom;
  }

  .anim.in .zd-mean-item.pos-left.reveal {
    animation-name: fromLeft;
  }

  .anim.in .zd-mean-item.pos-right.reveal {
    animation-name: fromRight;
  }
}

@keyframes fromTop {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(-26px);
  }

  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@keyframes fromBottom {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@keyframes fromLeft {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateX(-32px);
  }

  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@keyframes fromRight {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateX(32px);
  }

  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/*
 * 界面演示（scenes.mjs 的时间轴）：首页玄天那一节的罗盘。旁边那只手机演的是应用真跑的录像，
 * 机框样式在 22-appx.css。
 *
 * 约定：凡「先藏起来、到点才出现」的规则一律挂在 .scene-live 下。这个类由脚本挂，所以没有
 * 脚本、或系统要求减少动态效果时，页面停在收尾那一帧——该看到的一样不少，只是不动。
 */

/* 复位那一下关掉全部过渡与动画，免得摘 .on 时整幅倒着演一遍（见 scenes.mjs 的 reset）。 */
.scene-reset,
.scene-reset * {
  transition: none !important;
  animation: none !important;
}

/* ── 首页玄天：罗盘 + 手机 ───────────────────────────────── */

.xuantian .xuantian-head {
  margin-bottom: clamp(0.9rem, 2.4vh, 1.4rem);
}

.xuantian .xuantian-lede {
  max-width: 46rem;
  margin-top: 0;
}

.xt-stage {
  display: grid;
  align-items: center;
  gap: clamp(2.4rem, 5vw, 4.5rem);
  max-width: var(--maxw-text);
  margin: clamp(2.2rem, 5.5vh, 3.6rem) auto 0;
}

/* 两块按各自的本来尺寸并排、整体居中，中间只留一道气口——撑满版心的话，两块之间空出一大片。 */
@media (min-width: 900px) {
  .xt-stage {
    grid-template-columns: minmax(0, 580px) minmax(0, 340px);
    justify-content: center;
    gap: clamp(2.5rem, 6vw, 6.5rem);
  }
}

.xt-orbit {
  justify-self: center;
  width: 100%;
  max-width: 580px;
}

.shushu {
  margin-top: clamp(3.4rem, 8vh, 5.6rem);
}

.shushu-cap {
  margin: 0 0 clamp(1rem, 2.6vh, 1.5rem);
  text-align: center;
}

.shushu-cap a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem 0.8rem;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  text-decoration: none;
}

.shushu-cap-d {
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
}

.shushu-cap a:hover {
  color: var(--accent-ink);
}

/* ── 罗盘 ──────────────────────────────────────────────── */

.xo {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 1;
}

.xo-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 八卦刻度圈：极淡，缓缓自转——罗盘在转，盘是定的。 */
.xo-dial {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.xo-dial path {
  fill: none;
  stroke: var(--gold-line);
  stroke-width: 1;
}

.xo-dial rect {
  fill: rgba(164, 134, 90, 0.42);
}

.xo-ring {
  fill: none;
  stroke: var(--gold-line);
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.xo-ray {
  stroke: rgba(196, 74, 13, 0.4);
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.xo-spark {
  fill: var(--accent);
  opacity: 0;
}

.xo-core-disc {
  stroke: var(--gold);
  stroke-width: 1.2;
}

.xo-core-t {
  fill: var(--ink);
  font-family: var(--font-han);
  font-size: 40px;
  text-anchor: middle;
}

.xo-core-wave {
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 1.1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.xo-node-c {
  fill: var(--surface);
  stroke: var(--accent-ink);
  stroke-width: 1.3;
}

.xo-node-halo {
  fill: rgba(236, 99, 31, 0.2);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.xo-node-t {
  fill: var(--ink);
  font-family: var(--font-han);
  font-size: 17px;
  text-anchor: middle;
}

.xo-node-done {
  fill: var(--gold);
  stroke: var(--surface);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}

.xo-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.xo-ring-label {
  position: absolute;
  padding: 0.05rem 0.6rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

/* 三圈随整节入场描出来，圈名随后浮出。 */
.anim .xo-ring {
  stroke-dashoffset: 1;
}

.anim.in .xo-ring {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1) var(--rd, 0ms);
}

.anim .xo-ring-label {
  opacity: 0;
}

.anim.in .xo-ring-label {
  opacity: 1;
  transition: opacity 0.8s ease var(--rd, 0ms);
}

.xo.scene-live .xo-dial {
  animation: xoSpin 180s linear infinite;
}

/* 未勾的盘：淡墨空圈。勾上时一圈朱色晕开。 */
.xo.scene-live .xo-node {
  transition: opacity 0.6s ease;
}

.xo.scene-live .xo-node:not(.on) {
  opacity: 0.3;
}

.xo.scene-live .xo-node:not(.on) .xo-node-c {
  fill: transparent;
  stroke: var(--line-strong);
}

.xo.scene-live .xo-node:not(.on) .xo-node-t {
  fill: var(--ink-3);
}

.xo.scene-live .xo-node.on .xo-node-halo {
  animation: xoHalo 1.1s ease-out;
}

.xo.scene-live .xo-node-done {
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.xo.scene-live .xo-node-done:not(.on) {
  opacity: 0;
  transform: scale(0.4);
}

/* 各盘一线归心：线从盘描向圆心，一粒朱点顺线跑进去。 */
.xo.scene-live .xo-ray {
  transition: stroke-dashoffset 0.9s cubic-bezier(0.55, 0, 0.25, 1);
}

.xo.scene-live .xo-ray:not(.on) {
  stroke-dashoffset: 1;
}

.xo.scene-live .xo-spark.on {
  animation: xoSpark 0.95s cubic-bezier(0.55, 0, 0.35, 1) forwards;
}

/* 合参：圆心描上朱边、透出暖光，两道水纹一圈圈往外化。 */
.xo.scene-live .xo-core-disc {
  transition:
    stroke 0.8s ease,
    filter 0.8s ease;
}

.xo.scene-live .xo-core-disc.on {
  stroke: var(--accent-ink);
  filter: drop-shadow(0 0 14px rgba(236, 99, 31, 0.45));
}

.xo.scene-live .xo-core-wave.on {
  animation: xoWave 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

/* 一轮收尾：线与勾先淡下去，圆点退回未勾的样子，再从头勾起。 */
.xo.scene-live .xo-rays,
.xo.scene-live .xo-core {
  transition: opacity 0.6s ease;
}

.xo.scene-out .xo-rays {
  opacity: 0;
}

.xo.scene-out .xo-node {
  opacity: 0.3;
}

.xo.scene-out .xo-node-done {
  opacity: 0;
}

@keyframes xoSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes xoHalo {
  from {
    opacity: 0.9;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(2.4);
  }
}

@keyframes xoSpark {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }

  15%,
  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy));
  }
}

@keyframes xoWave {
  from {
    opacity: 0.65;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(3.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .xo-dial {
    animation: none;
  }

  .anim .xo-ring {
    stroke-dashoffset: 0;
  }

  .anim .xo-ring-label {
    opacity: 1;
  }
}

/*
 * 演示手机：屏里是应用真跑录下来的录像（app-replica/player.js 在 shadow root 里重演）。
 *
 * 这里只管手机框：深色机身、一条状态栏、屏幕宽按应用的 390 定比例、高取 700（比真机 844 矮一截，
 * 手机在一屏里放得下；应用的版面本来就随屏高伸缩，播放器按屏幕实际高度给它排）。屏里的样式是
 * 应用自己的那一份（app-replica/out/replica.css），装在 shadow root 里，与这里互不相干。
 *
 * 手机宽默认 340px（--appx-max 可按版式改）；窗口矮时跟着窗口高度缩，整只手机始终在一屏之内。
 *
 * 屏幕比正文小一截，字是按比例缩的——演的是「这一屏长什么样」；访客想细看可以在屏里上下滑。
 */

.appx-phone {
  position: relative;
  /* 整机高 ≈ 20px 机边 + (宽 − 20px) × 740/390：让它不超过「窗口高 − 140px」。 */
  width: min(100%, var(--appx-max, 340px), max(250px, calc((100svh - 140px) * 0.52 + 20px)));
  margin: 0 auto;
  container-type: inline-size;
}

.appx-body {
  position: relative;
  padding: 10px;
  border-radius: 46px;
  background: linear-gradient(155deg, #2e261e, #16110c 60%);
  box-shadow:
    0 34px 60px -34px rgba(31, 27, 22, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* 玻璃：状态栏 + 应用那一屏，底色都取应用的 --zd-bg，接缝看不出来。 */
.appx-glass {
  overflow: hidden;
  border-radius: 36px;
  background: #faf9f5;
}

.appx-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  aspect-ratio: 390 / 40;
  padding: 0 7.5% 0 9%;
  color: #1f1b16;
  font-family: var(--font-sans);
  font-size: clamp(9px, 3.4cqw, 12px);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.appx-status-time {
  font-variant-numeric: tabular-nums;
}

.appx-status-island {
  position: absolute;
  top: 26%;
  left: 50%;
  width: 29%;
  height: 58%;
  border-radius: 999px;
  background: #0d0a07;
  transform: translateX(-50%);
}

.appx-status-icons {
  display: inline-flex;
  gap: 0.35em;
  align-items: center;
}

.appx-status-icons svg {
  display: block;
  height: 0.95em;
  width: auto;
}

.appx-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 390 / 700;
}

/* 录像取不到时，屏上留一句说明，不留一块莫名的空白。 */
.appx-failed .appx-screen::after {
  content: attr(aria-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18%;
  color: var(--ink-soft, #6b5f52);
  font-size: 0.85rem;
  line-height: 1.7;
  text-align: center;
}

/* 播完出一枚「再看一遍」，压在手机下沿，不占版面。 */
.appx-replay {
  position: absolute;
  bottom: -1.1rem;
  left: 50%;
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.42rem 0.95rem;
  border: 1px solid rgba(200, 165, 106, 0.55);
  border-radius: 999px;
  background: #fbf7ef;
  color: #7a5a2c;
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 24px -16px rgba(31, 27, 22, 0.5);
  transform: translateX(-50%);
  animation: appxReplayIn 0.6s ease both;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.appx-replay[hidden] {
  display: none;
}

.appx-replay:hover {
  border-color: rgba(200, 165, 106, 0.9);
  background: #fff;
}

.appx-replay:focus-visible {
  outline: 2px solid var(--accent, #c8561d);
  outline-offset: 3px;
}

@keyframes appxReplayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .appx-replay {
    animation: none;
  }
}

/*
 * 玄天模式（板块介绍页）。自 styles.css 分出，构建时接在 pages 那一半之后（见 build-legal-static.mjs 的 pagesExtraCss）。
 */

/* ── 玄天模式（板块介绍页） ─────────────────────────────── */

/*
 * 一方墨色的函：玄者，黑也。收在版心里而不铺满整宽——整条墨色留给后面那句中道的话，
 * 两处都铺满就分不出轻重。内沿两道泥金细线是书画装裱的「绫边」，用 inset 阴影画，不占版位。
 * 身后压一个极淡的「玄」字，与首页入口两栏的「命」「势」同一个做法。
 */
.pxt-panel {
  position: relative;
  max-width: var(--maxw-text);
  margin: 0 auto;
  padding: clamp(2.4rem, 5.5vw, 4.4rem) clamp(1.2rem, 4.5vw, 4rem);
  overflow: hidden;
  border-radius: 3px;
  background:
    radial-gradient(80% 60% at 88% 0%, rgba(200, 165, 106, 0.15), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(196, 74, 13, 0.08), transparent 62%),
    var(--ink-bg);
  box-shadow:
    inset 0 0 0 1px rgba(212, 180, 126, 0.2),
    inset 0 0 0 7px var(--ink-bg),
    inset 0 0 0 8px rgba(212, 180, 126, 0.12);
  color: var(--ink-fg);
}

.pxt-glyph {
  position: absolute;
  top: -0.1em;
  right: 0.05em;
  color: rgba(212, 180, 126, 0.06);
  font-family: var(--font-han);
  font-size: clamp(9rem, 24vw, 18rem);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.pxt-head {
  position: relative;
  max-width: 44rem;
  margin: 0 auto clamp(2rem, 5vh, 3rem);
  text-align: center;
}

.pxt .eyebrow {
  color: #d4b47e;
}

.pxt .eyebrow-rule {
  background: linear-gradient(90deg, transparent, rgba(212, 180, 126, 0.7));
}

.pxt .eyebrow-rule:last-child {
  background: linear-gradient(90deg, rgba(212, 180, 126, 0.7), transparent);
}

.pxt-head h2 {
  margin: 0 0 0.9rem;
  color: #f3e9d8;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

.pxt-lede {
  margin: 0;
  color: rgba(240, 230, 214, 0.74);
  font-size: 1.04rem;
  line-height: 1.85;
  text-wrap: pretty;
}

/* 三类盘：命盘 / 时间盘 / 摇卦盘。这一页主要用到的那几类点亮（.is-focus）。 */
.pxt-groups {
  position: relative;
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .pxt-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
  }
}

.pxt-group {
  padding: 1.2rem 1.25rem 1.3rem;
  border: 1px solid rgba(212, 180, 126, 0.16);
  border-radius: 2px;
  background: rgba(255, 248, 235, 0.025);
}

.pxt-group.is-focus {
  border-color: rgba(212, 180, 126, 0.55);
  background: rgba(212, 180, 126, 0.08);
}

.pxt-group-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.45rem;
}

.pxt-group-t {
  color: #f3e9d8;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: var(--fw-heading);
}

.pxt-group-n {
  color: rgba(212, 180, 126, 0.75);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: var(--display-style);
  line-height: 1;
}

.pxt-group-d {
  margin: 0 0 0.9rem;
  color: rgba(240, 230, 214, 0.62);
  font-size: 0.9rem;
  line-height: 1.7;
}

.pxt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pxt-chips li {
  margin: 0;
  padding: 0.26rem 0.6rem;
  border: 1px solid rgba(212, 180, 126, 0.28);
  border-radius: 2px;
  color: #e3d2ae;
  font-size: 0.86rem;
  line-height: 1.4;
}

.pxt-group.is-focus .pxt-chips li {
  border-color: rgba(212, 180, 126, 0.62);
  color: #f8efdb;
}

.pxt-steps {
  position: relative;
  display: grid;
  gap: 1.4rem;
  margin: clamp(2rem, 5vh, 2.8rem) 0 0;
  padding: clamp(1.6rem, 4vh, 2.2rem) 0 0;
  border-top: 1px solid rgba(212, 180, 126, 0.16);
  list-style: none;
}

@media (min-width: 900px) {
  .pxt-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.2rem;
  }
}

.pxt-step {
  margin: 0;
}

.pxt-step-no {
  display: block;
  margin: 0 0 0.45rem;
  color: #d4b47e;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-style: var(--display-style);
  line-height: 1;
}

.pxt-step-t {
  margin: 0 0 0.4rem;
  color: #f3e9d8;
  font-family: var(--font-serif);
  font-size: 1.2rem;
}

.pxt-step-d {
  margin: 0;
  color: rgba(240, 230, 214, 0.7);
  font-size: 0.95rem;
  line-height: 1.8;
}

.pxt-note {
  position: relative;
  margin: clamp(1.6rem, 4vh, 2.2rem) 0 0;
  color: rgba(240, 230, 214, 0.48);
  font-size: 0.86rem;
  text-align: center;
}

.pxt-act {
  position: relative;
  margin: 1.3rem 0 0;
  text-align: center;
}

/* 与首页「开启中道之旅」同一副方角牌记。 */
.pxt-cta {
  display: inline-block;
  padding: 0.8rem 2rem;
  border: 1px solid rgba(212, 180, 126, 0.45);
  border-radius: 2px;
  color: #e8d6b0;
  font-size: 0.95rem;
  letter-spacing: var(--tracking-cta);
  white-space: nowrap;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

.pxt-cta:hover {
  border-color: rgba(212, 180, 126, 0.85);
  background: rgba(212, 180, 126, 0.1);
  color: #f8efdb;
  text-decoration: none;
}

/*
 * 三步与演示手机并排：左边三步竖着排，右边手机演一遍勾盘、批断、出报告。
 * 手机的深色边框落在墨色上会化掉，外面补一道泥金细边。
 */
.pxt-flow {
  position: relative;
  display: grid;
  gap: 2.4rem;
  align-items: center;
  margin: clamp(2rem, 5vh, 2.8rem) 0 0;
  padding: clamp(1.6rem, 4vh, 2.2rem) 0 0;
  border-top: 1px solid rgba(212, 180, 126, 0.16);
}

.pxt-flow .pxt-steps {
  margin: 0;
  padding: 0;
  border-top: 0;
}

.pxt-demo .appx-phone {
  --appx-max: 330px;
}

.pxt-demo .appx-body {
  box-shadow:
    0 0 0 1px rgba(212, 180, 126, 0.3),
    0 34px 60px -30px rgba(0, 0, 0, 0.85);
}

@media (min-width: 960px) {
  .pxt-flow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
    gap: clamp(2.5rem, 6vw, 5rem);
  }

  .pxt-flow .pxt-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.7rem;
  }

  .pxt-flow .pxt-step {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    column-gap: 1rem;
  }

  .pxt-flow .pxt-step-no {
    grid-row: span 2;
    margin: 0.1rem 0 0;
  }

  .pxt-flow .pxt-note,
  .pxt-flow .pxt-act {
    text-align: left;
  }
}

/*
 * 首页的补充样式：首屏问法签条的入场、朱日的呼吸。
 */

@media (prefers-reduced-motion: no-preference) {
  /* 标题逐字浮现走完之后，问法签条才一枚一枚浮上来，不与标题抢。 */
  .hero-home .suggests li {
    animation: suggestIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(0.55s + var(--i, 0) * 70ms);
  }

  .hero-home .suggests li:nth-child(2) { --i: 1; }
  .hero-home .suggests li:nth-child(3) { --i: 2; }
  .hero-home .suggests li:nth-child(4) { --i: 3; }

  /* 朱日极慢地起伏，像隔着一层水汽。周期二十秒，不盯着看察觉不到它在动。 */
  .hero-sun {
    animation: sunBreath 20s ease-in-out infinite;
  }
}

@keyframes suggestIn {
  from {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@keyframes sunBreath {
  0%,
  100% {
    opacity: 0.72;
    transform: translate(0, 0) scale(1);
  }

  50% {
    opacity: 0.86;
    transform: translate(-6px, 5px) scale(1.04);
  }
}

/*
 * 手机：问法签条全部折行摆进页面，不再横划。字与框同步收小一档，
 * 一行能多容一两枚，整组也不会把对话框顶出首屏。
 * pointer:coarse 给 .suggests a 加的 44px 触控底高在这里收回（本文件排在它后面，
 * 同优先级后声明者胜）——成组签条密排取的是信息量，30px 上下的实高仍点得中。
 */
@media (max-width: 639px) {
  .suggests {
    gap: 0.4rem;
    margin-top: 1rem;
  }

  .suggests a {
    min-height: 0;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    line-height: 1.45;
  }
}

/*
 * 板块介绍页「三步」旁边的演示手机（应用真跑的录像，见 app-replica/）。
 *
 * .psteps-stage（三步 + 手机）是播放器认的舞台：录像演到发问、起盘、作答哪一步，左边
 * 哪一步点亮（player.js 的 marks 挂 .on / .off，开播时给舞台挂 .scene-live）。
 * 没有脚本时舞台不挂 .scene-live，三步都亮着。
 */

/* ── 版式：三步竖排在左，手机在右 ── */
.psteps-stage {
  display: grid;
  gap: clamp(2.4rem, 6vh, 3.4rem);
  align-items: center;
  max-width: var(--maxw-text);
  margin: 0 auto;
}

@media (min-width: 1000px) {
  .psteps-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: clamp(3rem, 7vw, 6.5rem);
  }

  .psteps-stage .step-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.2rem;
  }

  .psteps-stage .step {
    display: grid;
    grid-template-columns: 4.4rem minmax(0, 1fr);
    column-gap: 1.3rem;
  }

  .psteps-stage .step-no {
    grid-row: span 2;
  }

  .psteps-stage .step-no::after {
    margin: 0.9rem 0 0;
  }
}

/* 演到哪一步，哪一步点亮；其余两步退成淡墨。动的是子元素——li 自己挂着入场动画的终值。 */
.scene-live .psteps-stage .step > *,
.psteps-stage.scene-live .step > * {
  transition:
    opacity 0.6s ease,
    color 0.6s ease;
}

.psteps-stage.scene-live .step:not(.on) > *,
.psteps-stage.scene-live .step.off > * {
  opacity: 0.38;
}

.psteps-stage.scene-live .step.on:not(.off) .step-no {
  color: var(--accent-ink);
}


/*
 * 中道页。自 styles.css 分出，构建时接在 pages 那一半之后（见 build-legal-static.mjs 的 pagesExtraCss）。
 */

/* ── 中道页 ─────────────────────────────────────────────── */

/*
 * 首屏：一轮泥金圆相里立着「中道」两字（首页那份书法体子集），下面一句定义与署名，
 * 底下一抹远山。圆相由入场动画描出来（.anim → .in），没有脚本时就是画好的一圈。
 */
.zd-hero {
  position: relative;
  padding: clamp(24px, 5vh, 64px) 0 0;
  overflow-x: clip;
  background: radial-gradient(55% 50% at 50% 36%, rgba(255, 252, 244, 0.92), transparent 72%);
  text-align: center;
}

.zd-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(130px, 20vh, 230px);
}

.zd-crest {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(210px, 54vw, 300px);
  aspect-ratio: 1;
}

.zd-enso {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-96deg);
}

/* 周长约 703.7，取整 704：dashoffset 从 704 收到 0 就是一笔描完（同首页中道一节）。 */
.zd-enso circle {
  fill: none;
  stroke: var(--gold);
  stroke-dasharray: 704;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-opacity: 0.6;
  stroke-width: 1.4;
}

.zd-hero.anim .zd-enso circle {
  stroke-dashoffset: 704;
}

.zd-hero.anim.in .zd-enso circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.2s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}

.zd-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.zd-name {
  color: var(--ink);
  font-family: "Hero CJK", var(--font-serif);
  font-size: clamp(3.6rem, 14vw, 5.8rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.12em;
  /* 字距会在末字右侧多留一格，缩进同量补回来才是真居中。 */
  text-indent: 0.12em;
}

.zd-latin {
  margin-top: 1rem;
  color: #876a3f;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
}

.zd-def {
  max-width: 40rem;
  margin: clamp(2rem, 5vh, 3rem) auto 0;
}

.zd-def-t {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 1rem + 1.8vw, 2.3rem);
  font-style: var(--display-style);
  line-height: 1.5;
  text-wrap: balance;
}

.zd-def-by {
  margin-top: 1rem;
  color: var(--ink-3);
  font-size: 0.92rem;
  letter-spacing: 0.12em;
}

.zd-def-by::before {
  content: "— ";
}

:lang(zh) .zd-def-by::before {
  content: "—— ";
}

.zd-hills {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(150px, 26vh, 290px);
}

/* 各节的题头：章节序号 + 眉题 + h2。 */
.zd-head {
  max-width: 44rem;
  margin: 0 auto clamp(1.8rem, 4.5vh, 2.8rem);
  text-align: center;
}

.zd-head .chapter-no {
  margin-bottom: 0.3rem;
}

/* 中文题目只在标点处换行：「不大不 / 小」那样从词中间断开读着别扭。keep-all 不影响拉丁文。 */
.zd-head h2 {
  margin: 0;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem);
  line-height: var(--lh-heading);
  text-wrap: balance;
  word-break: keep-all;
}

.zd-lede {
  max-width: 38rem;
  margin: -0.6rem auto clamp(2rem, 5vh, 2.8rem);
  color: var(--ink-2);
  font-size: 1.06rem;
  line-height: 1.8;
  text-align: center;
  text-wrap: pretty;
}

.zd-prose {
  max-width: 42rem;
  margin: 0 auto;
}

.zd-prose > p,
.zd-body > p {
  margin: 0 0 1.05rem;
  color: var(--ink-2);
  font-size: 1.06rem;
  line-height: 1.9;
  text-wrap: pretty;
}

.zd-prose > p:last-child {
  margin-bottom: 0;
}

/*
 * 「何为中道」一节：宽屏左题右文，题头左齐；窄屏堆叠时题头照旧居中。
 * （「只论本心」「不叫人认命」原先也用这套，左栏在标题底下空出一大片，已各自改版，见下。）
 */
@media (min-width: 900px) {
  .zd-split .wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 0 clamp(3rem, 7vw, 6.5rem);
    align-items: start;
    max-width: calc(var(--maxw-text) + var(--gutter) * 2);
  }

  .zd-split .zd-head {
    margin: 0;
    text-align: left;
  }
}

@media (max-width: 899px) {
  .zd-head-start .eyebrow {
    justify-content: center;
  }

  .zd-head-start .eyebrow-rule:first-child {
    display: block;
  }
}

/*
 * 中庸之道：「中」居正中，两组相对的「不」分列左右（上一行高 / 低，下一行大 / 小），
 * 左右镜像：左栏字朝右收、右栏字朝左收，印都贴着中间。不画卡片框、不牵线，只靠对齐。
 * 窄屏：「中」在前，四条两两一行。
 */
.zd-balance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "mid mid"
    "a   b"
    "c   d";
  gap: clamp(1.8rem, 4.5vh, 2.6rem) clamp(1rem, 4vw, 2rem);
  max-width: 62rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.zd-bal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  text-align: center;
}

.zd-bal-item.at-a { grid-area: a; }
.zd-bal-item.at-b { grid-area: b; }
.zd-bal-item.at-c { grid-area: c; }
.zd-bal-item.at-d { grid-area: d; }

.zd-bal-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.zd-bal-glyph {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-3);
  font-family: var(--font-han);
  font-size: 1.35rem;
  line-height: 1;
}

.zd-bal-t {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: var(--fw-heading);
}

.zd-bal-d {
  max-width: 19rem;
  color: var(--ink-2);
  font-size: 0.96rem;
  line-height: 1.75;
  text-wrap: pretty;
}

/* 正中的「中」：一轮泥金双圈，朱字。 */
.zd-bal-item.is-mid {
  grid-area: mid;
  gap: 0.9rem;
}

.zd-bal-item.is-mid .zd-bal-head {
  gap: 1rem;
}

.zd-bal-item.is-mid .zd-bal-glyph {
  width: 6.6rem;
  height: 6.6rem;
  border-color: var(--gold);
  background: radial-gradient(circle, #fffaf0 0 58%, #f6ead8 100%);
  box-shadow:
    0 0 0 7px var(--bg),
    0 0 0 8px var(--gold-line);
  color: var(--accent-ink);
  font-size: 3.3rem;
}

.zd-bal-item.is-mid .zd-bal-t {
  color: var(--accent-ink);
  font-size: 1.45rem;
}

.zd-bal-item.is-mid .zd-bal-d {
  max-width: 21rem;
}

@media (min-width: 900px) {
  .zd-balance {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem) minmax(0, 1fr);
    grid-template-areas:
      "a mid b"
      "c mid d";
    gap: clamp(2.4rem, 6vh, 3.6rem) clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }

  .zd-bal-item.is-mid {
    align-self: center;
  }

  /* 两侧：印与标题一行，印贴着中间；说明文字随之左右收。 */
  .zd-bal-item:not(.is-mid) .zd-bal-head {
    flex-direction: row;
    gap: 0.85rem;
  }

  .zd-bal-item.at-a,
  .zd-bal-item.at-c {
    align-items: flex-end;
    text-align: right;
  }

  .zd-bal-item.at-a .zd-bal-head,
  .zd-bal-item.at-c .zd-bal-head {
    flex-direction: row-reverse;
  }

  .zd-bal-item.at-b,
  .zd-bal-item.at-d {
    align-items: flex-start;
    text-align: left;
  }

  /* 说明与标题对齐，不与印对齐：让出印的宽度加间距。 */
  .zd-bal-item.at-a .zd-bal-d,
  .zd-bal-item.at-c .zd-bal-d {
    margin-right: calc(2.9rem + 0.85rem);
  }

  .zd-bal-item.at-b .zd-bal-d,
  .zd-bal-item.at-d .zd-bal-d {
    margin-left: calc(2.9rem + 0.85rem);
  }
}

/*
 * 只论本心：三栏夹一条立轴。左栏两段话贴着立轴收右，右栏三条要点贴着立轴收左，
 * 两栏各自朝中间靠，立轴居正中。
 */
.zd-heart-grid {
  display: grid;
  gap: 2.2rem;
  max-width: 70rem;
  margin: 0 auto;
}

.zd-heart-prose > p {
  margin: 0 0 1.05rem;
  color: var(--ink-2);
  font-size: 1.06rem;
  line-height: 1.9;
  text-wrap: pretty;
}

.zd-heart-prose > p:last-child {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .zd-heart-grid {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(2.4rem, 5vw, 4.6rem);
    align-items: center;
  }

  .zd-heart-prose {
    justify-self: end;
    max-width: 25rem;
  }

  .zd-heart .zd-points {
    justify-self: start;
    width: 100%;
    max-width: 27rem;
  }
}

/* 只论本心：三条要点是一张发丝线分隔的小表。 */
.zd-points {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.zd-point {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

:lang(en) .zd-point {
  grid-template-columns: 10.5rem minmax(0, 1fr);
}

.zd-point-t {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: var(--fw-heading);
}

.zd-point-d {
  color: var(--ink-2);
  line-height: 1.75;
}

@media (max-width: 520px) {
  .zd-point,
  :lang(en) .zd-point {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }
}

/*
 * 「一切是论心」：汉字语种竖排成一条立轴上的题字，左右各一道发丝线是轴边，
 * 上下各一方泥金轴头；拉丁语种横排斜体。落款沉在末尾，与首页中道一节的竖排题款同一个道理。
 */
.zd-motto {
  margin: 0;
  text-align: center;
}

.zd-motto blockquote {
  margin: 0;
  color: var(--accent-ink);
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  font-style: var(--display-style);
  line-height: 1.3;
}

.zd-motto figcaption {
  margin-top: 0.8rem;
  color: var(--ink-3);
  font-size: 0.88rem;
  letter-spacing: 0.1em;
}

:lang(en) .zd-heart .zd-motto {
  max-width: 15rem;
  margin-inline: auto;
}

.zd-motto-v {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: center;
  gap: 0.9rem;
}

.zd-motto-v blockquote {
  position: relative;
  padding: 1.6rem 1.05rem;
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 250, 240, 0), rgba(255, 250, 240, 0.9) 20%, rgba(255, 250, 240, 0.9) 80%, rgba(255, 250, 240, 0));
  color: var(--ink);
  font-family: var(--font-han);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-style: normal;
  letter-spacing: 0.35em;
  writing-mode: vertical-rl;
}

.zd-motto-v blockquote::before,
.zd-motto-v blockquote::after {
  position: absolute;
  right: -0.35rem;
  left: -0.35rem;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
  content: "";
  opacity: 0.7;
}

.zd-motto-v blockquote::before {
  top: 0;
}

.zd-motto-v blockquote::after {
  bottom: 0;
}

.zd-motto-v figcaption {
  align-self: flex-end;
  margin: 0;
  letter-spacing: 0.3em;
  writing-mode: vertical-rl;
}

/* 源流：五枚圆印一字排开，一道泥金细线从中穿过，像一条河上的五个渡口。 */
.zd-roots {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem clamp(0.8rem, 3.5vw, 2.6rem);
  max-width: 50rem;
  margin: 0 auto clamp(2rem, 5vh, 2.8rem);
  padding: 0;
  list-style: none;
}

.zd-roots::before {
  content: "";
  position: absolute;
  top: 1.9rem;
  right: 6%;
  left: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}

.zd-root {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 5.6rem;
  margin: 0;
}

.zd-root-seal {
  display: grid;
  place-items: center;
  width: 3.8rem;
  height: 3.8rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 5px var(--bg);
  color: var(--ink);
  font-family: var(--font-han);
  font-size: 1.5rem;
  line-height: 1;
}

.zd-root-t {
  color: var(--ink-3);
  font-size: 0.86rem;
  line-height: 1.4;
  text-align: center;
}

/* 窄屏收小一号，五枚印仍排在一行：折成四加一，那道「河」就断了。 */
@media (max-width: 559px) {
  .zd-roots {
    gap: 1rem 0.45rem;
  }

  .zd-roots::before {
    top: 1.55rem;
  }

  .zd-root {
    width: 3.9rem;
    gap: 0.5rem;
  }

  .zd-root-seal {
    width: 3.1rem;
    height: 3.1rem;
    box-shadow: 0 0 0 4px var(--bg);
    font-size: 1.25rem;
  }

  .zd-root-t {
    font-size: 0.76rem;
  }
}

/*
 * 六大根基：五根一行（立 → 强 → 信 → 爱 → 足），圆印 + 名 + 一句「能不能」；
 * 自敬作底座单独横在下面，印用朱色，与五根不并列。窄屏两列，底座仍独占一行。
 */
.zd-sixroots-five {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.6rem clamp(0.8rem, 2.4vw, 1.6rem);
  max-width: 64rem;
  margin: clamp(2.2rem, 5vh, 3rem) auto 0;
  padding: 0;
  list-style: none;
}

.zd-sixroots-base {
  max-width: 36rem;
  margin: clamp(1.8rem, 4vh, 2.4rem) auto 0;
  padding: clamp(1.2rem, 3vh, 1.6rem) 0 0;
  border-top: 1px solid var(--gold);
  list-style: none;
}

.zd-sixroot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  text-align: center;
}

.zd-sixroot-glyph {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--ink);
  font-family: var(--font-han);
  font-size: 1.45rem;
  line-height: 1;
}

.zd-sixroot.is-base .zd-sixroot-glyph {
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}

.zd-sixroot-t {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.zd-sixroot-d {
  max-width: 15rem;
  color: var(--ink-3);
  font-size: 0.9rem;
  line-height: 1.7;
}

.zd-sixroots-note {
  max-width: 40rem;
  margin: clamp(1.8rem, 4vh, 2.4rem) auto 0;
  color: var(--ink-3);
  font-size: 0.95rem;
  line-height: 1.9;
  text-align: center;
}

@media (max-width: 759px) {
  .zd-sixroots-five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zd-sixroot-glyph {
    width: 3.1rem;
    height: 3.1rem;
    font-size: 1.25rem;
  }
}

/*
 * 不叫人认命：三样东西横排成一行，一道泥金线从三方朱印中间穿过（醒 → 囊 → 观）。
 * 底下一行：左边说中道寄语是什么，右边一只手机演一段。
 */
.zd-gifts {
  position: relative;
  display: grid;
  gap: 1.8rem;
  max-width: 64rem;
  margin: clamp(2.4rem, 5.5vh, 3.4rem) auto 0;
  padding: 0;
  list-style: none;
}

.zd-gift {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0 0.6rem;
  text-align: center;
}

.zd-gift-glyph {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.4rem;
  border-radius: 3px;
  background: var(--accent-ink);
  box-shadow: 0 0 0 7px var(--bg);
  color: #fff6ea;
  font-family: var(--font-han);
  font-size: 1.55rem;
  line-height: 1;
}

.zd-gift-t {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-weight: var(--fw-heading);
}

.zd-gift-d {
  max-width: 18rem;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.8;
  text-wrap: pretty;
}

@media (min-width: 760px) {
  .zd-gifts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.4rem, 3vw, 2.6rem);
  }

  .zd-gifts::before {
    position: absolute;
    top: 1.75rem;
    right: 16%;
    left: 16%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
    content: "";
    opacity: 0.55;
  }
}

.zd-verse-row {
  display: grid;
  gap: 2.2rem;
  align-items: center;
  max-width: 64rem;
  margin: clamp(3.2rem, 7vh, 4.6rem) auto 0;
  padding-top: clamp(2.4rem, 6vh, 3.4rem);
  border-top: 1px solid var(--line);
}

@media (min-width: 860px) {
  .zd-verse-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: clamp(2.6rem, 6vw, 5.5rem);
  }
}

.zd-verse-note-t {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.9rem;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: var(--fw-heading);
}

.zd-verse-note-t::before {
  width: 2.2rem;
  height: 1px;
  background: var(--gold);
  content: "";
}

.zd-verse-note-d {
  max-width: 30rem;
  margin: 0;
  color: var(--ink-2);
  font-size: 1.06rem;
  line-height: 1.9;
}

/*
 * 《中道》其一：竖排成一幅小立轴，上下两道泥金是轴头，从右往左读。
 * 任何语种下都出中文原文（它本身就是器物），英文页在下面另附小字旁注。
 */
.zd-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: clamp(2.4rem, 6vh, 3.4rem) auto 0;
}

.zd-scroll-verse {
  height: max-content;
  margin: 0;
  padding: 1.8rem 1.3rem;
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  background: #fffaf0;
  box-shadow: 0 20px 40px -30px rgba(60, 40, 20, 0.45);
  color: var(--ink);
  font-family: var(--font-han);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.65rem);
  line-height: 2.4;
  letter-spacing: 0.28em;
  text-align: start;
  writing-mode: vertical-rl;
}

.zd-scroll-verse .line {
  display: block;
  white-space: nowrap;
}

.zd-scroll-source {
  margin-top: 1rem;
  color: #876a3f;
  font-family: var(--font-serif);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-wrap: balance;
}

.zd-scroll-gloss {
  max-width: 34rem;
  margin: 0.8rem auto 0;
  color: var(--ink-3);
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.8;
  text-align: center;
}

.zd-future {
  max-width: 42rem;
  margin: 1.4rem auto 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.9;
  text-wrap: pretty;
}

/*
 * 典藏一节：宽屏左文右轴。左栏题头左齐，两段话与「待时机成熟」一段接在下面；
 * 右栏那一幅偈子与左栏上下居中对齐。窄屏照旧上下叠放、题头居中。
 */
@media (min-width: 900px) {
  .zd-book-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: clamp(3rem, 7vw, 6.5rem);
    align-items: center;
    max-width: calc(var(--maxw-text) + var(--gutter) * 2);
  }

  .zd-book-grid .zd-head {
    margin: 0 0 clamp(1.4rem, 3.5vh, 2rem);
    text-align: left;
  }

  .zd-book-grid .zd-prose {
    margin: 0;
  }

  .zd-book-grid .zd-future {
    margin-left: 0;
  }

  .zd-book-grid .zd-scroll {
    margin: 0;
  }
}