/* ============================================================
   《散场之后？》后半段视觉精修层  refine.css
   载入顺序：style.css 之后。不修改原样式表，仅覆盖与增补。
   技术栈：原生 HTML / CSS / JS，无构建、无依赖。
   视觉依据：暖白纸 · 墨黑炭笔轮廓 · 蚀刻排线 · 局部印刷颗粒
             · 前中后景一点透视 · 极少量干性蜡笔色痕
   ============================================================ */

:root{
  --warm:#f7f5ed;
  --ivory:#fdfcf7;
  --ink:#171715;
  --graphite:#3c3d38;
  --gray:#8d8f88;
  --hair:#c9c6ba;
  --box-shadow-paper:0 1px 0 #fff inset,0 2px 0 #d3d0c4,3px 5px 0 #cbc8bc,8px 11px 18px #17171522;
  --crayon-blue:#3c5f9c;
  --crayon-red:#c0523e;
  --crayon-yellow:#d7a52f;
  --crayon-teal:#4f9a92;
  --ease-paper:cubic-bezier(.22,.86,.24,1);
  --sans:'Noto Sans SC','PingFang SC','Microsoft YaHei',Arial,sans-serif;
  --hand:Star,'KaiTi',cursive;
}

/* 纹理随纸物件存在：取消整屏统一噪点 */
body:after{display:none!important}

/* 中英作为同一个信息单元：英文更小、更浅、更贴近中文 */
.bi{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.bi>small,.bi>span[lang=en]{
  font:400 .58em/1.35 Arial,Helvetica,sans-serif!important;
  color:#8d8f88!important;
  letter-spacing:.012em;
  margin:0!important;
  display:block!important;
}
.bi>strong,.bi>b{font-weight:500}
.eyebrow,.kicker{font:11px/1.3 Arial,sans-serif;letter-spacing:.16em;color:#6d6f68}

/* ------------------------------------------------------------
   0. 开场接口：跳过 / 重播 / 主页面启用
   ------------------------------------------------------------ */
.skip-intro{
  position:absolute;z-index:14;right:clamp(18px,4vw,68px);bottom:26px;
  border:1px solid #ffffff66;background:#0c0c0c88;color:#f4f2ea;
  padding:8px 14px;font-size:13px;letter-spacing:.04em;
  transition:background .3s,border-color .3s;
}
.skip-intro:hover{background:#f7f5ed;color:#171715;border-color:#f7f5ed}
.skip-intro small{font:10px Arial,sans-serif;color:inherit;opacity:.7;margin-left:6px}
.lit .skip-intro{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s,visibility .4s}
body:not(.intro-done) .site-nav{color:#f4f2ea}
body:not(.intro-done) .site-nav nav a{opacity:.45;pointer-events:none}
/* 主页面未启用时不响应滚动交互，但锚点直达仍可用 */
body:not(.intro-done) main{scroll-behavior:auto}

/* ------------------------------------------------------------
   1. 剧本盒：盒体背板 + 9 张可独立运动的纸页
   ------------------------------------------------------------ */
.box-area{position:relative}
.box-scene{
  aspect-ratio:16/9;
  min-height:520px;
  isolation:isolate;
  background:
    radial-gradient(ellipse 70% 55% at 62% 44%,#ffffff00 0%,#f7f5ed00 55%,#eeeae000 100%),
    var(--warm);
}
/* 整张位图退为背板记忆，不再是唯一可见的纸页 */
.box-art{
  inset:0;
  opacity:.09;
  filter:grayscale(1) contrast(.7) blur(.35px);
  mix-blend-mode:multiply;
  background-size:100% 100%!important;
  z-index:0!important;
  transition:opacity .6s,filter .6s;
}
body.reading .box-art{opacity:.05;filter:grayscale(1) blur(1px)}
/* 盒子内壁：前中后景的暗槽，纸页从这里被抽出 */
.box-well{
  position:absolute;z-index:1;
  left:20%;right:6%;top:8%;bottom:4%;
  background:
    linear-gradient(128deg,#17171500 0%,#1717150b 42%,#17171526 78%,#17171533 100%),
    url('assets/textures/hatch.svg') right bottom/180px 180px no-repeat;
  clip-path:polygon(38% 0,100% 0,100% 100%,0 100%,0 34%);
  opacity:.78;
  pointer-events:none;
}
.box-well:before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 0 58%,#17171512 62%,transparent 70%);
}
.box-shell-edge{
  position:absolute;z-index:1;pointer-events:none;
  left:20%;top:4%;width:82%;height:96%;
  border-left:3px solid #17171538;
  border-top:2px solid #17171526;
  transform:skewY(9deg) rotate(-1deg);
  opacity:.6;
}
.box-intro{z-index:5!important;pointer-events:none}
.box-intro span[lang=en]{color:#7b7d76}

.sheet-stack{
  position:absolute;inset:0;z-index:2;
  perspective:1500px;perspective-origin:64% 38%;
  pointer-events:none;
}

.script-sheet{
  --dx:0px;--dy:0px;--dz:0px;--rot:0deg;--sc:1;--lift:0;
  position:absolute;
  left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  z-index:var(--z);
  margin:0;padding:0;border:0;background:transparent;color:var(--ink);
  text-align:left;
  transform-style:preserve-3d;
  transform:translate3d(var(--dx),var(--dy),var(--dz)) rotate(var(--rot)) scale(var(--sc));
  transition:transform .56s var(--ease-paper),filter .45s;
  pointer-events:auto;
  cursor:grab;
  -webkit-tap-highlight-color:transparent;
  touch-action:pan-y;
}
.script-sheet:focus-visible{outline:2px dashed var(--ink);outline-offset:6px}
.script-sheet .sheet-face{
  position:absolute;inset:0;
  display:block;
  background:linear-gradient(158deg,#fffefa 0%,#faf8f0 62%,#f1eee3 100%);
  border:1.5px solid #33342f;
  outline:1px solid #33342f33;
  outline-offset:1.5px;
  box-shadow:
    inset 0 0 0 3px #ffffffe6,
    inset 0 -14px 24px #17171512,
    0 1px 0 #fff,
    calc(2px + var(--lift) * .22px) calc(3px + var(--lift) * .34px) 0 #cfcbbb,
    calc(5px + var(--lift) * .5px) calc(8px + var(--lift) * .7px) 0 #bdb9aa,
    calc(10px + var(--lift) * .9px) calc(15px + var(--lift) * 1.15px) calc(14px + var(--lift) * 1.5px) #17171538;
  /* 不裁切：凸耳与蜡笔色痕需要越出纸边 */
  overflow:visible;
  transition:box-shadow .45s var(--ease-paper),background .4s;
}
/* 纸页凸耳（档案卡标签），与底图文件夹语汇一致 */
.sheet-face:before{
  content:'';position:absolute;
  left:9%;top:-1px;width:34%;height:11px;
  background:var(--ivory);
  border:1px solid #4a4b45;border-top:0;
  border-radius:0 0 3px 3px;
  box-shadow:0 2px 0 #ffffffd9;
}
/* 局部印刷颗粒：只附在纸物件上 */
.sheet-grain{
  position:absolute;inset:0;
  background:url('assets/textures/paper-grain.svg') repeat;
  background-size:190px 190px;
  mix-blend-mode:multiply;opacity:.52;pointer-events:none;
}
/* 蚀刻排线：只出现在纸页下缘与右缘的体积阴影里 */
.sheet-hatch{
  position:absolute;right:0;bottom:0;width:44%;height:66%;
  background:url('assets/textures/hatch.svg') right bottom/150px 150px no-repeat;
  opacity:.24;pointer-events:none;
  -webkit-mask-image:linear-gradient(315deg,#000 0%,transparent 68%);
  mask-image:linear-gradient(315deg,#000 0%,transparent 68%);
}
/* 露出的纸边：抬起时可见 */
.sheet-edge{
  position:absolute;right:-3px;bottom:-4px;left:3px;height:4px;
  background:repeating-linear-gradient(90deg,#b9b5a8 0 2px,#e9e5da 2px 4px);
  transform:translateY(0);opacity:calc(.25 + var(--lift) * .035);
  transition:opacity .45s;pointer-events:none;
}
.sheet-crayon{
  position:absolute;left:-8px;bottom:-12px;width:62px;height:38px;
  background:url('assets/textures/crayon.svg') center/contain no-repeat;
  opacity:.62;mix-blend-mode:multiply;pointer-events:none;
  transform:rotate(-8deg);
  transition:opacity .5s,transform .5s;
}
.sheet-index{
  position:absolute;left:5%;top:11%;
  font:11px/1 Arial,sans-serif;letter-spacing:.14em;color:#7d7f77;
}
.sheet-title{
  position:absolute;left:5%;top:31%;
  font:400 clamp(15px,1.55vw,25px)/1.05 var(--hand);
  white-space:nowrap;max-width:62%;
}
.sheet-title small{
  display:block;font:400 clamp(9px,.82vw,13px)/1.2 Arial,sans-serif;
  color:#7d7f77;letter-spacing:.02em;margin-top:5px;white-space:nowrap;
}
.sheet-q{
  position:absolute;left:5%;bottom:6%;width:50%;
  font-size:clamp(9px,.72vw,11px);line-height:1.35;color:#8d8f88;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  /* 静止时只露档案标签；抬起/抽出时才读到问题句 */
  opacity:0;transition:opacity .34s;
}
.script-sheet.hovered .sheet-q,
.script-sheet.selected .sheet-q,
.script-sheet.dragging .sheet-q{opacity:1}
.sheet-thumb{
  position:absolute;right:4%;top:14%;width:26%;height:58%;
  border:1px solid #b7b3a6;background:#eeeae0;
  overflow:hidden;opacity:.62;
  transition:opacity .45s,transform .45s var(--ease-paper);
}
.sheet-thumb img{width:100%;height:100%;object-fit:cover;object-position:left top;filter:grayscale(1) contrast(1.04)}
.sheet-thumb:after{
  content:'';position:absolute;inset:0;
  background:url('assets/textures/paper-grain.svg');background-size:120px;
  mix-blend-mode:multiply;opacity:.5;
}
.sheet-hint{
  position:absolute;right:4%;bottom:8%;
  font:10px Arial,sans-serif;letter-spacing:.1em;color:#8b8d85;
  opacity:0;transition:opacity .4s;white-space:nowrap;
}

/* 状态：悬停抬起 / 按下受力 / 拖动 / 打开 / 归位 */
.script-sheet.hovered{--dz:26px;--lift:10;--sc:1.012;z-index:40!important}
.script-sheet.hovered .sheet-thumb{opacity:.95;transform:rotate(-2deg) scale(1.03)}
.script-sheet.hovered .sheet-hint,.script-sheet.selected .sheet-hint{opacity:1}
.script-sheet.hovered .sheet-crayon{opacity:.78;transform:rotate(-3deg) translate(3px,-3px)}
.script-sheet.pressed{--sc:.982;--dz:8px;--lift:3;transition-duration:.11s;cursor:grabbing}
.script-sheet.dragging{transition:none!important;z-index:60!important;cursor:grabbing}
.script-sheet.dragging .sheet-face{
  box-shadow:
    inset 0 0 0 3px #ffffffd9,
    12px 18px 0 #c9c5b8,
    22px 30px 34px #1717153d;
}
.script-sheet.selected{z-index:45!important}
.script-sheet.returning{transition:transform .62s var(--ease-paper),filter .45s}
/* 打开过程中纸页本体隐去，由详情层里同一张纸接管 */
.script-sheet.lifted{opacity:0;pointer-events:none;transition:opacity .18s}
body.reading .script-sheet:not(.lifted){filter:grayscale(.35) brightness(.97)}

/* 移动端：纸页退为纵向列表，点击与滑动等效 */
@media(max-width:600px){
  /* 覆盖原样式表给桌面散点布局预留的内边距 */
  .box-scene{aspect-ratio:auto;min-height:0;padding:0!important;display:block;overflow:visible}
  .box-art{opacity:.06;background-size:auto 100%!important;background-position:78% center!important}
  .box-well,.box-shell-edge{display:none}
  .sheet-stack{position:relative;inset:auto;display:flex;flex-direction:column;gap:9px;padding:74px 14px 18px;perspective:none}
  .script-sheet{
    position:relative;left:auto!important;top:auto!important;
    width:100%!important;height:auto;min-height:76px;
    transform:none!important;
    transition:transform .3s var(--ease-paper),opacity .25s;
  }
  .script-sheet .sheet-face{position:relative;inset:auto;height:76px;box-shadow:0 2px 0 #cfcbbb,3px 4px 0 #bdb9aa,5px 8px 14px #1717151c;outline-offset:1px}
  /* 移动端去掉凸耳：它的底边会横穿编号与标题 */
  .sheet-face:before{display:none}
  .sheet-index{top:11%;left:4%;font-size:9px}
  .sheet-title{top:37%;left:4%;font-size:18px;max-width:64%}
  .sheet-title small{font-size:10px;margin-top:3px}
  .sheet-q{display:none}
  .sheet-thumb{right:3%;top:14%;width:19%;height:70%}
  .sheet-hint{display:none}
  .sheet-crayon{left:auto;right:20%;bottom:-7px;width:42px;height:26px;opacity:.4}
  .script-sheet.hovered{--dz:0;--lift:0}
  .script-sheet.pressed{--dz:0}
  .script-sheet.dragging{transform:translateX(var(--dx))!important}
  .script-sheet.lifted{opacity:0}
}

/* ------------------------------------------------------------
   2. 详情台：同一张纸从盒中移出、旋转到阅读角度
   ------------------------------------------------------------ */
.detail-layer{position:fixed;inset:0;z-index:90;display:none}
.detail-layer.on{display:block}
.detail-veil{
  position:absolute;inset:0;background:#17171542;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .5s;
}
.detail-layer.on .detail-veil{opacity:1}
.detail-card{
  position:absolute;left:50%;top:50%;
  width:min(1080px,92vw);height:min(760px,86vh);
  transform:translate(-50%,-50%);
  transform-origin:center center;
  background:var(--ivory);
  border:1px solid #4a4b45;
  box-shadow:0 2px 0 #fff inset,14px 18px 0 #d5d1c4,24px 34px 60px #17171555;
  display:flex;flex-direction:column;
  overflow:hidden;
  opacity:0;
  will-change:transform,opacity;
}
.detail-card:before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:5;
  background:
    url('assets/textures/paper-grain.svg') 0 0/210px,
    url('assets/textures/hatch.svg') right bottom/260px no-repeat;
  mix-blend-mode:multiply;opacity:.42;
}
.detail-card.animate{transition:transform .64s var(--ease-paper),opacity .42s}
.detail-head{
  flex:none;height:74px;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:0 22px 0 26px;border-bottom:1px solid #cfccc0;
  background:linear-gradient(#fffef9,#f7f5ed);
  position:relative;z-index:6;
}
.detail-face{
  display:flex;align-items:center;gap:14px;min-width:0;
}
.detail-face .face-chip{
  width:64px;height:44px;flex:none;border:1px solid #4a4b45;
  background:var(--ivory) url('assets/textures/hatch.svg') right bottom/90px no-repeat;
  display:grid;place-items:center;
  font:15px var(--hand);box-shadow:2px 2px 0 #d5d1c4;
  transform:rotate(-4deg);
}
.detail-face h2{font:400 clamp(21px,2.3vw,31px)/1.1 var(--hand);margin:0;white-space:nowrap}
.detail-face h2 small{display:block;font:11px Arial,sans-serif;color:#8d8f88;margin-top:3px}
.detail-close{
  flex:none;border:1px solid #4a4b45;background:transparent;color:var(--ink);
  padding:8px 13px;font-size:13px;
}
.detail-close:hover{background:var(--ink);color:var(--ivory)}
.detail-close small{font:10px Arial,sans-serif;margin-left:6px;opacity:.65}
.detail-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);position:relative;z-index:6}
.detail-brief{padding:clamp(20px,3vw,40px);overflow:auto}
.detail-brief .eyebrow{display:block;margin-bottom:14px}
.detail-brief h3{font:400 clamp(34px,4.6vw,62px)/1.05 var(--hand);margin:0 0 14px}
.detail-brief h3 small{display:block;font:13px/1.3 Arial,sans-serif;color:#8d8f88;letter-spacing:.03em;margin-top:8px}
.detail-q{font-size:clamp(16px,1.7vw,21px);line-height:1.5;margin:0 0 26px;max-width:560px}
.detail-q small{display:block;font:12px/1.5 Arial,sans-serif;color:#8d8f88;margin-top:4px}
.detail-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin:0 0 26px;border-top:1px solid #cfccc0}
.detail-meta>div{padding:12px 14px 12px 0;border-bottom:1px solid #e2dfd4}
.detail-meta dt{font:10px Arial,sans-serif;letter-spacing:.14em;color:#8d8f88;margin-bottom:6px}
.detail-meta dd{margin:0;font-size:13px;line-height:1.55;color:#3c3d38}
.detail-media{display:flex;flex-wrap:wrap;gap:10px}
.detail-media button{
  border:1px solid var(--ink);background:var(--ink);color:var(--ivory);
  padding:11px 17px;font-size:14px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  transition:transform .28s var(--ease-paper),background .28s,color .28s;
}
.detail-media button:hover{transform:translate(-2px,-3px)}
.detail-media button.ghost{background:transparent;color:var(--ink)}
.detail-media button small{font:10px Arial,sans-serif;opacity:.7}
.detail-media button[disabled]{opacity:.35;cursor:not-allowed;transform:none}
.detail-aside{
  position:relative;border-left:1px solid #cfccc0;overflow:hidden;
  background:#efece2;
  display:grid;place-items:center;
}
.detail-aside img{width:100%;height:100%;object-fit:contain;filter:grayscale(1) contrast(1.03)}
.detail-aside:after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,#1717151a),url('assets/textures/hatch.svg') right bottom/220px no-repeat;
  opacity:.4;mix-blend-mode:multiply;
}
.detail-aside .aside-caption{
  position:absolute;left:16px;bottom:14px;z-index:2;
  font:11px Arial,sans-serif;letter-spacing:.1em;color:#6d6f68;
  background:#fdfcf7cc;padding:4px 8px;
}
.detail-strip{
  flex:none;height:86px;display:flex;align-items:center;gap:8px;
  padding:8px 20px;border-top:1px solid #cfccc0;background:#f4f2e9;
  overflow-x:auto;position:relative;z-index:6;
}
.detail-strip .strip-label{font:10px Arial,sans-serif;letter-spacing:.12em;color:#8d8f88;white-space:nowrap;margin-right:6px}
.detail-strip button{
  flex:none;width:56px;height:56px;padding:0;border:1px solid #b7b3a6;background:#fff;
  overflow:hidden;opacity:.72;transition:opacity .25s,transform .25s,border-color .25s;
}
.detail-strip button:hover,.detail-strip button.on{opacity:1;transform:translateY(-3px);border-color:var(--ink)}
.detail-strip button img{width:100%;height:100%;object-fit:cover;object-position:left top;filter:grayscale(1)}
body.reading{overflow:hidden}
/* 详情阅读期间减少背景运动：包括开场模块写入的视差内联 transform */
body.reading .scene{transform:none!important}
body.reading .scene,body.reading .intermission:before,body.reading .intermission:after{animation-play-state:paused!important}
body.reading .box-art,body.reading .box-well{transition:none}
@media(max-width:850px){
  .detail-card{width:96vw;height:92vh}
  .detail-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 190px}
  .detail-aside{border-left:0;border-top:1px solid #cfccc0}
  .detail-aside img{object-fit:contain}
  .detail-strip{height:70px}
  .detail-strip button{width:46px;height:46px}
}
@media(max-width:600px){
  .detail-head{height:62px;padding:0 12px 0 15px}
  .detail-face .face-chip{width:46px;height:34px;font-size:12px}
  .detail-face h2{font-size:20px}
  .detail-close{padding:6px 9px;font-size:12px}
  .detail-close small{display:none}
  .detail-brief{padding:18px}
  .detail-brief h3{font-size:34px}
  .detail-meta{grid-template-columns:1fr 1fr}
  .detail-body{grid-template-rows:minmax(0,1fr) 120px}
  .detail-aside:after{opacity:.14}
  .detail-aside .aside-caption{
    left:8px;right:8px;bottom:6px;font-size:9px;line-height:1.35;
    white-space:normal;text-align:left;
  }
  .detail-strip{height:60px;padding:6px 12px}
  .detail-strip .strip-label{display:none}
}

/* ------------------------------------------------------------
   3. 阅读器：展板 / 论文共用，按内容比例、可缩放、连续浏览
   ------------------------------------------------------------ */
dialog#viewer.reader{
  background:var(--warm);color:var(--ink);
  border:0;padding:0;
}
dialog#viewer.reader::backdrop{background:#171715cc;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.reader{height:100%;display:flex;flex-direction:column;position:relative}
.reader:before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:url('assets/textures/paper-grain.svg');background-size:230px;
  mix-blend-mode:multiply;opacity:.22;
}
.reader-top{
  flex:none;min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px clamp(14px,3vw,34px);border-bottom:1px solid #c9c6ba;background:#fdfcf7;
  position:relative;z-index:3;
}
.reader-top .rt-title{min-width:0}
.reader-top .rt-title span{font:10px Arial,sans-serif;letter-spacing:.14em;color:#8d8f88;display:block}
.reader-top h2{font:400 clamp(20px,2.3vw,30px)/1.1 var(--hand);margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-top h2 small{font:11px Arial,sans-serif;color:#8d8f88;margin-left:10px}
.reader-tools{display:flex;align-items:center;gap:8px;flex:none}
.reader-tools button,.reader-tools a{
  border:1px solid #9a9c94;background:transparent;color:var(--ink);
  padding:7px 11px;font-size:12px;white-space:nowrap;
}
.reader-tools button:hover,.reader-tools a:hover{background:var(--ink);color:var(--ivory)}
.reader-tools button.on{background:var(--ink);color:var(--ivory)}
.reader-tools .rt-close{font-size:22px;line-height:1;padding:3px 12px;border-color:var(--ink)}
.reader-stage{
  flex:1;min-height:0;display:grid;grid-template-columns:52px minmax(0,1fr) 52px;
  position:relative;z-index:2;
}
.reader-nav{border:0;background:transparent;color:#6d6f68;font-size:28px;transition:background .25s,color .25s}
.reader-nav:hover{background:#e9e6dc;color:var(--ink)}
.reader-canvas{
  min-width:0;min-height:0;overflow:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:clamp(10px,2vw,26px);
  background:
    linear-gradient(90deg,#00000008 0 1px,transparent 1px) 0 0/100% 100%,
    #eeebe1;
  scrollbar-width:thin;
}
.reader-page{
  flex:none;width:fit-content;transform-origin:top center;
  transition:transform .34s var(--ease-paper);
  box-shadow:0 2px 0 #fff,5px 7px 0 #d3d0c4,10px 16px 30px #17171533;
  background:#fff;
  border:1px solid #b7b3a6;
  position:relative;
  max-width:100%;
}
.reader-page img{
  display:block;width:auto;height:auto;
  max-width:100%;
  /* 首屏按内容比例完整呈现，不高裁切、不强行统一卡片比例 */
  max-height:calc(100svh - 226px);
  object-fit:contain;
  cursor:zoom-in;
  image-rendering:auto;
}
.reader-page.zoomed{cursor:zoom-out}
.reader-page.zoomed img{cursor:zoom-out}
.reader-page:after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url('assets/textures/paper-grain.svg');background-size:170px;
  mix-blend-mode:multiply;opacity:.16;
}
/* 灵感解释贴着对应的那一页，而不是堆在开头 */
.reader-note{
  flex:none;width:min(760px,100%);margin:16px auto 0;padding:14px 18px;
  background:#fdfcf7;border-left:3px solid var(--crayon-blue);
  font-size:13px;line-height:1.65;color:#4a4b45;
  position:relative;
}
.reader-note:before{content:'✳';position:absolute;right:12px;top:8px;color:#c9c6ba;font-size:16px}
.reader-note strong{display:block;font:10px Arial,sans-serif;letter-spacing:.14em;color:#8d8f88;margin-bottom:6px}
.reader-note span[lang=en]{display:block;font:11px/1.5 Arial,sans-serif;color:#8d8f88;margin-top:5px}
.reader-bar{
  flex:none;min-height:64px;display:flex;align-items:center;gap:14px;
  padding:8px clamp(12px,3vw,30px);border-top:1px solid #c9c6ba;background:#fdfcf7;
  position:relative;z-index:3;
}
.reader-film{flex:1;display:flex;gap:6px;overflow-x:auto;padding:4px 0}
.reader-film button{
  flex:none;width:44px;height:52px;padding:0;border:1px solid #c2bfb3;background:#fff;opacity:.6;
  transition:opacity .2s,transform .2s,border-color .2s;
}
.reader-film button:hover{opacity:1;transform:translateY(-3px)}
.reader-film button.on{opacity:1;border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.reader-film button img{width:100%;height:100%;object-fit:cover;object-position:left top;filter:grayscale(1)}
.reader-count{font:12px Arial,sans-serif;color:#6d6f68;white-space:nowrap}
.reader-hint{font:10px Arial,sans-serif;color:#a3a59c;white-space:nowrap}
@media(max-width:600px){
  .reader-top{min-height:58px;padding:7px 12px}
  .reader-tools button,.reader-tools a{padding:5px 7px;font-size:11px}
  .reader-tools .rt-hide{display:none}
  .reader-stage{grid-template-columns:34px minmax(0,1fr) 34px}
  .reader-nav{font-size:22px}
  .reader-canvas{padding:8px}
  .reader-page img{max-height:calc(100svh - 196px)}
  .reader-bar{min-height:56px;padding:6px 10px;gap:8px}
  .reader-film button{width:34px;height:42px}
  .reader-hint{display:none}
}

/* ------------------------------------------------------------
   4. 放映：环境光降低 → 从入口展开 → 胶片入位/对焦 → 确认播放
   ------------------------------------------------------------ */
.screening-layer{position:fixed;inset:0;z-index:120;display:none}
.screening-layer.on{display:block}
.screening-dim{
  position:absolute;inset:0;background:#0b0b0a;opacity:0;
  transition:opacity .6s;
}
.screening-layer.on .screening-dim{opacity:.42}
.screening-layer.playing .screening-dim{opacity:.78}
.screening-stage{
  position:absolute;left:50%;top:50%;
  width:min(1040px,92vw);
  transform:translate(-50%,-50%);
  transform-origin:center center;
  background:#111;
  box-shadow:0 0 0 1px #ffffff22,18px 26px 70px #000a;
  opacity:0;
  will-change:transform,opacity;
}
.screening-stage.animate{transition:transform .6s var(--ease-paper),opacity .4s}
.screening-frame{position:relative;width:100%;background:#0a0a09;overflow:hidden}
.screening-frame video{
  display:block;width:100%;height:auto;max-height:78vh;
  aspect-ratio:16/9;background:#000;
}
.screening-frame:after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 52%,#00000066 100%);
}
.screening-filmbar{
  position:absolute;z-index:4;top:0;bottom:0;width:34px;
  background:url('assets/textures/sprocket.svg') center top/34px 160px repeat-y;
  opacity:0;transition:transform .55s var(--ease-paper),opacity .4s;pointer-events:none;
}
.screening-filmbar.l{left:0;transform:translateX(-100%)}
.screening-filmbar.r{right:0;transform:translateX(100%)}
.screening-layer.cued .screening-filmbar{opacity:.9;transform:translateX(0)}
.screening-focus{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  display:grid;place-items:center;opacity:0;
  transition:opacity .4s;
}
.screening-focus span{
  width:120px;height:120px;border:1px solid #ffffff8c;border-radius:50%;
  box-shadow:0 0 0 1px #ffffff22 inset;
  transform:scale(1.5);
  transition:transform .55s var(--ease-paper);
}
.screening-focus span:before,.screening-focus span:after{
  content:'';position:absolute;background:#ffffff8c;
}
.screening-focus span:before{left:50%;top:-14px;bottom:-14px;width:1px}
.screening-focus span:after{top:50%;left:-14px;right:-14px;height:1px}
.screening-layer.cued .screening-focus{opacity:.7}
.screening-layer.cued .screening-focus span{transform:scale(1)}
.screening-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.32);
  transition:opacity .5s;
}
.screening-layer.playing .screening-poster,
.screening-layer.playing .screening-focus,
.screening-layer.playing .screening-confirm,
.screening-layer.playing .screening-filmbar{opacity:0;pointer-events:none}
.screening-confirm{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  border:1px solid #f7f5ed;background:#0c0c0bd9;color:#f7f5ed;
  padding:13px 22px;font-size:16px;display:flex;flex-direction:column;align-items:center;gap:5px;
  opacity:0;transition:opacity .4s .25s,background .3s;
}
.screening-layer.cued .screening-confirm{opacity:1}
.screening-confirm:hover{background:#f7f5ed;color:#171715}
.screening-confirm small{font:10px Arial,sans-serif;letter-spacing:.1em;opacity:.75}
/* 播放后收起入位装饰：置于 cued 规则之后，避免同特异性被覆盖 */
.screening-layer.playing .screening-poster,
.screening-layer.playing .screening-focus,
.screening-layer.playing .screening-confirm,
.screening-layer.playing .screening-filmbar{opacity:0!important;pointer-events:none!important}
.screening-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 14px;background:#171715;color:#f7f5ed;font-size:12px;
}
.screening-bar span{font:11px Arial,sans-serif;letter-spacing:.1em;color:#b9b7ae}
.screening-bar button{
  border:1px solid #f7f5ed88;background:transparent;color:#f7f5ed;padding:6px 13px;font-size:12px;
}
.screening-bar button:hover{background:#f7f5ed;color:#171715}
@media(max-width:600px){
  .screening-stage{width:96vw}
  .screening-filmbar{width:22px;background-size:22px 104px}
  .screening-focus span{width:82px;height:82px}
  .screening-confirm{padding:10px 15px;font-size:14px}
}

/* ------------------------------------------------------------
   5. 论文：研究手稿（叠页 / 书签 / 装订边 / 少量批注）
   ------------------------------------------------------------ */
.paper-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.manuscript{
  position:relative;
  display:grid;grid-template-columns:118px minmax(0,1fr);gap:20px;
  padding:24px 22px 22px 30px;
  background:var(--ivory);
  border:1px solid #a9aaa2;
  box-shadow:4px 5px 0 #d3d0c4,8px 11px 0 #cbc8bc;
  cursor:pointer;
  transition:transform .45s var(--ease-paper),box-shadow .45s var(--ease-paper);
  transform:rotate(-.45deg);
  isolation:isolate;
}
.manuscript:nth-child(even){transform:rotate(.55deg)}
.manuscript:hover{transform:translate(-2px,-6px) rotate(0);box-shadow:6px 9px 0 #d3d0c4,13px 18px 0 #cbc8bc,18px 26px 32px #1717151f}
.manuscript:before,.manuscript:after{
  content:'';position:absolute;inset:0;z-index:-1;background:#f2efe5;border:1px solid #b7b3a6;pointer-events:none;
}
.manuscript:before{transform:translate(5px,5px) rotate(1.1deg)}
.manuscript:after{transform:translate(9px,9px) rotate(-.7deg);opacity:.65}
/* 装订边与装订孔，装饰不覆盖正文 */
.ms-binding{
  position:absolute;left:0;top:0;bottom:0;width:19px;
  border-right:1px solid #c9c6ba;
  background:
    radial-gradient(circle,#b7b3a6 0 3px,transparent 3.5px) center 26px/19px 62px repeat-y,
    linear-gradient(90deg,#e4e0d4,#f7f5ed);
  pointer-events:none;
}
.ms-bookmark{
  position:absolute;right:22px;top:-1px;width:26px;height:44px;
  background:var(--crayon-red);opacity:.7;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
  pointer-events:none;
}
.manuscript:nth-child(3n+2) .ms-bookmark{background:var(--crayon-blue)}
.manuscript:nth-child(3n+3) .ms-bookmark{background:var(--crayon-teal)}
.ms-grain{
  position:absolute;inset:0;pointer-events:none;
  background:url('assets/textures/paper-grain.svg');background-size:170px;
  mix-blend-mode:multiply;opacity:.3;
}
.ms-cover{
  position:relative;align-self:start;
  transform-origin:left center;
  transition:transform .5s var(--ease-paper);
  transform-style:preserve-3d;
  perspective:600px;
}
.manuscript:hover .ms-cover{transform:rotateY(-13deg)}
.ms-cover img{
  width:118px;height:158px;object-fit:cover;object-position:left top;
  filter:grayscale(1) contrast(1.06);border:1px solid #b7b3a6;background:#fff;
  box-shadow:3px 4px 0 #d3d0c4;
}
.ms-body{position:relative;min-width:0}
.ms-status{
  display:inline-block;background:var(--ink);color:#f7f5ed;
  padding:4px 8px;font:10px Arial,sans-serif;letter-spacing:.09em;margin-bottom:10px;
}
.ms-body h3{font:400 clamp(21px,2vw,29px)/1.2 var(--hand);margin:0 0 4px}
.ms-en{font:12px/1.4 Arial,sans-serif;color:#8d8f88;margin:0 0 12px}
.ms-q{font-size:14px;line-height:1.55;margin:0 0 12px}
.ms-q span[lang=en]{display:block;font:11px/1.45 Arial,sans-serif;color:#8d8f88;margin-top:3px}
.ms-lab{font-size:12px;border-left:2px solid var(--ink);padding-left:9px;margin:0 0 10px;line-height:1.5}
.ms-lab span[lang=en]{display:block;font:10px Arial,sans-serif;color:#8d8f88;margin-top:2px}
.ms-contrib{font-size:12px;color:#4a4b45;margin:0 0 12px;padding:8px 10px;background:#f2efe5;border:1px dashed #c9c6ba}
.ms-contrib b{font:10px Arial,sans-serif;letter-spacing:.1em;color:#8d8f88;display:block;margin-bottom:3px}
.ms-open{display:inline-flex;align-items:center;gap:8px;font-size:13px;border-bottom:1px solid var(--ink);padding-bottom:3px}
.ms-open span[lang=en]{font:10px Arial,sans-serif;color:#8d8f88}
.ms-margin{
  position:absolute;right:-6px;top:6px;
  writing-mode:vertical-rl;font:10px var(--hand);color:#a3a59c;
  pointer-events:none;opacity:.8;
}
.ms-hatch{
  position:absolute;right:0;bottom:0;width:90px;height:90px;pointer-events:none;
  background:url('assets/textures/hatch.svg') right bottom/90px no-repeat;opacity:.14;
}
@media(max-width:850px){.paper-list{grid-template-columns:1fr}}
@media(max-width:600px){
  .manuscript{grid-template-columns:80px minmax(0,1fr);gap:13px;padding:16px 14px 16px 25px}
  .ms-cover img{width:80px;height:112px}
  .ms-binding{width:15px}
  .ms-body h3{font-size:20px}
  .ms-en{font-size:11px}
  .ms-margin{display:none}
}

/* ------------------------------------------------------------
   6. 经历：统一悬挂逻辑 / 触碰短摆 / 点击展开 / 橄榄枝
   ------------------------------------------------------------ */
.about{position:relative;background:#e8e9e5}
.dossier{position:relative}
.dossier-rail{
  position:absolute;left:2%;right:2%;top:6px;height:2px;
  background:linear-gradient(90deg,transparent,#8d8f88 6%,#8d8f88 94%,transparent);
  opacity:.55;pointer-events:none;
}
.dossier-rail:before,.dossier-rail:after{
  content:'';position:absolute;top:-5px;width:9px;height:9px;border-radius:50%;
  border:1px solid #8d8f88;background:#e8e9e5;
}
.dossier-rail:before{left:5%}.dossier-rail:after{right:5%}
.hang{transform-origin:top center;transform-box:border-box}
.hang:before{
  content:'';position:absolute;left:50%;top:-16px;width:2px;height:16px;
  background:#8d8f88;transform:translateX(-50%);
}
/* 用独立 rotate 属性，不干扰原有 transform:rotate(-3deg) */
.hang.sway{animation:hang-sway 1.15s cubic-bezier(.28,.7,.3,1) 1 both}
@keyframes hang-sway{
  0%{rotate:0deg}
  16%{rotate:2.3deg}
  38%{rotate:-1.5deg}
  58%{rotate:.85deg}
  76%{rotate:-.32deg}
  90%{rotate:.1deg}
  100%{rotate:0deg}
}
.dossier-portrait,.dossier-sheet{position:relative}
.dossier-sheet .sheet-aside{position:relative}
/* 手绘橄榄枝只强调重要成果，不压正文 */
.laurel-accent{
  position:absolute;right:-6px;top:-26px;width:76px;height:76px;
  background:url('assets/laurel-simple.png') center/contain no-repeat;
  opacity:.62;pointer-events:none;transform:rotate(12deg);
}
/* 记录条目展开：关闭后回到原位置，正文不倾斜 */
.dossier-sheet li{
  position:relative;cursor:pointer;
  transition:background .25s,padding-left .25s;
}
.dossier-sheet li:hover{background:#efeee6;padding-left:7px}
.dossier-sheet li .li-more{
  display:block;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .4s var(--ease-paper),opacity .3s,margin .4s;
  font-size:12px;line-height:1.6;color:#5c5e57;
}
.dossier-sheet li.open .li-more{max-height:120px;opacity:1;margin-top:7px}
.dossier-sheet li.open{background:#f2f0e7;padding-left:9px}
.dossier-sheet li .li-toggle{
  position:absolute;right:0;top:8px;font:11px Arial,sans-serif;color:#8d8f88;
}
.dossier-sheet li.open .li-toggle{transform:rotate(45deg)}
@media(max-width:600px){.laurel-accent{width:54px;height:54px;right:-2px;top:-18px}}

/* ------------------------------------------------------------
   7. 章节过渡：每个过渡只有一种主动作，滚动方向连续
   ------------------------------------------------------------ */
/* 作品 → 研究：投影光减弱（去掉永久循环故障动画） */
.intermission{position:relative;overflow:hidden}
.intermission:before,.intermission:after{animation:none!important;opacity:.1!important}
.intermission .fault{animation:none!important}
.intermission-light{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 46% 70% at 50% 42%,#ffffff44 0%,transparent 70%);
  opacity:0;transition:opacity 1.1s;
}
.intermission.in-view .intermission-light{opacity:1;animation:light-decay 2.6s ease-out 1 forwards}
@keyframes light-decay{0%{opacity:.95}55%{opacity:.42}100%{opacity:.12}}
/* 研究 → 经历：一张纸从上方遮挡后让开 */
.about-shade{
  position:absolute;left:-4%;right:-4%;top:-1px;height:120px;z-index:4;
  background:
    url('assets/textures/paper-grain.svg') #f0eee6;
  background-size:200px;
  box-shadow:0 8px 18px #1717151a;
  clip-path:polygon(0 0,100% 0,100% 72%,76% 84%,51% 74%,27% 88%,0 76%);
  transform:translateY(-101%);
  transition:transform 1.05s var(--ease-paper);
  pointer-events:none;
}
.about.in-view .about-shade{transform:translateY(-92%)}
/* 离屏停止装饰动画 */
section:not(.in-view) .intermission-light,
section:not(.in-view) .hang.sway{animation-play-state:paused}

/* ------------------------------------------------------------
   8. 结尾：帘幕同底色 / 光渐降 / 文字居中 / 三个入口
   ------------------------------------------------------------ */
.exit-curtain{
  background:repeating-linear-gradient(90deg,#e8e9e5 0 42px,#dedfd9 43px 64px,#eeefeb 67px 90px)!important;
  border-inline:1px solid #b9bbb4!important;
}
.exit-text{z-index:6!important}
/* 环境光渐降但插画仍要看得见：暗场不加到全不透明 */
.exit.in-view .exit-dark{opacity:.66}
.exit-actions{
  display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:26px;
}
.exit-actions a,.exit-actions button{
  border:1px solid #f7f5edbb;background:#0b0b0b55;color:#f7f5ed;
  padding:9px 16px;font-size:13px;display:inline-flex;align-items:center;gap:7px;
  transition:background .3s,color .3s,transform .3s;
}
.exit-actions a:hover,.exit-actions button:hover{background:#f7f5ed;color:#171715;transform:translateY(-2px)}
.exit-actions small{font:10px Arial,sans-serif;opacity:.72}
.exit-actions .primary{border-color:#f7f5ed;background:#f7f5ed22}
@media(max-width:600px){.exit-actions{gap:8px;margin-top:18px}.exit-actions a,.exit-actions button{padding:7px 11px;font-size:12px}.exit-actions small{display:none}}

/* ------------------------------------------------------------
   9. 声音开关与通用小件
   ------------------------------------------------------------ */
.sound{transition:background .3s,color .3s}
.sound[aria-pressed=true]{background:#17171510}
.sound .dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:currentColor;margin-right:7px;vertical-align:middle;opacity:.45;
}
.sound[aria-pressed=true] .dot{opacity:1;background:var(--crayon-teal)}
/* 同一个开关迁入各浮层后，随容器换色，DOM 里始终只有一个 #sound */
#sound-slot{display:inline-flex;align-items:center}
.reader-tools .sound{border-color:#9a9c94;padding:7px 11px;font-size:12px}
.detail-head .sound{border-color:#4a4b45;padding:8px 12px;font-size:12px;margin-left:auto}
.screening-bar .sound{border-color:#f7f5ed88;color:#f7f5ed;padding:6px 12px;font-size:12px}
.screening-bar .sound[aria-pressed=true]{background:#f7f5ed22}
@media(max-width:600px){
  .detail-head .sound,.reader-tools .sound{padding:5px 7px;font-size:11px}
}

/* ============================================================
   rev.2 —— 按反馈重做：幕布入口 / 阶梯纸页 / 详情精简 /
   论文黑体 / 场外笔记本底 / 放映故障 / 结尾帘幕
   ============================================================ */

/* ---------- R1. 首页：只在幕布里留一个入口 ---------- */
.vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.screen-cta{
  position:absolute;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  text-align:center;color:#171715;text-decoration:none;
  background:radial-gradient(ellipse 68% 58% at 50% 48%,#fdfcf7e8 0%,#fdfcf7ad 44%,#fdfcf700 76%);
  opacity:0;transform:translateY(6px);filter:blur(4px);
  transition:opacity 1.5s ease 1.5s,transform 1.5s var(--ease-paper) 1.5s,filter 1.5s ease 1.5s;
  pointer-events:none;
}
.lit .screen-cta{opacity:1;transform:none;filter:none;pointer-events:auto}
.screen-cta b{
  font:500 var(--cta,24px)/1 var(--sans);
  letter-spacing:.28em;text-indent:.28em;white-space:nowrap;
}
.screen-cta small{
  font:400 calc(var(--cta,24px) * .4)/1 Arial,sans-serif;
  letter-spacing:.22em;color:#797b72;text-transform:uppercase;white-space:nowrap;
}
.screen-cta .cta-rule{
  display:block;width:0;height:1px;background:#17171566;
  transition:width 1.05s var(--ease-paper) 2.2s,background .55s;
}
.lit .screen-cta .cta-rule{width:min(56%,206px)}
.screen-cta:hover .cta-rule{width:min(84%,300px);background:#171715;transition:width .55s var(--ease-paper),background .55s}
.screen-cta:focus-visible{outline:2px dashed #171715;outline-offset:10px}

/* 点火：暗场先起得慢、后收得快，像灯丝一点点烧起来 */
.darkness{
  background:#050403!important;
  transition:opacity 2.35s cubic-bezier(.54,0,.16,1) .06s!important;
}
.lit .darkness{opacity:0}

/* 灯刚亮时色温偏暖，两三秒后冷回中性 */
.warm-cast{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(96deg,#ffbf7a 0%,#ffcb92 46%,#ffe0bd 100%);
  mix-blend-mode:soft-light;opacity:.62;
  transition:opacity 2.3s cubic-bezier(.4,0,.3,1) .1s;
}
.lit .warm-cast{opacity:0}

/* 灯丝打亮：一小团暖光在镜头前炸开，然后收成常态 */
.lamp-flare{
  position:absolute;z-index:5;left:3.2%;top:31%;width:16%;height:20%;
  background:radial-gradient(circle at 42% 52%,#fffaf0ff 0%,#ffe6b8c4 30%,#ffbe6b00 72%);
  filter:blur(16px);mix-blend-mode:screen;opacity:0;pointer-events:none;
  transform-origin:42% 52%;
}
.lit .lamp-flare{animation:lamp-flare 3.1s cubic-bezier(.3,0,.2,1) 1 both}
@keyframes lamp-flare{
  0%{opacity:0;transform:scale(.3)}
  4%{opacity:.92;transform:scale(.78)}
  9%{opacity:.5;transform:scale(.95)}
  13%{opacity:.78;transform:scale(1.06)}
  22%{opacity:.34;transform:scale(1.3)}
  45%{opacity:.12;transform:scale(1.75)}
  100%{opacity:0;transform:scale(2.2)}
}

/* 画面：三条带并进一个容器统一显影，重叠处才不会双曝光出亮带 */
.scene-stack{
  position:absolute;inset:0;z-index:1;isolation:isolate;
  opacity:0;
  filter:blur(7px) contrast(.94) brightness(.52) saturate(.82);
  transform:scale(1.024);
  transition:opacity 2s cubic-bezier(.3,.44,.24,1) .34s,
             filter 2s cubic-bezier(.3,.44,.24,1) .34s,
             transform 3.6s cubic-bezier(.14,.52,.28,1) .08s;
  will-change:opacity,filter,transform;
}
.lit .scene-stack{opacity:1;filter:none;transform:none}
.scene{opacity:1!important;transition:none!important;filter:none!important}
/* 曝光稳定：显影完成后再轻轻抖两下 */
.lit .scene-stack{animation:exposure-settle 1.5s linear 2.35s 1 forwards}
@keyframes exposure-settle{
  0%{filter:brightness(1.05)}
  18%{filter:brightness(.982)}
  34%{filter:brightness(1.022)}
  52%{filter:brightness(.994)}
  100%{filter:none}
}
/* 三层是同一张画布的三条带，显影必须同步，否则接缝会露成硬边 */
.scene-back,.scene-middle,.scene-front{transition-delay:.26s!important}
.lit .lamp-beam{
  animation:beam-strike 2.4s cubic-bezier(.34,0,.2,1) .05s 1 both;
  transition:none;
}
@keyframes beam-strike{
  0%{opacity:0;transform:scaleX(.05)}
  5%{opacity:.6;transform:scaleX(.22)}
  8%{opacity:.08}
  13%{opacity:.46;transform:scaleX(.44)}
  16%{opacity:.14}
  26%{opacity:.4;transform:scaleX(.8)}
  100%{opacity:.38;transform:scaleX(1)}
}
/* 光束里的浮尘：极淡、极慢，不抢画面 */
.lamp-beam:after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url('assets/textures/paper-grain.svg');
  background-size:150px 150px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 42% 50%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 60% 70% at 42% 50%,#000 0%,transparent 72%);
  opacity:.5;mix-blend-mode:screen;
  animation:dust-drift 26s linear infinite;
}
@keyframes dust-drift{
  0%{background-position:0 0}
  100%{background-position:150px -150px}
}
.entry{transition:opacity .45s ease,visibility .45s!important}

@media(max-width:600px){
  /* 窄屏把构图往右推，让幕布进画，按钮仍落在布面上 */
  .theater .scene{background-position:88% 54%!important}
  .screen-cta{--cta:19px;padding:8px 4px}
  .screen-cta .cta-rule{width:64%}
}

/* ---------- R2. 剧本盒：斜向阶梯，互不遮挡 ---------- */
.box-art{opacity:.17!important;filter:grayscale(1) contrast(.8)!important}
body.reading .box-art{opacity:.09!important}
/* 纸页内部改成两列网格，字号再小也不会互相压字 */
.script-sheet .sheet-face{
  display:grid;
  grid-template-columns:minmax(0,1fr) 20%;
  grid-template-rows:auto auto;
  align-content:center;
  column-gap:4.5%;
  padding:0 4.5%;
  box-sizing:border-box;
}
.script-sheet .sheet-index{
  position:static;grid-column:1;grid-row:1;
  font:9px/1 Arial,sans-serif;letter-spacing:.15em;color:#787a72;
  margin-bottom:3px;
}
.script-sheet .sheet-title{
  position:static;grid-column:1;grid-row:2;
  font:500 clamp(13px,1.05vw,17px)/1.18 var(--sans);
  letter-spacing:.01em;white-space:nowrap;max-width:none;
}
.script-sheet .sheet-title small{
  display:inline-block;font:400 clamp(9px,.72vw,10.5px)/1.3 Arial,sans-serif;
  color:#84867d;letter-spacing:.02em;margin:0 0 0 9px;vertical-align:baseline;
  white-space:nowrap;
}
.script-sheet .sheet-thumb{
  position:static;grid-column:2;grid-row:1 / 3;
  width:auto;height:auto;align-self:stretch;
  border:1px solid #b7b3a6;background:#eeeae0;overflow:hidden;opacity:.72;
  transition:opacity .45s,transform .45s var(--ease-paper);
}
.script-sheet .sheet-face:before{
  /* 薄纸页上凸耳会横穿编号，去掉；纸感交给双边框与露出的纸边 */
  display:none;
}
.script-sheet .sheet-crayon{
  left:-9px;bottom:-9px;width:42px;height:24px;opacity:.5;
}
.script-sheet:hover .sheet-thumb{opacity:.95}
@media(max-width:600px){
  .script-sheet .sheet-face{grid-template-columns:minmax(0,1fr) 19%;padding:0 4%}
  .script-sheet .sheet-title{font-size:17px}
  .script-sheet .sheet-title small{font-size:10px}
  .script-sheet .sheet-index{font-size:9px;margin-bottom:4px}
}

/* 章节入口：一行说明 + 两个去处（抽纸页 / 先看简历） */
.hinge-ways{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hinge-ways .way{
  display:inline-flex;align-items:baseline;gap:9px;
  border:1px solid #171715;padding:9px 15px;font-size:13px;
  color:#171715;background:transparent;text-decoration:none;
  transition:background .3s,color .3s,transform .3s var(--ease-paper);
}
.hinge-ways .way small{font:10px Arial,sans-serif;letter-spacing:.08em;opacity:.6}
.hinge-ways .way:hover{background:#171715;color:#fdfcf7;transform:translateY(-2px)}
.hinge-ways .way:hover small{opacity:.75}
.hinge-ways .way-cv{border-style:dashed}
@media(max-width:600px){
  .hinge-ways{gap:8px;margin-top:14px}
  .hinge-ways .way{padding:8px 12px;font-size:12px}
}

/* ---------- R3. 详情台：名字 + 一句说明 + 入口 ---------- */
.detail-face h2{font:500 clamp(17px,1.5vw,22px)/1.15 var(--sans)!important;letter-spacing:.01em}
.detail-brief h3{font:500 clamp(30px,3.5vw,50px)/1.12 var(--sans)!important;letter-spacing:-.01em;margin:0 0 18px}
.detail-brief h3 small{font:12px/1.3 Arial,sans-serif;color:#8d8f88;letter-spacing:.03em;margin-top:10px}
.detail-about{font-size:clamp(14px,1.1vw,16px);line-height:1.8;color:#3c3d38;margin:0 0 30px;max-width:520px}
.detail-about span[lang=en]{display:block;font:11px/1.75 Arial,sans-serif;color:#8d8f88;margin-top:9px;max-width:480px}
.detail-brief .eyebrow{margin-bottom:20px!important}

/* ---------- R4. 论文：黑体标题、无需页数 ---------- */
.ms-body h3{
  font:500 clamp(19px,1.55vw,25px)/1.35 var(--sans);
  letter-spacing:.005em;margin:0 0 5px;
}
.ms-en{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font:11.5px/1.45 Arial,sans-serif;color:#8d8f88;margin:0 0 12px;
}
.ms-open{font-size:13px;letter-spacing:.02em}

/* ---------- R5. 场外：与「继续追寻」同一张笔记本 ---------- */
.about{
  background:
    repeating-linear-gradient(0deg,#f5f5f0 0 37px,#dcddd7 38px,#f5f5f0 39px);
  position:relative;
}
.about:before{
  content:'';position:absolute;top:0;bottom:0;left:max(2%,27px);width:12px;z-index:0;
  background:radial-gradient(circle,#a8aaa4 0 4px,transparent 4.5px) center top/12px 42px repeat-y;
  border-right:1px solid #aaa;pointer-events:none;opacity:.85;
}
.about:after{
  content:'';position:absolute;left:0;right:0;top:0;height:78px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#f5f5f0 0 26%,#f5f5f0b3 62%,#f5f5f000 100%);
}
.about-heading,.dossier{position:relative;z-index:1}
.about-shade{display:none!important}

/* 场外补充信息：简历里提到但原本没有的条目，排在空白处 */
.sheet-aside .aside-list{margin:11px 0 0;display:grid;gap:6px}
.sheet-aside .aside-list>div{
  display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px;
  font-size:12.5px;line-height:1.55;
}
.sheet-aside .aside-list dt{
  color:#8d8f88;font:10px/1.85 Arial,sans-serif;letter-spacing:.06em;
}
.sheet-aside .aside-list dd{margin:0;color:#3c3d38}
.dossier-sheet li[role=button]{cursor:pointer}
.dossier-sheet li:not([role=button]){cursor:default}
.dossier-sheet li:not([role=button]):hover{background:transparent;padding-left:0}

/* ---------- R6. 放映故障：黑场 + 画面撕裂 + 彩纹 + 划痕 ---------- */
.intermission{
  background:linear-gradient(180deg,
    #f7f5ed 0%,#e8e7df 2.4%,#151513 8.5%,#070706 17%,
    #070706 83%,#161614 91.5%,#e8e7df 97.6%,#f5f5f0 100%)!important;
  isolation:isolate;
}
.intermission:before,.intermission:after{display:none!important}
.intermission .fault,
.intermission p,
.intermission button,
.intermission-reveal{position:relative;z-index:4}
.intermission .fault,
.intermission p,
.intermission button{opacity:1;transition:opacity 1.15s ease}
.intermission.faulting:not(.fault-settled) .fault,
.intermission.faulting:not(.fault-settled) p,
.intermission.faulting:not(.fault-settled) button,
.intermission.faulting:not(.fault-settled) .intermission-reveal{opacity:0;visibility:hidden;transition-duration:.16s}

/* 黑场：故障开始整块压黑，收尾时缓慢化开，文字随之上浮 */
.fault-stage{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  background:radial-gradient(132% 104% at 50% 46%,#0e0e0c 0%,#050505 60%,#000 100%);
  opacity:0;transition:opacity .95s ease;
}
.intermission.faulting .fault-stage{opacity:1}
.intermission.fault-settled .fault-stage{opacity:0;transition:opacity 1.3s ease}

/* 灯丝打火：三下极短全白闪，不要长压 */
.fault-flash{position:absolute;inset:0;background:#f7f5e9;opacity:0}
.faulting .fault-flash{animation:fault-flash 2.6s steps(1,end) 1 both}
@keyframes fault-flash{
  0%{opacity:0}
  1.6%{opacity:.9}
  3.2%{opacity:0}
  21.5%{opacity:0}
  23%{opacity:.68}
  24.6%{opacity:0}
  46.5%{opacity:0}
  48%{opacity:.5}
  49.5%{opacity:0}
  100%{opacity:0}
}

/* 撕裂亮带：硬边白条 + 品红/青色边（chromatic aberration）+ 下缘渗出，
   不铺暗板、不糊柔光，保持"黑场被横切了几刀"的观感 */
.fault-slices{position:absolute;inset:0}
.fault-slices span{
  position:absolute;left:-14%;right:-14%;opacity:0;
  top:calc(4% + var(--i) * 12.6%);
  height:calc(3px + var(--i) * 1.15px);
  background:linear-gradient(180deg,#ffffff 0 62%,#ffeccd 62% 100%);
  box-shadow:
    0 -2px 0 #ff2ea0d9,
    0  2px 0 #00e5ffd9,
    0 11px 30px #ffffff4d;
  transform-origin:50% 50%;will-change:transform,opacity;
}
.fault-slices span:nth-child(3n){
  background:linear-gradient(180deg,#eaf6ff 0 62%,#ffffff 62% 100%);
  box-shadow:0 -2px 0 #ff2ea0b3,0 2px 0 #00e5ffb3,0 9px 24px #ffffff40;
}
.fault-slices span:nth-child(3n+2){
  background:linear-gradient(180deg,#fff2f8 0 62%,#ffffff 62% 100%);
  box-shadow:0 -2px 0 #ff2ea0f2,0 2px 0 #00e5fff2,0 13px 34px #ffffff5c;
}
.faulting .fault-slices span{
  animation:fault-band 2.6s steps(1,end) 1 both;
  animation-delay:calc(var(--i) * 22ms);
}
@keyframes fault-band{
  0%,100%{opacity:0;transform:translateX(0) scaleY(1)}
  2%{opacity:1;transform:translateX(-19%) scaleY(2.2)}
  6%{opacity:.45;transform:translateX(10%) scaleY(.6)}
  10%{opacity:1;transform:translateX(-12%) scaleY(1.5)}
  14%{opacity:.22;transform:translateX(5%) scaleY(1)}
  17%{opacity:1;transform:translateX(-7%) scaleY(2.6)}
  21%{opacity:.38;transform:translateX(13%) scaleY(.8)}
  25%{opacity:.92;transform:translateX(-2%) scaleY(1.2)}
  29%{opacity:.15;transform:translateX(0) scaleY(1)}
  33%{opacity:.7;transform:translateX(-15%) scaleY(1.8)}
  37%{opacity:.26;transform:translateX(7%) scaleY(1)}
  41%{opacity:0;transform:translateX(0) scaleY(1)}
}

/* 彩纹：短促的饱和色断条，像磁带/胶片损伤处的色块撕裂 */
.fault-chroma{
  position:absolute;left:-10%;right:-10%;opacity:0;
  top:calc(18% + var(--j) * 27%);
  height:calc(7px + var(--j) * 3px);
  background:repeating-linear-gradient(90deg,
    #ff2ea0e6 0 26px,#00e5ffb8 26px 58px,#ffd24d99 58px 71px,
    #ff2ea000 71px 340px);
  background-size:520px 100%;
  filter:blur(.35px) saturate(1.4);
  mix-blend-mode:screen;will-change:transform,opacity;
}
.fault-chroma:nth-child(3){
  background:repeating-linear-gradient(90deg,
    #00e5ffe0 0 61px,#ff2ea0c4 61px 74px,#ff2ea000 74px 214px);
  background-size:610px 100%;
}
.fault-chroma:nth-child(4){
  background:repeating-linear-gradient(90deg,
    #ffd24dcc 0 18px,#ff2ea0d2 18px 44px,#00e5ff8f 44px 92px,#ff2ea000 92px 268px);
  background-size:430px 100%;
}
.faulting .fault-chroma{
  animation:fault-chroma-run 2.6s steps(1,end) 1 both;
  animation-delay:calc(var(--j) * 55ms);
}
@keyframes fault-chroma-run{
  0%,100%{opacity:0;transform:translateX(0) scaleY(1)}
  3%{opacity:.95;transform:translateX(-22%) scaleY(1.6)}
  9%{opacity:.25;transform:translateX(14%) scaleY(.7)}
  14%{opacity:.9;transform:translateX(-8%) scaleY(2.8)}
  20%{opacity:.2;transform:translateX(18%) scaleY(1)}
  27%{opacity:.85;transform:translateX(-12%) scaleY(1.4)}
  34%{opacity:.18;transform:translateX(0) scaleY(1)}
  43%{opacity:0}
}

/* 漏光横扫：一道亮轴从上滚到下，把"机器还在转"讲清楚 */
.fault-roll{
  position:absolute;left:0;right:0;top:0;height:14%;opacity:0;
  background:linear-gradient(180deg,
    #ffffff00 0%,#ffffff1f 38%,#ffffff8a 51%,#ffffff1f 64%,#ffffff00 100%);
  mix-blend-mode:screen;filter:blur(1px);
}
.faulting .fault-roll{animation:fault-roll-run 2.6s cubic-bezier(.4,.1,.7,1) 1 both}
@keyframes fault-roll-run{
  0%{opacity:0;transform:translateY(-100%)}
  4%{opacity:.9}
  40%{opacity:.55}
  48%{opacity:0;transform:translateY(760%)}
  100%{opacity:0;transform:translateY(760%)}
}

/* 扫线：细密横向条纹，间歇闪现 */
.fault-scan{
  position:absolute;inset:0;opacity:0;mix-blend-mode:screen;
  background:repeating-linear-gradient(180deg,
    #ffffff00 0 3px,#ffffff17 3px 4px,#ffffff00 4px 8px);
}
.faulting .fault-scan{animation:fault-scan-run 2.6s steps(1,end) 1 both}
@keyframes fault-scan-run{
  0%{opacity:0}2%{opacity:.95}10%{opacity:.3}15%{opacity:.85}
  23%{opacity:.28}30%{opacity:.8}40%{opacity:.25}48%{opacity:0}100%{opacity:0}
}

/* 划痕：竖向白丝 —— 短、细、长度不一，像胶片被刮出的细沟 */
.fault-scratch{position:absolute;inset:0;opacity:0}
.fault-scratch b{
  position:absolute;width:1.5px;
  background:linear-gradient(180deg,#ffffff00,#ffffff,#ffffff00);
  box-shadow:0 0 6px #ffffffa6;
}
.fault-scratch b:nth-child(1){left:13.5%;top:9%;height:19%}
.fault-scratch b:nth-child(2){left:29%;top:47%;height:26%;width:1px;opacity:.7}
.fault-scratch b:nth-child(3){left:52.5%;top:22%;height:34%}
.fault-scratch b:nth-child(4){left:71.5%;top:56%;height:17%;width:1px;opacity:.62}
.fault-scratch b:nth-child(5){left:88%;top:31%;height:23%}
.faulting .fault-scratch{animation:fault-scratch-run 2.6s steps(1,end) 1 both}
@keyframes fault-scratch-run{
  0%,100%{opacity:0;transform:translateX(0)}
  4%{opacity:.95;transform:translateX(-3px)}
  9%{opacity:.15;transform:translateX(2px)}
  14%{opacity:.85;transform:translateX(-1px)}
  20%{opacity:.2;transform:translateX(3px)}
  27%{opacity:.75;transform:translateX(0)}
  36%{opacity:.18}
  44%{opacity:0}
}

/* ---------- R7. 结尾帘幕：布面折光 + 帘杆 + 帷幔 ---------- */
.exit{background:#f5f5f0!important}
/* 折子用两组互质的周期叠出来，间距不重复，才不像印刷条纹 */
.exit-curtain{
  background-color:#ecebe3!important;
  background-image:
    url('assets/textures/paper-grain.svg'),
    repeating-linear-gradient(90deg,
      #c8c5b8 0 3px,#f0eee5 3px 25px,#fdfcf7 25px 49px,#dcd8cb 49px 76px),
    repeating-linear-gradient(90deg,
      #ffffff22 0 43px,#00000016 43px 101px);
  background-size:420px 420px,131px 100%,199px 100%!important;
  background-blend-mode:multiply,normal,overlay;
  border:0!important;
  box-shadow:inset 0 -70px 90px #17171526,inset 0 40px 60px #17171514;
  transition:transform 2.4s cubic-bezier(.5,.04,.2,1) .4s,filter 1.2s!important;
}
.exit-curtain:before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#17171538 0%,#17171500 14%,#ffffff70 46%,#17171510 76%,#17171540 100%);
}
/* 两片布的中缝：一侧的影子向内收，不是画一条硬线 */
.exit-curtain:after{
  content:'';position:absolute;top:0;bottom:0;width:56px;pointer-events:none;
}
.exit-curtain.left:after{right:-1px;background:linear-gradient(270deg,#1717155e 0%,#1717151f 46%,#17171500 100%)}
.exit-curtain.right:after{left:-1px;background:linear-gradient(90deg,#1717155e 0%,#1717151f 46%,#17171500 100%)}
.exit.in-view .left{transform:translateX(-100%) scaleX(.94);transform-origin:left center}
.exit.in-view .right{transform:translateX(100%) scaleX(.94);transform-origin:right center}

.exit-rod{
  position:absolute;z-index:7;left:-2%;right:-2%;top:-4px;height:13px;
  background:linear-gradient(180deg,#ded9c9 0%,#a9a496 26%,#7d7869 54%,#4f4b41 74%,#c3beae 100%);
  box-shadow:0 4px 14px #17171559,inset 0 -1px 0 #ffffff5c;
}
.exit-rod:after{
  content:'';position:absolute;left:0;right:0;top:-5px;height:7px;
  background:repeating-linear-gradient(90deg,#8a8679 0 2.5px,transparent 2.5px 52px);
  opacity:.5;
}
.exit-valance{
  position:absolute;z-index:6;left:-1%;right:-1%;top:0;height:112px;
  background-color:#e9e6db;
  background-image:
    url('assets/textures/paper-grain.svg'),
    repeating-linear-gradient(90deg,
      #c8c5b8 0 3px,#f0eee5 3px 25px,#fdfcf7 25px 49px,#dcd8cb 49px 76px),
    repeating-linear-gradient(90deg,
      #ffffff22 0 43px,#00000016 43px 101px);
  background-size:420px 420px,131px 100%,199px 100%;
  background-blend-mode:multiply,normal,overlay;
  clip-path:polygon(0 0,100% 0,100% 72%,95% 95%,90% 74%,84% 98%,78% 75%,71% 96%,
    65% 73%,58% 99%,52% 74%,46% 97%,39% 75%,33% 95%,27% 73%,20% 98%,14% 76%,8% 96%,3% 78%,0 90%);
  filter:drop-shadow(0 9px 14px #17171533);
  transform:translateY(-104%);
  transition:transform 1.15s var(--ease-paper) .3s;
}
.exit-valance:before{
  content:'';position:absolute;left:0;right:0;top:0;height:16px;
  background:linear-gradient(180deg,#ffffff8a,#ffffff00);pointer-events:none;
}
.exit.in-view .exit-valance{transform:none}
@media(max-width:600px){
  .exit-valance{height:58px}
  .exit-curtain:after{width:26px}
  /* 窄屏用铺满代替留白，上下不留大片灰底 */
  .exit-image{background-size:cover!important;background-position:54% center!important}
}


/* ------------------------------------------------------------
   10. 减少动态效果：功能与状态完整保留，仅去掉运动
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .script-sheet,.script-sheet .sheet-face,.detail-card,.detail-card.animate,
  .screening-stage,.screening-stage.animate,.manuscript,.ms-cover,
  .reader-page,.about-shade,.exit-curtain,.hang,.dossier-sheet li .li-more,
  .screen-cta,.exit-valance,.scene,.darkness,.scene-stack,.warm-cast,.lamp-flare{
    transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0ms!important;
  }
  .scene-stack{opacity:1;filter:none;transform:none}
  .warm-cast,.lamp-flare{opacity:0}
  .intermission-light,.hang.sway,.box-hotspot:first-of-type .hotspot-pull,
  .lamp-beam,.lamp-beam:after,.fault-flash,.fault-slices,.fault-slices span,
  .fault-chroma,.fault-roll,.fault-scan,.fault-scratch,
  .fault-scratch b{animation:none!important}
  .script-sheet.hovered,.script-sheet.pressed,.script-sheet.dragging{--dz:0px;--sc:1}
  .screening-focus span{transform:scale(1)}
  .about.in-view .about-shade{transform:translateY(-101%)}
  .fault-stage{display:none}
}