.about{position:fixed;inset:0;z-index:2;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:43% 57%;padding:18vh 6vw 12vh;color:#f7f7f5;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .35s,transform .45s,visibility .45s;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent;text-shadow:0 1px 12px #03142445}
.about-intro{padding-right:3vw}.about-eyebrow{font-family:Georgia,serif;font-size:14px;letter-spacing:4px;margin-bottom:18px}.about h1,.about h2,.about h3,.about h4{font-family:'Songti SC','STSong','SimSun',serif;font-weight:400}.about h1{font-size:clamp(56px,6.2vw,94px);line-height:1.2;outline:none}.about-intro h2{font-size:clamp(30px,3.3vw,50px);margin:40px 0 28px;line-height:1.35}.about-bio{max-width:510px;font-size:clamp(16px,1.4vw,21px);line-height:1.85;margin:0 0 26px}.about-contact{display:inline-flex;align-items:center;gap:20px;color:inherit;background:none;border:0;padding:12px 0;margin-top:8px;font-size:18px}.about-contact img,.profile-project img{width:20px;height:20px;filter:invert(1)}.about-profile{border-left:1px solid #ffffff25;padding:0 0 0 2.3vw}.profile-title{font-size:26px;border-bottom:1px solid #ffffff40;padding-bottom:22px;max-width:440px}.profile-section{max-width:600px;border-bottom:1px solid #ffffff45;padding:26px 0 30px}.profile-section h3{font-size:24px;margin-bottom:26px}.profile-section h4{font-size:28px;margin-bottom:10px}.profile-section p{font-size:18px;line-height:1.6}.profile-section .profile-note{font-size:16px;color:#e0e7ee;margin-top:8px}.profile-project{display:flex;align-items:center;justify-content:space-between;gap:20px}.profile-project a{display:inline-flex;align-items:center;gap:14px;color:inherit;text-decoration:none;white-space:nowrap;font-size:16px}.about-contact:hover,.profile-project a:hover{color:#fff;opacity:.75}body.about-open .hero{opacity:0;visibility:hidden;transform:translateX(-35px);pointer-events:none;transition:opacity .3s,transform .4s,visibility .4s}body.about-open .about{opacity:1;visibility:visible;transform:none;transition:opacity .6s .25s,transform .7s .2s,visibility 0s}body.about-open .shade{background-color:rgba(4,20,38,.25)}body.about-open .back-home{display:inline-block}body.about-open #about-nav{opacity:1;border-bottom:1px solid #fff;padding-bottom:9px}.contact-dialog{position:fixed;inset:0;margin:auto;width:min(380px,calc(100vw - 40px));padding:30px;border:1px solid #ffffff35;border-radius:12px;background:#102b43;color:#fff}.contact-dialog::backdrop{background:#031424aa;backdrop-filter:blur(6px)}.contact-close{float:right;background:none;border:0;color:inherit;padding:4px;font-size:14px}.contact-dialog h2{font-size:26px;font-weight:400;margin-bottom:28px}.contact-dialog p{font-size:14px;color:#d6e0e9}.contact-dialog strong{display:block;font-size:30px;font-weight:500;letter-spacing:1px;margin:10px 0 24px}#copy-wechat{background:#f3f0e8;color:#10243b;border:0;border-radius:5px;padding:12px 20px;font-size:15px}#copy-status{min-height:24px;margin-top:12px}
.about-bio,.profile-section p,.about-contact,.profile-project a{font-family:'Songti SC','STSong','SimSun',serif}.about-bio{font-size:clamp(16px,1.6vw,24px);line-height:1.65}.profile-section p{font-size:20px}
@media(min-height:950px){.about{padding-top:18vh}.about-intro h2{margin-top:48px}.about-bio{margin-bottom:30px}.profile-section{padding-top:30px;padding-bottom:36px}}
@media(max-width:1050px){.about{grid-template-columns:45% 55%;padding-top:16vh}.about-bio{font-size:17px}.profile-project{align-items:flex-start;flex-direction:column;gap:12px}.profile-section h3{margin-bottom:18px}.profile-section{padding:22px 0}.profile-section p{font-size:16px}}
@media(max-width:700px){body.about-open nav a:not(#about-nav):not(.back-home){display:none}.about{inset:82px 0 54px;display:block;padding:22px 7vw 35px;background:#071f3670}.about-intro{padding:0}.about-eyebrow{font-size:12px;margin-bottom:12px}.about h1{font-size:54px}.about-intro h2{font-size:32px;margin:24px 0 20px}.about-bio{font-size:16px;line-height:1.85;margin-bottom:18px}.about-contact{font-size:16px;margin-top:0}.about-profile{border-left:0;padding:34px 0 0}.profile-title{font-size:24px;padding-bottom:18px}.profile-section{max-width:none;padding:22px 0}.profile-section h3{font-size:20px;margin-bottom:18px}.profile-section h4{font-size:25px}.profile-project{gap:14px}.profile-project a{font-size:15px}body.about-open .back-home{padding-left:12px;border-left:1px solid #ffffff40}}
@media(max-height:650px) and (min-width:701px){.about{padding-top:100px;padding-bottom:75px}.about h1{font-size:54px}.about-intro h2{margin:22px 0 18px;font-size:32px}.about-bio{font-size:16px;margin-bottom:16px}.profile-section{padding:18px 0}.profile-section h3{margin-bottom:14px;font-size:20px}.profile-section h4{font-size:24px}}
@media(prefers-reduced-motion:reduce){.about{transition:none!important;transform:none}}

/* About scene: its own camera angle, cross-fades in like the works scene. */
.about-angle{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;opacity:0;transform:scale(1.1) translateY(3%);filter:brightness(.55) blur(6px);transition:opacity .55s ease,transform .9s ease,filter .55s ease;pointer-events:none}
body.about-open .about-angle{opacity:1;transform:scale(1) translateY(0);filter:brightness(.82);transition:opacity 1.3s ease .1s,transform 1.6s cubic-bezier(.22,.61,.36,1),filter 1.3s ease}
body.about-open video#sea{transform:scale(1.12) translateY(-4%);filter:brightness(.8);transition:transform 1.5s cubic-bezier(.22,.61,.36,1),filter 1.5s}
body.about-open .shade{background-color:rgba(4,20,38,.38)}
@media(max-width:700px){.about-angle{object-position:50% 60%}}
@media(prefers-reduced-motion:reduce){.about-angle{transition:none!important;transform:none}}
/* Entering about: home scene dims and blurs first so the two people never overlap visibly. */
body.about-open video#sea{filter:brightness(.45) blur(8px);transition:transform 1.2s cubic-bezier(.22,.61,.36,1),filter .45s ease}
body.about-open .about-angle{filter:brightness(.68) blur(1.5px);transition:opacity 1.1s ease .35s,transform 1.6s cubic-bezier(.22,.61,.36,1) .2s,filter 1.1s ease .35s}
/* v3: beach scene, camera keeps moving right; no darkening. */
.about-angle{object-position:center center;transform:scale(1.08) translateX(6%);filter:blur(4px)}
body.about-open .about-angle{filter:none;transform:scale(1) translateX(0)}
body.about-open video#sea{transform:scale(1.12) translateX(-8%);filter:blur(6px)}
body.about-open .shade{background-color:transparent;background-image:linear-gradient(90deg,rgba(5,25,45,.38),rgba(5,25,45,.12) 45%,rgba(5,25,45,.28))}
.about{text-shadow:0 1px 3px rgba(0,0,0,.45),0 2px 18px rgba(3,20,36,.55)}

/* Camera-move transition (home <-> about) */
.scene-transition{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;visibility:hidden}
.scene-transition.playing{opacity:1;visibility:visible;transition:none}
.scene-transition.playing.leaving{opacity:0;transition:opacity .15s linear}
body.scene-cut video#sea,body.scene-cut .about-angle{transition:none!important;filter:none!important;transform:none!important}
body.scene-cut .shade{transition:background-color 1.4s ease,background-image 1.4s ease}
body.scene-moving.about-open .hero{transition:opacity .45s ease,transform .6s ease,visibility 0s linear .6s}
body.scene-moving.about-open .about{transition:opacity .9s ease 2.3s,transform 1s cubic-bezier(.22,.61,.36,1) 2.2s,visibility 0s}
body.scene-moving:not(.about-open):not(.works-open) .about{transition:opacity .4s ease,transform .5s ease,visibility 0s linear .5s}
body.scene-moving:not(.about-open):not(.works-open) .hero{transition:opacity .9s ease 2.5s,transform 1s cubic-bezier(.22,.61,.36,1) 2.4s,visibility 0s linear 2.4s}
.hero,.about{will-change:opacity,transform}