/* ============================================================
   标本簿 · HERBARIUM OF LIGHT
   一册可翻动的照片书 · 纯本地资源，无外部依赖
   ============================================================ */

:root {
  --pw: 470px;          /* 单页宽，由 JS 按视口计算 */
  --ph: 658px;          /* 单页高 */
  --fs: 14px;           /* 页内基准字号 */
  --cloth:      #465644;
  --cloth-dark: #2F3C30;
  --gold:       #C6A870;
  --gold-soft:  #E5D2AA;
  --paper:      #FBF7ED;
  --paper-edge: #EFE5D2;
  --ink:        #3B342A;
  --ink-soft:   #756850;
  --ink-faint:  #A29176;
  --rose:       #B78472;
  --line:       rgba(96, 74, 46, .18);
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono:  "Courier New", Consolas, monospace;
  --flip-ease:  cubic-bezier(.42, .03, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { overflow-x: hidden; }
body {
  margin: 0; overflow-x: hidden; color: var(--ink);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
img { display: block; max-width: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
::selection { background: var(--gold-soft); }

/* ===================== 桌面 ===================== */
.desk {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(158deg, #E8D9C2 0%, #DCC7A8 46%, #C4AA88 100%);
}
.desk-grain {
  position: absolute; inset: 0; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.75'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='.4'/%3E%3C/svg%3E"),
    repeating-linear-gradient(91deg, rgba(120, 92, 58, .045) 0 1px, transparent 1px 7px);
}
.desk-glow { position: absolute; inset: 0; background: radial-gradient(900px 620px at 34% 12%, rgba(255, 246, 222, .65), transparent 70%), radial-gradient(700px 600px at 88% 88%, rgba(90, 68, 40, .16), transparent 70%); }
.desk-fern { position: absolute; width: 340px; height: 660px; color: #6A5437; opacity: .13; }
.desk-fern-l { left: -90px; bottom: -160px; transform: rotate(18deg); }
.desk-fern-r { right: -120px; top: -210px; transform: rotate(196deg); }
.desk-note { position: absolute; bottom: 20px; left: 28px; font: 10px var(--font-mono); letter-spacing: .22em; color: rgba(74, 56, 34, .42); }

/* ===================== 开场：全屏图片封面 ===================== */
.opening {
  position: fixed; inset: 0; z-index: 80; overflow: hidden;
  background: #26301F;
  transition: opacity .85s ease, visibility .85s;
}
.opening.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.cover-media { position: absolute; inset: 0; display: block; }
.cover-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cover-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(270deg, rgba(16, 21, 13, .84) 0%, rgba(16, 21, 13, .5) 38%, rgba(16, 21, 13, .04) 74%),
    linear-gradient(0deg, rgba(12, 16, 10, .84) 0%, rgba(12, 16, 10, .32) 34%, transparent 64%);
}
.cover-content {
  position: absolute; right: clamp(28px, 7vw, 118px); bottom: clamp(64px, 12vh, 130px);
  max-width: min(660px, 76vw); color: #FBF6EA;
  display: flex; flex-direction: column; align-items: flex-end; text-align: right;
}
.cover-top { display: block; font: 10px var(--font-mono); letter-spacing: .3em; color: var(--gold-soft); }
.cover-top i { font-style: normal; margin: 0 5px; }
.cover-title {
  margin: 18px 0 6px; font: 500 clamp(42px, 6.2vw, 88px)/1.15 var(--font-serif);
  letter-spacing: .16em; text-shadow: 0 3px 24px rgba(0, 0, 0, .5);
}
.cover-sub { margin: 0; font: 500 clamp(16px, 2vw, 24px) var(--font-serif); letter-spacing: .32em; color: #F0E2C6; }
.cover-en { margin: 20px 0 0; font: 9px var(--font-mono); letter-spacing: .26em; color: rgba(251, 246, 234, .72); }
.cover-rule { display: block; width: 64px; height: 1px; margin: 22px 0 16px; background: var(--gold-soft); }
.cover-note { margin: 0 0 26px; font: 12px var(--font-serif); letter-spacing: .12em; color: rgba(251, 246, 234, .88); }
.open-btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 13px 28px; border-radius: 999px;
  border: 1px solid rgba(251, 246, 234, .82); color: #FBF6EA; font-size: 13px; letter-spacing: .18em;
  background: rgba(20, 26, 16, .32); backdrop-filter: blur(6px);
  transition: transform .35s var(--flip-ease), background .3s, box-shadow .35s;
}
.open-btn svg { width: 17px; height: 17px; transition: transform .35s var(--flip-ease); }
.open-btn:hover { transform: translateY(-3px); background: rgba(251, 246, 234, .16); box-shadow: 0 16px 34px rgba(0, 0, 0, .3); }
.open-btn:hover svg { transform: translateX(4px); }
.cover-corner { position: absolute; left: clamp(20px, 4vw, 56px); top: clamp(20px, 4vh, 44px); font: 9px var(--font-mono); letter-spacing: .2em; color: rgba(251, 246, 234, .74); }
.opening-hint { position: absolute; left: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4vh, 40px); margin: 0; font: 10px var(--font-mono); letter-spacing: .2em; color: rgba(251, 246, 234, .68); }
.opening .cover-corner, .opening .cover-top, .opening .cover-title, .opening .cover-sub,
.opening .cover-en, .opening .cover-rule, .opening .cover-note, .opening .open-btn, .opening .opening-hint {
  opacity: 0; animation: cover-rise .9s var(--flip-ease) forwards;
}
.opening .cover-corner { animation-delay: .1s; }
.opening .cover-top { animation-delay: .18s; }
.opening .cover-title { animation-delay: .28s; }
.opening .cover-sub { animation-delay: .38s; }
.opening .cover-en { animation-delay: .48s; }
.opening .cover-rule { animation-delay: .54s; }
.opening .cover-note { animation-delay: .6s; }
.opening .open-btn { animation-delay: .7s; }
.opening .opening-hint { animation-delay: .8s; }
@keyframes cover-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* 桌面书本：纯排版环衬（不复用标本照片） */
.page-paper.is-poster.title-leaf { background: linear-gradient(150deg, #FBF7ED, #F0E4CE); }
.title-leaf-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8%; text-align: center; }
.title-leaf-kicker { font: 9px var(--font-mono); letter-spacing: .24em; color: var(--gold); }
.title-leaf-fern { position: absolute; width: 40%; height: 62%; right: 3%; bottom: 4%; color: var(--gold); opacity: .15; transform: rotate(9deg); }
.title-leaf-inner h2 { position: relative; margin: 5% 0 1%; font: 500 2.6em var(--font-serif); letter-spacing: .18em; color: var(--ink); }
.title-leaf-inner p { position: relative; margin: 0; font: 1.05em var(--font-serif); letter-spacing: .24em; color: var(--ink-soft); }
.title-leaf-rule { position: relative; display: block; width: 58px; height: 1px; margin: 6% 0 4%; background: var(--gold); }
.title-leaf-inner small { position: relative; display: block; font: 9px/1.8 var(--font-mono); letter-spacing: .14em; color: var(--ink-faint); }
.title-leaf-toc { position: relative; display: flex; flex-direction: column; gap: 7px; margin-top: 7%; }
.title-leaf-toc span { font: .92em var(--font-serif); letter-spacing: .14em; color: var(--ink); }
.title-leaf-toc em { display: block; font: 8px var(--font-mono); letter-spacing: .12em; font-style: normal; color: var(--ink-faint); }
.title-leaf .end-close { position: relative; margin-top: 7%; padding: 8px 22px; border: 1px solid rgba(74, 56, 34, .4); border-radius: 999px; font-size: .72em; letter-spacing: .14em; color: var(--ink-soft); }

/* ============ 首 / 末跨页：同一张照片铺满左右两页 ============
   左页承载「整图左半」，右页承载「整图右半」：
   两页里的 img 同为 2 页宽，只靠 left 偏移各露一半，书脊处严丝合缝。 */
.spread-photo { position: absolute; inset: 0; overflow: hidden; background: #E7DCC6; cursor: zoom-in; }
.spread-photo img { position: absolute; top: 0; height: 100%; width: calc(var(--pw) * 2 * var(--sp-z, 1)); max-width: none; object-fit: cover; }
.spread-photo.is-left img { left: 0; }
.spread-photo.is-right img { left: calc(var(--pw) * -1); }
.spread-photo .spread-lqip { filter: blur(14px) saturate(1.06); }
.spread-photo .spread-img { opacity: 0; transition: opacity .9s ease; }
.spread-photo .spread-img.is-loaded { opacity: 1; }
.spread-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(132% 108% at 50% 46%, transparent 64%, rgba(56, 38, 20, .18) 100%); }
.end-close.is-on-photo { position: absolute; right: 6.4%; bottom: 5.4%; width: max-content; max-width: 80%; z-index: 9; padding: 9px 22px; border: 1px solid rgba(255, 249, 236, .46); border-radius: 999px; background: rgba(46, 33, 20, .3); color: rgba(255, 250, 240, .94); font-size: .7em; letter-spacing: .16em; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); transition: background .3s, border-color .3s, transform .3s; }
.end-close.is-on-photo:hover { background: rgba(46, 33, 20, .52); border-color: rgba(255, 249, 236, .8); transform: translateY(-2px); }

/* ===================== 舞台 / 顶栏 ===================== */
.stage {
  position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s;
}
.stage.is-ready { opacity: 1; visibility: visible; }
.topbar { width: 100%; max-width: 1240px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 30px 4px; }
.topbar-left { display: flex; align-items: center; gap: 10px; }
.tb-mark { width: 26px; height: 26px; color: #5A6A52; }
.tb-mark svg { width: 100%; height: 100%; }
.tb-title { font-family: var(--font-serif); font-size: 16px; letter-spacing: .16em; line-height: 1.2; }
.tb-title em { display: block; font: 8.5px var(--font-mono); font-style: normal; letter-spacing: .24em; color: rgba(74, 56, 34, .6); margin-top: 3px; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.tb-chapter { font-size: 11px; letter-spacing: .16em; color: var(--ink-soft); }
.tb-btn { padding: 7px 16px; border: 1px solid rgba(74, 56, 34, .3); border-radius: 999px; font-size: 11.5px; letter-spacing: .12em; color: var(--ink-soft); transition: background .3s, color .3s, transform .3s; }
.tb-btn:hover { background: var(--cloth); color: #F6EBD4; transform: translateY(-2px); }

/* ===================== 书本 ===================== */
.book-scene {
  position: relative; flex: none; display: grid; place-items: center;
  width: calc(var(--pw) * 2 + 60px); height: calc(var(--ph) + 54px);
  perspective: 2600px; perspective-origin: 50% 46%; margin-top: 2px;
}
.book-shadow { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); width: calc(var(--pw) * 2 + 90px); height: calc(var(--ph) * .86); background: radial-gradient(ellipse, rgba(48, 33, 18, .46), transparent 72%); filter: blur(26px); pointer-events: none; }
.book {
  position: relative; width: calc(var(--pw) * 2); height: var(--ph);
  transform-style: preserve-3d; transform: rotateX(var(--rx, 3deg)) rotateY(var(--ry, 0deg));
  transition: transform .55s ease-out;
}
.board { position: absolute; top: -9px; bottom: -9px; width: calc(var(--pw) + 13px); z-index: 0; border-radius: 4px; background: linear-gradient(150deg, #52634F, #344334 62%, #29362A); box-shadow: 0 16px 34px rgba(38, 26, 14, .32), inset 0 0 0 1px rgba(255,255,255,.07); }
.board::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .35; background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px); }
.board-left { left: -12px; border-radius: 8px 2px 2px 8px; }
.board-right { right: -12px; border-radius: 2px 8px 8px 2px; }

.paper-stack { position: absolute; top: 1.4%; height: 97.2%; width: 7px; z-index: 1; border-radius: 2px; background: repeating-linear-gradient(90deg, #F8F1E3 0 1px, #DCCDAF 1px 2px); box-shadow: 2px 2px 6px rgba(60, 44, 26, .18); transition: width .9s var(--flip-ease); }
.stack-left { left: -8px; }
.stack-right { right: -8px; }

.page { position: absolute; top: 0; width: var(--pw); height: 100%; z-index: 2; background: var(--paper); overflow: hidden; }
.static-left { left: 0; border-radius: 3px 0 0 3px; }
.static-right { right: 0; border-radius: 0 3px 3px 0; }
.static-left::after, .static-right::after { content: ""; position: absolute; top: 0; bottom: 0; width: 46px; pointer-events: none; z-index: 3; }
.static-left::after { right: 0; background: linear-gradient(90deg, transparent, rgba(66, 47, 26, .17)); }
.static-right::after { left: 0; background: linear-gradient(270deg, transparent, rgba(66, 47, 26, .17)); }

.sheets { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.sheet { position: absolute; top: 0; left: var(--pw); width: var(--pw); height: 100%; pointer-events: auto; transform-style: preserve-3d; transform-origin: left center; transform: rotateY(0deg); transition: transform .95s var(--flip-ease); }
.sheet.is-flipped { transform: rotateY(-180deg); }
.face { position: absolute; inset: 0; overflow: hidden; background: var(--paper); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 0 0 1px rgba(120, 96, 62, .1); }
.face.back { transform: rotateY(180deg); }
.face::after { content: ""; position: absolute; inset: 0; z-index: 9; opacity: 0; pointer-events: none; }
.face.front::after { background: linear-gradient(90deg, rgba(38, 26, 14, .62), rgba(38, 26, 14, .16) 42%, transparent 78%); }
.face.back::after { background: linear-gradient(270deg, rgba(38, 26, 14, .55), rgba(38, 26, 14, .12) 42%, transparent 78%); }
.sheet.is-turning .face.front::after { animation: shade-a .95s var(--flip-ease) both; }
.sheet.is-turning .face.back::after { animation: shade-b .95s var(--flip-ease) both; }
@keyframes shade-a { 0% { opacity: 0; } 48% { opacity: .62; } 100% { opacity: 0; } }
@keyframes shade-b { 0% { opacity: 0; } 48% { opacity: .5; } 100% { opacity: 0; } }
.sheet.is-dragging .face.front::after { opacity: calc(var(--flip, 0) * .62); }
.sheet.is-dragging .face.back::after { opacity: calc((1 - var(--flip, 0)) * .5); }

.gutter { position: absolute; top: 0; bottom: 0; left: calc(var(--pw) - 26px); width: 52px; z-index: 400; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(56, 40, 24, .15) 40%, rgba(56, 40, 24, .3) 50%, rgba(56, 40, 24, .15) 60%, transparent); }
.gutter::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(56, 40, 24, .28); }
.spine-lines { position: absolute; left: calc(var(--pw) - 3px); top: 0; bottom: 0; width: 6px; z-index: 401; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 12%, rgba(120, 92, 56, .45) 12% 15%, transparent 15% 33%); }

.page-curl { position: absolute; right: 0; bottom: 0; width: 60px; height: 60px; z-index: 450; overflow: hidden; }
.page-curl span { position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 44px 44px; border-color: transparent transparent rgba(214, 196, 160, .55) transparent; filter: drop-shadow(-3px -3px 5px rgba(60,44,26,.2)); transition: border-width .35s var(--flip-ease), border-color .3s; }
.page-curl::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 10px; height: 10px; border-right: 1px solid rgba(90, 70, 44, .6); border-bottom: 1px solid rgba(90, 70, 44, .6); transform: rotate(-45deg); }
.page-curl:hover span { border-width: 0 0 60px 60px; border-color: transparent transparent var(--gold-soft) transparent; }
.page-curl.is-hidden { opacity: 0; pointer-events: none; }

/* ===================== 页内版式 ===================== */
.page-paper { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 6.4% 7.4% 4.6%; font-size: var(--fs); }
.page-paper::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 8; background: radial-gradient(120% 100% at 50% 50%, transparent 62%, rgba(176, 146, 100, .09) 100%); }
.page-head { display: flex; justify-content: space-between; gap: 1em; flex: none; font: .58em var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--line); padding-bottom: .8em; }
.page-body { position: relative; flex: 1 1 auto; min-height: 0; }
.page-foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex: none; border-top: 1px solid var(--line); padding-top: .7em; font: .58em var(--font-mono); letter-spacing: .13em; color: var(--ink-faint); }
.page-foot .folio-num { font-family: var(--font-serif); font-size: 1.6em; color: var(--ink-soft); letter-spacing: .05em; }

.plate { position: absolute; display: flex; flex-direction: column; margin: 0; padding: 5px 5px 0; background: #FFFDF7; border-radius: 1px; box-shadow: 0 7px 18px rgba(70, 52, 30, .18), 0 1px 3px rgba(70, 52, 30, .12); cursor: zoom-in; transition: transform .5s var(--flip-ease), box-shadow .5s; }
.plate:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 16px 30px rgba(70, 52, 30, .24); z-index: 6; }
.plate-img { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--tone, #EDE1CC); }
.plate-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plate-lqip { filter: blur(11px) saturate(1.1); transform: scale(1.12); }
.plate-photo { opacity: 0; transition: opacity .85s ease; }
.plate-photo.is-loaded { opacity: 1; }
.plate figcaption { flex: none; font: .56em var(--font-mono); letter-spacing: .08em; color: var(--ink-faint); padding: 4px 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate-tape { position: absolute; top: -7px; left: 50%; width: 50px; height: 14px; transform: translateX(-50%) rotate(-3deg); background: rgba(226, 208, 171, .72); box-shadow: 0 1px 3px rgba(70, 52, 30, .14); }
.plate-tape::before, .plate-tape::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(255,255,255,.5) 2px 4px); }
.plate-tape::before { left: 0; } .plate-tape::after { right: 0; }
.plate.is-flash { animation: plate-flash 1.5s ease; }
@keyframes plate-flash { 0%,100% { box-shadow: 0 7px 18px rgba(70,52,30,.18); } 30% { box-shadow: 0 0 0 4px var(--gold), 0 16px 30px rgba(70,52,30,.3); } }

.tag { position: absolute; border: 1px solid var(--line); border-top: 2px solid var(--gold); background: rgba(255, 253, 246, .72); padding: .7em .9em .8em; }
.tag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .1em 1.2em; }
.tag-item { display: flex; justify-content: space-between; gap: .4em; border-bottom: 1px dotted var(--line); padding: .22em 0; font-size: .62em; white-space: nowrap; overflow: hidden; }
.tag-item span { font-family: var(--font-mono); letter-spacing: .08em; color: var(--ink-faint); }
.tag-item strong { font-weight: 500; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
.tag-note { margin: .55em 0 0; font-family: var(--font-serif); font-size: .72em; line-height: 1.7; color: var(--ink-soft); }
.handwrite { position: absolute; font-family: var(--font-serif); font-style: italic; color: var(--rose); letter-spacing: .06em; line-height: 1.9; }
.dash-box { position: absolute; border: 1px dashed rgba(150, 116, 76, .45); }
.fern-art { position: absolute; color: #7E8A6B; opacity: .2; pointer-events: none; }
.stamp-art { position: absolute; color: var(--rose); opacity: .55; pointer-events: none; }
.stamp-text { position: absolute; display: grid; place-items: center; text-align: center; color: var(--rose); font: .6em var(--font-mono); letter-spacing: .16em; line-height: 1.5; opacity: .75; }

/* 扉页 */
.title-page { align-items: center; justify-content: center; text-align: center; }
.ex-libris { width: 78%; border: 1px solid rgba(150, 116, 76, .5); outline: 1px solid rgba(150, 116, 76, .28); outline-offset: 5px; padding: 1.6em 1em; margin-bottom: 1.6em; }
.ex-libris span { font: .6em var(--font-mono); letter-spacing: .34em; color: var(--ink-faint); }
.ex-libris strong { display: block; margin: .5em 0 .3em; font-family: var(--font-serif); font-size: 1.7em; font-weight: 500; letter-spacing: .18em; white-space: nowrap; }
.ex-libris em { font-style: normal; font: .58em var(--font-mono); letter-spacing: .16em; color: var(--ink-faint); }
.title-lead { font-family: var(--font-serif); font-size: 1.05em; line-height: 2.2; letter-spacing: .1em; color: var(--ink-soft); white-space: pre-line; }
.title-meta { margin-top: 1.8em; font: .6em var(--font-mono); letter-spacing: .14em; line-height: 2.2; color: var(--ink-faint); }
.title-fern { width: 46%; height: 60%; left: -6%; bottom: 2%; }
.title-stamp { width: 74px; height: 74px; right: 8%; bottom: 8%; }
.title-stamp-txt { width: 74px; height: 74px; right: 8%; bottom: 8%; }

/* 目录页 */
.index-title { position: absolute; left: 0; top: 1.5em; font-family: var(--font-serif); font-size: 1.9em; font-weight: 500; letter-spacing: .16em; }
.index-kicker { position: absolute; left: 0; top: 0; font: .58em var(--font-mono); letter-spacing: .24em; color: var(--gold); }
.index-lead { position: absolute; left: 0; top: 5.1em; width: 56%; font-family: var(--font-serif); font-size: .86em; line-height: 2.1; color: var(--ink-soft); white-space: pre-line; }
.chapter-list { position: absolute; left: 0; top: 12em; width: 58%; display: flex; flex-direction: column; gap: .15em; }
.chapter-link { display: flex; align-items: baseline; gap: .7em; padding: .5em .2em; border-bottom: 1px dotted var(--line); text-align: left; transition: color .3s, padding-left .3s; }
.chapter-link:hover { color: var(--gold); padding-left: .6em; }
.chapter-link b { font-family: var(--font-serif); font-size: 1.25em; font-weight: 500; }
.chapter-link span { font-size: .82em; letter-spacing: .12em; white-space: nowrap; }
.chapter-link em { margin-left: auto; font: .6em var(--font-mono); font-style: normal; letter-spacing: .1em; color: var(--ink-faint); white-space: nowrap; }
.index-plate { right: 0; top: 3.4em; width: 38%; height: 62%; transform: rotate(2.5deg); }
.index-foot { position: absolute; left: 0; bottom: .4em; font: .58em var(--font-mono); letter-spacing: .14em; color: var(--ink-faint); }
.index-obs { position: absolute; left: 0; bottom: 2.4em; width: 56%; display: flex; gap: 1.2em; font: .6em var(--font-mono); color: var(--ink-faint); letter-spacing: .08em; }

/* 章节页 */
.chapter-watermark { position: absolute; right: -.12em; top: -.35em; font-family: var(--font-serif); font-size: 10em; line-height: 1; color: rgba(126, 138, 107, .1); pointer-events: none; }
.chapter-kicker { position: absolute; left: 0; top: .4em; font: .62em var(--font-mono); letter-spacing: .3em; color: var(--gold); }
.chapter-name { position: absolute; left: 0; top: 1.7em; font-family: var(--font-serif); font-size: 2.9em; font-weight: 500; letter-spacing: .18em; line-height: 1.3; }
.chapter-en { position: absolute; left: 0; top: 6.4em; font: .66em var(--font-mono); letter-spacing: .26em; color: var(--ink-faint); }
.chapter-quote { position: absolute; left: 0; top: 9.4em; width: 56%; font-family: var(--font-serif); font-size: 1em; line-height: 2.2; color: var(--ink-soft); }
.chapter-rule { position: absolute; left: 0; top: 8.6em; width: 34%; height: 1px; background: var(--line); }
.chapter-range { position: absolute; left: 0; bottom: 2.2em; font: .62em var(--font-mono); letter-spacing: .16em; color: var(--ink-faint); }
.chapter-plate { right: 0; bottom: 0; width: 45%; height: 72%; transform: rotate(2deg); }
.chapter-fern { width: 40%; height: 52%; left: -8%; bottom: -4%; }

/* 单图页 */
.single-hero { left: 2%; top: 2%; width: 96%; height: 63%; }
.single-hero .plate-tape { width: 62px; }
.single-tag { left: 2%; top: 69%; width: 96%; height: 27%; }
.epilogue-text { position: absolute; left: 2%; top: 70%; width: 96%; font-family: var(--font-serif); font-size: 1.05em; line-height: 2.1; color: var(--ink-soft); text-align: center; }
.epilogue-text em { display: block; font-style: normal; font: .6em var(--font-mono); letter-spacing: .22em; color: var(--ink-faint); margin-top: .8em; }

/* 双图页 */
.duo-main { left: 0; top: 1%; width: 76%; height: 66%; transform: rotate(-1deg); }
.duo-sub { right: 0; bottom: 2%; width: 46%; height: 43%; transform: rotate(3deg); }
.duo-note { right: 2%; top: 4%; width: 22%; font-size: .82em; text-align: center; }
.duo-tag { left: 0; bottom: 1%; width: 48%; height: 25%; }
.duo-num { position: absolute; left: 1%; top: 70%; font: .62em var(--font-mono); letter-spacing: .18em; color: var(--ink-faint); }
.duoAlt-a { left: 0; top: 2%; width: 55%; height: 55%; transform: rotate(-1.5deg); }
.duoAlt-b { right: 0; top: 12%; width: 41%; height: 44%; transform: rotate(2deg); }
.duoAlt-c { left: 6%; bottom: 1%; width: 78%; height: 38%; transform: rotate(1deg); }
.duoAlt-note { right: 1%; top: 59%; width: 38%; font-size: .8em; }
.duoAlt-dash { left: 2%; top: 60%; width: 40%; height: 34%; }

/* 手记页 */
.notes-kicker { position: absolute; left: 0; top: 0; font: .62em var(--font-mono); letter-spacing: .28em; color: var(--gold); }
.notes-title { position: absolute; left: 0; top: 1.1em; font-family: var(--font-serif); font-size: 1.7em; font-weight: 500; letter-spacing: .14em; }
.notes-text { position: absolute; left: 0; top: 4.8em; width: 58%; font-family: var(--font-serif); font-size: .9em; line-height: 2.15; color: var(--ink-soft); white-space: pre-line; }
.notes-plate { right: 0; top: 0; width: 38%; height: 47%; transform: rotate(2deg); }
.obs { position: absolute; left: 0; bottom: 1%; width: 62%; border-top: 1px solid var(--line); }
.obs h4 { margin: .7em 0 .4em; font: .6em var(--font-mono); letter-spacing: .22em; color: var(--ink-faint); }
.obs-row { display: flex; justify-content: space-between; gap: 1em; padding: .28em 0; border-bottom: 1px dotted var(--line); font-size: .68em; }
.obs-row span { font-family: var(--font-mono); letter-spacing: .1em; color: var(--ink-faint); }
.obs-row strong { font-weight: 500; color: var(--ink-soft); }
.notes-hand { right: 0; bottom: 3%; width: 34%; text-align: right; font-size: .86em; }

/* 清册页 */
.catalog-title { position: absolute; left: 0; top: 1.5em; font-family: var(--font-serif); font-size: 1.7em; font-weight: 500; letter-spacing: .14em; }
.catalog-kicker { position: absolute; left: 0; top: 0; font: .58em var(--font-mono); letter-spacing: .24em; color: var(--gold); }
.catalog-grid { position: absolute; left: 0; top: 5.1em; width: 72%; height: 76%; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(11, auto); gap: 0 1.4em; }
.catalog-row { display: flex; gap: .5em; border-bottom: 1px dotted var(--line); padding: .16em 0; font-size: .58em; white-space: nowrap; overflow: hidden; }
.catalog-row i { font-style: normal; font-family: var(--font-mono); color: var(--gold); }
.catalog-row span { overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft); }
.catalog-plate { right: 0; top: 6%; width: 25%; height: 34%; transform: rotate(3deg); }
.catalog-stamp { width: 78px; height: 78px; right: 3%; bottom: 6%; }
.catalog-stamp-txt { width: 78px; height: 78px; right: 3%; bottom: 6%; }
.catalog-foot { position: absolute; left: 0; bottom: .6em; font: .6em var(--font-mono); letter-spacing: .14em; color: var(--ink-faint); }

/* 版权页 */
.colophon-page { align-items: center; justify-content: center; text-align: center; }
.colophon-mark { font: .62em var(--font-mono); letter-spacing: .3em; color: var(--gold); }
.colophon-title { margin: 1.2em 0 .6em; font-family: var(--font-serif); font-size: 2.3em; font-weight: 500; letter-spacing: .2em; }
.colophon-text { font-family: var(--font-serif); font-size: .95em; line-height: 2.2; color: var(--ink-soft); white-space: pre-line; }
.colophon-stamp { position: relative; width: 108px; height: 108px; margin: 2em auto 1.6em; color: var(--rose); opacity: .62; }
.colophon-stamp svg { width: 100%; height: 100%; }
.colophon-stamp span { position: absolute; inset: 0; display: grid; place-items: center; font: .68em var(--font-mono); letter-spacing: .14em; line-height: 1.6; color: var(--rose); }
.colophon-meta { font: .6em var(--font-mono); letter-spacing: .16em; line-height: 2; color: var(--ink-faint); }
.close-inside { margin-top: 1.6em; padding: .7em 1.8em; border: 1px solid rgba(96, 74, 46, .35); border-radius: 999px; font-size: .78em; letter-spacing: .16em; color: var(--ink-soft); transition: background .3s, color .3s, transform .3s; }
.close-inside:hover { background: var(--cloth); color: #F6EBD4; transform: translateY(-2px); }

/* ===================== 控件 ===================== */
.controls { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 4px; }
.nav-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid rgba(74, 56, 34, .28); border-radius: 999px; font-size: 12px; letter-spacing: .14em; color: var(--ink-soft); transition: background .3s, color .3s, transform .3s, opacity .3s; }
.nav-btn svg { width: 16px; height: 16px; }
.nav-btn:hover:not(:disabled) { background: var(--cloth); color: #F6EBD4; transform: translateY(-2px); }
.nav-btn:disabled { opacity: .32; cursor: default; }
.spread-info { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 160px; }
.spread-label { font: 10px var(--font-mono); letter-spacing: .24em; color: var(--ink-soft); }
.spread-folio { font-family: var(--font-serif); font-size: 12px; letter-spacing: .12em; color: var(--ink-faint); }
.dots { display: flex; gap: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(74, 56, 34, .25); transition: background .35s, transform .35s; }
.dots i.is-on { background: var(--gold); transform: scale(1.5); }
.tools { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.tool-btn { padding: 6px 14px; border: 1px solid rgba(74, 56, 34, .22); border-radius: 999px; font-size: 11px; letter-spacing: .12em; color: var(--ink-soft); transition: background .3s, color .3s, border-color .3s; }
.tool-btn:hover, .tool-btn.is-active { background: rgba(70, 86, 68, .14); border-color: rgba(70, 86, 68, .5); color: var(--cloth-dark); }
.stage-hint { margin: 12px 0 24px; font: 10px var(--font-mono); letter-spacing: .16em; color: rgba(74, 56, 34, .55); text-align: center; }

/* ===================== 索引抽屉 ===================== */
.index-mask { position: fixed; inset: 0; z-index: 88; background: rgba(40, 30, 18, .38); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; }
.index-mask.is-open { opacity: 1; visibility: visible; }
.index-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 89; width: min(400px, 88vw); padding: 26px 24px 30px; background: var(--paper); box-shadow: -20px 0 60px rgba(40, 28, 14, .3); transform: translateX(100%); visibility: hidden; transition: transform .5s var(--flip-ease), visibility .5s; overflow-y: auto; }
.index-panel.is-open { transform: none; visibility: visible; }
.index-head { display: flex; align-items: flex-start; justify-content: space-between; }
.index-head span { font: 9px var(--font-mono); letter-spacing: .26em; color: var(--gold); }
.index-head h3 { margin: 5px 0 0; font-family: var(--font-serif); font-size: 23px; font-weight: 500; letter-spacing: .16em; }
.index-head button { font-size: 26px; line-height: 1; color: var(--ink-faint); padding: 0 4px; }
.index-head button:hover { color: var(--ink); }
.index-desc { margin: 12px 0 20px; font-size: 11.5px; line-height: 1.9; color: var(--ink-faint); }
.index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.index-item { padding: 0; text-align: left; border: 1px solid rgba(96, 74, 46, .16); background: #FFFDF7; transition: transform .3s, box-shadow .3s; }
.index-item:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(70, 52, 30, .18); }
.index-item img { width: 100%; height: 68px; object-fit: cover; }
.index-item span { display: block; padding: 4px 5px 5px; font: 9px var(--font-mono); letter-spacing: .06em; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===================== 大图查看 ===================== */
.viewer { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s, visibility .4s; }
.viewer.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.viewer-bg { position: absolute; inset: 0; background: radial-gradient(900px 600px at 50% 45%, rgba(56, 46, 34, .9), rgba(24, 20, 15, .97)); backdrop-filter: blur(12px); }
.viewer-card { position: relative; z-index: 2; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: min(88vw, 900px); }
.viewer-photo { display: grid; place-items: center; }
.viewer-photo img { max-width: 100%; max-height: 70vh; object-fit: contain; border: 9px solid #FBF7ED; box-shadow: 0 26px 70px rgba(0,0,0,.5); }
.viewer-card figcaption { text-align: center; color: #F3EADA; }
.viewer-card figcaption span { font: 10px var(--font-mono); letter-spacing: .26em; color: var(--gold-soft); }
.viewer-card h3 { margin: 6px 0 4px; font-family: var(--font-serif); font-size: 20px; font-weight: 500; letter-spacing: .14em; }
.viewer-card p { margin: 0; font-size: 12px; color: rgba(243, 234, 218, .6); letter-spacing: .06em; }
.viewer-close { position: absolute; top: 20px; right: 26px; z-index: 3; font-size: 32px; line-height: 1; color: rgba(243, 234, 218, .8); }
.viewer-nav { position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; transform: translateY(-50%); border: 1px solid rgba(243, 234, 218, .28); border-radius: 50%; color: rgba(243, 234, 218, .85); font-size: 28px; line-height: 1; transition: background .3s; }
.viewer-nav:hover { background: rgba(243, 234, 218, .16); }
.viewer-prev { left: 24px; } .viewer-next { right: 24px; }
.viewer-hint { position: absolute; bottom: 16px; z-index: 3; margin: 0; font: 10px var(--font-mono); letter-spacing: .18em; color: rgba(243, 234, 218, .4); }

/* ===================== 响应式 ===================== */
@media (max-width: 1100px) {
  .topbar { padding: 14px 20px 2px; }
  .desk-note { display: none; }
}
@media (max-width: 760px) {
  .book-scene { width: calc(var(--pw) + 30px); }
  .book { width: var(--pw); }
  .sheet { left: 0; }
  .static-left, .board-left, .gutter, .spine-lines, .stack-left { display: none; }
  .board-right { left: -9px; right: -9px; width: auto; }
  .static-right { left: 0; right: auto; border-radius: 3px; }
  .static-right::after { display: none; }
  .sheet.is-flipped { transform: translateX(-108%) rotate(-4deg); opacity: 0; }
  .page-curl { width: 52px; height: 52px; }
  .topbar { padding: 12px 16px 2px; }
  .tb-title { font-size: 14px; }
  .tb-chapter { display: none; }
  .controls { gap: 12px; }
  .nav-btn { padding: 8px 12px; font-size: 11px; }
  .nav-btn span { display: none; }
  .spread-info { min-width: 130px; }
  .tools { margin-top: 12px; }
  .stage-hint { font-size: 9px; padding: 0 16px; }
  .viewer-nav { width: 36px; height: 36px; font-size: 22px; }
  .viewer-prev { left: 10px; } .viewer-next { right: 10px; }
  .viewer-hint { display: none; }
}
@media (max-width: 400px) {
  .index-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-btn { font-size: 10px; padding: 5px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cover { transform: none; }
}

/* ============================================================
   V3.1 · 全屏「照片优先」版式 + 移动端独立设计
   （后段覆盖前段同优先级规则）
   ============================================================ */

/* 防误触：禁止文字选中与图片原生拖放（避免拖出新标签页） */
.book, .book *, .mobile-book, .mobile-book * {
  -webkit-user-select: none; user-select: none;
}
.book img, .mobile-book img { -webkit-user-drag: none; user-drag: none; }
.book-scene, .m-stack { touch-action: pan-y; }

/* 桌面：书本近全屏，控件收进上下细条 */
.stage { height: 100vh; height: 100svh; overflow: hidden; }
.topbar { position: relative; z-index: 10; flex: none; height: 54px; padding: 10px 30px; }
.book-scene { flex: 1 1 auto; min-height: 0; height: auto; width: 100%; margin: 0; }
.controls { position: relative; z-index: 10; flex: none; height: 62px; margin: 0; gap: 30px; }
.tools { position: absolute; z-index: 11; right: 22px; bottom: 13px; margin: 0; gap: 7px; }
.stage-hint { display: none; }
.tb-chapter { margin-right: 8px; }

/* 页内：文字精简，照片放大 */
.page-paper { padding: 5.4% 6% 4%; }
.p-kicker { position: absolute; left: 0; top: 0; font: .62em var(--font-mono); letter-spacing: .26em; color: var(--gold); }
.p-title { position: absolute; left: 0; top: 1.6em; margin: 0; font-family: var(--font-serif); font-size: 2.1em; font-weight: 500; letter-spacing: .14em; }
.p-lead { position: absolute; left: 0; top: 5.4em; width: 50%; margin: 0; font-family: var(--font-serif); font-size: 1em; line-height: 2.05; color: var(--ink-soft); }
.p-footnote { position: absolute; left: 0; bottom: .6em; font: .6em var(--font-mono); letter-spacing: .14em; color: var(--ink-faint); }
.p-range { position: absolute; left: 0; bottom: 2.2em; font: .66em var(--font-mono); letter-spacing: .16em; color: var(--ink-faint); }
.p-watermark { position: absolute; right: -.1em; top: -.3em; font-family: var(--font-serif); font-size: 11em; line-height: 1; color: rgba(126, 138, 107, .075); }
.p-fern { position: absolute; left: -8%; bottom: -6%; width: 44%; height: 52%; color: #7E8A6B; opacity: .16; pointer-events: none; }

/* 所有「照片位」都真实放照片，不留空框 */
.p-index-photo   { right: 0; top: 0; width: 44%; height: 94%; transform: rotate(1.6deg); }
.p-chapter-photo { right: 0; top: 0; width: 50%; height: 96%; transform: rotate(1.5deg); }
.p-single-photo  { left: 0; top: 0; width: 100%; height: 76%; }
.p-duo-main      { left: 0; top: 0; width: 72%; height: 66%; transform: rotate(-1deg); }
.p-duo-sub       { right: 0; bottom: 0; width: 46%; height: 42%; transform: rotate(2deg); }
.p-alt-a         { left: 0; top: 0; width: 58%; height: 56%; transform: rotate(-1.5deg); }
.p-alt-b         { right: 0; top: 2%; width: 39%; height: 52%; transform: rotate(2deg); }
.p-notes-photo   { left: 0; top: 0; width: 100%; height: 70%; }
.p-catalog-photo { right: 0; top: 8%; width: 38%; height: 56%; transform: rotate(2deg); }
.plate { padding: 6px 6px 0; }
.plate figcaption { font-size: .56em; }

.p-toc { position: absolute; left: 0; top: 10em; width: 51%; display: flex; flex-direction: column; gap: .15em; }
.p-toc .chapter-link { padding: .7em .3em; }
.p-toc .chapter-link b { font-size: 1.5em; }
.p-toc .chapter-link span { font-size: 1.05em; }
.p-toc .chapter-link em { font-size: .66em; }
.p-chapter-title { font-size: 2.6em; top: 1.5em; }
.p-chapter-lead { top: 6em; width: 46%; font-size: 1.05em; }
.p-quote { position: absolute; left: 0; top: 8em; width: 46%; font-family: var(--font-serif); font-size: 1.1em; line-height: 2; color: var(--ink-soft); }

/* 紧凑图注：编号 / 名称 / 时刻 / 一句手记 */
.cap { position: absolute; left: 0; display: flex; flex-direction: column; gap: .25em; border-top: 1px solid var(--line); padding-top: .7em; }
.cap-line { display: flex; align-items: baseline; gap: .9em; }
.cap-no { font: .66em var(--font-mono); letter-spacing: .18em; color: var(--gold); }
.cap-line strong { font-family: var(--font-serif); font-size: 1.35em; font-weight: 500; letter-spacing: .1em; }
.cap-line em { margin-left: auto; font: .62em var(--font-mono); font-style: normal; letter-spacing: .1em; color: var(--ink-faint); white-space: nowrap; }
.cap p { margin: 0; font-family: var(--font-serif); font-size: .88em; line-height: 1.8; color: var(--ink-soft); }
.p-single-cap { top: 79%; width: 100%; height: 20%; }
.p-duo-cap { bottom: 0; width: 48%; height: 26%; }
.p-alt-cap { bottom: 0; width: 100%; height: 30%; }
.p-notes-cap { top: 73%; width: 100%; height: 26%; }

/* 清册改为三行章节概览，不再堆 21 行小字 */
.p-catalog-list { position: absolute; left: 0; top: 6em; width: 56%; display: flex; flex-direction: column; gap: .8em; }
.p-catalog-list div { display: flex; align-items: baseline; gap: .8em; border-bottom: 1px dotted var(--line); padding-bottom: .45em; }
.p-catalog-list b { font-family: var(--font-serif); font-size: 1.5em; font-weight: 500; }
.p-catalog-list span { font-size: .95em; letter-spacing: .1em; color: var(--ink-soft); }
.p-catalog-list em { margin-left: auto; font: .66em var(--font-mono); font-style: normal; color: var(--ink-faint); }

.title-page .ex-libris { width: 86%; }
.title-page .title-lead { font-size: 1.15em; }
.title-page .title-meta { font-size: .66em; }

/* ---------------- 移动端：一页一枚标本 ---------------- */
.mobile-book { display: none; }

@media (max-width: 760px) {
  .book-scene, .controls, .stage-hint { display: none; }
  .tools { position: static; transform: none; margin: 0; padding: 4px 0 6px; gap: 6px; }
  .tool-btn { font-size: 10px; padding: 5px 10px; }
  .mobile-book { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; padding: 0 14px 6px; }
  .m-head { flex: none; display: flex; justify-content: space-between; padding: 2px 4px 8px; font: 10px var(--font-mono); letter-spacing: .16em; color: var(--ink-faint); }
  .m-stack { position: relative; flex: 1 1 auto; min-height: 0; perspective: 1500px; }
  .m-face { position: absolute; inset: 0; overflow: hidden; background: var(--paper); border-radius: 5px; box-shadow: 0 14px 34px rgba(46, 32, 18, .28); transform: translateX(100%); opacity: 0; transition: transform .62s var(--flip-ease), opacity .62s var(--flip-ease); will-change: transform, opacity; }
  .m-page { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px 14px 12px; }
  .m-top { flex: none; display: flex; justify-content: space-between; font: 9px var(--font-mono); letter-spacing: .16em; color: var(--ink-faint); border-bottom: 1px solid var(--line); padding-bottom: 8px; }
  .m-banner { flex: none; display: flex; align-items: baseline; gap: 10px; margin: 10px 0 6px; padding: 5px 10px; background: rgba(126, 138, 107, .12); border-left: 2px solid var(--gold); }
  .m-banner b { font-family: var(--font-serif); font-size: 20px; font-weight: 500; }
  .m-banner span { font-size: 11px; letter-spacing: .1em; color: var(--ink-soft); }
  .m-photo-wrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 4px; background-size: cover; background-position: center; cursor: zoom-in; }
  .m-photo-wrap::before { content: ""; position: absolute; inset: -12%; background: inherit; filter: blur(20px); opacity: .55; }
  .m-photo-wrap img { position: relative; width: 100%; height: 100%; object-fit: contain; }
  .m-no { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 4px 9px; background: rgba(251, 247, 237, .92); border-radius: 2px; font: 10px var(--font-mono); letter-spacing: .12em; color: var(--ink-soft); }
  .m-info { flex: none; padding-top: 12px; }
  .m-info h2 { margin: 0 0 5px; font-family: var(--font-serif); font-size: 22px; font-weight: 500; letter-spacing: .1em; }
  .m-info p { margin: 0 0 6px; font-family: var(--font-serif); font-size: 13px; line-height: 1.8; color: var(--ink-soft); }
  .m-meta { font: 10px var(--font-mono); letter-spacing: .1em; color: var(--ink-faint); }
  .m-foot { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px 2px 0; }
  .m-foot button { width: 48px; height: 48px; flex: none; border: 1px solid rgba(74, 56, 34, .3); border-radius: 50%; font-size: 26px; line-height: 1; color: var(--ink-soft); background: rgba(251, 247, 237, .7); transition: transform .25s, background .3s, color .3s; }
  .m-foot button:active { transform: scale(.93); }
  .m-foot button:disabled { opacity: .3; }
  .m-progress { flex: 1; height: 2px; background: rgba(74, 56, 34, .18); border-radius: 2px; overflow: hidden; }
  .m-progress i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .5s var(--flip-ease); }

  .m-cover-page, .m-end-page { align-items: center; justify-content: center; text-align: center; background: linear-gradient(160deg, #FBF7ED, #F0E4CE); }
  .m-cover-inner, .m-end-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; }
  .m-cover-inner span, .m-end-inner span { font: 9px var(--font-mono); letter-spacing: .26em; color: var(--gold); }
  .m-cover-inner h1, .m-end-inner h1 { margin: 0; font-family: var(--font-serif); font-size: 34px; font-weight: 500; letter-spacing: .18em; }
  .m-cover-inner p, .m-end-inner p { margin: 0; font-family: var(--font-serif); font-size: 14px; line-height: 2; color: var(--ink-soft); }
  .m-cover-photo { width: 62%; aspect-ratio: 3 / 4; margin-top: 6px; background-size: cover; background-position: center; border: 7px solid #FFFDF7; box-shadow: 0 12px 28px rgba(70, 52, 30, .2); transform: rotate(-2deg); }
  .m-cover-inner small { font: 9px var(--font-mono); letter-spacing: .1em; color: var(--ink-faint); }
  .m-end-inner svg { width: 92px; height: 92px; color: var(--rose); opacity: .6; }
  .m-end-inner button { margin-top: 8px; padding: 9px 22px; border: 1px solid rgba(74,56,34,.35); border-radius: 999px; font-size: 12px; letter-spacing: .14em; color: var(--ink-soft); }

  .index-panel { top: auto; bottom: 0; width: 100%; height: 72vh; border-radius: 16px 16px 0 0; transform: translateY(100%); }
  .index-panel.is-open { transform: translateY(0); }
  .index-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- V3.1 收尾：翻页节奏 / 图片淡入 / 拖拽光标 ---------- */
.sheet { transition: transform .78s var(--flip-ease); }
.sheet.is-turning .face.front::after,
.sheet.is-turning .face.back::after { animation-duration: .78s; }
.m-photo-wrap img { opacity: 0; transition: opacity .6s ease; }
.m-photo-wrap img.is-loaded { opacity: 1; }
.book-scene.is-grabbing, .book-scene.is-grabbing *,
.m-stack.is-grabbing, .m-stack.is-grabbing * { cursor: grabbing !important; }

/* ---------- 排版修正：绝对定位统一用百分比，避免不同字号 em 基准错位 ---------- */
.p-kicker { top: 0; }
.p-title { top: 5%; }
.p-lead { top: 17%; }
.p-footnote { bottom: 1%; }
.p-range { bottom: 4%; }
.p-toc { top: 33%; }
.p-chapter-title { top: 4%; }
.p-chapter-lead { top: 20%; }
.p-catalog-list { top: 26%; }
.p-quote { top: 20%; }

/* ============================================================
   标本簿 · 海报式书页（满版照片 + 叠字动效）
   ============================================================ */
.page-paper.is-poster { padding: 0; }
.is-poster .page-body { position: absolute; inset: 0; padding: 0; }

.poster-photo { position: absolute; inset: 0; overflow: hidden; background: #E7DCC6; cursor: zoom-in; }
.poster-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster-lqip { filter: blur(18px) saturate(1.1); transform: scale(1.12); }
.poster-img { opacity: 0; transform: scale(1.05); transition: opacity .9s ease, transform 1.4s var(--flip-ease); }
.poster-img.is-loaded { opacity: 1; transform: scale(1); }
.poster-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(26, 20, 13, .34) 0%, rgba(26, 20, 13, .04) 27%, rgba(26, 20, 13, .06) 50%, rgba(20, 16, 11, .78) 100%); }
.poster-no { position: absolute; top: 6%; right: 7%; z-index: 3; color: rgba(255, 250, 240, .85); font: .6em var(--font-mono); letter-spacing: .24em; }
.poster-copy { position: absolute; left: 8%; right: 8%; bottom: 8%; z-index: 3; color: #FBF6EA; text-shadow: 0 2px 16px rgba(0, 0, 0, .38); }
.poster-kicker { display: block; font: .62em var(--font-mono); letter-spacing: .3em; color: var(--gold-soft); margin-bottom: .7em; }
.poster-title { margin: 0 0 .3em; font-family: var(--font-serif); font-size: 3.05em; font-weight: 500; letter-spacing: .15em; line-height: 1.26; }
.poster-sub { margin: 0 0 .7em; font-family: var(--font-serif); font-size: 1em; letter-spacing: .09em; line-height: 1.85; opacity: .95; }
.poster-meta { display: block; font: .6em var(--font-mono); letter-spacing: .2em; opacity: .74; }

/* 章节：竖排大字 + 英文 + 一句引言 */
.ch-title { position: absolute; left: 12%; top: 10%; z-index: 3; writing-mode: vertical-rl; font-family: var(--font-serif); font-size: 4.5em; font-weight: 500; letter-spacing: .2em; line-height: 1.15; color: #FBF6EA; text-shadow: 0 4px 24px rgba(0, 0, 0, .45); }
.ch-title span { display: inline-block; opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s var(--flip-ease); }
.ch-en { position: absolute; right: 9%; top: 11%; z-index: 3; writing-mode: vertical-rl; font: .62em var(--font-mono); letter-spacing: .34em; color: rgba(255, 250, 240, .82); }
.front-ticket { position: absolute; left: 8%; top: 7%; z-index: 3; font: .6em var(--font-mono); letter-spacing: .2em; color: rgba(255, 250, 240, .85); border: 1px solid rgba(255, 250, 240, .5); padding: .5em .9em; }
.end-close { position: absolute; left: 8%; bottom: 26%; z-index: 4; padding: .6em 1.6em; border: 1px solid rgba(255, 250, 240, .6); border-radius: 999px; color: #FBF6EA; font-size: .8em; letter-spacing: .16em; background: rgba(30, 24, 16, .24); transition: background .3s, transform .3s; }
.end-close:hover { background: rgba(255, 250, 240, .22); transform: translateY(-2px); }

/* 序页：极简章节导航浮在照片上 */
.index-nav { position: absolute; right: 7%; top: 17%; z-index: 4; display: flex; flex-direction: column; gap: .75em; align-items: flex-end; }
.index-link { padding: .45em 1.15em; border: 1px solid rgba(255, 250, 240, .5); border-radius: 999px; color: #FBF6EA; font-family: var(--font-serif); font-size: .92em; letter-spacing: .14em; background: rgba(30, 24, 16, .2); backdrop-filter: blur(4px); transition: background .3s, transform .3s; }
.index-link:hover { background: rgba(255, 250, 240, .24); transform: translateX(-4px); }

/* 拼贴页：两张照片 + 一行短句 */
.collage-a { position: absolute; left: 0; top: 0; width: 100%; height: 66%; overflow: hidden; cursor: zoom-in; }
.collage-b { position: absolute; right: 0; bottom: 0; width: 52%; height: 40%; overflow: hidden; border: 6px solid var(--paper); box-shadow: 0 10px 24px rgba(70, 52, 30, .2); cursor: zoom-in; }
.collage-a img, .collage-b img { width: 100%; height: 100%; object-fit: cover; }
.collage-line { position: absolute; left: 0; bottom: 5%; width: 43%; margin: 0; font-family: var(--font-serif); font-size: 1.05em; line-height: 1.9; color: var(--ink-soft); }
.collage-no { position: absolute; left: 0; bottom: 1%; font: .62em var(--font-mono); letter-spacing: .2em; color: var(--ink-faint); }

/* 文字入场：淡入 + 上浮，章节竖排逐字 */
.poster-anim { opacity: 0; transform: translateY(16px); transition: opacity .85s ease, transform .85s var(--flip-ease); }
.is-in .poster-anim { opacity: 1; transform: none; }
.is-in .poster-anim.d1 { transition-delay: .1s; }
.is-in .poster-anim.d2 { transition-delay: .22s; }
.is-in .poster-anim.d3 { transition-delay: .36s; }
.is-in .ch-title span { opacity: 1; transform: none; }

/* ---------- V3.3 移动端：杂志式多图页（按构图编排，零裁剪） ---------- */
.m-page.m-mag { padding: 0; }
.m-mag .m-canvas {
  position: absolute; left: 50%; top: 50%;
  width: 360px; height: 620px;
  transform: translate(-50%, -50%) scale(var(--m-scale, 1));
  transform-origin: center center;
  overflow: hidden;
  background: var(--paper);
  background-image: radial-gradient(rgba(120, 100, 70, .045) 1px, transparent 1px);
  background-size: 7px 7px;
}
.m-masthead {
  position: absolute; left: 16px; right: 16px; top: 12px; z-index: 5;
  display: flex; justify-content: space-between; padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  font: 9px var(--font-mono); letter-spacing: .16em; color: var(--ink-faint);
}
.m-shot {
  position: absolute; margin: 0; overflow: hidden; z-index: 1;
  background-color: var(--tone, #E7DCC6); background-size: cover; background-position: center;
  border: 4px solid #FFFDF7; border-radius: 2px;
  box-shadow: 0 5px 14px rgba(60, 44, 26, .17);
  cursor: zoom-in;
}
.m-shot img {
  width: 100%; height: 100%; object-fit: contain;
  background-color: var(--tone, #E7DCC6);
  opacity: 0; transition: opacity .65s ease, transform .8s var(--flip-ease);
}
.m-shot img.is-loaded { opacity: 1; }
.m-shot:hover img { transform: scale(1.03); }
.m-shot figcaption {
  position: absolute; right: 5px; top: 5px; z-index: 2;
  padding: 2px 6px; background: rgba(251, 247, 237, .92);
  font: 8px var(--font-mono); letter-spacing: .1em; color: var(--ink-soft);
}
.m-shot-float {
  border-width: 6px; z-index: 3;
  box-shadow: 0 10px 24px rgba(50, 36, 20, .28);
  transform: rotate(3deg) scale(.94);
  transition: transform .8s var(--flip-ease), opacity .7s ease;
}
.is-in .m-shot-float { transform: rotate(3deg) scale(1); }
.m-shot-tiny { border-width: 3px; }
.m-shot-front { z-index: 5; }
.m-in { opacity: 0; transition: opacity .7s ease; }
.is-in .m-in { opacity: 1; }
.is-in .m-in.d1 { transition-delay: .06s; }
.is-in .m-in.d2 { transition-delay: .16s; }
.is-in .m-in.d3 { transition-delay: .26s; }

/* 叠在照片上的一句短句 */
.m-onphoto {
  position: absolute; z-index: 4; height: 40px; box-sizing: border-box;
  display: flex; align-items: flex-end; padding: 0 10px 7px;
  background: linear-gradient(0deg, rgba(20, 16, 11, .8), rgba(20, 16, 11, 0));
  color: #FBF6EA; font-family: var(--font-serif); font-size: 12px;
  letter-spacing: .05em; text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
/* 纸面文字区 */
.m-paper-copy { position: absolute; left: 16px; right: 16px; z-index: 3; background: rgba(251, 247, 237, .94); padding: 2px 0 0; }
.m-quote { margin: 0 0 8px; font-family: var(--font-serif); font-size: 14px; line-height: 1.7; color: var(--ink); }
.m-nos {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 6px; border-top: 1px solid var(--line);
  font: 9px var(--font-mono); letter-spacing: .1em; color: var(--ink-faint);
}
.m-nos i { font-style: normal; color: var(--gold); }
.m-chapter-big { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.m-chapter-big b { font-family: var(--font-serif); font-size: 32px; font-weight: 500; color: var(--gold); }
.m-chapter-big span { font-family: var(--font-serif); font-size: 20px; letter-spacing: .2em; }
.m-chapter-big small { display: block; font: 8px var(--font-mono); letter-spacing: .14em; color: var(--ink-faint); }
.m-chapter-page .m-paper-copy { background: rgba(251, 247, 237, .9); padding: 4px 0 0; }
.m-lay-vv .m-chapter-big b { font-size: 27px; }
.m-lay-vv .m-chapter-big span { font-size: 17px; }

/* 封面 / 跋 */
.m-cover-copy { position: absolute; left: 16px; right: 16px; top: 486px; z-index: 4; background: rgba(251, 247, 237, .82); }
.m-cover-copy > span, .m-end-copy > span { display: block; font: 9px var(--font-mono); letter-spacing: .26em; color: var(--gold); }
.m-cover-copy h2 { margin: 6px 0 2px; font: 500 30px var(--font-serif); letter-spacing: .14em; }
.m-cover-copy p { margin: 0; font: 15px var(--font-serif); color: var(--ink-soft); }
.m-rule { display: block; width: 48px; height: 1px; margin: 8px 0 6px; background: var(--gold); }
.m-cover-copy small { display: block; font: 9px var(--font-mono); letter-spacing: .06em; color: var(--ink-faint); }
.m-end-copy { position: absolute; left: 16px; right: 16px; top: 286px; z-index: 4; background: rgba(251, 247, 237, .82); }
.m-end-copy h2 { margin: 8px 0 6px; font: 500 38px var(--font-serif); letter-spacing: .18em; }
.m-end-copy p { margin: 0 0 12px; font: 14px/1.9 var(--font-serif); color: var(--ink-soft); }
.m-end-close {
  padding: 8px 20px; border: 1px solid rgba(74, 56, 34, .4); border-radius: 999px;
  font-size: 12px; letter-spacing: .14em; color: var(--ink-soft);
}

/* 轻量补足：底部水印 + 采集信息，填满纸面呼吸区 */
.m-watermark {
  position: absolute; left: 16px; bottom: 4px; z-index: 0;
  font: 500 40px/1 var(--font-serif); letter-spacing: .06em;
  color: rgba(120, 100, 70, .085); white-space: nowrap; pointer-events: none;
}
.m-latin { display: block; margin: -2px 0 8px; font: 8px/1.5 var(--font-mono); letter-spacing: .08em; color: var(--ink-faint); }
.m-chapter-quote { margin: 0 0 7px; font: 12px/1.6 var(--font-serif); color: var(--ink-soft); }
.m-cover-toc { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.m-cover-toc div { display: flex; align-items: baseline; justify-content: space-between; padding: 3px 0; }
.m-cover-toc b { font: 500 13px var(--font-serif); letter-spacing: .12em; color: var(--ink); }
.m-cover-toc span { font: 8px var(--font-mono); letter-spacing: .1em; color: var(--ink-faint); }
.m-end-toc { display: flex; gap: 14px; margin: 18px 0 8px; padding-top: 10px; border-top: 1px solid var(--line); font: 12px var(--font-serif); letter-spacing: .12em; color: var(--ink-soft); }
.m-end-colophon { display: block; font: 9px/1.7 var(--font-mono); letter-spacing: .06em; color: var(--ink-faint); }

/* 页脚文字贴近底部的版式不叠水印，避免抢字 */
.m-cover-leaf .m-watermark, .m-end-leaf .m-watermark, .m-lay-vv2 .m-watermark { display: none; }
/* 三图页叠字留出足够行宽，保持一行 */
.m-lay-h3 .m-onphoto, .m-lay-h3b .m-onphoto { padding-left: 6px; padding-right: 6px; }

/* ---------- 全屏封面：移动端 ---------- */
@media (max-width: 760px) {
  .cover-veil { background: linear-gradient(0deg, rgba(12, 16, 10, .92) 0%, rgba(12, 16, 10, .55) 34%, rgba(12, 16, 10, .08) 70%); }
  .cover-content { left: 26px; right: 26px; bottom: 84px; max-width: none; display: block; text-align: left; }
  .cover-title { font-size: clamp(36px, 11vw, 54px); letter-spacing: .12em; margin: 14px 0 6px; }
  .cover-sub { font-size: 16px; letter-spacing: .24em; }
  .cover-en { margin-top: 14px; font-size: 8px; }
  .cover-rule { margin: 16px 0 12px; }
  .cover-note { font-size: 11px; margin-bottom: 22px; }
  .open-btn { padding: 12px 24px; }
  .opening-hint { display: none; }
  .cover-corner { left: auto; right: 20px; font-size: 8px; }
}
/* ---------- 移动端末页：纯排版 ---------- */
.m-end-leaf .m-end-copy { top: 152px; text-align: center; background: transparent; }
.m-end-leaf .m-end-copy > span, .m-end-leaf .m-end-copy h2, .m-end-leaf .m-end-copy p { text-align: center; }
.m-end-leaf .m-end-copy h2 { font-size: 40px; margin: 14px 0 10px; }
.m-end-fern { position: absolute; left: 50%; top: 108px; width: 230px; height: 460px; transform: translateX(-50%); color: var(--gold); opacity: .2; }
.m-end-leaf .m-end-toc { justify-content: center; }
.m-end-leaf .m-end-close { margin: 0 auto; display: block; }

/* 末页无照片，保留淡水印填补底部留白 */
.m-end-leaf .m-watermark { display: block; }

/* ============================================================
   V3.4 · 移动端顶栏按钮收敛
   问题：375px 宽下右侧「书封面 / 三册首页 / 标本索引」三枚胶囊
   总宽约 236px，被 flex 挤压后「标本索引」竖排换行、溢出顶栏
   并压住下方页码。
   处理：手机上隐藏与底部「合上这册书」重复的「书封面」入口，
   「标本索引」简称「索引」，顶栏只留两枚可读的文字胶囊；
   同时禁止所有子项参与压缩 / 换行，桌面端完全不变。
   ============================================================ */
.tb-label-short { display: none; }

@media (max-width: 760px) {
  .topbar { height: 54px; padding: 8px 16px; gap: 10px; }
  .topbar-left, .topbar-right { flex: none; min-width: 0; }
  .topbar-left { gap: 7px; }
  .tb-mark { width: 22px; height: 22px; }
  .tb-title { font-size: 13px; }
  .tb-title em { font-size: 7.5px; letter-spacing: .16em; }

  /* 关键：任何子项都不参与压缩，也不允许中文逐字换行 */
  .topbar-right { gap: 10px; }
  .topbar-right > * { flex: none; white-space: nowrap; }

  /* 回封面已有底部「合上这册书」，顶部不再重复占位 */
  .topbar-right .hub-back:not(.hub-back--hub) { display: none; }
  .topbar-right .hub-back { padding: 6px 11px; font-size: 10.5px; letter-spacing: .08em; }
  .topbar-right .hub-back:active { transform: scale(.96); }

  .topbar-right .tb-btn { padding: 7px 13px; font-size: 11px; letter-spacing: .1em; }
  .tb-label-full { display: none; }
  .tb-label-short { display: inline; }
}

/* 超窄屏（≤360px）：进一步收紧留白，收起英文副刊名 */
@media (max-width: 360px) {
  .topbar { padding: 8px 12px; gap: 8px; }
  .topbar-right { gap: 8px; }
  .tb-title em { display: none; }
}