/* 卷锦翻章：卷面覆盖实际正文，不增加滚动占位。
   延续宣纸、青绿、古金与现有书法；锦边取自本项目的几何纹样。
   纸面的反向位移抵消外层裁切位移，让题字随纸收拢而不拉伸。 */
.chapter-turn{
  --turn-lift:0px;
  --turn-opacity:1;
  --turn-title-opacity:1;
  --turn-ink:var(--jade);
  --turn-ground:var(--paper);
  --turn-edge:rgba(169,136,74,.62);
  position:absolute;inset:0 0 auto;height:100svh;z-index:8;
  overflow:hidden;pointer-events:none;contain:layout paint style;
  visibility:hidden;opacity:var(--turn-opacity);
}
.chapter-turn.is-active{visibility:visible}
.chapter-turn[data-tone="dark"]{
  --turn-ink:var(--gold);
  --turn-ground:#193C33;
  --turn-edge:rgba(198,163,91,.66);
}
.turn-paper{
  position:absolute;inset:0;overflow:hidden;
  transform:translate3d(0,calc(-1 * var(--turn-lift)),0);
  pointer-events:auto;
}
.turn-surface{
  position:absolute;inset:0;
  transform:translate3d(0,var(--turn-lift),0);
  color:var(--turn-ink);background-color:var(--turn-ground);
  background-image:var(--weave-soft);
}
.chapter-turn[data-tone="dark"] .turn-surface{background-image:var(--weave-dark)}
.turn-surface::before{
  content:"";position:absolute;inset:20px clamp(18px,3vw,52px);
  border:1px solid var(--turn-edge);
  outline:1px solid var(--turn-edge);outline-offset:5px;opacity:.75;
}
.turn-surface::after{
  content:"";position:absolute;inset:34px clamp(32px,4vw,68px);
  border-inline:1px solid var(--turn-edge);opacity:.38;
}
.turn-selvedge{
  position:absolute;top:34px;bottom:34px;width:clamp(30px,4vw,60px);
  background-image:url("../assets/patterns/DJ-GEO-003.png");
  background-size:100% auto;background-repeat:repeat-y;
  opacity:.18;filter:grayscale(1);mix-blend-mode:multiply;
}
.turn-selvedge--left{left:clamp(34px,4.4vw,72px)}
.turn-selvedge--right{right:clamp(34px,4.4vw,72px);transform:scaleX(-1)}
.chapter-turn[data-tone="dark"] .turn-selvedge{mix-blend-mode:screen;opacity:.16}
.turn-heading{
  position:absolute;left:50%;top:13%;
  transform:translateX(-50%);width:min(54vw,620px);
  display:grid;justify-items:center;gap:clamp(12px,2vh,22px);
  opacity:var(--turn-title-opacity);
}
.turn-number{
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid var(--turn-edge);font-size:20px;line-height:1;
  color:var(--gold-2);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);
}
.turn-heading img{width:100%;height:auto;max-height:20svh;object-fit:contain}
.chapter-turn[data-tone="dark"] .turn-heading img{
  filter:brightness(0) saturate(100%) invert(71%) sepia(32%) saturate(592%) hue-rotate(1deg) brightness(91%) contrast(88%);
}
.chapter-turn[data-tone="dark"] .turn-number{color:var(--gold)}
.turn-rule{display:flex;align-items:center;gap:15px;width:60%;color:var(--gold-2)}
.turn-rule::before,.turn-rule::after{content:"";height:1px;flex:1;background:currentColor;opacity:.6}
.turn-rule i{display:block;width:8px;height:8px;border:1px solid currentColor;transform:rotate(45deg)}
.turn-top-rod,.turn-roller{
  position:absolute;left:0;right:0;
  background:linear-gradient(180deg,#DCC594 0%,#AF8D4C 18%,#DFCB9D 40%,#C3A465 60%,#92743C 100%);
  border-block:1px solid rgba(115,86,37,.55);
}
.turn-top-rod{top:0;height:8px;opacity:var(--turn-title-opacity)}
.turn-roller{
  bottom:-2px;height:clamp(24px,3.8svh,38px);
  transform:translate3d(0,calc(-1 * var(--turn-lift)),0);
  box-shadow:0 10px 18px rgba(22,36,29,.18),0 2px 3px rgba(22,36,29,.22);
  border-radius:3px;overflow:visible;
}
.turn-roller::before,.turn-roller::after{
  content:"";position:absolute;top:-3px;bottom:-3px;width:clamp(18px,2.6vw,38px);
  border:1px solid #9B7C41;
  background:linear-gradient(90deg,#9D7F45,#DDC58B 18%,#AF8B44 28%,#D7BC83 48%,#A17F3E 78%,#DBC694);
}
.turn-roller::before{left:clamp(10px,1.8vw,30px)}
.turn-roller::after{right:clamp(10px,1.8vw,30px)}
.turn-roller i{
  position:absolute;inset:5px clamp(38px,5vw,82px);
  border-block:1px solid rgba(85,63,25,.22);
  background-image:repeating-linear-gradient(90deg,transparent 0 9px,rgba(245,241,230,.08) 9px 10px);
}
.chapter-turn.is-active .turn-paper,.chapter-turn.is-active .turn-surface,
.chapter-turn.is-active .turn-roller{will-change:transform}
@media(max-width:760px){
  .chapter-turn{height:86svh}
  .turn-heading{width:67vw;top:16%;gap:12px}
  .turn-heading img{max-height:15svh}
  .turn-number{width:30px;height:30px;font-size:17px}
  .turn-selvedge{width:22px;opacity:.13}
  .turn-selvedge--left{left:22px}.turn-selvedge--right{right:22px}
  .turn-surface::before{inset:16px 14px;outline-offset:4px}
  .turn-surface::after{inset:25px 50px;opacity:.25}
  .turn-rule{width:52%}
}
@media(prefers-reduced-motion:reduce){
  .chapter-turn{display:none!important}
}
html.static .chapter-turn{display:none}
@media print{.chapter-turn{display:none!important}}