@font-face{font-family:Exhibition;src:url('assets/display-web.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:ExhibitionCN;src:url('assets/headline-0.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:ExhibitionCN;src:url('assets/headline-1.woff2') format('woff2');font-weight:700;font-display:swap}
/* Wine is the public-interface accent. Artwork-derived colors only scope to project metadata.
   Layers: background 0, content 1, navigation 10, utilities 30; native dialog uses top layer. */
:root{--surface:#111114;--raised:#1c1c21;--text:#f2f0eb;--muted:#b7b5bb;--line:#3e3d45;--accent:#8d243b;--accent-ink:#eda2b0;--button-text:#fbf4f4;--glass:rgb(22 21 26 / .78);--wall:#242329;--radius:14px;--ease:cubic-bezier(.16,1,.3,1);--header-height:86px;--layer-nav:10;--layer-overlay:30;color-scheme:dark}
:root[data-theme=light]{--surface:#f0efec;--raised:#e2e1e0;--text:#1e1d24;--muted:#5f5c66;--line:#c5c2ca;--accent-ink:#8d243b;--glass:rgb(246 244 243 / .82);--wall:#dfdcdf;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:112px}
body{margin:0;background:var(--surface);color:var(--text);font:15px/1.7 'Microsoft YaHei','PingFang SC',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
main,.site-footer{position:relative;z-index:1}
a{color:inherit;text-decoration:none;text-underline-offset:5px}
button{color:inherit;background:none;border:0;font:inherit;cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:disabled{opacity:.42;cursor:not-allowed}
a:active,button:active{translate:0 1px}
img{display:block;max-width:100%}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:ExhibitionCN,'Microsoft YaHei',sans-serif;font-weight:700;line-height:1.35;text-wrap:balance}
::selection{background:var(--accent);color:var(--button-text)}
:focus-visible{outline:3px solid var(--accent-ink);outline-offset:5px}
.wrap{width:min(1320px,calc(100% - 112px));margin-inline:auto}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--line);border:2px solid var(--surface);border-radius:8px}
.skip{position:fixed;top:-70px;left:16px;padding:10px 18px;background:var(--text);color:var(--surface);z-index:var(--layer-overlay)}
.skip:focus{top:12px}
.site-header{height:66px;width:min(1216px,calc(100% - 72px));margin:16px auto 0;padding:8px 12px 8px 24px;display:flex;align-items:center;gap:24px;position:sticky;top:16px;z-index:var(--layer-nav);border:1px solid var(--line);border-radius:999px;background:var(--glass);backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .06)}
.identity{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;flex:none}
.identity-mark{font:700 30px/1 Exhibition,sans-serif;letter-spacing:-.025em}
.site-header nav{display:flex;align-items:center;gap:27px;margin-left:auto}
.site-header nav a{position:relative;line-height:44px;font-size:13px;color:var(--muted)}
.site-header nav a:after{content:'';position:absolute;bottom:6px;left:0;right:0;height:2px;background:var(--accent-ink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.site-header nav a:hover,.site-header nav a[aria-current]{color:var(--text)}
.site-header nav a:hover:after,.site-header nav a[aria-current]:after{transform:scaleX(1)}
.solid-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--accent);color:var(--button-text);padding:12px 24px;border-radius:999px;font-size:14px;font-weight:700;white-space:nowrap;transition:transform .35s var(--ease),background .2s}
.solid-link:hover{background:#a42d47;transform:translateY(-3px)}
.solid-link[aria-disabled=true]{cursor:wait;transform:none}
.download-status{position:fixed;right:20px;bottom:22px;z-index:var(--layer-overlay);max-width:min(420px,calc(100vw - 40px));padding:16px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--raised);color:var(--text);font-size:14px;line-height:1.8}
.download-status[hidden]{display:none}
.download-status a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;color:var(--accent-ink)}
.nav-resume{font-size:13px;min-height:46px;padding:10px 24px}
.theme-control{font-size:11px;min-width:44px;min-height:44px;border-radius:999px;color:var(--muted);padding:8px}
.theme-control:hover{color:var(--text);background:var(--raised)}
.pointer-halo{position:fixed;left:0;top:0;width:420px;height:420px;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(166,42,67,.75),rgba(141,36,59,.12) 45%,transparent 69%);opacity:0;transition:opacity .7s;will-change:transform}
.pointer-halo.is-active{opacity:.18}
.hero{position:relative;overflow:hidden;padding-top:36px;padding-bottom:68px}
.hero-wall{--wall-size:clamp(130px,19vw,320px);position:absolute;right:-.05em;top:5px;width:calc(var(--wall-size)*3.58);height:calc(var(--wall-size)*1.58);contain:layout paint;color:var(--wall);font:700 var(--wall-size)/.78 Exhibition,sans-serif;letter-spacing:-.03em;pointer-events:none;user-select:none;white-space:nowrap;transform:translateX(6%);opacity:.66}
.hero-inner{position:relative}
.hero-intro{display:grid;grid-template-columns:1.4fr 1fr;gap:55px;align-items:end;margin-bottom:35px}
.hero-intro h1{display:inline-block;position:relative;width:fit-content;text-wrap:nowrap}
.hero-name{display:block;font:700 clamp(80px,8.3vw,128px)/.86 Exhibition,sans-serif;letter-spacing:-.025em}
.hero-cn{position:absolute;left:calc(100% + 24px);top:4px;font-size:clamp(24px,2.8vw,40px);line-height:1.4;white-space:nowrap}
.hero-bio{justify-self:end;padding:0 2px 4px 0}
.hero-practices{font:700 30px/1.2 ExhibitionCN,'Microsoft YaHei',sans-serif;margin-bottom:14px}
.hero-practices span{color:var(--accent-ink);margin-inline:8px}
.hero-bio>p:not(.hero-practices){font-size:13px;color:var(--muted);line-height:1.8}
.hero-bio .hero-statement{margin-top:9px}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px;white-space:nowrap;border-bottom:1px solid var(--text);line-height:1.7;transition:color .2s,border-color .2s,transform .3s var(--ease)}
.text-link:hover{color:var(--accent-ink);border-color:var(--accent-ink);transform:translateX(4px)}
.resume-intro{margin-top:12px;font-weight:700}
.hero-stage{--stage-height:clamp(258px,34dvh,360px);display:grid;grid-template-columns:1fr 1.12fr 1.04fr;gap:36px;align-items:start;padding:8px 4px 0}
.hero-piece{display:block;min-width:0;position:relative;transform:rotate(var(--piece-rotation));transition:transform .65s var(--ease)}
.hero-echo{--piece-rotation:-3deg;margin-top:22px}
.hero-alt{--piece-rotation:2.5deg;margin-top:0}
.hero-arcel{--piece-rotation:-2deg;margin-top:49px}
.hero-image{height:var(--stage-height);overflow:hidden;border-radius:var(--radius);background:var(--raised)}
.hero-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.hero-alt .hero-image{height:calc(var(--stage-height)*.89)}
.hero-arcel .hero-image{height:calc(var(--stage-height)*.96)}
.hero-echo img{object-position:50% 52%}
.hero-alt img{object-position:50% 55%}
.hero-arcel img{object-position:64% 50%}
.hero-piece:is(:hover,:focus-visible){transform:translateY(-12px) rotate(0)}
.hero-piece:is(:hover,:focus-visible) img{transform:scale(1.055)}
.project-caption{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:18px;padding-top:12px;border-top:1px solid var(--project-accent,var(--line))}
.project-caption h2,.project-caption h3{font-size:19px;line-height:1.35}
.project-caption p{font-size:12px;color:var(--muted);margin-top:5px}
.enter-label{font-size:12px;white-space:nowrap;min-height:28px;display:flex;align-items:center}
.hero-piece:is(:hover,:focus-visible) .project-caption h2,.hero-piece:is(:hover,:focus-visible) .enter-label{color:var(--project-ink,var(--accent-ink))}
:root[data-theme=light] .hero-piece:is(:hover,:focus-visible) .project-caption h2,:root[data-theme=light] .hero-piece:is(:hover,:focus-visible) .enter-label{color:var(--project-light-ink,var(--accent-ink))}
.marquee{overflow:hidden;background:var(--accent);color:var(--button-text);padding-block:15px;position:relative;z-index:1}
.marquee-track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.marquee-track>span{display:flex;align-items:center;gap:38px;white-space:nowrap;padding-right:38px;font:700 29px/1 Exhibition,sans-serif;letter-spacing:.025em}
.marquee-track i{display:block;width:8px;height:8px;background:currentColor;transform:rotate(45deg)}
.marquee:hover .marquee-track{animation-play-state:paused}
.is-paused .marquee-track,.is-paused .orbit-ring,.motion-paused .marquee-track,.motion-paused .orbit-ring{animation-play-state:paused}
.works{padding-top:112px;padding-bottom:120px}
.works-heading h2{display:flex;align-items:center;gap:76px}
.title-zh{font-size:clamp(50px,6vw,88px);line-height:1;letter-spacing:-.025em}
.title-zh>span{display:block;margin-left:1.2em;color:var(--accent-ink)}
.title-en{font:700 clamp(48px,6vw,90px)/.88 Exhibition,sans-serif;letter-spacing:-.015em}
.title-en em{font-style:normal;color:var(--muted)}
.heading-note{font-size:14px;color:var(--muted);margin-top:26px}
.filter-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:36px;margin-bottom:46px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filters button{font-size:13px;min-height:44px;padding:9px 19px;border-radius:999px;border:1px solid transparent;transition:background .2s,color .2s,transform .3s var(--ease)}
.filters button:hover{background:var(--raised);transform:translateY(-2px)}
.filters button[aria-pressed=true]{background:var(--accent);color:var(--button-text)}
.result-count{font-size:12px;color:var(--muted);white-space:nowrap}
.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:48px;row-gap:56px;align-items:start}
.work-piece{grid-column:span 6;min-width:0;transition:transform .6s var(--ease)}
.work-piece:nth-child(4n+2){margin-top:80px}
.work-piece:nth-child(4n+3){grid-column:span 5}
.work-piece:nth-child(4n+4){grid-column:7/span 6;margin-top:38px}
.work-piece:last-child:nth-child(odd){grid-column:span 7}
.work-piece[hidden]{display:none!important}
.work-image{aspect-ratio:1.48;overflow:hidden;background:var(--raised);border-radius:var(--radius);position:relative}
.work-image img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transition:transform .8s var(--ease)}
.work-piece:nth-child(4n+3) .work-image{aspect-ratio:1.08}
.work-piece:nth-child(4n+4) .work-image{aspect-ratio:1.68}
.work-info{margin-top:17px;padding:17px 18px 20px;border-radius:var(--radius);border-top:1px solid var(--project-accent,var(--line));transition:background .4s var(--ease),color .3s}
.work-info .project-caption{border:0;margin:0;padding:0}
.work-info .project-caption h3{font-size:24px;color:var(--project-ink,var(--text));transition:color .3s}
:root[data-theme=light] .work-info .project-caption h3{color:var(--project-light-ink,var(--text))}
.work-description{color:var(--muted);font-size:13px;line-height:1.85;max-width:62ch;margin-top:13px}
.work-piece:is(:hover,:focus-visible){transform:translateY(-10px)}
.work-piece:is(:hover,:focus-visible) img{transform:scale(1.045)}
.work-piece:is(:hover,:focus-visible) .work-info{background:var(--project-accent,var(--accent));color:var(--project-on-accent,var(--button-text))}
.work-piece:is(:hover,:focus-visible) .work-info :is(h3,p,.enter-label){color:inherit}
:root[data-theme=light] .work-piece:is(:hover,:focus-visible) .work-info :is(h3,p,.enter-label){color:var(--project-on-accent,var(--button-text))}
.manifesto{position:relative;overflow:hidden;background:var(--accent);color:var(--button-text);padding-block:106px 78px}
.manifesto h2{font-size:clamp(42px,5.1vw,78px);line-height:1.3;letter-spacing:-.025em;max-width:19ch}
.manifesto h2 span{display:inline-block;background:var(--button-text);color:var(--accent);border-radius:12px;padding-inline:14px;transform:rotate(-2deg);margin-top:10px;margin-left:12px}
.manifesto p{color:#f6d5dc;font-size:14px;line-height:2;margin-top:33px;position:relative;z-index:1}
.manifesto-type{font:700 clamp(64px,11vw,172px)/1 Exhibition,sans-serif;white-space:nowrap;color:rgba(255,235,240,.12);letter-spacing:-.015em;position:relative;left:16%;margin-top:40px}
.manifesto-type::before{content:'FORM / FEEL / FUNCTION'}
.about{padding-top:118px;padding-bottom:98px}
.about-top{display:grid;grid-template-columns:1.1fr 1fr;gap:90px}
.about h2{font-size:clamp(52px,5.8vw,78px);line-height:1.2}
.about h2>span{display:block;font:700 clamp(48px,5.3vw,76px)/.92 Exhibition,sans-serif;letter-spacing:-.02em;margin-top:18px;color:var(--muted)}
.about-content{padding-top:4px}
.about-lead{font-family:ExhibitionCN,'Microsoft YaHei',sans-serif;font-size:24px;line-height:1.7;font-weight:500;margin-bottom:24px}
.about-content>p:not(.about-lead){color:var(--muted);font-size:14px;line-height:2;max-width:65ch}
.about-content>.text-link{margin-top:22px}
.about-practices{display:grid;grid-template-columns:1fr 1.4fr;align-items:center;gap:100px;margin-top:72px}
.practice-orbit{position:relative;width:310px;max-width:100%;aspect-ratio:1;display:grid;place-items:center;margin-inline:auto}
.orbit-ring{position:absolute;inset:0;border:1px dashed var(--line);border-radius:50%;animation:orbit 26s linear infinite}
.orbit-node{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--accent-ink)}
.node-ui{left:calc(50% - 7px);top:-7px}
.node-ip{right:13px;bottom:63px}
.node-brand{left:13px;bottom:63px}
.practice-orbit p{text-align:center}
.practice-orbit strong{display:block;font:700 110px/1 Exhibition,sans-serif}
.practice-orbit p>span{font-size:13px;color:var(--muted);display:block;margin-top:13px}
.direction-list{display:grid;gap:14px}
.direction{padding:21px 24px;border-radius:var(--radius);display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 20px;background:var(--raised);transition:background .4s,color .3s,transform .4s var(--ease)}
.direction h3{font-size:23px}
.direction p{font-size:13px;color:var(--muted);grid-column:1;transition:color .3s}
.direction>span{grid-column:2;grid-row:1/3;font-size:12px}
.direction:is(:hover,:focus-visible){background:var(--accent);color:var(--button-text);transform:translateX(9px)}
.direction:is(:hover,:focus-visible) p{color:#f6d5dc}
.contact{padding-top:85px;padding-bottom:72px;border-top:1px solid var(--line)}
.contact h2{font-size:clamp(38px,5.1vw,70px);letter-spacing:-.025em;line-height:1.3}
.contact h2 span{color:var(--accent-ink)}
.contact-bottom{display:flex;justify-content:space-between;gap:35px;align-items:center;margin-top:36px}
.contact-bottom p{color:var(--muted);font-size:14px}
.contact-actions{display:flex;align-items:center;gap:28px;margin-top:24px}
.email-link{font:700 clamp(30px,3.5vw,50px)/1.2 Exhibition,sans-serif;letter-spacing:-.01em;white-space:nowrap}
.email-link:hover{color:var(--accent-ink)}
.contact .copy-status{min-height:25px;margin-top:12px;font-size:13px}
.contact-resume{padding:20px 34px;min-height:64px}
.site-footer{padding-block:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;font-size:11px;color:var(--muted)}
.site-footer a{margin-left:auto}
.site-footer .site-filing{flex-basis:100%;margin:0;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1.6;text-decoration:underline;overflow-wrap:anywhere}
.site-footer a:hover,.motion-control:hover{color:var(--text)}
.motion-control{min-height:44px;padding-inline:10px;font-size:11px}
.noscript{padding:32px;text-align:center}
/* Reading surfaces deliberately keep the chapter art quiet and at original aspect ratio. */
.case-main{padding-top:52px;min-height:70dvh;--case-ink:var(--project-ink,var(--accent-ink))}
:root[data-theme=light] .case-main{--case-ink:var(--project-light-ink,var(--accent-ink))}
.back-link{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;min-height:44px}
.back-link:hover{color:var(--case-ink)}
.case-heading{margin-top:28px;margin-bottom:35px;padding-top:25px;border-top:1px solid var(--project-accent,var(--line))}
.case-heading h1{font-size:clamp(34px,5.4vw,78px);letter-spacing:-.025em;line-height:1.3}
.case-type{color:var(--case-ink);font-size:14px;margin-top:15px}
.case-description{font-size:15px;line-height:1.95;color:var(--muted);max-width:64ch;margin-top:25px}
.case-focus{margin-top:20px;display:flex;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.case-cover{max-height:630px;overflow:hidden;border-radius:var(--radius);background:var(--raised);margin-bottom:56px}
.case-cover img{width:100%;height:auto;max-height:630px;object-fit:cover;object-position:center 14%}
.case-reader{display:grid;grid-template-columns:200px minmax(0,1fr);gap:45px;align-items:start}
.chapter-nav{position:sticky;top:108px;padding-bottom:24px;max-height:calc(100dvh - 130px);overflow-y:auto;scrollbar-width:thin}
.chapter-nav h2{font-size:16px;margin-bottom:18px}
.chapter-nav nav{display:grid;gap:5px}
.chapter-nav a{display:flex;align-items:center;font-size:12px;line-height:1.5;min-height:44px;padding:9px 12px;border-radius:8px;color:var(--muted)}
.chapter-nav a:hover{color:var(--text);background:var(--raised)}
.chapter-nav a[aria-current=true]{color:var(--case-ink);background:var(--raised)}
.chapter-hint{font-size:11px;color:var(--muted);margin-top:22px;line-height:1.8}
.case-chapter{margin-bottom:48px;scroll-margin-top:110px;min-width:0}
.chapter-heading{display:flex;align-items:center;gap:20px;justify-content:space-between;margin-bottom:15px}
.chapter-heading h2{font-size:18px}
.chapter-heading button{font-size:12px;min-height:44px;line-height:1.8;white-space:nowrap;border-bottom:1px solid var(--line);padding:4px 0}
.chapter-heading button:hover{color:var(--case-ink);border-color:var(--project-accent)}
.chapter-art{border-radius:10px;overflow:hidden;background:var(--raised);position:relative}
.chapter-art button{display:block;width:100%;padding:0;text-align:left;border-radius:0}
.chapter-art button:focus-visible{outline-offset:-4px;position:relative;z-index:1}
.chapter-art img{width:100%;height:auto;aspect-ratio:var(--asset-ratio);background:var(--raised)}
.next-project{border-top:1px solid var(--project-accent,var(--line));margin-top:45px;padding-block:42px 65px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.next-project p{font-size:12px;color:var(--muted);margin-top:10px}
.next-project h2{font-size:28px}
.next-project .text-link{flex:none}
.error-content{min-height:50dvh;padding-top:45px}
.error-content h1{font-size:32px}
.error-content p{color:var(--muted);margin-block:20px}
.image-error{padding:25px;background:var(--raised);color:var(--text);font-size:13px;text-align:center}
.image-error button,.image-error a{margin:8px;border-bottom:1px solid var(--text);min-height:44px}
.image-viewer{padding:0;border:0;background:var(--surface);color:var(--text);width:calc(100vw - 32px);max-width:1700px;height:calc(100dvh - 32px);max-height:none;border-radius:var(--radius);overflow:hidden}
.image-viewer::backdrop{background:rgb(16 16 20 / .86)}
.viewer-toolbar{height:64px;border-bottom:1px solid var(--line);padding:10px 22px;display:flex;align-items:center;gap:20px;justify-content:space-between}
.viewer-toolbar>p{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32%}
.viewer-actions{display:flex;gap:9px;align-items:center;font-size:12px;white-space:nowrap}
.viewer-actions button,.viewer-actions a{padding:7px 11px;min-height:44px;border-radius:8px;display:inline-flex;align-items:center}
.viewer-actions button:hover,.viewer-actions a:hover{background:var(--raised)}
#viewer-close{background:var(--text);color:var(--surface);margin-left:8px}
.viewer-scroll{height:calc(100% - 64px);overflow:auto;overscroll-behavior:contain;padding:26px;background:var(--raised);touch-action:pan-x pan-y}
.viewer-scroll img{max-width:none;margin-inline:auto;width:var(--viewer-width,100%);height:auto}
.viewer-actions output{min-width:42px;text-align:center;font-variant-numeric:tabular-nums}
.resume-main{padding-block:55px 85px;display:grid;grid-template-columns:260px minmax(0,850px);gap:80px;align-items:start}
.resume-heading{position:sticky;top:125px}
.resume-heading h1{font-size:42px;line-height:1.3}
.resume-heading p{font-size:14px;color:var(--muted);margin-top:18px}
.resume-actions{display:flex;align-items:flex-start;flex-direction:column;gap:20px;margin-top:30px}
.resume-sheet img{width:100%;height:auto;border-radius:8px}
.resume-sheet figcaption{font-size:12px;color:var(--muted);margin-top:16px}
.loading-copy{padding:70px 0;color:var(--muted)}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes name-enter{from{opacity:.8;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes art-enter{from{opacity:.72;translate:0 48px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:no-preference){.hero-name{animation:name-enter .9s var(--ease) both}.hero-bio{animation:name-enter .85s .08s var(--ease) both}.hero-piece{animation:art-enter 1.1s .12s var(--ease) both}.hero-alt{animation-delay:.23s}.hero-arcel{animation-delay:.34s}.filter-enter{animation:name-enter .5s var(--ease) both}}
@media(min-width:1600px){.hero{padding-top:48px}.hero-intro{margin-bottom:40px}.hero-stage{--stage-height:360px}}
@media(max-width:1279px){.wrap{width:calc(100% - 80px)}.hero-intro{gap:38px}.hero-name{font-size:98px}.hero-cn{font-size:31px;left:calc(100% + 20px)}.hero-stage{gap:28px;--stage-height:clamp(244px,34dvh,320px)}.hero-arcel{margin-top:42px}.project-caption h2{font-size:16px}.hero-piece .enter-label{font-size:11px}.work-grid{column-gap:32px}.about-top{gap:50px}.about-practices{gap:60px}.case-reader{grid-template-columns:170px minmax(0,1fr);gap:30px}.resume-main{gap:45px;grid-template-columns:230px minmax(0,1fr)}}
@media(max-width:1023px){.site-header{gap:13px;padding-left:20px;width:calc(100% - 48px)}.site-header nav{gap:18px}.nav-resume{padding-inline:18px}.hero-name{font-size:88px}.hero-cn{position:static;display:block;font-size:28px;margin-top:15px}.hero-bio{padding-bottom:0}.hero-practices{font-size:25px}.hero-stage{gap:22px;--stage-height:220px}.hero-piece .enter-label{display:none}.hero-alt .long-name{display:none}.about-practices{gap:40px;grid-template-columns:1fr 1.2fr}.practice-orbit{width:260px}.about-lead{font-size:21px}.direction{padding:20px}.direction h3{font-size:20px}.case-reader{grid-template-columns:145px minmax(0,1fr);gap:25px}.chapter-nav a{padding:8px;font-size:11px}.resume-main{gap:30px;grid-template-columns:190px minmax(0,1fr)}}
@media(max-width:767px){
:root{--header-height:72px}html{scroll-padding-top:96px}.wrap{width:calc(100% - 40px)}
.site-header{width:calc(100% - 24px);height:58px;top:10px;margin-top:10px;padding:6px 7px 6px 16px;gap:8px}
.identity{gap:7px;font-size:12px}.identity-mark{font-size:26px}.identity>span:not(.identity-mark){display:none}
.site-header nav{gap:13px}.site-header nav a{font-size:12px}
.site-header nav a[href='#contact'],.site-header nav a[href$='#contact'],.site-header nav a[href='resume.html']{display:none}
.nav-resume{min-height:44px;padding:8px 15px;font-size:12px}.theme-control{font-size:10px;min-width:40px;min-height:44px;padding:5px}
.pointer-halo{display:none}.hero{padding-top:30px;padding-bottom:42px}
.hero-wall{--wall-size:155px;top:80px;right:-75px;opacity:.6;line-height:.92;height:calc(var(--wall-size)*1.9)}
.hero-intro{display:block;margin-bottom:32px;position:relative}
.hero-intro h1{max-width:100%;width:100%;display:block}.hero-name{font-size:clamp(68px,19vw,102px);line-height:.87}
.hero-cn{position:absolute;left:auto;right:0;top:7px;margin-top:0;font-size:27px}
.hero-bio{justify-self:initial;padding-top:23px;position:relative}
.hero-practices{font-size:23px;margin-bottom:10px}.hero-practices span{margin-inline:7px}
.hero-bio>p:not(.hero-practices){font-size:12px;line-height:1.85}
.hero-bio .hero-statement{margin-top:7px;max-width:70%}
.resume-intro{position:absolute;right:0;bottom:0;margin-top:0;font-size:12px;min-height:44px}
.hero-stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto;gap:24px 16px;padding:0 4px;--stage-height:initial}
.hero-piece{margin-top:0;min-width:0}.hero-echo{grid-column:1/span 6;grid-row:1;--piece-rotation:-4deg}.hero-alt{grid-column:7/span 6;grid-row:1;margin-top:20px;--piece-rotation:3deg}.hero-arcel{grid-column:4/span 7;grid-row:2;--piece-rotation:-3deg}
.hero-image,.hero-alt .hero-image,.hero-arcel .hero-image{height:auto;aspect-ratio:1.28;border-radius:12px}
.hero-echo .hero-image{aspect-ratio:1.08}.hero-alt .hero-image{aspect-ratio:1.1}.hero-arcel .hero-image{aspect-ratio:1.5}
.hero-echo img{object-position:52% 50%}.hero-arcel img{object-position:66% 50%}
.hero-stage .project-caption{margin-top:10px;padding-top:9px;gap:0}
.hero-stage .project-caption h2{font-size:15px}.hero-stage .project-caption p{font-size:11px;margin-top:3px}
.hero-stage .enter-label{display:none}.hero-alt .long-name{display:none}
.hero-piece:is(:hover,:focus-visible){transform:translateY(-5px) rotate(0)}
.marquee{padding-block:14px}.marquee-track>span{font-size:23px;gap:25px;padding-right:25px}
.works{padding-top:70px;padding-bottom:75px}.works-heading h2{gap:30px;align-items:center}.title-zh{font-size:43px}.title-zh>span{margin-left:.6em}.title-en{font-size:42px}.heading-note{font-size:12px;line-height:1.9;margin-top:22px}
.filter-row{margin-top:24px;margin-bottom:30px;gap:12px;align-items:flex-start;flex-direction:column;padding-bottom:15px}
.filters{gap:4px;flex-wrap:nowrap;width:100%;justify-content:space-between}.filters button{font-size:11px;padding:9px 10px}.result-count{font-size:11px;align-self:flex-end}
.work-grid{grid-template-columns:1fr;row-gap:30px}.work-piece,.work-piece:nth-child(n),.work-piece:last-child:nth-child(odd){grid-column:auto;margin-top:0}
.work-image,.work-piece:nth-child(n) .work-image{aspect-ratio:1.35;border-radius:12px}.work-info{margin-top:13px;padding:15px 13px 18px}
.work-info .project-caption h3{font-size:20px}.project-caption p{font-size:11px}.enter-label{font-size:11px}.work-description{font-size:12px;line-height:1.9;margin-top:10px}
.manifesto{padding-block:64px 45px}.manifesto h2{font-size:clamp(30px,8.4vw,44px);line-height:1.4}.manifesto h2 span{padding-inline:8px;margin-top:6px;border-radius:8px}.manifesto p{font-size:12px;line-height:1.95;margin-top:26px}.manifesto-type{font-size:67px;margin-top:30px;left:5%}
.about{padding-top:70px;padding-bottom:64px}.about-top{display:block}.about h2{font-size:48px}.about h2>span{font-size:54px;margin-top:18px;line-height:.94}
.about-content{padding-top:30px}.about-lead{font-size:20px;margin-bottom:18px}.about-content>p:not(.about-lead){font-size:13px}
.about-content>.text-link{font-size:13px;margin-top:16px}.about-practices{display:flex;flex-direction:column;gap:35px;margin-top:38px}
.practice-orbit{width:235px}.practice-orbit strong{font-size:94px}.practice-orbit p>span{font-size:12px}.direction-list{width:100%;gap:12px}
.direction{padding:20px;gap:6px 12px}.direction h3{font-size:21px}.direction p{font-size:11px}.direction>span{font-size:11px}
.contact{padding-top:52px;padding-bottom:45px}.contact h2{font-size:clamp(28px,8.1vw,42px)}.contact-bottom{display:block;margin-top:28px}
.contact-bottom p{font-size:12px;line-height:1.8}.contact-actions{margin-top:18px;gap:16px;flex-wrap:wrap}.email-link{font-size:34px}.text-link{font-size:12px}
.contact-resume{min-height:50px;padding:12px 25px;margin-top:10px}.site-footer{font-size:10px;gap:12px;flex-wrap:wrap;padding-block:15px}.motion-control{font-size:10px;padding-inline:0}
.case-main{padding-top:30px}.case-heading{margin-top:19px;margin-bottom:24px;padding-top:20px}.case-heading h1{font-size:35px}
.case-type{font-size:12px;margin-top:12px}.case-description{font-size:13px;margin-top:20px;line-height:1.9}.case-focus{gap:9px 16px;font-size:11px}
.case-cover{margin-bottom:25px;border-radius:10px}.case-cover img{min-height:220px;max-height:340px;object-fit:cover;object-position:center top}
.case-reader{display:block}.chapter-nav{position:sticky;top:78px;z-index:var(--layer-nav);overflow:visible;max-height:none;background:var(--surface);padding:12px 0 10px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.chapter-nav h2,.chapter-hint{display:none}.chapter-nav nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:3px;overscroll-behavior-x:contain}
.chapter-nav a{white-space:nowrap;flex:none;padding:8px 12px;font-size:11px;border:1px solid var(--line);border-radius:999px;min-height:40px}
.case-chapter{scroll-margin-top:155px;margin-bottom:32px}.chapter-heading{gap:14px;margin-bottom:12px}.chapter-heading h2{font-size:16px}.chapter-heading button{font-size:11px;min-height:40px}.chapter-art{border-radius:8px}
.next-project{padding-block:30px 45px;margin-top:30px}.next-project h2{font-size:23px}.next-project p{font-size:11px}
.image-viewer{width:100vw;height:100dvh;max-height:none;border-radius:0;margin:0}
.viewer-toolbar{height:auto;min-height:112px;align-items:flex-start;flex-direction:column;gap:6px;padding:14px 16px}.viewer-toolbar>p{max-width:100%;font-size:12px}
.viewer-actions{width:100%;gap:2px;justify-content:space-between;font-size:11px;flex-wrap:wrap}.viewer-actions button,.viewer-actions a{padding:8px 7px;min-height:40px}
.viewer-actions output{min-width:36px}.viewer-actions #zoom-reset{display:none}#viewer-close{margin-left:2px}.viewer-scroll{height:calc(100% - 112px);padding:14px}
.resume-main{display:block;padding-block:32px 55px}.resume-heading{position:static;margin-bottom:28px}.resume-heading h1{font-size:32px}.resume-heading p{font-size:12px;margin-top:12px}
.resume-actions{flex-direction:row;align-items:center;gap:22px;margin-top:24px}.resume-sheet figcaption{font-size:11px}
}
@media(max-width:374px){.site-header{gap:5px;padding-left:13px}.site-header nav{gap:10px}.wrap{width:calc(100% - 32px)}.nav-resume{padding-inline:12px}.filters button{padding-inline:7px}.hero-cn{font-size:23px}.hero-stage{gap:21px 13px}.hero-stage .project-caption h2{font-size:13px}.hero-bio .hero-statement{max-width:65%}.works-heading h2{gap:24px}.title-zh{font-size:38px}.title-en{font-size:36px}.direction{padding:18px 15px}.direction p{font-size:10px}.email-link{font-size:30px}}
@media(min-width:768px) and (max-height:780px){.hero{padding-top:28px;padding-bottom:42px}.hero-name{font-size:94px}.hero-intro{margin-bottom:27px}.hero-stage{--stage-height:230px}.hero-arcel{margin-top:38px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.pointer-halo{display:none}}
.motion-paused .hero-name,.motion-paused .hero-bio,.motion-paused .hero-piece,.motion-paused .filter-enter{animation:none!important}
@media(prefers-reduced-transparency:reduce){.site-header{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@supports not (backdrop-filter:blur(1px)){.site-header{background:var(--surface)}}
@media print{.site-header,.site-footer,.resume-heading,.skip,.pointer-halo{display:none}.resume-main{display:block;margin:0;padding:0;width:100%}.resume-sheet img{width:100%;border-radius:0}.resume-sheet figcaption{display:none}body{background:#fff}}