/* ══════════════════════════════════════════════════════════════
   其一 · 开宗 —— 序言影印对开
   左：西夏文序　右：汉文序
   水墨联动高亮・双语对读连线・金句浮起（3D）・墨粒扩散
   ══════════════════════════════════════════════════════════════ */

/* 页面外框与纸由 .spread 自绘，故底页自身不设底色 */
.page--spread{ background:none; box-shadow:none; }

.spread{
  --ink:#2b2318;
  --gold:#d9b25f;
  --vermilion:#a63428;
  position:absolute; inset:0;
  display:grid;
  grid-template-rows: var(--head-h, 9%) 1fr var(--foot-h, 7.5%);
  --fw: 500px; --fh: 808px;      /* 影印页目前的渲染尺寸（JS 量测后写入） */
}
/* 封面阶段：只露右页（汉文序），书眉暂藏 */
.stage[data-mode="cover"] .spread__head{ visibility:hidden; }
.stage[data-mode="cover"] .spread{ --foot-h: 0%; }
.stage[data-mode="cover"] .spread__body{ padding:0; gap:0; }
.stage[data-mode="cover"] .side--tangut{ width:0; opacity:0; overflow:hidden; }
.stage[data-mode="cover"] .side--han{ box-shadow:none; }

/* 露出的底页纸色，使页面留白不出现深色案几 */
.page--spread{ background:
  radial-gradient(120% 80% at 30% 0%, rgba(255,253,246,.6), transparent 60%),
  linear-gradient(180deg, #f2e9d2, #eadfc2); }

/* ─────────── 书眉（两端叶次） ─────────── */
.spread__head{
  position:relative; z-index:9;      /* 压暗只在书叶之内，叶次仍读得清 */
  display:grid; grid-template-columns: 1fr 1fr;
  align-items:center; gap:2%;
  padding: 0 calc(var(--rail, 0px) + 1.4%);
}
.spread__leafname{
  margin:0; font-family: var(--f-serif);
  font-size: calc(var(--u,8px) * 1.3);
  letter-spacing:.24em;
  color: rgba(132,86,52,.78);
  transition: opacity .45s ease;
}
.spread__leafname[data-leafname="han"]{ text-align:right; }
.spread__head.is-blank .spread__leafname{ opacity:0; }

/* ─────────── 对开页 ─────────── */
.spread__body{
  display:flex; justify-content:center; align-items:stretch;
  gap: 10px;
  padding: 0 calc(var(--rail, 0px) + 8px) 8px;
  min-height:0;
}
.side{
  position:relative; height:100%;
  z-index:7;                    /* 高于 .veil，故纸面压暗不动浮起的字 */
  aspect-ratio: 500 / 808;      /* 影印页比例 */
  flex:0 0 auto;
  width: var(--pw, auto);
  min-height:0;
  perspective: 1400px;
  transform-style: preserve-3d;
  transition: width .92s cubic-bezier(.45,.05,.18,1), opacity .5s ease;
}
.side--tangut{ width: var(--leftw, 0px); box-shadow: 8px 10px 24px rgba(0,0,0,.40); }
.side--han{ box-shadow: -8px 10px 24px rgba(0,0,0,.40); }
.stage[data-mode="spread"] .side--tangut{ opacity:1; }

.folios{ position:absolute; inset:0; transform-style: preserve-3d; }
.folio{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition: opacity .55s ease, transform .55s cubic-bezier(.3,.7,.2,1), visibility .55s;
  transform: translateX(var(--slide, 0px));
  transform-style: preserve-3d;
}
.folio[data-on="1"]{ opacity:1; visibility:visible; transform:none; }
.folio__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:fill; user-select:none; -webkit-user-drag:none;
  box-shadow: inset 0 0 40px rgba(120,90,50,.18);
}

/* 热区：透明 SVG 蒙层 */
.zones{
  position:absolute; inset:0; z-index:4;
  width:100%; height:100%;
  pointer-events:none; overflow:visible;
}
.zone{
  fill: rgba(0,0,0,0);
  pointer-events:all; cursor:pointer; outline:none;
  touch-action:none;
}
.zone:focus-visible{ fill: rgba(217,178,95,.10); stroke: rgba(217,178,95,.85); stroke-width:2; }

/* ─────────── 水墨高亮（金墨抽字） ─────────── */
.hl{
  position:absolute; inset:0; z-index:5;
  pointer-events:none; opacity:0;
  clip-path: inset(var(--t) var(--r) var(--b) var(--l));
  transition: opacity .34s ease;
}
.hl.is-on{ opacity:1; }
.hl__ink{
  position:absolute; inset:0;
  background-repeat:no-repeat; background-size: 100% 100%;
}
/* 滤镜只在亮起时才挂上：抽墨含一次大范围模糊，若常挂则 32 个栏层都要算 */
.hl.is-on .hl__ink{
  /* 金墨压暗一档再提饱和：抽墨图染出的金近 #ffdb85，铺在米色纸上几乎与纸
     同明度，读者反映看不清。压暗之后才读得成「金」，而不是一层米黄。 */
  filter: brightness(.86) saturate(1.45) contrast(1.06)
          drop-shadow(0 0 4px rgba(246,222,150,.75))
          drop-shadow(0 0 12px rgba(206,158,66,.40));
}
.hl--soft{ opacity:0; }
.hl--soft.is-on{ opacity:.62; }

/* ─────────── 句段金墨（悬停与对读的相映，只及句段本身） ─────────── */
.sg{
  position:absolute; inset:0; z-index:5;
  pointer-events:none; opacity:0;
  clip-path: inset(var(--t) var(--r) var(--b) var(--l));
  transition: opacity .45s ease;
}
.sg.is-on{ opacity:.60; }
.sg.is-on.sg--near{ opacity:.92; }
.sg__ink{
  position:absolute; inset:0;
  background-repeat:no-repeat; background-size:100% 100%;
}
.sg.is-on .sg__ink{
  filter: brightness(.84) saturate(1.5) contrast(1.08)
          drop-shadow(0 0 5px rgba(246,222,150,.7))
          drop-shadow(0 0 14px rgba(206,158,66,.34));
}
/* 指下这一句（或被点起的那一句）：再深一档，并补一道暗边，
   字形才从纸上「立」起来，而不是浮著一层淡金 */
.sg.is-on.sg--near .sg__ink{
  filter: brightness(.80) saturate(1.55) contrast(1.1)
          drop-shadow(0 1px 1px rgba(74,44,8,.42))
          drop-shadow(0 0 6px rgba(246,222,150,.72))
          drop-shadow(0 0 16px rgba(206,158,66,.42));
}
/* 晕染：笔过之处留一团淡淡墨气 */
.blot{
  position:absolute; z-index:5; pointer-events:none;
  width: var(--bw); height: var(--bh);
  left: var(--bx); top: var(--by);
  border-radius:50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(196,150,70,.30), rgba(196,150,70,.10) 55%, transparent 78%);
  filter: blur(6px); opacity:0; transform: scale(.5);
  animation: blot 1.9s ease-out forwards;
}
@keyframes blot{
  0%  { opacity:0; transform: scale(.45); }
  18% { opacity:1; }
  100%{ opacity:0; transform: scale(1.5); }
}

/* ─────────── 双语对读连线 ─────────── */
.links{
  position:absolute; inset:0; z-index:8;
  width:100%; height:100%; pointer-events:none; overflow:visible;
}
.link{
  fill:none; stroke: rgba(214,170,86,.85); stroke-width:1.6;
  stroke-dasharray: 7 6; stroke-linecap:round;
  filter: drop-shadow(0 0 5px rgba(232,196,116,.55));
  animation: linkflow 1.4s linear infinite;
}
@keyframes linkflow{ to{ stroke-dashoffset:-26; } }
.link-dot{ fill: rgba(166,52,40,.9); }

/* ─────────── 金句浮起（3D） ─────────── */
.lift{
  position:absolute; inset:0; z-index:12;
  pointer-events:none; opacity:0;
  transition: opacity .32s ease;
  transform-style: preserve-3d;
}
.lift.is-up{ opacity:1; }
.part{
  position:absolute; inset:0;
  z-index:3;                 /* 浮起的墨在灯光与补白之上：灯照在纸上，不照在墨上 */
  clip-path: inset(var(--t, 0%) var(--r, 0%) var(--b, 0%) var(--l, 0%));
  transition: transform .95s cubic-bezier(.2,.82,.2,1), filter .8s ease;
  transition-delay: var(--d, 0ms);
  transform-origin: var(--ox, 50%) var(--oy, 50%);   /* 以句段自身为轴心浮起 */
  transform: translate3d(var(--mx, 0px), var(--my, 0px), var(--mz, 0px)) scale(var(--ms, 1));
}
.part__ink{
  position:absolute; inset:0;
  background-repeat:no-repeat; background-size:100% 100%;
  opacity:0; transition: opacity .35s ease; transition-delay: var(--d, 0ms);
}
.lift.is-up .part__ink{
  opacity:1;
  /* 关键：纸一压暗，纸上的墨也跟著暗（约 .62 倍）。若浮起的墨只保持
     「原来的浓淡」，它反而比四周的墨更浅，读起来像褪色。
     灯下的东西是对比变大、不是变亮——故浮起的墨要更浓、衬纸要更亮。 */
  filter: brightness(.55) saturate(1.22) contrast(1.06);
}

/* 浮起：离纸、向读者升高、加阴影、润金墨
   句段多以自身中心为轴心微放大——离纸之感半由放大而来；
   但句段常与栏同高，故 1.03 已是上限，再大即顶破页面、压到书眉 */
.lift.is-up{ --my:-12px; --mz:36px; --ms:1.030; }
.lift.is-up .part{
  /* 阴影才是「离纸」的主要线索；金光是点到为止——
     句段是一条整栏的窄条，金光一大就沿笔锋糊成一圈金边，墨便不成墨了 */
  filter: drop-shadow(0 11px 15px rgba(40,22,4,.58))
          drop-shadow(0 1px 3px rgba(40,22,4,.45))
          drop-shadow(0 0 7px rgba(244,214,140,.34));
}
/* 引子的浮起另作金墨润色：图直接用金墨派生图（js/spread.js 决定），
   不挂 SVG 滤镜——#fx-goldink 的 alpha 系由 RGB 反相求得，遇上「空处是
   纯黑透明」的抽墨图，整条句段都会被算成满版墨，糊成一块金砖。 */
.lift.is-up.premium .part{
  filter: drop-shadow(0 18px 22px rgba(58,34,10,.5))
          drop-shadow(0 0 16px rgba(244,214,140,.65));
}
.lift.is-up.premium .part__ink{
  /* 金墨图本身已是金，故不套「让墨更浓」的那一档，只提亮一点 */
  filter: brightness(.94) saturate(1.2) contrast(1.04);
}

/* ─────────── 浮起时：纸面留白（以纸色提亮，墨迹随字而去） ─────────── */
.patch{
  position:absolute; inset:0; pointer-events:none;
  z-index:1;                 /* 补白在下：墨浮起后，纸上才留得下空白 */
  clip-path: inset(var(--t, 0%) var(--r, 0%) var(--b, 0%) var(--l, 0%));
  overflow:hidden;
  opacity:0; transition: opacity .8s ease;
  /* 只化开上下两端（切口落在字隙，故左右不必化，硬边正好落在栏间纸上） */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4.5%, #000 95.5%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 4.5%, #000 95.5%, transparent 100%);
}
.lift.is-up .patch{ opacity:.96; }
/* 补白用的不是纸色，而是本叶扫描图「把墨回填掉」之后的净纸：
   纸纹、明暗、色偏与实物一致，故与四周的纸无接缝可寻 */
.patch__paper{
  position:absolute; display:block;
  left: calc(-1 * var(--x, 0px)); top: calc(-1 * var(--y, 0px));
  width: var(--fw, 100%); height: var(--fh, 100%);
  background-repeat:no-repeat; background-size:100% 100%;
}

/* ─────────── 沉浸：四周压暗、纸面退后 ─────────── */
.veil{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  opacity:0; transition: opacity .8s ease;
  background:
    radial-gradient(70% 62% at 50% 46%, rgba(16,10,4,0) 34%, rgba(16,10,4,.42) 100%),
    linear-gradient(180deg, rgba(16,10,4,.08), rgba(16,10,4,.22));
}
.spread[data-sent] .veil{ opacity:1; }
/* 灯落在这一句上：句段之下各一汪暖光，边上自然化开，故不生硬边。
   灯在浮起层之内、补白之上、墨之下——灯照的是纸，不是字；
   若把光叠在字上，墨就被冲淡成一层灰金。 */
.puff{
  position:absolute; display:block; z-index:2; pointer-events:none;
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(255,250,232,.66), rgba(255,240,200,.30) 46%, rgba(255,232,180,0) 80%);
  filter: blur(12px);
}
.folio__img{ transition: filter .8s ease; }
/* 纸面与补白同时退后同一档：补白的边界因此消失，
   「灯落在这一句上」改由 .pool 那汪暖光担当 */
.spread[data-sent] .folio__img,
.spread[data-sent] .patch{ filter: brightness(.62) saturate(.86); }

/* ─────────── 释读签条：纸色托墨，压暗之上仍然清楚 ─────────── */
.glossstrip{
  position:relative; z-index:9; grid-row:3;
  display:flex; align-items:center; justify-content:center;
  padding: 0 4% .5em;
  opacity:0; transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
  container-type: inline-size;       /* 供下方「签条自己有多宽」的判断用 */
}
.glossstrip.is-on{ opacity:1; transform:none; pointer-events:auto; }

.card{
  position:relative;
  display:flex; align-items:center;
  gap: clamp(10px, 1.1%, 26px);
  width:100%;
  padding: .34em 1.05em .42em;
  color:#3a3025;
  opacity:0; transform: translateY(10px) scaleY(.96);
  transition: opacity .55s ease .18s, transform .7s cubic-bezier(.2,.8,.2,1) .18s;
}
.glossstrip.is-on .card{ opacity:1; transform:none; }
.card__paper{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(255,252,241,.97), rgba(243,233,209,.96) 46%, rgba(232,220,192,.97));
  box-shadow:
    0 12px 30px rgba(16,10,4,.52),
    0 0 0 1px rgba(126,96,56,.30) inset,
    0 0 0 3px rgba(255,252,241,.08);
  border-radius: 2px;
}
/* 签条上下各压一条淡墨线：纸边的朱丝栏 */
.card__paper::before,
.card__paper::after{
  content:''; position:absolute; left:6px; right:6px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(140,104,62,.34) 18%, rgba(140,104,62,.34) 82%, transparent);
}
.card__paper::before{ top:4px; }
.card__paper::after{ bottom:4px; }

.card__seal{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  width: 1.75em; height: 1.75em;
  font-family: var(--f-brush);
  font-size: clamp(11px, calc(var(--u,8px) * 1.15), 15px);
  color: #f7eed9;
  background: linear-gradient(160deg, #b23f30, #8e2a20);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(60,20,10,.4);
  opacity:.92;
}
.card__label{
  position:relative; margin:0; flex:0 0 auto;
  font-family: var(--f-brush);
  font-size: clamp(14px, calc(var(--u,8px) * 2.05), 26px);
  line-height:1.1;
  letter-spacing:.14em; text-indent:.14em;
  white-space:nowrap;
  color:#96281a;
  text-shadow: 0 1px 0 rgba(255,252,241,.85);
}
.card__label .ch{ display:inline-block; opacity:0; filter: blur(7px); }
.glossstrip.is-on .card__label .ch{
  animation: brushin .58s cubic-bezier(.2,.78,.22,1) both;
  animation-delay: var(--d, 0ms);
}
.card__rule{
  flex:0 0 auto; width:1px; align-self:stretch; margin:.35em 0;
  background: linear-gradient(180deg, transparent, rgba(122,88,48,.5), transparent);
}
.card__rule--thin{ opacity:.55; }
.card__text{
  position:relative; margin:0; flex:1 1 auto; min-width:0;
  font-family: var(--f-serif);
  font-size: clamp(11.5px, calc(var(--u,8px) * 1.42), 17px);
  line-height:1.45;
  letter-spacing:.1em;
  color:#3f3527;
}
.card__text .ch{ display:inline-block; opacity:0; filter: blur(7px); }
.glossstrip.is-on .card__text .ch{
  animation: brushin .58s cubic-bezier(.2,.78,.22,1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes brushin{
  0%  { opacity:0; filter: blur(8px); transform: translateY(-4px) scale(1.18); }
  100%{ opacity:1; filter: blur(0); transform:none; }
}
.card__side{
  flex:0 0 auto; margin-left:auto;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:.18em; text-align:right;
}

/* ── 长句的签条：标题、释读、出处各占一行 ───────────────────
   A「论末则殊　考本则同」八字，单行最是疏朗，故短句仍走上面那一行到底的排法；
   但 B 是一整句二十余字（不学番言…则岂入汉人之数），若仍与释读、出处挤在
   同一行，挤到最后一行字只賸一条竖缝——故长句改排三行，各归各位。 */
.card--long{
  display:grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "seal label"
    "seal text"
    "side side";
  align-items:center;
  column-gap: clamp(8px, .9%, 18px);
  row-gap:.14em;
}
.card--long .card__seal{ grid-area:seal; }
.card--long .card__label{
  grid-area:label;
  font-size: clamp(12.5px, calc(var(--u,8px) * 1.52), 19px);
  white-space:normal;               /* 窄屏上长句可以折行，不再撑破签条 */
}
.card--long .card__rule{ display:none; }
.card--long .card__text{ grid-area:text; }
.card--long .card__side{
  grid-area:side; width:100%; margin-left:0; text-align:left;
  flex-direction:row; align-items:center; justify-content:space-between;
  gap:.6em;
}
.card--long .card__meta{ white-space:normal; }

/* 签条本身窄于此，单行排法会把释读与出处压成一条竖缝（窄窗、横放的窄屏），
   故一律改排三行。与上面 .card--long 是同一套排法，差别只在判准：
   那里看「句子长不长」，这里看「签条够不够宽」。不支援 container 查询的
   浏览器只会维持原排法，不会坏。 */
@container (max-width: 700px){
  .card{
    display:grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "seal label"
      "seal text"
      "side side";
    align-items:center;
    column-gap: clamp(8px, .9%, 18px);
    row-gap:.14em;
  }
  .card .card__seal{ grid-area:seal; }
  .card .card__label{
    grid-area:label;
    font-size: clamp(12.5px, calc(var(--u,8px) * 1.52), 19px);
    white-space:normal;
  }
  .card .card__rule{ display:none; }
  .card .card__text{ grid-area:text; }
  .card .card__side{
    grid-area:side; width:100%; margin-left:0; text-align:left;
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:.6em;
  }
  .card .card__meta{ white-space:normal; }
}
.card__meta{
  margin:0;
  font-family: var(--f-serif);
  font-size: clamp(9.5px, calc(var(--u,8px) * 1.02), 13px);
  letter-spacing:.1em;
  color: rgba(96,70,42,.86);
  white-space:nowrap;
}
.card__nav{ display:flex; gap:.3em; }
.cnav{
  appearance:none; -webkit-appearance:none;
  border:1px solid rgba(120,88,50,.38);
  background: rgba(255,253,246,.5);
  color:#6b4a28;
  font-family: var(--f-serif);
  font-size: clamp(9.5px, calc(var(--u,8px) * 1.0), 12.5px);
  letter-spacing:.08em;
  padding:.16em .5em;
  border-radius:2px; cursor:pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.cnav:hover{ background: rgba(166,52,40,.9); color:#f9f1dd; border-color: rgba(166,52,40,.9); }
.cnav:focus-visible{ outline:2px solid var(--vermilion); outline-offset:1px; }
.cnav--close{ color:#96281a; border-color: rgba(150,40,26,.45); }

/* 窄屏：签条改为上下两行，免得挤成一条 */
@media (max-aspect-ratio: 1/1){
  .card{ flex-wrap:wrap; row-gap:.3em; }
  .card__rule--thin{ display:none; }
  .card__side{ width:100%; margin-left:0; flex-direction:row; align-items:center; justify-content:space-between; }
}

/* ─────────── 翻叶：书口／叶码 ─────────── */
.turn{
  position:absolute; top:0; bottom:0; z-index:8;
  border:0; padding:0; cursor:pointer;
  background: linear-gradient(90deg, rgba(70,48,24,.16), transparent 70%);
  opacity:.55; transition: opacity .35s ease;
}
.turn--outer{ width:7%; }
.side--tangut .turn--outer{ left:0; }
.side--han    .turn--outer{ right:0; transform: scaleX(-1); }
.turn:hover{ opacity:1; }
.turn:focus-visible{ outline:2px solid var(--gold); outline-offset:-4px; }
.turn::after{
  content:''; position:absolute; top:50%; left:38%;
  width:0; height:0; margin-top:-7px;
  border:7px solid transparent;
  border-right-color: rgba(120,80,40,.55);
}
.fno{
  position:absolute; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;   /* 叶次已见于书眉，此处仅供朗读 */
}
.side--tangut .fno{ left:3%; }
.side--han .fno{ right:3%; }

/* ─────────── 水墨画布 ─────────── */
.inkcanvas{
  position:absolute; inset:0; z-index:6;
  width:100%; height:100%; pointer-events:none;
}

/* ─────────── 调试 ─────────── */
.spread[data-debug="zones"] .zone{
  fill: rgba(255,60,120,.14); stroke:#ff2d7a; stroke-width:2; stroke-dasharray: 8 6;
}
.spread[data-debug="zones"] .zone[data-sent]{ fill: rgba(60,160,255,.18); stroke:#1b7bff; }

/* ─────────── 窄屏：改为上下两页，仍保双语并置语义 ─────────── */
@media (max-aspect-ratio: 1/1){
  .spread__head{ gap:1%; }
  .spread__leafname{ font-size: calc(var(--u,8px)*.9); letter-spacing:.16em; }
}

@media (prefers-reduced-motion: reduce){
  .link{ animation:none; }
  .part{ transition-duration:.01ms; }
}