/* ==========================================================================
   易看设计 EK58 — 个人主页 v2
   编辑式排版 / 大黑大白 / 逐字揭示 / 深色宣言段
   ========================================================================== */

/* ---------- 1. 令牌 ---------- */
:root{
  --paper:   #F3F0E9;
  --paper-2: #EBE7DD;
  --paper-3: #E2DDD1;
  --ink:     #12100E;
  --ink-2:   #57524A;
  --ink-3:   #918A7D;
  --line:    rgba(18,16,14,.13);
  --line-2:  rgba(18,16,14,.26);
  --accent:  #D6451E;

  --serif: "Songti SC","Source Han Serif SC","Noto Serif SC","STSong","SimSun",Georgia,serif;
  --sans:  "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:  "SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;

  --ease:   cubic-bezier(.22,1,.36,1);
  --ease-2: cubic-bezier(.34,1.4,.64,1);

  --pad:  clamp(20px,4.5vw,64px);
  --maxw: 1480px;
  --nav-h: 76px;
  --hair: 1px;
}

/* ---------- 2. 基础 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.has-smooth{ scroll-behavior:auto; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure,blockquote{ margin:0; }
::selection{ background:var(--ink); color:var(--paper); }
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:var(--paper-2); }
::-webkit-scrollbar-thumb{ background:var(--ink-3); }
::-webkit-scrollbar-thumb:hover{ background:var(--ink); }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.mono{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- 3. 文字滚动（悬停） ---------- */
.roll{ position:relative; display:inline-block; overflow:hidden; vertical-align:bottom; line-height:1.3; }
.roll > i{ display:block; font-style:normal; transition:transform .55s var(--ease); }
.roll > i + i{ position:absolute; left:0; top:100%; }
a:hover .roll > i,
.roll:hover > i{ transform:translateY(-100%); }

/* ---------- 4. 载入 ---------- */
.loader{
  position:fixed; inset:0; z-index:9999; background:var(--paper);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 0 clamp(24px,4vw,48px);
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__bar{ position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--paper-3); }
.loader__bar span{ display:block; height:100%; width:0; background:var(--ink); transition:width .3s linear; }
.loader__row{
  display:flex; justify-content:space-between; align-items:flex-end;
  padding-inline:var(--pad);
}
.loader__name{ font-family:var(--mono); font-size:11px; letter-spacing:.26em; color:var(--ink-3); }
.loader__num{ font-family:var(--serif); font-size:clamp(40px,7vw,86px); line-height:1; letter-spacing:-.03em; }
.loader__num b{ font-weight:500; }

/* ---------- 5. 光标 ---------- */
.cursor{ position:fixed; left:0; top:0; z-index:9998; pointer-events:none; }
.cursor__dot{
  position:absolute; width:5px; height:5px; border-radius:50%; background:var(--ink);
  transform:translate(-50%,-50%);
}
.cursor__ring{
  position:absolute; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line-2); transform:translate(-50%,-50%);
  display:grid; place-items:center;
  transition:width .35s var(--ease), height .35s var(--ease), background .3s, border-color .3s;
}
.cursor__ring i{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; font-style:normal; opacity:0; color:var(--paper); transition:opacity .25s; }
.cursor.is-hover .cursor__ring{ width:82px; height:82px; background:var(--ink); border-color:var(--ink); }
.cursor.is-hover .cursor__ring i{ opacity:1; }
.cursor.is-hover .cursor__dot{ opacity:0; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ---------- 6. 进度 ---------- */
.progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:200; }

/* ---------- 7. 左侧导轨 ---------- */
.rail{
  position:fixed; left:calc(var(--pad) - 4px); top:50%; transform:translateY(-50%);
  z-index:80; display:flex; gap:14px; align-items:center;
}
.rail__line{ width:1px; height:150px; background:var(--line); position:relative; }
.rail__line::after{
  content:""; position:absolute; left:-1.5px; top:0; width:4px; height:24px;
  background:var(--accent);
  transition:transform .6s var(--ease);
  transform:translateY(var(--shift,0px));
}
.rail ul{ display:flex; flex-direction:column; gap:14px; }
.rail a{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--ink-3);
  writing-mode:vertical-rl; transition:color .3s;
}
.rail li.is-active a{ color:var(--ink); }
.rail a:hover{ color:var(--accent); }
@media (max-width:1280px){ .rail{ display:none; } }

/* ---------- 8. 导航 ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--pad);
  transition:background .4s, border-color .4s, height .4s, color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  height:62px; background:rgba(243,240,233,.82);
  backdrop-filter:blur(16px) saturate(160%);
  border-bottom-color:var(--line);
}
.nav__logo{ display:flex; align-items:center; gap:10px; }
.mark{
  width:32px; height:32px; flex:none; display:grid; place-items:center;
  background:var(--ink); color:var(--paper);
  font-family:var(--serif); font-size:16px; border-radius:3px;
}
.nav__logo .name{ display:flex; flex-direction:column; line-height:1.2; font-weight:600; font-size:14px; letter-spacing:.04em; }
.nav__logo .name em{ font-style:normal; font-family:var(--mono); font-size:8px; letter-spacing:.26em; color:var(--ink-3); }
.nav__right{ display:flex; align-items:center; gap:clamp(16px,2.4vw,32px); }
.nav__clock{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-3); }
@media (max-width:760px){ .nav__clock{ display:none; } }

.menu-btn{
  display:flex; align-items:center; gap:10px; padding:8px 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.menu-btn__lines{ display:block; width:22px; }
.menu-btn__lines i{ display:block; height:1.4px; background:var(--ink); transition:transform .4s var(--ease), width .4s; }
.menu-btn__lines i:last-child{ width:14px; margin-top:5px; margin-left:auto; }
.menu-btn:hover .menu-btn__lines i:last-child{ width:22px; }
body.menu-open .menu-btn__lines i:first-child{ transform:translateY(3.2px) rotate(45deg); }
body.menu-open .menu-btn__lines i:last-child{ width:22px; transform:translateY(-3.2px) rotate(-45deg); }
body.menu-open .menu-btn__txt{ color:var(--paper); }
body.menu-open .nav{ color:var(--paper); }
body.menu-open .nav__logo .name em{ color:rgba(243,240,233,.5); }
body.menu-open .mark{ background:var(--paper); color:var(--ink); }
body.menu-open .menu-btn__lines i{ background:var(--paper); }
body.menu-open .nav__clock{ color:rgba(243,240,233,.5); }

/* ---------- 9. 全屏菜单 ---------- */
.overlay{
  position:fixed; inset:0; z-index:99; background:var(--ink); color:var(--paper);
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 30px) var(--pad) 40px;
  overflow-y:auto;
}
.overlay.is-open{ clip-path:inset(0 0 0 0); }
.overlay__list{ display:flex; flex-direction:column; }
.overlay__list a{
  display:flex; align-items:baseline; gap:clamp(14px,3vw,36px);
  padding:clamp(6px,1.2vw,14px) 0;
  border-bottom:1px solid rgba(243,240,233,.12);
  opacity:0; transform:translateY(26px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.overlay.is-open .overlay__list a{ opacity:1; transform:none; }
.overlay.is-open .overlay__list li:nth-child(1) a{ transition-delay:.14s }
.overlay.is-open .overlay__list li:nth-child(2) a{ transition-delay:.20s }
.overlay.is-open .overlay__list li:nth-child(3) a{ transition-delay:.26s }
.overlay.is-open .overlay__list li:nth-child(4) a{ transition-delay:.32s }
.overlay.is-open .overlay__list li:nth-child(5) a{ transition-delay:.38s }
.overlay__list b{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  color:rgba(243,240,233,.4); font-weight:400; min-width:26px;
}
.overlay__list span{
  font-family:var(--serif); font-size:clamp(38px,7.6vw,104px); line-height:1.06; letter-spacing:-.02em;
}
.overlay__list .roll{ line-height:1.06; }
.overlay__list .roll > i + i{ color:rgba(243,240,233,.35); font-size:.5em; letter-spacing:.02em; }
.overlay__list a:hover{ color:var(--accent); }
.overlay__foot{
  display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,64px);
  margin-top:clamp(28px,4vw,54px); padding-top:26px; border-top:1px solid rgba(243,240,233,.12);
  opacity:0; transition:opacity .6s var(--ease) .42s;
}
.overlay.is-open .overlay__foot{ opacity:1; }
.overlay__foot div{ display:flex; flex-direction:column; gap:4px; }
.overlay__foot span{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:rgba(243,240,233,.4); }
.overlay__foot a,.overlay__foot b{ font-size:15px; font-weight:500; }
.overlay__foot a:hover{ color:var(--accent); }

/* ---------- 10. HERO ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:space-between;
  padding-top:calc(var(--nav-h) + clamp(30px,6vw,80px)); padding-bottom:clamp(24px,4vw,44px);
  overflow:hidden;
}
.hero__rules{ position:absolute; inset:0; display:flex; justify-content:space-between; padding-inline:var(--pad); pointer-events:none; }
.hero__rules i{ width:1px; height:100%; background:var(--line); opacity:.6; }
.hero__rules i:nth-child(2),.hero__rules i:nth-child(4){ opacity:.3; }

.hero__top{ display:flex; justify-content:space-between; gap:20px; margin-bottom:auto; padding-top:clamp(10px,3vw,30px); }

.hero__title{
  font-family:var(--serif); font-weight:500; will-change:transform,opacity;
  font-size:clamp(58px,13.5vw,196px); line-height:.9; letter-spacing:-.04em;
  margin:clamp(20px,5vw,60px) 0 clamp(28px,5vw,56px);
}
.hero__title .line{ display:block; }
.hero__title .accent{ color:var(--accent); }

.hero__bottom{
  display:flex; justify-content:space-between; align-items:flex-end; gap:clamp(20px,4vw,60px);
  padding-top:clamp(20px,3vw,32px); border-top:var(--hair) solid var(--line);
}
.hero__desc{ color:var(--ink-2); font-size:clamp(14px,1.25vw,16.5px); max-width:56ch; }
.hero__desc b{ color:var(--ink); font-weight:600; }
.hero__status{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.hero__status span:nth-child(2){ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.hero__status em{ font-style:normal; font-family:var(--mono); font-size:10px; color:var(--ink-3); }
.pulse{
  width:7px; height:7px; border-radius:50%; background:#3F9142;
  box-shadow:0 0 0 0 rgba(63,145,66,.6); animation:pulse 2.4s infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(63,145,66,0); } }

.hero__scroll{
  position:absolute; right:var(--pad); bottom:clamp(24px,4vw,44px);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.3em; color:var(--ink-3);
  writing-mode:vertical-rl;
}
.hero__scroll i{ display:block; width:1px; height:46px; background:var(--line-2); position:relative; overflow:hidden; }
.hero__scroll i::after{
  content:""; position:absolute; inset:0; background:var(--ink);
  animation:scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(100%) } }

/* ---------- 11. 逐字揭示 ---------- */
.js .split .ch{ display:inline-block; overflow:hidden; vertical-align:top; }
.js .split .ch > i{
  display:inline-block; font-style:normal;
  transform:translateY(106%);
  transition:transform 1s var(--ease);
  transition-delay:calc(var(--i,0) * 28ms);
}
.js .split.on .ch > i{ transform:none; }

/* ---------- 12. 跑马灯 ---------- */
.ticker{ overflow:hidden; border-block:var(--hair) solid var(--line); padding:20px 0; background:var(--paper-2); }
.ticker__track{ display:flex; align-items:center; gap:clamp(20px,3vw,44px); width:max-content; animation:marquee 40s linear infinite; }
.ticker__track span{ font-family:var(--serif); font-size:clamp(20px,2.6vw,34px); font-weight:500; white-space:nowrap; }
.ticker__track i{ font-style:normal; color:var(--accent); font-size:13px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- 13. 宣言（深色段） ---------- */
.manifesto{
  background:var(--ink); color:var(--paper);
  padding:clamp(70px,11vw,150px) 0;
}
.manifesto__head{ display:flex; justify-content:space-between; padding-bottom:clamp(28px,5vw,60px); border-bottom:1px solid rgba(243,240,233,.14); }
.manifesto__head .mono{ color:rgba(243,240,233,.45); }
.manifesto__text{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(26px,4.4vw,66px); line-height:1.35; letter-spacing:-.015em;
  padding:clamp(30px,5vw,64px) 0;
}
.manifesto__text .w{
  display:inline-block;
  color:rgba(243,240,233,.16);
  transition:color .7s var(--ease);
}
.manifesto__text .w.on{ color:var(--paper); }
.manifesto__text .w.accent.on{ color:var(--accent); }
.manifesto__foot{ display:flex; justify-content:space-between; padding-top:clamp(20px,3vw,34px); border-top:1px solid rgba(243,240,233,.14); }
.manifesto__foot .mono{ color:rgba(243,240,233,.45); }

/* ---------- 14. 通用章节头 ---------- */
.section{ padding:clamp(80px,12vw,170px) 0; position:relative; }
.sec-num{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:clamp(20px,3vw,36px);
}
.sec-num i{ display:block; width:7px; height:7px; background:var(--accent); }
.sec-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(34px,5.6vw,76px); line-height:1.06; letter-spacing:-.03em;
}
.sec-head{ padding-bottom:clamp(30px,4vw,56px); border-bottom:var(--hair) solid var(--line); margin-bottom:clamp(36px,5vw,64px); }
.sec-head--row{
  display:grid; grid-template-columns:1fr auto; align-items:end; gap:20px;
}
.sec-head--row .sec-num{ grid-column:1 / -1; }

/* ---------- 15. 关于 ---------- */
.about__grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(36px,6vw,96px); }
.about__body p{ font-size:clamp(15px,1.35vw,17.5px); line-height:1.95; color:var(--ink-2); margin-bottom:24px; }
.about__body .lead{
  font-family:var(--serif); font-size:clamp(19px,2vw,27px); line-height:1.72; color:var(--ink); margin-bottom:32px;
}
.about__body .lead::first-letter{
  float:left; font-size:3.2em; line-height:.84; padding:8px 14px 0 0; color:var(--accent); font-family:var(--serif);
}
.about blockquote{
  margin-top:40px; padding:26px 0 0 26px; border-left:2px solid var(--accent);
  font-family:var(--serif); font-size:clamp(16px,1.6vw,21px); line-height:1.9;
}
.about__side{ display:flex; flex-direction:column; gap:clamp(20px,3vw,32px); }
.about__portrait{ margin:0; }
.about__portrait-inner{
  aspect-ratio:4/5; background:var(--paper-3); border:var(--hair) solid var(--line-2);
  display:grid; place-items:center; overflow:hidden; position:relative;
}
.about__portrait-inner img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.92) contrast(1.02);
  transition:transform 1.1s var(--ease);
}
.about__portrait:hover .about__portrait-inner img{ transform:scale(1.03); }
.about__portrait figcaption{ margin-top:10px; }
.about__facts{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:var(--hair) solid var(--line); }
.about__facts div{ background:var(--paper); padding:14px 16px; }
.about__facts dt{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--ink-3); margin-bottom:5px; }
.about__facts dd{ font-size:13.5px; font-weight:500; }

/* ---------- 16. 能力 ---------- */
.skills__list{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(30px,5vw,80px); }
.skill{
  position:relative; padding:clamp(26px,3.4vw,44px) 0; border-top:var(--hair) solid var(--line);
  display:grid; grid-template-columns:auto 1fr; gap:0 20px;
}
.skill__num{
  grid-row:span 3; font-family:var(--mono); font-size:10.5px; color:var(--accent); letter-spacing:.16em; padding-top:8px;
}
.skill h3{
  font-family:var(--serif); font-size:clamp(22px,2.6vw,34px); font-weight:500; letter-spacing:-.01em;
  transition:transform .5s var(--ease);
}
.skill p{ color:var(--ink-2); font-size:14.6px; line-height:1.85; max-width:42ch; margin-top:10px; }
.skill__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.skill__tags li{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--ink-2);
  border:var(--hair) solid var(--line-2); padding:3px 10px;
}
.skill:hover h3{ transform:translateX(6px); }

/* ---------- 17. 作品 ---------- */
.works__count{ justify-self:end; align-self:end; padding-bottom:6px; }

.works__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(30px,4.5vw,70px) clamp(22px,3.2vw,54px);
}
.wcard{ margin:0; }
.wcard:nth-child(even){ margin-top:clamp(28px,6vw,92px); }

.wcard__btn{ display:block; width:100%; text-align:left; padding:0; }

.wcard__media{
  position:relative; display:block; overflow:hidden;
  background:var(--paper-3); border:var(--hair) solid var(--line);
}
.wcard__media img{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block;
  transform:translate3d(0,var(--py,0px),0) scale(1.1);
  will-change:transform;
  transition:filter .5s;
}
.wcard__btn:hover .wcard__media img{ filter:brightness(1.06) saturate(1.04); }

/* 图片从下往上"掀开" */
.wcard__media{ clip-path:inset(0 0 101% 0); transition:clip-path 1.15s var(--ease); }
.wcard.is-in .wcard__media{ clip-path:inset(0 0 0 0); }

.wcard__badge{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(18,16,14,.26); opacity:0; transition:opacity .45s var(--ease);
}
.wcard__badge span{
  display:grid; place-items:center; width:94px; height:94px; border-radius:50%;
  background:var(--paper); color:var(--ink);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  transform:scale(.82); transition:transform .5s var(--ease-2);
}
.wcard__btn:hover .wcard__badge{ opacity:1; }
.wcard__btn:hover .wcard__badge span{ transform:scale(1); }

.wcard__meta{ display:block; padding-top:16px; }
.wcard__row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--ink-3);
  padding-bottom:10px; border-bottom:var(--hair) solid var(--line); margin-bottom:12px;
}
.wcard__idx{ color:var(--accent); }
.wcard__title{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:clamp(19px,2.2vw,30px); line-height:1.28; letter-spacing:-.015em;
  transition:transform .5s var(--ease);
}
.wcard__title em{
  display:block; font-style:normal; font-family:var(--mono);
  font-size:11px; letter-spacing:.14em; color:var(--ink-3); margin-top:7px;
}
.wcard__btn:hover .wcard__title{ transform:translateX(5px); }
.wcard__cat{
  display:block; margin-top:10px; font-family:var(--mono); font-size:11px;
  letter-spacing:.04em; color:var(--ink-3);
}
.works__note{ margin-top:clamp(34px,5vw,60px); font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3); }

/* 大图查看 */
.lb{
  position:fixed; inset:0; z-index:9000; display:grid; place-items:center; padding:clamp(16px,4vw,48px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.lb.is-on{ opacity:1; visibility:visible; }
.lb__mask{ position:absolute; inset:0; background:rgba(10,9,8,.95); backdrop-filter:blur(6px); }
.lb__figure{
  position:relative; margin:0; width:100%; max-width:min(1400px,94vw);
  transform:scale(.97); transition:transform .5s var(--ease);
}
.lb.is-on .lb__figure{ transform:scale(1); }
.lb__figure img{
  width:100%; height:auto; max-height:80vh; object-fit:contain; display:block;
  border:1px solid rgba(243,240,233,.14); background:#111;
}
.lb__figure figcaption{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  margin-top:14px; color:rgba(243,240,233,.66);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
}
.lb__figure figcaption em{ font-style:normal; color:rgba(243,240,233,.4); }
.lb__close{
  position:absolute; top:clamp(12px,3vw,28px); right:clamp(12px,3vw,28px);
  width:46px; height:46px; border-radius:50%; z-index:2;
  color:var(--paper); font-size:24px; line-height:1;
  border:1px solid rgba(243,240,233,.24); background:rgba(243,240,233,.06);
  transition:background .3s, transform .3s var(--ease-2);
}
.lb__close:hover{ background:rgba(243,240,233,.16); transform:rotate(90deg); }
.lb__nav{
  position:absolute; top:50%; z-index:2; width:52px; height:52px; border-radius:50%;
  color:var(--paper); font-size:28px; line-height:1;
  border:1px solid rgba(243,240,233,.2); background:rgba(243,240,233,.05);
  transition:background .3s;
}
.lb__nav:hover{ background:rgba(243,240,233,.16); }
.lb__nav--prev{ left:clamp(8px,2vw,24px); }
.lb__nav--next{ right:clamp(8px,2vw,24px); }

@media (max-width:900px){
  .works__grid{ grid-template-columns:1fr; gap:clamp(34px,7vw,54px); }
  .wcard:nth-child(even){ margin-top:0; }
  .lb__nav{ width:44px; height:44px; font-size:22px; }
  .lb__figure figcaption{ flex-direction:column; gap:6px; }
}

/* ---------- 18. 方法 ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px); }
.steps li{ padding-top:24px; border-top:2px solid var(--ink); position:relative; }
.steps b{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--accent); margin-bottom:20px; }
.steps h3{ font-family:var(--serif); font-size:clamp(21px,2.2vw,28px); font-weight:500; margin-bottom:12px; }
.steps p{ color:var(--ink-2); font-size:14.2px; line-height:1.85; }

/* ---------- 19. 数据 ---------- */
.figures{ border-block:var(--hair) solid var(--line); background:var(--paper-2); }
.figures__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.fig{ padding:clamp(36px,5vw,66px) 0; text-align:center; position:relative; }
.fig + .fig::before{ content:""; position:absolute; left:0; top:22%; height:56%; width:1px; background:var(--line-2); }
.fig b{
  display:flex; align-items:baseline; justify-content:center; gap:2px;
  font-family:var(--serif); font-size:clamp(42px,5.6vw,80px); font-weight:500; letter-spacing:-.04em; line-height:1;
}
.fig b i{ font-style:normal; font-size:.36em; color:var(--accent); }
.fig span{ display:block; margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--ink-3); }

/* ---------- 20. 联系 ---------- */
.contact{ padding:clamp(80px,12vw,170px) 0 0; }
.contact__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(40px,8vw,124px); line-height:.98; letter-spacing:-.04em;
  margin-bottom:clamp(40px,7vw,90px);
}
.contact__title .line{ display:block; }
.contact__grid{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(32px,6vw,80px); padding-top:clamp(28px,4vw,44px); border-top:var(--hair) solid var(--line);
}
.contact__mail{
  display:inline-block; font-family:var(--serif); font-size:clamp(26px,4.6vw,62px);
  letter-spacing:-.03em; border-bottom:1px solid var(--line-2); padding-bottom:8px;
  transition:color .3s, border-color .3s;
}
.contact__mail:hover{ color:var(--accent); border-color:var(--accent); }
.contact__note{ margin-top:20px; color:var(--ink-3); font-size:13.5px; }
.contact__list li{
  display:grid; grid-template-columns:64px 1fr; gap:16px; align-items:baseline;
  padding:13px 0; border-bottom:var(--hair) solid var(--line); font-size:14.5px;
}
.contact__list li:first-child{ padding-top:0; }
.contact__list span{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--ink-3); }
.contact__list a:hover{ color:var(--accent); }

.contact__cta{
  display:block; margin-top:clamp(56px,8vw,110px);
  border-top:1px solid var(--line); background:var(--paper);
  transition:background .5s var(--ease), color .4s;
}
.contact__cta-inner{
  display:flex; align-items:center; justify-content:center; gap:18px;
  padding:clamp(34px,5vw,66px) var(--pad);
  font-family:var(--serif); font-size:clamp(20px,2.6vw,38px); letter-spacing:-.01em;
}
.contact__cta-inner svg{ transition:transform .45s var(--ease); }
.contact__cta:hover{ background:var(--ink); color:var(--paper); }
.contact__cta:hover svg{ transform:translateX(8px); }

/* ---------- 21. 页脚 ---------- */
.footer{ border-top:var(--hair) solid var(--line); padding:clamp(40px,6vw,72px) 0 28px; }
.footer__huge{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(52px,13.5vw,200px); line-height:.92; letter-spacing:-.05em;
  padding-bottom:clamp(30px,5vw,56px); border-bottom:1px solid var(--line);
}
.footer__huge .split{ display:block; }
.footer__top{
  display:flex; align-items:center; gap:clamp(20px,4vw,50px); flex-wrap:wrap;
  padding:24px 0; border-bottom:1px solid var(--line);
}
.footer__brand{ display:flex; align-items:center; gap:10px; }
.footer__brand b{ font-family:var(--serif); font-size:16px; font-weight:500; }
.footer__brand em{ font-style:normal; font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:var(--ink-3); }
.footer__nav{ display:flex; gap:clamp(14px,2.4vw,32px); margin-left:auto; }
.footer__nav a{ font-size:13.5px; color:var(--ink-2); }
.footer__nav a:hover{ color:var(--accent); }
.footer__top-link a{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-3); }
.footer__top-link a:hover{ color:var(--ink); }
.footer__bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:20px; font-size:12.5px; color:var(--ink-3);
}
.footer__beian{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.footer__beian a{ display:inline-flex; align-items:center; gap:5px; transition:color .3s; }
.footer__beian a:hover{ color:var(--ink); }

/* ---------- 22. 揭示 ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- 23. 响应式 ---------- */
@media (max-width:1100px){
  .about__grid{ grid-template-columns:1fr; }
  .about__side{ flex-direction:row; align-items:flex-start; }
  .about__portrait{ flex:0 0 46%; }
  .about__facts{ flex:1; }
  .skills__list{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .contact__grid{ grid-template-columns:1fr; }
  .hero__bottom{ flex-direction:column; align-items:flex-start; gap:20px; }
}
@media (max-width:760px){
  :root{ --nav-h:62px; }
  .hero__rules i:nth-child(2n){ display:none; }
  .hero__scroll{ display:none; }
  .about__side{ flex-direction:column; }
  .about__portrait{ flex:none; width:100%; max-width:320px; }
  .figures__grid{ grid-template-columns:repeat(2,1fr); }
  .fig:nth-child(3)::before,.fig:nth-child(odd)::before{ display:none; }
  .fig:nth-child(3),.fig:nth-child(4){ border-top:1px solid var(--line); }
  .steps{ grid-template-columns:1fr; }
  .footer__nav{ margin-left:0; width:100%; }
  .footer__bottom{ flex-direction:column; gap:8px; }
  .overlay__foot{ gap:16px; }
  .hero__top{ flex-direction:column; gap:6px; }
}

/* ---------- 24. 减弱动效 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .wcard__media{ clip-path:none !important; }
  .js .split .ch > i{ transform:none; }
  .manifesto__text .w{ color:var(--paper); }
  html{ scroll-behavior:auto; }
}
/* 无 JS 兜底 */
html:not(.js) .reveal{ opacity:1; transform:none; }
html:not(.js) .wcard__media{ clip-path:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }