/* 个人摄影主页 · 站点样式（由设计稿迁移整理）
   规则：暖白画布、近黑文字、衬线英文 + 黑体中文、克制动效。 */

:root{
  --canvas:#fcfcfa; --ink:#121212; --ink-2:#525252; --ink-3:#a3a3a3; --ink-4:#737373;
  --line-2:rgba(0,0,0,.02); --line-3:rgba(0,0,0,.03); --line-4:rgba(0,0,0,.04);
  --paper:#f5f2ea; --paper-2:#ece7db; --seal-red:#a63f2f; --cover-scrim:rgba(18,16,14,.42);
  --sel-bg:#12121214; --rose-bg:#ffe4e6; --rose-ink:#881337;
  --font-body:"Times New Roman","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
  --font-hand:"Segoe Script","Bradley Hand","Snell Roundhand","Kaiti SC",cursive;
  --radius-sm:2px; --maxw:1280px; --readw:672px; --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--font-body); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
img{display:block;max-width:100%}
::selection{background:var(--sel-bg);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 全局纸张噪点 ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.015 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat:repeat;
}

/* ================= 封面：信封 ================= */
.cover{
  position:fixed;inset:0;z-index:50;overflow:hidden;
  min-height:100svh;min-height:100dvh;
  background:#20242a;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.cover__photo{position:absolute;inset:0;overflow:hidden;background:#2a363d}
.cover__photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.cover__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(18,16,14,.30) 0%, rgba(18,16,14,.10) 30%, rgba(18,16,14,.28) 70%, rgba(18,16,14,.55) 100%);
}
.cover__grain{position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
.cover__label{position:absolute;top:32px;z-index:3;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.cover__label--l{left:32px}
.cover__label--r{right:32px;letter-spacing:.12em;color:rgba(255,255,255,.65)}
.cover__center{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:26px;padding:0 20px;text-align:center}

.envelope{
  position:relative;width:236px;height:158px;padding:0;
  background:transparent;border-radius:4px;
  transition:transform .3s var(--ease);
  perspective:900px;
  outline:none;
}
.envelope:hover{transform:translateY(-4px)}
.envelope:active{transform:translateY(-1px) scale(.99)}
.envelope:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 5px rgba(255,255,255,.35);border-radius:6px;outline:none}
.envelope__body{
  position:absolute;inset:0;background:var(--paper);border-radius:4px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 22px 46px rgba(0,0,0,.34),0 3px 8px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.6);
  overflow:hidden;transform-style:preserve-3d;
}
.envelope__body::after{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 0.4  0 0 0 0 0.33  0 0 0 0 0.24  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
}
.envelope__flap{
  position:absolute;top:0;left:0;width:100%;height:62%;
  background:linear-gradient(180deg,#efeade,#e6e0d2);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;transform:rotateX(0deg);
  transition:transform .4s var(--ease);z-index:4;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.envelope__letter{
  position:absolute;left:12px;right:12px;top:26%;height:60%;
  background:#fffdf8;border:1px solid rgba(0,0,0,.05);border-radius:2px;
  transform:translateY(0);opacity:0;z-index:2;
  box-shadow:0 -2px 8px rgba(0,0,0,.05);
}
.envelope__hand{
  position:absolute;left:0;right:0;bottom:26px;z-index:5;text-align:center;
  font-family:var(--font-hand);font-size:22px;color:var(--seal-red);
  transform:rotate(-4deg);letter-spacing:.02em;
}
.envelope__hint{margin-top:2px;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.envelope.is-opening{transform:translateY(-6px) scale(1.02);pointer-events:none}
.envelope.is-opening .envelope__flap{transform:rotateX(-180deg)}
.envelope.is-opening .envelope__letter{opacity:1;transform:translateY(-28px);transition:transform .34s ease-out .16s,opacity .2s ease .16s}

/* D14/D19：真实信封照片；宽度按断点，短屏按可用高度等比缩小（不小于 180px） */
.envelope{width:min(300px, calc((100vh - 96px) * 563 / 668));width:min(300px, calc((100dvh - 96px) * 563 / 668));
  min-width:180px;height:auto;aspect-ratio:563/668;filter:drop-shadow(0 18px 30px rgba(0,0,0,.34));perspective:none}
@media(max-width:767px){.envelope{width:min(240px, calc((100vh - 96px) * 563 / 668));width:min(240px, calc((100dvh - 96px) * 563 / 668))}}
.envelope__img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;border-radius:2px}
.envelope__text{
  position:absolute;left:9.5%;right:9.5%;top:24.5%;height:38%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18em;
  color:var(--seal-red);font-family:var(--font-hand);text-align:center;
  transform:rotate(-3deg);pointer-events:none;
}
.envelope__text span{font-size:18px;line-height:1.3;letter-spacing:.02em}
.envelope__text span:first-child{font-size:23px}
@media(max-width:767px){.envelope__text span{font-size:14px}.envelope__text span:first-child{font-size:19px}}
.envelope.is-opening .envelope__text{transform:translateY(-22px) rotate(-3deg);opacity:0;transition:transform .34s ease-out .1s,opacity .25s ease .1s}
.envelope__fallback{display:block;width:100%;height:100%;background:var(--paper);border-radius:3px}
.cover__skip{
  position:absolute;right:32px;bottom:16px;z-index:4;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.72);
  border-bottom:1px solid transparent;padding:0 4px;
  min-height:44px;display:inline-flex;align-items:center; /* B3：触控区 44 */
}
.cover__skip:hover,.cover__skip:focus-visible{color:#fff;border-color:rgba(255,255,255,.7)}
.cover.is-leaving{opacity:0;transition:opacity .38s ease-in-out;pointer-events:none}
/* 打开之后封面回到文档流，占满一屏，滚回页首就能再看到开屏。
   z-index 仍高于固定页头，滚回封面时页头不会压住封面上的字。 */
body.cover-docked .cover{
  position:relative;inset:auto;width:100%;
  height:100svh;height:100dvh;
  min-height:100svh;min-height:100dvh;
}

/* JS 不可用时：主站直接可见，封面不阻塞 */
html.no-js .cover{display:none}
html.no-js #site{opacity:1;transform:none}
html.no-js body{overflow:auto}

/* ================= 主站 ================= */
/* B11：与封面淡出 .38s 同步，两段交叉淡化，避免中间露出纸白 */
#site{opacity:0;transition:opacity .38s ease,transform .38s ease;transform:translateY(8px)}
body.opened #site{opacity:1;transform:none}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;background:rgba(252,252,250,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2);
}
.brand{font-size:15px;letter-spacing:.15em;font-weight:400;color:var(--ink);position:relative}
.brand:hover{opacity:.75}
.nav{display:flex;gap:32px;font-size:12px;letter-spacing:.1em;color:var(--ink-3);flex:none}
.nav button{color:inherit;letter-spacing:inherit;transition:color .2s,font-weight .2s;white-space:nowrap;position:relative}
.brand{flex:none}
/* B4：Header 可点元素热区补到 44（不改变 Header 视觉高度） */
.brand::before,.nav button::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;transform:translateY(-50%);height:44px}
.nav button:hover{color:var(--ink);font-weight:700}
.nav button[aria-current="true"]{color:var(--ink);font-weight:700}
@media(max-width:420px){.site-header{padding:16px 20px}.brand{font-size:13px}.nav{gap:14px;font-size:10px;letter-spacing:.05em}}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media(min-width:768px){.site-header{padding:18px 48px}.wrap{padding:0 48px}}
@media(min-width:1024px){.site-header{padding:20px 64px}.wrap{padding:0 64px}}

/* 移动端索引 chips */
.idx-mobile{display:block;position:sticky;top:61px;z-index:30;background:rgba(252,252,250,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2);margin-top:61px}
.idx-mobile__row{display:flex;align-items:center;gap:18px;overflow-x:auto;padding:10px 24px;
  scrollbar-width:none;white-space:nowrap}
.idx-mobile__row::-webkit-scrollbar{display:none}
.idx-mobile__year{font-size:10px;letter-spacing:.2em;color:var(--ink-3);flex:none}
.idx-mobile__item{font-size:12px;letter-spacing:.05em;color:var(--ink-3);flex:none;padding:0 2px;border-bottom:1px solid transparent;min-height:44px;min-width:44px;justify-content:center;display:inline-flex;align-items:center} /* B4 */
.idx-mobile__item.is-active{color:var(--ink);font-weight:700;border-color:var(--ink)}

/* 桌面布局 */
.gallery{padding-top:64px;padding-bottom:96px}
.grid{display:grid;grid-template-columns:1fr;gap:32px;min-width:0}
.grid > *{min-width:0}
@media(min-width:768px){.gallery{padding-top:80px;padding-bottom:120px}.grid{grid-template-columns:repeat(12,1fr);gap:48px}}
@media(min-width:1024px){.grid{gap:64px}}

.idx-desktop{display:none}
@media(min-width:768px){
  .idx-desktop{display:block;grid-column:span 3;position:sticky;top:96px;align-self:start;
    padding-right:32px;border-right:1px solid var(--line-3)}
  .idx-mobile{display:none}
}
.idx-year{font-size:11px;letter-spacing:.2em;color:var(--ink-3);margin:0 0 10px}
.idx-group + .idx-group{margin-top:28px}
.idx-item{display:flex;align-items:center;width:100%;text-align:left;font-size:12px;letter-spacing:.05em;color:var(--ink-3);
  padding:6px 0 6px 12px;min-height:44px;transition:color .2s;position:relative} /* B4 */
.idx-item:hover{color:var(--ink)}
.idx-item.is-active{color:var(--ink);font-weight:700}
.idx-item.is-active::before{content:"•";position:absolute;left:0}
.idx-item.is-active::after{content:"";position:absolute;left:-2px;top:4px;bottom:4px;width:2px;background:var(--ink)}
.idx-about{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-3)}

.content{grid-column:1/-1;min-width:0}
@media(min-width:768px){.content{grid-column:span 9}}

.project{padding:48px 0 72px;border-bottom:1px solid var(--line-3);scroll-margin-top:96px}
.project:last-child{border-bottom:none}
@media(min-width:768px){.project{padding:64px 0 112px}}
@media(min-width:1024px){.project{padding:72px 0 140px}}
.project__title{margin:0;font-size:20px;font-weight:500;letter-spacing:.02em;color:var(--ink);line-height:1.3}
@media(min-width:768px){.project__title{font-size:24px}}
.project__title:focus,.project__title:focus-visible{outline:none}
.project__en{margin:0 0 10px;font-size:12px;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.project__meta{margin:12px 0 0;font-size:10px;letter-spacing:.1em;color:var(--ink-3)}
.project__intro{margin:14px 0 0;max-width:var(--readw);font-size:13px;line-height:1.65;font-weight:300;color:var(--ink-2)}
@media(min-width:768px){.project__intro{font-size:14px}}
.project__intro p{margin:0}
.project__intro p.intro-gap{height:.9em}
/* B7：超长无空格英文不撑宽页面 */
.project__title,.project__en,.project__meta,.project__intro,.about__name,.about__bio{overflow-wrap:anywhere;word-break:break-word}

.track-wrap{position:relative;margin-top:34px;padding-top:20px;border-top:1px solid var(--line-2);min-width:0}
.track{display:flex;gap:24px;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x mandatory;
  scrollbar-width:none;align-items:center;scroll-behavior:smooth;min-width:0;max-width:100%}
.track::-webkit-scrollbar{display:none}
@media(min-width:768px){.track{gap:32px}}
.card{position:relative;flex:none;scroll-snap-align:start;border:1px solid var(--line-3);
  border-radius:var(--radius-sm);background:rgba(245,245,245,.3);overflow:hidden;padding:0;
  transition:transform .5s var(--ease);cursor:zoom-in;max-width:calc(100vw - 48px)}
.card:hover{transform:translateY(-2px)}
.card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.card picture{display:block;position:absolute;inset:0}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .75s ease-out,filter .75s ease-out;filter:grayscale(8%)}
.card:hover img{transform:scale(1.03);filter:grayscale(0)}
.card--portrait{width:270px;aspect-ratio:3/4}
.card--landscape{width:480px;aspect-ratio:4/3}
.card--square{width:360px;aspect-ratio:1/1}
@media(min-width:768px){
  .card--portrait{width:338px}
  .card--landscape{width:600px}
  .card--square{width:450px}
}

.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.86);
  border:1px solid var(--line-3);color:var(--ink);font-size:15px;line-height:1;transition:all .25s;
  opacity:0;pointer-events:none}
/* 视觉 32×32，点击热区扩到 44×44（R6） */
.arrow::before{content:"";position:absolute;inset:-6px;border-radius:50%}
.track-wrap:hover .arrow{opacity:1;pointer-events:auto}
.arrow:hover{background:var(--ink);color:#fff}
.arrow.prev{left:-6px}
.arrow.next{right:-6px}
.arrow:disabled{opacity:0!important;pointer-events:none} /* B6：到两端禁用 */
@media(max-width:767px){
  .arrow{opacity:1;pointer-events:auto;width:32px;height:32px}
  .arrow.prev{left:-6px}.arrow.next{right:-6px}
}

/* 关于 */
.about{padding-top:96px;padding-bottom:96px;border-top:1px solid var(--line-3);scroll-margin-top:96px}
.about__grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.about__grid{grid-template-columns:1fr 1fr;gap:64px}}
.about__name{font-family:var(--font-body);font-size:40px;font-weight:400;letter-spacing:.02em;margin:0}
.about__name small{display:block;font-size:12px;letter-spacing:.2em;color:var(--ink-3);margin-top:8px;text-transform:uppercase}
.about__bio{font-size:14px;line-height:1.7;color:var(--ink-2);font-weight:300;border-left:1px solid var(--line-3);padding-left:24px}
.about__bio p{margin:0 0 1em}
.about__equip{font-size:11px;letter-spacing:.08em;color:var(--ink-4);margin-top:16px;line-height:1.9}

/* 页脚 */
.footer{border-top:1px solid var(--line-4);padding:64px 0 40px}
.footer__grid{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:768px){.footer__grid{grid-template-columns:1fr 1fr;gap:48px}}
.footer__h{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.footer__list{list-style:none;margin:0;padding:0;font-size:11px;letter-spacing:.05em;color:var(--ink-4);line-height:2}
.footer__list button{color:inherit;font-size:11px;letter-spacing:.05em;min-height:44px;display:inline-flex;align-items:center} /* B4 */
.footer__list button:hover{color:var(--ink)}
.footer__list .is-empty{color:var(--ink-3)}
.footer__bottom{display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:space-between;
  margin-top:56px;padding-top:24px;border-top:1px solid var(--line-4);
  font-size:10px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
@media(min-width:640px){.footer__bottom{flex-direction:row}}
.footer__totop{color:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;min-height:44px;display:inline-flex;align-items:center} /* B4 */

/* ================= 灯箱 ================= */
/* D15/D16/D17：相纸装裱 + 四栏信息 */
/* D32（v1.14.2）：灯箱底恢复 v1.12 原样（半透明+blur）；右侧阴影单独排查，不动这项 */
.lightbox{position:fixed;inset:0;z-index:70;background:rgba(252,252,250,.97);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;flex-direction:column;padding:10px 14px 14px;opacity:0;visibility:hidden;
  /* D36⑦：遮罩淡入 0.15s */
  transition:opacity .15s ease,visibility 0s linear .15s}
@media(min-width:768px){.lightbox{padding:14px 40px 40px}}
.lightbox.is-open{opacity:1;visibility:visible;transition:opacity .15s ease,visibility 0s}
/* D23：顶栏上移压窄，桌面 ≤56px、手机 ≤48px，省出的高度全部给照片 */
.lb__top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}
@media(min-width:768px){.lb__top{min-height:56px}}
.lb__title{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.lb__count{font-size:10px;letter-spacing:.1em;color:var(--ink-3);position:relative} /* D35⑯：relative 锚定绝对定位的加载提示 */
.lb__close{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--ink);transition:background .2s}
.lb__close:hover{background:rgba(0,0,0,.05)}
.lb__stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:0}
/* 白色衬纸（相纸装裱） */
/* 衬纸内边距由 JS 按 LB_GEO 注入（左右/上下可分别配置，D16 待定稿） */
/* D32（v1.14.2）：投影恢复 v1.12 原样（自然下落式，主体在下方） */
.lb__frame{position:relative;background:#fff;padding:0;box-shadow:0 14px 38px rgba(0,0,0,.10);
  display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%;box-sizing:border-box}
/* 黑框紧贴照片；D36④：底色改衬纸白——首次打开大图未就绪时露白，绝不露 #0f0f0f 黑底 */
.lb__img{position:relative;box-sizing:border-box;border:3px solid var(--ink);background:#fcfcfa;
  overflow:hidden;transition:transform .3s ease,opacity .3s ease}
@media(min-width:768px){.lb__img{border-width:4px}}
.lb__img picture{display:block;position:absolute;inset:0}
.lb__img img{width:100%;height:100%;object-fit:contain}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.08);color:var(--ink);font-size:17px;transition:all .2s;z-index:2}
.lb__nav:hover{background:var(--ink);color:#fff}
.lb__nav[hidden]{display:none} /* D20：到端隐藏，且不在 Tab 顺序 */
.lb__nav.prev{left:-56px}
.lb__nav.next{right:-56px}
/* D23 回归修复：黑框按照片收缩，宽度受限档框≈舞台宽，外扩量需按剩余空间收敛，
   避免箭头出视口（(100% - 100vw)/2 + 40px = 框边到视口边的剩余空间取负） */
@media(min-width:768px){
  .lb__nav.prev{left:max(-52px, calc((100% - 100vw) / 2 + 40px))}
  .lb__nav.next{right:max(-52px, calc((100% - 100vw) / 2 + 40px))}
}
/* 手机：箭头移到照片下沿下方 14px、水平居中，不再压照片 */
@media(max-width:767px){
  .lb__stage{padding-bottom:58px}
  .lb__nav{top:auto;bottom:-58px;transform:none}
  .lb__nav.prev{left:calc(50% - 54px);right:auto}
  .lb__nav.next{left:calc(50% + 10px);right:auto}
  /* 只剩一个箭头时居中（D20） */
  .lb__frame:has(.lb__nav.prev[hidden]) .lb__nav.next{left:calc(50% - 22px)}
  .lb__frame:has(.lb__nav.next[hidden]) .lb__nav.prev{left:calc(50% - 22px)}
}
.lb__meta{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:14px;width:100%;
  border-top:1px solid var(--line-4);padding-top:14px}
@media(min-width:768px){.lb__meta{grid-template-columns:repeat(4,1fr);column-gap:0;padding-top:18px}}
.lb__field{min-width:0}
@media(min-width:768px){
  .lb__field{padding:0 24px;border-left:1px solid var(--line-4)}
  .lb__field:first-child{border-left:none;padding-left:0}
}
.lb__label{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
@media(min-width:768px){.lb__label{font-size:10px}}
.lb__field b{display:block;font-weight:500;font-size:12px;letter-spacing:.03em;color:#262626;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* D35⑳：值单行固定，区域宽高不随内容变 */
@media(min-width:768px){.lb__field b{font-size:13px}}

/* ================= D22/D29/D30 缩放工具条 ================= */
/* D33：灯箱打开时 #site 已置 inert（openLightbox/closeLightbox 切换），这里让它连同背后内容一起隐藏，
   否则主内容从 .97 半透明灯箱底透出（qian 截到的右侧灰块就是首页卡片）。关闭恢复，滚动位置不变。 */
#site[inert]{visibility:hidden}
/* B11：封面淡出与主页淡入交叉进行时，主页（仍 inert）要可见，否则中间一帧露纸白 */
body.cover-fading #site[inert]{visibility:visible}
/* D36⑦：灯箱淡入期间主页保持可见，淡入结束（body.lb-fading 摘掉）后再隐藏，
   避免「主页已隐藏、照片还没淡入」的整屏纸白帧 */
body.lb-fading #site[inert]{visibility:visible}
/* D29：平时隐藏；点照片放大后才出现。D30②（UI v1.11）：右下角竖排，距右、底各 24px（手机加安全区），自上而下 放大/恢复/缩小 */
/* D30②（v1.14.2）：横排，挂在舞台右下、距边各 24px——照片没铺满时在照片/黑框外，铺满（3×）时允许浮在照片上 */
.zoom-toolbar{position:absolute;right:24px;bottom:24px;
  z-index:30;display:flex;gap:4px;padding:6px;border-radius:999px;
  background:rgba(255,255,255,.40);border:1px solid rgba(255,255,255,.48);
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  box-shadow:0 10px 30px rgba(20,20,20,.14);
  opacity:0;pointer-events:none;visibility:hidden; /* D30：visibility 一并隐藏，1× 时不占 Tab 序（LB-51） */
  transition:opacity .2s ease,visibility 0s linear .2s,background .25s,border-color .25s,box-shadow .25s}
.lightbox.is-zoomed .zoom-toolbar{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .2s ease,visibility 0s}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.zoom-toolbar{background:rgba(252,252,250,.88)}}
.zt-btn{position:relative;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#1B1B1B;transition:background .2s,opacity .2s,color .25s;cursor:pointer}
.zt-btn:hover{background:rgba(0,0,0,.06)}
.zt-btn:focus-visible{outline:2px solid #121212;outline-offset:2px}
.zt-btn[disabled]{opacity:.32;cursor:default;pointer-events:none}
.zt-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.zt-btn::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);
  padding:5px 9px;border-radius:3px;background:rgba(18,18,18,.86);color:#fff;font-size:11px;letter-spacing:.04em;white-space:nowrap;
  opacity:0;visibility:hidden;transition:all .18s ease;pointer-events:none}
.zt-btn:hover::after,.zt-btn:focus-visible::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.lb__img{cursor:zoom-in}

/* 放大悬浮态（D24：浅色灯箱底 + 照片淡投影，不再铺深色遮罩） */
.lightbox.is-zoomed .lb__stage{overflow:hidden;padding-bottom:0}
.lightbox.is-zoomed .lb__frame{padding:0!important;background:transparent!important;box-shadow:none!important;
  max-width:none;max-height:none;overflow:visible}
.lightbox.is-zoomed .lb__img{border:0!important;background:transparent;overflow:visible;cursor:grab;
  box-shadow:0 26px 70px rgba(30,25,18,.26),0 8px 22px rgba(30,25,18,.14);transition:transform .25s ease}
.lightbox.is-zoomed.is-dragging .lb__img{cursor:grabbing;transition:none}
.lightbox.is-zoomed .lb__title{visibility:hidden}
.lightbox.is-zoomed .lb__top{position:relative}
.lightbox.is-zoomed .lb__count{position:absolute;left:50%;transform:translateX(-50%);color:var(--ink-3)}
.lightbox.is-zoomed .lb__close{color:var(--ink);background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%)}
.lightbox.is-zoomed .lb__close:hover{background:rgba(255,255,255,.75)}
.lightbox.is-zoomed .lb__meta,.lightbox.is-zoomed .lb__nav{display:none}

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

/* ---------- D35（v1.16.2→v1.16.4）灯箱切图：C 溶解 400ms / 无动画（?tr=none） ----------
   旧照片在新图 decode 完成前一直显示；切换时旧照片以残影叠在新图上方（残影在黑框内层，
   随外框一起缩放）；衬纸 padding 与照片盒尺寸同一时长同轨过渡（⑭，同比例零位移 ⑮）；
   页码/四栏不用残影：值 120ms 淡出→换字→200ms 淡入，新旧文字绝不同帧（⑱）。 */
.lightbox{--lb-dissolve:400ms;--ghost-fade:120ms}
.lb__ghost{z-index:6;pointer-events:none;opacity:1}
.lightbox.is-dissolve .lb__ghost{animation:lb-ghost-out var(--ghost-fade,260ms) ease-out forwards}
@keyframes lb-ghost-out{0%{opacity:1}12%{opacity:.72}28%{opacity:.38}45%{opacity:.16}62%{opacity:.04}100%{opacity:0}}
.lightbox.is-dissolve .lb__frame{transition:padding var(--lb-dissolve) ease-in-out}
/* D35⑭：照片盒（含黑框）与衬纸 padding 同一个时长、同一种节奏，外框一次滑到新尺寸，中间不跳 */
.lightbox.is-dissolve .lb__img{transition:width var(--lb-dissolve) ease-in-out,height var(--lb-dissolve) ease-in-out}
/* D35⑯：加载提示绝对定位，出现/消失不占布局、不改舞台高度 */
.lb__loading{font-style:normal;font-size:10px;letter-spacing:.1em;color:var(--ink-3);opacity:.65;
  position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap}
.lb__loading[hidden]{display:none}
@media(prefers-reduced-motion:reduce){
  /* 减少动效：溶解改 150ms（豁免全局 .001ms），衬纸/照片盒尺寸直接切换（R5/D35⑩⑭） */
  .lightbox{--lb-dissolve:150ms}
  .lightbox.is-dissolve .lb__ghost{animation-duration:70ms!important}
  .lightbox.is-dissolve .lb__frame,.lightbox.is-dissolve .lb__img{transition:none!important}
}

/* ================= D38 晾衣架导航（第二页） ================= */
.line-page{
  position:relative;min-height:100svh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(61px + 32px) 24px 96px;gap:24px;
}
.line-page__inner{width:100%;display:flex;flex-direction:column;align-items:center}
.line-desktop .line-page__inner{}
.line-desktop .line-year + .line-year{margin-top:88px}
.line-mobile{display:none}
.line-year{width:100%;display:flex;flex-direction:column;align-items:center}
.line-year--mobile .line-stage + .line-stage{margin-top:32px}
.line-desktop .line-year .line-stage + .line-stage{margin-top:40px}

/* 一条绳：绳（SVG 绝对定位）+ 纸排成一行 */
.line-stage{
  position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:100%;
  --rope-extra:48px;--rope-w:100%;--rope-h:56px;--sag-max:0px;
  padding-top:2px;padding-bottom:var(--sag-max);
}
.line-label{
  position:absolute;left:50%;top:-26px;transform:translateX(calc(var(--row-w,100%) / -2));
  white-space:nowrap;display:flex;align-items:baseline;gap:10px;
  font-size:10px;letter-spacing:.2em;color:var(--ink-3);
}
.line-label b{font-weight:500;font-size:11px;letter-spacing:.22em;color:var(--ink-2)}
.line-label em{font-style:normal;font-size:9px;letter-spacing:.18em;color:var(--ink-3)}
.line-rope{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:var(--rope-w);height:var(--rope-h);overflow:visible;pointer-events:none;
}
.line-rope path{fill:none;stroke:rgba(18,18,18,.30);stroke-width:1.2;stroke-linecap:round}
.line-cards{
  position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-start;max-width:100%;
  gap:clamp(16px,2.4vw,32px);margin-top:2px;
}

/* 一张纸 */
.paper{
  position:relative;display:block;width:var(--paper-w,clamp(160px,14vw,200px));
  transform:translateY(var(--sag,0px));
  transition:transform .3s var(--ease);
  perspective:900px;text-align:left;
}
.paper__clip{
  position:absolute;left:50%;top:-9px;width:9px;height:18px;transform:translateX(-50%);
  background:linear-gradient(180deg,#c9b79a 0%,#a98f6c 55%,#8d7554 100%);
  border-radius:1.5px;box-shadow:0 1px 2px rgba(0,0,0,.18);z-index:3;
}
.paper__inner{
  display:block;background:#fff;padding:7px 7px 9px;border-radius:1px;
  box-shadow:0 8px 18px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.06);
  transform-origin:50% -9px;
  animation-duration:var(--dur,5s);animation-delay:var(--delay,0s);
  animation-iteration-count:infinite;animation-timing-function:ease-in-out;
  animation-fill-mode:both;animation-name:flapA;
  will-change:transform;
}
.paper__img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.paper__img img{width:100%;height:100%;object-fit:cover}
.paper__meta{display:flex;flex-direction:column;gap:2px;padding-top:7px}
.paper__meta b{font-weight:500;font-size:13px;letter-spacing:.02em;color:var(--ink);line-height:1.35}
.paper__meta i{
  font-style:normal;font-size:9px;letter-spacing:.12em;color:var(--ink-3);
  text-transform:uppercase;line-height:1.45;
  white-space:normal;overflow-wrap:anywhere;word-break:break-word;
}
.paper:hover{transform:translateY(calc(var(--sag,0px) - 4px))}
.paper:hover .paper__inner{
  animation-play-state:paused;
  box-shadow:0 14px 30px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.08);
}
@media(prefers-reduced-motion:reduce){
  .paper__inner{animation:none!important}
  .paper,.paper:hover,.paper:focus-visible{transform:translateY(var(--sag,0px))}
}

/* 前后掀动：rotateX 为主、rotateY 为辅，底部外飘时投影变浅变短（只用 transform/box-shadow） */
@keyframes flapA{
  0%,14%{transform:rotateX(0deg) rotateY(0deg);box-shadow:0 8px 18px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.06)}
  28%{transform:rotateX(var(--ax,8deg)) rotateY(var(--ay,3deg));box-shadow:0 16px 30px rgba(0,0,0,.055),0 3px 8px rgba(0,0,0,.04)}
  44%{transform:rotateX(calc(var(--ax,8deg) * -.32)) rotateY(calc(var(--ay,3deg) * -.6));box-shadow:0 5px 12px rgba(0,0,0,.13),0 1px 2px rgba(0,0,0,.08)}
  60%{transform:rotateX(calc(var(--ax,8deg) * .18)) rotateY(calc(var(--ay,3deg) * .4));box-shadow:0 10px 20px rgba(0,0,0,.09)}
  78%,100%{transform:rotateX(0deg) rotateY(0deg);box-shadow:0 8px 18px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.06)}
}
@keyframes flapB{
  0%,10%{transform:rotateX(0deg) rotateY(0deg);box-shadow:0 8px 18px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.06)}
  22%{transform:rotateX(calc(var(--ax,8deg) * .55)) rotateY(calc(var(--ay,3deg) * -.8));box-shadow:0 13px 26px rgba(0,0,0,.07)}
  34%{transform:rotateX(var(--ax,8deg)) rotateY(var(--ay,3deg));box-shadow:0 17px 32px rgba(0,0,0,.05)}
  52%{transform:rotateX(calc(var(--ax,8deg) * -.25)) rotateY(calc(var(--ay,3deg) * .5));box-shadow:0 6px 14px rgba(0,0,0,.12)}
  72%{transform:rotateX(calc(var(--ax,8deg) * .12)) rotateY(0deg);box-shadow:0 9px 18px rgba(0,0,0,.095)}
  88%,100%{transform:rotateX(0deg) rotateY(0deg);box-shadow:0 8px 18px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.06)}
}

/* 底部「作品 ↓」提示 */
.line-down{
  margin-top:8px;font-size:10px;letter-spacing:.22em;color:var(--ink-3);
  padding:12px 20px;transition:color .2s,transform .2s;
}
.line-down:hover{color:var(--ink);transform:translateY(2px)}

/* 手机：<768px 一年拆短绳、不横滑 */
@media(max-width:767px){
  .line-desktop{display:none}
  .line-mobile{display:block;width:100%}
  .line-mobile--2{display:none;width:100%}
  .line-page{min-height:auto;padding:calc(61px + 24px) 16px 56px;justify-content:flex-start}
  .line-page.line-page--single{min-height:100svh;min-height:100dvh;justify-content:center}
  .line-year--mobile + .line-year--mobile{margin-top:80px}
  .line-mobile--2 .paper{width:min(120px,calc((100vw - 48px) / 2))}
  .line-year--mobile .line-stage + .line-stage{margin-top:16px}
  .line-stage{--rope-extra:24px}
  .line-cards{gap:8px}
  .paper{width:min(110px,calc((100vw - 48px) / 3))}
  .paper__img{height:84px;aspect-ratio:auto}
  .paper__meta b{font-size:12px}
  .paper__meta i{font-size:8.5px;letter-spacing:.08em}
  .line-label{top:-22px;font-size:9px;gap:8px}
  .line-label b{font-size:10px}
  .line-label em{font-size:8px}
}
@media(min-width:768px){.line-mobile .paper__inner{animation:none!important}}
@media(max-width:767px){.line-desktop .paper__inner{animation:none!important}}

/* ㊱：<360px 每条最多 2 张，纸宽保持 110–120 不缩 */
@media(max-width:379px){
  .line-mobile{display:none}
  .line-mobile--2{display:block}
}

/* D40⑤/⑦：溶解期间新照片保持完全不透明、不缩放，只让残影淡出；照片盒不跟尺寸过渡 */
.lightbox.is-dissolve .lb__img{transition:none!important}
.lightbox.is-dissolve .lb__img > picture img{opacity:1!important;animation:none!important;transition:none!important}