:root{color-scheme:light;--ink:#1b1b1b;--muted:#777;--line:#dededb;--paper:#fff;--soft:#f3f3f0;font-family:Arial,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0}body:has(dialog[open]){overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #525d3c;outline-offset:5px}button:hover,a:hover{text-decoration:none}.site-header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 3.1%;border-bottom:1px solid var(--line);background:#fff;position:relative;z-index:2}.brand{display:flex;align-items:center;gap:21px}.brand-cn{font-size:2.45rem;font-weight:650;letter-spacing:.07em;line-height:1}.brand-en{font-size:1.8rem;letter-spacing:-.055em;font-weight:650;line-height:1}.brand-sub{display:block;font-size:.625rem;letter-spacing:.17em;font-weight:400;margin-top:9px}.main-nav{display:flex;gap:34px;align-items:center}.nav-link{display:flex;align-items:baseline;gap:7px;font-size:.875rem;position:relative;line-height:1.5;padding:10px 0}.nav-link span{font-size:.75rem;color:#71716e}.nav-link:after{content:"";position:absolute;bottom:4px;left:0;width:0;height:1px;background:var(--ink);transition:width .2s}.nav-link:hover:after,.nav-link.active:after{width:100%}.toolbar{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 3.1%;background:#fff}.toolbar h1{font-size:.875rem;font-weight:400;margin:0;white-space:nowrap}.toolbar h1 #result-count{font-size:.75rem;color:var(--muted);margin-left:9px;vertical-align:super}.filters{display:flex;align-items:center;gap:28px}.filter{font-size:.875rem;white-space:nowrap;color:#73736f;padding:9px 0;line-height:1.6}.filter span{margin-left:5px;font-size:.8rem}.filter.active{color:var(--ink)}.filter.active:before{content:"(";margin-right:4px}.filter.active:after{content:")";margin-left:4px}.filter:hover{color:var(--ink)}.view-switch{display:flex;gap:14px}.view-button{width:30px;height:36px;display:grid;place-items:center;opacity:.35}.view-button.active,.view-button:hover{opacity:1}.view-button svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.2;fill:none}.projects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}.project{position:relative;display:block;width:100%;aspect-ratio:1/1.08;text-align:left;overflow:hidden;background:#e8e6e2;color:#fff}.project img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .75s cubic-bezier(.2,.7,.3,1),filter .4s}.project:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.56));opacity:0;transition:opacity .35s}.project:hover img{transform:scale(1.035)}.project:hover:after,.project:focus-visible:after{opacity:1}.project-caption{position:absolute;z-index:1;bottom:25px;left:25px;right:25px;display:flex;justify-content:space-between;align-items:flex-end;opacity:0;transform:translateY(7px);transition:opacity .3s,transform .3s}.project:hover .project-caption,.project:focus-visible .project-caption{opacity:1;transform:translateY(0)}.project-title{font-size:1.2rem;font-weight:400;display:block;margin-bottom:7px;letter-spacing:.04em}.project-category{font-size:.75rem;opacity:.9;display:block}.project-arrow{font-size:1.5rem}.project-number{position:absolute;top:23px;left:25px;z-index:1;font-size:.75rem;opacity:0;transition:opacity .3s}.project:hover .project-number,.project:focus-visible .project-number{opacity:1}.projects.list-view{display:flex;flex-direction:column;padding:0 3.1%;gap:0}.list-view .project{background:white;color:var(--ink);aspect-ratio:auto;height:auto;min-height:112px;display:grid;grid-template-columns:max-content 115px minmax(0,1fr);gap:clamp(1rem,2.5vw,2.2rem);align-items:center;padding:12px 0;border-top:1px solid var(--line);overflow:visible}.list-view .project:last-child{border-bottom:1px solid var(--line)}.list-view .project img{grid-column:2;grid-row:1;height:88px;width:115px;margin:0;object-fit:cover}.list-view .project:after{display:none}.list-view .project-caption{position:static;grid-column:3;grid-row:1;opacity:1;transform:none;display:flex;align-items:center;min-width:0;gap:1.25rem;margin:0}.list-view .project-caption>span:first-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:1.5rem;flex:1;min-width:0;overflow-wrap:anywhere}.list-view .project-title{margin:0;font-size:1.1rem}.list-view .project-category{font-size:.875rem;color:var(--muted)}.list-view .project-number{position:static;grid-column:1;grid-row:1;opacity:1;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}.list-view .project-arrow{margin-right:15px}.studio-note{padding:84px 3.1% 90px;display:grid;grid-template-columns:1fr 1.4fr .6fr;align-items:center;gap:24px}.eyebrow{font-size:.75rem;letter-spacing:.07em;line-height:1.6}.studio-note h2{font-size:2.25rem;letter-spacing:.04em;font-weight:400;margin:0}.text-link{font-size:.875rem;display:inline-flex;gap:22px;align-items:center;width:fit-content}.text-link:hover{text-decoration:underline;text-underline-offset:5px}.studio-note .text-link{justify-self:end}.site-footer{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:25px 3.1%;border-top:1px solid var(--line);font-size:.75rem;line-height:1.7;color:var(--muted)}.site-footer a,.site-footer button{font-size:.75rem}.skip-link{position:fixed;top:-100px;left:20px;z-index:20;background:white;padding:15px}.skip-link:focus{top:15px}.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}dialog{padding:0;border:0;color:var(--ink);background:#fff;max-width:none;max-height:none}dialog::backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(4px)}.detail-dialog{width:100vw;height:100dvh;margin:0}.info-dialog{width:min(920px,94vw);max-height:94dvh;margin:auto;overflow:auto}.dialog-top{height:84px;padding:0 3.1vw;display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid var(--line)}.dialog-brand{font-weight:600;font-size:1.15rem;letter-spacing:-.03em}.dialog-top>span:not(.dialog-brand){font-size:.75rem;letter-spacing:.06em;color:var(--muted)}.close-button{display:flex;gap:16px;align-items:center;font-size:.875rem;padding:12px 0}.close-button span{font-size:1.8rem;line-height:1}.detail-body{display:grid;grid-template-columns:65% 35%;min-height:calc(100dvh - 160px)}.detail-visual{background:var(--soft);display:grid;place-items:center;padding:36px;position:relative}.detail-visual img{display:block;width:100%;max-height:calc(100dvh - 235px);object-fit:contain}.detail-info{padding:62px 12% 40px;display:flex;flex-direction:column;align-items:flex-start}.detail-info .eyebrow{color:var(--muted);margin:0 0 30px}.detail-info h2{font-size:2.5rem;font-weight:400;letter-spacing:.03em;margin:0 0 10px;line-height:1.3}.english-title{font-size:.875rem;letter-spacing:.02em;color:var(--muted);margin:0 0 44px}.detail-description{font-size:1rem;line-height:1.9;margin:0 0 35px}.project-facts{width:100%;border-top:1px solid var(--line);margin:0 0 36px}.project-facts>div{display:flex;gap:20px;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);font-size:.875rem}.project-facts dt{color:var(--muted)}.project-facts dd{margin:0;text-align:right}.project-disclaimer{font-size:.75rem;line-height:1.7;color:var(--muted);margin-top:auto}.project-disclaimer a{text-decoration:underline;text-underline-offset:3px}.project-pagination{min-height:76px;padding:16px 3.1%;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:.875rem}.project-pagination>span{color:var(--muted);font-size:.75rem}.project-pagination button{padding:12px 0}.info-content{padding:65px 7% 70px}.info-content .eyebrow{color:var(--muted);margin:0 0 35px}.info-content h2{font-size:2.8rem;font-weight:400;line-height:1.35;letter-spacing:.02em;margin:0 0 40px}.info-copy{max-width:650px;font-size:1rem;line-height:2;color:#4d4d49}.info-copy p{margin:0 0 20px}.info-footnote{font-size:.75rem;color:var(--muted);margin:40px 0 0;line-height:1.8}.service-list{margin-top:45px}.service-row{padding:25px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:45px 1fr 1fr;gap:20px;align-items:start}.service-row>span{font-size:.75rem;color:var(--muted);padding-top:4px}.service-row h3{font-size:1.2rem;font-weight:400;margin:0}.service-row p{font-size:.875rem;line-height:1.8;color:var(--muted);margin:0}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}.contact-grid h3{font-size:.875rem;font-weight:400;margin:0 0 18px}.contact-grid p{font-size:1rem;line-height:1.8;color:var(--muted);margin:0}.credit-list{list-style:none;padding:0;margin:0}.credit-list li{display:flex;justify-content:space-between;gap:24px;padding:17px 0;border-top:1px solid var(--line);font-size:.875rem;line-height:1.6}.credit-list a{text-decoration:underline;text-underline-offset:4px}.noscript{padding:40px}.project[hidden]{display:none}
@media(min-width:1700px){.project{aspect-ratio:1.1/1}.site-header{height:110px}.toolbar{min-height:76px}}
@media(max-width:1100px){.main-nav{gap:24px}.nav-link{flex-direction:column;gap:2px}.toolbar{gap:18px}.filters{gap:20px}.toolbar h1{display:none}.projects{grid-template-columns:repeat(3,minmax(0,1fr))}.project:last-child:nth-child(3n + 2){grid-column:auto}.studio-note{grid-template-columns:1fr 1.8fr}.studio-note .text-link{grid-column:2;justify-self:start}.detail-body{grid-template-columns:58% 42%}.detail-info{padding:40px 9%}.detail-info h2{font-size:2rem}.detail-visual{padding:24px}.site-footer{flex-wrap:wrap}.site-footer span:nth-child(2){order:4;width:100%}}
@media(max-width:760px){html{scroll-padding-top:0}.site-header{height:84px;padding:0 5%}.brand{gap:11px}.brand-cn{font-size:1.85rem}.brand-en{font-size:1.35rem}.brand-sub{font-size:.47rem;letter-spacing:.07em;margin-top:7px}.main-nav{gap:19px}.nav-link{font-size:.875rem;padding:8px 0}.nav-link span{display:none}.nav-link[data-panel="services"]{display:none}.toolbar{padding:6px 5%;min-height:65px;gap:16px}.filters{gap:22px;overflow-x:auto;scrollbar-width:none;min-width:0;padding:5px 2px}.filters::-webkit-scrollbar{display:none}.filter{font-size:.875rem;min-height:40px}.filter span{display:none}.view-switch{flex-shrink:0;gap:6px}.view-button{width:26px;height:40px}.projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}.project{aspect-ratio:1/1.27}.project:after{opacity:.8;background:linear-gradient(transparent 58%,rgba(0,0,0,.5))}.project-caption{opacity:1;transform:none;left:16px;right:14px;bottom:17px}.project-title{font-size:1rem;margin-bottom:6px;letter-spacing:.02em}.project-category{font-size:.75rem}.project-arrow{font-size:1.1rem}.project-number{display:none}.studio-note{padding:52px 5% 58px;display:block}.studio-note .eyebrow{margin:0 0 24px;font-size:.75rem}.studio-note h2{font-size:1.85rem;line-height:1.5}.studio-note .text-link{margin-top:30px}.site-footer{padding:24px 5%;gap:19px;font-size:.75rem;justify-content:flex-start}.site-footer span:first-child{width:100%}.site-footer a:last-child{margin-left:auto}.site-footer span:nth-child(2){font-size:.75rem;line-height:1.8}.list-view .project{height:auto;min-height:105px;grid-template-columns:88px minmax(0,1fr);gap:20px}.list-view .project img{grid-column:1;grid-row:1;margin:0;width:88px;height:78px}.list-view .project-caption{grid-column:2;grid-row:1;margin:0;right:auto;gap:12px}.list-view .project-caption>span:first-child{display:block;width:auto}.list-view .project-title{font-size:1rem;margin-bottom:8px}.list-view .project-category{font-size:.75rem}.list-view .project-arrow{margin-right:4px}.projects.list-view{padding:0 5%}.dialog-top{height:73px;padding:0 5%;gap:12px}.dialog-top>span:not(.dialog-brand){display:none}.dialog-brand{font-size:1rem}.close-button{min-height:44px}.detail-body{display:block;min-height:0}.detail-visual{padding:0;min-height:0}.detail-visual img{width:100%;max-height:70dvh;object-fit:contain}.detail-info{padding:34px 6% 38px}.detail-info .eyebrow{margin-bottom:20px}.english-title{margin-bottom:25px}.detail-description{margin-bottom:24px}.project-facts{margin-bottom:24px}.project-disclaimer{margin-bottom:0}.project-pagination{padding:14px 6%;font-size:.875rem}.info-dialog{width:100vw;max-height:100dvh;height:100dvh;margin:0}.info-content{padding:40px 6%}.info-content h2{font-size:2.1rem;margin-bottom:26px}.info-content .eyebrow{margin-bottom:25px}.service-row{grid-template-columns:30px 1fr;gap:12px}.service-row p{grid-column:2}.contact-grid{grid-template-columns:1fr;gap:30px}.credit-list li{align-items:flex-start;flex-direction:column;gap:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Preserve the supplied wordmark and its original artwork. */
.brand{width:306px;height:47px;display:block;position:relative;overflow:hidden;flex-shrink:0}
.brand img{position:absolute;max-width:none;display:block;width:448px;height:auto;left:-71px;top:-6px}
@media(max-width:760px){.brand{width:193px;height:36px}.brand img{width:283px;left:-45px;top:-1px}.main-nav{gap:16px}.site-header{gap:15px}}
@media(max-width:380px){.brand{width:172px}.brand img{width:252px;left:-40px;top:1px}.main-nav{gap:13px}}

@media(max-width:360px){.brand{width:150px}.brand img{width:220px;left:-35px;top:4px}.main-nav{gap:10px}.site-header{gap:10px}}

/* CMS content keeps the original layout while allowing replacement assets. */
.brand.brand-contain img{position:static;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:left center}
.gallery-message{grid-column:1/-1;margin:0;padding:72px 5%;text-align:center;font-size:.875rem;color:var(--muted);width:100%}
.project-image-placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--muted);background:var(--soft);font-size:.875rem}
.list-view .project-image-placeholder{grid-column:2;grid-row:1;width:115px;height:88px}
.detail-visual.has-gallery{gap:24px;align-content:start}
.detail-body:has(.has-gallery) .detail-info{align-self:start}
.detail-image-placeholder{color:var(--muted);font-size:.875rem;padding:60px 20px}
.project-pagination button:disabled{cursor:default;opacity:.35}
#studio-line,.studio-note .eyebrow{white-space:pre-line;overflow-wrap:anywhere}
.project-title,.detail-info h2,.info-content h2,.detail-description,.info-copy,.service-row h3,.service-row p,.contact-grid p,.dialog-brand{overflow-wrap:anywhere}
@media(max-width:760px){.list-view .project-image-placeholder{grid-column:1;width:88px;height:78px}.detail-visual.has-gallery{gap:2px}}

/* Compact bilingual portfolio toolbar. */
.toolbar h1,.toolbar .filter{font-size:10px}
.toolbar .section-english,.toolbar .filter span{font-size:10px;letter-spacing:.02em;margin-left:6px;color:#81817d}
.toolbar h1 #result-count{font-size:10px;margin-left:8px}
.toolbar .filters{gap:24px}
@media(max-width:760px){.toolbar .filters{gap:18px}.toolbar .filter{font-size:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;line-height:1.5}.toolbar .filter span{display:block;font-size:10px;margin-left:0}.toolbar .filter.active:before,.toolbar .filter.active:after{content:none}.toolbar .filter.active{box-shadow:inset 0 -1px currentColor}}

/* Review refinements: compact toolbar and matching navigation type. */
.toolbar{min-height:46px;padding-top:3px;padding-bottom:3px;position:relative;justify-content:center}
.toolbar h1{display:none}
.toolbar .filters{gap:16px}
.toolbar .view-switch{position:absolute;right:3.1%}
.main-nav .nav-link,.main-nav .nav-link span{font-size:12px}
@media(max-width:760px){.toolbar{min-height:50px;justify-content:space-between;gap:10px}.toolbar .filters{gap:12px}.toolbar .view-switch{position:static}.main-nav .nav-link,.main-nav .nav-link span{font-size:12px}}

/* Full-page project viewer: image stage and quiet editorial sidebar. */
.detail-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#fff;overflow-y:auto}
.detail-dialog::backdrop{background:#fff}
.detail-dialog .dialog-top{height:100px;padding:0 3.1%;border-bottom:0;display:flex;justify-content:space-between}
.detail-dialog .detail-body{display:grid;grid-template-columns:minmax(0,3fr) minmax(280px,1fr);min-height:calc(100dvh - 155px);gap:0}
.detail-gallery{position:relative;min-width:0;padding:0 55px}
.detail-dialog .detail-visual{height:calc(100dvh - 145px);min-height:360px;padding:0;background:#fff;display:flex;align-items:center;justify-content:center;position:relative}
.detail-dialog .detail-visual img{width:100%;height:100%;max-height:none;object-fit:contain;display:block}
.image-position{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:#0007;color:white;padding:3px 7px;border-radius:3px;font-size:10px}
.image-arrow{position:absolute;top:46%;width:28px;height:28px;border-radius:50%;background:#898985;color:#fff;font-size:29px;line-height:22px;display:grid;place-items:center}
.image-prev{left:24px}.image-next{right:24px}
.gallery-copyright{text-align:center;font-size:10px;color:#aaa;margin:10px 0}
.detail-dialog .detail-info{padding:6px 8% 30px 2%;display:block}
.detail-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.detail-dialog .detail-info h2{font-size:14px;line-height:1.5;letter-spacing:0;margin:0;font-weight:400}
.detail-back{font-size:11px;min-height:24px;white-space:nowrap;color:#888;padding:0}
.detail-dialog .english-title{font-size:11px;margin:8px 0 28px;color:#888}
.detail-dialog .project-facts{margin:25px 0 36px}
.detail-dialog .project-facts>div{padding:9px 0;font-size:11px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.detail-dialog .project-facts dt{color:#aaa}.detail-dialog .project-facts dd{text-align:left}
.detail-dialog .detail-description{font-size:12px;line-height:2;margin:0 0 30px;color:#666}
.detail-dialog .project-disclaimer{font-size:10px;line-height:1.8;color:#999;margin:24px 0 0}
.detail-dialog .project-pagination{min-height:48px;font-size:11px;border-top:0}
@media(max-width:760px){.detail-dialog .dialog-top{height:84px;padding:0 5%}.detail-dialog .detail-body{display:block;min-height:0}.detail-gallery{padding:0 30px}.detail-dialog .detail-visual{height:60dvh;min-height:260px}.image-prev{left:3px}.image-next{right:3px}.detail-dialog .detail-info{padding:28px 6%}.detail-dialog .detail-info h2{font-size:14px}.detail-dialog .project-pagination{padding:10px 6%}}

/* Project card highlight: soft white veil and centered title. */
.projects:not(.list-view) .project:after{background:rgba(255,255,255,.72)}
.projects:not(.list-view) .project-caption{inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#151515;transform:none;padding:24px}
.projects:not(.list-view) .project-title{font-size:12px;font-weight:500;line-height:1.6;letter-spacing:.02em;margin:0}
.projects:not(.list-view) .project-category,.projects:not(.list-view) .project-arrow,.projects:not(.list-view) .project-number{display:none}
.projects:not(.list-view) .project:hover img{transform:none}
.projects:not(.list-view) .project:hover:after,.projects:not(.list-view) .project:focus-visible:after,.projects:not(.list-view) .project:active:after{opacity:1}
.projects:not(.list-view) .project:hover .project-caption,.projects:not(.list-view) .project:focus-visible .project-caption,.projects:not(.list-view) .project:active .project-caption{opacity:1}
@media(max-width:760px){.projects:not(.list-view) .project:after,.projects:not(.list-view) .project-caption{opacity:0}.projects:not(.list-view) .project-title{font-size:12px}}

/* Geometric chevrons remain centered regardless of font metrics. */
.image-arrow{font-size:0;line-height:1;padding:0;align-items:center;justify-content:center}
.image-arrow::before{content:"";display:block;width:8px;height:8px;border-top:2px solid #fff;border-right:2px solid #fff;transform:translateX(-2px) rotate(45deg)}
.image-prev::before{transform:translateX(2px) rotate(-135deg)}
.image-arrow{display:flex}

/* Minimal footer: copyright and back-to-top only. */
.site-footer{justify-content:space-between}.site-footer>[data-content="copyright"]{width:auto}.site-footer>a:last-child{margin-left:auto}

/* Seamless portfolio grid on desktop and mobile. */
.projects:not(.list-view){gap:0}