/* ============================================================
   曦晨六时 · LIGHT BETWEEN WORLDS — Awwwards-grade design system
   ============================================================ */

/* ---------- Fonts ---------- */
/* @font-face 由 assets/css/fonts.css 提供（core / ext 双档 + unicode-range 回退） */

/* 令牌层见 tokens.css（在 main.css 之前引入） */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-sans);
  font-size:var(--fs-body);
  line-height:1.75;
  font-weight:340;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  min-height:100svh;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--accent);color:#120e06}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(236,233,226,.25);border-radius:2px}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

/* ---------- A11y utilities ---------- */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;left:50%;top:-100px;transform:translateX(-50%);
  z-index:calc(var(--z-preloader) + 10);
  padding:.9em 1.6em;background:var(--fg);color:#0c0c0e;border-radius:99px;
  font-family:var(--f-gro);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  transition:top .3s var(--ease-out);
}
.skip-link:focus-visible{top:12px}
/* 锚点跳转时给固定导航留出空间 */
[id]{scroll-margin-top:calc(var(--nav-h) + 1rem)}

/* ---------- Fixed layers ---------- */
#gl,#fx{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;
}
#fx{z-index:1}
#gl{z-index:2}
main{position:relative;z-index:3}
.site-nav,.site-footer,.menu-overlay{position:relative;z-index:4}

.noise{
  position:fixed;inset:-100px;z-index:70;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;
  animation:grain 900ms steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-38px,22px)}
  50%{transform:translate(24px,-30px)}75%{transform:translate(-14px,-18px)}
  100%{transform:translate(30px,26px)}
}

/* ---------- Typography helpers ---------- */
.f-disp{font-family:var(--f-disp)}
.f-fr{font-family:var(--f-fr)}
.f-gro{font-family:var(--f-gro)}
.f-mono{font-family:var(--f-mono)}
.eyebrow{
  font-family:var(--f-gro);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--fg-dim);
  display:inline-flex;align-items:center;gap:.9em;
}
.eyebrow::before{content:"";width:2.6em;height:1px;background:var(--accent);display:inline-block}
.eyebrow.no-dash::before{display:none}
.stroke-text{
  color:transparent;
  -webkit-text-stroke:1px rgba(236,233,226,.35);
}
.lead{font-size:var(--fs-lead);line-height:1.9;color:var(--fg-dim);font-weight:340}
.body-text{color:var(--fg-dim);line-height:2;max-width:38em}
.body-text strong{color:var(--fg);font-weight:500}

/* line mask reveal */
.lm{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.lm>span{display:block;transform:translateY(115%);will-change:transform}
html.no-js .lm>span,.reveal{transform:none}
.chars .char{display:inline-block;will-change:transform}

/* ---------- Custom cursor ---------- */
.cursor{
  position:fixed;left:0;top:0;z-index:200;pointer-events:none;
  mix-blend-mode:difference;opacity:0;transition:opacity .4s;
}
html.cursor-on .cursor{opacity:1}
.cursor-dot{
  position:fixed;left:0;top:0;width:6px;height:6px;border-radius:50%;
  background:#fff;transform:translate(-50%,-50%);
}
.cursor-ring{
  position:fixed;left:0;top:0;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.85);transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
}
.cursor-label{
  font-family:var(--f-gro);font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#fff;opacity:0;transform:scale(.5);
  transition:opacity .3s,transform .3s;white-space:nowrap;
}
.cursor.is-active .cursor-ring{width:74px;height:74px;background:#fff}
.cursor.is-active .cursor-label{opacity:1;transform:scale(1);color:#000;mix-blend-mode:normal}
.cursor.is-pressed .cursor-ring{width:56px;height:56px}
@media(pointer:coarse){.cursor{display:none}}

/* ---------- Preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:300;background:var(--bg);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
}
.preloader.center-out{pointer-events:none}
.pre-count{
  position:absolute;right:var(--pad);bottom:calc(var(--pad) * .6);
  font-family:var(--f-fr);font-style:italic;font-weight:200;
  font-size:clamp(3rem, min(14vw, 22svh), 11rem);line-height:1;color:var(--fg);
  font-variation-settings:"opsz" 144;
}
.pre-count sup{font-size:.18em;font-style:normal;color:var(--fg-faint);letter-spacing:.1em}
.pre-title{
  overflow:hidden;font-family:var(--f-disp);
  font-size:clamp(2rem, min(7vw, 11svh), 5.6rem);letter-spacing:.08em;line-height:1.2;
}
.pre-title span{display:block;transform:translateY(110%)}
.pre-sub{
  margin-top:1.2rem;font-family:var(--f-gro);font-size:var(--fs-micro);
  letter-spacing:.4em;text-transform:uppercase;color:var(--fg-faint);
  opacity:0;
}
.pre-bar{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--line-soft);
}
.pre-bar i{display:block;height:100%;width:0%;background:var(--accent)}
.pre-curtain{position:fixed;inset:0;z-index:290;pointer-events:none;display:flex}
.pre-curtain i{flex:1;background:var(--bg-2);transform:scaleY(1);transform-origin:top}

/* ---------- Nav ---------- */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:0 var(--pad);height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.42),0 0 1.5px rgba(0,0,0,.3);
}
.brand{
  font-family:var(--f-disp);font-size:1.25rem;letter-spacing:.14em;
  display:flex;align-items:baseline;gap:.7em;
}
.brand small{font-family:var(--f-gro);font-size:var(--fs-micro);letter-spacing:.3em;opacity:.62;text-transform:uppercase}
.nav-right{display:flex;align-items:center;gap:2rem}
.nav-index{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.18em;opacity:.6}
.menu-btn{
  display:flex;align-items:center;gap:.8em;
  font-family:var(--f-gro);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;
}
.menu-btn .dots{display:inline-flex;flex-direction:column;gap:5px}
.menu-btn .dots i{width:22px;height:1.5px;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.45);transition:transform .45s var(--ease-out),width .45s var(--ease-out)}
.menu-btn .dots i:last-child{width:14px;margin-left:auto}
.menu-btn:hover .dots i:last-child{width:22px}
body.menu-open .menu-btn .dots i:first-child{transform:translateY(3.2px) rotate(45deg)}
body.menu-open .menu-btn .dots i:last-child{width:22px;transform:translateY(-3.2px) rotate(-45deg)}
@media(max-width:760px){.nav-index{display:none}}

/* ---------- Menu overlay ---------- */
.menu-overlay{
  position:fixed;inset:0;z-index:90;background:#0c0c0e;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--pad);padding-bottom:calc(var(--pad) * .8);
}
.menu-bg{
  position:absolute;inset:0;overflow:hidden;opacity:.4;
}
.menu-bg img{position:absolute;right:6vw;top:50%;width:min(34vw,430px);transform:translateY(-50%);
  opacity:0;transition:opacity .5s;filter:saturate(.9)}
.menu-links{display:flex;flex-direction:column;position:relative}
.menu-links a{
  display:flex;align-items:baseline;gap:.35em;
  font-family:var(--f-disp);font-size:clamp(1.7rem, min(7.2vh, 10vw), 4.6rem);
  line-height:1.28;letter-spacing:.04em;color:var(--fg);
  width:max-content;position:relative;transition:color .3s;
}
.menu-links a .no{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.2em;color:var(--fg-faint);min-width:3em}
.menu-links a .en{font-family:var(--f-fr);font-style:italic;font-weight:300;font-size:.32em;color:var(--fg-faint);letter-spacing:.06em;transition:color .3s}
.menu-links a::after{
  content:"";position:absolute;left:0;bottom:.18em;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform .6s var(--ease-out);
}
.menu-links a:hover{color:var(--accent-hi)}
.menu-links a:hover .en{color:var(--accent)}
.menu-links a:hover::after{transform:scaleX(1);transform-origin:left}
.menu-foot{
  position:relative;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  margin-top:4vh;padding-top:2rem;border-top:1px solid var(--line-soft);
  font-family:var(--f-gro);font-size:var(--fs-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--fg-faint);
}
.menu-links a .lm>span{transform:translateY(0)}

/* ---------- Sections generic ---------- */
.section{position:relative;padding:calc(var(--pad) * 2.4) var(--pad)}
.section.solid{background:var(--bg)}
.wrap{max-width:1560px;margin:0 auto;position:relative}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,6vw,5rem)}
.sec-head h2{font-family:var(--f-disp);font-size:var(--fs-h2);line-height:1.15;letter-spacing:.05em;margin-top:1rem}
.sec-head .side{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.2em;color:var(--fg-faint);text-align:right;line-height:2}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad);overflow:clip;
}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-media .gl-src{position:absolute;inset:12vh 22vw 16vh 22vw}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-bg-word{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  font-family:var(--f-fr);font-style:italic;font-weight:180;
  font-size:clamp(4.5rem, min(26vw, 32svh), 24rem);line-height:.9;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px var(--stroke-deco);
  pointer-events:none;user-select:none;z-index:-1;
}
.hero-inner{position:relative;text-align:left;max-width:1560px;margin:0 auto;width:100%}
.hero-kicker{margin-bottom:clamp(1.2rem,3vh,2.4rem)}
.hero-name{
  font-family:var(--f-disp);font-weight:400;
  font-size:var(--fs-mega);line-height:1.04;letter-spacing:.06em;
}
.hero-name .char-wrap{display:inline-block;overflow:hidden;padding:0 .02em .1em;margin-bottom:-.1em}
.hero-name .char{display:inline-block;will-change:transform}
.hero-row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  margin-top:clamp(1.6rem,4vh,3.2rem);
}
.hero-role{
  font-family:var(--f-fr);font-style:italic;font-weight:300;
  font-size:clamp(1.1rem, min(2.6vw, 4svh), 2.2rem);color:var(--fg-dim);
}
.hero-sub{
  font-family:var(--f-gro);font-size:var(--fs-micro);letter-spacing:.3em;
  text-transform:uppercase;color:var(--fg-faint);text-align:right;line-height:2.2;
}
.hero-meta{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(1.4rem,3.5vh,2.6rem);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.2em;color:var(--fg-faint);
}
.scroll-cue{display:inline-flex;align-items:center;gap:.9em;text-transform:uppercase}
.scroll-cue .line{width:1px;height:44px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue .line::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--accent);animation:cue 2.2s var(--ease-exp) infinite}
@keyframes cue{0%{top:-100%}55%{top:0}100%{top:100%}}

/* ---------- Manifesto (pinned huge type) ---------- */
.manifesto{height:100svh;position:relative;overflow:clip}
.manifesto-stage{position:absolute;inset:0;text-align:center;padding:0 var(--pad)}
.manifesto-word{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2vh;visibility:hidden}
.manifesto-word .zh{
  font-family:var(--f-disp);font-size:var(--fs-xhuge);line-height:1.05;letter-spacing:.04em;
}
.manifesto-word .zh .char{display:inline-block}
.manifesto-word .en{
  font-family:var(--f-fr);font-style:italic;font-weight:300;
  font-size:clamp(1.05rem, min(3vw, 4.5svh), 2.6rem);color:var(--fg-dim);letter-spacing:.04em;
  font-variation-settings:"opsz" 144,"wght" 300,"SOFT" 0,"WONK" 0;
}
.manifesto-word .desc{
  max-width:28em;color:var(--fg-faint);font-size:var(--fs-small);line-height:2;
}
.manifesto-progress{
  position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);
  display:flex;gap:.7em;
}
.manifesto-progress i{width:34px;height:1px;background:var(--line);position:relative}
.manifesto-progress i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--fill,0));transform-origin:left}
.manifesto-index{
  position:absolute;top:8vh;left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.3em;color:var(--fg-faint);
}

/* ---------- Marquee ---------- */
.marquee{overflow:clip;padding:clamp(1rem,2.5vw,2rem) 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--bg)}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-track>span{
  font-family:var(--f-disp);font-size:var(--fs-marquee);line-height:1.3;
  letter-spacing:.1em;white-space:nowrap;padding-right:.6em;color:var(--fg);
}
.marquee-track>span em{font-family:var(--f-fr);font-style:italic;font-weight:250;color:var(--accent);letter-spacing:.02em}
.marquee-track>span .dot{color:var(--fg-faint);padding:0 .35em}

/* ---------- Works horizontal (pinned) ---------- */
.works{position:relative;overflow:clip}
.works-head{position:absolute;top:calc(var(--pad) * 1.1);left:var(--pad);right:var(--pad);z-index:5;
  display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.works-head h2{font-family:var(--f-disp);font-size:var(--fs-title);letter-spacing:.06em;margin-top:.9rem}
.works-progress{position:absolute;left:var(--pad);right:var(--pad);bottom:5.5vh;height:1px;background:var(--line-soft);z-index:5}
.works-progress i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left}
.works-progress .pct{position:absolute;right:0;top:-1.9em;font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.2em;color:var(--fg-faint)}
.works-track{
  display:flex;align-items:center;gap:clamp(3rem,7vw,8rem);
  height:100svh;width:max-content;
  padding:0 var(--pad);padding-left:clamp(2rem,38vw,44vw);
  will-change:transform;
}
.work-card{
  position:relative;width:clamp(300px,54vw,860px);flex-shrink:0;
  display:block;
}
.work-card:nth-child(even){transform:translateY(6vh)}
.work-card:nth-child(odd){transform:translateY(-3vh)}
.work-fig{position:relative;aspect-ratio:3/2;overflow:hidden}
.work-card:nth-child(3n){width:clamp(260px,34vw,520px)}
.work-card:nth-child(3n) .work-fig{aspect-ratio:4/5;max-height:66vh}
.work-fig .gl-src{position:absolute;inset:0}
.work-fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.work-idx{
  position:absolute;top:-.72em;left:-.06em;z-index:2;
  font-family:var(--num-font);font-style:var(--num-style);font-weight:var(--num-weight);
  font-size:clamp(2.6rem, min(7vw, 11svh), 6.4rem);line-height:1;color:transparent;
  -webkit-text-stroke:var(--num-stroke) var(--stroke-faint);
  pointer-events:none;
}
.work-meta{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:1.2rem;border-top:1px solid var(--line);padding-top:1rem}
.work-meta h3{font-family:var(--f-disp);font-size:clamp(1.3rem, min(2.8vw, 4.5svh), 2.4rem);letter-spacing:.08em;font-weight:400}
.work-meta h3 .en{display:block;font-family:var(--f-fr);font-style:italic;font-weight:300;
  /* max() 托底：英文副题按比例缩放，但永不低于 11.5px */
  font-size:max(var(--fs-micro), .42em);color:var(--fg-faint);letter-spacing:.05em;margin-top:.35em}
.work-meta .no{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.18em;color:var(--fg-faint);white-space:nowrap}
.work-cta{
  position:absolute;right:1.2rem;bottom:5.4rem;z-index:2;
  width:74px;height:74px;border-radius:50%;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,11,.35);backdrop-filter:blur(6px);
  font-family:var(--f-gro);font-size:var(--fs-micro);font-weight:600;letter-spacing:.2em;
  opacity:0;transform:scale(.6);transition:opacity .45s,transform .45s var(--ease-out);
}
.work-card:hover .work-cta{opacity:1;transform:scale(1)}
.works-end{
  flex-shrink:0;width:60vw;display:flex;align-items:center;justify-content:center;
}
.works-end a{
  font-family:var(--f-disp);font-size:var(--fs-title);letter-spacing:.08em;
  border-bottom:1px solid var(--accent);padding-bottom:.2em;color:var(--fg);
}
@media(max-width:768px){
  .works-track{padding-left:var(--pad)}
  .work-card{width:86vw}
  /* 小屏纵向流下取消交错偏移（否则被 overflow:clip 裁切） */
  .work-card:nth-child(even),.work-card:nth-child(odd){transform:none}
  .work-card:nth-child(3n){width:86vw}
}

/* ---------- Depth (multi-layer parallax) ---------- */
.depth{height:230svh;position:relative}
.depth-stage{position:sticky;top:0;height:100svh;overflow:clip;background:#070708}
.d-layer{position:absolute;inset:0;will-change:transform}
.d-layer .frame{position:absolute;overflow:hidden}
.d-layer img{width:100%;height:100%;object-fit:cover}
.d-sky{background:radial-gradient(120% 90% at 50% 110%,#1c1a24 0%,#0b0a10 55%,#070708 100%)}
.d-far .frame{left:8vw;top:12vh;width:76vw;height:62vh;opacity:.85}
.d-far img{filter:blur(2px) brightness(.75) saturate(.9)}
.d-mid-l .frame{left:-4vw;top:34vh;width:34vw;height:52vh;opacity:.92}
.d-mid-r .frame{right:-3vw;top:16vh;width:30vw;height:44vh;opacity:.9}
.d-word{display:flex;align-items:center;justify-content:center}
.d-word span{
  font-family:var(--f-disp);font-size:var(--fs-huge);letter-spacing:.1em;
  color:transparent;-webkit-text-stroke:1px var(--stroke-faint);
}
.d-near .frame{right:6vw;bottom:-6vh;width:44vw;height:56vh}
.d-front .frame{left:-6vw;bottom:-10vh;width:38vw;height:60vh;opacity:.95}
.d-front img{filter:brightness(.8)}
.d-grain{background:radial-gradient(80% 60% at 50% 50%,transparent 40%,rgba(0,0,0,.55) 100%)}
.d-caption{
  position:absolute;left:var(--pad);bottom:8vh;z-index:6;max-width:26em;
}
.d-caption .zh{font-family:var(--f-disp);font-size:clamp(1.2rem, min(2.6vw, 4svh), 2.2rem);letter-spacing:.1em;line-height:1.6}
.d-caption .en{font-family:var(--f-fr);font-style:italic;font-weight:300;color:var(--fg-dim);margin-top:.6em;font-size:var(--fs-small)}
.d-hint{position:absolute;right:var(--pad);top:8vh;font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.26em;color:var(--fg-faint);writing-mode:vertical-rl}
@media(max-width:768px){
  .depth{height:180svh}
  .d-far .frame{left:4vw;width:92vw}
  .d-mid-l .frame{width:52vw}
  .d-mid-r .frame{width:46vw;top:10vh}
  .d-near .frame{width:70vw}
  .d-front .frame{width:56vw}
  .d-hint{display:none}
}
/* 窄屏收敛视差层数：3 层 */
@media(max-width:560px){
  .depth{height:150svh}
  .d-mid-l,.d-mid-r{display:none}
  .d-caption{bottom:6vh;max-width:20em}
}
/* 极窄：仅保留远近两层 + 巨字 */
@media(max-width:400px){
  .d-near{display:none}
}

/* ---------- Drift gallery (drag physics) ---------- */
.drift{padding:calc(var(--pad) * 2.2) 0;background:var(--bg);overflow:clip}
.drift-head{padding:0 var(--pad);display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.4rem;margin-bottom:clamp(2rem,5vw,4rem)}
.drift-head h2{font-family:var(--f-disp);font-size:var(--fs-h2);letter-spacing:.05em;margin-top:1rem}
.drift-hint{
  font-family:var(--f-gro);font-size:var(--fs-micro);letter-spacing:.3em;text-transform:uppercase;color:var(--fg-faint);
  display:flex;align-items:center;gap:1em;
}
.drift-hint svg{width:34px;height:12px;overflow:visible}
.drift-belt{position:relative;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.drift-belt.is-drag{cursor:grabbing}
.drift-row{display:flex;gap:clamp(.8rem,1.6vw,1.5rem);width:max-content;will-change:transform;padding:.6rem 0}
/* .drift-item 为旧类；新渲染统一用 .figure，二者共享同一套尺寸与悬停语言 */
.drift-item,.drift-row>.figure{
  position:relative;flex-shrink:0;width:clamp(180px,24vw,360px);
  aspect-ratio:3/2;overflow:hidden;background:var(--bg-2);
}
.drift-item:nth-child(4n),.drift-row>.figure:nth-child(4n){aspect-ratio:4/5;width:clamp(150px,18vw,270px)}
.drift-item img,.drift-row>.figure img{
  width:100%;height:100%;object-fit:cover;pointer-events:none;
  transform:scale(1.05);transition:transform .8s var(--ease-out),filter .8s;
}
.drift-item figcaption,.drift-row>.figure figcaption{
  position:absolute;left:.9em;right:.9em;bottom:.7em;
  display:flex;justify-content:space-between;gap:1em;
  font-family:var(--f-mono);font-size:var(--fs-micro);
  letter-spacing:.16em;color:rgba(255,255,255,.92);
  opacity:0;transition:opacity .4s;
  text-shadow:0 1px 8px rgba(0,0,0,.7);
}
.drift-item:hover img,.drift-row>.figure:hover img{transform:scale(1.12);filter:brightness(1.08)}
.drift-item:hover figcaption,.drift-row>.figure:hover figcaption,
.drift-row>.figure:focus-visible figcaption{opacity:1}
.drift + .drift{margin-top:-2px}
/* 长廊在小屏收窄，一屏能看到 2.5 张以上，形成"还有更多"的暗示 */
@media(max-width:768px){
  .drift{padding:calc(var(--pad) * 1.6) 0}
  .drift-item,.drift-row>.figure{width:clamp(150px,58vw,260px)}
  .drift-item:nth-child(4n),.drift-row>.figure:nth-child(4n){width:clamp(130px,48vw,220px)}
  .drift-hint{font-size:var(--fs-micro);letter-spacing:.2em}
}
/* 触屏无 hover：caption 常显，否则用户永远看不到标题 */
@media(pointer:coarse){
  .drift-item figcaption,.drift-row>.figure figcaption{opacity:1}
}

/* ---------- About teaser ---------- */
.about-teaser{background:var(--bg)}
.about-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,6vw,7rem);align-items:start}
.about-grid h2{font-family:var(--f-disp);font-size:var(--fs-h2);line-height:1.35;letter-spacing:.06em;margin-top:1.2rem}
.about-grid h2 em{font-family:var(--f-fr);font-style:italic;font-weight:300;color:var(--accent);letter-spacing:0}
.about-teaser .body-text{margin-top:2rem}
.stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.stat{padding:clamp(1.4rem,2.6vw,2.4rem) 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:.4rem}
.stat:nth-child(odd){border-right:1px solid var(--line);padding-right:1.6rem}
.stat:nth-child(even){padding-left:1.6rem}
.stat .num{
  font-family:var(--f-fr);font-weight:250;font-size:clamp(2.2rem, min(5vw, 8svh), 4.6rem);line-height:1;
  font-variation-settings:"opsz" 144;
}
.stat .num sup{font-size:.35em;color:var(--accent);font-style:italic}
.stat .lbl{font-family:var(--f-gro);font-size:var(--fs-micro);letter-spacing:.26em;text-transform:uppercase;color:var(--fg-faint)}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}}

/* ---------- Buttons / links ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:1em;
  padding:1.05em 2em;border:1px solid var(--line);border-radius:99px;
  font-family:var(--f-gro);font-size:var(--fs-micro);font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  overflow:hidden;transition:color .45s;isolation:isolate;
}
.btn::before{
  content:"";position:absolute;inset:-1px;background:var(--fg);border-radius:inherit;
  transform:translateY(102%);transition:transform .55s var(--ease-out);z-index:-1;
}
.btn:hover{color:#0c0c0e}
.btn:hover::before{transform:translateY(0)}
.btn.solid{background:var(--fg);color:#0c0c0e}
.btn.solid::before{background:var(--accent)}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}
.link-arrow{
  display:inline-flex;align-items:center;gap:.8em;
  font-family:var(--f-gro);font-size:var(--fs-micro);font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  padding-bottom:.5em;position:relative;
}
.link-arrow::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--accent);transform-origin:left;transition:transform .5s var(--ease-out)}
.link-arrow:hover::after{transform:scaleX(.4)}
.link-arrow svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;transition:transform .4s var(--ease-out)}
.link-arrow:hover svg{transform:translateX(5px)}

/* ---------- Footer ---------- */
.site-footer{background:#070708;border-top:1px solid var(--line-soft);overflow:clip}
.foot-mega{
  padding:clamp(3rem,8vw,7rem) var(--pad) 0;text-align:center;
}
.foot-mega .big{
  font-family:var(--f-disp);font-size:var(--fs-foot);line-height:1.15;letter-spacing:.08em;
  display:inline-block;
}
.foot-mega .tag{font-family:var(--f-fr);font-style:italic;font-weight:300;color:var(--fg-dim);font-size:clamp(.95rem, min(2vw, 3svh), 1.5rem);margin-top:1rem}
.foot-grid{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.2rem;
  padding:clamp(2rem,4vw,3rem) var(--pad);
  font-family:var(--f-gro);font-size:var(--fs-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--fg-faint);
}
.foot-grid nav{display:flex;gap:2em;flex-wrap:wrap}
.foot-grid a{transition:color .3s}
.foot-grid a:hover{color:var(--accent)}
.to-top{display:inline-flex;align-items:center;gap:.7em}
.to-top svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ============================================================
   PROJECT DETAIL PAGES
   ============================================================ */
.p-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0 var(--pad) 10vh;overflow:clip}
.p-hero-media{position:absolute;inset:0;z-index:-1}
.p-hero-media .gl-src{position:absolute;inset:0}
.p-hero-media img{width:100%;height:100%;object-fit:cover}
.p-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,11,.25) 0%,rgba(10,10,11,0) 35%,rgba(10,10,11,.82) 100%)}
.p-hero-inner{position:relative;width:100%;max-width:1560px;margin:0 auto}
.p-hero .crumbs{display:flex;gap:1.4em;align-items:center;flex-wrap:wrap;margin-bottom:2.2vh;font-family:var(--f-gro);font-size:var(--fs-micro);letter-spacing:.26em;text-transform:uppercase;color:var(--fg-dim)}
.p-hero .crumbs a{padding:.55em 0;margin:-.55em 0;min-height:var(--tap-min);display:inline-flex;align-items:center}
@media(max-width:768px){.p-hero .crumbs{gap:.9em;letter-spacing:.18em}}
.p-hero .crumbs a:hover{color:var(--accent)}
.p-title{
  font-family:var(--f-disp);font-weight:400;font-size:var(--fs-h1);line-height:1.1;letter-spacing:.06em;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em;
}
.p-title .en{
  font-family:var(--f-fr);font-style:italic;font-weight:250;
  font-size:max(var(--fs-micro), .32em);
  color:var(--fg-dim);-webkit-text-stroke:0;letter-spacing:.03em;
}
.p-hero-meta{
  display:flex;flex-wrap:wrap;gap:2.4em;margin-top:3.4vh;padding-top:2vh;border-top:1px solid rgba(236,233,226,.22);
  font-family:var(--f-gro);font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim);
}
.p-hero-meta b{display:block;color:var(--fg);font-weight:500;margin-bottom:.5em;letter-spacing:.28em;font-size:var(--fs-micro);color:var(--fg-faint)}
.p-num-bg{
  position:absolute;right:2vw;top:8vh;z-index:-1;
  font-family:var(--num-font);font-style:var(--num-style);font-weight:150;
  font-size:clamp(8rem, min(34vw, 60svh), 30rem);line-height:1;
  color:transparent;-webkit-text-stroke:var(--num-stroke) rgba(236,233,226,.13);pointer-events:none;
}

.p-intro{padding:calc(var(--pad)*2.2) var(--pad);background:var(--bg)}
.p-intro .wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(2rem,6vw,7rem)}
.p-intro .sticky-lab{position:sticky;top:16vh;align-self:start}
.p-intro .lead-xl{
  font-family:var(--f-disp);font-size:var(--fs-title);line-height:1.8;letter-spacing:.04em;color:var(--fg);
}
.p-intro .body-text{margin-top:2.2rem}
@media(max-width:900px){.p-intro .wrap{grid-template-columns:1fr}.p-intro .sticky-lab{position:static}}

.p-chapter{padding:calc(var(--pad)*1.6) var(--pad);position:relative}
.p-chapter .wrap{display:grid;grid-template-columns:minmax(200px,.5fr) 1.5fr;gap:clamp(2rem,5vw,6rem)}
.ch-no{
  font-family:var(--num-font);font-style:var(--num-style);font-weight:var(--num-weight);
  font-size:clamp(2.2rem, min(5vw, 8svh), 4.4rem);
  color:transparent;-webkit-text-stroke:var(--num-stroke) var(--stroke-faint);line-height:1;
  position:sticky;top:18vh;align-self:start;
}
.ch-body h3{font-family:var(--f-disp);font-size:var(--fs-h3);letter-spacing:.08em;margin-bottom:1.6rem}
.ch-body p+p{margin-top:1.4rem}
@media(max-width:900px){.p-chapter .wrap{grid-template-columns:1fr}.ch-no{position:static;margin-bottom:1rem}}

.p-quote{
  min-height:88svh;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:0 var(--pad);background:#070708;position:relative;overflow:clip;
}
.p-quote blockquote{
  font-family:var(--f-disp);font-size:var(--fs-quote);line-height:1.6;letter-spacing:.06em;
  max-width:22em;
}
.p-quote blockquote .w{opacity:.14;transition:opacity .5s}
.p-quote cite{display:block;margin-top:3rem;font-family:var(--f-gro);font-style:normal;font-size:var(--fs-micro);letter-spacing:.3em;text-transform:uppercase;color:var(--fg-faint)}
.p-quote .q-mark{position:absolute;font-family:var(--f-fr);font-style:italic;font-weight:200;font-size:clamp(8rem, min(40vw, 70svh), 36rem);color:rgba(236,233,226,.045);line-height:1;pointer-events:none;user-select:none}
.p-quote .q-mark.l{left:2vw;top:0}
.p-quote .q-mark.r{right:2vw;bottom:-8vh}

.p-figure{padding:calc(var(--pad)*1.4) var(--pad)}
.p-figure .fig-wrap{position:relative;overflow:hidden;margin:0 auto}
.p-figure .fig-wrap.wide{aspect-ratio:16/9;max-width:100%}
.p-figure .fig-wrap.tall{aspect-ratio:4/5;max-width:min(76vw,880px)}
.p-figure .gl-src{position:absolute;inset:0;will-change:transform}
.p-figure .gl-src img,.p-duo .gl-src img,.p-hero-media .gl-src img,.work-fig .gl-src img{width:100%;height:100%;object-fit:cover}
.p-figure figcaption{
  display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;
  font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.18em;color:var(--fg-faint);
}
.p-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,3rem);padding:0 var(--pad)}
.p-duo .fig-wrap{aspect-ratio:4/5}
.p-duo .fig-wrap:nth-child(2){transform:translateY(clamp(2rem,6vw,6rem))}
@media(max-width:760px){.p-duo{grid-template-columns:1fr}.p-duo .fig-wrap:nth-child(2){transform:none}}

.p-gallery{padding:calc(var(--pad)*1.6) 0;background:var(--bg)}
.p-gallery .g-row{
  display:flex;gap:clamp(.8rem,1.6vw,1.4rem);width:max-content;padding:.7rem var(--pad);
}
/* 详情页 contact sheet：由 JS 漂移，但触屏/无 JS 时必须能手动横滑
   —— 这里只做溢出容器的显式声明，宽度交给 overflow-x 自身裁剪 */
.p-gallery{overflow:clip}

.p-next{position:relative;display:block;min-height:78svh;overflow:clip;background:#070708;border-top:1px solid var(--line-soft)}
.p-next .next-bg{position:absolute;inset:0;opacity:0;transition:opacity .7s;transform:scale(1.06)}
.p-next:hover .next-bg{opacity:.35;transform:scale(1)}
.p-next .next-bg img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.p-next .next-in{
  position:relative;min-height:78svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4vh;text-align:center;padding:0 var(--pad);
}
.p-next .lab{font-family:var(--f-gro);font-size:var(--fs-micro);letter-spacing:.32em;text-transform:uppercase;color:var(--fg-faint)}
.p-next .ttl{font-family:var(--f-disp);font-size:var(--fs-display);letter-spacing:.08em;line-height:1.15;transition:color .4s}
.p-next:hover .ttl{color:var(--accent-hi)}
.p-next .en{font-family:var(--f-fr);font-style:italic;font-weight:300;color:var(--fg-dim);font-size:clamp(.95rem, min(2vw, 3svh), 1.5rem)}

/* ---------- Lightbox（画廊级） ---------- */
.lightbox{
  position:fixed;inset:0;z-index:var(--z-lightbox);
  background:rgba(7,7,8,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-fast),visibility var(--dur-fast);
  backdrop-filter:blur(10px);
  touch-action:none;overscroll-behavior:contain;
}
.lightbox.open{opacity:1;visibility:visible}

/* 顶栏：计数 / 进度 / 缩放 / 关闭 */
.lb-top{
  position:absolute;top:0;left:0;right:0;z-index:3;
  height:calc(var(--nav-h) - 8px);padding:0 var(--pad);
  display:flex;align-items:center;gap:1.4rem;
}
.lb-count{font-size:var(--fs-micro);letter-spacing:.18em;color:var(--fg-dim);white-space:nowrap}
.lb-bar{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden;max-width:340px}
.lb-bar i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);
  transform-origin:left;transition:transform var(--dur-swap) var(--ease-out)}
.lb-tools{display:flex;gap:.3rem;margin-left:auto}
.lb-zoom{
  width:var(--tap-min);height:var(--tap-min);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-gro);font-size:1rem;color:var(--fg-dim);
  border:1px solid var(--line);transition:color var(--dur-fast),border-color var(--dur-fast);
}
.lb-zoom:hover{color:var(--fg);border-color:var(--stroke-faint)}
.lb-close{
  display:inline-flex;align-items:center;gap:.6em;min-height:var(--tap-min);
  font-family:var(--f-gro);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--fg-dim);
  transition:color var(--dur-fast);
}
.lb-close span{font-family:var(--f-mono);font-size:.85em;opacity:.6;
  border:1px solid var(--line);border-radius:4px;padding:.2em .45em}
.lb-close:hover{color:var(--accent)}

/* 舞台：承载 Flip 与手势 */
.lb-stage{
  position:relative;max-width:92vw;max-height:76svh;
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur-swap) var(--ease-out),
             left var(--dur-swap) var(--ease-out), top var(--dur-swap) var(--ease-out),
             width var(--dur-swap) var(--ease-out), height var(--dur-swap) var(--ease-out);
  will-change:transform;touch-action:none;cursor:zoom-in;
}
.lb-stage.lb-open{cursor:zoom-out}
.lb-img{
  max-width:92vw;max-height:76svh;width:auto;height:auto;
  object-fit:contain;user-select:none;-webkit-user-drag:none;
  box-shadow:0 30px 90px rgba(0,0,0,.65);
  transition:opacity var(--dur-fast);
}
/* Flip 起始态：定位到缩略图矩形时让图铺满 */
.lb-stage:not(.lb-open) .lb-img{width:100%;height:100%;object-fit:cover}

/* 底栏 caption */
.lb-foot{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(1.2rem,4vh,2.6rem);
  z-index:3;text-align:center;pointer-events:none;
}
.lb-cap{
  font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.18em;
  color:var(--fg-dim);line-height:2;max-width:64ch;margin:0 auto;
}
.lb-tags{
  margin-top:.8em;font-family:var(--f-gro);font-size:var(--fs-micro);
  letter-spacing:.28em;text-transform:uppercase;color:var(--fg-faint);
}

/* 左右切换 */
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  display:flex;align-items:center;gap:.7em;
  min-width:var(--tap-min);min-height:var(--tap-min);padding:1rem;
  font-family:var(--f-gro);font-size:var(--fs-micro);letter-spacing:.3em;
  text-transform:uppercase;color:var(--fg-dim);
  transition:color var(--dur-fast),transform var(--dur-fast) var(--ease-out);
}
.lb-nav:hover{color:var(--accent)}
.lb-prev{left:.4rem}
.lb-next{right:.4rem}
.lb-prev:hover{transform:translate(-4px,-50%)}
.lb-next:hover{transform:translate(4px,-50%)}
.lb-nav-t{display:none}
@media(min-width:900px){.lb-nav-t{display:inline}}

/* ---------- Page transition wipe ---------- */
.wipe{position:fixed;inset:0;z-index:280;pointer-events:none;display:flex;visibility:hidden}
.wipe i{flex:1;background:#0c0c0e;transform:scaleY(0)}
.wipe .wipe-word{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--f-disp);font-size:var(--fs-title);letter-spacing:.2em;color:var(--fg);
  opacity:0;
}

/* ---------- GL image sources ---------- */
.gl-src img{transition:opacity .3s}
html.gl-on .gl-src img{opacity:0}
html.gl-off .gl-src img{opacity:1}

/* ---------- Reveal defaults ---------- */
.reveal{opacity:0;transform:translateY(46px);will-change:transform,opacity}
html.no-js .reveal{opacity:1;transform:none}

/* ---------- Responsive nav/pad tweaks ---------- */
@media(max-width:768px){
  .hero-media .gl-src{inset:16vh 6vw 24vh 6vw}
  .stat .num{font-size:2.4rem}
}

/* ---------- TAP TARGETS（≥44px，视觉不变靠负 margin 抵消） ---------- */
.menu-btn{padding:12px;margin:-12px}
.to-top{padding:12px;margin:-12px}
.lightbox .lb-close{padding:12px;margin:-12px}
.foot-grid a{padding:12px 0;margin:-12px 0}
.foot-grid nav{gap:1rem 2em}
.lightbox .lb-nav{min-width:var(--tap-min);min-height:var(--tap-min)}
.skip-link{min-height:var(--tap-min);display:flex;align-items:center}

/* ============================================================
   组件层：.section-head / .figure / .num / .page-meta
   —— 首页与详情页共用的设计语言，消除两套排版的割裂
   ============================================================ */

/* ---------- .section-head：吸收 .sec-head / .works-head / .drift-head ---------- */
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.4rem;flex-wrap:wrap;margin-bottom:clamp(2rem,5vw,4rem);
}
.section-head h2{
  font-family:var(--f-disp);font-size:var(--fs-title);
  line-height:1.2;letter-spacing:.06em;margin-top:.9rem;
}
.section-head .side,.section-head .hint{
  font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.2em;
  color:var(--fg-faint);line-height:2;
}
.section-head[data-align="right"] .side{text-align:right}
.section-head[data-align="center"]{flex-direction:column;align-items:center;text-align:center}
/* 内嵌于绝对定位场景（首页 pinned 区头部） */
.section-head.is-overlay{
  position:absolute;top:calc(var(--pad) * 1.1);left:var(--pad);right:var(--pad);
  z-index:5;pointer-events:none;margin-bottom:0;
}
.section-head.is-bare{padding:0 var(--pad)}

/* ---------- .figure：统一图片容器 ---------- */
.figure{
  --ar:var(--ratio-land);
  position:relative;display:block;flex-shrink:0;
  aspect-ratio:var(--ar);overflow:hidden;background:var(--bg-2);
}
.figure img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-swap) var(--ease-out),filter var(--dur-swap);
}
/* 灰度策略：非彩色系列降饱和，hover 复原 */
.figure[data-hover="gray"] img{filter:saturate(.35) contrast(1.05)}
.figure[data-hover="gray"]:hover img{filter:saturate(1) contrast(1)}
.figure[data-hover="blur"] img{filter:blur(1.5px) brightness(.9)}
.figure[data-hover="blur"]:hover img{filter:blur(0) brightness(1)}
.figure:hover img{transform:scale(1.05)}
.figure figcaption{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  position:absolute;left:0;right:0;bottom:0;
  padding:2.4em .95em .75em;
  font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.16em;
  color:var(--fg);opacity:0;transition:opacity var(--dur-fast);
  background:linear-gradient(transparent,rgba(7,7,8,.82));
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.figure:hover figcaption,.figure:focus-visible figcaption{opacity:1}
/* 独立成块时 caption 常显（hub 网格 / 详情页图组） */
.figure[data-caption="always"] figcaption{opacity:1;position:static;background:none;
  padding:0;margin-top:.9rem;color:var(--fg-faint);text-shadow:none}

/* ---------- .num：统一编号 ---------- */
.num{
  font-family:var(--num-font);font-style:var(--num-style);
  font-variant-numeric:tabular-nums;line-height:1;
}
.num--bg,.num--idx{
  color:transparent;-webkit-text-stroke:var(--num-stroke) var(--stroke-faint);
}
.num--bg{position:absolute;right:2vw;top:8vh;z-index:-1;font-weight:150;
  font-size:clamp(8rem, min(34vw, 60svh), 30rem);pointer-events:none}
.num--idx{position:absolute;top:-.62em;left:-.05em;z-index:2;font-weight:var(--num-weight);
  font-size:clamp(2.2rem, min(6vw, 10svh), 5.4rem);pointer-events:none}
.num--mini{font-family:var(--f-mono);font-style:normal;font-size:1em;font-weight:400}
.num--pct{font-family:var(--f-mono);font-style:normal;font-size:var(--fs-micro);letter-spacing:.2em}
/* .num--mini 在 figcaption 内继承父级字号（1em）；
   移动端 figcaption 由 --fs-micro 托底，这里不做二次缩小，
   避免出现 9.9px 的编号。 */

/* ---------- .page-meta：吸收 .hero-meta / .p-hero-meta ---------- */
.page-meta{
  display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;
  font-family:var(--f-gro);font-size:var(--fs-micro);
  letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim);
}
.page-meta b{display:block;color:var(--fg-faint);font-weight:500;
  margin-bottom:.5em;letter-spacing:.28em;font-size:1em;opacity:.72}
.page-meta[data-variant="bar"]{
  justify-content:space-between;align-items:center;
  border-top:1px solid rgba(236,233,226,.22);padding-top:2vh;gap:1rem;
}
.page-meta[data-variant="stack"]{flex-direction:column;gap:1.2rem}

/* ---------- 页脚三区（统一 9 页） ---------- */
.site-foot{
  background:var(--bg-deep);border-top:1px solid var(--line-soft);overflow:clip;
}
.site-foot .foot-grid{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.6rem 3rem;
  align-items:center;padding:clamp(2rem,4vw,3rem) var(--pad);
  font-family:var(--f-gro);font-size:var(--fs-micro);
  letter-spacing:.24em;text-transform:uppercase;color:var(--fg-faint);
}
.site-foot .foot-sec,.site-foot .foot-nav{display:flex;gap:1.6em;flex-wrap:wrap}
.site-foot .foot-nav[data-tier="primary"]{letter-spacing:.2em}
.site-foot a{transition:color .3s}
.site-foot a:hover{color:var(--accent)}
.site-foot .to-top{display:inline-flex;align-items:center;gap:.7em;justify-self:end}
.site-foot .to-top svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}

@media(max-width:768px){
  .site-foot .foot-grid{grid-template-columns:1fr;justify-items:start;gap:1.4rem}
  .site-foot .to-top{justify-self:start}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .noise{display:none}
  html.gl-on .gl-src img{opacity:1}
  #gl,#fx{display:none}
  .reveal{opacity:1;transform:none}
  .lm>span,.hero-name .char{transform:none}
}

/* ---------- Scroll lock（菜单/灯箱打开时） ---------- */
body.scroll-locked{overflow:hidden;position:fixed;width:100%}

/* ============================================================
   WORKS HUB（works.html）
   ============================================================ */
.page-hero{
  position:relative;padding:calc(var(--nav-h) + clamp(3rem,10vh,8rem)) var(--pad) clamp(2rem,6vh,4rem);
  overflow:clip;
}
.page-hero .page-hero-inner{max-width:var(--wrap);margin:0 auto}
.page-hero h1{
  font-family:var(--f-disp);font-size:var(--fs-h1);line-height:1.12;
  letter-spacing:.06em;margin-top:1.2rem;
}
.page-hero h1 .en{
  display:block;font-family:var(--f-fr);font-style:italic;font-weight:250;
  /* .3em 在窄屏（--fs-h1 缩到 2.2rem）只有 10.6px，跌破下限；
     max() 让它在小屏托底到 11.5px，桌面端不受影响。 */
  font-size:max(var(--fs-micro), .3em);color:var(--fg-dim);letter-spacing:.03em;margin-top:.5em;
}
.page-hero .lead{margin-top:1.6rem;max-width:40em}
.page-hero .page-meta{margin-top:2.4rem}

.filter-bar{
  position:sticky;top:var(--nav-h);z-index:6;
  padding:1rem var(--pad);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.filter-inner{
  max-width:var(--wrap);margin:0 auto;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
.filter-btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.72em 1.15em;border:1px solid var(--line);border-radius:99px;
  font-family:var(--f-gro);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim);
  min-height:var(--tap-min);
  transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast);
}
.filter-btn .cnt{font-family:var(--f-mono);letter-spacing:.1em;opacity:.66;font-size:1em}
.filter-btn:hover{color:var(--fg);border-color:var(--stroke-faint)}
.filter-btn[aria-pressed="true"]{color:#0c0c0e;background:var(--accent);border-color:var(--accent)}
.filter-btn[aria-pressed="true"] .cnt{opacity:.7}
.filter-count{
  margin-left:auto;font-family:var(--f-mono);font-size:var(--fs-micro);
  letter-spacing:.2em;color:var(--fg-faint);white-space:nowrap;
}

.work-grid-wrap{padding:clamp(2rem,6vh,4rem) var(--pad) calc(var(--pad) * 2.4)}
.work-grid{
  max-width:var(--wrap);margin:0 auto;
  display:grid;gap:clamp(1.2rem,3vw,2.6rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));
  align-items:start;
}
.work-grid .figure{margin:0}
.work-grid .figure figcaption{
  position:static;opacity:1;background:none;padding:0;
  margin-top:1rem;color:var(--fg-faint);text-shadow:none;
  border-top:1px solid var(--line);padding-top:.8rem;
}
.work-grid .figure:hover figcaption{opacity:1}
.work-grid .num--idx{top:-.55em;left:-.04em;
  font-size:clamp(1.8rem, min(4.5vw, 7svh), 3.6rem)}
/* 交错的纵向节奏：宽幅图跨两列 */
.work-grid .figure[data-ratio="wide"]{grid-column:span 2}
@media(max-width:640px){
  .work-grid .figure[data-ratio="wide"]{grid-column:span 1}
}
.hub-empty{
  grid-column:1/-1;padding:5rem 0;text-align:center;
  font-family:var(--f-gro);font-size:var(--fs-small);letter-spacing:.24em;
  text-transform:uppercase;color:var(--fg-faint);
}

/* ---------- About 页 ---------- */
.about-hero .about-lead{
  font-family:var(--f-disp);font-size:var(--fs-title);line-height:1.7;
  letter-spacing:.04em;color:var(--fg);max-width:30em;margin-top:2rem;
}
.timeline{
  max-width:var(--wrap);margin:0 auto;
  border-top:1px solid var(--line);
}
.tl-row{
  display:grid;grid-template-columns:minmax(120px,.28fr) 1fr auto;
  gap:1.6rem 2.4rem;align-items:baseline;
  padding:clamp(1.4rem,3vw,2.2rem) 0;border-bottom:1px solid var(--line);
}
.tl-row .tl-no{font-family:var(--num-font);font-style:var(--num-style);
  font-weight:var(--num-weight);font-size:clamp(1.4rem, min(2.6vw, 4svh), 2.4rem);
  color:transparent;-webkit-text-stroke:var(--num-stroke) var(--stroke-faint)}
.tl-row h3{font-family:var(--f-disp);font-size:var(--fs-h3);letter-spacing:.06em;font-weight:400}
.tl-row h3 a:hover{color:var(--accent)}
.tl-row .tl-en{display:block;font-family:var(--f-fr);font-style:italic;font-weight:300;
  font-size:max(var(--fs-micro), .5em);color:var(--fg-faint);margin-top:.4em}
.tl-row .tl-meta{font-family:var(--f-mono);font-size:var(--fs-micro);
  letter-spacing:.18em;color:var(--fg-faint);white-space:nowrap}
@media(max-width:640px){
  .tl-row{grid-template-columns:1fr;gap:.7rem}
  .tl-row .tl-meta{white-space:normal}
}

/* ---------- 触屏：关闭高开销效果 ---------- */
@media(pointer:coarse){
  .noise{animation:none;opacity:.035}
  .work-cta{backdrop-filter:none;background:rgba(10,10,11,.62)}
  .lightbox{backdrop-filter:none;background:rgba(7,7,8,.97)}
  .filter-bar{backdrop-filter:none;background:var(--bg-2)}
  .d-far img{filter:brightness(.7) saturate(.9)}
  .cursor{display:none}
}

/* ============================================================
   移动端降级：pinned → 纵向流式
   —— app.js 在 COARSE 或 ≤768px 时给 .manifesto-wrap/.works 加
      .is-flow。这里只负责布局形态，动画编排交给 JS。
      降级动机：pin 的滚动距离按「视口高的整数倍」记账，
      手机上两段 pin 就吃掉 6600px（占整站 61%），却只呈现
      一屏内容。改流式后滚距 = 内容真实高度。
   ============================================================ */
/* ---------- Manifesto：三屏纵向排列 ---------- */
.manifesto-wrap.is-flow{padding-top:var(--nav-h)}
.manifesto-wrap.is-flow .manifesto{height:auto;overflow:visible}
.manifesto-wrap.is-flow .manifesto-stage{position:static;inset:auto}
.manifesto-wrap.is-flow .manifesto-word{
  position:static;inset:auto;visibility:visible;
  min-height:86svh;padding:calc(var(--pad) * 2) 0;
  justify-content:center;gap:clamp(.9rem,2.4vh,1.6rem);
  border-bottom:1px solid var(--line-soft);
}
.manifesto-wrap.is-flow .manifesto-word:last-child{border-bottom:0}
/* 三屏都拉开后，进度条不再表示"当前第几屏"，改为静态装饰 */
.manifesto-wrap.is-flow .manifesto-progress{position:static;transform:none;justify-content:center;margin:2.4rem auto 0}
/* 序号与进度条静态化后仍要和 sticky 导航错开一个身位 */
.manifesto-wrap.is-flow .manifesto-index{position:static;transform:none;text-align:center;margin:0 0 1.4rem}

/* ---------- Works：卡片纵向流 ---------- */
.works.is-flow{overflow:visible}
.works.is-flow .works-track{
  display:flex;flex-direction:column;align-items:stretch;
  height:auto;width:auto;gap:clamp(2rem,6vw,3.2rem);
  padding:clamp(1.6rem,5vw,3rem) var(--pad) clamp(2.4rem,8vw,4rem);
  transform:none!important;will-change:auto;
}
.works.is-flow .work-card{width:100%;transform:none!important}
.works.is-flow .work-card:nth-child(3n){width:100%}
/* 统一 3/2：原本 3n 卡是 4/5 竖幅，纵向流下每张多出 0.42 屏，
   6 张累计 2.5 屏；改成同一比例既省滚距也让节奏更整齐。 */
.works.is-flow .work-fig{aspect-ratio:3/2}
.works.is-flow .work-card:nth-child(3n) .work-fig{aspect-ratio:3/2;max-height:none}
.works.is-flow .work-idx{font-size:clamp(1.8rem,7.5vw,2.8rem);top:-.5em}
/* 触屏没有 hover，VIEW 胶囊改为常显，否则"这卡片能点"完全看不出来 */
.works.is-flow .work-cta{opacity:1;transform:none;width:52px;height:52px;bottom:.9rem;right:.9rem}
.works.is-flow .work-meta{margin-top:.9rem;padding-top:.8rem}
.works.is-flow .works-end{width:auto}
.works.is-flow .works-end a{display:inline-flex;align-items:center;min-height:var(--tap-min)}
/* 流式下头部不再 absolute 覆盖，回归正常文档流。
   注意必须补足 --nav-h：这张头是 sticky 导航的第一个"正文"，
   不加就会顶到导航条底下互相压字（原 pin 布局里它是 absolute
   覆盖在满屏画廊上方，没有这个问题）。 */
.works.is-flow .section-head.is-overlay{
  position:static;margin:0 0 1.6rem;
  padding-top:calc(var(--nav-h) + 1.6rem);
}

/* ---------- Depth：缩短视差行程，别占满 2.3 屏 ---------- */
.depth.is-flow{height:auto}
.depth.is-flow .depth-stage{position:relative;height:auto;min-height:100svh;padding:calc(var(--pad) * 2) 0}
.depth.is-flow .d-caption{position:static;margin:0 auto;padding:0 var(--pad)}
.depth.is-flow .d-hint{position:static;writing-mode:horizontal-tb;display:block;text-align:center;margin-top:1.4rem}
/* 流式下 reduce-motion 之外的图层继续走 JS 视差，只是幅度被压到 0.45×，
   所以这里不需要动 .frame 的定位；只把 stage 的 230svh 固定高度去掉。 */

/* ---------- 主导航三层（nav-tiers） ---------- */
.nav-tiers{
  display:flex;align-items:center;gap:1.8em;
  font-family:var(--f-gro);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;
}
.nav-tiers a{
  position:relative;padding:.35em 0;min-height:var(--tap-min);
  display:inline-flex;align-items:center;color:var(--fg-dim);
  transition:color var(--dur-fast);
}
.nav-tiers a::after{
  content:"";position:absolute;left:0;bottom:.55em;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur-swap) var(--ease-out);
}
.nav-tiers a:hover{color:var(--fg)}
.nav-tiers a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-tiers a[aria-current="page"]{color:var(--fg)}
.nav-tiers a[aria-current="page"]::after{transform:scaleX(1)}
@media(max-width:860px){
  .nav-tiers{gap:1.1em;letter-spacing:.16em}
  .menu-btn span:first-child{display:none}
}
@media(max-width:560px){
  .nav-tiers{display:none}
}

/* ---------- 按钮组 ---------- */
.btn-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.6rem}
.about-grid h2{font-family:var(--f-disp);font-size:var(--fs-h3);line-height:1.4;
  letter-spacing:.06em;margin-top:2.8rem}

/* ---------- 菜单里的次级链接 ---------- */
.menu-links a.menu-links-alt{font-size:clamp(1.1rem, min(4.4vh, 5.4vw), 1.9rem);opacity:.62}
.menu-links a.menu-links-alt .no{font-size:.8em;min-width:3em}

/* ---------- 拖拽长廊键盘可达 ---------- */
.drift-belt:focus-visible{outline:1px solid var(--accent);outline-offset:6px}
.drift-item:focus-visible figcaption{opacity:1}
.figure:focus-visible img{transform:scale(1.05)}

/* ============================================================
   阶段2 收口：新增/迁移的组件类
   ============================================================ */

/* ---------- p-duo 的图注（原本是内联样式，现统一到令牌层） ---------- */
.p-duo-cap{
  max-width:var(--wrap);margin:1rem auto 0;padding:0 var(--pad);
  display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--f-mono);font-size:var(--fs-micro);
  letter-spacing:.18em;color:var(--fg-faint);
}
.p-duo-cap span:last-child{white-space:nowrap}

/* ---------- 首页 § 作品：pinned 头部改用 .section-head.is-overlay ---------- */
.works .section-head.is-overlay .side{text-align:right}

/* ---------- 首页长廊第二行上间距 ---------- */
.drift-belt[data-gap] {margin-top:clamp(.8rem,1.6vw,1.5rem)}

/* ---------- 页脚巨字 ---------- */
.eyebrow--center{justify-content:center}
.foot-mega-title{margin-top:clamp(1rem,2vh,2rem)}

/* ---------- 详情页 p-intro 里的 .page-meta 竖排 ---------- */
.p-intro .page-meta{margin-top:1.6rem}
.p-intro .page-meta[data-variant="stack"]{gap:1.1rem}
/* 用 max() 而不是 .92em：11.5px × .92 = 10.6px，正好跌破可读下限。
   桌面端仍保留"标签略小于值"的层级差，触屏端被托底到 11.5px。 */
.p-intro .page-meta b{font-size:max(var(--fs-micro), .92em)}

/* ---------- 详情页 hero 的 .page-meta（原 .p-hero-meta） ---------- */
.p-hero .page-meta{margin-top:auto;padding-top:2vh;
  border-top:1px solid rgba(236,233,226,.22)}
.p-hero .page-meta span{display:block}

/* ============================================================
   works hub：粘性筛选条在极窄屏改为横向滚动
   ============================================================ */
@media(max-width:560px){
  .filter-inner{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:2px;margin:0 calc(var(--pad) * -1);padding-left:var(--pad);padding-right:var(--pad);
  }
  .filter-inner::-webkit-scrollbar{display:none}
  .filter-btn{flex:0 0 auto}
  .filter-count{display:none}
}

/* ============================================================
   移动端排版细化（≤768）
   —— 正文行高/字距在触屏上放大，长段落限制为 34 个全角字左右
   ============================================================ */
@media(max-width:768px){
  body{font-size:1rem;line-height:1.85;letter-spacing:.01em}
  .body-text{font-size:1rem;line-height:1.9}
  .lead-xl{line-height:1.55}
  .p-intro{grid-template-columns:1fr}
  .p-chapter .wrap{grid-template-columns:1fr;gap:1.2rem}
  .p-chapter .ch-no{position:static;display:block;margin-bottom:.6rem}
  .section{padding:calc(var(--pad) * 1.8) var(--pad)}
  .page-hero{padding-top:calc(var(--nav-h) + 2.6rem)}
  .about-grid{grid-template-columns:1fr;gap:2.4rem}
  .stats{grid-template-columns:1fr 1fr;gap:1.6rem}
}
@media(max-width:420px){
  body{font-size:1.02rem}
  .eyebrow{letter-spacing:.18em}
}


/* ============================================================
   移动端可读性与触控目标（≤768px）
   —— 桌面端允许 9–10px 的微字（观看距离远、像素密度高），
      触屏上这些字号会糊成一团；这里统一托底并放大可点区域。
   ============================================================ */
@media(max-width:768px){
  /* 图注与元信息不再低于 11.5px */
  .figure figcaption,
  .drift-item figcaption,
  .p-duo-cap,
  .work-meta .no,
  .works-progress .pct,
  .stat .lbl,
  .p-quote cite,
  .p-next .lab,
  .d-hint,
  .crumbs,
  .menu-foot,
  .lb-cap,.lb-tags,.lb-count{font-size:var(--fs-micro)}

  /* 触控目标：视觉尺寸不变，用内边距把可点区域撑到 48px */
  .brand{padding:6px 0;min-height:var(--tap-min);display:inline-flex;align-items:center}
  .menu-btn{padding:14px;margin:-14px;min-height:var(--tap-min)}
  .filter-btn{min-height:var(--tap-min);padding:.8em 1.25em}
  .foot-grid a{padding:14px 0;margin:-14px 0}
  .to-top{padding:14px;margin:-14px}
  .menu-links-alt{padding:.55em 0;min-height:var(--tap-min)}
  .lb-nav{padding:1.2rem;}
  .lb-zoom{width:var(--tap-min);height:var(--tap-min)}

  /* 详情页图组横向滑动：触屏上给出手势提示并允许原生横滑 */
  .p-gallery .g-row,
  .drift-row{touch-action:pan-y}
}

/* 极窄屏：brand 缩小，避免与菜单按钮挤在一起 */
@media(max-width:380px){
  .brand{font-size:1.05rem}
  .brand small{display:none}
}