/* 手记首页（#pgBoard）样式，第二版规格第 3 节。子页面样式在 style.css，转场在 transition.css。
   本子里的尺寸都用 --u（.nb 上定义），宽高比 ≤1.75 时等于 1cqw，更扁时按高度缩。
   跟随放大镜在 #pgBoard 后面的 .lp-host 里（board.js），所以变量也写给 .lp-host 一份。 */

:is(#pgBoard,.lp-host){
  --paper:#FAF5E9; --ruled:#E7DFCD; --ink-s:#544639; --ink:#111113; --red:#D9001B; --desk:#F3F1EA;
  /* 首页字体栈不含 "NS"：缺字时用系统宋体，不会去下载 ns.woff2 */
  --serif:"SerifH","Songti SC","SimSun",serif;
  --caslon:"Caslon","SerifH","Songti SC","SimSun",serif;
  --script:"Script","Segoe Script","Brush Script MT",cursive;
  --gothic:"Gothic","Old English Text MT",serif;
  /* 做旧中档（R2\aged\proto\aged.css age=2） */
  --ag-fiber:.8; --ag-stain:.75; --ag-fox:.7; --ag-ink:.75; --ag-grain:.3;
  /* 缓动取 transition.css 的 token，那边没加载时用同样的值 */
  --ep:var(--e-pop,cubic-bezier(.34,1.56,.64,1));
  --eo:var(--e-out,cubic-bezier(.215,.61,.355,1));
  font-family:var(--serif); color:var(--ink);
}
#pgBoard button{font:inherit}

/* 手记页：不显示书眉页签、筛选条和总览。桌面底色四角压一圈很淡的暖色暗角，本子边缘更清楚 */
body[data-page="board"],html[data-mode="dossier"] body{
  background:radial-gradient(ellipse 75% 70% at 55% 50%,transparent 55%,rgba(70,52,30,.06)),#F3F1EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .31 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
body[data-page="board"] :is(.site-head,.nav,.filters,#pgOverview){display:none}
/* 方案 B（卷宗叠在手记上）进子页后手记仍显示，由 board.js 加 inert */
html:not([data-mode="dossier"]) body:not([data-page="board"]) #pgBoard{display:none}
body:not([data-page="board"]) .lp-host,#pgBoard[hidden]+.lp-host{display:none}

/* ---------- 版式：没有左栏，本子 86vw 居中，上方页边只有书眉 ---------- */
#pgBoard{--rh:48px;--gap-b:20px;position:relative;display:flow-root;overflow-x:clip;-webkit-tap-highlight-color:transparent}
@media (max-height:759px){#pgBoard{--rh:38px;--gap-b:12px}}
/* 高度比页边少 8px：本子转了 -.4°，外接矩形上沿会伸进页边约 4–6px，书眉要整个落在它上面 */
.bd-head{position:absolute;top:0;left:7vw;z-index:1;height:calc(var(--rh) - 8px);display:flex;align-items:center;margin:0;
  font:700 30px/1 var(--serif);letter-spacing:.08em;color:var(--ink)}
@media (max-height:759px){.bd-head{font-size:24px}}
/* 视口比本子高时整块上下居中：书眉和本子排成一列，多出的高度上下平分。
   ::after 是底下的垫块，最多等于书眉比底边多出的那段（让本子本身落在正中），但不超过本子到 3:2 封顶后剩下的空白，
   视口紧、本子被压扁时它是 0，不会撑出滚动条。--nb-max 是本子的封顶高度，中等宽度那段另写 */
@media (min-width:768px){
  #pgBoard{--nb-max:calc(86vw / 1.5);display:flex;flex-direction:column;justify-content:center;min-height:100dvh}
  #pgBoard::after{content:"";flex:none;height:min(calc(var(--rh) - var(--gap-b)),max(0px,calc(100dvh - var(--rh) - var(--gap-b) - var(--nb-max))))}
  /* 只占文字宽：flex 列默认把它拉成整行，会盖住怀表伸出本子上沿的那一截 */
  .bd-head{position:relative;top:auto;left:auto;flex:none;align-self:flex-start;margin:0 0 0 7vw}
  #pgBoard .nb{flex:none;margin-top:8px}
}
.bd-defs{position:absolute;width:0;height:0;overflow:hidden}
.nb{
  position:relative;
  width:86vw;
  /* 视口够高时 3:2；视口矮时变扁，最扁 2.15:1；再矮就让页面纵向滚动 */
  height:clamp(calc(86vw / 2.15), calc(100dvh - var(--rh) - var(--gap-b)), calc(86vw / 1.5));
  margin:var(--rh) auto var(--gap-b);
  container-type:size;
  /* 本子里所有尺寸都用 --u。宽高比 ≤1.75 时等于 1cqw；更扁时按高度缩 */
  --u:min(1cqw, 1.75cqh);
  rotate:-.4deg;
}
/* 待用户选：1366×657 这类矮视口固定 3:2（地址带 ?nb=32，页面纵向滚动，不用 LAYOUT_WIDE）。默认是上面的偏扁方案 */
@media (min-width:1100px){html[data-nb="32"] .nb{height:calc(86vw / 1.5)}}
/* --pw 钉子图宽：pin.webp 的钉帽占满整张图，比旧 SVG（钉帽只占 54%）小一号，钉帽直径和以前差不多 */
.nb,.lp-world{--L:calc(2.7 * var(--u));--pw:clamp(11px,calc(1.1 * var(--u)),15px)}

/* 光标：CSS 光标图，不用 JS 画准星。本子上是 14px 红十字，链接和按钮上是 18px 红圈，道具上用系统手形 */
.nb{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M7 0v14M0 7h14' stroke='%23D9001B' stroke-width='1.5'/%3E%3C/svg%3E") 7 7,crosshair}
.nb :is(a,button){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='9' cy='9' r='8' fill='none' stroke='%23D9001B' stroke-width='1.5'/%3E%3C/svg%3E") 9 9,pointer}
.nb .prop :is(a,button){cursor:pointer}

/* ---------- 纸：两页、中缝、活页环、横线，加做旧纹理 ---------- */
.nb-paper{position:absolute;inset:0;border-radius:2px;box-shadow:0 1px 0 #E5DECD,0 2px 0 #F9F5EB,0 3px 0 #E0D8C6,0 4px 0 #F6F1E5,0 5px 0 #DBD2BF,0 26px 48px -20px rgba(70,52,30,.3),0 8px 16px -8px rgba(70,52,30,.18)}
.pg-l,.pg-r{position:absolute;top:0;bottom:0;width:50%;background-color:var(--paper);background-image:repeating-linear-gradient(to bottom,transparent 0 calc(var(--L) - 1px),var(--ruled) calc(var(--L) - 1px) var(--L)),radial-gradient(ellipse 115% 105% at 50% 50%,transparent 64%,rgba(229,217,192,.7) 100%)}
.pg-l{left:0;border-radius:2px 0 0 2px}
.pg-r{right:0;border-radius:0 2px 2px 0}
.spine{position:absolute;top:0;bottom:0;left:calc(50% - 4 * var(--u));width:calc(8 * var(--u));background:linear-gradient(to right,transparent,rgba(90,70,40,.05) 35%,rgba(90,70,40,.15) 49.4%,rgba(60,45,25,.26) 50%,rgba(90,70,40,.15) 50.6%,rgba(90,70,40,.05) 65%,transparent)}
.ring{position:absolute;left:50%;top:var(--y);width:calc(3.8 * var(--u));height:calc(1.5 * var(--u));margin:calc(-.75 * var(--u)) 0 0 calc(-1.9 * var(--u));border-radius:99px;border:calc(.34 * var(--u)) solid;border-color:#D4D4D8 #8E8E94 #76767C #B4B4BA;box-shadow:0 calc(.3 * var(--u)) calc(.5 * var(--u)) rgba(0,0,0,.18),inset 0 calc(.1 * var(--u)) calc(.1 * var(--u)) rgba(255,255,255,.7)}
/* 纹理：只用普通 alpha 叠加。污渍和霉点按 100% 100% 拉伸（图按 1.8:1 生成，本子 1.5–2.15） */
.ag-l{position:absolute;inset:0;pointer-events:none;border-radius:2px}
.ag-fiber{background:url(board/tex/fiber.webp) 0 0/512px 512px;opacity:var(--ag-fiber)}
.ag-stain{background:url(board/tex/stains.webp) 0 0/100% 100% no-repeat;opacity:var(--ag-stain)}
.ag-fox{background:url(board/tex/foxing.webp) 0 0/100% 100% no-repeat;opacity:var(--ag-fox)}
.ag-ink{position:absolute;inset:0;pointer-events:none;background:url(board/tex/inkwear.webp) 0 0/256px 256px;opacity:var(--ag-ink)}
/* 卷角：右页右下角折起一个三角，缺角露出桌面色，折过来的背面略暗 */
.ag-dog{position:absolute;right:0;bottom:0;z-index:1;width:calc(3.6 * var(--u));aspect-ratio:1;pointer-events:none;background:linear-gradient(to top left,var(--desk) 50%,transparent 50.2%)}
.ag-dog::before{content:"";position:absolute;inset:0;clip-path:polygon(0 0,100% 0,0 100%);background:linear-gradient(to bottom right,#EFE6D2 0%,#E6DAC1 60%,#D9CAAB 100%);filter:drop-shadow(-1px -1px 1.5px rgba(70,50,25,.25))}

/* ---------- 背景手写：信（左页）和账本（右页），装饰，aria-hidden ----------
   信正文 .45，开头 Dear partner .55；账本标题 .8，账本行 .55。悬停入口时整层降到 .7 */
/* 悬停时这一层的透明度会变；单独成层，免得整本纸面（纹理、几百个带晕边的花体字）每帧重画 */
.nb-text{position:absolute;inset:0;font:400 calc(2.05 * var(--u))/var(--L) var(--script);color:var(--ink-s);text-shadow:0 0 .6px rgba(84,70,57,.55);opacity:0;transition:opacity .4s;pointer-events:none;will-change:opacity}
#pgBoard.has-text .nb>.nb-text{opacity:1}
#pgBoard.has-text .nb.has-hot>.nb-text{opacity:.7}
.letter p{opacity:.45}
.letter p:first-child{opacity:.55;font-size:calc(2.35 * var(--u))}
.letter{position:absolute;left:4.6%;width:41.5%;top:calc(var(--L) * 1.18);bottom:calc(var(--L) * .7);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--L) * 3),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - var(--L) * 3),transparent)}
.letter p+p{text-indent:2.6em}
.letter p:last-child{text-align:right;padding-right:10%}
.ledger{position:absolute;left:54.5%;width:41%;top:calc(var(--L) * .18);bottom:calc(var(--L) * .7);overflow:hidden}
.ledger::before{content:"";position:absolute;left:24%;top:calc(var(--L) * 2);bottom:0;border-left:1px solid rgba(217,0,27,.16)}
.lg-h{height:calc(var(--L) * 2);padding-left:6%;font:400 calc(3.6 * var(--u))/calc(var(--L) * 2.1) var(--gothic);white-space:nowrap;opacity:.8}
.lg-r{display:grid;grid-template-columns:24% minmax(0,1fr);gap:0 3%;white-space:nowrap;font-size:.86em;opacity:.55}
.lg-r span{overflow:hidden;text-overflow:clip}
.lg-r span:first-child{text-align:right;padding-right:8%}
.lg-y span:first-child{font-size:1.15em}

/* ---------- 装饰：咖啡渍、指纹 ----------
   写实渍痕用正片叠底，只把纸压暗一点，不盖住底下的花体字。规格 3.3：画面里只有这一个渍，在左页中间 */
.nb-deco{position:absolute;inset:0;pointer-events:none}
.coffee{position:absolute;left:26%;top:27%;width:calc(13 * var(--u));aspect-ratio:460/345;rotate:14deg;opacity:.28;mix-blend-mode:multiply}
/* 宽高比写死：两层素材都失败时，占位图不会被拉长、伸出本子 */
.fprint{position:absolute;left:40.5%;top:85%;width:calc(4.4 * var(--u));aspect-ratio:90/110;rotate:-18deg}

/* ---------- 照片（入口）。位置变量 --x --y --r --tx --ty --tr --tw 由 board.js 按 LAYOUT / LAYOUT_WIDE 写入 ---------- */
.nb-items,.nb-items-c{position:absolute;inset:0;margin:0}
.ex{position:absolute;display:block;color:inherit;text-align:left}
a.ex{left:var(--x);top:var(--y);width:calc(17 * var(--u))}
.ex:focus-visible{outline:none}
/* 相纸边按 u 算，外框宽高比恒为 17/14.675=1.158，和子页 .exh-thumb 的 144×124 一致 */
.ph{position:relative;display:block;padding:calc(.65 * var(--u)) calc(.65 * var(--u)) calc(2.25 * var(--u));background:#FBF7EC;rotate:var(--r);transform-origin:50% calc(.5 * var(--u));box-shadow:0 1px 1px rgba(40,30,20,.14),0 7px 14px -7px rgba(40,30,20,.34);
  transition:rotate .32s var(--ep),translate .3s ease,scale .3s ease;will-change:transform}
.ph::after{content:"";position:absolute;inset:0;box-shadow:0 20px 30px -12px rgba(40,30,20,.42),0 4px 10px rgba(40,30,20,.12);opacity:0;transition:opacity .3s;pointer-events:none}
.ph-img{display:block;aspect-ratio:4/3;overflow:hidden;background:#FBFAF6 radial-gradient(ellipse at 50% 45%,#FFFEFB 40%,#F1EDE3 100%);box-shadow:inset 0 0 0 1px rgba(60,50,40,.08);filter:sepia(.16) contrast(.94)}
.ph-img svg{display:block;width:100%;height:100%}
.ag-grain{position:absolute;left:calc(.65 * var(--u));top:calc(.65 * var(--u));right:calc(.65 * var(--u));bottom:calc(2.25 * var(--u));z-index:2;pointer-events:none;background:url(board/tex/grain.webp) 0 0/128px 128px;opacity:var(--ag-grain);box-shadow:inset 0 0 14px rgba(120,88,48,.09)}
/* 花体小注：16px 以下细笔画会断，所以下限 17px；#4A4038 在白边 #FBF7EC 上对比度 9.4 */
.ph-cap{position:absolute;left:calc(.75 * var(--u));right:calc(.75 * var(--u));bottom:calc(.25 * var(--u));font:400 clamp(17px,calc(1.45 * var(--u)),22px)/1.1 var(--script);color:#4A4038;white-space:nowrap;overflow-x:clip;overflow-y:visible}
.ex.cap-r .ph-cap{text-align:right}
.ph.note .ph-img{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#FFFDF6;box-shadow:inset 0 0 0 1px #E2DCCF}
.note-n{font:700 clamp(28px,calc(3.6 * var(--u)),46px)/1 var(--caslon);color:var(--ink)}
.note-k{font:400 11px/1 var(--caslon);letter-spacing:.12em;color:#6E6A66}
.ex:focus-visible .ph{outline:2px solid var(--red);outline-offset:3px}

/* 纸签：层级高于红线（z 4），线像从纸签底下穿过；钉子在最上面（z 5）。
   宽度跟本子缩放，但不小于 132px；EXHIBIT 行固定两行：编号一行，英文名一行 */
.tag{position:absolute;z-index:4;display:block;left:calc(var(--tx) * var(--u));top:calc(var(--ty) * var(--u));width:max(calc(var(--tw,12.6) * var(--u)),132px);rotate:var(--tr);
  padding:max(7px,calc(.7 * var(--u))) max(9px,calc(.85 * var(--u))) max(8px,calc(.8 * var(--u)));background:#FFFEFB;box-shadow:0 1px 2px rgba(40,30,20,.14),0 5px 10px -5px rgba(40,30,20,.24);transition:opacity .25s}
.tag::before{content:"";position:absolute;left:50%;top:calc(-.55 * var(--u));width:calc(4.6 * var(--u));height:calc(1.25 * var(--u));margin-left:calc(-2.3 * var(--u));rotate:-4deg;background:rgba(232,226,212,.82);box-shadow:0 0 0 .5px rgba(0,0,0,.04)}
.ex[data-n="1"] .tag::before{display:none}
.tag.kraft{background:#F3EBDA}
.tag.kraft::before{background:rgba(250,248,242,.78)}
/* 证物吊牌：左边打孔，系一截麻绳 */
.tag.hang{padding-left:calc(max(9px,calc(.85 * var(--u))) + 1.5 * var(--u))}
.tag.hang::before{left:calc(.7 * var(--u));top:50%;width:calc(.95 * var(--u));height:calc(.95 * var(--u));margin:calc(-.475 * var(--u)) 0 0;rotate:0deg;border-radius:50%;background:var(--paper);box-shadow:0 0 0 calc(.2 * var(--u)) #E2D3B3,inset 0 1px 1.5px rgba(40,30,20,.35)}
.twine{position:absolute;z-index:1;left:calc(-1.47 * var(--u));top:calc(50% - 1.32 * var(--u));width:calc(3.6 * var(--u));height:calc(2.4 * var(--u));overflow:visible;pointer-events:none}
.twine path{fill:none;stroke:#A9875A;stroke-width:2.6;stroke-linecap:round}
.twine .tw2{stroke:#D7BF97;stroke-width:1;stroke-dasharray:2 3}
/* 入口名：SerifH（康熙体）；编号 Caslon 400 红色。印刷字压印感 */
.tag-h{position:relative;display:inline-block;font:700 clamp(17px,calc(1.75 * var(--u)),24px)/1.2 var(--serif);letter-spacing:.04em;color:#1E1B18;white-space:nowrap;text-shadow:0 .7px 0 rgba(255,255,255,.75),0 0 .45px rgba(30,24,18,.4)}
.tag-h b{font:400 .78em/1 var(--caslon);letter-spacing:0;color:var(--red);margin-right:.4em}
/* 手绘下划线：悬停时用 clip-path 从左往右露出来。
   不用 stroke-dasharray：vector-effect 和 pathLength 一起用时 Chromium 按像素算 dash，静止时会露出一截 */
.ul{position:absolute;left:-2%;bottom:-.3em;width:104%;height:.42em;overflow:visible;clip-path:inset(-4px 100% -4px -4px);transition:clip-path .3s ease}
.ul path{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ex.hot .ul{clip-path:inset(-4px -4px -4px -4px)}
/* EXHIBIT 行：Caslon 大写，字距 .14em；乱码还原时只改这一个文本节点 */
.tag-k{display:block;margin-top:.5em;white-space:pre-line;font:400 clamp(11px,calc(.85 * var(--u)),12.5px)/1.3 var(--caslon);text-transform:uppercase;letter-spacing:.14em;color:#4B453E;text-shadow:0 0 .7px rgba(70,58,46,.45)}
/* 纸签、索引卡、剪报底下：纤维纹和一圈旧边 */
.ag-tagfx{position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(board/tex/fiber.webp) 0 0/384px;opacity:calc(var(--ag-fiber) * .8);box-shadow:inset 0 0 calc(var(--ag-stain) * 10px) rgba(150,110,60,calc(var(--ag-stain) * .16))}
/* 索引卡和剪报的纸是 <img>，纹理要叠在图上面、字下面，往里收一点，不出纸边。
   不用 mask:url(…svg)：CSS 遮罩按 CORS 方式取图，和 <img> 不共用缓存，同一张图会多下载一次 */
/* 索引卡和剪报的纸是写实图，自带纸纹，不再叠纤维纹 */
.st-card>.ag-tagfx,.cl-card>.ag-tagfx{display:none}
/* 胶带：01 纸签左上、剪报右上 */
.ag-tape{position:absolute;z-index:5;width:calc(5.6 * var(--u));height:calc(1.7 * var(--u));pointer-events:none;
  background:url(board/tex/fiber.webp) 0 0/200px,linear-gradient(to bottom,rgba(225,212,182,.75),rgba(238,229,205,.6) 30%,rgba(238,229,205,.6) 70%,rgba(220,206,176,.75));
  clip-path:polygon(0 4%,4% 0,8% 9%,13% 2%,87% 0,92% 8%,96% 1%,100% 6%,98% 30%,100% 52%,97% 74%,100% 96%,94% 100%,89% 93%,84% 100%,10% 97%,5% 100%,0 94%,3% 70%,0 48%,2% 24%)}
.ag-tape.t-tag{left:calc(-2 * var(--u));top:calc(-.5 * var(--u));rotate:-38deg}
.ag-tape.t-clip{right:calc(-1.9 * var(--u));top:calc(.2 * var(--u));rotate:38deg}
/* 订书钉（05 纸签右上）、钉孔和锈迹（04 纸签右上） */
.ag-staple,.ag-holes{position:absolute;z-index:6;width:calc(3.2 * var(--u));height:calc(1 * var(--u));pointer-events:none}
.ag-staple{right:calc(1 * var(--u));top:calc(-.35 * var(--u));rotate:-6deg}
.ag-holes{right:calc(.8 * var(--u));top:calc(.2 * var(--u));rotate:6deg}
.ag-staple svg,.ag-holes svg{display:block;width:100%;height:100%}

/* 钉子：不跟照片转，钉帽中心落在照片顶边下 .5u。按下时上移 6px */
.pin{position:absolute;z-index:5;left:calc(50% - var(--pw) * var(--hx,.5));top:calc(.5 * var(--u) - var(--pw) * var(--hy,.5));width:var(--pw);aspect-ratio:var(--pin-ar,1);pointer-events:none;transition:translate 80ms var(--eo)}
.pin img{display:block;width:100%;height:100%;filter:drop-shadow(.8px 1.6px 1.2px rgba(40,30,20,.38))}

/* 悬停或聚焦（.hot）：照片绕钉子转正（320ms 回弹）、上抬、放大，阴影加深；简图重描；纸签划线 */
.ex.hot .ph{z-index:2;rotate:0deg;translate:0 -4px;scale:1.05}
.ex.hot .ph::after{opacity:1}
/* .rd 由 board.js 加在带 pathLength 的路径上（属性选择器 [pathLength] 在 HTML 文档里命中不了 SVG） */
.ex.hot .ph-img .rd{animation:bdRedraw .6s cubic-bezier(.45,0,.25,1) both}
@keyframes bdRedraw{from{stroke-dasharray:1 1;stroke-dashoffset:1}to{stroke-dasharray:1 1;stroke-dashoffset:0}}
/* 按下（pointerdown）：照片缩到 .97，80ms，填上转场截图前的空档 */
.ex.press .ph{scale:.97;transition:rotate .32s var(--ep),translate .3s ease,scale 80ms var(--eo)}
.ex.press .pin{translate:0 -6px}
/* 其余入口变淡：盖一层纸色（效果约等于 0.35 透明度），背景字不会透过照片 */
.ph::before,.tag::after,.st-card::after{content:"";position:absolute;inset:0;z-index:3;background:var(--paper);opacity:0;transition:opacity .25s;pointer-events:none}
.nb.has-hot .ex:not(.hot) .ph::before,.nb.has-hot .ex:not(.hot) :is(.tag,.st-card)::after{opacity:.65}

/* 06 评分细则：索引卡 + 回形针 */
.sticky{left:var(--x);top:var(--y);width:calc(13 * var(--u));padding:0}
.st-card{position:absolute;inset:0;z-index:4;display:block;rotate:-2.5deg;transform-origin:50% 6px;transition:rotate .32s var(--ep),translate .3s,scale .3s}
/* 纸张类写实图统一的投影（光从上方来，影子落在下方偏右），沿着撕边和孔走，不用矩形 box-shadow。
   写实图比旧线稿暗，整页 L* 会掉到 91.5 以下：一律先降对比再提亮（contrast 在前），暗部抬成淡墨色，纸面提到接近白纸，
   不压暗整体。剪报的正文栏和大本钟照片因此变淡，像褪色的旧报纸 */
.st-bg,.cl-bg{position:absolute;inset:0;width:100%;height:100%}
.st-bg{filter:contrast(.8) brightness(1.25) drop-shadow(.5px 2px 2.5px rgba(40,30,20,.2))}
.cl-bg{filter:sepia(.1) contrast(.6) brightness(1.47) drop-shadow(.5px 2px 2.5px rgba(40,30,20,.2))}
/* 索引卡只显示图的上半截（PROP.sticky.show），不拉伸 */
.st-bg{object-fit:cover;object-position:50% 0}
.st-t{position:absolute;z-index:1;display:flex;flex-direction:column;justify-content:flex-start}
/* 回形针夹在最右一个孔（sticky.webp x 404–427）的右边 */
.clip-img{position:absolute;z-index:2;left:89%;top:0;width:7%;aspect-ratio:49/200;rotate:-6deg;filter:drop-shadow(.6px 1.2px 1px rgba(40,30,20,.3))}
.sticky.hot .st-card{rotate:0deg;translate:0 -4px;scale:1.04}
/* 06 的钉子钉在左上角（标题行在孔下面，钉在正中会压住字）。sticky.webp 上沿是撕边，x 34 处纸边从 y 9 开始，
   孔在 y 27–50：钉帽中心放在纸边和孔之间（y≈20/360，5.5%），钉在纸上 */
.sticky .pin{left:calc(7% - var(--pw) * var(--hx,.5));top:calc(5.5% - var(--pw) * var(--hy,.5))}
.sticky:focus-visible .st-card{outline:2px solid var(--red);outline-offset:3px}

/* 报纸剪报（左页左下）。报头和大标题加静态压印滤镜 #press（board.js 里的内联 SVG），墨色 #1D1B18 */
.clipping{position:absolute;left:var(--x);top:var(--y);width:max(calc(15 * var(--u)),140px);display:block;color:#1D1B18}
.cl-card{position:absolute;inset:0;display:block;rotate:-3deg;transform-origin:50% 6px;transition:rotate .45s var(--ep),translate .3s}
/* 写字区是报头下双线（y 110、122）和正文栏上方横线（y 351）之间的空白带（clipping.webp y 128–346）：报头、大标题、副标题从上往下排。
   报头字号按 u 走，1280–1440 下升部会往上伸出行框，所以写字区上沿压到双线下面 6 个像素 */
.cl-t{position:absolute;z-index:1;display:block;text-align:center}
.cl-t>span{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center}
.cl-mast{top:1%;height:19%;font:400 clamp(13px,calc(1.5 * var(--u)),21px)/1 var(--gothic);white-space:nowrap;filter:url(#press)}
.cl-hl{top:24.5%;height:50.5%;flex-direction:column;font:700 calc(3.2 * var(--u))/.98 var(--caslon);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;filter:url(#press)}
.cl-hl>span{display:block;flex:none;width:100%;overflow:hidden}
/* 副标题：首页不加载 Caslon 斜体，用正体。只在横向裁（省略号），纵向不裁，降部不会被切掉 */
.cl-sub{top:76%;height:22%;display:block!important;padding:0 2px;font:400 clamp(12px,calc(1.25 * var(--u)),19px)/1.1 var(--caslon);color:#4A443C;white-space:nowrap;overflow-x:clip;overflow-y:visible;text-overflow:ellipsis;align-content:center}
.clipping:hover .cl-card,.clipping:focus-visible .cl-card{rotate:0deg;translate:0 -3px}
.clipping:focus-visible{outline:none}
.clipping:focus-visible .cl-card{outline:2px solid var(--red);outline-offset:3px}

/* 票根（右页底部）：悬停沿撕线撕开。票面图先降对比再提亮，和其他纸一个亮度 */
.ticket{position:absolute;left:var(--x);top:var(--y);width:calc(12.5 * var(--u));display:block;rotate:-3deg;color:#2A2622;filter:drop-shadow(0 2px 3px rgba(40,30,20,.16))}
.tk-main,.tk-stub{position:absolute;inset:0;display:block}
.tk-main{clip-path:inset(0 calc(100% - var(--perf)) 0 0)}
.tk-stub{clip-path:inset(0 0 0 var(--perf));transform-origin:var(--perf) 100%;transition:rotate .4s cubic-bezier(.3,1.7,.5,1),translate .4s}
.tk-img{position:absolute;inset:0;width:100%;height:100%;filter:contrast(.8) brightness(1.22)}
.tk-t{position:absolute;display:flex;flex-direction:column;justify-content:center;gap:.45em;padding-left:4%;text-transform:uppercase}
.tk-t b{font:400 clamp(9.5px,calc(1.15 * var(--u)),17px)/1 var(--caslon);letter-spacing:.08em;white-space:nowrap}
.tk-t span{font:400 11px/1 var(--caslon);letter-spacing:.08em;color:#5E5247}
.tk-s{position:absolute;left:var(--perf);right:0;top:0;bottom:0;display:grid;place-items:center;font:700 clamp(16px,calc(1.6 * var(--u)),22px)/1 var(--caslon);color:var(--red)}
.ticket:hover .tk-stub,.ticket:focus-visible .tk-stub{rotate:16deg;translate:calc(.3 * var(--u)) calc(.25 * var(--u))}
.ticket:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- 红线 ---------- */
.nb-lines{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none;will-change:transform}
.ln{transition:opacity .25s}
.ln path{fill:none;stroke-linecap:round;transition:d .6s cubic-bezier(.3,1.75,.45,1),stroke-width .25s}
/* 投影线错开 1.2/2.2px，看着线离开纸面一点 */
.ln-s{stroke:rgba(60,30,20,.12);stroke-width:1.6px;transform:translate(1.2px,2.2px)}
.ln-m{stroke:#D0061F;stroke-width:1.6px}
.ln-h{stroke:#F2848F;stroke-width:.6px;opacity:.9}
.ln.on .ln-m{stroke-width:2.4px}
.ln.on .ln-s{stroke-width:2.4px}
.nb.has-hot .ln:not(.on){opacity:.35}

/* ---------- 道具 ---------- */
.nb-props{position:absolute;inset:0;z-index:6;pointer-events:none}
.prop{position:absolute;pointer-events:auto}
.prop img{display:block;user-select:none;-webkit-user-drag:none}

/* 怀表（右页右上） */
/* 写实怀表的表壳占满图宽（旧 SVG 只占 80%），宽度从 10.5u 减到 8.5u；表壳圆心比旧版低约 .9u，表冠不碰视口上沿 */
.watch{left:calc(86% + .95 * var(--u));top:calc(-3.5% + .83 * var(--u));width:calc(8.5 * var(--u));rotate:7deg}
.w-btn{position:relative;display:block;width:100%}
.w-body,.w-lid,.w-hands{position:absolute;inset:0;width:100%;height:100%}
/* 金属道具：轻微去饱和、偏暖，降一点对比再提亮。相机皮革、放大镜木柄的暗部保留在 L* 25 左右，看得出材质；
   再暗整页 L* 会掉到 91.5 以下（1440×900 实测：只用 contrast(.75) brightness(1.15) 时 91.34）。投影和相机、放大镜一致 */
.w-body,.w-lid{filter:sepia(.15) saturate(.9) contrast(.7) brightness(1.3) drop-shadow(0 5px 6px rgba(40,30,20,.18))}
.w-hands path{fill:none;stroke:#1E1B18;stroke-linecap:round}
.w-hands .lz{fill:#1E1B18;stroke:#1E1B18;stroke-width:.8;stroke-linejoin:round}
.w-hands .sec path{stroke:var(--red)}
.w-lid{transform:perspective(600px) rotateY(-166deg);transition:transform .75s cubic-bezier(.3,1.25,.4,1)}
.watch.shut .w-lid{transform:perspective(600px) rotateY(0deg)}
.w-btn:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:50%}
.w-cap{position:absolute;left:50%;top:100%;margin:3px 0 0;translate:-50% 0;rotate:-7deg;white-space:nowrap;font:400 12.5px/1.3 var(--serif);color:#5E5247;pointer-events:none}
/* 扁本子：表下面要留给 03 号照片，注写到打开的表盖左边 */
.nb[data-fit="wide"] .w-cap{left:auto;right:210%;top:60%;margin:0;translate:0 -50%;rotate:-7deg}
/* 注和 Deadlines 标题在同一行高度上：标题去掉左内边距往左让，两者之间至少留 16px，不连成一行字 */
.nb[data-fit="wide"] .lg-h{padding-left:0}

/* 相机（左页上方）和拍立得 */
/* 写实相机机身占满图宽（旧 SVG 机身只占 86%），宽度从 12.5u 减到 10.5u */
.camera{left:33%;top:5.5%;width:calc(10.5 * var(--u));rotate:-6deg}
.cam-btn{position:relative;z-index:1;display:block;width:100%;transition:scale .12s}
.cam-btn:active{scale:.96}
.cam-img{width:100%;height:100%;filter:sepia(.15) contrast(.65) brightness(1.25) drop-shadow(0 5px 6px rgba(40,30,20,.18))}
.cam-btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* 拍立得宽度等于出片口开缝宽（board.js 写，最小 88px）。叠在相机上面，从开缝那条线往下吐，开缝以上裁掉 */
.pol-slot{position:absolute;z-index:2;translate:-50% 0;clip-path:inset(0 -300% -400% -300%)}
.pol{position:relative;display:block;width:100%;transform-origin:50% 0;animation:bdEject .8s cubic-bezier(.2,.75,.25,1) both;filter:drop-shadow(0 4px 5px rgba(40,30,20,.2))}
.pol-bg{position:absolute;inset:0;width:100%;height:100%;filter:sepia(.08) brightness(1.04)}
/* polaroid.webp 的显影窗口是挖空的，垫一层相纸底色，不透出底下的红线和花体字 */
.pol-win{position:absolute;display:flex;overflow:hidden;background:linear-gradient(160deg,#F6F3EC,#ECE8DF);box-shadow:inset 0 0 0 1px rgba(60,50,40,.08)}
.pol-c{margin:auto;padding:0 4%;text-align:center}
/* 字号跟本子缩放；board.js 再按最长的单词往下减（最小 10px），还放不下才加 .brk 断词 */
.pol-c b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font:600 clamp(10px,calc(1.05 * var(--u)),12.5px)/1.25 var(--caslon);color:#1B1918}
.pol-c b.brk{overflow-wrap:anywhere;hyphens:auto}
.pol-c em{display:block;margin-top:.45em;font:400 12.5px/1.3 var(--serif);font-style:normal;color:var(--red);white-space:nowrap}
.pol-c em span{font:700 1.1em/1 var(--caslon)}
.pol-fog{position:absolute;inset:0;background:linear-gradient(160deg,#CBC7BF,#E8E5DE 60%,#D6D2C9);animation:bdDevelop 3.2s .7s ease-out both}
.pol-foot{position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;font:400 18px/1 var(--script);color:#5E5247}
.pol:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@keyframes bdEject{from{translate:0 -100%;rotate:0deg}70%{translate:0 0;rotate:0deg}to{translate:0 0;rotate:5deg}}
@keyframes bdDevelop{to{opacity:0}}
.bd-flash{position:fixed;inset:0;z-index:100;background:#fff;pointer-events:none;animation:bdFlash .15s ease-out forwards}
@keyframes bdFlash{from{opacity:.92}to{opacity:0}}

/* ---------- 跟随放大镜（规格 3.6）。.lp-host 和 .nb 重合（位置、尺寸由 board.js 写入），镜头 pointer-events:none ---------- */
.lp-host{position:absolute;z-index:1;overflow:clip;pointer-events:none;transition:opacity .3s}
.lp-nb{position:absolute;rotate:-.4deg}
#pgBoard.intro+.lp-host{opacity:0}
.loupe{position:absolute;left:0;top:0;width:var(--lp-w);aspect-ratio:var(--lp-ar,1);will-change:transform;contain:layout style}
.lp-in{position:absolute;inset:0;transform-origin:var(--lp-ox) var(--lp-oy);transition:scale .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease-out}
/* 离开本子：缩回道具大小（15u）放在原位 */
.loupe.rest .lp-in{scale:.64}
/* 镜心在照片上：镜片缩到 .8（手柄由 board.js 转到朝右上），不压住照片下方纸签上的入口名 */
.loupe.on-ph .lp-in{scale:.8}
/* 怀表、相机上：收起镜头，露出道具 */
.loupe.hide .lp-in{opacity:0;scale:.6;transition-timing-function:ease-in;transition-duration:.14s}
.lp-glass{position:absolute;overflow:hidden;border-radius:50%;background:var(--paper);left:var(--lp-gx);top:var(--lp-gy);width:var(--lp-d);height:var(--lp-d)}
.lp-world{position:absolute;left:0;top:0;transform-origin:0 0;container-type:size;--u:min(1cqw, 1.75cqh);zoom:1.6;will-change:transform}
/* 克隆层不参与转场：克隆时可能带上 transition.js 写在照片、钉子上的内联 view-transition-name，留着会和真元素重名，之后的照片转场全被跳过 */
.lp-world,.lp-world *{animation:none!important;transition:none!important;view-transition-name:none!important}
.lp-world .nb-text{opacity:1!important;color:#2C221B}
.lp-world .nb-text :is(p,.lg-h,.lg-r){opacity:1}
.lp-world .ln path{stroke-dasharray:none!important;stroke-dashoffset:0!important}
.lp-real{position:absolute;left:0;top:0;max-width:none;opacity:0;transition:opacity .12s;will-change:transform}
.lp-glass.on-real .lp-real{opacity:1}
/* 镜心在照片上：镜框内沿加 1px 红线 */
.lp-glass::before{content:"";position:absolute;inset:0;z-index:4;border-radius:50%;box-shadow:inset 0 0 0 1px #D9001B;opacity:0;transition:opacity .12s}
.lp-glass.on-real::before{opacity:1}
/* 镜片边缘：外圈轻微压暗。反光用 magnifier.webp 自带的半透明高光，这里不再画 */
.lp-glass::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:3;
  background:radial-gradient(circle,transparent 72%,rgba(70,52,30,.06) 86%,rgba(60,44,26,.2) 98%,rgba(60,44,26,.3))}
.lp-frame{position:absolute;inset:0;width:100%;height:100%;transform-origin:var(--lp-ox) var(--lp-oy);will-change:transform;filter:sepia(.15) contrast(.65) brightness(1.25) drop-shadow(0 8px 9px rgba(40,30,20,.18))}

/* ---------- 入场：同一会话第一次进入时播 ---------- */
#pgBoard.intro .nb{animation:bdNb .5s cubic-bezier(.2,.7,.2,1) both}
#pgBoard.intro .ex>.ph,#pgBoard.intro .ex>.tag,#pgBoard.intro .ex>.st-card{animation:bdDrop .38s calc(.3s + var(--i) * .12s) cubic-bezier(.2,.8,.3,1.25) both}
#pgBoard.intro .ex>.pin{animation:bdPin .22s calc(.58s + var(--i) * .12s) ease-out both}
#pgBoard.intro .ln path{animation:bdDraw .42s calc(.85s + var(--k) * .04s) ease-out both}
#pgBoard.intro .nb>.nb-text{transition-delay:.35s}
@keyframes bdNb{from{opacity:0;scale:.94}}
@keyframes bdDrop{from{opacity:0;translate:0 -8px;scale:1.08}}
@keyframes bdPin{from{opacity:0;scale:1.7}}
@keyframes bdDraw{from{stroke-dasharray:1 1;stroke-dashoffset:1}to{stroke-dasharray:1 1;stroke-dashoffset:0}}

/* 子页标题旁的档案照片：样式在 style.css。这里只剩简图加载失败时的编号字 */
.exh-num{display:grid;place-items:center;height:100%;font:400 13px/1 "Caslon",serif}
/* 档案照片的钉子换成和首页同一张 pin.webp（board.js fillThumbs）。style.css 的 .exh-pin 框（22px，背景 pin.svg）不动，
   只去掉背景；钉帽中心对准旧 pin.svg 的钉帽中心（框内 10.2, 9.4），直径 12px 和旧钉帽一样 */
.exh-thumb .exh-pin:has(img){background:none}
.exh-pin img{position:absolute;left:calc(10.2px - 6px);top:calc(9.4px - 6px);width:12px;height:auto;aspect-ratio:71/72;filter:drop-shadow(.6px 1.2px 1px rgba(40,30,20,.38))}
/* 写实图都失败、退回 .svg 线稿或占位图时：去掉给写实图调的提亮、降对比，只留投影 */
:is(.w-body,.w-lid,.cam-img,.lp-frame,.st-bg,.cl-bg,.tk-img)[data-fb]{filter:drop-shadow(0 3px 4px rgba(40,30,20,.16))}

/* ---------- 中等宽度（768–1099）：书眉在上，本子占满宽，固定 3:2，页面纵向可滚 ---------- */
@media (min-width:768px) and (max-width:1099px){
  #pgBoard{--nb-max:calc((100vw - 32px) / 1.5)}
  .bd-head{margin-left:16px}
  .nb{width:calc(100vw - 32px);height:calc((100vw - 32px) / 1.5)}
}

/* ---------- 窄屏（<768）：单页竖排，照片两列交错，放大镜隐藏 ---------- */
@media (max-width:767px){
  #pgBoard{overflow:hidden}
  .bd-head{position:static;height:auto;padding:16px 16px 8px;font-size:24px}
  .nb{width:auto;height:auto;margin:0 16px 40px;container-type:inline-size;--u:1cqw;rotate:0deg;--L:28px;cursor:auto}
  .nb :is(a,button){cursor:pointer}
  .lp-host{display:none}
  .nb-paper{box-shadow:0 1px 0 #E5DECD,0 2px 0 #F9F5EB,0 3px 0 #E0D8C6,0 18px 30px -16px rgba(70,52,30,.28)}
  .pg-l{width:100%;border-radius:2px}
  .pg-r,.spine,.ring,.ag-dog{display:none}
  /* 小屏上污渍显脏，霉点和污渍淡一点 */
  .ag-stain{opacity:calc(var(--ag-stain) * .7)}
  .ag-fox{opacity:calc(var(--ag-fox) * .7)}
  .nb-text{font-size:19px;overflow:hidden}
  .letter,.ledger{position:relative;left:auto;top:auto;bottom:auto;width:auto;padding:0 18px}
  .letter{padding-top:calc(var(--L) * 1.18);-webkit-mask-image:none;mask-image:none}
  .ledger{margin-top:calc(var(--L) * 5);padding-left:18px}
  .letter p:first-child{font-size:22px}
  .lg-h{font-size:30px;padding-left:24%}
  .fprint{display:none}
  .coffee{left:auto;right:-8%;top:1%;width:130px;opacity:.22}
  .nb-items{position:relative;inset:auto;display:flex;flex-direction:column;padding:30px 14px 10px}
  a.ex{position:relative;left:auto;top:auto;width:56%;margin-top:-56px}
  a.ex:first-child{margin-top:0}
  .nb-items>:nth-child(odd){align-self:flex-start}
  .nb-items>:nth-child(even){align-self:flex-end}
  .ph{padding:6px 6px 26px}
  .ag-grain{left:6px;top:6px;right:6px;bottom:26px}
  .ph-cap{left:8px;right:8px;bottom:3px;font-size:17px}
  .pin{top:calc(4px - var(--pw) * var(--hy,.5))}
  /* 纸签贴在照片下沿，只压住 2px，不盖住白边上的花体小注 */
  .tag{position:relative;left:auto;top:auto;width:auto;margin:-2px 0 0 12%;padding:9px 10px 10px}
  .tag::before{width:40px;height:12px;margin-left:-20px;top:-6px}
  .tag.hang{padding-left:24px}
  .tag.hang::before{left:7px;width:9px;height:9px;margin:-4.5px 0 0;top:50%;box-shadow:0 0 0 2px #E2D3B3,inset 0 1px 1.5px rgba(40,30,20,.35)}
  .twine{display:none}
  .ag-tape{width:46px;height:14px}
  .ag-staple,.ag-holes{width:30px;height:10px}
  .tag-h{font-size:18px}
  .tag-k{font-size:11px}
  .sticky{position:relative;left:auto;top:auto;width:50%;margin-top:-60px}
  .clip-img{width:20px;left:84%}
  .clipping{position:relative;left:auto;top:auto;width:68%;margin-top:92px;align-self:center!important}
  .cl-mast{font-size:20px}
  .cl-sub{font-size:13px}
  .ticket{position:relative;left:auto;top:auto;width:60%;margin-top:30px}
  .tk-t b{font-size:16px}.tk-s{font-size:18px}
  .nb-props{position:relative;inset:auto;display:flex;justify-content:space-between;align-items:flex-end;padding:96px 10px 150px;pointer-events:auto}
  .prop{position:relative;left:auto;top:auto}
  .watch{order:2;width:80px;margin-right:8px}
  .camera{width:128px}
}

@media (prefers-reduced-motion:reduce){
  #pgBoard .ln path{transition:none}
  .ex.hot .ph-img .rd{animation:none}
  .ul{transition:none}
  .ex.hot .ph,.sticky.hot .st-card{rotate:var(--r,-2.5deg);translate:none;scale:none}
  .ex.press .ph{scale:none}
  .ex.press .pin{translate:none}
  .lp-in{transition:opacity .12s}
  .loupe.rest .lp-in,.loupe.hide .lp-in{transition:opacity .12s}
}