:root{--paper:#f2efe8;--ink:#171816;--muted:#6f716b;--line:rgba(23,24,22,.18);--accent:#a64b32;--white:#fff;--serif:"Instrument Serif",Georgia,serif;--sans:"DM Sans","Noto Sans SC",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;overflow-x:hidden}img,video{display:block;width:100%}a{color:inherit;text-decoration:none}button{font:inherit}[data-lang="zh"]{display:none}[data-lang].language-visible{display:revert}.section-pad{padding-left:clamp(24px,5vw,78px);padding-right:clamp(24px,5vw,78px)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{height:88px;padding:0 clamp(24px,5vw,78px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:20}.wordmark{font-weight:600;letter-spacing:.08em}.wordmark span{color:var(--accent)}.nav-links{display:flex;gap:clamp(18px,3vw,48px);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.nav-links a{position:relative}.nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--accent);transition:right .3s}.nav-links a:hover:after,.nav-links a:focus-visible:after{right:0}.language-toggle{display:flex;align-items:center;gap:8px;border:0;background:transparent;cursor:pointer;padding:8px;color:var(--muted);font-size:.75rem}.language-toggle i{width:18px;height:1px;background:var(--line)}.language-toggle .lang-active{color:var(--ink);font-weight:600}
.hero{min-height:calc(100vh - 88px);display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.65fr);gap:clamp(50px,8vw,140px);align-items:center;padding-top:clamp(50px,7vw,110px);padding-bottom:clamp(60px,8vw,120px)}.eyebrow,.section-index{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}.eyebrow:before{content:"";display:inline-block;width:34px;height:1px;background:var(--accent);margin:0 14px 4px 0}.hero h1{font:400 clamp(6rem,14vw,13.5rem)/.68 var(--serif);letter-spacing:-.055em;margin:.22em 0 .32em}.hero h1 em{font-weight:400;color:var(--accent)}.hero-statement{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(240px,1fr);gap:clamp(26px,5vw,70px);align-items:start}.display-copy{font:400 clamp(1.7rem,3vw,3.1rem)/1.04 var(--serif);margin:0}.hero-note{color:var(--muted);margin:4px 0 28px;max-width:37rem}.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.button{display:inline-flex;padding:13px 19px;border:1px solid var(--ink);font-size:.78rem;text-transform:uppercase;letter-spacing:.07em}.button-solid{background:var(--ink);color:var(--paper);transition:.25s}.button-solid:hover{background:var(--accent);border-color:var(--accent)}.text-link{display:inline-flex;gap:9px;align-items:center;border-bottom:1px solid var(--ink);padding-bottom:3px;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}.portrait-frame{margin:0;position:relative;align-self:stretch;min-height:620px;overflow:hidden}.portrait-frame:before{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--accent);z-index:-1}.portrait-frame img{height:calc(100% - 36px);object-fit:cover;object-position:center 24%;filter:saturate(.82) contrast(.98)}.portrait-frame figcaption{height:36px;display:flex;align-items:flex-end;color:var(--muted);font-size:.72rem;letter-spacing:.04em}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);padding-top:36px;padding-bottom:36px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.proof-grid article{padding-left:clamp(10px,3vw,44px);border-left:1px solid var(--line)}.proof-grid article:first-child{padding-left:0;border-left:0}.proof-grid strong{font:400 clamp(3.5rem,7vw,7.2rem)/1 var(--serif)}.proof-grid strong span{color:var(--accent)}.proof-grid p{margin:8px 0 0;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.about,.experience,.process{padding-top:clamp(90px,13vw,190px);padding-bottom:clamp(90px,13vw,190px)}.section-index{color:var(--accent);margin:0 0 54px}.about-grid,.experience-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.72fr);gap:clamp(60px,10vw,180px)}.section-title{font:400 clamp(3.2rem,6vw,6.5rem)/.98 var(--serif);letter-spacing:-.035em;margin:0}.about-copy{padding-top:10px}.about-copy>p{font-size:clamp(1rem,1.4vw,1.2rem);color:#474945;margin:0 0 24px}.skill-line{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}.skill-line span{border:1px solid var(--line);padding:7px 11px;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}
.work{background:var(--ink);color:var(--paper);padding-top:clamp(90px,12vw,170px);padding-bottom:clamp(100px,13vw,190px)}.work .section-index{color:#d98a70}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:90px;border-bottom:1px solid rgba(242,239,232,.2);padding-bottom:40px}.section-heading .section-index{margin:0}.section-heading h2{font:400 clamp(3.4rem,7vw,7.5rem)/.9 var(--serif);margin:0;text-align:right}.project{padding:0 0 clamp(100px,14vw,200px)}.project:last-child{padding-bottom:0}.project-meta{display:flex;justify-content:space-between;border-bottom:1px solid rgba(242,239,232,.2);padding-bottom:14px;margin-bottom:42px;font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;color:#aaa99f}.project-grid{display:grid;grid-template-columns:minmax(280px,.62fr) minmax(0,1.38fr);gap:clamp(46px,8vw,130px);align-items:center}.project-grid-reverse{grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr)}.project-grid-reverse .project-copy{grid-column:2}.project-grid-reverse .project-visual{grid-column:1;grid-row:1}.project h3{font:400 clamp(4.5rem,8vw,9rem)/.76 var(--serif);letter-spacing:-.04em;margin:0 0 45px}.project h3 em{color:#d98a70;font-weight:400}.project-lede{font:400 clamp(1.35rem,2vw,2rem)/1.18 var(--serif);color:#dad6cc}.project dl{margin:45px 0}.project dl>div{padding:18px 0;border-top:1px solid rgba(242,239,232,.2)}.project dt{color:#a9a79f;text-transform:uppercase;letter-spacing:.1em;font-size:.66rem}.project dd{margin:7px 0 0;font-size:.85rem}.work .text-link{border-color:var(--paper)}.project-visual{position:relative}.soundvibe-collage{padding:0 7% 14% 0}.image-main{aspect-ratio:16/9;object-fit:cover;object-position:center}.image-float{position:absolute;width:42%;right:0;bottom:0;aspect-ratio:1/1.12;object-fit:cover;object-position:center;box-shadow:0 25px 60px rgba(0,0,0,.34);border:8px solid var(--ink)}.video-frame{background:#d98a70;padding:clamp(12px,2vw,28px)}.video-frame video{aspect-ratio:16/9;background:#111;object-fit:cover}.video-caption{display:flex;justify-content:space-between;padding-top:16px;color:var(--ink);font-size:.7rem;text-transform:uppercase;letter-spacing:.09em}
.experience{border-bottom:1px solid var(--line)}.timeline article{display:grid;grid-template-columns:130px 1fr;gap:28px;padding:24px 0 36px;border-top:1px solid var(--line)}.timeline time{color:var(--accent);font-size:.72rem;letter-spacing:.06em}.timeline h3{font:400 clamp(1.6rem,2.5vw,2.5rem)/1.08 var(--serif);margin:0}.timeline p{color:var(--muted);margin:6px 0 0}.timeline div p:last-child{font-size:.9rem;margin-top:18px}.experience-media{margin:22px 0 58px;padding:28px;background:#e5dfd3;border-top:3px solid var(--accent)}.experience-media-heading{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;margin-bottom:26px}.experience-media-heading h3{font:400 clamp(2.2rem,3.7vw,4rem)/.95 var(--serif);margin:7px 0 0}.experience-media-heading>p{font-size:.82rem;margin:0}.media-kicker{font-size:.62rem!important;text-transform:uppercase;letter-spacing:.11em;color:var(--accent)!important}.experience-gallery{display:grid;grid-template-columns:1.4fr .7fr;grid-template-rows:1fr 1fr;gap:9px}.experience-gallery figure,.experience-video{margin:0;min-width:0}.experience-gallery .gallery-primary{grid-row:1/3}.experience-gallery img{height:100%;min-height:145px;object-fit:cover}.experience-gallery .gallery-primary img{min-height:380px}.experience-gallery figcaption,.experience-video figcaption{display:flex;align-items:center;gap:10px;padding-top:8px;color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.05em}.experience-gallery figcaption>span:first-child{color:var(--accent)}.experience-video{margin-top:34px}.experience-video video{aspect-ratio:16/9;object-fit:cover;background:var(--ink)}.experience-video figcaption{justify-content:space-between}.process .section-title{max-width:900px}.process-list{list-style:none;margin:80px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.process-list li{min-height:230px;padding:20px;border-left:1px solid var(--line);display:flex;flex-direction:column}.process-list li:first-child{border-left:0}.process-list span{color:var(--accent);font-size:.68rem}.process-list strong{font:400 clamp(1.7rem,2.7vw,2.8rem)/1 var(--serif);margin:auto 0 14px}.process-list small{color:var(--muted)}
.contact{background:var(--accent);color:var(--paper);padding-top:clamp(90px,12vw,170px);padding-bottom:28px}.contact .section-index{color:var(--paper)}.contact-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:8vw;align-items:end;padding-bottom:clamp(100px,13vw,180px)}.contact h2{font:400 clamp(4rem,9vw,10rem)/.82 var(--serif);letter-spacing:-.045em;margin:0}.contact h2 em{font-weight:400;color:var(--ink)}.contact-links{display:flex;flex-direction:column}.contact-links a{display:flex;justify-content:space-between;padding:18px 0;border-top:1px solid rgba(242,239,232,.45)}.contact-links a:last-child{border-bottom:1px solid rgba(242,239,232,.45)}.contact footer{border-top:1px solid rgba(242,239,232,.45);padding-top:24px;display:flex;justify-content:space-between;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
:focus-visible{outline:2px solid #3778c2;outline-offset:4px}.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}.reveal.is-visible{opacity:1;transform:none}
@media (max-width:1050px){.nav-links{display:none}.hero{grid-template-columns:1fr .65fr}.hero-statement{grid-template-columns:1fr}.portrait-frame{min-height:520px}.project-grid,.project-grid-reverse{grid-template-columns:1fr;gap:60px}.project-grid-reverse .project-copy,.project-grid-reverse .project-visual{grid-column:auto;grid-row:auto}.project-grid-reverse .project-visual{order:2}.about-grid,.experience-grid{grid-template-columns:1fr;gap:60px}.experience-media-heading{grid-template-columns:1.2fr .8fr}.process-list{grid-template-columns:repeat(2,1fr)}.process-list li:nth-child(3),.process-list li:nth-child(5){border-left:0}.contact-grid{grid-template-columns:1fr;gap:70px}}
@media (max-width: 760px){.site-header{height:72px}.hero{grid-template-columns:1fr;min-height:auto;padding-top:60px}.hero h1{font-size:clamp(6rem,29vw,10rem)}.portrait-frame{min-height:540px}.hero-statement{gap:20px}.proof-grid{grid-template-columns:1fr}.proof-grid article,.proof-grid article:first-child{padding:24px 0;border-left:0;border-top:1px solid var(--line)}.proof-grid article:first-child{border-top:0}.section-heading{display:block}.section-heading h2{text-align:left;margin-top:30px}.soundvibe-collage{padding:0 0 18%}.image-float{width:50%}.timeline article{grid-template-columns:1fr;gap:8px}.experience-media{padding:20px;margin-left:-8px;margin-right:-8px}.experience-media-heading{grid-template-columns:1fr}.experience-gallery{grid-template-columns:1fr}.experience-gallery .gallery-primary{grid-row:auto}.experience-gallery img,.experience-gallery .gallery-primary img{min-height:0;aspect-ratio:4/3}.process-list{grid-template-columns:1fr}.process-list li,.process-list li:nth-child(3),.process-list li:nth-child(5){border-left:0;border-top:1px solid var(--line);min-height:150px}.process-list li:first-child{border-top:0}.contact h2{font-size:clamp(4rem,19vw,7.5rem)}.contact footer{gap:20px}.language-toggle{padding-right:0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}

/* Centered Experience redesign */
.experience>.section-index{max-width:1100px;margin-left:auto;margin-right:auto}
.experience-heading{max-width:1100px;margin:0 auto 90px;text-align:center}
.experience-heading .section-title{max-width:920px;margin:0 auto}
.experience-content{max-width:1100px;margin:0 auto}
.experience-content .timeline article{grid-template-columns:150px minmax(240px,.8fr) minmax(300px,1.2fr);gap:clamp(24px,4vw,68px);align-items:start;padding:34px 0 44px}
.experience-content .timeline time{padding-top:6px}
.experience-content .timeline h3{font-size:clamp(1.8rem,2.8vw,3.1rem);line-height:1.02}
.timeline-role>p{font-size:.82rem}
.timeline-summary p{font-size:1rem;line-height:1.7;margin-top:4px}
.experience-content .experience-media{margin:28px 0 82px;padding:clamp(28px,4vw,56px)}

@media (max-width:1050px){.experience-content{max-width:none}.experience-content .timeline article{grid-template-columns:120px minmax(220px,.9fr) minmax(260px,1.1fr);gap:28px}}
@media (max-width: 760px){.experience-heading{text-align:left;margin-bottom:56px}.experience-content .timeline article{grid-template-columns:1fr;gap:8px}.timeline-summary{margin-top:14px}}

/* Homepage profile snapshot */
.profile-snapshot{padding-top:38px;padding-bottom:38px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.profile-snapshot-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px}
.profile-snapshot .section-index{margin:0}
.profile-name{font:400 clamp(1.8rem,3vw,3rem)/1 var(--serif);margin:0}
.profile-contact{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.profile-contact>div{padding:18px clamp(14px,2vw,30px);border-left:1px solid var(--line)}
.profile-contact>div:first-child{padding-left:0;border-left:0}
.profile-contact a,.profile-contact p{display:block;margin:5px 0 0;font-size:.92rem}
.profile-label{display:block;color:var(--accent);font-size:.64rem;text-transform:uppercase;letter-spacing:.1em}
.profile-detail{display:grid;grid-template-columns:1fr 2fr;gap:clamp(30px,6vw,100px);padding-top:28px}
.profile-detail p{margin:8px 0 0;color:var(--muted);font-size:.86rem;line-height:1.75}

@media (max-width: 760px){.profile-snapshot-head{align-items:flex-start}.profile-contact,.profile-detail{grid-template-columns:1fr}.profile-contact>div,.profile-contact>div:first-child{padding:16px 0;border-left:0;border-top:1px solid var(--line)}.profile-contact>div:first-child{border-top:0}.profile-detail{gap:22px}.profile-name{font-size:2rem}}

/* Resume-order refinements */
.project-saysh .video-frame video{object-fit:contain;background:#f6f3ed}
.career{background:#ebe6dc}
.career .experience-heading{margin-bottom:64px}