/* ============ 足迹本（增刊 · 一门一页） ============ */
.fp-stage{
  display:grid; place-items:center; padding:26px 0 10px;
  perspective:1800px; perspective-origin:50% 45%; overflow:clip;
}
.fp-book{
  position:relative; width:min(540px, 88vw); aspect-ratio:0.72 / 1;
  outline:none; touch-action:pan-y;
}
.fp-book:focus-visible{ outline:2px solid var(--pp-seal-fill); outline-offset:6px; }

.fp-under, .fp-sheet{
  position:absolute; inset:0;
  background:var(--pp-paper);
  border:1px solid var(--pp-rule);
  box-shadow:0 20px 44px -26px rgba(26,22,18,.6);
  padding:clamp(18px,3.2vw,30px) clamp(16px,3.2vw,28px);
  overflow:hidden;
}
.fp-sheet{
  transform-origin:left center; transform-style:preserve-3d;
  will-change:transform; pointer-events:none; opacity:0;
  background:transparent; border:0; box-shadow:none; padding:0;
}
.fp-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--pp-paper); border:1px solid var(--pp-rule);
  box-shadow:0 26px 54px -30px rgba(26,22,18,.8);
  padding:clamp(18px,3.2vw,30px) clamp(16px,3.2vw,28px);
  overflow:hidden;
}
.fp-face.back{
  transform:rotateY(180deg);
  background:
    linear-gradient(105deg, rgba(26,22,18,.14), rgba(26,22,18,.04) 55%, rgba(26,22,18,.10)),
    repeating-linear-gradient(0deg, rgba(26,22,18,.02) 0 1px, transparent 1px 3px),
    #EFE8D9;
  border-color:#D6CBB6;
}
.fp-sheet.on{ opacity:1; }
.fp-gutter{
  position:absolute; left:0; top:0; bottom:0; width:18px; pointer-events:none;
  background:linear-gradient(90deg, rgba(26,22,18,.16), rgba(26,22,18,0));
}

/* —— 一页的内容 —— */
.fp-page{ display:flex; flex-direction:column; height:100%; }
.fp-no{
  display:flex; justify-content:space-between; gap:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--pp-ink-3); padding-bottom:8px; margin:0 0 12px;
  border-bottom:1px solid var(--pp-rule);
}
.fp-title{
  font-family:var(--serif); font-size:clamp(21px,3vw,29px); line-height:1.3;
  margin:0 0 6px; letter-spacing:.01em;
}
.fp-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--pp-ink-3); margin:0 0 14px; }

/* 贴上去的照片：白边 + 微斜 + 影子 */
.fp-polaroid{
  margin:2px auto 16px; padding:9px 9px 0;
  background:#fff; border:1px solid var(--pp-rule);
  box-shadow:0 12px 24px -16px rgba(26,22,18,.65), 0 1px 0 rgba(255,255,255,.9) inset;
  transform:rotate(-1.6deg); max-width:86%;
  transition:transform .22s var(--ease-paper), box-shadow .22s;
}
.fp-polaroid:hover{ transform:rotate(0deg) translateY(-2px); box-shadow:0 18px 30px -18px rgba(26,22,18,.7); }
.fp-polaroid button{ display:block; border:0; padding:0; margin:0; background:none; cursor:zoom-in; width:100%; }
.fp-polaroid img{ display:block; width:100%; height:auto; }
.fp-polaroid figcaption{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--pp-ink-3);
  padding:8px 2px 9px; text-align:right;
}

/* 没贴照片的页：虚线框 + 大叠字，留白本身是设计 */
.fp-blank{
  display:grid; place-items:center; gap:6px;
  margin:6px auto 18px; width:86%; aspect-ratio:4 / 3;
  border:1px dashed var(--pp-rule); background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.6), transparent 70%);
  color:var(--pp-ink-3);
}
.fp-blank b{
  font-family:var(--serif); font-size:56px; line-height:1; color:var(--pp-rule);
  letter-spacing:.06em;
}
.fp-blank span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; }

.fp-desc{
  font-family:var(--serif); font-size:14.6px; line-height:1.8;
  color:var(--pp-ink-2); margin:0 0 12px;
}
.fp-meta{
  margin-top:auto; padding-top:12px; border-top:1px solid var(--pp-rule);
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--pp-ink-3);
}
.fp-go{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--pp-seal);
  border-bottom:1px solid var(--pp-seal); text-decoration:none; padding-bottom:1px;
}
.fp-go:hover{ color:var(--pp-ink); border-color:var(--pp-ink); text-decoration:none; }

.fp-hint{ text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--pp-ink-3); margin:6px 0 0; }
.fp-fallback{ display:none; }
html:not(.js) .fp-stage{ display:none; }
html:not(.js) .fp-fallback{ display:block; }

/* 看大图 */
.fp-lb{
  position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  background:color-mix(in srgb, #14110E 78%, transparent);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  padding:clamp(16px,4vw,48px);
}
.fp-lb[hidden]{ display:none; }
.fp-lb-fig{
  margin:0; background:var(--pp-paper); padding:12px 12px 0;
  border:1px solid var(--pp-rule); max-width:min(92vw, 980px); max-height:88vh;
  display:flex; flex-direction:column; transform:rotate(-.6deg);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
}
.fp-lb-fig img{ display:block; max-width:100%; max-height:72vh; object-fit:contain; margin:0 auto; }
.fp-lb-fig figcaption{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--pp-ink-3);
  padding:10px 2px 12px; text-align:center;
}
.fp-lb-close{
  position:absolute; top:18px; right:22px; width:44px; height:44px;
  border:1px solid rgba(247,243,234,.5); background:transparent; color:#F7F3EA;
  font-size:24px; line-height:1; cursor:pointer;
}
.fp-lb-close:hover{ background:rgba(247,243,234,.15); }

@media (max-width:760px){
  .fp-book{ width:min(92vw, 440px); }
  .fp-polaroid{ max-width:94%; }
  .fp-blank{ width:94%; }
  .fp-blank b{ font-size:44px; }
}
@media (prefers-reduced-motion: reduce){
  .fp-sheet{ transition:none !important; }
  .fp-polaroid{ transition:none !important; }
}
@media print{
  .fp-sheet, .fp-lb, .book-nav, .fp-hint{ display:none !important; }
  .fp-stage{ perspective:none; }
}

/* ---- 鼠标握住书页的手感 ---- */
.fp-book{ cursor:grab; }
.fp-book.grabbing{ cursor:grabbing; }
.fp-book:active{ cursor:grabbing; }
.fp-book::after{            /* 右下书角：可抓的暗示 */
  content:""; position:absolute; right:0; bottom:0; width:72px; height:72px; z-index:4;
  background:linear-gradient(135deg, transparent 50%, var(--pp-paper-2) 50%);
  filter:drop-shadow(-2px -2px 4px rgba(26,22,18,.28));
  transition:transform .18s var(--ease-paper); pointer-events:none;
}
.fp-book:hover::after{ transform:translate(-2px,-2px); }
.fp-book.grabbing::after{ transform:translate(-7px,-7px) rotate(-1.5deg); }
.fp-sheet{ box-shadow:0 26px 54px -30px rgba(26,22,18,.8); }
.fp-sheet::after{           /* 翻动时的纸边高光 */
  content:""; position:absolute; inset:0; right:auto; width:22%;
  background:linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  opacity:calc(var(--shade,0) * .9); pointer-events:none; mix-blend-mode:soft-light;
}
.fp-polaroid img{ -webkit-user-drag:none; user-select:none; }
.fp-page{ transform:translateZ(0); }

/* 过了 90° 就只露纸背（不依赖 backface-visibility，兼容更稳） */
.fp-face{ transition:opacity 1ms linear; }
.fp-sheet .fp-face.back{ opacity:0; }
.fp-sheet.over90 .fp-face.front{ opacity:0; }
.fp-sheet.over90 .fp-face.back{ opacity:1; }


/* ---------- 纸张颗粒 + 装订折痕（贴近实拍书） ---------- */
.pp-page, .pp-face{
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(2.4deg, rgba(26,22,18,.012) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-1.6deg, rgba(26,22,18,.010) 0 1px, transparent 1px 5px);
  background-blend-mode:normal;
}
/* 靠书脊一侧的折痕：越靠近脊线越暗 */
.pp-page.l::after, .pp-page.r::before,
.bk-page--l::after, .bk-page--r::before{
  content:""; position:absolute; top:0; bottom:0; width:34px; pointer-events:none; z-index:1;
}
.pp-page.l::after, .bk-page--l::after{
  right:0; background:linear-gradient(270deg, rgba(26,22,18,.13), rgba(26,22,18,0));
}
.pp-page.r::before, .bk-page--r::before{
  left:0; background:linear-gradient(90deg, rgba(26,22,18,.13), rgba(26,22,18,0));
}
/* 书里任何地方都不许出现蓝色选区 */
.pp-book ::selection, .fp-book ::selection, .book ::selection{ background:transparent; }
.pp-book, .fp-book{ -webkit-user-select:none; user-select:none; }
.pp-book img, .fp-book img{ -webkit-user-drag:none; user-drag:none; }