/* ============================================================
   第九象限 IX Dimension — 视觉系统
   一种交互语言：就地展开。全站列表项都用同一个动作。
   ============================================================ */

:root{
  /* ground —— 中性偏冷的近黑，作品自己的颜色才是唯一的彩色 */
  --ink:#08080A;
  --ink-2:#0D0D11;
  --ink-3:#131319;
  --line:rgba(236,236,242,.10);
  --line-2:rgba(236,236,242,.20);
  --fg:#ECECF0;
  --fg-2:#9A9AA6;
  --fg-3:#5C5C67;
  --accent:#ECECF0;

  /* 一个字族，三个角色：Semibold 做标题、Regular 做正文、
     小字标签靠字重 + 大字距 + 等宽数字拉开层级，不掺第二款字体。 */
  --sans:"MiSans",-apple-system,"Segoe UI",sans-serif;
  --mono:"MiSans",-apple-system,"Segoe UI",sans-serif;

  /* 8px 基准刻度 */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px; --s7:168px;

  --t-mega:clamp(50px,8.6vw,140px);
  --t-xl:clamp(30px,4.4vw,64px);
  --t-l:clamp(19px,2.1vw,29px);
  --t-m:16.5px;
  --t-s:13.5px;
  --t-xs:10.5px;

  --rail:clamp(52px,6.5vw,108px);
  --edge:clamp(18px,3.4vw,52px);
  --max:1720px;

  --drawer-h:clamp(150px,16vw,208px);   /* 展开区统一高度 */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.62s;
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;background:var(--ink);color:var(--fg);
  font-family:var(--sans);font-size:var(--t-m);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--ink)}

/* ── 通用排版件 ───────────────────────────────────── */
.mono,.rail .no,.rail .vert,.menu a,.back,.item .head .n,.item .head .en,.item .head .kind,
.drawer .facts div,.drawer .go,.sec-head .en,.sec-head .n,.crew .p .r,.detail-hd .en,
.detail-meta span,.chips span,.pager a,.subgrid .mono{
  font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
}
.mono{font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase}
.stats .v,.hero h1,.detail-hd h1,.foot h2,.sec-head h2{font-variant-numeric:tabular-nums}
.dim{color:var(--fg-2)}
.faint{color:var(--fg-3)}
.hr{height:1px;background:var(--line);border:0;margin:0}

/* ── 页面骨架：左侧标尺栏 + 内容区 ─────────────────── */
.shell{max-width:var(--max);margin:0 auto;padding:0 var(--edge)}
.band{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);position:relative;
  scroll-margin-top:76px}   /* 让区块标题不被固定顶栏压住 */
.band::before{content:"";position:absolute;left:calc(var(--rail) - 1px);top:0;bottom:0;width:1px;background:var(--line)}
.rail{position:relative;padding-top:var(--s4)}
.rail .no{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;color:var(--fg-3)}
.rail .vert{
  position:sticky;top:96px;margin-top:var(--s2);
  writing-mode:vertical-rl;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.3em;text-transform:uppercase;color:var(--fg-3);
}
.band > .body{padding:var(--s4) 0 var(--s6) clamp(16px,2.6vw,44px)}

/* ── 顶栏 ─────────────────────────────────────────── */
.top{
  position:fixed;inset:0 0 auto 0;z-index:80;
  /* 不用 backdrop-filter：固定条上的实时模糊会让长页面整段滚动掉帧 */
  background:linear-gradient(var(--ink) 62%,rgba(8,8,10,.86) 88%,rgba(8,8,10,0));
  border-bottom:1px solid transparent;transition:border-color .4s;
}
.top.scrolled{border-bottom-color:var(--line)}
.top-in{max-width:var(--max);margin:0 auto;padding:14px var(--edge);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{width:22px;height:22px;flex:none}
.brand b{font-size:12px;letter-spacing:.2em;font-weight:600}
.brand small{font-size:11px;color:var(--fg-3);letter-spacing:.14em;margin-left:2px}
.menu{display:flex;gap:clamp(10px,1.8vw,26px);align-items:center}
.menu a{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-3);transition:color .3s;white-space:nowrap;
}
.menu a i{font-style:normal;margin-right:6px;opacity:.55}
.menu a:hover,.menu a.on{color:var(--fg)}
.back{display:none;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-2);transition:color .3s}
.back:hover{color:var(--fg)}
body.detail .menu{display:none}
body.detail .back{display:block}

/* ── HERO ─────────────────────────────────────────── */
.hero{
  min-height:100svh;display:grid;align-content:end;
  padding:calc(var(--s7) + 20px) 0 var(--s5);position:relative;
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,80px);align-items:end}
.hero h1{
  margin:0;font-size:var(--t-mega);font-weight:600;line-height:.9;letter-spacing:-.035em;
  text-transform:uppercase;text-wrap:balance;
  /* 固定被光照住的状态：白核在右上，最暗处也只到中灰，不留暗部 */
  background:radial-gradient(780px circle at 66% 28%,
    #FFFFFF,#FFFFFF 11%,#E2E6F0 38%,#B4BACA 66%,#8A90A0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero h1 span{display:block}
.hero .zh-tag{margin:var(--s3) 0 0;font-size:clamp(15px,1.7vw,20px);letter-spacing:.14em;color:var(--fg-2)}
.hero .meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin-top:var(--s4);
  padding-top:var(--s2);border-top:1px solid var(--line)}

/* 首屏右侧：作品接触印相表 */
.sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.sheet a{position:relative;aspect-ratio:1;overflow:hidden;background:var(--ink-2);display:block}
.sheet img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(var(--hero-t,1)) brightness(calc(.62 + .38 * (1 - var(--hero-t,1))));
  transition:filter .2s linear,transform var(--dur) var(--ease)}
.sheet a:hover img,.sheet a:focus-visible img{filter:none;transform:scale(1.06)}
.sheet a::after{content:attr(data-n);position:absolute;left:6px;bottom:4px;
  font-family:var(--mono);font-size:9px;color:var(--fg);opacity:0;transition:opacity .35s}
.sheet a:hover::after{opacity:.85}

/* ── 区块头 ───────────────────────────────────────── */
.sec-head{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;
  padding-bottom:var(--s2);border-bottom:1px solid var(--line-2)}
.sec-head h2{margin:0;font-size:clamp(21px,2.6vw,34px);font-weight:600;letter-spacing:-.01em}
.sec-head .en{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-3)}
.sec-head .n{margin-left:auto;font-family:var(--mono);font-size:var(--t-xs);color:var(--fg-3)}
.sec-note{margin:var(--s2) 0 0;font-size:var(--t-s);line-height:1.85;color:var(--fg-2);max-width:54em}

/* ══ 唯一的交互语言：就地展开 ══════════════════════ */
.list{border-top:1px solid var(--line);margin-top:var(--s4)}
.item{
  position:relative;display:block;border-bottom:1px solid var(--line);
  --accent:var(--fg);
}
.item .head{
  display:grid;grid-template-columns:46px minmax(0,1fr) auto auto;gap:var(--s2);
  align-items:center;padding:clamp(16px,2vw,24px) 0;cursor:pointer;
  transition:padding-left var(--dur) var(--ease);
}
.item .head .n{font-family:var(--mono);font-size:var(--t-xs);color:var(--fg-3);transition:color .35s}
.item .head .zh{font-size:var(--t-l);font-weight:500;letter-spacing:-.005em;transition:color .35s}
.item .head .en{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);transition:color .35s;white-space:nowrap}
.item .head .kind{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;
  color:var(--fg-3);text-align:right;min-width:92px;transition:color .35s}
/* 左侧生长的主色竖条 —— 展开的唯一"彩色"信号 */
.item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:50% 0;transition:transform var(--dur) var(--ease);
}
.item.open::before{transform:scaleY(1)}
.item.open .head{padding-left:var(--s3)}
.item.open .head .zh{color:var(--accent)}
.item.open .head .n,.item.open .head .en,.item.open .head .kind{color:var(--fg-2)}

.item .drawer{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur) var(--ease)}
.item.open .drawer{grid-template-rows:1fr}
.item .drawer > .inner{overflow:hidden;min-height:0}
.drawer .pad{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(20px,3vw,52px);padding:0 0 var(--s4) var(--s3);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s .1s,transform var(--dur) var(--ease) .06s;
}
.item.open .drawer .pad{opacity:1;transform:none}
.drawer .desc{margin:0;font-size:var(--t-s);line-height:1.9;color:var(--fg-2);max-width:34em}
.drawer .facts{display:flex;flex-direction:column;gap:6px;margin-top:var(--s3);padding-top:var(--s2);
  border-top:1px solid var(--line)}
.drawer .facts div{display:flex;gap:var(--s2);font-family:var(--mono);font-size:var(--t-xs);color:var(--fg-3)}
.drawer .facts span:last-child{color:var(--fg-2);font-family:var(--sans);font-size:12px;letter-spacing:0}
.drawer .go{
  display:inline-flex;align-items:center;gap:10px;margin-top:var(--s3);
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:3px;
}
.drawer .go em{font-style:normal;transition:transform .35s var(--ease);display:inline-block}
.drawer .go:hover em{transform:translateX(4px)}
/* 展开高度固定 —— 不论一张图还是三张图，每一条展开后都是同一个高度，
   整栏滚下来节奏才不会忽高忽低。 */
.drawer .strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);align-self:start;
  height:var(--drawer-h)}
.drawer .strip figure{margin:0;position:relative;overflow:hidden;background:var(--ink-2)}
.drawer .strip img{width:100%;height:100%;object-fit:cover}
.drawer .todo{
  align-self:start;border:1px dashed var(--line-2);height:var(--drawer-h);
  display:grid;place-content:center;gap:10px;text-align:center;padding:var(--s3);
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 62%);
}
.drawer .todo b{font-size:13px;font-weight:500;color:var(--fg-2)}
.drawer .swatch{display:flex;justify-content:center;gap:0;margin-top:2px}
.drawer .swatch i{width:22px;height:22px;border:1px solid rgba(255,255,255,.14)}

/* ── 团队区块 ─────────────────────────────────────── */
.creed{margin:0;font-size:clamp(15px,1.6vw,19px);line-height:2;color:#C6C6D0;max-width:40em}
.creed p{margin:0 0 var(--s2)}
.crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-top:0}
.crew .p{background:var(--ink);padding:var(--s3) var(--s2);transition:background .4s}
.crew .p:hover{background:var(--ink-2)}
.crew .p h3{margin:0;font-size:17px;font-weight:600;letter-spacing:.03em}
.crew .p .r{display:block;margin:4px 0 var(--s2);font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.crew .p ul{margin:0;padding:0;list-style:none;font-size:12.5px;line-height:1.9;color:var(--fg-2)}
.deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s2);margin-top:var(--s5)}
.deck a{display:block;border:1px solid var(--line);overflow:hidden;background:var(--ink-2)}
.deck img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:brightness(.8);
  transition:filter .5s,transform .7s var(--ease)}
.deck a:hover img{filter:none;transform:scale(1.03)}

/* ── 数据 ─────────────────────────────────────────── */
.stats-wrap{margin-top:var(--s5)}
.stats-lead{font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:var(--s5)}
.stats .s{background:var(--ink);padding:var(--s3) var(--s2)}
.stats .v{font-size:clamp(28px,4vw,46px);font-weight:600;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.stats .v i{font-style:normal;font-size:.4em;color:var(--fg-3);margin-left:3px}
.stats p{margin:var(--s2) 0 0;font-size:12.5px;color:var(--fg-3)}

.age{margin:var(--s2) 0 0;font-size:11.5px;letter-spacing:.18em}

/* ── 详情页 ───────────────────────────────────────── */
.view{display:block}
.view.rise{animation:rise .5s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* 换页过渡。浏览器支持 View Transition 就用原生交叉淡入，
   不支持的走下面这个手写的淡出淡入，观感基本一致。 */
::view-transition-old(root){animation:vt-out .2s var(--ease) both}
::view-transition-new(root){animation:vt-in .44s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
#stage{transition:opacity .16s linear,transform .16s var(--ease)}
#stage.leaving{opacity:0;transform:translateY(-6px)}

/* 详情页顶上的视频/外链 */
.detail-hd .out{
  display:inline-flex;align-items:center;gap:8px;margin-top:var(--s3);
  font-family:var(--mono);font-size:var(--t-xs);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);
  border:1px solid currentColor;padding:9px 15px;transition:background .35s,color .35s;
}
.detail-hd .out:hover{background:var(--accent);color:var(--ink)}

.detail-hd{padding:calc(var(--s7) - 20px) 0 var(--s4)}
.detail-hd .eyebrow{display:flex;gap:var(--s2);align-items:center;margin-bottom:var(--s3)}
.detail-hd .eyebrow b{width:26px;height:2px;background:var(--accent);display:block}
.detail-hd h1{margin:0;font-size:var(--t-xl);font-weight:600;letter-spacing:-.03em;line-height:1.05;
  text-wrap:balance;max-width:16em}
.detail-hd .en{margin-top:var(--s2);font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.detail-hd .lede{margin:var(--s3) 0 0;font-size:clamp(15px,1.6vw,18px);line-height:1.9;
  color:var(--fg-2);max-width:40em}
.detail-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border-block:1px solid var(--line);margin-top:var(--s4)}
.detail-meta div{background:var(--ink);padding:var(--s2) 0 var(--s2) var(--s2)}
.detail-meta span{display:block;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:6px}
.detail-meta b{font-weight:400;font-size:13.5px;color:var(--fg)}

/* 视频：跟大图同一套框，排在图片最前面 */
.film{margin:0 0 clamp(12px,2vw,28px);border:1px solid var(--line);background:#000;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.55)}
.film video{width:100%;height:auto;display:block}
.film figcaption{font-family:var(--mono);font-size:var(--t-xs);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);padding:10px 14px;border-top:1px solid var(--line)}

/* 成员头像：统一黑白，鼠标移上去才回一点温度 */
.crew .p .face{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:var(--s2);
  filter:grayscale(1) contrast(1.06) brightness(.92);transition:filter .5s var(--ease)}
.crew .p:hover .face{filter:grayscale(1) contrast(1.02) brightness(1.04)}

.plates{display:flex;flex-direction:column;gap:clamp(12px,2vw,28px);padding-bottom:var(--s6)}
.plates figure{margin:0;background:var(--ink-2);border:1px solid var(--line);overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.55)}

/* 手册/版面类：35 页全宽铺下去太长，改两栏。点一下就地撑满，
   跟列表那套"就地展开"是同一个手势，不另开灯箱。 */
.plates.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.3vw,20px)}
.plates.grid figure{cursor:zoom-in;position:relative}
.plates.grid figure::after{
  content:attr(data-p);position:absolute;left:10px;top:8px;
  font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.12em;
  color:rgba(255,255,255,.85);background:rgba(8,8,10,.55);padding:3px 7px;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.plates.grid figure:hover::after{opacity:1}
.plates.grid figure.wide{grid-column:1/-1;cursor:zoom-out}

/* 品牌色板 —— 只有识别系统类项目才出现，是信息不是装饰 */
.palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:var(--s4)}
.palette div{background:var(--ink)}
.palette i{display:block;height:clamp(56px,6vw,86px)}
.palette b{display:block;font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.1em;padding:8px 9px;color:var(--fg-3)}

/* 品牌 slogan：项目自己的一句话，用它的色 */
.detail-hd .slogan{
  margin:var(--s3) 0 0;font-size:clamp(17px,2.1vw,26px);font-weight:600;
  letter-spacing:.08em;color:var(--accent);
}
.plates img{width:100%;height:auto}

.subgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin:var(--s4) 0 var(--s6)}
.subgrid a{background:var(--ink);padding:var(--s3) var(--s2);display:flex;flex-direction:column;
  gap:var(--s2);transition:background .45s;position:relative;overflow:hidden}
.subgrid a::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.subgrid a:hover{background:var(--ink-2)}
.subgrid a:hover::before{transform:scaleX(1)}
.subgrid .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--ink-3);border:1px solid var(--line)}
.subgrid .thumb img{width:100%;height:100%;object-fit:cover;filter:brightness(.85);transition:filter .5s,transform .7s var(--ease)}
.subgrid a:hover .thumb img{filter:none;transform:scale(1.04)}
.subgrid h3{margin:0;font-size:17px;font-weight:600}
.subgrid p{margin:0;font-size:12.5px;line-height:1.8;color:var(--fg-2)}

.pager{display:flex;justify-content:space-between;gap:var(--s3);
  border-top:1px solid var(--line);padding:var(--s4) 0 var(--s6)}
.pager a{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);transition:color .3s}
.pager a:hover{color:var(--fg)}
.pager a b{display:block;font-family:var(--sans);font-size:16px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--fg);margin-top:6px}

/* ── 页脚 ─────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:var(--s6) 0 var(--s4)}
.foot{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-end;justify-content:space-between}
.foot h2{margin:0;font-size:clamp(26px,4.6vw,58px);font-weight:600;letter-spacing:-.035em;
  line-height:.98;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;
  padding:7px 12px;border:1px solid var(--line);color:var(--fg-3)}
.colophon{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);justify-content:space-between;
  margin-top:var(--s6);padding-top:var(--s2);border-top:1px solid var(--line)}

/* ── 图片渐入 ─────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ── 窄屏 ─────────────────────────────────────────── */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .sheet{order:-1;grid-template-columns:repeat(6,1fr)}
  .drawer .pad{grid-template-columns:1fr}
}
@media (max-width:860px){
  /* 顶栏放不下四个中文标签了：只留编号，区块名由左侧标尺栏负责 */
  .menu a span{display:none}
  .menu a i{margin-right:0}
  .menu{gap:14px}
  .brand small{display:none}
}
@media (max-width:720px){
  .plates.grid{grid-template-columns:1fr}
  .band{grid-template-columns:1fr}
  .band::before{display:none}
  .rail{display:flex;gap:var(--s2);align-items:center;padding-top:var(--s3)}
  .rail .vert{writing-mode:horizontal-tb;position:static;margin:0}
  .band > .body{padding-left:0}
  .item .head{grid-template-columns:34px minmax(0,1fr);row-gap:4px}
  .item .head .en{grid-column:2}
  .item .head .kind{display:none}
  .drawer .strip{grid-auto-flow:row}
  .detail-meta{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ══════════════════════════════════════════════════════════
   动效层 —— 一套语言：光、错峰、精密刻度。不做花活。
   ══════════════════════════════════════════════════════════ */

/* ① 载入编排：首屏按顺序起身，不是一起淡入 */
.stagger{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .9s var(--ease)}
.stagger.up{opacity:1;transform:none}
.hero h1 span{opacity:0;transform:translateY(.42em) rotate(.4deg);
  transition:opacity .8s var(--ease),transform 1s var(--ease)}
.hero.lit h1 span{opacity:1;transform:none}
.hero.lit h1 span:nth-child(2){transition-delay:.09s}
.hero.lit h1 span:nth-child(3){transition-delay:.18s}
.sheet a{opacity:0;transform:scale(.9);
  transition:opacity .55s var(--ease),transform .7s var(--ease),filter var(--dur) var(--ease)}
.hero.lit .sheet a{opacity:1;transform:none}
.hero.lit .sheet a:nth-child(1){transition-delay:.30s}
.hero.lit .sheet a:nth-child(2){transition-delay:.36s}
.hero.lit .sheet a:nth-child(3){transition-delay:.42s}
.hero.lit .sheet a:nth-child(4){transition-delay:.36s}
.hero.lit .sheet a:nth-child(5){transition-delay:.42s}
.hero.lit .sheet a:nth-child(6){transition-delay:.48s}
.hero.lit .sheet a:nth-child(7){transition-delay:.42s}
.hero.lit .sheet a:nth-child(8){transition-delay:.48s}
.hero.lit .sheet a:nth-child(9){transition-delay:.54s}

/* ② 左侧标尺栏变成真的标尺：刻度 + 读到哪儿的进度 */
.rail .ruler{position:sticky;top:150px;margin-top:var(--s3);height:180px;width:100%;
  display:block;pointer-events:none}
.rail .ruler i{position:absolute;left:0;width:7px;height:1px;background:var(--line-2);
  transition:width .5s var(--ease),background .5s}
.rail .ruler i.hit{width:15px;background:var(--fg-2)}
.rail .ruler b{position:absolute;left:0;top:0;width:1px;background:var(--fg);
  height:var(--prog,0%);transition:height .18s linear;opacity:.55}

/* ③ 展开时三张图错峰进入 —— 核心交互更有分量 */
.drawer .strip figure{opacity:0;transform:translateY(14px) scale(1.02);
  transition:opacity .55s var(--ease),transform .75s var(--ease)}
.item.open .drawer .strip figure{opacity:1;transform:none}
.item.open .drawer .strip figure:nth-child(2){transition-delay:.07s}
.item.open .drawer .strip figure:nth-child(3){transition-delay:.14s}

/* ④ 大图进场带一点纵深，不是平着淡入 */
.plates figure.reveal img{transform:scale(1.045);transition:transform 1.15s var(--ease)}
.plates figure.reveal.in img{transform:none}

/* ── 光标：一颗键帽 ──────────────────────────────────
   他做的就是键帽，指针本身就是产品；碰到可点的东西它按下去并冒光。 */
body{cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><g stroke='%230A0A0C' stroke-width='1.5' stroke-linejoin='round'><path d='M8 5.5h13.5a3 3 0 0 1 3 3v12.5a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V8.5a3 3 0 0 1 3-3z' fill='%23C7CDDA'/><path d='M9.7 8h10.1a1.5 1.5 0 0 1 1.5 1.5v6.2a1.5 1.5 0 0 1-1.5 1.5H9.7a1.5 1.5 0 0 1-1.5-1.5V9.5A1.5 1.5 0 0 1 9.7 8z' fill='%23FFFFFF' stroke-width='1.1'/></g></svg>") 5 4, auto}
a,button,summary,.item .head,.sheet a,.subgrid a,.deck a,.crew .p,
.go,.out,.plates.grid figure,.menu a,.brand
{cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><g stroke='%230A0A0C' stroke-width='1.5' stroke-linejoin='round'><path d='M8 9h13.5a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3z' fill='%23C7CDDA'/><path d='M9.7 11.4h10.1a1.5 1.5 0 0 1 1.5 1.5v4.4a1.5 1.5 0 0 1-1.5 1.5H9.7a1.5 1.5 0 0 1-1.5-1.5v-4.4a1.5 1.5 0 0 1 1.5-1.5z' fill='%23FFFFFF' stroke-width='1.1'/><path d='M14.8 2.6v3.4M11.9 3.6l1 2.1M17.7 3.6l-1 2.1' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round'/></g></svg>") 5 4, pointer}
@media (pointer:coarse){body,a,button{cursor:auto}}

/* ⑥ 背景光带 —— 银色打底，鼠标当灯照亮，颜色跟着项目主色走 */
@property --bg-accent{syntax:"<color>";inherits:true;initial-value:#ECECF0}
#bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  transition:--bg-accent .4s linear}
#bg .lay{position:absolute;inset:0}
#bg .lay svg{display:block;width:100%;height:100%}
#bg .base{opacity:var(--bg-strength,.36)}
#bg .lit{opacity:0;mix-blend-mode:plus-lighter;transition:opacity .55s;
  -webkit-mask-image:radial-gradient(circle 400px at var(--mx,50%) var(--my,36%),#000 0%,#000 16%,transparent 70%);
          mask-image:radial-gradient(circle 400px at var(--mx,50%) var(--my,36%),#000 0%,#000 16%,transparent 70%)}
#bg.on .lit{opacity:.40}
body.hero-zone #torch{opacity:0}
body.hero-zone #bg.on .lit{opacity:0}
@media (pointer:coarse){#bg .lit{display:none}
  #bg .base{opacity:calc(var(--bg-strength,.36) * .72)}}

/* ⑤ 光标即光源 —— 全站唯一的那点"装" */
#torch{position:fixed;left:0;top:0;width:340px;height:340px;z-index:70;pointer-events:none;
  margin:-170px 0 0 -170px;opacity:0;mix-blend-mode:plus-lighter;
  background:radial-gradient(circle,rgba(150,170,255,.10),rgba(150,170,255,.04) 42%,transparent 68%);
  transition:opacity .5s,transform .1s linear}
#torch.on{opacity:1}
#torch.hot{background:radial-gradient(circle,
  color-mix(in srgb,var(--accent) 22%,transparent),
  color-mix(in srgb,var(--accent) 7%,transparent) 42%,transparent 68%)}
@media (pointer:coarse){#torch{display:none}}

@media (prefers-reduced-motion:reduce){
  #bg .lit{display:none}
  .stagger,.hero h1 span,.sheet a,.drawer .strip figure{opacity:1!important;transform:none!important}
  #torch{display:none}
  .plates figure.reveal img{transform:none!important}
}