body.works-page{background:#171e28}
.works-navigation{position:sticky;top:0;z-index:20;background:#171e28;transform:translateY(0);transition:transform .32s cubic-bezier(.22,1,.36,1)}
.works-navigation.is-hidden{transform:translateY(-100%);pointer-events:none}
.works-navigation>header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;height:100px;min-height:100px;padding:0 5%;background:transparent}
.works-navigation>header .brand img{width:85px}
.works-navigation-inner{width:100%;max-width:1600px;margin:auto;padding:35px 5% 0}
.works-navigation-inner .works-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;border-bottom:1px solid #495343;margin-bottom:28px}
.works-navigation-inner .category-bar{margin:0;border-bottom:0}
.works-navigation-inner .room-title{margin:4px 0 0;font-size:10px;letter-spacing:.16em;color:#90998d;white-space:nowrap;line-height:1.6}
main.works-experience{width:100%;max-width:1600px;margin:auto;padding:35px 5% 80px}
body:has(.works-navigation) main.works-experience{padding-top:0}
.works-experience .category-bar{display:flex;justify-content:flex-end;align-items:stretch;gap:32px;margin:0 0 28px;border-bottom:1px solid #495343}
.works-experience .works-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;border-bottom:1px solid #495343;margin-bottom:28px}
.works-experience .works-toolbar .category-bar{margin:0;border-bottom:0}
.works-experience .room-title{margin:4px 0 0;font-size:10px;letter-spacing:.16em;color:#90998d;white-space:nowrap;line-height:1.6}
@media(max-width:700px){.works-experience .works-toolbar{flex-wrap:wrap;gap:20px;margin-bottom:24px}.works-experience .room-title{flex-basis:100%}.works-experience .works-toolbar .category-bar{margin-left:auto}}
.works-experience .category-bar button{appearance:none;background:none;border:0;border-bottom:1px solid transparent;border-radius:0;color:#9ba497;font:inherit;text-align:left;min-width:0;line-height:1.6;padding:4px 0 17px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;transition:color .35s ease}
.works-experience .category-number{font-size:9px;letter-spacing:.14em;opacity:.75;margin-bottom:8px}
.works-experience .category-name{font-family:var(--font-title);font-size:18px;font-weight:400;letter-spacing:.04em;line-height:1.35;white-space:nowrap;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.works-experience .category-english{font-size:8px;letter-spacing:.08em;opacity:.6;margin-top:5px}
.works-experience .category-name{transform-origin:left center}
@media(hover:hover) and (pointer:fine){.works-experience .category-bar:hover button:not(:hover):not(:focus-visible) .category-name{transform:scale(.96)}.works-experience .category-bar button:hover .category-name,.works-experience .category-bar button:focus-visible .category-name{transform:translateY(-2px) scale(1.08)}}
.works-experience .category-bar button[aria-pressed=true]{color:#eff0e8;border-bottom-color:#d6dbd0}
.works-experience .category-bar button:hover{color:#fff}
.works-experience .category-bar button:focus-visible{outline:1px solid #d6dbd0;outline-offset:6px}
.works-experience .project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}
.works-experience .project-card{display:block;min-width:0;text-decoration:none;color:inherit}
.works-experience .project-card[hidden]{display:none}
.works-experience .featured-project{grid-column:1/-1}
.works-experience .featured-project .project-image{aspect-ratio:3/2}
.works-experience .project-card[href="projects/442.html"] img{object-position:center 60%}
.works-experience .project-card[href="projects/435.html"] img{object-position:center 45%}
.works-experience .project-card[href="projects/xinggou-kuala-lumpur.html"] img{object-position:center 40%}
.works-experience .project-card[href="projects/417.html"] img{object-position:70% center}
.works-experience .featured-project h2{font-size:17px}
.works-experience .project-image{aspect-ratio:3/2;overflow:hidden;background:#202834}
.works-experience .project-image img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .6s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.works-experience .project-card:hover img,.works-experience .project-card:focus-visible img{filter:grayscale(0);transform:scale(1.025)}
.works-experience .project-card:focus-visible{outline:1px solid #d6dbd0;outline-offset:6px}
.works-experience .project-card h2{font-family:var(--font-title);font-size:15px;font-weight:400;letter-spacing:.025em;line-height:1.8;margin:14px 0 0}
.works-experience .project-card p{font-size:10px;letter-spacing:.05em;color:#90998d;margin:5px 0 0}
html[lang=en] .works-experience .category-name{font-size:16px}
@media(max-width:700px){main.works-experience{padding:14px 6% 55px}.works-experience .category-bar{gap:20px;margin-bottom:24px;flex-wrap:wrap;row-gap:10px}.works-experience .category-bar button{padding:4px 0 14px}.works-experience .category-number{font-size:9px;margin-bottom:6px}.works-experience .category-name{font-size:15px;letter-spacing:.025em}.works-experience .category-english{display:none}.works-experience .project-grid{grid-template-columns:1fr;gap:30px}.works-experience .project-card h2{font-size:14px}html[lang=en] .works-experience .category-name{font-size:12px}}
@media(hover:none){.works-experience .project-image img{filter:none}}
@media(prefers-reduced-motion:reduce){.works-experience .project-image img{transition:none;transform:none!important}}
@media(prefers-reduced-motion:reduce){.works-experience .category-name{transition:none;transform:none!important}}
@media(max-width:700px){.works-navigation>header{grid-template-columns:auto 1fr;height:auto;min-height:120px;padding:22px 6% 14px;gap:18px 14px}.works-navigation>header .brand img{width:75px}.works-navigation-inner{padding:14px 6% 0}}
@media(prefers-reduced-motion:reduce){.works-navigation{transition:none}}
body.works-page main.works-experience{width:var(--page-width);max-width:none;padding-left:0;padding-right:0}
.works-navigation .works-navigation-inner{width:var(--page-width);max-width:none;padding-left:0;padding-right:0}
.works-experience .project-card[data-category="其他"] .project-image img{object-fit:contain}
.works-navigation>header{width:var(--page-width);max-width:none;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
@media(max-width:700px){.works-navigation .works-navigation-inner{padding-top:24px}.works-navigation-inner .room-title{margin-top:0;line-height:18px}}
