:root{--bg:#f6f4ee;--ink:#27343b;--muted:#647177;--accent:#a7663e;--line:#d5dcd9;--green-light:#e9eeeb;--teal:#6d9c9d;--surface:#fcfcf8}
html{scroll-padding-top:106px}
body{background:var(--bg)}
.container{max-width:1240px}
a,button{touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:2px solid #477f85;outline-offset:5px}
.site-header{height:88px;background:#f6f4eeed;border-bottom-color:#cbd3d0;backdrop-filter:blur(18px);isolation:isolate}
.site-header:after{content:"";position:absolute;bottom:-1px;left:24%;width:30px;height:1px;background:#708184;transform:rotate(-30deg);transform-origin:left center}
.brand{font-size:18px;font-weight:500;letter-spacing:.03em;gap:13px}
.brand-mark{width:41px;height:41px;background:transparent;border-radius:0;padding:0;color:#587276;letter-spacing:0;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.brand-mark svg{display:block;width:100%;height:100%}
.brand:hover .brand-mark{transform:rotate(90deg)}
.brand-sub{font-size:8px;letter-spacing:1.75px;margin-top:6px;color:#6d777a}
.desktop-nav{font-size:12px;gap:34px}
.desktop-nav>a{position:relative;padding-block:14px;color:#556369;transition:color .2s}
.desktop-nav>a:after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:#8aa9a8;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.desktop-nav>a:hover,.desktop-nav>a[aria-current="location"]{color:var(--ink)}
.desktop-nav>a:hover:after,.desktop-nav>a[aria-current="location"]:after{transform:scaleX(1)}
.desktop-nav .nav-contact{padding:10px 17px;border-color:#abb9b6;border-radius:3px 13px 3px 13px;color:var(--ink);gap:24px;transition:background .2s,border-color .2s}
.nav-contact:after{display:none}.nav-contact:hover{background:#e9eeea;border-color:#718e90}
.scroll-progress{position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:linear-gradient(90deg,#a76942,#86b7b6);transform:scaleX(var(--page-progress,0));transform-origin:left;pointer-events:none}
.hero{display:block;position:relative;isolation:isolate;overflow:hidden;padding:0;background:#f6f4ee}
.hero-backdrop{position:absolute;inset:-20px;z-index:-2;overflow:hidden;pointer-events:none}
.hero-scene{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:blur(6px) saturate(.55);opacity:.43;transform:translate3d(var(--scene-x,0px),var(--scene-y,0px),0) scale(1.045);will-change:transform}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#f6f4ee 3%,#f6f4eef0 27%,#f6f4ee80 56%,#f6f4ee20 100%),linear-gradient(0deg,#f6f4ee 0%,#f6f4ee00 27%,#f6f4ee00 85%,#f6f4ee70 100%)}
.hero-inner{min-height:min(820px,calc(100svh - 88px));display:grid;grid-template-rows:1fr auto;position:relative}
.hero-copy{align-self:center;padding:90px 0 70px;max-width:720px}
.eyebrow{font-size:10px;letter-spacing:1.6px;gap:12px;color:#5f7478}
.scan-mark{font-size:21px;line-height:1;color:#72a6a7;display:inline-block}
.hero h1{font-size:clamp(48px,5.5vw,78px);font-weight:500;line-height:1.22;letter-spacing:-.045em;white-space:normal;margin:29px 0 24px;color:#27343b}
.hero-description{font-size:15px;line-height:2;color:#596a71;max-width:560px;margin-bottom:0}
.hero-topics{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;color:#6e7f81;font-size:10px;letter-spacing:1px}
.hero-topics>span{display:flex;align-items:center;gap:9px}
.hero-topics>span:before{content:"";width:3px;height:3px;background:#a37c5c;transform:rotate(45deg)}
.hero-bottom{grid-column:auto;display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;padding:23px 0;margin:0;border-top:1px solid #cbd6d180;border-bottom:0;font-size:10px;letter-spacing:.8px;color:#728085}
.hero-bottom a{gap:20px;color:#526d72;min-height:25px}
.scroll-arrow{display:inline-flex;justify-content:center;align-items:center;width:26px;height:32px;border:1px solid #b2c3c0;border-radius:12px;font-size:15px!important;animation:explore-arrow 2.8s ease-in-out infinite}
.hero-orbit{position:absolute;right:8%;top:21%;width:170px;height:240px;pointer-events:none;opacity:.22}
.hero-orbit>span{position:absolute;width:22px;height:22px;border-color:#80a2a2;border-style:solid}
.hero-orbit>span:first-child{left:0;top:0;border-width:1px 0 0 1px}.hero-orbit>span:last-child{right:0;bottom:0;border-width:0 1px 1px 0}
.section-space{padding-block:88px}
.section-heading{padding-bottom:29px;border-bottom:1px solid var(--line);position:relative}
.section-heading:after{content:"";position:absolute;left:0;bottom:-1px;width:52px;height:2px;background:#8aa4a1}
.section-kicker{color:#76878c;font-size:9px;letter-spacing:2px;margin-bottom:14px}
h2{font-weight:500;font-size:clamp(28px,3vw,39px);letter-spacing:-.03em}
.section-description{font-size:12px;color:#728087}
.experience-section{background:#eef0eb;margin-top:0;position:relative;border-block:1px solid #dde3dd}
.experience-subheading{margin-top:35px;margin-bottom:19px}
.experience-subheading h3{font-size:15px;color:#425961;display:flex;align-items:center;gap:10px}
.experience-subheading h3:before{content:"";width:6px;height:6px;border:1px solid #88a7a4;transform:rotate(45deg)}
.experience-subheading>span{font-size:8px;color:#86948f}
.visual-experience{position:relative;background:#fafbf7;border:1px solid #d5ded8;border-radius:3px 18px 3px 18px;box-shadow:0 5px 18px #34494104;transition:border-color .3s,box-shadow .3s,transform .3s}
.visual-experience:before{content:"";position:absolute;right:17px;top:12px;width:19px;height:3px;background:linear-gradient(90deg,#8eb1ac 0 50%,transparent 50% 65%,#b4c5bc 65%);transform:skewX(-40deg);opacity:.7;transition:width .3s}
.visual-experience:hover{border-color:#9db5ad;box-shadow:0 11px 28px #3449410a;transform:translateY(-2px)}
.visual-experience:hover:before{width:32px}
.career-meta h4{color:#32464f;font-size:21px}
.career-meta .timeline-role{color:#6a7d7d}.career-meta .timeline-date{color:#7d898c;font-size:10px;letter-spacing:.7px}
.current-role{color:#638f8c;border:1px solid #c4d7cd;background:#edf3ec;border-radius:3px;padding:2px 7px}
.career-tags>span{border-color:#d3dfd7;background:#f3f5ee;color:#6e817a;border-radius:3px;font-size:9px}
.media-open{border-color:#d8dfda;border-radius:3px 9px 3px 9px;transition:box-shadow .3s,border-color .3s}
.media-open:hover{border-color:#95aaa6;box-shadow:0 6px 15px #354b5010}
.media-zoom{background:#f6faf7eb;color:#507579;border-radius:4px;width:25px;height:25px;transition:background .2s,transform .2s}
.media-open:hover .media-zoom{background:#e2eeea;transform:translate(1px,-1px)}
.experience-media figcaption{color:#788887}.visual-group h5{color:#4c656b}.visual-group h5>span{color:#85918f}
.education-row{background:#fafbf7;border-color:#d5ded8;border-radius:3px 12px 3px 12px}
.education-details h4{color:#435b64}.education-details>p{color:#71817e}
.work-section{position:relative}
.app-feature{background:linear-gradient(120deg,#f8f4e9,#efeee5);border-color:#d9d8cd;border-radius:3px 24px 3px 24px;box-shadow:0 8px 28px #61533105}
.app-kicker{color:#a17c58;font-size:9px}
.app-heading h3,.app-tagline{color:#34464d}.app-description{color:#78817b}
.app-features li{color:#8f795e;border-color:#d9ceba;border-radius:3px;background:#faf7f0}
.button-dark{position:relative;background:#a6663c;color:#fff;border:1px solid #a6663c;border-radius:3px 13px 3px 13px;overflow:hidden;transition:background .2s,box-shadow .2s,transform .2s}
.button-dark:before{content:"";position:absolute;top:0;bottom:0;left:-55%;width:45%;background:linear-gradient(90deg,transparent,#ffffff35,transparent);transform:skewX(-20deg);transition:left .6s;pointer-events:none}
.button-dark:hover{background:#90542e;box-shadow:0 5px 17px #a6663c20;transform:translateY(-2px)}
.button-dark:hover:before{left:120%}.button-dark:active{transform:translateY(0)}
.app-store-link{font-size:12px;gap:24px}
.contact-section{border-top:1px solid var(--line);padding-top:66px;padding-bottom:77px}
.contact-asterisk{font:40px/1 Georgia,serif;color:#8caaa5;transform:rotate(45deg)}
.wechat-copy .wechat-lead{font-size:23px;color:#405a63}.wechat-copy>p{color:#78878a}.wechat-label{color:#638c84}
.wechat-qr-card{padding:14px 14px 18px;border-color:#cbd8d0;border-radius:3px 18px 3px 18px;box-shadow:8px 8px 0 #e7ede6;transition:transform .3s,box-shadow .3s}
.wechat-qr-card:hover{transform:translate(-2px,-2px);box-shadow:11px 11px 0 #dfe8e1}
.wechat-qr-open{border:0;border-radius:0;box-shadow:none!important}.wechat-qr-card>p{color:#71867d}
.site-footer{border-color:#d6ded7;color:#82918e;font-size:9px;letter-spacing:.3px}
.site-footer a{color:#5f7e80}
.image-viewer{background:#f7f8f2;border-color:#9fb7af;border-radius:3px 17px 3px 17px}
.image-viewer::backdrop{background:#172c2ec7;backdrop-filter:blur(9px)}
.image-viewer[open]{animation:viewer-enter .22s ease-out}
.image-viewer-header{border-color:#d1ddd4}.image-viewer-header h2{color:#3c5960}
.image-viewer-close{background:#e4ece5;color:#4b6f73;transition:transform .25s}.image-viewer-close:hover{transform:rotate(90deg)}
.image-viewer-stage{background:#eaf0e9}.image-viewer-footer{border-color:#d1ddd4;color:#5d8587}
.reveal-ready .reveal-item{transition:opacity .65s ease,translate .65s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s,transform .3s}
.reveal-ready .reveal-item:not(.in-view){opacity:0;translate:0 22px}
@keyframes explore-arrow{0%,100%{translate:0 0}50%{translate:0 4px}}
@keyframes viewer-enter{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(min-width:1450px){.hero-copy{padding-block:110px 100px}.hero h1{font-size:82px}}
@media(max-width:1100px){.hero h1{font-size:66px}.hero-copy{max-width:650px;padding-block:82px 64px}.hero-description{font-size:14px}.hero-inner{min-height:calc(100svh - 88px)}.hero-orbit{right:6%;top:26%;width:130px;height:210px}.desktop-nav{gap:23px}.section-space{padding-block:70px}.visual-experience{border-radius:3px 15px 3px 15px}}
@media(max-width:900px) and (min-width:761px){.hero h1{font-size:58px}.hero-copy{max-width:590px}.desktop-nav{gap:21px}.hero-scene{object-position:59% center;opacity:.34}}
@media(max-width:760px){
  html{scroll-padding-top:90px}.site-header{height:74px}.brand{font-size:15px;gap:10px}.brand-mark{width:34px;height:34px}.brand-sub{font-size:7px;letter-spacing:1.35px}
  .menu-toggle{background:transparent;color:#526e74}.menu-toggle span{background:#526e74}.mobile-nav{background:#f4f5eeed;backdrop-filter:blur(20px);border-color:#cbd8cf}.mobile-nav a{color:#405b65}.mobile-nav a[aria-current="location"]{color:#a7663e}.mobile-nav a>span{color:#94a7a1}
  .hero-inner{min-height:min(760px,calc(100svh - 74px));grid-template-rows:1fr auto}.hero-copy{max-width:100%;padding-block:65px 74px}
  .hero h1{font-size:clamp(40px,9vw,57px);line-height:1.25;letter-spacing:-.05em;margin:25px 0 22px}.hero-description{font-size:13px;line-height:2;max-width:345px}
  .eyebrow{font-size:8px;gap:8px;letter-spacing:1.1px}.scan-mark{font-size:17px}.hero-topics{font-size:9px;gap:15px;margin-top:24px}
  .hero-scene{object-position:66% center;opacity:.31;filter:blur(7px) saturate(.4)}
  .hero:before{background:linear-gradient(90deg,#f6f4eef2 0%,#f6f4eec0 35%,#f6f4ee45 100%),linear-gradient(0deg,#f6f4ee 0%,#f6f4ee00 35%,#f6f4ee30 100%)}
  .hero-orbit{width:90px;height:160px;right:7%;top:35%;opacity:.12}.hero-bottom{padding-block:19px;font-size:8px;letter-spacing:.2px;gap:12px}.hero-bottom a{gap:11px;font-size:10px}.scroll-arrow{width:23px;height:29px}
  .section-space{padding-block:56px}.section-heading{padding-bottom:23px;gap:18px}.section-kicker{font-size:8px;letter-spacing:1.5px;margin-bottom:12px}.section-description{font-size:10px}.section-heading h2{font-size:28px}
  .experience-subheading{margin-top:28px;margin-bottom:17px}.experience-subheading h3{font-size:14px}.visual-experience{padding:24px 20px;gap:24px}.career-meta h4{font-size:20px}.career-meta .timeline-date{font-size:9px}.career-meta .timeline-role{font-size:12px}.visual-experience:before{top:10px;right:12px}
  .experience-media figcaption{font-size:9px}.app-feature{padding:29px 23px 27px;border-radius:3px 19px 3px 19px}.app-heading h3{font-size:23px}.app-tagline{font-size:27px}.app-store-link{font-size:11px}
  .contact-section{padding-top:42px;padding-bottom:53px}.contact-top{margin-bottom:16px}.contact-asterisk{font-size:29px}.wechat-copy .wechat-lead{font-size:20px}.wechat-qr-card{padding:12px 12px 15px;box-shadow:6px 6px 0 #e7ede6}
  .image-viewer{max-height:92dvh}.image-viewer-header{padding:13px 16px}.image-viewer-header h2{font-size:12px}.image-viewer-footer{font-size:10px}
}
@media(min-width:520px) and (max-width:760px){.hero{display:block}.hero-inner{min-height:650px}.hero-copy{max-width:480px}.hero h1{font-size:57px}.hero-description{font-size:13px}.hero-scene{object-position:64% center;opacity:.4}}
@media(max-width:360px){.hero h1{font-size:38px}.hero-description{font-size:12px}.hero-copy{padding-block:59px 64px}.hero-bottom>span{max-width:125px;line-height:1.7}.section-heading h2{font-size:25px}.brand-sub{font-size:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-scene{transform:none;will-change:auto}.reveal-ready .reveal-item:not(.in-view){opacity:1;translate:none}*,*::before,*::after{animation:none!important;transition:none!important}}