/* =============================================================================
   YaoYanKai.PM — Design System
   深色 · 科技 · 克制。核心思路：大留白 + 单一强调色 + 分层玻璃 + 精准节奏。
   ============================================================================= */

/* ----------------------------- Tokens ----------------------------- */
:root{
  --bg:            #07080b;
  --bg-2:          #0b0d12;
  --bg-3:          #101319;
  --surface:       rgba(255,255,255,.045);
  --surface-2:     rgba(255,255,255,.075);
  --line:          rgba(255,255,255,.10);
  --line-2:        rgba(255,255,255,.16);

  --text:          #f4f5f7;
  --text-2:        #a8adb8;
  --text-3:        #6d737f;

  --accent:        #ff5a1f;
  --accent-2:      #ff8f4d;
  --accent-glow:   rgba(255,90,31,.42);
  --cyan:          #4fe3c1;

  --font-sans: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'PingFang SC',
               'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Songti SC', serif;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-io:   cubic-bezier(.65,.05,.36,1);

  --pad: clamp(20px, 5vw, 88px);
  --maxw: 1320px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 38px;
}

/* ----------------------------- Reset ----------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:92px;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.03em; line-height:1.1; }
p{ margin:0; }
em{ font-style:normal; }
::selection{ background:var(--accent); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#05060a; }
::-webkit-scrollbar-thumb{ background:#242830; border-radius:20px; border:2px solid #05060a; }
::-webkit-scrollbar-thumb:hover{ background:#343945; }

/* ----------------------------- Cursor ----------------------------- */
.cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; mix-blend-mode:difference; opacity:0; transition:opacity .4s var(--ease); }
.cursor__dot{
  position:absolute; width:5px; height:5px; border-radius:50%; background:#fff;
  transform:translate(-50%,-50%);
}
.cursor__ring{
  position:absolute; width:34px; height:34px; border:1.5px solid rgba(255,255,255,.75);
  border-radius:50%; transform:translate(-50%,-50%);
  transition:width .35s var(--ease-out), height .35s var(--ease-out),
             background-color .35s var(--ease-out), border-color .35s var(--ease-out);
}
body.cursor-link .cursor__ring{ width:58px; height:58px; background:rgba(255,255,255,.14); border-color:transparent; }
body.cursor-link .cursor__dot{ opacity:0; }
@media (hover:none),(max-width:900px){ .cursor{ display:none; } }

/* ----------------------------- Preloader ----------------------------- */
.preloader{
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:grid; place-items:center; transition:opacity .8s var(--ease-out), visibility .8s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.preloader__name{
  font-size:clamp(26px,4vw,42px); font-weight:900; letter-spacing:-.05em;
  display:flex; gap:1px; overflow:hidden;
}
.preloader__name span,.preloader__name em{ display:block; animation:preUp .9s var(--ease-out) both; }
.preloader__name em{ color:var(--accent); }
@keyframes preUp{ from{ transform:translateY(110%); } to{ transform:translateY(0); } }
.preloader__bar{ width:180px; height:2px; background:rgba(255,255,255,.1); overflow:hidden; border-radius:2px; }
.preloader__bar i{ display:block; height:100%; width:0%; background:var(--accent); transition:width .25s linear; }
.preloader__pct{ font-size:11px; letter-spacing:.34em; color:var(--text-3); font-variant-numeric:tabular-nums; }

/* ----------------------------- Scroll progress ----------------------------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:900;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 14px var(--accent-glow);
}

/* ----------------------------- Nav ----------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  transition:transform .5s var(--ease-out), background-color .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{ background:rgba(7,8,11,.72); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); border-bottom-color:var(--line); }
.nav.is-hidden{ transform:translateY(-102%); }
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:18px var(--pad);
  display:flex; align-items:center; gap:26px; transition:padding .4s var(--ease);
}
.nav.is-stuck .nav__inner{ padding-top:12px; padding-bottom:12px; }
.nav__logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav__logo-mark{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-weight:900; font-size:14px; letter-spacing:-.04em;
  box-shadow:0 6px 18px var(--accent-glow);
}
.nav__logo-text{ font-weight:700; letter-spacing:-.035em; font-size:16px; }
.nav__logo-text em{ color:var(--accent); }
.nav__links{ display:flex; gap:6px; margin-left:auto; }
.nav__links a{
  position:relative; padding:8px 14px; font-size:14px; color:var(--text-2);
  border-radius:99px; transition:color .3s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__actions{ display:flex; gap:10px; align-items:center; }

/* ----------------------------- Buttons ----------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:10px 18px; border-radius:99px; font-size:14px; font-weight:600;
  letter-spacing:-.01em; white-space:nowrap; position:relative; overflow:hidden;
  transition:transform .4s var(--ease-out), background-color .35s var(--ease),
             border-color .35s var(--ease), color .35s var(--ease), box-shadow .4s var(--ease);
}
.btn svg{ transition:transform .4s var(--ease-out); }
.btn--solid{ background:var(--accent); color:#fff; box-shadow:0 8px 26px -8px var(--accent-glow); }
.btn--solid:hover{ background:var(--accent-2); box-shadow:0 14px 34px -10px var(--accent-glow); }
.btn--solid:hover svg{ transform:translateX(3px); }
.btn--outline{ border:1px solid var(--line-2); color:var(--text); }
.btn--outline:hover{ border-color:var(--accent); color:var(--accent); background:rgba(255,90,31,.07); }
.btn--ghost{ border:1px solid var(--line); color:var(--text-2); }
.btn--ghost:hover{ border-color:var(--line-2); color:var(--text); background:var(--surface); }
.btn--lg{ padding:15px 28px; font-size:15.5px; }
.btn--sm{ padding:8px 15px; font-size:13px; }
.btn:active{ transform:scale(.97); }

/* ----------------------------- Hero ----------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:130px var(--pad) 90px; overflow:hidden;
}
.hero__mesh{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.mesh{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.mesh--1{ width:640px; height:640px; left:-12%; top:-18%; background:radial-gradient(circle,rgba(255,90,31,.5),transparent 68%); animation:drift1 22s var(--ease-io) infinite; }
.mesh--2{ width:560px; height:560px; right:-10%; top:8%; background:radial-gradient(circle,rgba(79,227,193,.28),transparent 68%); animation:drift2 26s var(--ease-io) infinite; }
.mesh--3{ width:520px; height:520px; left:44%; bottom:-24%; background:radial-gradient(circle,rgba(255,143,77,.22),transparent 70%); animation:drift1 30s var(--ease-io) infinite reverse; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(60px,44px) scale(1.14); } }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1.05); } 50%{ transform:translate(-70px,50px) scale(.92); } }
.mesh__grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 35%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 35%,#000 30%,transparent 78%);
}
.hero__inner{
  position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; width:100%;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,74px); align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding:7px 15px 7px 12px;
  border:1px solid var(--line); border-radius:99px; background:var(--surface);
  font-size:13px; color:var(--text-2); letter-spacing:.01em; backdrop-filter:blur(10px);
  margin-bottom:26px;
}
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-glow); animation:pulse 2.4s var(--ease-io) infinite;
}
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,90,31,.6); } 70%{ box-shadow:0 0 0 10px rgba(255,90,31,0); } 100%{ box-shadow:0 0 0 0 rgba(255,90,31,0); } }
.eyebrow__sep{ color:var(--text-3); }
.eyebrow__italic{ font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--text); }

.hero__title{
  font-size:clamp(38px,6.4vw,84px); font-weight:900; letter-spacing:-.045em; line-height:1.02;
  margin-bottom:26px;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; }
.hero__title .line > span{ display:block; transform:translateY(105%); animation:lineUp 1.05s var(--ease-out) forwards; }
.hero__title .line:nth-child(1) > span{ animation-delay:.12s; }
.hero__title .line:nth-child(2) > span{ animation-delay:.24s; }
.hero__title .line:nth-child(3) > span{ animation-delay:.36s; }
@keyframes lineUp{ to{ transform:translateY(0); } }
.line--sm > span{ padding-top:14px; }
.hero__sub{
  display:block; font-family:var(--font-sans); font-size:clamp(15px,1.5vw,19px);
  font-weight:400; letter-spacing:-.01em; color:var(--text-2); line-height:1.5;
}
.hl{ color:var(--accent); position:relative; }
.hl::after{
  content:''; position:absolute; left:0; bottom:.06em; height:.055em; width:100%;
  background:var(--accent); opacity:.4; border-radius:2px;
  transform:scaleX(0); transform-origin:left; animation:hlIn 1s var(--ease-out) .9s forwards;
}
@keyframes hlIn{ to{ transform:scaleX(1); } }

.hero__desc{
  font-size:clamp(15px,1.15vw,17px); color:var(--text-2); line-height:1.78;
  max-width:600px; margin-bottom:34px;
}
.hero__cta{ display:flex; gap:13px; flex-wrap:wrap; margin-bottom:46px; }
.hero__meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:0;
  padding-top:26px; border-top:1px solid var(--line); max-width:660px;
}
.hero__meta dt{ font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-3); margin-bottom:7px; }
.hero__meta dd{ margin:0; font-size:14px; font-weight:600; letter-spacing:-.015em; line-height:1.45; }

/* Portrait */
.hero__visual{ display:flex; justify-content:center; }
.portrait{ position:relative; width:100%; max-width:390px; }
.portrait__arch{
  position:relative; border-radius:200px 200px var(--r-xl) var(--r-xl); overflow:hidden;
  border:1px solid var(--line-2); background:var(--bg-2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.portrait__arch img{
  width:100%; height:auto; display:block; filter:grayscale(.28) contrast(1.06) brightness(.95);
  transform:scale(1.04); transition:transform 1.4s var(--ease-out), filter 1.4s var(--ease);
}
.portrait:hover .portrait__arch img{ transform:scale(1.09); filter:grayscale(0) contrast(1.08) brightness(1.02); }
.portrait__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(7,8,11,.28) 0%,transparent 26%,transparent 58%,rgba(7,8,11,.86) 100%);
}
.portrait__glow{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .8s var(--ease);
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,40%),rgba(255,90,31,.24),transparent 62%);
}
.portrait:hover .portrait__glow{ opacity:1; }
.portrait__tag{
  position:absolute; display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:11px 17px; border-radius:var(--r-md); background:rgba(14,16,21,.82);
  border:1px solid var(--line-2); backdrop-filter:blur(16px); z-index:2;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.8);
}
.portrait__tag b{ font-size:22px; font-weight:900; letter-spacing:-.05em; line-height:1; }
.portrait__tag span{ font-size:11px; color:var(--text-3); letter-spacing:.06em; }
.portrait__tag--tl{ top:34px; left:-22px; animation:floaty 6s var(--ease-io) infinite; }
.portrait__tag--br{ bottom:56px; right:-22px; animation:floaty 6s var(--ease-io) infinite reverse; }
.portrait__tag--tl b{ color:var(--accent); }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-11px); } }

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2;
}
.scroll-cue__track{ width:1px; height:48px; background:rgba(255,255,255,.14); overflow:hidden; position:relative; }
.scroll-cue__track i{ position:absolute; inset:0; background:var(--accent); animation:cueRun 2.1s var(--ease-io) infinite; }
@keyframes cueRun{ 0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(100%); } }
.scroll-cue__txt{ font-size:9.5px; letter-spacing:.34em; color:var(--text-3); }

/* ----------------------------- Marquee ----------------------------- */
.marquee{
  position:relative; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-2); overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__row{ display:flex; width:max-content; }
.marquee__track{
  display:flex; align-items:center; gap:38px; padding-right:38px;
  animation:marquee 42s linear infinite; white-space:nowrap;
}
.marquee__track span{ font-size:19px; font-weight:700; letter-spacing:-.03em; color:var(--text-2); transition:color .3s; }
.marquee__track span:hover{ color:var(--text); }
.marquee__track i{ width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.55; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ----------------------------- Sections ----------------------------- */
.section{ max-width:var(--maxw); margin:0 auto; padding:clamp(80px,11vw,150px) var(--pad); position:relative; }
.section__head{ margin-bottom:clamp(40px,5.5vw,72px); }
.section__head--center{ text-align:center; }
.section__label{
  font-size:11.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent);
  font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:9px;
}
.section__head--center .section__label{ justify-content:center; }
.section__label::before{ content:''; width:26px; height:1px; background:var(--accent); }
.section__title{ font-size:clamp(32px,4.6vw,60px); font-weight:900; letter-spacing:-.045em; }
.section__title em{ color:var(--accent); font-weight:400; margin:0 .12em; }
.section__lead{ margin-top:20px; font-size:clamp(15px,1.15vw,17px); color:var(--text-2); line-height:1.8; max-width:640px; }
.section__head--center .section__lead{ margin-left:auto; margin-right:auto; }

/* ----------------------------- Spotlight ----------------------------- */
.spotlight{
  display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(24px,3.4vw,50px);
  align-items:center; padding:clamp(20px,2.6vw,34px);
  border:1px solid var(--line); border-radius:var(--r-xl); background:var(--surface);
  margin-bottom:clamp(52px,6vw,88px); position:relative; overflow:hidden;
  transition:border-color .6s var(--ease), background-color .6s var(--ease);
}
.spotlight::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(700px circle at var(--mx,50%) var(--my,50%),rgba(255,90,31,.10),transparent 62%);
  opacity:0; transition:opacity .5s var(--ease);
}
.spotlight:hover::before{ opacity:1; }
.spotlight:hover{ border-color:var(--line-2); }
.spotlight__media{
  position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9); background:#08090c;
}
.spotlight__media img{ width:100%; height:auto; display:block; transition:transform 1.1s var(--ease-out); }
.spotlight:hover .spotlight__media img{ transform:scale(1.045); }
.spotlight__sheen{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.13) 48%,transparent 62%);
  transform:translateX(-120%); transition:transform 1.1s var(--ease-out);
}
.spotlight:hover .spotlight__sheen{ transform:translateX(120%); }
.spotlight__body{ padding:clamp(8px,1.6vw,26px) clamp(6px,1.4vw,22px); }
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:99px;
  background:rgba(255,90,31,.1); border:1px solid rgba(255,90,31,.28); color:var(--accent);
  font-size:12.5px; font-weight:600; margin-bottom:18px;
}
.spotlight__title{ font-size:clamp(24px,2.8vw,40px); font-weight:900; letter-spacing:-.04em; margin-bottom:16px; line-height:1.14; }
.spotlight__desc{ font-size:15.5px; color:var(--text-2); line-height:1.78; margin-bottom:26px; }
.metrics{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.metrics li{
  flex:1 1 100px; padding:14px 15px; border-radius:var(--r-md);
  background:var(--bg-3); border:1px solid var(--line);
  transition:border-color .4s var(--ease), transform .5s var(--ease-out);
}
.metrics li:hover{ border-color:rgba(255,90,31,.4); transform:translateY(-3px); }
.metrics b{
  display:block; font-size:clamp(17px,1.7vw,22px); font-weight:900; letter-spacing:-.04em;
  color:var(--text); line-height:1.25; word-break:keep-all;
}
.metrics span{ display:block; margin-top:5px; font-size:12.5px; color:var(--text-3); }

/* ----------------------------- Work grid ----------------------------- */
.work__toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-bottom:26px; padding-bottom:18px; border-bottom:1px solid var(--line);
}
.work__toolbar > span{ font-size:13px; color:var(--text-3); letter-spacing:.02em; }
.work__filters{ display:flex; gap:7px; flex-wrap:wrap; }
.pill{
  padding:7px 15px; border-radius:99px; border:1px solid var(--line); font-size:13px;
  color:var(--text-2); transition:all .35s var(--ease);
}
.pill:hover{ border-color:var(--line-2); color:var(--text); }
.pill.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }

.work__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:clamp(16px,1.8vw,24px); }
.card{
  position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:var(--bg-2); display:flex; flex-direction:column;
  transform-style:preserve-3d; transition:transform .5s var(--ease-out), border-color .5s var(--ease), box-shadow .5s var(--ease);
  will-change:transform;
}
.card:hover{ border-color:var(--line-2); box-shadow:0 30px 60px -28px rgba(0,0,0,.85); }
.card__media{ position:relative; overflow:hidden; aspect-ratio:4/3; background:#08090c; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out), filter .6s var(--ease); }
.card:hover .card__media img{ transform:scale(1.07); }
.card__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(7,8,11,.72) 100%);
}
.card__badge{
  position:absolute; top:14px; left:14px; z-index:2; padding:5px 11px; border-radius:99px;
  background:rgba(10,12,16,.76); border:1px solid var(--line-2); backdrop-filter:blur(12px);
  font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--text);
}
.card__year{
  position:absolute; top:14px; right:14px; z-index:2; padding:5px 10px; border-radius:99px;
  background:rgba(10,12,16,.76); border:1px solid var(--line); backdrop-filter:blur(12px);
  font-size:11px; color:var(--text-2); font-variant-numeric:tabular-nums;
}
.card__nolink{
  position:absolute; bottom:12px; left:14px; z-index:2; padding:4px 10px; border-radius:99px;
  background:rgba(255,90,31,.14); border:1px solid rgba(255,90,31,.3); backdrop-filter:blur(12px);
  font-size:10.5px; color:var(--accent-2); letter-spacing:.02em;
}
.card__body{ padding:20px 21px 22px; display:flex; flex-direction:column; flex:1; position:relative; }
.card__title{ font-size:19px; font-weight:700; letter-spacing:-.032em; margin-bottom:8px; line-height:1.28; }
.card__desc{ font-size:13.8px; color:var(--text-2); line-height:1.66; flex:1; }
.card__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:18px; padding-top:15px; border-top:1px solid var(--line);
}
.card__tags{ display:flex; gap:7px; flex-wrap:wrap; min-width:0; }
.card__tags span{ font-size:11.5px; color:var(--text-3); padding:3px 9px; border-radius:6px; background:rgba(255,255,255,.05); white-space:nowrap; }
.card__go{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line-2);
  display:grid; place-items:center; flex-shrink:0; color:var(--text-2);
  transition:all .4s var(--ease-out);
}
.card:hover .card__go{ background:var(--accent); border-color:var(--accent); color:#fff; transform:rotate(45deg); }
.card__overlay{
  position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  background:rgba(7,8,11,.72); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.card:hover .card__overlay{ opacity:1; }
.card__overlay span{
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:99px;
  background:var(--accent); color:#fff; font-size:13.5px; font-weight:600;
}
.work__empty{ text-align:center; padding:60px 20px; color:var(--text-2); }
.work__empty p{ margin-bottom:18px; }

/* ----------------------------- Stats ----------------------------- */
.stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:none; }
.stats .section__head{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.stats__grid{
  max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.stat{
  background:var(--bg); padding:clamp(26px,3.4vw,42px) clamp(20px,2.4vw,32px);
  transition:background-color .5s var(--ease);
}
.stat:hover{ background:var(--bg-3); }
.stat .num{
  display:block; font-size:clamp(30px,3.7vw,48px); font-weight:900; letter-spacing:-.055em;
  line-height:1.05; background:linear-gradient(140deg,#fff 30%,#8b9099);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.stat:hover .num{ background:linear-gradient(140deg,#fff 20%,var(--accent-2)); -webkit-background-clip:text; background-clip:text; }
.stat span{ display:block; margin-top:13px; font-size:13.5px; color:var(--text-3); line-height:1.5; }

/* ----------------------------- Method (sticky) ----------------------------- */
.method__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,80px); }
.method__sticky{ position:sticky; top:120px; height:fit-content; }
.method__stage{
  position:relative; aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--bg-2); box-shadow:0 30px 70px -34px rgba(0,0,0,.9);
}
.method__layer{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(20px,2.6vw,32px); opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity .6s var(--ease), transform .7s var(--ease-out);
}
.method__layer.is-active{ opacity:1; transform:none; }
.method__layer h4{ font-size:clamp(19px,2.1vw,26px); font-weight:900; letter-spacing:-.04em; margin-bottom:6px; }
.method__layer p{ font-size:13px; color:var(--text-3); }
.layer__art{ position:absolute; inset:0; }
.layer__grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:38px 38px;
}
.layer__blob{
  position:absolute; width:62%; aspect-ratio:1; left:18%; top:6%; border-radius:50%;
  background:radial-gradient(circle,rgba(255,90,31,.5),transparent 66%); filter:blur(38px);
  animation:drift1 14s var(--ease-io) infinite;
}
.layer__bars{ position:absolute; left:14%; right:14%; top:18%; display:flex; align-items:flex-end; gap:9px; height:44%; }
.layer__bars::before{ content:''; flex:1; height:38%; background:rgba(255,255,255,.1); border-radius:6px 6px 0 0; }
.layer__bars::after{ content:''; flex:1.4; height:72%; background:linear-gradient(180deg,var(--accent),rgba(255,90,31,.15)); border-radius:8px 8px 0 0; box-shadow:0 0 30px var(--accent-glow); }
.layer__ring{
  position:absolute; right:-10%; top:8%; width:56%; aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(255,90,31,.45); border-right-color:transparent; border-bottom-color:transparent;
  animation:spin 9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.layer__wire{ position:absolute; inset:0; }
.layer__wire::before{
  content:''; position:absolute; left:12%; right:12%; top:42%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,143,77,.7),transparent);
}
.layer__node{
  position:absolute; left:50%; top:42%; width:18px; height:18px; border-radius:50%; transform:translate(-50%,-50%);
  background:var(--accent); box-shadow:0 0 0 8px rgba(255,90,31,.14),0 0 34px var(--accent-glow);
  animation:pulse2 2.6s var(--ease-io) infinite;
}
@keyframes pulse2{ 0%,100%{ box-shadow:0 0 0 8px rgba(255,90,31,.14),0 0 34px var(--accent-glow); } 50%{ box-shadow:0 0 0 18px rgba(255,90,31,.04),0 0 52px var(--accent-glow); } }
.layer__stack{ position:absolute; inset:0; }
.layer__stack::before{
  content:''; position:absolute; left:16%; right:16%; top:22%; height:34%; border-radius:12px;
  background:rgba(255,255,255,.07); border:1px solid var(--line-2); transform:rotate(-4deg);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8);
}
.layer__stack::after{
  content:''; position:absolute; left:20%; right:20%; top:32%; height:34%; border-radius:12px;
  background:linear-gradient(140deg,rgba(255,90,31,.85),rgba(255,143,77,.35));
  border:1px solid rgba(255,255,255,.22); transform:rotate(3deg);
  box-shadow:0 22px 46px -16px var(--accent-glow);
}
.layer__glow{
  position:absolute; inset:0; background:radial-gradient(60% 50% at 50% 40%,rgba(255,90,31,.16),transparent 70%);
}
.method__steps{ display:flex; flex-direction:column; }
.step{ padding:clamp(30px,4vw,56px) 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step__no{ font-family:var(--font-serif); font-size:15px; color:var(--accent); letter-spacing:.1em; display:block; margin-bottom:12px; }
.step h3{ font-size:clamp(21px,2.4vw,30px); font-weight:800; letter-spacing:-.038em; margin-bottom:14px; }
.step p{ font-size:15px; color:var(--text-2); line-height:1.85; margin-bottom:18px; }
.step__tags{ display:flex; gap:8px; flex-wrap:wrap; }
.step__tags li{ font-size:12px; color:var(--text-3); padding:5px 11px; border-radius:99px; border:1px solid var(--line); }

/* ----------------------------- About ----------------------------- */
.about__grid{ display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(30px,5vw,80px); align-items:start; }
.about__portrait{ position:sticky; top:120px; }
.about__frame{
  position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:0 34px 74px -34px rgba(0,0,0,.9); background:var(--bg-2);
}
.about__frame img{ width:100%; height:auto; filter:grayscale(.32) contrast(1.05) brightness(.94); transition:filter 1.2s var(--ease), transform 1.6s var(--ease-out); }
.about__frame:hover img{ filter:grayscale(0) contrast(1.06); transform:scale(1.035); }
.about__frame-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(7,8,11,.8)); pointer-events:none; }
.about__badge{
  margin-top:16px; padding:16px 18px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface);
}
.about__badge b{ display:block; font-size:19px; font-weight:800; letter-spacing:-.035em; }
.about__badge span{ font-size:12.5px; color:var(--text-3); }
.about__lead{ font-size:clamp(17px,1.7vw,21px); font-weight:500; line-height:1.68; letter-spacing:-.02em; margin-bottom:20px; }
.about__content > p:not(.about__lead){ font-size:15px; color:var(--text-2); line-height:1.85; margin-bottom:20px; }
.pillars{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:34px 0; }
.pillar{
  padding:20px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--bg-2);
  transition:border-color .45s var(--ease), transform .5s var(--ease-out), background-color .45s var(--ease);
}
.pillar:hover{ border-color:rgba(255,90,31,.36); transform:translateY(-4px); background:var(--bg-3); }
.pillar__no{ font-family:var(--font-serif); font-size:13px; color:var(--accent); }
.pillar h4{ font-size:16.5px; font-weight:700; letter-spacing:-.03em; margin:7px 0 8px; }
.pillar p{ font-size:13.2px; color:var(--text-3); line-height:1.62; }
.about__facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.fact{ background:var(--bg-2); padding:16px 18px; }
.fact b{ display:block; font-size:14.5px; font-weight:700; letter-spacing:-.025em; margin-bottom:3px; }
.fact span{ font-size:12px; color:var(--text-3); }

/* ----------------------------- Timeline ----------------------------- */
.timeline{ position:relative; padding-left:clamp(20px,4vw,60px); }
.timeline__rail{ position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--line); }
.timeline__rail i{
  position:absolute; top:0; left:-1px; width:3px; height:0%; border-radius:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  box-shadow:0 0 16px var(--accent-glow); transition:height .2s linear;
}
.tl-item{ position:relative; padding-bottom:clamp(34px,4.4vw,60px); display:grid; grid-template-columns:190px 1fr; gap:clamp(16px,2.6vw,40px); }
.tl-item::before{
  content:''; position:absolute; left:calc(-1 * clamp(20px,4vw,60px) - 4px); top:9px;
  width:9px; height:9px; border-radius:50%; background:var(--bg); border:2px solid var(--line-2);
  transition:background-color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.tl-item.is-in::before{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 5px rgba(255,90,31,.14); }
.tl-item__period{ font-size:12.5px; color:var(--text-3); letter-spacing:.02em; font-variant-numeric:tabular-nums; padding-top:2px; }
.tl-item__body h3{ font-size:clamp(18px,1.9vw,23px); font-weight:800; letter-spacing:-.035em; margin-bottom:5px; }
.tl-item__role{ font-size:13.5px; color:var(--accent); font-weight:600; margin-bottom:14px; }
.tl-item__body ul{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.tl-item__body li{ position:relative; padding-left:18px; font-size:14.2px; color:var(--text-2); line-height:1.72; }
.tl-item__body li::before{
  content:''; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%;
  background:var(--line-2);
}
.tl-item__body li b{ color:var(--text); font-weight:700; }
.tl-item__tags{ display:flex; gap:7px; flex-wrap:wrap; }
.tl-item__tags span{ font-size:11.5px; color:var(--text-3); padding:4px 10px; border-radius:7px; background:rgba(255,255,255,.05); border:1px solid var(--line); }

/* ----------------------------- Contact ----------------------------- */
.contact{ text-align:center; max-width:none; }
.contact__inner{ max-width:900px; margin:0 auto; }
.contact__title{ font-size:clamp(34px,5.6vw,74px); font-weight:900; letter-spacing:-.05em; line-height:1.04; margin-bottom:24px; }
.contact__title .line{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.contact__title .line > span{ display:block; }
.contact__lead{ font-size:clamp(15px,1.2vw,17.5px); color:var(--text-2); line-height:1.8; max-width:600px; margin:0 auto 42px; }
.contact__links{ display:flex; flex-direction:column; gap:12px; align-items:center; }
.contact__mail{
  display:inline-flex; align-items:center; gap:12px; padding:15px 24px; border-radius:99px;
  border:1px solid var(--line); background:var(--surface); font-size:clamp(15px,1.4vw,18px);
  font-weight:600; letter-spacing:-.02em; transition:all .45s var(--ease-out);
}
.contact__mail svg{ opacity:.4; transition:transform .45s var(--ease-out), opacity .45s; }
.contact__mail:hover{ border-color:var(--accent); background:rgba(255,90,31,.08); color:var(--accent); }
.contact__mail:hover svg{ opacity:1; transform:translate(3px,-3px); }

/* ----------------------------- Footer ----------------------------- */
.footer{ border-top:1px solid var(--line); padding:34px var(--pad); }
.footer__inner{
  max-width:var(--maxw); margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.footer__brand{ font-weight:800; letter-spacing:-.035em; font-size:16px; }
.footer__brand em{ color:var(--accent); }
.footer__meta{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-3); }
.footer__meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--text-3); }
.footer__icp{ color:var(--text-3); text-decoration:none; transition:color .35s; }
.footer__icp:hover{ color:var(--accent); }
.footer__top{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-2); transition:color .35s; }
.footer__top:hover{ color:var(--accent); }
.footer__top svg{ transition:transform .4s var(--ease-out); }
.footer__top:hover svg{ transform:translateY(-3px); }

/* ----------------------------- 富文本正文 ----------------------------- */
.rich{
  font-size:15px; line-height:1.86; color:var(--text-2);
}
.rich > *:first-child{ margin-top:0; }
.rich > *:last-child{ margin-bottom:0; }
.rich p{ margin:0 0 .85em; }
.rich h2{ font-size:19px; font-weight:800; color:var(--text); letter-spacing:-.03em; margin:1.3em 0 .55em; line-height:1.3; }
.rich h3{ font-size:16.5px; font-weight:700; color:var(--text); letter-spacing:-.025em; margin:1.15em 0 .5em; line-height:1.35; }
.rich h4{ font-size:15px; font-weight:700; color:var(--text); margin:1em 0 .45em; }
.rich strong{ color:var(--text); font-weight:700; }
.rich em{ font-style:italic; color:var(--text); }
.rich ul,.rich ol{ margin:0 0 .85em; padding-left:1.4em; }
.rich ul{ list-style:none; position:relative; }
.rich ul > li{ position:relative; padding-left:1.1em; margin-bottom:.42em; }
.rich ul > li::before{
  content:''; position:absolute; left:.15em; top:.72em; width:5px; height:5px; border-radius:50%;
  background:var(--accent);
}
.rich ol{ list-style:decimal; }
.rich ol > li{ margin-bottom:.42em; padding-left:.3em; }
.rich ol > li::marker{ color:var(--accent); font-weight:700; font-size:.9em; }
.rich blockquote{
  margin:0 0 .9em; padding:11px 16px; border-left:2px solid var(--accent);
  background:rgba(255,90,31,.06); border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--text-2);
}
.rich blockquote p:last-child{ margin-bottom:0; }
.rich pre{
  margin:0 0 .9em; padding:13px 15px; background:#05060a; border:1px solid var(--line);
  border-radius:var(--r-sm); font-family:'SF Mono',Menlo,Consolas,monospace; font-size:12.5px;
  line-height:1.7; overflow-x:auto; color:#c8d0dc;
}
.rich code{ font-family:'SF Mono',Menlo,Consolas,monospace; font-size:.88em; background:rgba(255,255,255,.07); padding:1px 5px; border-radius:4px; }
.rich pre code{ background:none; padding:0; }
.rich hr{ border:none; border-top:1px solid var(--line); margin:1.4em 0; }
.rich a{ color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; }
.rich img,.rich figure{ max-width:100%; border-radius:var(--r-sm); }
.rich figure{ margin:0 0 .9em; }
.rich figcaption{ font-size:12.5px; color:var(--text-3); margin-top:8px; text-align:center; }
/* ---- 连续图片无缝拼接 ----
   后台连续插入多张图时，编辑器会生成连续的 <figure><img></figure>，
   渲染时由 site-render.js 的 mergeImageStacks() 合并进 .imgstack 容器。
   原本每个 figure 有 0.9em 下外边距、img 有圆角与行高基线间隙，
   导致图片之间出现缝隙。这里让组内图片贴合为一个整体：
   - 组内 figure 下外边距归零（组与正文之间仍保留间距）
   - 组内图片取消接缝处圆角，首图保上圆角、末图保下圆角
   - img 设为块级，消除行高基线间隙
*/
.imgstack{ display:block; margin:0 0 .9em; }
.imgstack > *{ margin:0; }
.imgstack > figure,
.imgstack > p,
.imgstack > .imgstack__item{ margin:0; }
.imgstack img{
  display:block; width:100%; border-radius:0; vertical-align:bottom;
}
.imgstack > *:first-child img,
.imgstack > *:first-child > img{ border-top-left-radius:var(--r-sm); border-top-right-radius:var(--r-sm); }
.imgstack > *:last-child img,
.imgstack > *:last-child > img{ border-bottom-left-radius:var(--r-sm); border-bottom-right-radius:var(--r-sm); }
.imgstack > *:only-child img,
.imgstack > *:only-child > img{ border-radius:var(--r-sm); }
.rich mark{ background:rgba(255,90,31,.22); color:var(--text); padding:1px 3px; border-radius:3px; }
.rich table{ width:100%; border-collapse:collapse; margin:0 0 .9em; font-size:14px; }
.rich th,.rich td{ padding:9px 12px; border:1px solid var(--line); text-align:left; }
.rich th{ background:rgba(255,255,255,.05); font-weight:600; color:var(--text); }

/* 焦点作品中的富文本 */
.spotlight__body .rich{
  padding-top:20px; margin-top:4px; border-top:1px solid var(--line);
}

/* ----------------------------- Reveal ----------------------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.reveal[data-delay="5"]{ transition-delay:.40s; }
.reveal[data-delay="6"]{ transition-delay:.48s; }

/* ----------------------------- 作品抽屉 ----------------------------- */
.wdrawer{ position:fixed; inset:0; z-index:920; }
.wdrawer[hidden]{ display:none; }
.wdrawer__scrim{
  position:absolute; inset:0; background:rgba(3,4,6,.66); backdrop-filter:blur(8px);
  opacity:0; transition:opacity .45s var(--ease);
}
.wdrawer.is-open .wdrawer__scrim{ opacity:1; }
.wdrawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(560px,100%);
  background:var(--bg-2); border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .55s var(--ease-out);
  box-shadow:-30px 0 80px -30px rgba(0,0,0,.9);
}
.wdrawer.is-open .wdrawer__panel{ transform:none; }
.wdrawer__head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 24px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.wdrawer__meta{ display:flex; align-items:center; gap:12px; min-width:0; }
.wdrawer__meta .chip{ margin-bottom:0; }
.wdrawer__year{ font-size:12.5px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.wdrawer__close{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--text-2); flex-shrink:0;
  transition:all .35s var(--ease-out);
}
.wdrawer__close:hover{ background:var(--accent); border-color:var(--accent); color:#fff; transform:rotate(90deg); }
.wdrawer__scroll{
  flex:1; overflow-y:auto; padding:24px 24px 34px;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.wdrawer__scroll::-webkit-scrollbar{ width:6px; }
.wdrawer__scroll::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:4px; }
.wdrawer__cover{
  border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line);
  background:#08090c; margin-bottom:22px;
}
.wdrawer__cover img{ width:100%; height:auto; display:block; }
.wdrawer__title{
  font-size:clamp(22px,2.4vw,30px); font-weight:900; letter-spacing:-.038em;
  line-height:1.22; margin-bottom:12px;
}
.wdrawer__desc{
  font-size:14.5px; color:var(--text-2); line-height:1.78; margin-bottom:22px;
  padding-bottom:20px; border-bottom:1px solid var(--line);
}
.wdrawer__scroll .metrics{ margin-bottom:24px; }
.wdrawer__nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 24px; border-top:1px solid var(--line); flex-shrink:0; background:var(--bg-2);
}
.wdrawer__navbtn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:99px;
  border:1px solid var(--line); font-size:12.5px; font-weight:600; color:var(--text-2);
  transition:all .35s var(--ease-out);
}
.wdrawer__navbtn:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.wdrawer__navbtn:disabled{ opacity:.32; cursor:not-allowed; }
.wdrawer__pos{ font-size:12px; color:var(--text-3); font-variant-numeric:tabular-nums; }

/* 卡片网格微调：作为可点击的详情入口 */
.work__grid .card{ cursor:pointer; }
.work__grid .card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.card__flag{
  position:absolute; top:14px; left:14px; z-index:2; padding:5px 11px; border-radius:99px;
  background:rgba(255,90,31,.92); color:#fff; font-size:11.5px; font-weight:600;
  letter-spacing:.02em; backdrop-filter:blur(12px);
}
.card__metrics{ display:flex; gap:6px; flex-wrap:wrap; min-width:0; }
.card__metrics span{
  font-size:11.5px; color:var(--text-3); padding:3px 9px; border-radius:7px;
  background:rgba(255,255,255,.05); border:1px solid var(--line); white-space:nowrap;
}
.card__foot{ align-items:center; }
.card__go{ transition:all .4s var(--ease-out); }
.card:hover .card__go{ transform:rotate(45deg); }

@media (max-width:900px){
  .wdrawer__panel{ width:100%; }
  .wdrawer__head{ padding:14px 18px; }
  .wdrawer__scroll{ padding:18px 18px 28px; }
  .wdrawer__nav{ padding:12px 18px; }
}

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.reveal[data-delay="5"]{ transition-delay:.40s; }
.reveal[data-delay="6"]{ transition-delay:.48s; }

/* ----------------------------- Manager ----------------------------- */
.mgr{ position:fixed; inset:0; z-index:950; visibility:hidden; }
.mgr.is-open{ visibility:visible; }
.mgr__scrim{ position:absolute; inset:0; background:rgba(3,4,6,.68); backdrop-filter:blur(6px); opacity:0; transition:opacity .45s var(--ease); }
.mgr.is-open .mgr__scrim{ opacity:1; }
.mgr__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(440px,100%);
  background:var(--bg-2); border-left:1px solid var(--line); display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .55s var(--ease-out); box-shadow:-30px 0 80px -30px rgba(0,0,0,.9);
}
.mgr.is-open .mgr__panel{ transform:none; }
.mgr__head{ padding:22px 22px 18px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.mgr__head h3{ font-size:17px; font-weight:800; letter-spacing:-.03em; }
.mgr__head p{ font-size:12px; color:var(--text-3); margin-top:5px; }
.mgr__close{ width:32px; height:32px; border-radius:9px; border:1px solid var(--line); display:grid; place-items:center; flex-shrink:0; transition:all .35s; }
.mgr__close:hover{ background:var(--surface); border-color:var(--line-2); transform:rotate(90deg); }
.mgr__body{ flex:1; overflow-y:auto; padding:18px 22px 26px; }
.mgr__list{ display:flex; flex-direction:column; gap:9px; }
.mgr__item{
  display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--bg-3); transition:border-color .35s, background-color .35s;
}
.mgr__item:hover{ border-color:var(--line-2); }
.mgr__thumb{ width:56px; height:42px; border-radius:7px; object-fit:cover; background:#0b0d12; border:1px solid var(--line); flex-shrink:0; }
.mgr__info{ flex:1; min-width:0; }
.mgr__info b{ display:block; font-size:13.5px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mgr__info span{ display:block; font-size:11px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mgr__item .btn--sm{ padding:6px 11px; font-size:12px; }
.mgr__actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.mgr__empty{ text-align:center; color:var(--text-3); font-size:13px; padding:30px 10px; }

/* ----------------------------- Editor ----------------------------- */
.editor{ position:fixed; inset:0; z-index:960; visibility:hidden; }
.editor.is-open{ visibility:visible; }
.editor__scrim{ position:absolute; inset:0; background:rgba(3,4,6,.7); backdrop-filter:blur(6px); opacity:0; transition:opacity .4s var(--ease); }
.editor.is-open .editor__scrim{ opacity:1; }
.editor__panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-46%) scale(.97); opacity:0;
  width:min(520px,calc(100% - 32px)); max-height:86vh; overflow-y:auto;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9);
  transition:transform .45s var(--ease-out), opacity .35s var(--ease);
}
.editor.is-open .editor__panel{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.editor__head{ padding:20px 22px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.editor__head h3{ font-size:17px; font-weight:800; letter-spacing:-.03em; }
.editor__form{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:15px; }
.fld{ display:flex; flex-direction:column; gap:7px; }
.fld > span{ font-size:12px; color:var(--text-2); font-weight:600; letter-spacing:.02em; }
.fld input,.fld textarea{
  width:100%; padding:11px 13px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--bg-3); color:var(--text); font-family:var(--font-sans); font-size:14px;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease); resize:vertical;
}
.fld input:focus,.fld textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,90,31,.13); }
.fld input::placeholder,.fld textarea::placeholder{ color:var(--text-3); }
.fld-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fld--file input{ padding:9px; font-size:12.5px; }
.editor__hint{ font-size:11.5px; color:var(--text-3); line-height:1.6; }
.editor__foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:15px; border-top:1px solid var(--line); }
.editor__foot-right{ display:flex; gap:8px; }

/* ----------------------------- Toast ----------------------------- */
.toast{
  position:fixed; left:50%; bottom:34px; transform:translate(-50%,26px);
  padding:12px 20px; border-radius:99px; background:var(--bg-3); border:1px solid var(--line-2);
  font-size:13.5px; box-shadow:0 20px 50px -20px rgba(0,0,0,.9);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease), transform .5s var(--ease-out); z-index:999;
  max-width:calc(100% - 40px); text-align:center;
}
.toast.is-show{ opacity:1; transform:translate(-50%,0); }

/* ----------------------------- Responsive ----------------------------- */
@media (max-width:1080px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__visual{ order:-1; }
  .portrait{ max-width:290px; }
  .spotlight{ grid-template-columns:1fr; }
  .method__grid{ grid-template-columns:1fr; }
  .method__sticky{ position:static; }
  .method__stage{ max-width:520px; }
  .about__grid{ grid-template-columns:1fr; }
  .about__portrait{ position:static; max-width:380px; }
  .tl-item{ grid-template-columns:1fr; gap:8px; }
}
@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__actions .btn--ghost span{ display:none; }
  .hero{ padding-top:112px; }
  .hero__meta{ grid-template-columns:1fr; gap:14px; }
  .pillars{ grid-template-columns:1fr; }
  .portrait__tag--tl{ left:-8px; }
  .portrait__tag--br{ right:-8px; }
  .contact__links{ align-items:stretch; }
  .contact__mail{ justify-content:space-between; }
  .fld-row{ grid-template-columns:1fr; }
  .work__grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}