:root{--paper:#f8f7f4;--ink:#182238;--blue:#415dea;--soft:#e8edff;--peach:#f7ddce;--gold:#ffd957;--line:#cfd6e4}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif}button,a{font:inherit}a{color:inherit}.skip-link{position:absolute;top:-50px;left:16px;z-index:100;background:#fff;padding:10px}.skip-link:focus{top:10px}.nav-shell{height:82px;padding:0 clamp(22px,5vw,80px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:5;background:var(--paper)}.wordmark{text-decoration:none;font-size:20px;font-weight:800;color:var(--blue)}nav{display:flex;gap:clamp(12px,2vw,32px)}nav a{text-decoration:none;font-size:14px;font-weight:700}nav a:hover,.text-link:hover{color:var(--blue)}.section{padding:clamp(65px,8vw,125px) clamp(22px,6vw,100px);position:relative}.eyebrow{color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.18em}h1,h2,h3,p{margin:0}h1{font-size:clamp(55px,7.7vw,122px);line-height:1.08;letter-spacing:-.06em;margin:35px 0 25px}h2{font-size:clamp(50px,7vw,95px);letter-spacing:-.06em;line-height:1.1;margin:12px 0 15px}h3{font-size:29px;line-height:1.2}p{line-height:1.65}.hero{min-height:calc(100svh - 82px);display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden;background:radial-gradient(circle at 72% 25%,#eff0ff,transparent 40%),var(--paper)}.hero-copy{position:relative;z-index:1}.hero-copy p{font-size:clamp(19px,2vw,27px);max-width:560px}.period{color:var(--blue)}.pill-button{display:inline-flex;gap:30px;align-items:center;margin-top:45px;background:var(--ink);color:white;border-radius:100px;padding:15px 23px;text-decoration:none;font-size:16px}.pill-button:hover{background:var(--blue)}.hero-visual{height:560px;position:relative;display:grid;place-items:center}.orbit{position:absolute;inset:0;display:grid;place-items:center}.orbit-ring{position:absolute;width:min(90%,490px);height:90%;border:1px solid #a4b3dc;border-radius:50%;transform:rotate(20deg)}.ring-b{width:min(75%,410px);height:75%;transform:rotate(-29deg);border-style:dashed}.orbit-star{position:absolute;right:11%;top:11%;font-size:80px;color:var(--gold)}.character-stage{position:relative;width:min(75%,360px);height:490px;display:grid;place-items:center}.character-stage img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 25px 23px #27347025)}.character-placeholder{border:2px dashed var(--blue);border-radius:44% 44% 12% 12%;background:linear-gradient(135deg,#fff,#e8ecff);color:var(--blue);width:100%;height:90%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:32px;font-weight:800;line-height:1.5}.character-placeholder span{font-size:54px;margin-left:9px}.visual-note{position:absolute;bottom:8px;font-size:13px;color:#65708a}.scroll-hint{position:absolute;bottom:20px;left:clamp(22px,6vw,100px);font-size:12px;text-decoration:none;color:#68758d}.section-heading{margin-bottom:45px}.section-heading>p{font-size:17px;color:#59667b}.about{background:#e9eeff}.about-grid{display:grid;grid-template-columns:minmax(280px,.85fr) 1.15fr;gap:clamp(35px,7vw,100px);align-items:center}.about-visual{min-height:490px;background:linear-gradient(145deg,#dae4fc,#b3cae2);border-radius:25px;position:relative;overflow:hidden;display:grid;place-items:center}.about-visual:before{content:"";position:absolute;width:68%;aspect-ratio:1;border:2px solid #ffffff9e;border-radius:50%;box-shadow:0 0 0 60px #ffffff18}.about-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}.picture-note{z-index:1;color:#325293;font-size:20px;font-weight:700}.about-copy .lead{font-size:clamp(24px,3vw,40px);line-height:1.52}.about-copy .hint{font-size:16px;color:#5f6d88;margin:25px 0}.text-link{font-size:17px;font-weight:800}.practice{background:var(--paper)}.experience-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.experience-card{background:white;border:1px solid var(--line);border-radius:20px;overflow:hidden;min-height:300px}.experience-card img{width:100%;height:220px;object-fit:cover;display:block}.experience-card .copy{padding:27px}.experience-card h3{font-size:24px;margin-bottom:12px}.experience-card p{font-size:15px}.experience-card.text-only{background:linear-gradient(135deg,#fff,#eff2ff)}.experience-card.text-only .copy{padding:35px}.works{background:#f6efe8;min-height:740px}.work-display{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,46px)}.round-button{border:1px solid #77839a;background:transparent;border-radius:50%;width:48px;height:48px;cursor:pointer;flex:none}.round-button:hover{background:var(--ink);color:white}.work-ticket{width:min(100%,700px);height:360px;background:#fff;border:1px solid #c6bdb4;border-radius:18px;box-shadow:0 24px 50px #564a3b25;position:relative;overflow:hidden}.ticket-main{position:absolute;inset:0 95px 0 0;display:grid;grid-template-columns:42% 58%;transition:transform .58s cubic-bezier(.2,.75,.25,1),opacity .58s}.ticket-main.has-image{background:#e9edfa}.ticket-main img{height:100%;width:100%;object-fit:cover}.ticket-copy{padding:40px 32px;display:flex;flex-direction:column;justify-content:center}.ticket-copy small{color:var(--blue);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.ticket-copy h3{font-size:clamp(27px,3vw,45px);margin:13px 0}.ticket-copy p{font-size:15px}.ticket-stub{position:absolute;right:0;top:0;width:95px;height:100%;border:0;border-left:2px dashed #a3a0a2;background:var(--peach);writing-mode:vertical-rl;letter-spacing:.2em;font-size:15px;font-weight:800;cursor:grab;touch-action:none;transition:transform .5s,opacity .5s}.ticket-stub:active{cursor:grabbing}.work-ticket.open .ticket-stub{transform:translateX(115%);opacity:0}.work-ticket.open .ticket-main{transform:translateX(-115%);opacity:0}.ticket-under{position:absolute;inset:0;display:grid;place-content:center;padding:35px 45px;gap:15px;background:#e9edff}.ticket-under h3{font-size:30px}.ticket-under p{font-size:16px}.ticket-under a{font-weight:800;color:var(--blue)}.work-controls{display:flex;justify-content:space-between;max-width:700px;margin:25px auto;font-size:13px;color:#6c6b73}.work-detail{max-width:700px;margin:20px auto;background:white;border-radius:15px;padding:20px}.work-detail video{display:block;width:100%;max-height:400px;background:#182238}.contact{min-height:370px;background:#e6e8f3}.contact-content{font-size:20px;margin-top:30px}.contact-content a{color:var(--blue)}footer{display:flex;justify-content:space-between;gap:20px;padding:30px clamp(22px,6vw,100px);font-size:13px}.character-relay{position:absolute;z-index:4;left:0;top:0;width:100px;height:130px;pointer-events:none;opacity:0;transform:translate3d(0,0,0)}.relay-character{height:100%;width:100%;background-size:contain;background-position:center;background-repeat:no-repeat;filter:drop-shadow(0 9px 8px #141e3c3b)}.relay-star{position:absolute;right:-10px;top:-12px;color:var(--gold);font-size:36px}.character-relay.active{opacity:1}@media(max-width:760px){.nav-shell{height:70px;padding:0 18px}.wordmark{font-size:15px}nav{gap:9px}nav a{font-size:11px}.section{padding:70px 20px}.hero{display:block;min-height:auto}.hero h1{margin-top:20px}.hero-visual{height:420px;margin-top:25px}.character-stage{height:370px}.scroll-hint{display:none}.about-grid{display:block}.about-visual{min-height:360px;margin-bottom:30px}.experience-list{display:block}.experience-card{margin-bottom:15px}.work-display{gap:7px}.round-button{width:36px;height:36px}.work-ticket{height:310px}.ticket-main{inset:0 58px 0 0;grid-template-columns:1fr}.ticket-main img{display:none}.ticket-copy{padding:25px}.ticket-stub{width:58px;font-size:12px}.work-controls{display:block;line-height:1.7}footer{display:block}footer span{display:block;margin-bottom:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.section.about{padding-bottom:300px}
@media(max-width:760px){.section.about{padding-bottom:220px}}
.character-relay{transition:opacity .3s ease}
.experience-card img{height:auto;aspect-ratio:16/9}
.character-relay{display:none}.character-relay.active{display:block}
.ticket-art{display:grid;place-items:center;font-size:90px;color:#778ee8;background:linear-gradient(135deg,#dce6ff,#fff0e6)}

/* ---------- 首页滚动逐帧播放 ---------- */
.hero{display:block;height:320vh;min-height:0;padding:0;overflow:visible}
.hero-sticky{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(20px,4vw,60px);padding:clamp(60px,7vw,110px) clamp(22px,6vw,100px);overflow:hidden;background:radial-gradient(circle at 74% 22%,#eef0ff 0,transparent 42%),radial-gradient(circle at 12% 88%,#fff0e6 0,transparent 38%),var(--paper)}
.hero-sticky .hero-frame{height:min(520px,52svh);width:auto;max-width:100%;object-fit:contain;object-position:center bottom;display:block;user-select:none;-webkit-user-drag:none}
.hero-sticky .character-stage{height:auto}
.hero-sticky h1{font-size:clamp(44px,5.4vw,92px)}
.hero-sticky #hero-name{white-space:nowrap}
.hero-progress{position:absolute;right:clamp(22px,6vw,100px);bottom:clamp(70px,12vh,120px);width:120px;height:3px;border-radius:99px;background:#dcd9d2;overflow:hidden}
.hero-progress>span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#778ee8,#c9a06a);transform:scaleX(0);transform-origin:left center}
.hero-sticky .scroll-hint{position:absolute;left:clamp(22px,6vw,100px);bottom:clamp(88px,10vh,132px);margin:0}
@media(max-width:760px){
  .hero{height:300vh}
  .hero-sticky{display:block;height:100svh;padding:26px 20px 18px;overflow:hidden}
  .hero-sticky .hero-copy h1{font-size:clamp(40px,10.5vw,60px);margin:14px 0 10px}
  .hero-sticky .hero-copy .eyebrow{font-size:10px}
  .hero-sticky .hero-copy p{margin-bottom:12px}
  .hero-sticky .hero-visual{height:44svh;margin-top:8px}
  .hero-sticky .character-stage{height:auto}
  .hero-sticky .hero-frame{height:38svh}
  .hero-sticky .visual-note{display:none}
  .hero-progress{right:20px;bottom:56px;width:86px}
  .hero-sticky .scroll-hint{display:block;left:20px;bottom:14px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .hero{height:auto}
  .hero-sticky{position:relative;top:auto;height:auto;min-height:calc(100svh - 82px)}
  .hero-progress{display:none}
}

/* ============================================================
   A 版视觉：水彩拱窗 + 莫兰迪配色
   只覆盖配色、背景与版面视觉，不改任何文案与交互逻辑
   ============================================================ */
:root{
  --paper:#f3efe7;
  --ink:#2e3542;
  --blue:#4c5563;
  --soft:#e6e9ef;
  --peach:#e8e1d6;
  --gold:#b08968;
  --line:#dcd6cb;
  --mist:#c8d6e4;
  --lav:#c2c2d8;
  --warm:#c6c2bc;
  --brown:#8b6a4f;
}
body{background:var(--paper)}
.nav-shell{background:#f3efe7;border-bottom:1px solid #e2dcd2;position:sticky;top:0;z-index:6}
.nav-shell nav a:hover,.text-link:hover{color:#4c5563}
.eyebrow{color:#7c8698}
.pill-button{background:#4c5563;box-shadow:0 10px 24px #3d465a26}
.pill-button:hover{background:#3c4452}
.section-heading>p{color:#5b6474}

/* 首页：A 版拱窗光廊 */
.hero{background:transparent}
.hero-sticky{
  display:block;padding:0!important;top:82px;height:calc(100svh - 82px);
  background:url("assets/bg/bg4-a.jpg") center bottom/cover no-repeat #f3efe7;
}
.hero-copy{
  position:absolute;z-index:3;
  left:clamp(22px,5vw,64px);top:50%;transform:translateY(-56%);
  max-width:min(33vw,400px);
}
.hero-sticky h1{
  font-size:clamp(32px,4.1vw,56px);line-height:1.16;letter-spacing:-.04em;
  margin:clamp(12px,2vh,20px) 0 clamp(14px,2.2vh,20px);
}
.hero-copy p{font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.85;color:#5b6474;max-width:100%}
.hero-tags{display:flex;flex-wrap:wrap;gap:9px 8px;margin:0;padding:0;list-style:none;max-width:100%}
.hero-tags li{
  font-size:clamp(12.5px,.95vw,14px);line-height:1.45;padding:6px 13px;
  border-radius:999px;color:#4a5462;background:#ffffffa8;
  border:1px solid #ccd4e2;white-space:nowrap;letter-spacing:.015em;
}
.hero-copy .pill-button{margin-top:clamp(24px,3.4vh,38px);padding:12px 24px;font-size:14px;gap:9px}
.period{color:#4c5563}

.hero-visual{
  position:absolute!important;inset:0!important;
  width:auto!important;height:100%!important;
  display:grid!important;align-items:end!important;justify-items:center!important;
  padding:0!important;pointer-events:none;z-index:2;
}
.orbit{display:none}
.hero-sticky .character-stage{
  position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
  translate:none!important;transform:none!important;
  width:auto!important;height:auto!important;display:block!important;
  margin:0 0 1.2vh!important;
}
.hero-sticky .hero-frame{height:min(66svh,40vw);width:auto}
.hero-sticky .visual-note{
  position:absolute;left:auto;right:clamp(22px,5vw,64px);bottom:clamp(18px,3.4vh,30px);
  font-size:11.5px;color:#6b7686;text-align:right;
}
.hero-progress{
  right:auto;left:clamp(22px,5vw,64px);bottom:clamp(24px,4.4vh,42px);
  width:120px;background:#ded7ca;
}
.hero-progress>span{background:linear-gradient(90deg,#4c5563,#b08968)}
.hero-sticky .scroll-hint{
  left:clamp(22px,5vw,64px);right:auto;
  bottom:clamp(62px,10.5vh,104px);color:#737e92;
}

/* 关于我 —— 水彩云晕（蓝紫云 + 中央暖光） */
.about{
  position:relative;isolation:isolate;
  background:
    radial-gradient(ellipse 38% 30% at 2% -4%,#9db1e0 0%,#b8c5e6 34%,#dbe0ee 58%,transparent 76%),
    radial-gradient(ellipse 34% 28% at 98% -2%,#c8b1d2 0%,#dccbdd 34%,#efe4ec 58%,transparent 76%),
    radial-gradient(ellipse 42% 32% at 4% 104%,#a6b2dc 0%,#c2c9e4 36%,#e2e3ef 60%,transparent 78%),
    radial-gradient(ellipse 38% 30% at 96% 102%,#b4b9df 0%,#cecfe6 36%,#e9e6f0 60%,transparent 78%),
    radial-gradient(ellipse 50% 38% at 50% 56%,#fdefd9 0%,#fdf6e8 46%,transparent 84%),
    linear-gradient(180deg,#fdfcf4 0%,#fefdf9 48%,#f5f0e6 100%);
}
.about:before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    url("assets/deco/line-br-left-top.png"),
    url("assets/deco/line-br-right-top.png"),
    url("assets/deco/line-br-left-bottom.png"),
    url("assets/deco/line-br-right-bottom.png");
  background-repeat:no-repeat;
  background-size:
    clamp(78px,7.6vw,118px) auto,
    clamp(84px,8.2vw,126px) auto,
    clamp(74px,7.2vw,112px) auto,
    clamp(82px,8vw,124px) auto;
  background-position:
    left 2% top 4%,
    right 2.4% top 2%,
    left 1.4% bottom 6%,
    right 1.8% bottom 4%;
  opacity:.78;
}
.about-visual{background:linear-gradient(155deg,#eef0f7 0%,#e2e5f0 46%,#e9e2ea 74%,#f0eade 100%);border-radius:22px}
.about-visual:before{border-color:#ffffff70;box-shadow:0 0 0 60px #ffffff14}
.picture-note{color:#4c5563}
.about-copy .lead{color:#2e3542}
.about-copy .hint{color:#6a7484}
.text-link,.contact-content a{color:#4c5563}

/* 我的经历 */
.practice{background:#f3efe7}
.experience-card{
  background:#fbf9f5;border:1px solid #e2dbcf;
  box-shadow:0 10px 24px #3b435a0f;
}
.experience-card h3{color:#2e3542}
.experience-card p{color:#5b6474}
.experience-card.text-only{background:linear-gradient(140deg,#fbf9f5,#efebe2)}

/* 我的作品 */
.works{
  isolation:isolate;
  background:
    radial-gradient(circle at 10% 22%,#dfe4f0 0,transparent 36%),
    radial-gradient(circle at 90% 14%,#efdfe4 0,transparent 34%),
    radial-gradient(circle at 18% 88%,#e5e1ef 0,transparent 34%),
    radial-gradient(circle at 84% 92%,#e8e4d8 0,transparent 38%),
    #efe9df;
}
.works:before,.works:after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  background-repeat:no-repeat;background-size:contain;
  mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 18%,transparent 66%);
  mask-image:radial-gradient(ellipse at 50% 50%,#000 18%,transparent 66%);
}
.works:before{
  width:clamp(260px,30vw,440px);aspect-ratio:620/430;
  left:-5%;bottom:-12%;
  background-image:url("assets/deco/flower-left.png");
  opacity:.62;
}
.works:after{
  width:clamp(260px,30vw,440px);aspect-ratio:690/430;
  right:-5%;top:-12%;
  background-image:url("assets/deco/flower-right.png");
  opacity:.55;
}
.round-button{border-color:#aab1bd;color:#4c5563}
.round-button:hover{background:#4c5563;color:#f7f4ee}
.work-ticket{background:#fbf9f5;border-color:#d9d2c6;box-shadow:0 24px 50px #4a453a1f}
.ticket-main.has-image{background:#ecebf2}
.ticket-under{background:#e9e5ec}
.ticket-stub{background:#ecdcde}
.ticket-copy small{color:#7c8698}
.ticket-copy h3{color:#2e3542}
.ticket-art{background:linear-gradient(135deg,#e4e9f1,#f0eae0);color:#6b7686}
.work-detail{background:#fbf9f5}
.work-controls{color:#7c8698}

/* 联系与页脚 */
.contact{background:#ece7de}
footer{color:#6a7484}

/* 手机：顶部柔化，避免标题压到窗框花纹 */
@media(max-width:760px){
  .works:before,.works:after{width:132px}
  .works:before{left:-8%;bottom:-2%;opacity:.55}
  .works:after{right:-8%;top:-3%;opacity:.5}
  .about:before{
    background-size:66px auto,70px auto,64px auto,68px auto;
    background-position:left 3% top 3%,right 3% top 2%,left 2% bottom 4%,right 3% bottom 3%;
    opacity:.6;
  }
  .work-controls{flex-wrap:wrap;gap:6px 14px}
  .hero-sticky{padding:0!important;background-position:center bottom;top:70px;height:calc(100svh - 70px)!important}
  .hero-sticky:before{
    content:"";position:absolute;z-index:1;top:0;left:0;right:0;height:40%;
    background:linear-gradient(180deg,#f3efe7f7 0%,#f3efe7ee 46%,#f3efe700 100%);
  }
  .hero-copy{
    top:0;left:20px;right:20px;transform:none;max-width:none;
    padding-top:clamp(64px,11vh,96px);z-index:3;
  }
  .hero-sticky .hero-copy h1{font-size:clamp(28px,7.8vw,38px);margin:14px 0 12px}
  .hero-sticky .hero-copy .eyebrow{font-size:10px}
  .hero-sticky .hero-copy p{font-size:13px;color:#4a5464}
  .hero-tags{gap:7px 6px}
  .hero-tags li{font-size:11.5px;padding:4px 10px}
  .hero-copy .pill-button{margin-top:18px;padding:10px 20px;font-size:13px}
  .hero-sticky .hero-frame{height:36svh}
  .hero-sticky .character-stage{margin-bottom:1.6vh!important}
  .hero-sticky .visual-note{display:none}
  .hero-progress{left:auto;right:20px;bottom:56px;width:86px}
  .hero-sticky .scroll-hint{display:none}
}

/* ============ 字体方案 B · 文楷手写 ============
   全站：霞鹜文楷（LXGW WenKai）400
   英文小字：Cormorant Garamond
   均为 OFL 开源可商用字体
   ============================================ */
:root{
  --font-serif:"LXGW WenKai","STKaiti","KaiTi","Songti SC",serif;
  --font-sans:"LXGW WenKai","STKaiti","KaiTi","PingFang SC",sans-serif;
  --font-en:"Cormorant Garamond","LXGW WenKai",serif;
}
body,button,input,select,textarea{font-family:var(--font-sans)!important}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-serif)!important;
  font-weight:700;
  letter-spacing:.015em;
}
.hero-sticky h1{letter-spacing:.01em;line-height:1.24}
.wordmark{
  font-family:var(--font-serif)!important;
  font-weight:400;letter-spacing:.03em;
}
.eyebrow{
  font-family:var(--font-en)!important;
  font-weight:600;letter-spacing:.26em;
}
.pill-button{
  font-family:var(--font-sans)!important;font-weight:400;
  letter-spacing:.04em;
}
.hero-tags li,.lead,.hint,.picture-note,.visual-note,.scroll-hint,.hero-progress{
  font-family:var(--font-sans)!important;
}
.hero-tags li{letter-spacing:.02em}
@media(max-width:760px){
  h1,h2,h3,h4{letter-spacing:0}
  .eyebrow{letter-spacing:.18em}
}

/* ============ 求职意向卡 + 联系方式 ============ */
.intent-bar{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.4vw,30px);
  margin-top:clamp(30px,5vh,52px);
  padding-top:clamp(22px,3.4vh,30px);
  border-top:1px solid #dcd6cb;
}
.intent-item{display:flex;flex-direction:column;gap:7px}
.intent-item span{font-size:11px;letter-spacing:.18em;color:#9aa3b2}
.intent-item strong{
  font-size:clamp(14px,1.15vw,16px);font-weight:400;
  color:#2e3542;line-height:1.6;letter-spacing:.01em;
}
#contact-content{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3vh,28px)}
.contact-item{
  display:inline-flex;align-items:center;
  padding:11px 22px;border-radius:999px;
  border:1px solid #ccd4e2;background:#fffdf8cc;
  color:#3c4452;font-size:14px;text-decoration:none;
  letter-spacing:.02em;
  transition:background .25s ease,border-color .25s ease;
}
.contact-item:hover{background:#fff;border-color:#a8b4c8}
@media(max-width:760px){
  .intent-bar{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
  .intent-item strong{font-size:13.5px}
  .contact-item{font-size:13px;padding:10px 18px}
}

/* ===== 03 / 合规、事务与工具 ===== */
.expertise{
  background:
    radial-gradient(72% 52% at 12% 6%,#eef1f8 0%,#eef1f800 64%),
    radial-gradient(66% 48% at 90% 94%,#f2ece4 0%,#f2ece400 68%),
    #f4f0e8;
}
.expertise-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.5vw,22px);
  max-width:1220px;margin:clamp(26px,4vh,46px) auto 0;
}
.expertise-card{
  background:#fbf9f5d9;border:1px solid #e2dbd1;border-radius:18px;
  padding:clamp(18px,1.9vw,26px);
}
.expertise-card:nth-child(1){grid-column:span 7}
.expertise-card:nth-child(2){grid-column:span 5}
.expertise-card:nth-child(3){grid-column:span 5}
.expertise-card:nth-child(4){grid-column:span 7}
.expertise-card h3{
  margin:0 0 5px;font-size:clamp(15px,1.3vw,19px);
  color:#2e3542;letter-spacing:.01em;
}
.expertise-card .tag{
  display:block;margin-bottom:13px;
  font-size:11px;letter-spacing:.08em;color:#949cad;
}
.expertise-card ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.expertise-card li{
  position:relative;padding-left:14px;
  font-size:clamp(12px,1vw,13.5px);line-height:1.74;color:#5b6474;
}
.expertise-card li:before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:#b08968;
}
@media(max-width:980px){
  .expertise-card:nth-child(1),
  .expertise-card:nth-child(2),
  .expertise-card:nth-child(3),
  .expertise-card:nth-child(4){grid-column:span 6}
}
@media(max-width:640px){
  .expertise-grid{grid-template-columns:1fr}
  .expertise-card:nth-child(1),
  .expertise-card:nth-child(2),
  .expertise-card:nth-child(3),
  .expertise-card:nth-child(4){grid-column:span 1}
  .expertise-card{padding:18px}
}

/* ===== 03 / 我能直接上手的工作 · 重构版 ===== */
.expertise-metrics{
  max-width:1220px;margin:clamp(22px,3.4vh,38px) auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid #ddd5c8;border-bottom:1px solid #ddd5c8;
}
.expertise-metrics .metric{
  padding:clamp(16px,2vh,24px) 10px;text-align:center;
  border-right:1px solid #e3dbcf;
}
.expertise-metrics .metric:last-child{border-right:0}
.expertise-metrics .metric strong{
  display:block;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(30px,3.4vw,44px);line-height:1;font-weight:600;
  color:#3f4a5e;letter-spacing:.01em;
}
.expertise-metrics .metric span{
  display:block;margin-top:8px;
  font-size:clamp(11.5px,.95vw,13px);color:#7b8496;letter-spacing:.02em;
}
.expertise-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.8vw,24px);align-items:stretch;
}
.expertise-card{
  display:flex;flex-direction:column;position:relative;
  padding:clamp(22px,2.2vw,32px);
}
.expertise-card:nth-child(n){grid-column:auto}
.expertise-card .card-index{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:13px;letter-spacing:.18em;color:#b9a68f;
}
.expertise-card h3{
  margin:8px 0 0;font-weight:700;
  font-size:clamp(18px,1.7vw,23px);color:#2e3542;
}
.expertise-card .tag{
  margin:6px 0 0;font-size:11.5px;letter-spacing:.1em;color:#98a0b0;
}
.expertise-card .card-lead{
  margin:14px 0 0;padding:12px 0 0;
  border-top:1px dashed #e0d8cb;
  font-size:clamp(13px,1.1vw,14.5px);line-height:1.75;color:#4a5464;
}
.expertise-card ul{margin:16px 0 0;gap:12px}
.expertise-card li{
  display:grid;grid-template-columns:5.2em 1fr;gap:9px;
  padding-left:0;font-size:clamp(13px,1.05vw,14.5px);line-height:1.8;color:#5b6474;
}
.expertise-card li:before{display:none}
.expertise-card li b{
  font-weight:700;color:#3f4a5e;white-space:nowrap;
  font-size:.92em;letter-spacing:.02em;padding-top:.1em;
}
.expertise-certs{
  max-width:1220px;margin:clamp(18px,2.4vh,28px) auto 0;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.cred-chip{
  padding:7px 14px;border:1px solid #ddd5c8;border-radius:999px;
  background:#fbf9f5cc;font-size:12.5px;color:#5b6474;letter-spacing:.01em;
}
@media(max-width:900px){
  .expertise-metrics{grid-template-columns:repeat(2,1fr)}
  .expertise-metrics .metric:nth-child(2){border-right:0}
  .expertise-metrics .metric:nth-child(-n+2){border-bottom:1px solid #e3dbcf}
}
@media(max-width:700px){
  .expertise-grid{grid-template-columns:1fr}
  .expertise-card{padding:20px}
}