/* ============================================================
   CARSICK · 安息予你 —— 作品与手迹
   ============================================================ */

:root{
  --ink:#0a0a0c;
  --ink-2:#101013;
  --ink-3:#16161a;
  --ink-4:#1d1d22;
  --ivory:#e8e2d5;
  --ivory-2:#b6afa1;
  --muted:#78726a;
  --gold:#b8975c;
  --gold-2:#d8bd86;
  --gold-dim:rgba(184,151,92,.32);
  --oxblood:#8c3a2e;
  --line:rgba(232,226,213,.12);
  --line-2:rgba(232,226,213,.07);

  /* 衬线（作品之声）：标题、前言、图版说明 —— Spectral + 思源宋体 */
  --serif:"Spectral","Noto Serif SC","Source Han Serif SC","Songti SC",Georgia,"Times New Roman",serif;
  /* 无衬线（机构之声）：标签、编目、导航、数据 —— Inter + 思源黑体 */
  --sans:"Inter","Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SFMono-Regular",Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5vw,88px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
section[id],footer[id]{scroll-margin-top:74px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--serif);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.locked{overflow:hidden}

::selection{background:rgba(184,151,92,.26);color:#fff}

img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* 细滚动条 */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:#2a2a30;border-radius:9px;border:2px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-dim)}

/* ============================================================
   0. 背景层：纸张颗粒 / 暗角 / 底纹
   ============================================================ */
.bg-layer{position:fixed;inset:0;pointer-events:none;z-index:0}

.grain{
  position:fixed;inset:-180%;
  z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grainShift 1.1s steps(4) infinite;
  will-change:transform;
}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-3%,2%,0)}
  50%{transform:translate3d(2%,-3%,0)}
  75%{transform:translate3d(-2%,-2%,0)}
  100%{transform:translate3d(0,0,0)}
}

.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 8%,rgba(184,151,92,.035) 0%,transparent 55%),
    radial-gradient(130% 120% at 50% 50%,transparent 42%,rgba(0,0,0,.62) 100%);
}

/* 极淡的古典底纹（菱形网格 + 十字星） */
.patina{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(0deg,transparent 24px,var(--line-2) 24px,var(--line-2) 25px,transparent 25px),
    linear-gradient(90deg,transparent 24px,var(--line-2) 24px,var(--line-2) 25px,transparent 25px);
  background-size:25px 25px;
  -webkit-mask-image:radial-gradient(100% 70% at 50% 30%,#000 0%,transparent 78%);
  mask-image:radial-gradient(100% 70% at 50% 30%,#000 0%,transparent 78%);
}

/* 顶部金色发丝进度条 */
.progress{
  position:fixed;top:0;left:0;height:1px;z-index:70;
  width:0%;background:linear-gradient(90deg,transparent,var(--gold),var(--gold-2));
  box-shadow:0 0 12px rgba(184,151,92,.5);
  transition:width .1s linear;
}

/* ============================================================
   1. 侧栏（竖排题字 / 段次）
   ============================================================ */
.rail{
  position:fixed;top:0;bottom:0;width:46px;z-index:40;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;mix-blend-mode:normal;
}
.rail-l{left:0;border-right:1px solid var(--line-2)}
.rail-r{right:0;border-left:1px solid var(--line-2)}

.rail-v{
  writing-mode:vertical-rl;font-family:var(--sans);
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
  transition:color .5s var(--ease);
}
.rail-l .rail-v{color:var(--ivory-2)}
.rail-l .rail-v em{font-style:normal;color:var(--gold);letter-spacing:.5em}

.rail-num{
  writing-mode:vertical-rl;font-size:10px;letter-spacing:.34em;
  color:var(--muted);font-family:var(--sans);
}
.rail-num b{color:var(--gold);font-weight:500}

.rail-tick{
  position:absolute;width:1px;background:var(--gold-dim);
  transition:top .5s var(--ease),height .5s var(--ease);
}

@media(max-width:1080px){.rail{display:none}}

/* ============================================================
   2. 顶栏
   ============================================================ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad) 16px calc(var(--pad) + 16px);
  background:linear-gradient(180deg,rgba(10,10,12,.92),rgba(10,10,12,0));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform .6s var(--ease),opacity .4s var(--ease);
}
.topbar.hide{transform:translateY(-102%)}

.brand{display:flex;align-items:center;gap:13px}
.monogram{
  position:relative;width:34px;height:34px;flex:0 0 34px;
  display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--gold-dim);
  font-family:var(--sans);font-size:16px;font-weight:500;color:var(--gold-2);line-height:1;
  padding-bottom:2px;
}
.monogram::after{
  content:"";position:absolute;inset:3px;border-radius:50%;
  border:1px solid rgba(184,151,92,.14);
}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-txt b{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.34em;text-transform:uppercase}
.brand-txt span{font-family:var(--sans);font-size:10px;letter-spacing:.28em;color:var(--muted);text-transform:uppercase}

.nav{display:flex;gap:clamp(14px,2.4vw,38px);align-items:center}
.nav a{
  position:relative;font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ivory-2);padding:6px 0;transition:color .35s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.nav a:hover{color:var(--ivory)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:var(--ivory)}

@media(max-width:720px){.nav{display:none}}

/* ============================================================
   3. 通用排版零件
   ============================================================ */
.rule{
  display:flex;align-items:center;gap:14px;
  color:var(--gold-dim);
}
.rule i{flex:1 1 auto;height:1px;background:currentColor;display:block}
.rule b{
  width:5px;height:5px;flex:0 0 5px;background:currentColor;
  transform:rotate(45deg);opacity:.9;
}
.rule.wide{max-width:340px}
.rule.center{margin:0 auto}

.eyebrow{
  font-family:var(--sans);font-size:10px;letter-spacing:.5em;text-transform:uppercase;
  color:var(--muted);
}
.eyebrow b{color:var(--gold);font-weight:400}

.sec-head{position:relative;padding:0 var(--pad);margin:0 auto;max-width:1560px}
.sec-num{
  font-size:clamp(60px,11vw,150px);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(232,226,213,.09);
  position:absolute;right:var(--pad);top:-.18em;
  pointer-events:none;user-select:none;letter-spacing:.02em;
}
.sec-title{
  font-size:clamp(30px,5.2vw,62px);font-weight:400;line-height:1.06;
  margin:0;letter-spacing:.02em;
}
.sec-title em{font-style:italic;color:var(--gold-2)}
.sec-lead{
  max-width:60ch;color:var(--ivory-2);font-size:15.5px;line-height:1.95;
  margin:22px 0 0;font-weight:400;
}

/* 滚动显现 */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}

/* ============================================================
   4. 首屏
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  padding:120px var(--pad) 96px;overflow:hidden;
}
.hero-art{
  position:absolute;inset:-6%;z-index:0;
  will-change:transform;
}
.hero-art img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) contrast(1.06) brightness(.42) saturate(.82);
  transform:scale(1.06);
}
.hero-art::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 70% at 50% 42%,rgba(10,10,12,.22) 0%,rgba(10,10,12,.86) 72%,var(--ink) 100%),
    linear-gradient(180deg,rgba(10,10,12,.9),transparent 34%,rgba(10,10,12,.96));
}
.hero-inner{position:relative;z-index:2;text-align:center;max-width:1000px}

.hero-mark{
  font-family:var(--sans);font-size:11px;letter-spacing:.62em;text-transform:uppercase;color:var(--gold);
  opacity:0;animation:fadeUp 1.4s var(--ease-out) .2s forwards;
}
.hero-title{
  font-size:clamp(46px,12.5vw,168px);font-weight:400;line-height:.94;
  margin:20px 0 0;letter-spacing:.06em;
  opacity:0;animation:titleIn 1.9s var(--ease-out) .35s forwards;
}
.hero-title .ltr{display:inline-block;will-change:transform,opacity}
.hero-latin{
  margin:26px 0 0;font-size:clamp(11px,1.5vw,15px);font-style:italic;
  letter-spacing:.2em;color:var(--ivory-2);
  opacity:0;animation:fadeUp 1.5s var(--ease-out) 1.05s forwards;
}
.hero-rule{margin:34px auto 0;max-width:420px;opacity:0;animation:fadeUp 1.4s var(--ease-out) 1.3s forwards}
.hero-sub{
  margin:26px 0 0;font-family:var(--sans);font-size:clamp(12px,1.4vw,13.5px);letter-spacing:.34em;
  text-transform:uppercase;color:var(--muted);
  opacity:0;animation:fadeUp 1.5s var(--ease-out) 1.5s forwards;
}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes titleIn{
  from{opacity:0;transform:translateY(30px) scale(1.04);filter:blur(9px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

.hero-scroll{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--sans);font-size:9.5px;letter-spacing:.44em;text-transform:uppercase;color:var(--muted);
  opacity:0;animation:fadeUp 1.4s var(--ease-out) 1.9s forwards;
}
.hero-scroll i{display:block;width:1px;height:52px;background:linear-gradient(180deg,var(--gold),transparent);position:relative;overflow:hidden}
.hero-scroll i::after{
  content:"";position:absolute;top:-52px;left:0;width:1px;height:52px;
  background:linear-gradient(180deg,transparent,var(--gold-2));
  animation:dropLine 2.4s var(--ease) infinite;
}
@keyframes dropLine{0%{transform:translateY(0)}60%,100%{transform:translateY(104px)}}

/* ============================================================
   5. 饰带（横向流动文字）
   ============================================================ */
.frieze{
  position:relative;z-index:2;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:15px 0;overflow:hidden;
  background:linear-gradient(180deg,rgba(22,22,26,.5),rgba(10,10,12,.2));
}
.frieze-track{display:flex;width:max-content;animation:frieze 46s linear infinite}
.frieze:hover .frieze-track{animation-play-state:paused}
.frieze-track span{
  display:flex;align-items:center;gap:26px;padding-right:26px;
  font-family:var(--sans);font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--ivory-2);
  white-space:nowrap;
}
.frieze-track span i{
  font-style:normal;color:var(--gold);font-size:9px;
}
@keyframes frieze{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   6. 前言
   ============================================================ */
.preface{position:relative;z-index:2;padding:clamp(80px,11vw,150px) 0 clamp(60px,8vw,110px)}
.preface-grid{
  max-width:1560px;margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,6vw,90px);align-items:start;
}
@media(max-width:900px){.preface-grid{grid-template-columns:1fr;gap:44px}}

.preface-body{color:var(--ivory-2);font-size:clamp(16px,1.3vw,19px);font-weight:400;line-height:1.85}
.preface-body p{margin:0}
.preface-body p:first-child::first-letter{
  float:left;font-size:3.9em;line-height:.78;padding:.06em .14em 0 0;
  color:var(--gold-2);font-weight:400;
}

.stats{border-top:1px solid var(--line)}
.stat{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--line-2);
}
.stat-k{font-family:var(--sans);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.stat-v{font-family:var(--sans);font-size:clamp(26px,3.4vw,44px);font-weight:400;line-height:1;color:var(--ivory);font-variant-numeric:lining-nums tabular-nums}
.stat-v sup{font-family:var(--sans);font-size:.42em;color:var(--gold);vertical-align:super;margin-left:.18em;letter-spacing:.1em}

.pull{
  margin:40px 0 0;padding-left:20px;border-left:1px solid var(--gold-dim);
  font-style:italic;font-size:16px;color:var(--ivory);line-height:1.95;
}
.pull cite{display:block;margin-top:12px;font-family:var(--sans);font-style:normal;font-size:10.5px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}

/* ============================================================
   7. 作品长廊
   ============================================================ */
.gallery{position:relative;z-index:2;padding:clamp(30px,5vw,70px) 0 0}

.filters{
  max-width:1560px;margin:38px auto 0;padding:0 var(--pad);
  display:flex;flex-wrap:wrap;gap:6px 4px;align-items:center;
}
.filters .lab{font-family:var(--sans);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin-right:16px}
.chip{
  position:relative;font-family:var(--sans);padding:7px 15px;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);
  border:1px solid transparent;transition:color .35s var(--ease),border-color .35s var(--ease);
}
.chip:hover{color:var(--ivory-2)}
.chip.on{color:var(--ivory);border-color:var(--gold-dim)}
.chip.on::before{
  content:"";position:absolute;left:5px;top:50%;width:3px;height:3px;
  transform:translateY(-50%) rotate(45deg);background:var(--gold);
}

.chapter{max-width:1560px;margin:clamp(56px,8vw,104px) auto 0;padding:0 var(--pad)}
.chapter-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px}
.chapter-head h3{
  margin:0;font-size:clamp(20px,2.6vw,30px);font-weight:400;letter-spacing:.06em;
}
.chapter-head h3 i{font-style:italic;color:var(--gold);margin-right:.5em;font-size:.78em}
.chapter-head span{font-family:var(--sans);font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

.plates{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(142px,14vw,215px),1fr));
  gap:clamp(12px,1.5vw,26px);
  grid-auto-rows:6px;
}
.plates.hidden,.chapter.hidden{display:none}

.plate{
  position:relative;cursor:pointer;
  grid-row-end:span 20;
  opacity:0;transform:translateY(24px);
  transition:opacity .95s var(--ease-out),transform .95s var(--ease-out);
}
.plate.in{opacity:1;transform:none}
.plate.big{grid-column:span 2}

.plate-frame{
  position:relative;overflow:hidden;
  background:var(--ink-3);
  border:1px solid var(--line-2);
  transition:border-color .5s var(--ease),box-shadow .6s var(--ease);
}
.plate-frame img{
  width:100%;height:auto;display:block;
  transition:transform 1.1s var(--ease-out),filter .7s var(--ease);
  filter:saturate(.96);
}
.plate-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 46%,rgba(8,8,10,.78));
  opacity:0;transition:opacity .55s var(--ease);
}
/* 金色内框 */
.plate-hair{
  position:absolute;inset:7px;pointer-events:none;border:1px solid var(--gold);
  opacity:0;transform:scale(1.03);
  transition:opacity .5s var(--ease),transform .7s var(--ease-out);
  z-index:3;
}
.plate:hover .plate-frame{border-color:var(--gold-dim);box-shadow:0 22px 60px -26px rgba(0,0,0,.95)}
.plate:hover .plate-frame img{transform:scale(1.055);filter:saturate(1.02) contrast(1.03)}
.plate:hover .plate-frame::after{opacity:1}
.plate:hover .plate-hair{opacity:.85;transform:none}

.plate-meta{
  position:absolute;left:0;right:0;bottom:0;z-index:4;padding:14px 15px 12px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  opacity:0;transform:translateY(9px);
  transition:opacity .5s var(--ease),transform .55s var(--ease-out);
}
.plate:hover .plate-meta{opacity:1;transform:none}
.plate-meta b{font-size:11.5px;font-weight:500;letter-spacing:.14em;color:var(--ivory)}
.plate-meta span{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--gold-2);opacity:.8}

/* 常显的编号标 */
.plate-no{
  position:absolute;top:8px;left:8px;z-index:4;
  font-size:9px;letter-spacing:.18em;font-family:var(--mono);
  color:rgba(240,236,226,.9);background:rgba(8,8,10,.55);
  padding:2px 6px 2px 5px;backdrop-filter:blur(2px);
  transition:opacity .4s var(--ease),color .4s var(--ease),background .4s var(--ease);
}
.plate-no::before{
  content:"";display:inline-block;width:8px;height:1px;background:currentColor;
  vertical-align:middle;margin-right:5px;opacity:.7;
}
.plate:hover .plate-no{color:var(--ink);background:var(--gold-2)}

/* 有过程影像的角标 */
.plate-vid{
  position:absolute;top:9px;right:9px;z-index:4;
  display:flex;align-items:center;gap:5px;
  font-size:8.5px;letter-spacing:.2em;font-family:var(--mono);
  color:var(--ink);background:var(--gold-2);padding:2px 6px 2px 5px;
  opacity:.86;transition:opacity .4s var(--ease),transform .45s var(--ease);
}
.plate-vid svg{width:7px;height:7px;fill:currentColor}
.plate:hover .plate-vid{opacity:1;transform:translateY(-1px)}

/* 线稿类作品加浅底衬托 */
.plate.line .plate-frame{background:#e7e3da}
.plate.line .plate-frame::after{background:linear-gradient(180deg,transparent 52%,rgba(8,8,10,.7))}
.plate.line .plate-meta b{color:var(--ivory)}

/* 空态 */
.empty{padding:60px 0;text-align:center;color:var(--muted);font-style:italic}

/* ============================================================
   8. 过程影像
   ============================================================ */
.process{position:relative;z-index:2;padding:clamp(90px,12vw,168px) 0 clamp(50px,7vw,90px)}
.process-list{max-width:1560px;margin:clamp(46px,6vw,84px) auto 0;padding:0 var(--pad);display:flex;flex-direction:column;gap:2px}

.pitem{
  display:grid;grid-template-columns:1.32fr 1fr;gap:clamp(20px,3.6vw,64px);align-items:center;
  padding:clamp(24px,3.4vw,50px) 0;border-top:1px solid var(--line);
  position:relative;
}
.pitem:last-child{border-bottom:1px solid var(--line)}
.pitem::before{
  content:"";position:absolute;left:calc(var(--pad) * -.6);right:calc(var(--pad) * -.6);top:0;bottom:0;
  background:radial-gradient(60% 100% at 22% 50%,rgba(184,151,92,.055),transparent 72%);
  opacity:0;transition:opacity .7s var(--ease);pointer-events:none;
}
.pitem:hover::before{opacity:1}
.pitem:nth-child(even){grid-template-columns:1fr 1.32fr}
.pitem:nth-child(even) .pitem-media{order:2}
.pitem:nth-child(even) .pitem-info{order:1}
@media(max-width:860px){
  .pitem,.pitem:nth-child(even){grid-template-columns:1fr}
  .pitem:nth-child(even) .pitem-media,.pitem:nth-child(even) .pitem-info{order:0}
}

.pitem-media{position:relative;cursor:pointer;overflow:hidden;background:var(--ink-3);border:1px solid var(--line)}
.pitem-media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.2s var(--ease-out),filter .7s var(--ease);filter:grayscale(.28) brightness(.82)}
.pitem-media::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(60% 60% at 50% 50%,rgba(10,10,12,.06),rgba(10,10,12,.52));
  transition:opacity .6s var(--ease);
}
.pitem:hover .pitem-media img{transform:scale(1.045);filter:grayscale(.05) brightness(.94)}
.pitem:hover .pitem-media::before{opacity:.42}

.play{
  position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;
  display:grid;place-items:center;border:1px solid rgba(232,226,213,.4);
  background:rgba(10,10,12,.28);backdrop-filter:blur(3px);
  transition:transform .55s var(--ease-out),border-color .5s var(--ease),background .5s var(--ease);
}
.play svg{width:15px;height:17px;fill:var(--ivory);margin-left:3px}
.play::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(184,151,92,.5);opacity:0;
  animation:none;
}
.pitem:hover .play{transform:translate(-50%,-50%) scale(1.12);border-color:var(--gold-2);background:rgba(10,10,12,.5)}
.pitem:hover .play::after{animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{
  0%{opacity:.85;transform:scale(1)}
  100%{opacity:0;transform:scale(1.75)}
}

.pitem-dur{
  position:absolute;right:11px;bottom:11px;z-index:5;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ivory);
  background:rgba(10,10,12,.66);padding:3px 7px;border:1px solid var(--line);
}
.pitem-info{padding:6px 0}
.pitem-idx{
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--gold);
  display:flex;align-items:center;gap:12px;margin-bottom:16px;
}
.pitem-idx::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px}
.pitem-info h3{margin:0;font-size:clamp(21px,2.7vw,33px);font-weight:400;letter-spacing:.04em;line-height:1.2}
.pitem-info h3 em{font-style:italic;color:var(--gold-2)}
.pitem-info p{margin:14px 0 0;color:var(--ivory-2);font-size:14.5px;font-weight:400;line-height:1.9;max-width:48ch}
.pitem-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tag{
  font-family:var(--sans);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);padding:4px 10px;
}
.tag.gold{color:var(--gold-2);border-color:var(--gold-dim)}

.pitem-link{
  margin-top:22px;display:inline-flex;align-items:center;gap:11px;
  font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ivory);
  border-bottom:1px solid var(--gold-dim);padding-bottom:6px;
  transition:color .4s var(--ease),border-color .4s var(--ease),gap .4s var(--ease);
}
.pitem-link:hover{color:var(--gold-2);border-color:var(--gold);gap:17px}

/* ============================================================
   9. 过程帧（胶片条）
   ============================================================ */
.studies{position:relative;z-index:2;padding:clamp(60px,9vw,130px) 0}
.strip-wrap{max-width:1560px;margin:clamp(40px,5vw,70px) auto 0;padding:0 var(--pad);display:flex;flex-direction:column;gap:clamp(30px,4vw,58px)}

.strip{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:clamp(20px,3vw,52px);align-items:center}
@media(max-width:800px){.strip{grid-template-columns:1fr;gap:20px}}

.strip-head h4{margin:0 0 10px;font-size:19px;font-weight:400;letter-spacing:.08em}
.strip-head p{margin:0;font-size:12.5px;color:var(--muted);font-weight:400;line-height:1.75}
.strip-head .cnt{display:block;margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--gold)}

.film{
  position:relative;display:flex;gap:10px;overflow-x:auto;padding:12px 0 16px;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.film::-webkit-scrollbar{display:none}
.fcell{
  position:relative;flex:0 0 auto;width:clamp(96px,10.5vw,150px);
  border:1px solid var(--line-2);background:var(--ink-3);overflow:hidden;cursor:pointer;
  transition:border-color .45s var(--ease),transform .6s var(--ease-out),opacity .45s var(--ease);
  opacity:.55;
}
.fcell img{width:100%;height:auto;display:block;transition:transform .9s var(--ease-out)}
.fcell::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;
  background:rgba(10,10,12,.3);opacity:1;transition:opacity .45s var(--ease);
}
.fcell.hot{opacity:1;border-color:var(--gold);transform:translateY(-6px)}
.fcell.hot::before{opacity:0}
.fcell:hover{opacity:1;border-color:var(--gold-dim)}
.fcell:hover::before{opacity:0}
.fcell i{
  position:absolute;left:0;bottom:0;z-index:3;font-family:var(--mono);font-style:normal;
  font-size:9px;color:var(--ivory-2);background:rgba(10,10,12,.72);padding:2px 5px;
}
.fcell.hot i{color:var(--gold-2)}

/* ============================================================
   10. 落款
   ============================================================ */
.colophon{
  position:relative;z-index:2;padding:clamp(80px,11vw,150px) var(--pad) 60px;
  text-align:center;border-top:1px solid var(--line);
}
.colo-mark{
  font-size:clamp(30px,5.6vw,66px);font-weight:400;font-style:italic;letter-spacing:.1em;
  margin:0;color:var(--ivory);
}
.colo-seal{
  display:inline-block;margin:30px auto 0;padding:11px 15px;
  border:1px solid rgba(140,58,46,.7);color:#c0654f;
  font-size:12.5px;letter-spacing:.36em;line-height:1.5;
  writing-mode:vertical-rl;text-orientation:upright;
  transition:border-color .6s var(--ease),color .6s var(--ease),background .6s var(--ease);
}
.colo-seal:hover{border-color:#c0654f;color:#e0a08d;background:rgba(140,58,46,.09)}
.colo-rule{margin:36px auto;max-width:300px}
.colo-meta{font-family:var(--sans);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);line-height:2.4}
.colo-meta a{border-bottom:1px solid transparent;transition:border-color .4s var(--ease),color .4s var(--ease)}
.colo-meta a:hover{color:var(--gold-2);border-color:var(--gold-dim)}

.totop{
  margin:44px auto 0;display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--sans);font-size:9.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);
  transition:color .45s var(--ease);
}
.totop i{display:block;width:1px;height:38px;background:linear-gradient(0deg,var(--gold),transparent)}
.totop:hover{color:var(--gold-2)}

/* ============================================================
   11. 灯箱 / 影像弹层
   ============================================================ */
.lb{
  position:fixed;inset:0;z-index:90;display:none;
  background:rgba(6,6,8,.965);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.lb.open{display:block}
.lb-shell{
  position:absolute;inset:0;display:grid;grid-template-columns:1fr minmax(280px,360px);
}
@media(max-width:900px){.lb-shell{grid-template-columns:1fr;grid-template-rows:1fr auto}}

.lb-stagewrap{position:relative;overflow:hidden;min-width:0}

.lb-stage{
  position:relative;height:100%;display:flex;align-items:center;justify-content:center;
  padding:clamp(58px,7vh,90px) clamp(20px,5vw,70px);
}
.lb-img{
  max-width:100%;max-height:100%;object-fit:contain;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.95);
  animation:lbIn .85s var(--ease-out);
}
@keyframes lbIn{from{opacity:0;transform:scale(.965) translateY(14px)}to{opacity:1;transform:none}}

.lb-side{
  border-left:1px solid var(--line);padding:clamp(50px,7vh,86px) clamp(22px,2.6vw,40px) 40px;
  display:flex;flex-direction:column;gap:22px;overflow-y:auto;
  background:linear-gradient(180deg,rgba(16,16,19,.6),rgba(10,10,12,.2));
  animation:lbSide .8s var(--ease-out)
}
@keyframes lbSide{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@media(max-width:900px){
  .lb-side{border-left:0;border-top:1px solid var(--line);max-height:44vh;padding-top:26px}
}

.lb-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--gold)}
.lb-title{margin:0;font-size:clamp(24px,3vw,36px);font-weight:400;letter-spacing:.04em;line-height:1.22}
.lb-title em{font-style:italic;color:var(--gold-2)}
.lb-rows{border-top:1px solid var(--line);margin-top:4px}
.lb-row{
  display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--line-2);font-size:12px;
}
.lb-row dt{font-family:var(--sans);color:var(--muted);letter-spacing:.2em;text-transform:uppercase;font-size:10px}
.lb-row dd{margin:0;color:var(--ivory-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-align:right;word-break:break-all}
.lb-note{color:var(--ivory-2);font-size:14px;font-weight:400;line-height:1.95;font-style:italic}

.lb-close{
  position:absolute;top:20px;right:20px;z-index:12;width:42px;height:42px;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;
  color:var(--ivory-2);background:rgba(10,10,12,.6);
  transition:border-color .45s var(--ease),color .45s var(--ease),transform .5s var(--ease);
}
.lb-close:hover{border-color:var(--gold);color:var(--gold-2);transform:rotate(90deg)}
.lb-close svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.2}

.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:12;
  width:44px;height:72px;display:grid;place-items:center;
  color:var(--ivory-2);border:1px solid var(--line);background:rgba(10,10,12,.4);
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.lb-nav:hover{color:var(--gold-2);border-color:var(--gold-dim);background:rgba(20,20,24,.7)}
.lb-nav svg{width:13px;height:22px;stroke:currentColor;fill:none;stroke-width:1.1}
.lb-prev{left:16px}.lb-next{right:16px}
@media(max-width:900px){.lb-nav{display:none}}

.lb-video{width:100%;max-height:100%;background:#000;box-shadow:0 40px 120px -40px rgba(0,0,0,.95);animation:lbIn .8s var(--ease-out)}
.lb.is-video .lb-nav{display:none}
.lb.is-video .lb-stage{padding:clamp(56px,7vh,88px) clamp(24px,4vw,80px)}
.lb-loading{font-family:var(--sans);color:var(--muted);font-size:11px;letter-spacing:.3em;text-transform:uppercase}

/* ============================================================
   12. 自定光标
   ============================================================ */
.cursor,.cursor-dot{position:fixed;z-index:99;pointer-events:none;top:0;left:0;border-radius:50%}
.cursor{
  width:32px;height:32px;border:1px solid rgba(184,151,92,.6);
  margin:-16px 0 0 -16px;
  transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),
             background .35s var(--ease),border-color .35s var(--ease),opacity .35s var(--ease);
  opacity:0;
}
.cursor-dot{
  width:3px;height:3px;background:var(--gold-2);margin:-1.5px 0 0 -1.5px;
  transition:opacity .3s var(--ease),transform .3s var(--ease);opacity:0;
}
body.hovering .cursor{width:62px;height:62px;margin:-31px 0 0 -31px;background:rgba(184,151,92,.07);border-color:rgba(184,151,92,.85)}
body.hovering .cursor-dot{opacity:0;transform:scale(.4)}
body.hovering-text .cursor{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:transparent;border-color:transparent}
@media(pointer:coarse){.cursor,.cursor-dot{display:none}}
@media(hover:none){.cursor,.cursor-dot{display:none}}

/* ============================================================
   13. 响应式 / 无障碍
   ============================================================ */
@media(max-width:640px){
  :root{--pad:18px}
  .hero{padding-top:104px}
  .plates{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:10px}
  .plate-meta{padding:10px}
  .plate-meta b{font-size:10.5px}
  .play{width:52px;height:52px}
  .hero-scroll{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv,.plate{opacity:1!important;transform:none!important}
  .grain{display:none}
}