/* ══════════════════════════════════════════════════════════════
   底层书页：其一·开宗（蕃汉双序 + 水墨擦拭）与其余三卷提要
   ══════════════════════════════════════════════════════════════ */

.pages{ position:absolute; inset:0; z-index:2; }

.page{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition: opacity .55s ease, visibility .55s;
  overflow:hidden;
  background-color:#f1e6cd;
  background-image:
    radial-gradient(120% 78% at 18% 0%, rgba(255,253,245,.72), transparent 58%),
    url("../assets/paper-tile.png"),
    repeating-linear-gradient(90deg, rgba(150,128,96,.055) 0 1px, rgba(150,128,96,0) 1px 9px),
    linear-gradient(180deg, #f6eedb, #efe3c8 62%, #e9dcbe);
  background-size: auto, 56% auto, auto, auto;
  background-repeat: no-repeat, repeat, repeat, no-repeat;
  background-blend-mode: normal, multiply, normal, normal;
  box-shadow:
    inset 0 0 70px rgba(122,96,58,.17),
    inset 0 0 0 1px rgba(150,120,80,.18);
}
.page.is-current{ opacity:1; visibility:visible; }

.page__inner{
  position:absolute; inset:5.6% 6.4% 6.8% 6.4%;
}

/* ─────────── 卷首题名 ─────────── */
.vol-head{
  position:absolute; right:0; top:0;
  display:flex; align-items:flex-start; gap: calc(var(--u,8px) * 1.5);
  writing-mode: vertical-rl;
  color: var(--ink);
}
.vol-head__no{
  margin:0; font-size: calc(var(--u,8px) * 1.15);
  letter-spacing:.34em; color: var(--vermilion);
}
.vol-head__name{
  margin:0; font-family: var(--f-brush); font-weight:400;
  font-size: calc(var(--u,8px) * 4.4);
  letter-spacing:.18em; color:#2a2118;
  text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 18px rgba(120,90,50,.16);
}
.vol-head__sub{
  margin:0; font-size: calc(var(--u,8px) * 1.05);
  letter-spacing:.28em; color: var(--ink-faint);
  align-self:flex-end;
}

/* ─────────── 序：两层叠合，中央擦拭分界 ─────────── */
.prefaces{
  position:absolute; left:11%; right:0; top:23%; bottom:13%;
  cursor: crosshair;
}
.preface{ position:absolute; inset:0; }
.preface--han{ pointer-events:none; }
.preface__cols{
  position:absolute; inset:0;
  display:flex; flex-direction: row-reverse;
  align-items: stretch; justify-content: flex-start;
  padding-right: var(--pad-r, 0px);          /* 让出右侧题名直幅 */
}
.col{
  flex: 0 0 auto;
  width: var(--colw, 28px);
  height:100%;
  writing-mode: vertical-rl;
  font-size: var(--pf-size, 16px);
  line-height: 1.7;
  letter-spacing: .01em;
  color:#2a231a;
  border-right:1px solid rgba(168,74,52,.26);
  padding-right: .1em;
}
.preface--han .col{ border-right-color: rgba(60,120,150,.14); }

/* 汉序：预设全隐，擦拭经过时逐栏显影 */
.preface--han .col .ch,
.preface--han .col .pn{ opacity:0; }
.col.is-on .ch{
  animation: soak-in .72s cubic-bezier(.2,.75,.2,1) both;
  animation-delay: calc(var(--j) * 42ms);
}
.col.is-on .pn{ opacity:1; transition: opacity .5s ease .1s; }
@keyframes soak-in{
  0%  { opacity:0; filter: blur(9px); transform: scale(1.16); }
  55% { opacity:1; filter: blur(1.5px); }
  100%{ opacity:1; filter: blur(0); transform: scale(1); }
}
.col .ch{ display:inline-block; }

/* 西夏文序题：取自封面的原书题名（SVG 裁切，无字库依赖） */
.title-crop{
  position:absolute; right:0; top:0;
  height: 46%; width: auto;
  filter: drop-shadow(0 6px 14px rgba(80,50,20,.18));
}
.preface--han .title-crop{ opacity:0; }
.prefaces[data-facing="han"] .preface--root .title-crop{ opacity:0; }
.prefaces[data-facing="han"] .preface--han .title-crop{ opacity:1; }
.title-crop{ transition: opacity .5s ease; }

/* 朱笔校注 */
.rubric{
  position:absolute; left:0; bottom:0;
  margin:0; writing-mode: vertical-rl;
  font-size: calc(var(--u,8px) * 1.0);
  letter-spacing:.2em;
  color: rgba(166,52,40,.82);
  max-height:70%;
}
.prefaces[data-facing="han"] .rubric{ opacity:0; transition: opacity .45s ease; }

/* 擦拭分界：一线墨痕 */
.wipe{
  position:absolute; top:-5%; bottom:-5%; width:14%;
  left: var(--front, 100%);
  transform: translateX(-52%);
  pointer-events:none; opacity:0;
  background:
    radial-gradient(60% 44% at 50% 26%, rgba(40,30,20,.16), transparent 72%),
    linear-gradient(90deg, rgba(40,30,20,.22), rgba(40,30,20,.05) 58%, transparent);
  filter: blur(8px);
  transition: opacity .35s ease;
}
.prefaces[data-wiping="1"] .wipe{ opacity:1; }

/* ─────────── 擦拭切换签（蕃序／汉序） ─────────── */
.visor{
  position:absolute; left:0; top:26%;
  writing-mode: vertical-rl;
  display:flex; align-items:center; gap:.9em;
  padding:.85em .5em;
  font-family: var(--f-serif); font-size: calc(var(--u,8px) * 1.22);
  letter-spacing:.3em; color: var(--red-deep);
  border:1px solid rgba(160,66,38,.5);
  border-radius:2px;
  background: linear-gradient(180deg, rgba(190,88,48,.15), rgba(190,88,48,.04) 60%, rgba(190,88,48,.12));
  box-shadow: 0 3px 10px rgba(90,50,20,.14), inset 0 0 0 1px rgba(255,246,226,.35);
  cursor:pointer;
  transition: background .35s ease, color .35s ease, transform .35s ease;
}
.visor:hover{ transform: translateY(-3px); background: linear-gradient(180deg, rgba(190,88,48,.26), rgba(190,88,48,.08)); }
.visor__tip{ font-size:.62em; letter-spacing:.16em; color: rgba(120,92,62,.8); }
.visor:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ─────────── 其余三卷：提要 ─────────── */
.brief{
  position:absolute; right:0; top:34%; left:14%;
  writing-mode: vertical-rl;
  max-height:62%;
  font-size: calc(var(--u,8px) * 1.5);
  line-height: 2.05;
  letter-spacing:.14em;
  color:#2f281e;
}
.brief p{ margin:0 0 0 .9em; }
.brief__mark{
  font-family: var(--f-brush);
  color: rgba(166,52,40,.85);
  font-size: 1.5em;
  letter-spacing:.2em;
}

/* ─────────── 返回封面（左书脊热区） ─────────── */
.gutter{
  position:absolute; left:0; top:0; bottom:0;
  width: var(--rail, 5.2%); min-width:22px;      /* 落在对开页左侧边栏，不遮字 */
  z-index:20; border:0; padding:0; cursor:pointer;
  background: linear-gradient(90deg, rgba(60,40,20,.16), transparent 78%);
  opacity:0; visibility:hidden;
  transition: opacity .5s ease, visibility .5s;
}
.stage[data-view="page"] .gutter{ opacity:.9; visibility:visible; }
.gutter span{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  writing-mode: vertical-rl;
  font-family: var(--f-serif); font-size: calc(var(--u,8px) * 1.0);
  letter-spacing:.3em; color: rgba(90,62,34,.75);
}
.gutter:hover span{ color: var(--red-deep); }
.gutter:focus-visible{ outline:2px solid var(--gold); outline-offset:-4px; }