:root{--bg:#08090b;--panel:#101216;--text:#f2f4f7;--muted:#9aa0aa;--line:#252932;--accent:#4f7cff;--max:1240px}










*{box-sizing:border-box}










html{scroll-behavior:smooth}










body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;line-height:1.65;overflow-x:hidden}










a{color:inherit;text-decoration:none}










.nav{height:72px;position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:rgba(8,9,11,.78);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}










.brand{font-weight:700;letter-spacing:-.02em}










.brand span{color:#858b95;font-weight:500;margin-left:5px}










.nav nav{display:flex;gap:30px;font-size:13px;color:#b9bec7}










.nav nav a:hover{color:#fff}










.status{font-size:10px;letter-spacing:.12em;color:#aeb4bd}










.status i{display:inline-block;width:6px;height:6px;background:#62d39a;border-radius:50%;margin-right:7px}










.section-pad{max-width:var(--max);margin:auto;padding:130px 4vw}










.hero{min-height:800px;padding-top:170px;position:relative}










.eyebrow,.section-head>span{font-size:10px;letter-spacing:.16em;color:#777e89}










.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:5vw;align-items:center;margin-top:28px}










.hero h1{font-size:clamp(70px,10vw,150px);line-height:.92;letter-spacing:-.08em;margin:0;font-weight:750}










.hero h1 em,.section-head h2 em,.contact h2 em{font-style:normal;color:var(--accent)}










.hero-copy{font-size:17px;color:#d9dde3;margin:42px 0 8px;letter-spacing:.04em}










.hero-sub{max-width:590px;color:var(--muted);font-size:15px}










.button{display:inline-flex;margin-top:24px;border:1px solid #3b414c;padding:12px 18px;gap:24px;transition:.25s}










.button:hover{background:#fff;color:#08090b}










.hero-orbit{aspect-ratio:1;position:relative;border:1px solid var(--line);border-radius:50%;max-width:510px;margin:auto;background:radial-gradient(circle,rgba(79,124,255,.11),transparent 55%)}










.hero-orbit:before,.hero-orbit:after{content:"";position:absolute;inset:12%;border:1px dashed #252b37;border-radius:50%}










.hero-orbit:after{inset:27%}










.orbit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;font-size:34px;font-weight:750;line-height:.9;letter-spacing:-.06em}










.orbit-center small{font-size:12px;letter-spacing:.2em;color:#777f8c}










.node{position:absolute;padding:7px 10px;border:1px solid #343a46;background:#0b0d11;font-size:9px;letter-spacing:.12em;color:#bfc5ce}










.n1{left:9%;top:18%}










.n2{right:8%;top:26%}










.n3{right:3%;bottom:25%}










.n4{left:12%;bottom:20%}










.n5{left:43%;top:5%}










.n6{right:38%;bottom:5%}










.numbers{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:34px;padding-bottom:34px}










.number{padding:0 22px;border-right:1px solid var(--line)}










.number:first-child{padding-left:0}










.number:last-child{border:0}










.number strong{display:block;font-size:42px;letter-spacing:-.06em}










.number span{font-size:12px;color:var(--muted)}










.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:55px}










.section-head h2{font-size:clamp(44px,6vw,80px);line-height:1;letter-spacing:-.06em;margin:0;text-align:right}










.filters{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap}










.filters button{border:1px solid var(--line);background:transparent;color:#858c97;padding:7px 12px;font-size:11px;cursor:pointer}










.filters button.active,.filters button:hover{color:#fff;border-color:#697386}










.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:60px 24px}










.project{cursor:pointer}










.project-img{position:relative;overflow:hidden;background:#11141a;border:1px solid #1e222a}










.project-img img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.7) contrast(1.03);transition:.5s}










.project:hover img{transform:scale(1.025);filter:saturate(1)}










.project-img span{position:absolute;top:12px;right:12px;background:#08090b;padding:5px 8px;font-size:10px}










.project-meta{padding-top:16px}










.project-meta>span{font-size:9px;color:#7480a0;letter-spacing:.13em}










.project-meta h3{font-size:23px;margin:7px 0}










.project-meta p{font-size:13px;color:var(--muted);max-width:560px;margin:0}










.about{border-top:1px solid var(--line)}










.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:10vw}










.about-big{font-size:clamp(32px,4vw,58px);line-height:1.08;letter-spacing:-.055em}










.about-text{color:#b0b6c0;font-size:14px}










.about-text p{margin-top:0;margin-bottom:24px}










.tags{display:flex;gap:7px;flex-wrap:wrap}










.tags span{font-size:9px;border:1px solid #343a45;padding:6px 9px;color:#d4d8df}










.experience{border-top:1px solid var(--line)}










.timeline{border-top:1px solid var(--line)}










.time-item{display:grid;grid-template-columns:180px 1fr;padding:22px 0;border-bottom:1px solid var(--line)}










.time-item b{font-size:11px;color:#737a85;font-weight:500}










.time-item h3{font-size:18px;margin:0 0 3px}










.time-item p{margin:0;color:#818894;font-size:13px}










.skills{border-top:1px solid var(--line)}










.skill-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}










.skill-grid>div{padding:24px 20px;border-right:1px solid var(--line);min-height:200px}










.skill-grid>div:first-child{padding-left:0}










.skill-grid>div:last-child{border:0}










.skill-grid b{font-size:10px;color:#69707b}










.skill-grid h3{font-size:28px;margin:35px 0 8px;letter-spacing:-.03em}










.skill-grid p{font-size:12px;color:var(--muted);margin:0}










.contact{border-top:1px solid var(--line);min-height:680px}










.contact h2{font-size:clamp(48px,7vw,96px);line-height:.98;letter-spacing:-.07em;margin:55px 0 28px}










.contact>p{color:var(--muted);max-width:500px}










.email{display:inline-block;font-size:clamp(22px,3vw,38px);margin-top:30px;border-bottom:1px solid #4b515d;padding-bottom:5px}










.contact-bottom{display:flex;justify-content:space-between;margin-top:160px;color:#666d77;font-size:10px;letter-spacing:.1em}










footer{border-top:1px solid var(--line);padding:20px 4vw;color:#5e646e;font-size:9px;letter-spacing:.1em}










.cursor{position:fixed;width:14px;height:14px;border:1px solid rgba(255,255,255,.5);border-radius:50%;pointer-events:none;z-index:99;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .15s,height .15s}










@media(max-width:800px){.nav nav{display:none}










.status{display:none}










.hero{padding-top:130px;min-height:auto}










.hero-grid{grid-template-columns:1fr}










.hero-orbit{margin-top:45px;max-width:390px}










.numbers{grid-template-columns:repeat(2,1fr);gap:25px}










.number{border:0;padding:0}










.section-head{display:block}










.section-head h2{text-align:left;margin-top:25px}










.work-grid{grid-template-columns:1fr;gap:45px}










.about-grid{grid-template-columns:1fr;gap:45px}










.skill-grid{grid-template-columns:1fr 1fr}










.skill-grid>div{border-bottom:1px solid var(--line)}










.contact-bottom{margin-top:100px}










.time-item{grid-template-columns:110px 1fr}










}










@media(max-width:480px){.hero h1{font-size:65px}










.numbers{grid-template-columns:1fr 1fr}










.number strong{font-size:32px}










.skill-grid{grid-template-columns:1fr}










.skill-grid>div{border-right:0}










.contact h2{font-size:48px}










.cursor{display:none}










}











/* V2 hero: an editorial map rather than a conventional name-and-button landing section */
.hero{min-height:900px;padding-top:114px}









.hero-topline{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.15em;color:#737a85;padding:0 0 26px;border-bottom:1px solid var(--line)}









.hero-topline b{color:var(--accent);font-size:14px;margin-left:7px}









.dimension-stage{position:relative;min-height:650px;display:grid;grid-template-columns:42% 58%;align-items:center}









.stage-copy{position:relative;z-index:3;padding-bottom:60px}









.stage-copy .eyebrow{margin:0 0 18px}









.hero h1{font-size:clamp(67px,8.5vw,132px);line-height:.88;letter-spacing:-.09em;margin:0;font-weight:750}









.hero h1 span,.hero h1 em{display:block}









.stage-copy>p:last-child{max-width:330px;color:var(--muted);font-size:14px;margin:29px 0 0}









.connection-map{width:650px;max-width:100%;height:600px;position:relative;margin-left:auto;isolation:isolate}









.connection-map:before{content:"";position:absolute;inset:20% 8%;background:radial-gradient(ellipse,rgba(79,124,255,.15),transparent 64%);filter:blur(10px);z-index:-2}









.connection-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}









.connection-lines path{fill:none;stroke:#3b4668;stroke-width:1;stroke-dasharray:5 8;animation:dash 18s linear infinite}









.connection-lines circle{fill:rgba(79,124,255,.035);stroke:#52638d;stroke-width:1}









.dimension{position:absolute;border:0;background:none;color:#dfe4f1;font:600 clamp(18px,2.1vw,28px)/1 inherit;letter-spacing:-.06em;padding:4px;cursor:pointer;transition:color .25s,transform .25s;z-index:2}









.dimension:hover,.dimension.is-active{color:var(--accent);transform:translateY(-4px) scale(1.04)}









.dimension span{display:block;font-size:8px;letter-spacing:.14em;color:#777f8e;margin-bottom:2px}









.d-content{top:10%;left:13%}









.d-brand{top:5%;right:12%}









.d-media{top:43%;right:0}









.d-visual{bottom:7%;right:18%}









.d-event{bottom:2%;left:24%}









.d-digital{top:53%;left:4%}









.identity-core{position:absolute;left:50%;top:50%;width:184px;height:184px;transform:translate(-50%,-50%);border:1px solid #7d91cc;border-radius:50%;background:rgba(12,14,21,.9);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:3;box-shadow:0 0 0 15px rgba(79,124,255,.025)}









.identity-core:after{content:"";position:absolute;inset:11px;border:1px solid rgba(134,156,238,.18);border-radius:50%}









.core-kicker{font-size:7px;letter-spacing:.11em;color:#8794bd;position:relative;z-index:1}









.identity-core strong{font-size:47px;line-height:.72;letter-spacing:-.16em;margin:12px 0 9px;position:relative;z-index:1}









.identity-core small{font-size:8px;letter-spacing:.2em;color:#b3bdd8;position:relative;z-index:1}









.dimension-detail{position:absolute;bottom:16%;left:50%;transform:translateX(-50%);width:260px;text-align:center;color:#8e98a9;font-size:11px;letter-spacing:.06em;margin:0;z-index:4}









.hero-explore{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;font-size:10px;letter-spacing:.14em;transition:color .25s}









.hero-explore b{font-size:18px;color:var(--accent);transition:transform .25s}









.hero-explore:hover{color:var(--accent)}









.hero-explore:hover b{transform:translate(4px,4px)}









@keyframes dash{to{stroke-dashoffset:-180}









}









.project{transition:opacity .3s,transform .3s}









.project:hover{transform:translateY(-5px)}









.number strong{font-variant-numeric:tabular-nums}










@media(max-width:800px){.hero{padding-top:104px;min-height:auto}









.hero-topline{padding-bottom:18px}









.dimension-stage{display:block;min-height:0}









.stage-copy{padding:58px 0 18px}









.connection-map{height:min(108vw,570px);margin:0 auto}









.hero-explore{margin-top:0}









.dimension-detail{bottom:13%}









}










@media(max-width:480px){.hero-topline span:last-child{display:none}









.stage-copy{padding-top:43px}









.hero h1{font-size:64px}









.connection-map{height:108vw;min-height:390px}









.dimension{font-size:17px}









.dimension span{font-size:7px}









.identity-core{width:130px;height:130px}









.identity-core strong{font-size:36px}









.core-kicker{font-size:5px}









.identity-core small{font-size:6px}









.dimension-detail{font-size:9px;width:220px;bottom:10%}









.d-content{left:9%;top:8%}









.d-brand{right:7%;top:5%}









.d-media{right:-2%;top:41%}









.d-visual{right:12%;bottom:5%}









.d-event{left:18%;bottom:0}









.d-digital{left:-1%;top:51%}









}










@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}









}











/* Project pages use the extracted original visuals as the content, with copy kept deliberately concise. */
.project-page{background:#0b0c10}









.project-nav{position:static;background:transparent}









.project-wrap{max-width:1240px;margin:auto;padding:52px 4vw 110px}









.back-link{font-size:11px;letter-spacing:.13em;color:#aeb8d0}









.project-intro{padding:10vh 0 7vh;max-width:900px}









.project-intro span{font-size:10px;letter-spacing:.16em;color:#8792b0}









.project-intro h1{font-size:clamp(58px,9vw,140px);line-height:.88;letter-spacing:-.09em;margin:18px 0 32px}









.project-intro p{max-width:520px;font-size:16px;color:#a9afba}









.project-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:54px}









.project-facts div{padding:18px 0;border-right:1px solid var(--line);padding-left:20px}









.project-facts div:first-child{padding-left:0}









.project-facts div:last-child{border-right:0}









.project-facts b{display:block;font-size:10px;letter-spacing:.13em;color:#7180a3}









.project-facts span{font-size:14px;color:#dce0e7}









.visual-wall{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}









.visual{margin:0;overflow:hidden;background:#11141a;position:relative}









.visual img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .4s;filter:saturate(.87)}









.visual:hover img{transform:scale(1.045);filter:saturate(1.08)}









.visual:after{content:"VIEW";position:absolute;right:12px;bottom:10px;font-size:9px;letter-spacing:.15em;opacity:0;transition:.25s}









.visual:hover:after{opacity:1}









.wide{grid-column:span 8;aspect-ratio:1.8}









.tall{grid-column:span 4;aspect-ratio:.58}









.half{grid-column:span 6;aspect-ratio:1.15}









.one-third{grid-column:span 4;aspect-ratio:.78}









.project-note{margin:70px 0 0;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:40px;color:#8e96a5;font-size:13px}









.project-note p{margin:0;max-width:570px}









.lightbox{position:fixed;inset:0;background:rgba(4,5,7,.92);z-index:100;display:none;align-items:center;justify-content:center;padding:5vw;cursor:zoom-out}









.lightbox.open{display:flex}









.lightbox img{max-width:100%;max-height:90vh;object-fit:contain}









.lightbox button{position:absolute;top:20px;right:28px;background:none;border:0;color:#fff;font-size:28px;cursor:pointer}









@media(max-width:700px){.project-wrap{padding-top:28px}









.project-intro{padding:8vh 0 6vh}









.project-facts{grid-template-columns:1fr}









.project-facts div{border-right:0;border-bottom:1px solid var(--line);padding:12px 0}









.wide,.tall,.half,.one-third{grid-column:span 12;aspect-ratio:1.05}









.project-note{display:block}









.project-note p+ p{margin-top:18px}









}










/* A single-sized, non-categorised portfolio trail. Every picture is a doorway. */
.work-intro{max-width:520px;margin:-28px 0 30px;color:var(--muted);font-size:14px}








.work-trail{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}








.work-tile{height:440px;position:relative;margin:0;overflow:hidden;background:#15171d;cursor:pointer;isolation:isolate}








.work-tile:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,11,.02) 28%,rgba(5,7,11,.9) 100%);z-index:1;transition:.35s}








.work-tile img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.78);transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .45s}








.work-tile>div{position:absolute;z-index:2;inset:auto 20px 18px;color:#fff}








.work-tile span{font-size:9px;letter-spacing:.16em;color:#c4ceef}








.work-tile h3{font-size:clamp(22px,2.5vw,34px);line-height:1.02;letter-spacing:-.06em;margin:7px 0 15px}








.work-tile b{display:inline-block;opacity:0;transform:translateY(8px);font-size:9px;letter-spacing:.15em;color:#9eb4ff;transition:.3s}








.work-tile:hover img,.work-tile:focus img{transform:scale(1.06);filter:saturate(1.1)}








.work-tile:hover:before,.work-tile:focus:before{background:linear-gradient(180deg,rgba(5,7,11,.05) 10%,rgba(5,7,11,.95) 100%)}








.work-tile:hover b,.work-tile:focus b{opacity:1;transform:translateY(0)}








.work-tile:focus{outline:1px solid var(--accent);outline-offset:3px}








.personal-tile:after{content:"✦";position:absolute;z-index:3;right:14px;top:12px;width:37px;height:37px;border-radius:50%;display:grid;place-items:center;background:#ffc8de;color:#622b4d;font-size:20px;box-shadow:3px 3px 0 #ffe66c;transform:rotate(10deg)}








.numbers .number strong{font-size:42px;min-width:4.2ch;white-space:nowrap}








@media(max-width:800px){.work-trail{grid-template-columns:repeat(2,1fr)}








.work-tile{height:390px}








}








@media(max-width:480px){.work-intro{margin-top:-12px}








.work-trail{grid-template-columns:1fr;gap:12px}








.work-tile{height:420px}








.work-tile b{opacity:1;transform:none}








.numbers .number strong{font-size:32px}








}









/* V4: brighter, people-first visual language. Images are never cropped. */
:root{--bg:#fffaf2;--panel:#fff;--text:#18213b;--muted:#59647a;--line:#d9dfec;--accent:#4267e8}







body{background:var(--bg);color:var(--text)}







.nav{background:rgba(255,250,242,.88);border-bottom-color:#dfe4ef}







.brand span,.status,.hero-topline{color:#68728a}







.nav nav{color:#526079}







.nav nav a:hover{color:var(--accent)}







.status i{background:#ff7474}







.intro-hero{min-height:760px;padding-top:112px}







.intro-stage{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center;padding:65px 5vw 35px}







.intro-copy .eyebrow{color:#ee637a;font-weight:700}







.intro-copy h1{font-size:clamp(78px,10vw,146px);line-height:.82;color:#17213e;letter-spacing:-.1em}







.intro-copy h1 small{display:block;font-size:clamp(16px,2vw,25px);line-height:1;margin:21px 0 0 7px;letter-spacing:.04em;color:#4267e8}







.intro-role{font-size:15px;font-weight:700;color:#4267e8;margin:34px 0 8px}







.intro-text{max-width:370px;color:#586278;font-size:15px}







.start-button{display:inline-flex;gap:30px;align-items:center;margin-top:28px;background:#17213e;color:#fff;border-radius:99px;padding:13px 20px;font-size:12px;transition:.25s}







.start-button:hover{background:#4267e8;transform:translateY(-2px)}







.portrait-card{height:480px;max-width:390px;justify-self:end;width:100%;background:#c8d8ff;border:2px solid #17213e;border-radius:170px 170px 30px 30px;position:relative;overflow:visible;box-shadow:10px 10px 0 #ffcf5b}







.portrait-card img{height:100%;width:100%;object-fit:contain;object-position:center bottom;display:block;border-radius:168px 168px 27px 27px}







.portrait-card p{position:absolute;right:-35px;bottom:30px;width:185px;background:#fffaf2;border:1px solid #17213e;border-radius:18px;padding:12px 15px;margin:0;font-size:12px;line-height:1.45;transform:rotate(-4deg)}







.portrait-card i{position:absolute;left:-29px;bottom:44px;font-style:normal;font-size:43px;color:#ff6f8b}







.portrait-sticker{position:absolute;z-index:2;right:-22px;top:64px;background:#ff6f8b;color:#fff;border:1px solid #17213e;border-radius:50%;height:62px;width:62px;display:grid;place-items:center;font-weight:800;transform:rotate(11deg)}







.numbers{border-color:#d9dfec;background:#fff;padding-left:4vw;padding-right:4vw}







.number{border-color:#d9dfec}







.number strong{color:#17213e}







.number span{color:#69748a}







.play-section{border-top:0}







.play-section .section-head h2{color:#17213e}







.play-section .section-head h2 em{color:#ee637a}







.story-player{position:relative;height:570px;max-width:940px;margin:42px auto 0;background:#e9efff;border:1px solid #17213e;border-radius:26px;overflow:hidden;box-shadow:8px 8px 0 #ffcf5b}







.player-slide{position:absolute;inset:0;display:none;grid-template-columns:1.1fr .9fr;cursor:pointer;background:#e9efff}







.player-slide.active{display:grid;animation:slideIn .45s cubic-bezier(.2,.7,.2,1)}







.player-slide img{width:100%;height:100%;object-fit:contain;background:#fff}







.player-slide>div{padding:10% 8%;align-self:center}







.player-slide span{font-size:10px;color:#e95873;font-weight:800;letter-spacing:.16em}







.player-slide h3{font-size:clamp(40px,5vw,72px);line-height:.92;letter-spacing:-.08em;margin:18px 0;color:#17213e}







.player-slide p{display:inline-block;background:#17213e;color:#fff;border-radius:99px;padding:8px 13px;font-size:11px}







.story-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);border:1px solid #17213e;background:#fffaf2;color:#17213e;width:48px;height:48px;border-radius:50%;font-size:21px;cursor:pointer;transition:.2s}







.story-arrow:hover{background:#ffcf5b;transform:translateY(-50%) scale(1.08)}







.prev{left:18px}







.next{right:18px}







.story-counter{position:absolute;z-index:4;top:18px;left:20px;font-size:11px;letter-spacing:.13em;color:#526079}







.story-counter b{color:#e95873}







.project-page{background:#fffaf2}







.project-intro h1{color:#17213e}







.project-intro p,.project-note{color:#59647a}







.project-facts{background:#fff;border-color:#d9dfec}







.project-facts div{border-color:#d9dfec}







.project-facts span{color:#17213e}







.visual{background:#fff;border:1px solid #d9dfec}







.visual img{object-fit:contain;filter:none}







.visual:hover img{transform:scale(1.015)}







.lightbox{background:rgba(23,33,62,.94)}







@keyframes slideIn{from{opacity:0;transform:translateX(20px)}







to{opacity:1;transform:translateX(0)}







}







@media(max-width:800px){.intro-stage{grid-template-columns:1fr;padding:45px 0}







.portrait-card{justify-self:center;margin-top:20px}







.story-player{height:620px}







.player-slide{grid-template-columns:1fr;grid-template-rows:1fr auto}







.player-slide img{min-height:0}







.player-slide>div{padding:25px 10% 40px}







.player-slide h3{font-size:48px;margin:8px 0}







}







@media(max-width:480px){.intro-hero{padding-top:96px}







.intro-stage{padding-top:35px}







.intro-copy h1{font-size:78px}







.portrait-card{height:390px;width:82%;border-radius:130px 130px 24px 24px}







.portrait-card img{border-radius:128px 128px 22px 22px}







.portrait-card p{right:-18px;bottom:18px;width:160px;font-size:11px}







.story-player{height:590px;border-radius:18px}







.player-slide h3{font-size:43px}







.story-arrow{width:42px;height:42px}







.prev{left:10px}







.next{right:10px}







}







.project-intro{position:relative}






.intro-project-image{position:absolute;right:4vw;top:4vh;width:min(28vw,300px);max-height:280px;object-fit:contain;background:#fff;border:1px solid #d9dfec;border-radius:14px;padding:8px}






@media(max-width:800px){.intro-project-image{position:static;width:100%;max-height:250px;margin-top:20px}






}







/* V5 refinement: professional profile treatment and an interactive experience explorer. */
.portrait-card{height:500px;max-width:365px;background:#eef3fb;border:1px solid #cbd6e8;border-radius:16px;box-shadow:none;overflow:hidden}





.portrait-card img{border-radius:0;object-fit:contain;object-position:center bottom}





.portrait-card p{right:18px;bottom:18px;width:auto;background:rgba(255,255,255,.94);border:0;border-left:3px solid #4267e8;border-radius:0;padding:11px 14px;transform:none;font-size:12px;color:#263450}





.portrait-card i,.portrait-sticker{display:none}





.intro-copy .eyebrow{color:#4267e8}





.intro-role{color:#344fba}





.play-section .section-head h2 em{color:#4267e8}





.player-slide span{color:#4267e8}





.story-counter b{color:#4267e8}





.numbers{box-shadow:none}





.story-player{box-shadow:none;border-color:#cbd6e8}





.story-arrow:hover{background:#e4ecff}





.personal-tile:after{display:none}





.experience-intro{max-width:540px;margin:-25px 0 32px;color:var(--muted);font-size:14px}





.experience-explorer{min-height:430px;display:grid;grid-template-columns:190px 1fr;border:1px solid #cbd6e8;background:#fff}





.experience-tabs{display:flex;flex-direction:column;border-right:1px solid #cbd6e8}





.experience-tab{flex:1;text-align:left;border:0;border-bottom:1px solid #cbd6e8;background:#f7f9ff;color:#68728a;padding:0 22px;font-size:11px;letter-spacing:.08em;cursor:pointer;transition:.22s}





.experience-tab:last-child{border-bottom:0}





.experience-tab span{display:block;margin-top:4px;font-size:16px;letter-spacing:0;color:#17213e}





.experience-tab.active,.experience-tab:hover{background:#4267e8;color:#dbe4ff}





.experience-tab.active span,.experience-tab:hover span{color:#fff}





.experience-panel{display:none;padding:58px 7vw;position:relative;overflow:hidden}





.experience-panel:after{content:"";position:absolute;width:250px;height:250px;right:-80px;bottom:-110px;background:#e4ecff;border-radius:50%}





.experience-panel.active{display:block;animation:panelIn .35s ease}





.experience-panel>span{font-size:10px;letter-spacing:.16em;color:#4267e8;font-weight:700}





.experience-panel h3{font-size:clamp(36px,5vw,68px);line-height:.93;letter-spacing:-.07em;margin:18px 0 22px;position:relative;z-index:1}





.experience-panel p{max-width:520px;color:#59647a;font-size:14px;position:relative;z-index:1}





.experience-panel>b{display:block;margin-top:34px;font-size:15px;position:relative;z-index:1}





.experience-panel small{font-weight:500;color:#68728a}





@keyframes panelIn{from{opacity:0;transform:translateY(12px)}





to{opacity:1;transform:none}





}





@media(max-width:800px){.portrait-card{height:440px}





.experience-explorer{grid-template-columns:1fr}





.experience-tabs{flex-direction:row;border-right:0;border-bottom:1px solid #cbd6e8}





.experience-tab{padding:15px 8px;border-right:1px solid #cbd6e8;border-bottom:0}





.experience-tab span{font-size:12px}





.experience-panel{padding:42px 8vw;min-height:350px}





}





@media(max-width:480px){.portrait-card{height:420px;width:86%;border-radius:12px}





.portrait-card img{border-radius:0}





.portrait-card p{right:12px;bottom:12px}





.experience-tabs{overflow-x:auto}





.experience-tab{min-width:78px}





.experience-panel h3{font-size:40px}





}






/* V6 structure: a clean personal archive, without a photo on the opening screen. */
.intro-object{width:min(390px,100%);height:430px;justify-self:end;position:relative;border:1px solid #cbd6e8;border-radius:28px;background:linear-gradient(145deg,#f6f8ff,#e7edff);padding:36px;overflow:hidden}




.intro-object:before{content:"";position:absolute;width:290px;height:290px;border:1px solid #b9c7f1;border-radius:50%;right:-95px;bottom:-110px}




.intro-object:after{content:"";position:absolute;width:160px;height:160px;border:1px solid #b9c7f1;border-radius:50%;right:55px;bottom:35px}




.intro-object span{font-size:10px;letter-spacing:.15em;color:#526fae}




.intro-object strong{display:block;font-size:clamp(40px,5vw,65px);line-height:.92;letter-spacing:-.08em;margin-top:70px;position:relative;z-index:1}




.intro-object p{position:absolute;bottom:35px;left:36px;max-width:210px;color:#56647e;font-size:13px;z-index:1}




.intro-object i{position:absolute;right:48px;bottom:65px;width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:#4267e8;color:#fff;font-size:34px;font-style:normal;font-weight:700;z-index:2}




.learning{border-top:1px solid #d9dfec}




.learning .section-head{margin-bottom:12px}




.learning .section-head h2{color:#17213e}




.learning-intro{max-width:500px;color:#59647a;font-size:14px;margin:0 0 34px}




.coordinate-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}




.coordinate-card{min-height:250px;padding:30px;border:1px solid #cbd6e8;border-radius:18px;background:#fff;text-align:left;cursor:pointer;transition:.25s}




.coordinate-card:hover,.coordinate-card.active{background:#eef3fb;border-color:#4267e8;transform:translateY(-4px)}




.coordinate-card span{font-size:10px;letter-spacing:.14em;color:#637da8}




.coordinate-card h3{font-size:clamp(24px,3vw,40px);line-height:1.05;letter-spacing:-.05em;margin:48px 0 7px}




.coordinate-card p{margin:0;color:#59647a;font-size:13px}




.coordinate-card b{display:block;margin-top:22px;color:#4267e8;font-size:11px}




.coordinate-note{margin-top:18px;padding:18px 22px;background:#17213e;color:#dbe4ff;border-radius:12px;font-size:13px}




.archive{border-top:1px solid #d9dfec}




.archive-draw{position:relative;min-height:410px;background:#eef3fb;border:1px solid #cbd6e8;border-radius:24px;padding:42px}




.draw-button{border:0;border-radius:99px;background:#17213e;color:#fff;padding:12px 17px;font-size:12px;cursor:pointer;transition:.2s}




.draw-button:hover{background:#4267e8}




.draw-button span{margin-left:10px}




.archive-card{width:min(390px,100%);min-height:295px;margin:32px auto 0;background:#fff;border:1px solid #cbd6e8;border-radius:17px;padding:27px;box-shadow:8px 8px 0 #c8d8ff;transition:.35s}




.archive-card.is-shuffling{transform:rotate(-3deg) translateY(-8px)}




.archive-card .archive-index{font-size:10px;letter-spacing:.15em;color:#6278a5}




.archive-card i{display:block;font-size:10px;letter-spacing:.16em;color:#4267e8;font-style:normal;margin-top:36px}




.archive-card h3{font-size:34px;line-height:.94;letter-spacing:-.07em;margin:12px 0}




.archive-card p{font-size:13px;color:#59647a;max-width:280px}




.archive-hint{position:absolute;right:42px;bottom:42px;max-width:260px;color:#59647a;font-size:13px}




.life{border-top:1px solid #d9dfec;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:end}




.life>div>span{font-size:10px;letter-spacing:.16em;color:#637da8}




.life h2{font-size:clamp(43px,6vw,78px);line-height:.96;letter-spacing:-.07em;margin:22px 0 0}




.life-placeholder{min-height:245px;border:1px dashed #9aaed1;border-radius:18px;background:linear-gradient(135deg,#f8fbff,#eef5f2);padding:28px;display:flex;flex-direction:column;justify-content:flex-end}




.life-placeholder b{font-size:11px;letter-spacing:.17em;color:#4267e8}




.life-placeholder p{font-size:13px;color:#59647a;margin:10px 0 0}




@media(max-width:800px){.intro-object{justify-self:center}




.coordinate-cards,.life{grid-template-columns:1fr}




.archive-hint{position:static;margin:23px 0 0}




.life{align-items:start}




}




@media(max-width:480px){.intro-object{height:340px;border-radius:18px}




.intro-object strong{margin-top:50px}




.intro-object p{bottom:22px;left:25px}




.intro-object i{right:30px;bottom:45px}




.coordinate-cards{grid-template-columns:1fr}




.coordinate-card{min-height:210px}




.archive{padding-left:4vw;padding-right:4vw}




.archive-draw{padding:25px 18px}




.archive-hint{font-size:12px}




.life-placeholder{min-height:180px}




}





/* V7: cultural-editorial direction inspired by the provided references. */
:root{--bg:#f4f0e9;--panel:#fbfaf7;--text:#25342f;--muted:#66736c;--line:#d8d1c3;--accent:#bd6046}



body{background:var(--bg);font-family:"Manrope","Noto Serif SC",sans-serif;letter-spacing:.01em}



.nav{background:rgba(244,240,233,.9);border-bottom-color:var(--line)}



.brand,.section-head>span,.eyebrow,.hero-topline,.project-intro span{font-family:"Manrope",sans-serif;letter-spacing:.14em}



.brand{font-size:12px}



.intro-copy h1,.section-head h2,.life h2,.contact h2,.intro-object strong,.player-slide h3,.experience-panel h3,.archive-card h3{font-family:"Noto Serif SC",serif;font-weight:600}



.intro-hero{background:radial-gradient(circle at 75% 35%,rgba(217,200,160,.28),transparent 25%),#f4f0e9}



.intro-object{background:#e4e6dc;border-color:#a8aea1;border-radius:0}



.intro-object:before,.intro-object:after{border-color:#a5aa9d}



.intro-object span,.coordinate-card span,.coordinate-card b,.archive-card i,.coordinate-note,.life>div>span{color:#8a4d39}



.intro-object i{background:#25342f;border-radius:0}



.intro-role,.intro-copy .eyebrow{color:#8a4d39}



.start-button,.draw-button{background:#25342f;border-radius:2px}



.start-button:hover,.draw-button:hover{background:#bd6046}



.learning,.archive,.life,.experience{border-color:var(--line)}



.coordinate-card{border-color:#aeb4a8;border-radius:0;background:#fbfaf7;padding:0 26px 26px;overflow:hidden}



.coordinate-card img{width:calc(100% + 52px);height:150px;margin:0 -26px 25px;object-fit:cover;display:block;filter:saturate(.74) contrast(.96);transition:.35s}



.coordinate-card:hover img,.coordinate-card.active img{filter:saturate(1);transform:scale(1.02)}



.coordinate-card:hover,.coordinate-card.active{background:#f7f0e5;border-color:#bd6046;transform:translateY(-3px)}



.coordinate-note{background:#25342f;border-radius:0;color:#e8dfd0}



.experience-explorer{border-color:#aeb4a8;background:#fbfaf7}



.experience-tabs{border-color:#aeb4a8}



.experience-tab{background:#ebe9e1;border-color:#d4d0c5}



.experience-tab span{font-family:"Noto Serif SC",serif}



.experience-tab.active,.experience-tab:hover{background:#25342f}



.experience-panel{background:#fbfaf7}



.experience-panel:after{background:#e2e6dc}



.experience-panel>span{color:#8a4d39}



.story-player{border-color:#aeb4a8;border-radius:0;background:#e7e5de}



.player-slide{background:#e7e5de}



.player-slide img{background:#f8f5ef;filter:saturate(.82)}



.story-arrow{border-color:#25342f;background:#fbfaf7;border-radius:0}



.story-arrow:hover{background:#dbe1d5}



.story-counter b,.player-slide span{color:#8a4d39}



.archive-draw{background:#e4e6dc;border-color:#aeb4a8;border-radius:0}



.archive-card{border-color:#aeb4a8;border-radius:0;box-shadow:7px 7px 0 #bd6046}



.archive-card .archive-index{color:#66736c}



.life{background:#e6e9df;margin-top:40px;padding-top:90px;padding-bottom:90px;max-width:none;padding-left:max(4vw,calc((100vw - 1240px)/2 + 4vw));padding-right:max(4vw,calc((100vw - 1240px)/2 + 4vw))}



.life-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}



.life-gallery figure{margin:0;min-height:185px;position:relative;overflow:hidden;background:#d6d8cf}



.life-gallery img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;filter:saturate(.76);transition:.45s}



.life-gallery figure:hover img{transform:scale(1.04);filter:saturate(1)}



.life-gallery figcaption{position:absolute;left:11px;bottom:8px;color:#fff;font-family:"Noto Serif SC",serif;font-size:15px;text-shadow:0 1px 8px rgba(0,0,0,.45)}



.contact{background:#25342f;color:#f5f0e7;max-width:none;padding-left:max(4vw,calc((100vw - 1240px)/2 + 4vw));padding-right:max(4vw,calc((100vw - 1240px)/2 + 4vw))}



.contact h2 em{color:#d9b77e}



.contact>p{color:#c7cdc3}



.email{border-color:#88958b}



footer{background:#25342f;color:#c7cdc3;border-color:#4a5a53}



@media(max-width:800px){.life{padding-left:4vw;padding-right:4vw}



.life-gallery{grid-template-columns:repeat(2,1fr)}



.contact{padding-left:4vw;padding-right:4vw}



}



@media(max-width:480px){.coordinate-card img{height:130px}



.life-gallery{grid-template-columns:1fr 1fr;gap:8px}



.life-gallery figure{min-height:145px}



}




/* Home sequence: opening typography, then a quiet three-dimensional photo browser. */
.intro-hero{min-height:900px;position:relative;overflow:hidden}


.cinematic-intro{grid-template-columns:1fr 1.25fr .78fr;gap:3vw;align-items:center;min-height:660px;padding:42px 0}


.opening-curtain{position:absolute;z-index:30;inset:0;background:#25342f;color:#f4f0e9;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;text-align:center;animation:openingExit .9s cubic-bezier(.76,0,.24,1) 1.75s forwards;pointer-events:none}


.opening-curtain span,.opening-curtain i{font:10px "Manrope",sans-serif;letter-spacing:.22em;font-style:normal;color:#d9cdbb}


.opening-curtain strong{font:600 clamp(44px,7vw,94px)/.93 "Noto Serif SC",serif;letter-spacing:-.08em}


.hero-topline,.cinematic-intro,.intro-scroll{opacity:0;animation:pageArrive .7s ease 2.2s forwards}


.intro-copy h1{font-size:clamp(62px,7.5vw,108px)}


.intro-copy .intro-text{max-width:320px;line-height:1.9}


.photo-browser{height:500px;position:relative;perspective:1100px}


.photo-card{position:absolute;margin:0;width:200px;height:315px;background:#fbfaf7;border:8px solid #fbfaf7;box-shadow:0 22px 44px rgba(37,52,47,.19);transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s;cursor:pointer;will-change:transform}


.photo-card:after{content:"";position:absolute;inset:-1px;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 36%);pointer-events:none;transform:translateZ(18px)}


.photo-card img{width:100%;height:265px;display:block;object-fit:cover;transform:translateZ(25px);filter:saturate(.78)}


.photo-card figcaption{font:11px "Noto Serif SC",serif;color:#4f5d56;padding:11px 4px;transform:translateZ(18px)}


.photo-card:hover{box-shadow:0 32px 60px rgba(37,52,47,.28)}


.card-one{left:8%;top:20px;transform:rotate(-11deg) translateZ(0)}


.card-two{left:34%;top:100px;z-index:2;transform:rotate(5deg) translateZ(42px)}


.card-three{right:0;top:30px;transform:rotate(12deg) translateZ(0)}


.browse-note{position:absolute;z-index:4;left:2%;bottom:10px;font:10px/1.6 "Manrope",sans-serif;letter-spacing:.14em;color:#8a4d39}


.intro-experience{border-left:1px solid #cfc8bb;padding-left:25px}


.intro-experience>span{font:10px "Manrope",sans-serif;letter-spacing:.15em;color:#8a4d39}


.intro-experience ol{list-style:none;margin:22px 0 0;padding:0}


.intro-experience li{position:relative;padding:0 0 20px 15px;border-left:1px solid #cfc8bb}


.intro-experience li:before{content:"";position:absolute;left:-4px;top:4px;width:7px;height:7px;border-radius:50%;background:#bd6046}


.intro-experience b,.intro-experience small{display:block;font:10px "Manrope",sans-serif;color:#7c877f}


.intro-experience strong{display:block;margin:5px 0 2px;font:600 16px "Noto Serif SC",serif}


.intro-scroll{border-top:1px solid #d8d1c3;padding:16px 0 0;font:11px "Manrope",sans-serif;color:#66736c;letter-spacing:.08em}


.intro-scroll span{margin-left:8px;color:#8a4d39}


@keyframes openingExit{to{transform:translateY(-100%);visibility:hidden}


}


@keyframes pageArrive{to{opacity:1}


}


@media(max-width:900px){.cinematic-intro{grid-template-columns:1fr 1fr}


.intro-experience{grid-column:1/-1;display:flex;align-items:flex-start;gap:30px;padding:20px 0 0;border-left:0;border-top:1px solid #cfc8bb}


.intro-experience ol{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0;flex:1}


.intro-experience li{padding-bottom:0}


.photo-browser{height:480px}


}


@media(max-width:600px){.intro-hero{min-height:auto}


.cinematic-intro{display:block;padding-top:60px}


.photo-browser{height:410px;margin-top:35px;transform:scale(.86);transform-origin:left top;width:116%}


.intro-experience{display:block;margin-top:-50px}


.intro-experience ol{margin-top:18px;grid-template-columns:1fr 1fr}


.intro-experience li{padding-bottom:17px}


.opening-curtain strong{font-size:44px}


.intro-scroll{margin-top:10px}


}



/* V9 opening loader and interactive role labels. */
.opening-curtain{gap:15px}

.opening-curtain .welcome-mark{width:58px;height:58px;display:grid;place-items:center;border:1px solid #d9cdbb;border-radius:50%;font:600 24px "Cormorant Garamond",serif;letter-spacing:0;color:#f4f0e9}

.opening-curtain strong{font:600 clamp(42px,7vw,88px)/1 "Cormorant Garamond","Noto Serif SC",serif;letter-spacing:.06em}

.opening-curtain em{font:10px "Manrope",sans-serif;letter-spacing:.2em;color:#d9cdbb;font-style:normal}

.loading-line{width:min(240px,55vw);height:1px;background:rgba(244,240,233,.25);overflow:hidden}

.loading-line i{display:block;width:0;height:100%;background:#f4f0e9;animation:loadingFill 1.45s cubic-bezier(.65,0,.35,1) forwards}

.role-tags{display:flex;flex-wrap:wrap;gap:7px;margin:25px 0 22px;max-width:340px}

.role-tags button{border:1px solid #b9b5ab;background:rgba(251,250,247,.45);font:11px "Noto Serif SC",serif;color:#526057;padding:6px 10px;cursor:pointer;transition:.22s}

.role-tags button:hover,.role-tags button:focus{background:#25342f;color:#f4f0e9;border-color:#25342f;transform:translateY(-3px);box-shadow:3px 3px 0 #d9b77e}

.main-photo{border-color:#fffdf8;box-shadow:0 26px 50px rgba(37,52,47,.27)}

.main-photo img{filter:saturate(.9)}

@keyframes loadingFill{to{width:100%}

}

@media(max-width:600px){.role-tags{max-width:100%}

.opening-curtain .welcome-mark{width:46px;height:46px;font-size:20px}

}


/* V10: one portrait, one current-status label, and a subtle full-page light follow. */
body:before{content:"";position:fixed;z-index:-1;left:var(--mouse-x,50%);top:var(--mouse-y,40%);width:520px;height:520px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(215,195,142,.17),rgba(215,195,142,0) 68%);pointer-events:none;transition:left .08s linear,top .08s linear}
.cinematic-intro{grid-template-columns:1fr 1.12fr .62fr}
.photo-browser.single-photo{height:520px;perspective:1200px}
.single-photo .main-photo{width:275px;height:440px;left:50%;top:20px;transform:translateX(-50%) rotate(-2deg);border-width:9px}
.single-photo .main-photo img{height:380px;object-fit:cover;object-position:center top}
.single-photo .main-photo figcaption{font-size:12px;padding:14px 4px}
.single-photo .browse-note{left:5%;bottom:0}
.current-badge{align-self:center;border-left:1px solid #cfc8bb;padding:18px 0 18px 22px}
.current-badge span,.current-badge small{display:block;font:10px/1.6 "Manrope",sans-serif;letter-spacing:.13em;color:#8a4d39}
.current-badge strong{display:block;margin:10px 0 5px;font:600 18px/1.35 "Noto Serif SC",serif;color:#25342f}
.current-badge small{letter-spacing:.05em;color:#65736b}
@media(max-width:900px){.cinematic-intro{grid-template-columns:1fr 1fr}
.current-badge{grid-column:1/-1;border-left:0;border-top:1px solid #cfc8bb;padding:18px 0;display:flex;gap:13px;align-items:center}
.current-badge strong{margin:0}
.current-badge small{margin-left:auto}
}
@media(max-width:600px){body:before{width:360px;height:360px}
.single-photo .main-photo{width:235px;height:385px}
.single-photo .main-photo img{height:325px}
.photo-browser.single-photo{height:440px}
.current-badge{display:block}
.current-badge strong{margin:8px 0 3px}
.current-badge small{margin:0}
}

/* V11 home composition and visible pointer light. */
.cursor-glow{position:fixed;z-index:15;width:420px;height:420px;left:50%;top:40%;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(circle,rgba(227,199,132,.16) 0,rgba(227,199,132,.06) 26%,transparent 68%);mix-blend-mode:multiply;transition:left .09s linear,top .09s linear}.cinematic-intro{width:min(1080px,100%);margin:0 auto;grid-template-columns:minmax(310px,.95fr) minmax(275px,.8fr) minmax(150px,.45fr);gap:2.4vw}.role-tags{display:grid;grid-template-columns:repeat(6,1fr);width:320px;max-width:100%;gap:7px}.role-tags button{grid-column:span 2;white-space:nowrap;padding:6px 7px}.role-tags button:nth-child(4){grid-column:1 / span 2}.role-tags button:nth-child(5){grid-column:span 2}.home-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:28px}.home-actions .start-button{margin-top:0}.secondary-action{background:transparent;color:#25342f;border:1px solid #b9b5ab}.secondary-action:hover{background:#f4f0e9;color:#25342f;border-color:#25342f}.life{margin-top:0}@media(max-width:900px){.cinematic-intro{width:100%;grid-template-columns:1fr 1fr}}@media(max-width:600px){.cursor-glow{width:260px;height:260px}.role-tags{width:300px}.home-actions{margin-top:24px}.home-actions .start-button{font-size:10px;padding:11px 12px}}
.cursor-glow{position:fixed;z-index:15;width:420px;height:420px;left:50%;top:40%;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(circle,rgba(227,199,132,.16) 0,rgba(227,199,132,.06) 26%,transparent 68%);mix-blend-mode:multiply;transition:left .09s linear,top .09s linear}.cinematic-intro{width:min(1080px,100%);margin:0 auto;grid-template-columns:minmax(310px,.95fr) minmax(275px,.8fr) minmax(150px,.45fr);gap:2.4vw}.role-tags{display:grid;grid-template-columns:repeat(6,1fr);width:320px;max-width:100%;gap:7px}.role-tags button{grid-column:span 2;white-space:nowrap;padding:6px 7px}.role-tags button:nth-child(4){grid-column:1 / span 2}.role-tags button:nth-child(5){grid-column:span 2}.home-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:28px}.home-actions .start-button{margin-top:0}.secondary-action{background:transparent;color:#25342f;border:1px solid #b9b5ab}.secondary-action:hover{background:#f4f0e9;color:#25342f;border-color:#25342f}.life{margin-top:0}@media(max-width:900px){.cinematic-intro{width:100%;grid-template-columns:1fr 1fr}}@media(max-width:600px){.cursor-glow{width:260px;height:260px}.role-tags{width:300px}.home-actions{margin-top:24px}.home-actions .start-button{font-size:10px;padding:11px 12px}}

/* V13: a continuous introduction-to-learning transition and an editorial life line. */
.intro-hero{min-height:auto;padding-bottom:0}.cinematic-intro{min-height:620px}.intro-scroll{margin:0;padding-bottom:0}.learning{padding-top:78px}.coordinate-card{border-radius:16px}.coordinate-card img{border-radius:15px 15px 0 0}.journey{position:relative;padding-top:112px;padding-bottom:154px;border-top:1px solid var(--line)}.journey-head{margin-bottom:10px}.journey-intro{margin:0 0 72px;color:#66736c;font-size:16px}.journey-timeline{position:relative;list-style:none;max-width:920px;margin:0 auto;padding:0}.journey-timeline:before{content:"";position:absolute;z-index:0;left:50%;top:8px;bottom:0;width:1px;background:#b8b6ad;transform:scaleY(0);transform-origin:top;transition:transform 1.7s cubic-bezier(.2,.75,.2,1)}.journey-timeline:after{content:"";position:absolute;left:50%;bottom:-78px;width:1px;height:78px;background:linear-gradient(#b8b6ad,transparent);opacity:0;transition:opacity .55s 1.55s}.journey-entry{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;min-height:148px;opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}.journey-entry:before{content:"";position:absolute;left:calc(50% - 5px);top:7px;width:9px;height:9px;border:2px solid #fbfaf7;border-radius:50%;background:#bd6046;box-shadow:0 0 0 1px #9d9a91}.journey-copy{max-width:330px;padding:0 40px}.journey-entry:nth-child(odd) .journey-copy{grid-column:1;text-align:right;justify-self:end}.journey-entry:nth-child(even) .journey-copy{grid-column:2;text-align:left;justify-self:start}.journey-copy time{display:block;margin-bottom:10px;font:600 11px "Manrope",sans-serif;letter-spacing:.16em;color:#8a4d39}.journey-copy h3{margin:0 0 8px;font:600 clamp(23px,2.4vw,34px)/1.1 "Noto Serif SC",serif;letter-spacing:-.05em;color:#25342f}.journey-copy p{margin:0;color:#65736b;font-size:15px;line-height:1.8}.journey-copy strong{font-weight:600;color:#4e5d54}.journey-now{min-height:78px}.journey-now .journey-copy h3{font-style:italic}.journey.is-visible .journey-timeline:before{transform:scaleY(1)}.journey.is-visible .journey-timeline:after{opacity:1}.journey.is-visible .journey-entry{opacity:1;transform:translateY(0)}.journey.is-visible .journey-entry:nth-child(1){transition-delay:.12s}.journey.is-visible .journey-entry:nth-child(2){transition-delay:.35s}.journey.is-visible .journey-entry:nth-child(3){transition-delay:.58s}.journey.is-visible .journey-entry:nth-child(4){transition-delay:.81s}.journey.is-visible .journey-entry:nth-child(5){transition-delay:1.04s}@media(max-width:700px){.learning{padding-top:54px}.cinematic-intro{min-height:auto}.journey{padding-top:82px;padding-bottom:128px}.journey-intro{margin-bottom:46px}.journey-timeline{padding-left:30px}.journey-timeline:before,.journey-timeline:after{left:4px}.journey-entry{display:block;min-height:0;padding:0 0 52px}.journey-entry:before{left:0;top:5px}.journey-copy,.journey-entry:nth-child(odd) .journey-copy,.journey-entry:nth-child(even) .journey-copy{max-width:none;padding:0 0 0 29px;text-align:left;justify-self:auto}.journey-copy h3{font-size:27px}}@media(prefers-reduced-motion:reduce){.journey-timeline:before{transform:scaleY(1)}.journey-timeline:after,.journey-entry{opacity:1;transform:none;transition:none}}

/* V14: a quiet, typographic opening rather than a loading screen. */
body.intro-active{overflow:hidden}body.intro-active .nav{opacity:0;transition:opacity .55s ease 3.4s}.narrative-intro{position:fixed;z-index:40;inset:0;display:block;background:radial-gradient(circle at 68% 26%,rgba(217,200,160,.18),transparent 24%),#f4f0e9;color:#25342f;overflow:hidden;animation:none;pointer-events:auto}.narrative-intro:before{content:"";position:absolute;inset:4vw;border:1px solid rgba(37,52,47,.08);pointer-events:none}.intro-hello{position:absolute;top:50%;left:50%;margin:0;font:600 clamp(18px,2vw,29px)/1 "Manrope",sans-serif;letter-spacing:.14em;opacity:0;transform:translate(-50%,-42%);animation:introHello .95s cubic-bezier(.2,.7,.2,1) .12s forwards}.intro-words{position:absolute;inset:0;font:600 clamp(22px,3.6vw,54px)/1 "Noto Serif SC",serif;letter-spacing:.04em}.intro-words span{position:absolute;opacity:0;filter:blur(8px);animation:introWord 1.7s cubic-bezier(.2,.7,.2,1) forwards,introDrift 3.4s ease-in-out 1.2s infinite alternate}.intro-words span:nth-child(1){top:20%;left:15%;animation-delay:.72s,.72s}.intro-words span:nth-child(2){top:18%;right:18%;animation-delay:.9s,.9s}.intro-words span:nth-child(3){top:45%;left:8%;animation-delay:1.05s,1.05s}.intro-words span:nth-child(4){top:66%;right:14%;animation-delay:1.18s,1.18s}.intro-words span:nth-child(5){bottom:15%;left:25%;animation-delay:1.31s,1.31s}.intro-words span:nth-child(6){top:36%;right:33%;animation-delay:1.44s,1.44s}.intro-words span:nth-child(7){bottom:22%;right:33%;animation-delay:1.57s,1.57s}.intro-identity{position:absolute;z-index:2;top:50%;left:50%;display:grid;justify-items:center;gap:8px;opacity:0;transform:translate(-50%,-45%);animation:introIdentity 1.05s cubic-bezier(.2,.72,.2,1) 2.55s forwards}.intro-identity strong{font:600 clamp(46px,7vw,94px)/.92 "Noto Serif SC",serif;letter-spacing:-.1em}.intro-identity small{font:600 11px "Manrope",sans-serif;letter-spacing:.22em;color:#7a8078}.intro-identity em{margin-top:16px;font:500 16px "Noto Serif SC",serif;font-style:normal;letter-spacing:.06em;opacity:0;animation:introClaim .55s ease 3.22s forwards}.intro-skip{position:absolute;z-index:4;right:5.4vw;bottom:5.3vw;padding:7px 0;border:0;background:transparent;color:#65736b;font:10px "Manrope",sans-serif;letter-spacing:.13em;cursor:pointer}.intro-skip:hover,.intro-skip:focus{color:#8a4d39}.narrative-intro.is-finished{pointer-events:none;animation:introExit .58s ease forwards}.narrative-intro.is-finished .intro-identity{animation:introToBrand .62s cubic-bezier(.5,0,.2,1) forwards}.narrative-intro.is-short{opacity:0;pointer-events:none}.coordinate-card{--tilt-x:0deg;--tilt-y:0deg;transform:perspective(900px) translateY(0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}.coordinate-card img{height:156px;object-fit:contain;background:#eef0ed}.coordinate-card:hover,.coordinate-card.active{transform:perspective(900px) translateY(-4px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));box-shadow:0 18px 32px rgba(37,52,47,.11)}.coordinate-card:hover img,.coordinate-card.active img{transform:scale(1.015)}.coordinate-card h3{margin-top:25px}.coordinate-card{padding-bottom:18px;min-height:0}.coordinate-note{margin-top:12px;padding:13px 18px}.learning{padding-bottom:64px}.journey{padding-top:72px;padding-bottom:106px}.journey-intro{margin-bottom:38px}.journey-entry{min-height:110px}.journey-copy time{margin-bottom:7px}.journey-copy h3{font-size:clamp(21px,2.1vw,30px);margin-bottom:5px}.journey-copy p{font-size:14px;line-height:1.65}.journey-now{min-height:58px}@keyframes introHello{0%{opacity:0;filter:blur(6px);transform:translate(-50%,-34%)}35%,60%{opacity:1;filter:blur(0);transform:translate(-50%,-50%)}100%{opacity:0;filter:blur(6px);transform:translate(-50%,-66%)}}@keyframes introWord{0%{opacity:0;filter:blur(9px);transform:translate3d(0,12px,0)}20%,62%{opacity:.8;filter:blur(0);transform:translate3d(0,0,0)}100%{opacity:0;filter:blur(5px);transform:translate3d(0,-8px,0)}}@keyframes introDrift{to{translate:4px -5px}}@keyframes introIdentity{from{opacity:0;filter:blur(7px)}to{opacity:1;filter:blur(0);transform:translate(-50%,-50%)}}@keyframes introClaim{to{opacity:1}}@keyframes introToBrand{to{top:36px;left:4vw;opacity:0;transform:translate(0,0) scale(.25);filter:blur(2px)}}@keyframes introExit{to{opacity:0;visibility:hidden}}@media(max-width:700px){.narrative-intro:before{inset:5vw}.intro-words{font-size:clamp(20px,7vw,34px)}.intro-words span:nth-child(1){left:11%}.intro-words span:nth-child(2){right:12%}.intro-words span:nth-child(3){left:9%}.intro-words span:nth-child(4){right:9%}.intro-words span:nth-child(5){left:17%}.intro-words span:nth-child(6){right:20%}.intro-words span:nth-child(7){right:18%}.intro-identity em{font-size:14px}.intro-skip{right:7vw;bottom:7vw}.coordinate-card img{height:138px}.learning{padding-bottom:50px}.journey{padding-top:58px;padding-bottom:94px}.journey-entry{min-height:0;padding-bottom:38px}.journey-intro{margin-bottom:31px}}@media(prefers-reduced-motion:reduce){.intro-hello,.intro-words span,.intro-identity,.intro-identity em{animation:none;opacity:0}.narrative-intro{display:none}body.intro-active .nav{opacity:1}}

/* V15: fuller campus imagery, stronger opening words, and a scan-only internship line. */
.coordinate-card img{height:168px;object-fit:cover;object-position:center 64%;background:transparent}.intro-words{font-size:clamp(32px,5.8vw,82px)}.cinematic-intro{grid-template-columns:minmax(300px,.92fr) minmax(270px,.78fr) minmax(220px,.72fr)}.current-badge{align-self:start;margin-top:72px}.home-experience{position:relative;margin-top:34px;padding-top:17px;border-top:1px solid #cfc8bb}.home-experience:before{content:"";position:absolute;left:3px;top:48px;bottom:16px;width:1px;background:#c7c3ba;transform:scaleY(0);transform-origin:top;transition:transform 1.25s cubic-bezier(.2,.75,.2,1)}.home-experience p{margin:0 0 18px;font:600 10px "Manrope",sans-serif;letter-spacing:.12em;color:#8a4d39;white-space:nowrap}.home-experience ol{position:relative;z-index:1;list-style:none;margin:0;padding:0}.home-experience li{position:relative;padding:0 0 16px 17px;opacity:0;transform:translateY(9px);transition:opacity .45s ease,transform .45s ease}.home-experience li:before{content:"";position:absolute;left:0;top:5px;width:7px;height:7px;border:1px solid #9d9a91;border-radius:50%;background:#fbfaf7}.home-experience time,.home-experience strong,.home-experience small{display:block}.home-experience time{margin-bottom:4px;font:9px "Manrope",sans-serif;letter-spacing:.08em;color:#8a4d39}.home-experience strong{font:600 14px/1.3 "Noto Serif SC",serif;color:#25342f}.home-experience small{margin-top:2px;font:10px/1.45 "Noto Serif SC",serif;letter-spacing:0;color:#65736b}.intro-ready .home-experience:before{transform:scaleY(1)}.intro-ready .home-experience li{opacity:1;transform:translateY(0)}.intro-ready .home-experience li:nth-child(1){transition-delay:.08s}.intro-ready .home-experience li:nth-child(2){transition-delay:.23s}.intro-ready .home-experience li:nth-child(3){transition-delay:.38s}.intro-ready .home-experience li:nth-child(4){transition-delay:.53s}@media(max-width:900px){.cinematic-intro{grid-template-columns:1fr 1fr}.current-badge{margin-top:0}.home-experience{margin-top:22px}.home-experience ol{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.home-experience:before{display:none}.home-experience li{border-left:1px solid #c7c3ba;padding-left:13px}}@media(max-width:700px){.intro-words{font-size:clamp(27px,9vw,47px)}.coordinate-card img{height:152px}.home-experience ol{display:block}.home-experience li{border-left:0;padding-left:17px}.home-experience:before{display:block}}
.current-badge{display:block}@media(max-width:900px){.current-badge{display:block;margin-top:0}}

/* V16: give the portrait its own study note and the right column to experience. */
.coordinate-card img{height:190px;object-fit:cover;background:none}.coordinate-card[data-coordinate="zjcm"] img{object-position:center 78%}.coordinate-card[data-coordinate="anu"] img{object-position:left 78%}.intro-words{font-size:clamp(40px,7.2vw,108px);font-weight:600}.photo-browser.single-photo{height:570px}.photo-browser .current-badge{position:absolute;z-index:5;left:50%;top:470px;width:275px;margin:0;padding:12px 0 0;transform:translateX(-50%);border:0;border-top:1px solid #cfc8bb;text-align:center;box-sizing:border-box}.photo-browser .current-badge span{font-size:9px}.photo-browser .current-badge strong{margin:5px 0 2px;font-size:16px}.photo-browser .current-badge small{font-size:9px;margin:0}.cinematic-intro{grid-template-columns:minmax(300px,.9fr) minmax(280px,.86fr) minmax(255px,.84fr);align-items:start}.cinematic-intro>.home-experience{align-self:start;margin-top:104px;padding-top:20px}.home-experience p{margin-bottom:24px;font-size:12px;letter-spacing:.14em}.home-experience:before{left:4px;top:57px;bottom:20px}.home-experience li{padding:0 0 21px 20px}.home-experience li:before{top:6px;width:8px;height:8px}.home-experience time{margin-bottom:5px;font-size:10px}.home-experience strong{font-size:17px;line-height:1.32}.home-experience small{font-size:12px}.home-experience li:last-child{padding-bottom:0}@media(max-width:900px){.photo-browser.single-photo{height:570px}.photo-browser .current-badge{top:470px}.cinematic-intro>.home-experience{grid-column:1/-1;margin-top:0}.home-experience p{font-size:11px}.home-experience strong{font-size:16px}}@media(max-width:700px){.intro-words{font-size:clamp(33px,11vw,58px)}.coordinate-card img{height:178px}.photo-browser.single-photo{height:505px}.photo-browser .current-badge{top:411px;width:235px}.cinematic-intro>.home-experience{margin-top:18px}.home-experience strong{font-size:16px}.home-experience small{font-size:11px}}

/* V17: softer portrait card, quiet study tag, and a more present experience column. */
.coordinate-note{display:inline-flex;align-items:center;max-width:min(100%,680px);margin-top:16px;padding:10px 16px;border:1px solid rgba(138,77,57,.32);border-radius:999px;background:rgba(251,250,247,.42);box-shadow:none;color:#65736b;font:13px/1.6 "Noto Serif SC",serif}.coordinate-note:before{content:"现在";margin-right:9px;padding-right:9px;border-right:1px solid rgba(138,77,57,.28);font:600 9px "Manrope",sans-serif;letter-spacing:.13em;color:#8a4d39}.single-photo .main-photo{border:0;border-radius:28px;overflow:hidden;box-shadow:0 25px 48px rgba(37,52,47,.2)}.single-photo .main-photo img{height:100%;border-radius:28px;object-fit:cover}.single-photo .main-photo:after{border-radius:28px}.photo-browser .current-badge{display:flex;align-items:center;justify-content:center;gap:6px;top:476px;width:auto;min-width:224px;padding:8px 11px;border:1px solid rgba(37,52,47,.18);border-radius:10px;background:rgba(251,250,247,.76);backdrop-filter:blur(10px);white-space:nowrap}.photo-browser .current-badge span{font-size:8px;color:#8a4d39}.photo-browser .current-badge strong{margin:0;font-size:12px}.photo-browser .current-badge small{font-size:8px}.cinematic-intro{grid-template-columns:minmax(290px,.82fr) minmax(280px,.8fr) minmax(290px,.98fr);gap:2vw}.cinematic-intro>.home-experience{min-height:425px;margin-top:71px;padding-top:23px}.home-experience p{margin-bottom:29px;font-size:13px}.home-experience:before{top:64px;bottom:18px}.home-experience li{padding:0 0 31px 22px}.home-experience li:before{width:9px;height:9px}.home-experience strong{font-size:18px}.home-experience small{font-size:12px}@media(max-width:900px){.photo-browser .current-badge{top:476px}.cinematic-intro>.home-experience{min-height:0;margin-top:0}.coordinate-note{max-width:100%;border-radius:16px}}@media(max-width:700px){.photo-browser .current-badge{top:415px;min-width:0;width:235px;padding:7px 8px;gap:4px}.photo-browser .current-badge strong{font-size:10px}.photo-browser .current-badge small{font-size:7px}.coordinate-note{display:flex;padding:9px 13px;font-size:12px}.cinematic-intro>.home-experience{margin-top:18px}.home-experience li{padding-bottom:25px}}
.coordinate-note:before{content:attr(data-label)}

/* V18: make the opening words impossible to miss; give the study tag equal weight. */
.intro-words{font-size:clamp(58px,10.5vw,164px);letter-spacing:.02em}.intro-words span{color:#25342f;text-shadow:0 1px 0 rgba(255,255,255,.45)}.photo-browser .current-badge{display:grid;grid-template-columns:auto 1fr;justify-content:start;column-gap:8px;row-gap:2px;padding:9px 12px;text-align:left}.photo-browser .current-badge span{grid-row:1 / 3;align-self:center}.photo-browser .current-badge strong,.photo-browser .current-badge small{font:600 12px/1.3 "Noto Serif SC",serif;letter-spacing:0;color:#25342f}.photo-browser .current-badge small{opacity:.76}@media(max-width:700px){.intro-words{font-size:clamp(42px,14vw,78px)}.photo-browser .current-badge strong,.photo-browser .current-badge small{font-size:10px}}

/* V19: one composed learning-and-journey scene, then a capability hierarchy. */
.learning-journey{padding-top:84px;padding-bottom:88px}.learning-journey-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:start}.panel-kicker{margin:0 0 8px;font:600 10px "Manrope",sans-serif;letter-spacing:.15em;color:#8a4d39}.education-column>h3,.journey>h3{margin:0;font:600 clamp(28px,3vw,43px)/1.1 "Noto Serif SC",serif;letter-spacing:-.06em;color:#25342f}.education-column .learning-intro{margin:12px 0 22px;font-size:14px}.learning-journey .coordinate-cards{display:grid;grid-template-columns:1fr;gap:14px}.learning-journey .coordinate-card{display:grid;grid-template-columns:180px 1fr;grid-template-rows:auto auto auto;column-gap:18px;min-height:0;padding:0 18px 0 0;border-radius:16px;overflow:hidden;background:#fbfaf7}.learning-journey .coordinate-card img{grid-row:1/4;width:100%;height:154px;margin:0;object-fit:cover;border-radius:0;filter:saturate(.82)}.learning-journey .coordinate-card[data-coordinate="zjcm"] img{object-position:center 73%}.learning-journey .coordinate-card[data-coordinate="anu"] img{object-position:left 78%}.learning-journey .coordinate-card span{align-self:end;margin-top:22px;padding:0;font-size:9px}.learning-journey .coordinate-card h4{margin:5px 0 3px;font:600 21px/1.2 "Noto Serif SC",serif;color:#25342f}.learning-journey .coordinate-card p{margin:0;font-size:12px;color:#65736b}.learning-journey .coordinate-card b{align-self:start;margin:7px 0 0;font-size:10px;color:#8a4d39}.learning-journey .coordinate-note{max-width:100%;margin-top:12px}.learning-journey .journey{position:relative;padding:0 0 0 34px;border-left:1px solid #c7c3ba}.learning-journey .journey:before{content:"";position:absolute;left:-4px;top:5px;width:7px;height:7px;border-radius:50%;background:#bd6046}.learning-journey .journey-intro{margin:11px 0 24px;font-size:14px}.learning-journey .journey-timeline{max-width:none;margin:0}.learning-journey .journey-timeline:before{left:0;top:5px;bottom:2px}.learning-journey .journey-timeline:after{left:0;bottom:-38px;height:38px}.learning-journey .journey-entry{display:block;min-height:0;padding:0 0 19px;opacity:0;transform:translateY(14px)}.learning-journey .journey-entry:before{left:-5px;top:4px;width:8px;height:8px}.learning-journey .journey-copy,.learning-journey .journey-entry:nth-child(odd) .journey-copy,.learning-journey .journey-entry:nth-child(even) .journey-copy{display:block;max-width:none;padding:0;text-align:left}.learning-journey .journey-copy time{margin-bottom:3px;font-size:9px}.learning-journey .journey-copy h4{margin:0 0 3px;font:600 18px/1.25 "Noto Serif SC",serif;color:#25342f}.learning-journey .journey-copy p{font-size:12px;line-height:1.55}.learning-journey .journey-now{padding-bottom:0}.capabilities{border-top:1px solid var(--line);background:linear-gradient(112deg,rgba(245,240,231,.58),transparent 44%)}.capabilities-intro{margin:14px 0 42px;color:#65736b;font-size:16px}.capability-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;transition:opacity .35s}.capability{position:relative;min-height:230px;padding:25px;border:1px solid #cfc8bb;background:rgba(251,250,247,.7);transition:transform .35s ease,opacity .35s ease,background .35s ease;overflow:hidden}.capability-core{grid-column:1/-1;min-height:278px;padding:34px;background:#25342f;color:#f4f0e9}.capability-ai{grid-column:1/-1;min-height:180px;background:linear-gradient(110deg,rgba(231,222,201,.62),rgba(245,241,232,.45),rgba(220,231,222,.6));background-size:180% 100%;animation:aiSurface 9s ease-in-out infinite alternate}.capability>span{display:block;font:600 10px "Manrope",sans-serif;letter-spacing:.14em;color:#8a4d39}.capability-core>span{color:#d9cdbb}.capability h3{margin:24px 0;font:600 clamp(27px,3vw,42px)/1 "Noto Serif SC",serif;letter-spacing:-.06em}.capability-core h3{font-size:clamp(40px,5vw,72px)}.pill-list{display:flex;flex-wrap:wrap;gap:8px;margin:0}.pill-list i,.certifications i{padding:6px 10px;border:1px solid rgba(37,52,47,.24);border-radius:999px;font:13px "Noto Serif SC",serif;font-style:normal;color:#435149}.capability-core .pill-list i{border-color:rgba(244,240,233,.42);color:#f4f0e9}.capability-ai small{display:block;margin-top:20px;color:#65736b;font:13px "Noto Serif SC",serif}.capability-grid:hover .capability{opacity:.5}.capability-grid:hover .capability:hover{opacity:1;transform:scale(1.015);background-color:rgba(255,253,248,.94)}.capability-core:hover{background-color:#25342f!important}.certifications{display:flex;align-items:center;gap:28px;margin-top:22px;padding-top:18px;border-top:1px solid #cfc8bb}.certifications>span{flex:none;font:600 10px "Manrope",sans-serif;letter-spacing:.14em;color:#8a4d39}.certifications p{display:flex;flex-wrap:wrap;gap:8px;margin:0}.certifications i{padding:4px 8px;font-size:11px;color:#65736b;border-color:#d6d1c6}.capabilities .section-head,.capabilities-intro,.capability,.certifications{opacity:0;filter:blur(6px);transform:translateY(18px);transition:opacity .65s ease,filter .65s ease,transform .65s ease}.capabilities.is-visible .section-head,.capabilities.is-visible .capabilities-intro,.capabilities.is-visible .capability,.capabilities.is-visible .certifications{opacity:1;filter:none;transform:none}.capabilities.is-visible .capabilities-intro{transition-delay:.12s}.capabilities.is-visible .capability-core{transition-delay:.25s}.capabilities.is-visible .capability:nth-child(2){transition-delay:.42s}.capabilities.is-visible .capability:nth-child(3){transition-delay:.52s}.capabilities.is-visible .capability-ai{transition-delay:.65s}.capabilities.is-visible .certifications{transition-delay:.78s}.capability .pill-list i{opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}.capabilities.is-visible .capability .pill-list i{opacity:1;transform:none}.capabilities.is-visible .capability .pill-list i:nth-child(2){transition-delay:.08s}.capabilities.is-visible .capability .pill-list i:nth-child(3){transition-delay:.16s}.capabilities.is-visible .capability .pill-list i:nth-child(4){transition-delay:.24s}.capabilities.is-visible .capability .pill-list i:nth-child(5){transition-delay:.32s}.capabilities.is-visible .capability .pill-list i:nth-child(6){transition-delay:.4s}@keyframes aiSurface{to{background-position:100% 0}}@media(max-width:760px){.learning-journey-layout{grid-template-columns:1fr;gap:52px}.learning-journey .journey{padding-left:29px}.learning-journey .coordinate-card{grid-template-columns:145px 1fr}.learning-journey .coordinate-card img{height:142px}.capability-grid{grid-template-columns:1fr}.capability,.capability-core,.capability-ai{grid-column:auto;min-height:0}.capability-core{padding:28px}.capability-core h3{font-size:42px}.certifications{display:block}.certifications p{margin-top:13px}}@media(prefers-reduced-motion:reduce){.capability-ai{animation:none}.capabilities .section-head,.capabilities-intro,.capability,.certifications,.capability .pill-list i{opacity:1;filter:none;transform:none;transition:none}}

/* V20: a single editorial hierarchy for learning and journey. */
.learning-journey{padding-top:72px;padding-bottom:96px}.learning-journey>.section-head{margin-bottom:42px}.learning-journey>.section-head h2{font-size:clamp(42px,5.4vw,76px);line-height:.95}.learning-journey-layout{grid-template-columns:minmax(250px,35fr) minmax(0,65fr);gap:clamp(44px,6vw,92px)}.education-column{padding-top:3px}.education-column .panel-kicker,.journey .panel-kicker{margin-bottom:23px;font-size:10px}.education-item{display:grid;grid-template-columns:74px 1fr;gap:16px;padding:0 0 27px;margin-bottom:26px;border-bottom:1px solid #cfc8bb}.education-item:last-child{margin-bottom:0}.education-item img{width:74px;height:96px;object-fit:cover;filter:saturate(.7) contrast(.96)}.education-item:first-of-type img{object-position:left 78%}.education-item:last-of-type img{object-position:center 75%}.education-item h3{margin:0 0 8px;font:600 17px/1.28 "Noto Serif SC",serif;color:#25342f}.education-item time{display:block;margin-bottom:6px;font:600 10px "Manrope",sans-serif;letter-spacing:.1em;color:#8a4d39}.education-item p{margin:0;color:#65736b;font-size:12px;line-height:1.55}.education-item b{display:block;margin-top:6px;font:600 10px "Manrope",sans-serif;letter-spacing:.08em;color:#4e5d54}.learning-journey .journey{padding-left:31px;border-left:1px solid #c7c3ba}.learning-journey .journey:before{left:-3px;width:5px;height:5px}.journey-lead{margin:0 0 38px;color:#65736b;font-size:15px}.learning-journey .journey-timeline:before{left:-31px;top:6px;bottom:0}.learning-journey .journey-timeline:after{left:-31px;bottom:-46px;height:46px}.learning-journey .journey-entry{padding-bottom:31px}.learning-journey .journey-entry:before{left:-35px;top:5px;width:6px;height:6px;border-width:1px}.learning-journey .journey-copy time{margin-bottom:6px;font-size:10px}.learning-journey .journey-copy h4{margin-bottom:5px;font-size:20px}.learning-journey .journey-copy p{font-size:13px;color:#7a8078}.learning-journey .journey-now{padding-bottom:0}.learning-journey .journey-now .journey-copy h4{font-style:italic}@media(max-width:760px){.learning-journey>.section-head{margin-bottom:34px}.learning-journey-layout{grid-template-columns:1fr;gap:54px}.education-item{grid-template-columns:84px 1fr}.education-item img{width:84px;height:95px}.learning-journey .journey{padding-left:29px}.learning-journey .journey-timeline:before,.learning-journey .journey-timeline:after{left:-29px}.learning-journey .journey-entry:before{left:-33px}}