:root{--bg:#f4f3ef;--ink:#222823;--muted:#777e76;--accent:#777d51}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,"Microsoft YaHei",sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #9b9f6b;outline-offset:5px}header{height:90px;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;background:var(--bg)}.brand{font-size:23px;font-weight:700;letter-spacing:2px}.brand span{font-weight:400}.brand small{display:block;font-size:9px;font-weight:400;letter-spacing:3px;margin-top:7px}nav{display:flex;gap:37px;font-size:12px}nav a:hover{color:var(--accent)}.hero{position:relative;height:calc(100svh - 90px);min-height:600px;max-height:1050px;background:#1a2430;color:white}.hero>img{width:100%;height:100%;object-fit:cover;object-position:center 58%}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,19,25,.5),transparent 80%),linear-gradient(0deg,rgba(5,18,15,.45),transparent 35%)}.hero-content{position:absolute;top:17%;left:7%}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:500}.hero h1{font-size:clamp(50px,6.5vw,98px);line-height:1.22;font-weight:400;letter-spacing:6px;margin:32px 0 25px}.intro{font-size:14px;line-height:2;color:#e3e7e2}.hero-link{display:flex;justify-content:space-between;width:170px;border-bottom:1px solid #ffffff70;padding:18px 0;font-size:12px;margin-top:25px}.hero-bottom{position:absolute;bottom:28px;left:4.5%;right:4.5%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:#e0e4dd}.section{padding:110px 7%}.section-top{display:flex;justify-content:space-between;align-items:flex-end}h2{font-size:clamp(32px,4vw,56px);font-weight:400;letter-spacing:1px;line-height:1.4;margin:20px 0}.section-note{font-size:12px;line-height:1.9;color:var(--muted)}.filters{display:flex;gap:30px;border-bottom:1px solid #d6d8ce;margin:45px 0 35px;overflow:auto}.filters button{white-space:nowrap;border:0;background:none;padding:0 0 17px;font-size:12px;color:var(--muted);border-bottom:2px solid transparent}.filters .active{border-color:var(--ink);color:var(--ink)}sup{font-size:9px;margin-left:4px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 28px}.card{padding:0;text-align:left;background:transparent;border:0;min-width:0}.card:first-child{grid-column:1/-1}.photo{overflow:hidden;background:#ddd;aspect-ratio:1.5;position:relative}.card:first-child .photo{aspect-ratio:2.1}.photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.card:hover img{transform:scale(1.035)}.photo .arrow{position:absolute;right:20px;bottom:20px;background:var(--bg);height:38px;width:38px;border-radius:50%;display:grid;place-items:center}.meta{display:flex;justify-content:space-between;gap:10px;margin:18px 0 8px;font-size:10px;color:var(--muted)}.card h3{font-size:18px;font-weight:400;margin:0 0 8px}.card .en{font-size:10px;color:var(--muted);letter-spacing:.3px;margin:0}.caption{font-size:10px;color:var(--muted);margin-top:40px}.about{background:#e7e8df;display:grid;grid-template-columns:.8fr 1.2fr;gap:10%}.portrait{align-self:start;background:#1c1c1b;position:sticky;top:30px}.portrait img{width:100%;display:block}.portrait span{display:block;color:#ccc;padding:24px;font-size:10px;letter-spacing:2px}.about-copy>p{font-size:13px;line-height:2.1;color:#626a60}.about-copy .eyebrow{font-size:10px}.about-copy .lead{font-size:22px;color:var(--ink);margin-top:30px}.lead span{font-size:12px;color:var(--muted);margin-left:15px}.skills{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:35px}.skills div{border-top:1px solid #bdc2b4;padding-top:18px}.skills b{font-size:12px;font-weight:400}.skills p{font-size:11px;line-height:1.8;color:var(--muted)}.contact{background:#27342d;color:#edf0e5}.contact .eyebrow{color:#b8c1a6}.contact h2{margin:35px 0 55px}.email{font-size:clamp(19px,3.3vw,48px);border-bottom:1px solid #82907c;display:flex;justify-content:space-between;padding-bottom:25px;overflow-wrap:anywhere}.contact-row{display:flex;align-items:center;gap:25px;margin-top:30px;font-size:12px;color:#c0c8b6}.contact button{background:none;border:0;border-bottom:1px solid #82907c;padding:8px 0}footer{padding:32px 4.5%;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted);letter-spacing:1px}dialog{padding:30px;border:0;background:var(--bg);color:var(--ink);width:min(1150px,94vw);max-height:94svh}dialog::backdrop{background:#08110de0}.dialog-head{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1px;border-bottom:1px solid #ccc;padding-bottom:20px;position:sticky;top:-30px;background:var(--bg);z-index:1}.dialog-head button,#light-close{border:0;background:none;padding:12px;font-size:12px}.detail-title{padding:30px 0}.detail-title h2{font-size:32px}.detail-title p{font-size:12px;color:var(--muted);line-height:1.8}.detail-image{display:block;width:100%;margin:0 0 20px;border:0;padding:0;background:#e3e4df;cursor:zoom-in}.detail-image img{display:block;max-height:85vh;max-width:100%;width:auto;margin:auto}.detail-foot{display:flex;justify-content:space-between;margin:25px 0 5px}.detail-foot button{border:1px solid #ccc;background:none;padding:12px 20px;font-size:12px}#lightbox{background:#101812;width:98vw;max-width:none;height:96svh;padding:40px 15px 15px}#light-image{width:100%;height:100%;object-fit:contain}#light-close{position:absolute;right:10px;top:5px;color:#fff}@media(max-width:700px){header{height:76px;padding:0 6%}.brand{font-size:17px}.brand small{font-size:8px;letter-spacing:1px}nav{gap:18px;font-size:10px}.hero{min-height:600px;height:calc(90svh - 76px)}.hero-content{left:7%;top:15%}.hero h1{font-size:54px}.hero>img{object-position:63% center}.hero-bottom{font-size:8px}.section{padding:70px 6%}.section-note{display:none}.filters{gap:25px;margin-top:30px}.filters button{font-size:11px}.grid{grid-template-columns:1fr;gap:35px}.card:first-child .photo{aspect-ratio:1.5}.card h3{font-size:16px}.about{grid-template-columns:1fr;gap:40px}.portrait{position:static;width:75%}.skills{gap:20px}.contact-row{flex-wrap:wrap;gap:15px}.contact h2{font-size:32px}footer{font-size:8px;flex-wrap:wrap}dialog{padding:20px}.detail-title h2{font-size:25px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.photo img{transition:none}}
/* Spatial motion layer */
.hero{overflow:hidden;perspective:1200px;isolation:isolate}.hero>img{transform:translate3d(var(--hero-x,0px),var(--hero-y,0px),0) scale(1.07);transition:transform .8s cubic-bezier(.2,.7,.2,1)}.hero-content{transform:translate3d(var(--text-x,0px),var(--text-y,0px),40px);transition:transform .8s cubic-bezier(.2,.7,.2,1);z-index:2}.hero-bottom{z-index:2}.spatial-object{position:absolute;right:12%;top:24%;width:200px;height:200px;perspective:900px;pointer-events:none;opacity:.5;z-index:1}.spatial-axis{position:absolute;inset:0;transform-style:preserve-3d;animation:orbit 26s linear infinite}.spatial-ring{position:absolute;inset:0;border:1px solid #dce4c8;border-radius:50%;transform:rotateY(65deg)}.spatial-ring:nth-child(2){transform:rotateY(-55deg) rotateX(35deg)}.spatial-ring:nth-child(3){transform:rotateX(75deg);border-style:dashed}.spatial-axis:before,.spatial-axis:after{content:'';position:absolute;background:#dce4c8;left:50%;top:50%;width:240px;height:1px;transform:translate(-50%,-50%)}.spatial-axis:after{transform:translate(-50%,-50%) rotate(90deg)}.spatial-label{position:absolute;bottom:-45px;left:0;right:0;text-align:center;color:#e3e9d7;font-size:9px;letter-spacing:3px}.motion-toggle{position:absolute;right:4.5%;top:24px;z-index:4;border:1px solid #ffffff50;background:#17262055;color:#e5eadd;font-size:10px;padding:10px 13px;backdrop-filter:blur(8px)}.motion-toggle:hover{background:#172620bb}.grid{perspective:1600px}.card{transform-style:preserve-3d}.photo{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s;isolation:isolate}.card.is-tilting .photo{box-shadow:0 25px 40px -24px #0c211b88;transition:transform .12s linear,box-shadow .4s}.photo:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%),#ffffff30,transparent 58%);opacity:0;transition:opacity .5s}.card.is-tilting .photo:after{opacity:1}.photo .arrow{transition:transform .4s,background .4s}.card:hover .arrow{transform:rotate(45deg);background:#dbe0cb}.reveal{opacity:0;transform:perspective(1300px) translateY(42px) rotateX(5deg);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}.reveal.in-view{opacity:1;transform:perspective(1300px) translateY(0) rotateX(0)}dialog[open]{animation:detail-in .4s cubic-bezier(.16,1,.3,1)}@keyframes orbit{from{transform:rotateX(-20deg) rotateY(0deg) rotateZ(-12deg)}to{transform:rotateX(-20deg) rotateY(360deg) rotateZ(-12deg)}}@keyframes detail-in{from{opacity:0;transform:perspective(1400px) translateY(25px) rotateX(5deg) scale(.98)}to{opacity:1;transform:none}}body.motion-off .spatial-axis{animation:none}body.motion-off .hero>img,body.motion-off .hero-content,body.motion-off .photo,body.motion-off .reveal{transform:none;transition:none;opacity:1}body.motion-off dialog[open]{animation:none}body.motion-off .photo:after{display:none}@media(max-width:700px){.spatial-object{width:100px;height:100px;right:10%;top:58%;opacity:.35}.spatial-axis:before,.spatial-axis:after{width:125px}.spatial-label{font-size:7px;bottom:-30px}.motion-toggle{font-size:9px;top:16px}.photo{transform:none!important}.card.is-tilting .photo{box-shadow:none}}@media(prefers-reduced-motion:reduce){.spatial-axis{animation:none}.hero>img,.hero-content,.photo,.reveal,.reveal.in-view{transform:none;transition:none;opacity:1}dialog[open]{animation:none}.photo:after{display:none}}
/* Landscape editorial project layout */
.works{padding-left:5%;padding-right:5%}.section-top{padding:0 2%}.filters{margin-left:2%;margin-right:2%}.grid{display:flex;flex-direction:column;gap:64px}.card,.card:first-child{display:grid;grid-template-columns:minmax(0,1fr) 265px;column-gap:36px;align-items:start;border-bottom:1px solid #d6d8ce;padding-bottom:36px;position:relative}.card .photo,.card:first-child .photo{grid-column:1;grid-row:1/5;aspect-ratio:16/9;width:100%}.card .meta{grid-column:2;grid-row:1;flex-direction:column;gap:12px;align-self:start;margin:10px 0 28px;font-size:10px;line-height:1.7;letter-spacing:1px}.card h3{grid-column:2;grid-row:2;font-size:clamp(21px,2vw,30px);line-height:1.55;font-weight:400;letter-spacing:.5px;margin:0 0 18px}.card .en{grid-column:2;grid-row:3;font-size:11px;line-height:1.9;max-width:230px}.card:after{content:'查看项目 ↗';grid-column:2;grid-row:4;align-self:end;display:block;font-size:11px;letter-spacing:1px;margin-top:42px;padding-top:18px;border-top:1px solid #c9cdbf;color:#626b59}.card:nth-child(even){grid-template-columns:265px minmax(0,1fr)}.card:nth-child(even) .photo{grid-column:2}.card:nth-child(even) .meta,.card:nth-child(even) h3,.card:nth-child(even) .en,.card:nth-child(even):after{grid-column:1}.photo{background:#dfe3da}.photo img{object-position:center}.photo .arrow{width:44px;height:44px;right:22px;bottom:22px}.works>.caption{padding:0 2%;margin-top:48px}.section-top h2{font-size:clamp(36px,4.3vw,64px);letter-spacing:2px}.filters button{padding-bottom:20px}.hero-link span{transition:transform .35s}.hero-link:hover span{transform:translateY(5px)}.detail-title{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;padding:35px 0}.detail-title h2{grid-column:1/-1;grid-row:2;max-width:850px;font-size:clamp(28px,4vw,50px);margin:15px 0}.detail-title p:last-child{text-align:right}.detail-image{background:#e9ebe4;padding:18px}.detail-image img{max-height:none;width:100%;object-fit:contain}.about{gap:12%}.skills div{padding-top:22px}.contact{position:relative;overflow:hidden}.contact:after{content:'';position:absolute;right:-140px;top:-160px;width:550px;height:550px;border:1px solid #9cac7d26;border-radius:50%;pointer-events:none}.contact:before{content:'';position:absolute;right:-80px;top:-90px;width:400px;height:400px;border:1px solid #9cac7d20;border-radius:50%;pointer-events:none}@media(min-width:1500px){.works{padding-left:8%;padding-right:8%}.card{grid-template-columns:minmax(0,1fr) 300px;column-gap:55px}.card:nth-child(even){grid-template-columns:300px minmax(0,1fr)}}@media(max-width:1050px) and (min-width:701px){.card{grid-template-columns:minmax(0,1fr) 200px;column-gap:25px}.card:nth-child(even){grid-template-columns:200px minmax(0,1fr)}.card h3{font-size:21px}.card:after{margin-top:22px}.card .meta{margin-bottom:15px}}@media(max-width:700px){.works{padding-left:6%;padding-right:6%}.section-top{padding:0}.filters{margin-left:0;margin-right:0}.grid{gap:36px}.card,.card:first-child,.card:nth-child(even){display:flex;flex-direction:column;gap:0;padding-bottom:26px}.card .photo,.card:first-child .photo{aspect-ratio:16/9}.card .meta{width:100%;flex-direction:row;justify-content:space-between;margin:18px 0 12px;font-size:9px;letter-spacing:0}.card h3{font-size:20px;margin-bottom:9px}.card .en{max-width:none;font-size:10px}.card:after{margin-top:20px;padding-top:12px;width:100%;font-size:10px}.detail-title{display:block}.detail-title p:last-child{text-align:left}.detail-image{padding:0}.section-top h2{font-size:36px}.photo .arrow{width:35px;height:35px;right:15px;bottom:15px}.contact:after,.contact:before{opacity:.5}}
/* Mobile viewport and overflow fixes */
html,body{max-width:100%;overflow-x:clip}main,section,.grid,.card,.about-copy,.contact-row{min-width:0}.hero h1,.card h3,.detail-title h2{overflow-wrap:anywhere}.photo img{display:block}.detail-image img{height:auto}
@media(max-width:700px){html{scroll-padding-top:20px}header{height:auto;min-height:76px;padding:18px 6%;gap:14px;flex-wrap:wrap}.brand{flex-shrink:0}nav{gap:20px;flex-wrap:wrap;line-height:1.8}.hero{height:auto;min-height:650px;min-height:calc(100svh - 95px);max-height:none;padding:70px 7% 95px;perspective:none}.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;transform:none!important}.hero-content{position:relative;inset:auto;transform:none!important;max-width:100%}.hero h1{font-size:clamp(40px,11vw,60px);letter-spacing:3px;margin:28px 0 20px;line-height:1.3}.hero .eyebrow{font-size:8px;letter-spacing:1.6px;line-height:1.9;max-width:80%}.intro{font-size:12px;line-height:2}.hero-link{margin-top:15px}.hero-bottom{left:7%;right:7%;bottom:25px;gap:15px;align-items:flex-end;line-height:1.8}.hero-bottom span:first-child{max-width:70%}.hero-bottom span:last-child{white-space:nowrap;font-size:7px}.motion-toggle{right:7%;top:14px;padding:8px 10px}.spatial-object{right:9%;top:auto;bottom:110px;width:75px;height:75px;opacity:.25}.spatial-label{display:none}.section{padding:58px 6%}.section-top h2{font-size:34px}.filters{gap:22px;overflow-x:auto;max-width:100%;scrollbar-width:thin;padding-top:4px}.filters button{flex:0 0 auto;font-size:10px}.grid{gap:32px}.card,.card:first-child,.card:nth-child(even){width:100%;min-width:0}.card .photo,.card:first-child .photo{aspect-ratio:auto;height:auto;overflow:hidden;transform:none!important}.card .photo img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;transform:none!important}.card h3{font-size:19px;line-height:1.6;max-width:100%}.card .meta{gap:12px;line-height:1.8;flex-wrap:wrap}.card .en{max-width:100%;overflow-wrap:anywhere;line-height:1.8}.card:after{margin-top:16px}.about{display:flex;flex-direction:column;gap:30px}.portrait{width:min(100%,330px);position:static}.about-copy h2{font-size:34px}.about-copy .lead{display:flex;flex-wrap:wrap;gap:5px 12px;align-items:baseline}.lead span{margin:0}.skills{gap:20px 16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.skills p{overflow-wrap:anywhere}.contact h2{font-size:clamp(27px,7.5vw,36px)}.email{font-size:clamp(17px,5vw,25px);gap:12px;line-height:1.6}.email span{flex-shrink:0}.contact-row{align-items:flex-start;gap:12px 20px;line-height:1.8}.contact-row a{overflow-wrap:anywhere}footer{padding:25px 6%;gap:15px;line-height:1.8}dialog{width:calc(100% - 20px);max-width:calc(100% - 20px);max-height:calc(100dvh - 20px);margin:auto;padding:16px;overflow-x:hidden;overscroll-behavior:contain}.dialog-head{top:-16px;gap:10px;font-size:9px}.dialog-head button{flex-shrink:0}.detail-title{padding:22px 0}.detail-title h2{font-size:25px;line-height:1.6}.detail-title p{overflow-wrap:anywhere}.detail-image,.detail-image img{width:100%;max-width:100%;height:auto;max-height:none}.detail-foot{gap:12px}.detail-foot button{padding:12px;font-size:10px;flex:1;line-height:1.5}#lightbox{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;padding:55px 10px 20px}#light-image{width:100%;height:100%;object-fit:contain}.reveal,.reveal.in-view{transform:none;opacity:1;transition:none}}
@media(max-width:380px){header{align-items:flex-start}nav{width:100%;justify-content:space-between;gap:12px}.hero{min-height:610px}.skills{grid-template-columns:1fr}.hero-bottom span:last-child{display:none}.hero-bottom span:first-child{max-width:100%}.brand small{letter-spacing:1px}}