@charset "UTF-8";
:root{--paper:#f5f5f0;--ink:#1d302c;--muted:#64716c;--line:#dce2db;--teal:#147365;--lime:#dcebbb;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--teal);outline-offset:5px}button{border:0}button:disabled{cursor:default;opacity:.45}img{display:block;max-width:100%}.wrap{width:min(1240px,calc(100% - 96px));margin:auto}.header{height:86px;display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 max(48px,calc((100% - 1240px)/2));border-bottom:1px solid var(--line);background:rgba(245,245,240,.97);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:14px;font-weight:700;font-size:18px;white-space:nowrap}.monogram{width:34px;height:34px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:24px Georgia,serif;border-radius:50%}.brand-sub{font-size:10px;font-weight:400;letter-spacing:2px;color:var(--muted);border-left:1px solid #b6c1ba;padding-left:14px}.header nav{display:flex;gap:36px;align-items:center;font-size:13px}.nav-contact{border-bottom:1px solid var(--ink);padding:8px 0;display:flex;gap:23px}.hero{display:grid;grid-template-columns:1fr 1.02fr;gap:56px;padding-top:62px;padding-bottom:62px;align-items:center}.eyebrow{font-size:11px;letter-spacing:1.6px;font-weight:600;line-height:1.7;margin:0 0 22px;color:var(--muted)}.dot{display:inline-block;background:var(--teal);width:7px;height:7px;border-radius:50%;margin-right:7px}.hero h1{font-size:clamp(34px,3.9vw,55px);line-height:1.3;letter-spacing:-1.7px;margin:0 0 24px;font-weight:700}.hero h1 span{color:var(--teal)}.intro{font-size:15px;line-height:1.95;color:var(--muted);margin:0 0 30px}.hero-actions{display:flex;gap:28px;align-items:center}.button{min-height:48px;padding:0 23px;display:inline-flex;align-items:center;justify-content:center;gap:35px;font-size:13px;border-radius:3px;transition:background .2s,transform .2s}.primary{background:var(--ink);color:white}.primary:hover{background:var(--teal);transform:translateY(-2px)}.text-link{font-size:13px;border-bottom:1px solid #a1aca3;padding-bottom:6px}.hero-foot{border-top:1px solid var(--line);margin-top:39px;padding-top:19px;display:flex;gap:21px;font-size:9px;letter-spacing:1px;color:var(--muted)}.hero-visual{padding:0;position:relative;text-align:left;overflow:hidden;background:#c4c3ab;aspect-ratio:1.03;border-radius:3px}.hero-visual>img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.hero-visual:hover>img{transform:scale(1.035)}.hero-caption{position:absolute;bottom:0;left:0;width:100%;padding:40px 24px 22px;background:linear-gradient(transparent,rgba(7,22,19,.8));color:white;display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:12px}.hero-caption small{display:block;font-size:9px;letter-spacing:1.8px;margin-bottom:10px;opacity:.8}.round-arrow{width:35px;height:35px;border:1px solid #ffffff70;border-radius:50%;display:grid;place-items:center;font-size:20px;flex-shrink:0}.discipline-strip{background:#e8ede4;border-block:1px solid #dde5d9}.discipline-strip .wrap{display:flex;justify-content:space-between;align-items:center;min-height:65px;font-size:13px;color:#41564b;letter-spacing:1px}.discipline-strip i{font-style:normal;color:#8da087}.work{padding-top:74px;padding-bottom:74px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:34px}.section-heading .eyebrow,.about .eyebrow,.contact .eyebrow{margin-bottom:12px;font-size:10px}h2{font-size:34px;letter-spacing:-1px;margin:0;font-weight:600}.section-heading>p{font-size:13px;line-height:1.9;color:var(--muted);margin:0}.filters{display:flex;gap:8px;border-bottom:1px solid var(--line);padding-bottom:21px;margin-bottom:30px;flex-wrap:wrap}.filters button{background:transparent;font-size:12px;padding:10px 15px;border-radius:3px}.filters button:hover{background:#e5eae1}.filters button.active{background:var(--ink);color:white}.filters sup{font-size:9px;margin-left:5px;opacity:.7}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 24px}.project-card{background:transparent;text-align:left;padding:0;min-width:0}.card-image{aspect-ratio:1.48;position:relative;overflow:hidden;background:#e5e9e0;border-radius:3px}.card-image>img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.project-card:hover .card-image>img{transform:scale(1.05)}.card-badge{position:absolute;left:13px;top:13px;background:rgba(245,245,240,.94);font-size:10px;padding:6px 9px;border-radius:2px}.card-open{position:absolute;bottom:14px;right:14px;background:#f9faf5;color:var(--ink);width:35px;height:35px;border-radius:50%;display:grid;place-items:center;transition:transform .25s}.project-card:hover .card-open{transform:rotate(-8deg);background:var(--lime)}.card-meta{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:var(--muted);margin-top:16px}.project-card h3{font-size:15px;font-weight:600;line-height:1.65;margin:7px 0 0}.video-slate{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:23px;background:#233d39;color:#ebf0e5;position:relative;isolation:isolate}.video-slate:after{content:"";position:absolute;z-index:-1;width:240px;height:240px;border:1px solid #5f8171;border-radius:50%;right:-65px;top:25px;box-shadow:0 0 0 30px #ffffff05,0 0 0 60px #ffffff03}.video-slate.game{background:#273747}.video-slate.film{background:#524b41}.slate-type{font-size:9px;letter-spacing:1.5px;opacity:.6}.slate-title{font-size:22px;line-height:1.5;max-width:90%;letter-spacing:.5px;margin:30px 0 15px}.slate-bottom{font-size:9px;opacity:.7;letter-spacing:1px}.video-slate+.card-badge{left:auto;right:12px;top:12px}.more-wrap{display:flex;flex-direction:column;align-items:center;gap:13px;margin-top:42px}.secondary{border:1px solid #bdc9bf;background:transparent;min-width:230px}.secondary:hover{background:#e8ede4}#work-count{font-size:11px;color:var(--muted)}.about{padding:73px 0;background:#e9ede5}.about-grid{display:grid;grid-template-columns:1fr 2fr;gap:70px}.portrait{width:145px;margin-top:36px;border-radius:2px;mix-blend-mode:multiply}.about-content h3{font-size:23px;margin:0 0 16px}.about-content h3 span{font-size:12px;color:var(--muted);font-weight:400;margin-left:18px}.about-intro{font-size:14px;line-height:1.95;margin:0 0 28px;color:#596a5f;max-width:680px}.facts{display:flex;padding:23px 0 28px;border-block:1px solid #cfd8cb;margin-bottom:25px}.facts>div{flex:1}.facts>div+div{border-left:1px solid #cfd8cb;padding-left:35px}.facts strong{display:block;font-size:29px;font-weight:500;margin-bottom:9px;letter-spacing:-.8px}.facts em{font-size:15px;color:var(--muted);font-style:normal}.facts span{font-size:11px;color:var(--muted)}.skills>div{display:flex;gap:23px;margin-bottom:21px}.skills>div>span{color:#799080;font-size:11px;padding-top:4px}.skills h4{margin:0 0 8px;font-size:14px;font-weight:600}.skills p{margin:0;color:var(--muted);font-size:12px;line-height:1.9}.experience{border-top:1px solid #cfd8cb;margin-top:27px;padding-top:17px}.experience summary{cursor:pointer;display:flex;justify-content:space-between;font-size:13px;list-style:none}.experience summary::-webkit-details-marker{display:none}.experience[open] summary span{transform:rotate(45deg)}.experience>div{font-size:12px;line-height:1.9;color:var(--muted);padding:12px 0 0}.experience ul{padding-left:18px}.contact{padding-top:78px;padding-bottom:77px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}.contact h2{font-size:36px;margin-bottom:18px}.contact p:not(.eyebrow){font-size:12px;color:var(--muted);line-height:1.8}.email{display:flex;justify-content:space-between;align-items:center;font-size:clamp(17px,2vw,26px);padding-bottom:20px;border-bottom:1px solid #bbc8bb;letter-spacing:-.7px}.contact-links>div{display:flex;justify-content:space-between;margin-top:18px;gap:16px;font-size:11px;color:var(--muted)}#copy-wechat{background:transparent;font-size:11px;padding:0;color:var(--muted)}#copy-status{display:block;font-size:11px;margin-top:13px;color:var(--teal);min-height:14px}footer{border-top:1px solid var(--line);min-height:71px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted)}dialog{width:min(1040px,calc(100% - 40px));max-height:92dvh;border:0;border-radius:5px;padding:0;background:var(--paper);color:var(--ink);box-shadow:0 30px 120px #0005}dialog::backdrop{background:#10221cbd;backdrop-filter:blur(5px)}.dialog-header{position:sticky;top:0;z-index:2;background:var(--paper);display:flex;align-items:center;justify-content:space-between;padding:14px 28px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}.close{background:#e5e9e1;width:33px;height:33px;border-radius:50%;font-size:16px}.dialog-body{padding:25px 28px}.dialog-body h2{font-size:24px;line-height:1.6}.dialog-body>p{font-size:12px;line-height:1.9;color:var(--muted);margin:10px 0 22px}#media-container{background:#17201e;border-radius:3px;overflow:hidden}#media-container iframe,#media-container video{width:100%;aspect-ratio:16/9;display:block;border:0;background:#111}#media-container img{width:100%;height:min(56vh,630px);object-fit:contain}.gallery-controls{display:flex;align-items:center;justify-content:center;gap:22px;padding:15px}.gallery-controls button{background:#e2e8df;border-radius:50%;width:34px;height:34px}.gallery-controls span{font-size:12px;color:var(--muted)}.thumbnails{display:flex;gap:9px;overflow-x:auto;padding-bottom:8px;margin-top:10px}.thumbnails button{flex:0 0 90px;background:transparent;border:2px solid transparent;padding:2px;border-radius:2px}.thumbnails button.active{border-color:var(--teal)}.thumbnails img{width:100%;height:60px;object-fit:cover}.source-row{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:17px;font-size:11px;color:var(--muted)}.source-row a{color:var(--teal);border-bottom:1px solid}.source-row span{line-height:1.7}.sr-only,.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip:focus{z-index:100;width:auto;height:auto;clip:auto;background:white;padding:15px}[hidden]{display:none!important}
@media(min-width:1600px){.hero{gap:90px}.hero h1{font-size:58px}}
@media(max-width:1000px){.wrap{width:calc(100% - 56px)}.header{padding:0 28px}.hero{gap:28px}.hero h1{font-size:40px}.hero-foot{gap:12px;font-size:8px}.project-grid{grid-template-columns:repeat(2,1fr)}.about-grid{grid-template-columns:1fr 2.1fr;gap:35px}.facts>div+div{padding-left:22px}.contact{gap:25px}.hero-visual{aspect-ratio:.88}}
@media(max-width:650px){html{scroll-padding-top:78px}.wrap{width:calc(100% - 36px)}.header{height:68px;padding:0 18px}.brand{font-size:15px;gap:8px}.monogram{width:29px;height:29px;font-size:21px}.brand-sub{display:none}.header nav{gap:18px;font-size:12px}.nav-contact{gap:9px}.hero{grid-template-columns:1fr;gap:33px;padding-top:37px;padding-bottom:32px}.hero h1{font-size:42px;margin-bottom:17px}.eyebrow{font-size:10px}.intro{font-size:14px;line-height:1.85;margin-bottom:24px}.hero-foot{margin-top:28px;padding-top:17px;gap:25px;font-size:8px}.hero-visual{aspect-ratio:1.3}.hero-caption{padding:35px 18px 17px;font-size:12px}.hero-caption small{font-size:8px}.discipline-strip .wrap{min-height:54px;gap:6px;font-size:10px;letter-spacing:0}.discipline-strip i{font-size:9px}.work{padding-top:43px;padding-bottom:43px}.section-heading{display:block;margin-bottom:23px}h2{font-size:29px}.section-heading>p{margin-top:15px;font-size:12px}.filters{gap:3px;padding-bottom:15px;margin-bottom:22px}.filters button{font-size:11px;padding:9px 10px}.filters sup{font-size:8px;margin-left:3px}.project-grid{gap:27px 13px}.card-image{aspect-ratio:1.13}.card-badge{left:8px;top:8px;font-size:8px;padding:4px 6px}.card-open{width:27px;height:27px;bottom:9px;right:9px;font-size:12px}.card-meta{font-size:8px;letter-spacing:0;margin-top:11px}.project-card h3{font-size:12px;line-height:1.7;margin-top:5px}.video-slate{padding:14px}.slate-type{font-size:7px;letter-spacing:1px}.slate-title{font-size:16px;margin:30px 0 16px}.slate-bottom{font-size:7px}.more-wrap{margin-top:30px}.about{padding:43px 0}.about-grid{grid-template-columns:1fr;gap:27px}.about-label{position:relative;min-height:90px}.portrait{position:absolute;right:0;top:-8px;width:66px;margin-top:0}.about-content h3{font-size:21px}.about-content h3 span{font-size:11px;margin-left:12px}.about-intro{font-size:13px}.facts strong{font-size:25px}.facts span{font-size:10px}.facts>div+div{padding-left:20px}.contact{padding-block:46px;grid-template-columns:1fr;gap:20px}.contact h2{font-size:30px}.email{font-size:23px}.contact-links>div{font-size:10px;gap:10px}#copy-wechat{font-size:10px}footer{font-size:9px;min-height:60px}dialog{width:calc(100% - 16px);max-height:94dvh}.dialog-header{padding:12px 16px}.dialog-body{padding:18px 16px}.dialog-body h2{font-size:19px}.source-row{flex-direction:column;align-items:flex-start;gap:10px}.thumbnails button{flex-basis:70px}.thumbnails img{height:48px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Gallery gestures and resume details */
#media-container:has(#gallery-image){touch-action:pan-y pinch-zoom}
#gallery-image{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;cursor:grab}
#media-container.is-dragging #gallery-image{cursor:grabbing}
.experience li{font-weight:700;color:var(--ink)}
footer{display:grid;grid-template-columns:1fr auto 1fr;gap:18px}
footer .icp{justify-self:center;font-size:10px;text-align:center;line-height:1.7}
footer .back-top{justify-self:end}
footer .icp:hover{text-decoration:underline}
@media(max-width:650px){footer{grid-template-columns:1fr auto;gap:12px;padding-block:18px}footer .icp{grid-column:1/-1;grid-row:2;font-size:10px}footer .back-top{grid-column:2;grid-row:1}}

/* Prominent contact methods with the original WeChat QR image */
.contact-links>.contact-methods{align-items:flex-start;gap:26px;margin-top:22px}
.contact-methods .phone,#copy-wechat{font-size:16px;line-height:1.6;font-weight:600;color:var(--ink)}
.wechat-block{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.wechat-qr-link{display:block;line-height:0;border-radius:3px;overflow:hidden;background:white}
.wechat-qr{width:150px;height:auto;display:block}
@media(max-width:650px){.contact-links>.contact-methods{gap:18px;flex-wrap:wrap}.contact-methods .phone,#copy-wechat{font-size:15px}.wechat-qr{width:145px}}


/* Subtle sage and warm sand accents, drawn in CSS to keep pages lightweight. */
:root{--paper:#f7f8f3;--line:#d6e1d8}
body{
  background-color:var(--paper);
  background-image:radial-gradient(ellipse 760px 580px at 0% 0%,#d6e9df 0%,transparent 72%),radial-gradient(ellipse 720px 620px at 100% 120px,#f2e2ca 0%,transparent 72%);
  background-repeat:no-repeat;
}
.header{background:rgba(247,248,243,.96)}
.discipline-strip{background:linear-gradient(100deg,#dcebe2,#edf0dd);border-color:#d1dfd4}
.about{background:linear-gradient(120deg,#e2eee6 0%,#edf0df 100%)}
.contact{background:radial-gradient(ellipse at 90% 90%,rgba(243,224,199,.55),transparent 70%);border-radius:24px}
.card-image{box-shadow:0 4px 16px rgba(29,48,44,.06)}
@media(max-width:650px){
  body{background-image:radial-gradient(ellipse 420px 540px at 0% 0%,#d6e9df 0%,transparent 72%),radial-gradient(ellipse 380px 500px at 100% 480px,#f2e2ca 0%,transparent 72%)}
  .contact{border-radius:16px}
}


/* A quiet footer trigger and a text-only, accessible statistics dialog. */
.copyright{padding:0;background:transparent;text-align:left;font:inherit;color:inherit;line-height:1.7;user-select:none;-webkit-user-select:none}
.stats-dialog{width:min(600px,calc(100% - 40px))}
.stats-dialog .dialog-body{padding:26px 28px 28px}
.stats-dialog h3{font-size:15px;margin:24px 0 12px}
#stats-summary{font-size:15px;line-height:1.9;color:var(--ink);margin-top:14px}
#stats-ranking{padding-left:24px;font-size:14px;line-height:1.9;margin:0 0 22px;overflow-wrap:anywhere}
#stats-ranking li+li{margin-top:10px}
.stats-dialog .stats-note{font-size:12px;line-height:1.9;margin:20px 0}
#stats-refresh{min-width:130px;min-height:42px}
@media(max-width:650px){.stats-dialog{width:calc(100% - 24px)}.stats-dialog .dialog-body{padding:20px}#stats-ranking{font-size:13px}#stats-summary{font-size:14px}}