/* ============ TOKENS ============ */
:root{
  --bg:#0a0a0a;
  --ink:#f0ebe0;
  --gold:#c9b896;
  --gold-soft:rgba(201,184,150,.55);
  --gold-line:rgba(201,184,150,.16);
  --muted:#888888;
  --muted-deep:#6a6a6a;
  --panel:#141414;
  --sans:'Archivo','Helvetica Neue','PingFang SC','Microsoft YaHei',sans-serif;
  --serif:'Cormorant Garamond','Noto Serif SC','Songti SC','STSong',serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(28px,6vw,116px);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:#0a0a0a;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
h1,h2,h3,p,figure{margin:0;}
ul{margin:0;padding:0;list-style:none;}

/* grain */
.grain{
  position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px 260px;
}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s);}
.rv.in{opacity:1;transform:none;}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:600;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);height:clamp(74px,8vh,96px);
  background:linear-gradient(180deg,rgba(10,10,10,.86),rgba(10,10,10,0));
  backdrop-filter:blur(2px);
}
.brand{display:flex;align-items:baseline;gap:12px;line-height:1;}
.brand__star{
  color:var(--gold);font-size:13px;transform:translateY(-1px);
  display:inline-block;animation:twinkle 6s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.55;}50%{opacity:1;}}
.brand__name{font-size:15px;letter-spacing:.14em;color:var(--ink);font-weight:500;}
.brand__name em{
  font-style:normal;font-size:10px;letter-spacing:.28em;
  color:var(--muted-deep);margin-left:6px;font-weight:400;
}
.nav__links{display:flex;align-items:center;gap:clamp(22px,3.2vw,52px);}
.nav__item{position:relative;display:flex;align-items:baseline;gap:8px;padding:6px 0;transition:color .45s var(--ease);color:#9a9a9a;}
.nav__item .n{font-size:9.5px;letter-spacing:.12em;color:var(--gold);opacity:.65;transition:opacity .4s;}
.nav__item .t{font-size:12.5px;letter-spacing:.2em;}
.nav__item::after{
  content:'';position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);opacity:.9;
}
.nav__item:hover{color:#fff;}
.nav__item:hover .n{opacity:1;}
.nav__item.is-active{color:var(--ink);}
.nav__item.is-active .n{opacity:1;}
.nav__item.is-active::after{transform:scaleX(1);}

/* ============ SPY ============ */
.spy{
  position:fixed;right:clamp(8px,1.4vw,20px);top:50%;transform:translateY(-50%);
  z-index:600;display:flex;flex-direction:column;gap:clamp(18px,2.4vh,28px);align-items:flex-end;
}
.spy__item{
  display:flex;align-items:center;gap:10px;color:var(--muted-deep);
  transition:color .45s var(--ease);
  text-shadow:0 1px 14px rgba(0,0,0,.95),0 0 26px rgba(0,0,0,.8);
}
.spy__label{
  font-size:10px;letter-spacing:.24em;opacity:0;transform:translateX(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);white-space:nowrap;
}
.spy__num{font-size:9.5px;letter-spacing:.1em;color:inherit;transition:color .45s var(--ease);}
.spy__line{display:block;width:16px;height:1px;background:currentColor;transition:width .5s var(--ease),background .45s;}
.spy__item:hover{color:#fff;}
.spy__item:hover .spy__label{opacity:1;transform:none;}
.spy__item:hover .spy__line{width:26px;}
.spy__item.is-active{color:var(--gold);}
.spy__item.is-active .spy__num{color:var(--gold);}
.spy__item.is-active .spy__line{width:26px;background:var(--gold);}

/* ============ HERO ============ */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  padding:150px var(--pad) 90px;overflow:hidden;
}
.hero::before{ /* vignette */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 20% 40%,rgba(10,10,10,0) 30%,rgba(10,10,10,.75) 100%);
}
.hero__text{position:relative;z-index:3;max-width:min(760px,62vw);}
.eyebrow{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.26em;color:var(--muted);margin-bottom:clamp(30px,5vh,54px);
}
.eyebrow i{color:var(--gold);font-style:normal;font-size:8px;letter-spacing:0;animation:pulseDot 3.4s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{opacity:.4;}50%{opacity:1;}}
.eyebrow .rule{display:block;width:clamp(40px,6vw,90px);height:1px;background:rgba(240,235,224,.22);}
.hero__title{
  font-size:clamp(56px,12vw,200px);line-height:.86;font-weight:600;
  letter-spacing:-.05em;color:var(--ink);
  margin-left:-.025em;
  position:relative;z-index:4;
}
.hero__sub{margin-top:clamp(14px,2.2vh,26px);}
.hero__cn{
  display:block;font-size:clamp(34px,4.9vw,80px);line-height:1.12;font-weight:600;
  letter-spacing:.02em;color:var(--ink);
}
.hero__name{
  display:block;margin-top:6px;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(40px,5.6vw,92px);line-height:1.14;letter-spacing:.04em;
  color:var(--gold);
}
.hero__name::selection{background:var(--gold);color:#0a0a0a;}
.hero__desc{
  margin-top:clamp(34px,5vh,58px);max-width:480px;
  font-size:12.5px;line-height:2.1;letter-spacing:.06em;color:var(--muted);font-weight:300;
}
.scroll-hint{
  position:absolute;left:var(--pad);bottom:38px;z-index:3;
  display:flex;align-items:center;gap:12px;
  font-size:9px;letter-spacing:.3em;color:var(--muted-deep);
}
.scroll-hint span.line{display:block;width:44px;height:1px;background:linear-gradient(90deg,var(--gold-soft),transparent);}

/* ORB */
.orb-wrap{
  position:absolute;right:-6vw;top:52%;z-index:2;
  width:min(54vw,770px);aspect-ratio:1;translate:0 -50%;
  will-change:transform;
}
.orb{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(ellipse 52% 52% at 26% 19%,
      #fdf7e9 0%, #f3e3c2 6%, #dcc49b 14%, #b79a6d 24%,
      #8a7551 36%, #5d4d38 50%, #332a1e 66%, #16130e 82%, #060605 100%);
  box-shadow:
    inset -30px -50px 120px rgba(0,0,0,.95),
    inset 16px 20px 64px rgba(253,247,232,.13),
    inset 0 0 0 1px rgba(201,184,150,.10),
    0 0 150px rgba(201,184,150,.09);
}
.orb::after{ /* terminator / rim light */
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(52% 52% at 78% 80%, rgba(0,0,0,.60), transparent 62%);
  mix-blend-mode:multiply;
}
.orb__halo{
  position:absolute;inset:-18%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 34%, rgba(201,184,150,.16), transparent 60%);
  filter:blur(46px);
}
.orb__rings{
  position:absolute;inset:-16%;width:132%;height:132%;pointer-events:none;
  animation:spin 90s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============ SECTION SHELL ============ */
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(34px,6vh,64px);}
.sec-head .kick{
  font-size:9.5px;letter-spacing:.3em;color:var(--gold);opacity:.8;
}
.sec-head .idx{font-size:9.5px;letter-spacing:.2em;color:var(--muted-deep);margin-left:auto;}
.sec-title{
  font-size:clamp(38px,5.4vw,78px);font-weight:500;letter-spacing:-.02em;line-height:1.02;color:var(--ink);
}
.sec-title em{
  font-family:var(--serif);font-style:italic;font-weight:300;color:var(--gold);
  letter-spacing:.02em;margin-left:.18em;
}

/* ============ ABOUT ============ */
.about{padding:clamp(120px,15vh,190px) var(--pad) clamp(100px,14vh,170px);position:relative;}
.about__grid{
  display:grid;grid-template-columns:0.82fr 1fr;
  gap:clamp(44px,7vw,120px);align-items:start;
}
@media (min-width:1181px){ .about__grid{padding-right:clamp(24px,4vw,72px);} }
.portrait{position:relative;}
.portrait__frame{
  position:relative;width:100%;aspect-ratio:.82;overflow:hidden;border-radius:2px;
  background:
    radial-gradient(70% 55% at 22% 18%, rgba(201,184,150,.16), transparent 64%),
    linear-gradient(160deg,#171614,#0c0c0c 62%,#080808);
  border:1px solid rgba(201,184,150,.08);
}
.portrait__frame::before{ /* soft light streak */
  content:'';position:absolute;left:-20%;top:8%;width:46%;height:120%;
  background:linear-gradient(96deg,rgba(240,235,224,.14),transparent 70%);
  filter:blur(26px);
}
.portrait__frame::after{ /* silhouette suggestion */
  content:'';position:absolute;left:26%;bottom:-6%;width:48%;height:62%;
  border-radius:50% 50% 42% 42% / 62% 62% 38% 38%;
  background:linear-gradient(180deg,rgba(240,235,224,.10),rgba(240,235,224,.02) 55%,transparent);
  filter:blur(2px);
}
.portrait__mark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
  font-family:var(--serif);font-size:clamp(56px,7vw,104px);font-weight:300;
  letter-spacing:.12em;color:rgba(201,184,150,.5);line-height:1;z-index:2;
}
.portrait figcaption{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:16px;padding-top:12px;border-top:1px solid rgba(240,235,224,.10);
  font-size:9.5px;letter-spacing:.2em;color:var(--muted-deep);
}
.portrait figcaption .l{color:var(--muted);letter-spacing:.24em;}

.about__copy{padding-top:6px;}
.about__copy p{
  font-size:13.5px;line-height:2.16;letter-spacing:.045em;color:#9b9b9b;font-weight:300;
  margin-bottom:clamp(22px,3.4vh,32px);max-width:640px;
}
.about__copy p strong{color:var(--ink);font-weight:400;}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px;margin:clamp(34px,5vh,50px) 0 clamp(40px,6vh,62px);
  padding:clamp(22px,3vh,30px) 0;border-top:1px solid rgba(240,235,224,.10);border-bottom:1px solid rgba(240,235,224,.10);
}
.stat b{
  display:block;font-size:clamp(40px,4.6vw,66px);font-weight:400;letter-spacing:-.03em;
  line-height:1;color:var(--ink);
}
.stat span{
  display:block;margin-top:12px;font-size:9.5px;letter-spacing:.26em;color:var(--gold);opacity:.85;
}

.dirs li{
  display:flex;align-items:baseline;gap:clamp(14px,2vw,26px);
  padding:16px 0;border-bottom:1px solid rgba(240,235,224,.07);
  transition:padding-left .5s var(--ease),background .5s;
}
.dirs li:first-child{border-top:1px solid rgba(240,235,224,.07);}
.dirs li:hover{padding-left:10px;}
.dirs .n{font-size:10px;letter-spacing:.14em;color:var(--gold);min-width:22px;}
.dirs .t{font-size:13px;letter-spacing:.06em;color:var(--ink);font-weight:400;}
.dirs .tools{margin-left:auto;font-size:10px;letter-spacing:.14em;color:var(--muted-deep);text-align:right;}

/* ============ WORK ============ */
.work{padding:clamp(90px,12vh,140px) 0 clamp(80px,10vh,120px);position:relative;}
.work__head{padding:0 var(--pad);}
.work__list{margin-top:clamp(60px,9vh,110px);}
.work__item{
  display:grid;grid-template-columns:1.92fr 1fr;
  gap:clamp(18px,2.2vw,34px);
  margin-bottom:clamp(140px,46vh,460px);
  padding:0 var(--pad);
  align-items:stretch;
}
.work__item:last-child{margin-bottom:0;}
.work__media{
  position:relative;overflow:hidden;background:#0d0d0d;
  height:clamp(430px,74vh,740px);
  border-radius:1px;
}
.work__media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 120px rgba(0,0,0,.55);
}
.art{
  position:absolute;inset:0;overflow:hidden;
  filter:brightness(.78) saturate(.96);
  transition:filter .9s var(--ease),transform 1.6s var(--ease);
  will-change:filter,transform;
}
.work__media:hover .art{filter:brightness(1.02);transform:scale(1.045);}

.work__card{
  background:var(--panel);border:1px solid rgba(201,184,150,.09);
  padding:clamp(24px,2.6vw,40px);
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  transition:border-color .7s var(--ease),background .7s var(--ease);
  min-height:100%;
}
.work__card:hover{border-color:rgba(201,184,150,.34);background:#161616;}
.card__top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.card__num{font-size:10px;letter-spacing:.2em;color:var(--gold);}
.card__cat{font-size:9.5px;letter-spacing:.18em;color:var(--muted);text-align:right;}
.card__title{
  font-family:var(--serif);font-size:clamp(30px,2.9vw,44px);font-weight:400;
  letter-spacing:.02em;color:var(--ink);line-height:1.16;margin-top:18px;
}
.card__en{
  font-size:9.5px;letter-spacing:.28em;color:var(--muted-deep);
  margin-top:14px;line-height:1.9;
}
.card__desc{
  margin-top:18px;padding-top:18px;border-top:1px solid rgba(240,235,224,.08);
  font-size:12px;line-height:2;letter-spacing:.05em;color:#929292;font-weight:300;
}
.card__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;}
.card__tags span{
  font-size:9px;letter-spacing:.1em;color:#9d9d9d;
  border:1px solid rgba(240,235,224,.13);border-radius:999px;padding:5px 9px;
  transition:border-color .5s,color .5s;white-space:nowrap;
}
.work__card:hover .card__tags span{border-color:rgba(201,184,150,.28);}
.view{
  display:inline-flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:26px;padding:13px 18px;
  border:1px solid rgba(201,184,150,.42);
  font-size:10px;letter-spacing:.22em;color:var(--gold);
  transition:background .55s var(--ease),color .55s var(--ease),border-color .55s;
  align-self:flex-start;cursor:pointer;
}
.view i{font-style:normal;transition:transform .5s var(--ease);}
.view:hover{background:var(--gold);color:#0a0a0a;border-color:var(--gold);}
.view:hover i{transform:translate(3px,-3px);}

/* ---------- ART: 织梦师 ---------- */
.art--dream{
  background:
    radial-gradient(52% 48% at 44% 40%, rgba(201,184,150,.22), rgba(201,184,150,0) 68%),
    radial-gradient(46% 42% at 82% 80%, rgba(92,74,52,.20), transparent 70%),
    linear-gradient(165deg,#121110 0%,#09090a 64%,#060606 100%);
}
.art--dream::before{
  content:'';position:absolute;inset:-12%;
  background:repeating-radial-gradient(circle at 44% 40%, rgba(201,184,150,.07) 0 1px, transparent 1px 16px);
  -webkit-mask-image:radial-gradient(60% 56% at 44% 40%, #000 6%, transparent 78%);
  mask-image:radial-gradient(60% 56% at 44% 40%, #000 6%, transparent 78%);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:scale(1.1) translate(-2%,1.5%);}}
.art--dream::after{ /* 轨道涟漪 */
  content:'';position:absolute;inset:-10%;
  background:radial-gradient(circle at 44% 40%,
    transparent 0 20%, rgba(201,184,150,.12) 20% 20.13%,
    transparent 20.13% 34%, rgba(201,184,150,.085) 34% 34.11%,
    transparent 34.11% 49%, rgba(201,184,150,.06) 49% 49.1%,
    transparent 49.1% 66%, rgba(201,184,150,.04) 66% 66.08%,
    transparent 66.08%);
}
.disc{ /* 日蚀 */
  position:absolute;left:44%;top:40%;height:76%;width:auto;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 33% 26%, #382e1e 0%, #1c1710 46%, #0b0a08 76%, #050505 100%);
  box-shadow:
    inset 5px 7px 3px -3px rgba(235,220,188,.34),
    0 0 0 1px rgba(201,184,150,.46),
    0 0 46px rgba(201,184,150,.26),
    0 0 150px rgba(201,184,150,.10),
    inset 0 0 80px rgba(0,0,0,.92);
}
.art--dream .pt{
  position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 10px rgba(201,184,150,.85);opacity:.6;
}

/* ---------- ART: 陪伴 ---------- */
.art--warm{
  background:
    radial-gradient(34% 40% at 66% 32%, rgba(246,234,208,.40), rgba(246,234,208,0) 66%),
    radial-gradient(62% 55% at 22% 84%, rgba(94,72,48,.34), transparent 72%),
    linear-gradient(168deg,#16130e 0%,#0b0a09 56%,#060606 100%);
}
.art--warm::after{ /* vignette */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 105% at 50% 50%, transparent 34%, rgba(0,0,0,.72) 100%);
}
.win{
  position:absolute;left:54%;top:12%;width:30%;height:44%;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:5px;
  transform:rotate(-4deg);filter:blur(5px);
}
.win span{display:block;background:linear-gradient(180deg,rgba(244,214,160,.50),rgba(196,158,106,.14));border-radius:2px;box-shadow:0 0 30px rgba(238,198,140,.30);}
.floor{ /* 光线落地 */
  position:absolute;left:46%;top:50%;width:52%;height:36%;
  background:linear-gradient(180deg,rgba(248,232,200,.22),transparent 84%);
  filter:blur(24px);transform:skewX(-9deg);pointer-events:none;
}

/* ---------- ART: 海屿小精灵 ---------- */
.art--ip::before{
  content:'';position:absolute;left:50%;top:-14%;width:48%;height:72%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0%, rgba(240,229,205,.16), transparent 72%);
  filter:blur(18px);
}
.art--ip{
  background:
    radial-gradient(52% 46% at 50% 30%, rgba(201,184,150,.18), transparent 72%),
    radial-gradient(80% 60% at 50% 100%, rgba(60,50,36,.28), transparent 70%),
    linear-gradient(180deg,#131211 0%,#0b0a0a 78%);
}
.fig{
  position:absolute;border-radius:50% 50% 44% 44% / 58% 58% 42% 42%;
  background:radial-gradient(58% 52% at 34% 24%, #efe0bd 0%, #c0ab86 40%, #6e5f46 76%, #241f17 100%);
  box-shadow:inset -10px -14px 28px rgba(0,0,0,.55), 0 26px 60px rgba(0,0,0,.62), 0 0 46px rgba(201,184,150,.07);
}
.fig--a{left:36%;top:23%;height:36%;width:auto;aspect-ratio:1/1.06;animation:bobA 9s ease-in-out infinite;}
.fig--b{left:22%;top:46%;height:23%;width:auto;aspect-ratio:1/1.04;opacity:.75;animation:bobB 11s ease-in-out infinite;}
.fig--c{right:20%;top:43%;height:26%;width:auto;aspect-ratio:1/1.05;opacity:.65;animation:bobB 13s ease-in-out infinite reverse;}
@keyframes bobA{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes bobB{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.art--ip::after{ /* 地面反光 */
  content:'';position:absolute;left:12%;right:12%;bottom:13%;height:26%;
  background:radial-gradient(50% 100% at 50% 0%, rgba(201,184,150,.18), transparent 72%);
  filter:blur(14px);pointer-events:none;
}
.pedestal{
  position:absolute;left:12%;right:12%;bottom:15%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,184,150,.4),transparent);
  box-shadow:0 0 26px rgba(201,184,150,.18);
}

/* ---------- ART: UI ---------- */
.art--ui{background:linear-gradient(158deg,#161514 0%,#0a0a0a 70%);display:flex;align-items:center;justify-content:center;}
.ui{
  width:80%;height:74%;background:#101010;border:1px solid rgba(201,184,150,.13);
  border-radius:7px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 44px 90px rgba(0,0,0,.65);
}
.ui__bar{display:flex;align-items:center;gap:6px;}
.ui__bar i{display:block;width:5px;height:5px;border-radius:50%;background:#3a3a3a;}
.ui__bar i:first-child{background:rgba(201,184,150,.55);}
.ui__bar em{margin-left:auto;display:block;width:26%;height:5px;border-radius:2px;background:#222;}
.ui__body{flex:1;display:grid;grid-template-columns:0.36fr 1fr;gap:10px;}
.ui__side{display:flex;flex-direction:column;gap:7px;padding-top:4px;}
.ui__side b{display:block;height:6px;border-radius:2px;background:#242424;}
.ui__side b:nth-child(1){width:80%;background:rgba(201,184,150,.45);}
.ui__side b:nth-child(2){width:62%;}
.ui__side b:nth-child(3){width:72%;}
.ui__side b:nth-child(4){width:50%;}
.ui__side b:nth-child(5){width:66%;}
.ui__main{display:flex;flex-direction:column;gap:10px;}
.ui__row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.ui__tile{height:44px;border-radius:4px;background:#181818;border:1px solid rgba(240,235,224,.05);position:relative;overflow:hidden;}
.ui__tile::after{content:'';position:absolute;left:8px;bottom:8px;width:40%;height:4px;border-radius:2px;background:#2c2c2c;}
.ui__tile.g{background:linear-gradient(140deg,rgba(201,184,150,.30),rgba(201,184,150,.04));border-color:rgba(201,184,150,.22);}
.ui__tile.g::after{background:rgba(240,235,224,.5);}
.ui__chart{flex:1;display:flex;align-items:flex-end;gap:6px;padding:6px 4px 0;border-top:1px solid rgba(240,235,224,.06);}
.ui__chart i{display:block;flex:1;height:var(--h,40%);border-radius:2px 2px 0 0;background:linear-gradient(180deg,rgba(201,184,150,.55),rgba(201,184,150,.08));}

/* ---------- ART: H5 ---------- */
.art--h5{
  background:
    radial-gradient(50% 44% at 46% 42%, rgba(201,184,150,.14), transparent 70%),
    linear-gradient(160deg,#141312,#090909 76%);
  display:flex;align-items:center;justify-content:center;gap:26px;
}
.phone{
  position:relative;height:80%;width:auto;aspect-ratio:.485;border-radius:16px;
  background:#0f0f0f;border:1px solid rgba(201,184,150,.16);
  box-shadow:0 34px 70px rgba(0,0,0,.7),inset 0 0 30px rgba(0,0,0,.6);
  padding:9px;display:flex;flex-direction:column;gap:7px;overflow:hidden;
}
.phone::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:26%;height:3px;border-radius:2px;background:#2a2a2a;}
.phone--a{transform:translateY(-14px) rotate(-3deg);}
.phone--b{transform:translateY(14px) rotate(2.5deg);}
.phone__hero{
  margin-top:8px;height:34%;border-radius:5px;
  background:radial-gradient(60% 60% at 30% 25%, rgba(240,229,205,.5), rgba(201,184,150,.16) 45%, rgba(20,18,15,.9) 100%);
}
.phone--b .phone__hero{background:radial-gradient(60% 60% at 70% 30%, rgba(240,229,205,.34), rgba(160,136,96,.18) 45%, rgba(18,17,15,.95) 100%);}
.phone__ln{display:block;height:4px;border-radius:2px;background:#262626;}
.phone__ln.s{width:62%;}
.phone__ln.g{width:38%;background:rgba(201,184,150,.5);}
.phone__blk{flex:1;margin-top:2px;border-radius:5px;background:#161616;border:1px solid rgba(240,235,224,.05);}

/* ============ CONTACT ============ */
.contact{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(110px,14vh,170px) var(--pad) 40px;position:relative;
}
.contact::before{
  content:'';position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(70vw,760px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(201,184,150,.09),transparent 62%);
  filter:blur(30px);
}
.contact .kick{font-size:9.5px;letter-spacing:.3em;color:var(--gold);opacity:.85;margin-bottom:26px;position:relative;}
.contact__title{
  font-size:clamp(46px,7.4vw,116px);font-weight:500;letter-spacing:-.02em;line-height:1;
  color:var(--ink);position:relative;
}
.contact__title em{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--gold);margin-left:.16em;}
.contact__mail{
  display:inline-block;margin-top:clamp(40px,6vh,64px);
  font-size:clamp(17px,2.1vw,28px);letter-spacing:.06em;color:var(--gold);position:relative;
  padding-bottom:8px;
}
.contact__mail::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:rgba(201,184,150,.4);transform:scaleX(.35);transform-origin:left;
  transition:transform .7s var(--ease),background .5s;
}
.contact__mail:hover::after{transform:scaleX(1);background:var(--gold);}
.contact__note{
  margin-top:16px;font-size:10px;letter-spacing:.24em;color:var(--muted-deep);position:relative;
}
.foot{
  margin-top:clamp(60px,10vh,110px);padding-top:18px;width:100%;
  border-top:1px solid rgba(240,235,224,.07);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:9.5px;letter-spacing:.2em;color:var(--muted-deep);position:relative;
}
.foot .star{color:var(--gold);}

/* ============ RESPONSIVE ============ */
@media (max-width:1180px){
  .spy{display:none;}
  .hero__text{max-width:70vw;}
}
@media (max-width:960px){
  .about__grid{grid-template-columns:1fr;gap:44px;}
  .portrait{max-width:420px;}
  .work__item{grid-template-columns:1fr;gap:16px;}
  .work__media{height:clamp(320px,52vh,520px);}
  .work__card{min-height:auto;}
  .hero{min-height:auto;padding-top:130px;padding-bottom:80px;}
  .hero__text{max-width:100%;}
  .orb-wrap{
    right:-30vw;top:38%;width:86vw;opacity:.55;
  }
  .contact{min-height:auto;}
}
@media (max-width:700px){
  .brand__name em{display:none;}
  .nav__links{gap:16px;}
  .nav__item .n{display:none;}
  .nav__item .t{font-size:11px;letter-spacing:.12em;}
  .nav{height:64px;}
  .stats{grid-template-columns:repeat(3,1fr);gap:12px;}
  .dirs li{flex-wrap:wrap;gap:8px 14px;}
  .dirs .tools{margin-left:22px;text-align:left;width:100%;}
  .work__item{margin-bottom:96px;}
  .card__title{font-size:28px;}
  .foot{flex-direction:column;align-items:flex-start;gap:8px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;}
  .rv{opacity:1;transform:none;}
}

/* ==========================================================
   2026-11-05 追加：布局 / 按钮 / 目录 / 联系 / 签名
   ========================================================== */

/* ---------- 入场动画：淡入 + 轻微上移（幅度刻意克制，避免“弹跳感”） ---------- */
.rv{transform:translateY(26px);transition:opacity 1.15s var(--ease),transform 1.25s var(--ease);}
@media (max-width:700px){ .rv{transform:translateY(14px);} }

/* ---------- 区块留白整体加大 ---------- */
.about{padding:clamp(150px,20vh,270px) var(--pad) clamp(140px,19vh,230px);}
.work{padding:clamp(110px,15vh,190px) 0 clamp(120px,16vh,200px);}
.work__head{margin-bottom:clamp(20px,4vh,50px);}
.work__list{margin-top:clamp(60px,9vh,120px);}
.contact{padding:clamp(140px,18vh,220px) var(--pad) 40px;}

/* ---------- 作品区：80vw 16:9 大图 + 缩小信息卡 ---------- */
.work__item{
  display:flex;align-items:center;position:relative;
  padding:0;margin-bottom:clamp(180px,58vh,560px);
}
.work__item:last-child{margin-bottom:0;}
.work__media{
  flex:0 0 80vw;width:80vw;
  height:auto;aspect-ratio:16 / 9;
  background:#0d0d0d;position:relative;overflow:hidden;border-radius:0;
}
.work__media img{width:100%;height:100%;object-fit:cover;display:block;}
.work__card{
  --overlap:clamp(40px,6vw,100px);
  flex:0 0 auto;
  width:calc(20vw - var(--pad) + var(--overlap));
  min-width:238px;
  margin-left:calc(-1 * var(--overlap));
  position:relative;z-index:2;
  padding:clamp(20px,1.7vw,28px);
  min-height:0;gap:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.card__title{font-size:clamp(23px,2.1vw,32px);margin-top:12px;}
.card__en{font-size:8px;letter-spacing:.24em;margin-top:10px;}
.card__desc{font-size:10.5px;line-height:1.95;margin-top:14px;padding-top:14px;}
.card__num{font-size:9px;}
.card__cat{font-size:8px;letter-spacing:.14em;}
.card__tags{margin-top:16px;gap:6px;}
.card__tags span{font-size:8px;padding:4px 8px;letter-spacing:.08em;}

/* ---------- VIEW 按钮：暖金实心 ---------- */
.view{
  width:100%;margin-top:22px;padding:17px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--gold);border:1px solid var(--gold);color:#0a0a0a;
  font-size:11px;font-weight:600;letter-spacing:.2em;
  transition:background .45s var(--ease),transform .45s var(--ease),
             box-shadow .45s var(--ease),border-color .45s;
  will-change:transform;
}
.view i{font-style:normal;font-size:13px;transition:transform .45s var(--ease);}
.view:hover{
  background:#e0cfae;border-color:#e0cfae;
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(201,184,150,.26),0 4px 12px rgba(0,0,0,.4);
}
.view:hover i{transform:translate(3px,-3px);}
.view:active{transform:translateY(-1px);box-shadow:0 8px 18px rgba(201,184,150,.2);}

/* ---------- 创作方向：可点击 + 箭头 ---------- */
.dirs li{padding:0;border:0;}
.dirs li:first-child{border-top:0;}
.dirs a.dirrow{
  display:flex;align-items:baseline;gap:clamp(14px,2vw,26px);
  padding:17px 0;border-bottom:1px solid rgba(240,235,224,.07);
  transition:padding-left .5s var(--ease),background .5s;
}
.dirs li:first-child a.dirrow{border-top:1px solid rgba(240,235,224,.07);}
.dirs a.dirrow:hover{padding-left:10px;}
.dirs a.dirrow .t,.dirs a.dirrow .tools{transition:color .45s var(--ease);}
.dirs a.dirrow:hover .t{color:#fff;}
.dirs a.dirrow:hover .tools{color:var(--gold);}
.dirs .arw{
  color:var(--gold);font-size:12px;opacity:0;transform:translateX(-8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.dirs a.dirrow:hover .arw{opacity:1;transform:none;}

/* ---------- 联系区：姓名 / 电话 / 邮箱 ---------- */
.contact__rows{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,2.4vh,22px);margin-top:clamp(36px,6vh,64px);position:relative;
}
.contact__rows .cname{
  font-size:clamp(20px,2.2vw,30px);letter-spacing:.1em;color:var(--gold);
  font-weight:500;
}
.contact__rows a{
  color:var(--gold);font-size:clamp(14px,1.45vw,19px);letter-spacing:.06em;
  position:relative;padding-bottom:5px;transition:color .4s;
}
.contact__rows a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:rgba(201,184,150,.38);transform:scaleX(.28);transform-origin:center;
  transition:transform .65s var(--ease),background .4s;
}
.contact__rows a:hover{color:#e6d7b6;}
.contact__rows a:hover::after{transform:scaleX(1);background:var(--gold);}
.contact__note{margin-top:26px;}

/* ---------- 极小的 LIU YUE 签名 ---------- */
.sig{
  position:absolute;right:var(--pad);bottom:30px;z-index:3;
  font-size:8px;letter-spacing:.36em;color:#383838;font-weight:400;
  pointer-events:none;user-select:none;transition:color .6s var(--ease);
}
.sig--left{right:auto;left:var(--pad);}
.sig--top{bottom:auto;top:104px;}
.work .sig{bottom:40px;}
body:hover .sig{color:#464646;}

/* ---------- 响应式：作品区在窄屏堆叠 ---------- */
@media (max-width:1100px){
  .work__item{display:block;margin-bottom:clamp(110px,26vh,240px);}
  .work__media{width:100%;aspect-ratio:16 / 9;}
  .work__card{
    width:auto;min-width:0;margin:-56px 20px 0 20px;
    padding:22px;
  }
  .card__title{font-size:26px;}
}
@media (max-width:700px){
  .work__card{margin:-38px 16px 0 16px;}
  .view{padding:15px 18px;font-size:10.5px;}
  .card__title{font-size:23px;}
  .contact__rows{gap:14px;}
  .sig{bottom:20px;}
}

/* ==========================================================
   真实图片接入（作品封面 / 个人照片）
   ========================================================== */

/* ---------- 作品封面：铺满 16:9 画框，悬停亮度与缩放沿用 .art ---------- */
.art--photo{
  background:#0d0d0d;
  filter:brightness(.86) saturate(.98);
}
.art--photo img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;
  -webkit-user-drag:none;
}

/* ---------- 关于区个人照片 ---------- */
.portrait__frame.is-photo{border-color:rgba(201,184,150,.13);}
.portrait__frame.is-photo::before,
.portrait__frame.is-photo::after{display:none;}
.portrait__img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 34%;
  filter:brightness(.94) saturate(.97);
  transition:filter 1.1s var(--ease),transform 1.9s var(--ease);
  will-change:filter,transform;
}
.portrait__frame:hover .portrait__img{filter:brightness(1.02) saturate(1);transform:scale(1.028);}

/* ---------- 详情页封面 ---------- */
.dhero__art .art--photo img{width:100%;height:100%;object-fit:cover;object-position:center;}

/* ==========================================================
   页面过渡 PageFX（列表 ↔ 详情）
   ========================================================== */

/* 首帧保护：带 ?fx= 进入时先隐藏正文，避免露出未上色的页面 */
html.fx-boot body{visibility:hidden;}
html.fx-boot::before{
  content:'';position:fixed;inset:0;background:#0a0a0a;z-index:9998;pointer-events:none;
}

/* 黑色遮罩：从中心向四周扩散 */
.fx-mask{
  position:fixed;inset:0;z-index:9998;background:#0a0a0a;
  opacity:0;clip-path:circle(0% at 50% 50%);
  pointer-events:none;
  transition:opacity .46s ease,
             clip-path .58s cubic-bezier(.22,.68,.24,1);
  will-change:opacity,clip-path;
}
.fx-mask.is-on{opacity:1;clip-path:circle(140% at 50% 50%);}

/* 飞行封面：从作品卡片位置放大到详情页封面区 */
.fx-fly{
  position:fixed;z-index:9999;overflow:hidden;pointer-events:none;
  background:#0a0a0a;opacity:0;
  transition:left .94s cubic-bezier(.16,1,.3,1),
             top .94s cubic-bezier(.16,1,.3,1),
             width .94s cubic-bezier(.16,1,.3,1),
             height .94s cubic-bezier(.16,1,.3,1),
             opacity .16s linear;
  will-change:left,top,width,height,opacity;
}
.fx-fly img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center top;
}

/* ---------- 创作方向：可点击提示更明确 ---------- */
.dirs a.dirrow{cursor:pointer;}
.dirs a.dirrow .n{transition:color .45s var(--ease);}
.dirs a.dirrow:hover .n{color:#e6d7b6;}
.dirs .arw{font-size:13px;line-height:1;margin-left:2px;}
.dirs a.dirrow:hover{background:linear-gradient(90deg,rgba(201,184,150,.05),transparent 62%);}