/* Figma 130:196 — 1920 × 3009. Shared navigation, cards and contact styles live in styles.css. */
.works-page{position:relative;isolation:isolate;min-height:100vh;background:var(--page) url('/media/img.webp') left top/200px 200px;color:var(--ink)}
.works-page:before,.works-page:after{content:'';position:absolute;left:0;right:0;z-index:-1;pointer-events:none;background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.works-page:before{top:0;height:56.25vw;background-image:url('/media/works-imgBg.webp')}
.works-page:after{bottom:0;height:47.8646vw;background-image:url('/media/works-imgBg1.webp')}
.works-page .header{position:relative;height:4.6875vw;min-height:76px;color:var(--ink)}
.works-intro{padding:7.8125vw var(--gutter) 6.25vw}
.works-intro h1{font-size:clamp(22px,1.77084vw,34px);line-height:1.25;font-weight:600}
.design-tags{display:flex;flex-wrap:wrap;list-style:none;gap:10px;margin-top:2.08333vw;padding:0}
.design-tags li{padding:0;border:0;background:transparent;white-space:nowrap}
.design-tags button{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid transparent;border-radius:8px;background:#ffffff66;color:inherit;font:inherit;font-size:14px;line-height:14px;cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s}
.design-tags button:hover:not(:disabled){transform:translateY(-1px);border-color:#0000001f}
.design-tags button[aria-pressed=true]{background:var(--ink);color:var(--page)}
.design-tags button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.design-tags button:disabled{cursor:not-allowed;opacity:.38}
.work-filter-status{margin:0 10.416667vw 24px;color:color-mix(in srgb,var(--ink) 55%,transparent);font-size:12px}
.works-empty{margin:0 10.416667vw;padding:80px 24px;border:1px dashed color-mix(in srgb,var(--ink) 18%,transparent);border-radius:12px;text-align:center}
.works-empty strong,.works-empty span{display:block}.works-empty span{margin-top:8px;color:color-mix(in srgb,var(--ink) 55%,transparent);font-size:12px}
.archive-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:6.25vw;row-gap:4.375vw;margin:0 10.416667vw}
.works-page .archive-card{position:static;width:100%;min-width:0;align-self:start;text-align:left}
.works-page .work-image{aspect-ratio:700/547;border-radius:12px}
.works-page .work-image img{width:100%;height:100%;object-fit:cover;object-position:var(--cover-x,50%) var(--cover-y,50%);transform:scale(var(--cover-zoom,1));transform-origin:var(--cover-x,50%) var(--cover-y,50%)}
.works-page .work-caption{margin-top:20px;font-size:16px;line-height:1.25;gap:16px}
.works-page .work-caption>span:first-child{max-width:none}
.works-page .work-caption>span:last-child{white-space:nowrap}
.works-page .footer{height:21.25vw;min-height:408px;margin:8.125vw var(--gutter) 3.125vw;padding:40px;border-radius:24px;background:#ffffff66}
.works-page .footer-bottom{left:40px;right:40px;bottom:40px}
.works-page .contact-links{font-size:16px;gap:40px;padding-top:0}
.works-page .wechat img{width:9.375vw;height:9.375vw}
.works-page .credits{font-size:16px}
.works-page .socials button{font-size:14px}
[data-mode=dark] .works-page:before,[data-mode=dark] .works-page:after{opacity:.4}
[data-mode=dark] .works-page .footer,[data-mode=dark] .design-tags button{background:#ffffff14;color:var(--ink)}
[data-mode=dark] .design-tags button[aria-pressed=true]{background:var(--ink);color:var(--page)}
@media(max-width:1400px){.works-page .footer-bottom{align-items:flex-start}.works-page .credits{flex-direction:column;gap:10px;line-height:1.4}.works-page .contact-links{gap:20px;font-size:14px}.works-page .socials{max-width:55%;justify-content:flex-end}.works-page .work-caption{font-size:14px}}
@media(max-width:900px){.works-page .footer{height:auto;min-height:440px;padding:28px}.works-page .footer-bottom{left:28px;right:28px;bottom:28px}.works-page .contact-links{max-width:none}.works-page .contact-row{flex-wrap:wrap}.works-page .wechat{margin-left:auto}.archive-grid{margin:0 var(--gutter);gap:48px 28px}}
@media(max-width:700px){.works-page:before{height:580px;background-size:auto 100%}.works-page:after{height:800px;background-size:auto 100%}.works-page .header{height:76px}.works-intro{padding:70px 24px 64px}.works-intro h1{max-width:350px;font-size:25px;line-height:1.6}.design-tags{margin-top:26px;gap:8px}.design-tags li{font-size:12px;line-height:14px;padding:9px 12px}.archive-grid{grid-template-columns:1fr;margin:0 24px;row-gap:44px}.works-page .work-caption{font-size:13px;margin-top:14px}.works-page .footer{margin:80px 12px 20px;padding:24px;min-height:0}.works-page .contact-row{flex-direction:column;gap:28px}.works-page .contact-links{font-size:12px;gap:18px}.works-page .wechat{margin:0;text-align:left}.works-page .wechat img{width:110px;height:110px}.works-page .footer-bottom{position:static;margin-top:70px;gap:28px;flex-direction:column-reverse}.works-page .socials{max-width:none;justify-content:flex-start}.works-page .socials button{font-size:12px}.works-page .credits{font-size:16px;line-height:1.6;gap:4px}}
@media(max-width:700px){.design-tags li{padding:0;background:transparent}}
/* Keep the gradient inside the page's box; prevent the footer margin collapsing outside it. */
.works-page{display:flow-root;padding-bottom:clamp(32px,3.125vw,60px)}
.works-page .footer{margin-bottom:0;border-radius:24px}
@media(min-width:1440px){
 .archive-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-inline:var(--gutter);column-gap:32px;row-gap:64px}
 .works-page .work-caption{font-size:14px}
}
@media(min-width:2000px){.archive-grid{max-width:1800px;margin-inline:auto;column-gap:40px}}

/* Dock shares navigation destinations; reserve space so it cannot cover footer text. */
.works-page .dock a[aria-label="首页"] img{width:62%;height:62%}
.works-page .dock a[aria-current="page"] img{filter:drop-shadow(0 0 4px #00cbdc);}
.works-page .footer-bottom{bottom:100px}
@media(max-width:700px){.works-page{padding-bottom:90px}.works-page .footer-bottom{position:static}}

/* The whole card ends above the dock, leaving the gradient visible between them. */
.works-page{padding-bottom:120px}
.works-page .footer{min-height:348px;height:calc(21.25vw - 60px)}
.works-page .footer-bottom{bottom:40px}
.works-page .dock a[aria-label="首页"] img{width:78%;height:82%}
.works-page .dock a[aria-current="page"] img{filter:none;width:110%;height:110%;max-width:none}
@media(max-width:900px){.works-page .footer{height:auto;min-height:400px}}
@media(max-width:700px){.works-page{padding-bottom:100px}.works-page .footer{min-height:0}.works-page .footer-bottom{position:static}}

/* Keep the shared footer navigation scale consistent on every route. */
.works-page .footer .contact-links,.works-page .footer .email-group,.works-page .footer .credits,.works-page .footer .socials :is(a,button){font-size:16px}

/* Filter chips share the appearance switch's liquid-glass selected states. */
.design-tags button{
 background:rgba(255,255,255,.38);
 border-color:rgba(255,255,255,.38);
 border-radius:10px;
 box-shadow:none;
 -webkit-backdrop-filter:blur(18px) saturate(150%);
 backdrop-filter:blur(18px) saturate(150%);
 color:var(--ink);
}
.design-tags button:hover:not(:disabled){border-color:rgba(255,255,255,.58);background:rgba(255,255,255,.48)}
.design-tags button[aria-pressed=true]{background:rgba(255,255,255,.76);border-color:rgba(255,255,255,.76);box-shadow:none;color:#111}
[data-mode=dark] .design-tags button{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);box-shadow:none;color:var(--ink)}
[data-mode=dark] .design-tags button:hover:not(:disabled){background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.18)}
[data-mode=dark] .design-tags button[aria-pressed=true]{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.28);box-shadow:none;color:var(--ink)}

@media(max-width:900px){
 .work-filter-status,.works-empty{margin-inline:var(--gutter)}
}
@media(max-width:700px){
 .design-tags button{padding:9px 12px;font-size:12px;line-height:14px}
 .work-filter-status,.works-empty{margin-inline:24px}
 .works-empty{padding-block:56px}
}