@font-face{font-family:Anton;src:url('assets/fonts/Anton-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'My Font';src:url('assets/details/MyFont-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--paper:#fff;--ink:#181818;--muted:#666;--line:#dedede;--soft:#f3f3f1;--gutter:clamp(20px,4vw,72px);--space:clamp(64px,8vw,120px)}
*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 Arial,'Microsoft YaHei','PingFang SC',sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit;color:inherit}a{color:inherit;text-decoration:none}button{border:0;background:none;cursor:pointer}img{max-width:100%;display:block;height:auto}h1,h2,h3,p,figure,dl,dd{margin:0}h1,h2,h3{font-weight:500;line-height:1.2}button,a,input{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:5px}a:hover{text-decoration:underline;text-underline-offset:5px}button:active,.pill:active{opacity:.72}::selection{background:#222;color:#fff}[hidden]{display:none!important}.skip-link{position:fixed;top:8px;left:8px;transform:translateY(-160%);padding:12px 18px;background:#111;color:#fff;z-index:20}.skip-link:focus{transform:none}
.portfolio-header,main,.portfolio-footer{width:calc(100% - var(--gutter)*2);max-width:1440px;margin-inline:auto}.portfolio-header{padding:28px 0;min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}.wordmark{display:flex;align-items:center;gap:20px}.wordmark:hover{text-decoration:none}.wordmark strong{font-family:Arial,sans-serif;font-size:19px;line-height:.86;letter-spacing:-1.3px;font-weight:900}.brand-cn{font-size:11px;color:var(--muted)}.portfolio-header nav{display:flex;gap:32px}.portfolio-header nav a{display:flex;gap:7px;align-items:center;min-height:44px;font-size:12px}.portfolio-header nav span{font-size:10px}.portfolio-header [aria-current=page]{text-decoration:underline;text-underline-offset:6px}
.eyebrow{font-size:11px;letter-spacing:.06em;line-height:1.6}.works-intro{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;padding:56px 0 72px;align-items:end}.works-intro h1{font-family:Anton,Arial,sans-serif;font-size:clamp(80px,9.2vw,142px);line-height:.97;letter-spacing:-.025em;font-weight:400;margin-top:20px}.title-count{font:14px/1 Arial,sans-serif;letter-spacing:0;display:inline-block;vertical-align:top;margin:14px 0 0 20px}.intro-copy{max-width:410px;margin-left:auto;padding:0 0 8px}.intro-copy .intro-cn{font-size:clamp(24px,2.2vw,34px);line-height:1.4;letter-spacing:-.04em;margin-bottom:22px}.intro-copy>p:not(.intro-cn){color:var(--muted);font-size:14px;line-height:1.85}.text-link{display:inline-flex;align-items:center;gap:38px;font-size:12px;min-height:44px;margin-top:24px;border-bottom:1px solid var(--ink)}.section-heading{border-top:1px solid var(--line);padding:26px 0 12px;display:flex;align-items:center;justify-content:space-between;gap:24px}.section-heading h2{font-size:26px;letter-spacing:-.035em}.section-heading h2 span{font-size:12px;color:var(--muted);letter-spacing:0}.section-heading>p{font-size:11px;color:var(--muted)}.filter-bar{display:flex;gap:24px;align-items:center;justify-content:space-between;margin-bottom:28px}.filters{display:flex;flex-wrap:wrap;gap:4px 22px}.filters button{padding:10px 0;min-height:44px;font-size:12px;color:var(--muted);border-bottom:1px solid transparent;white-space:nowrap}.filters button[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}.filters sup{font-size:9px;margin-left:6px}.result-count{font-size:11px;color:var(--muted);white-space:nowrap}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px;row-gap:56px}.work-card{min-width:0;scroll-margin-top:28px}.work-card>a{display:block}.work-card>a:hover{text-decoration:none}.work-image{position:relative;aspect-ratio:2/1;background:var(--soft);overflow:hidden;display:flex;align-items:center;justify-content:center}.work-image img{width:100%;height:100%;object-fit:contain;transition:opacity .2s}.work-card>a:hover img{opacity:.91}.open-project{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;border-radius:50%;width:38px;height:38px;background:#fff;color:#111;font-size:22px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}.work-card>a:hover .open-project,.work-card>a:focus-visible .open-project{opacity:1;transform:none}.work-caption{display:grid;grid-template-columns:24px 1fr 20px;gap:12px;margin-top:15px;align-items:start}.work-index{font-size:10px;color:var(--muted);padding-top:4px}.work-caption p{font-size:10px;color:var(--muted);line-height:1.6;margin-bottom:5px}.work-caption p span{color:#737373}.work-caption h3{font-size:23px;letter-spacing:-.035em}.work-caption>span:last-child{font-size:22px;line-height:1}.work-description{font-size:12px;color:var(--muted);max-width:510px;margin:10px 28px 0 36px;line-height:1.7}
.download-section{border-top:1px solid var(--line);margin-top:var(--space);padding:50px 0 0;display:grid;grid-template-columns:1fr 1.3fr;gap:24px 64px}.download-section>.eyebrow{grid-column:1/-1}.download-section h2{font-size:clamp(30px,3.5vw,48px);letter-spacing:-.05em;margin-bottom:14px}.download-section p:not(.eyebrow){color:var(--muted);font-size:14px}.download-links a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:18px}.download-links a:first-child{padding-top:0}.download-links small{display:block;font-size:11px;color:var(--muted);margin-top:5px}.download-links a>span:last-child{font-size:25px}
.portfolio-footer{margin-top:var(--space);border-top:1px solid var(--line);padding-top:70px}.contact-lead{text-align:center;padding-bottom:70px}.contact-lead h2{font-size:clamp(38px,5vw,72px);letter-spacing:-.06em;line-height:1.1;margin:22px 0}.pill{display:inline-flex;align-items:center;justify-content:center;gap:32px;min-height:44px;padding:10px 24px;background:var(--ink);color:#fff;border-radius:40px;font-size:12px}.pill:hover{text-decoration:none;background:#393939}.footer-meta{display:grid;grid-template-columns:1fr 1fr auto;border-top:1px solid var(--line);padding-top:24px;gap:24px;font-size:12px}.footer-meta>p{color:var(--muted)}.footer-meta button{display:flex;align-items:center;gap:12px;min-height:44px;padding:0;font-size:12px;text-align:left;overflow-wrap:anywhere}.footer-meta button span{color:var(--muted);font-size:10px}.footer-meta>a{min-height:44px}.copy-status{font-size:11px;color:var(--muted)}.footer-name{font-family:Anton,Arial,sans-serif;font-size:clamp(48px,14.6vw,225px);letter-spacing:-.035em;line-height:1;margin:42px 0 20px;white-space:nowrap}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0 26px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}
.case-breadcrumb{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:26px;font-size:12px;color:var(--muted)}.case-breadcrumb a{min-height:44px;display:flex;align-items:center}.case-opening{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:48px 0 64px}.case-opening h1{font-size:clamp(40px,5.4vw,82px);line-height:1.05;letter-spacing:-.055em;margin-top:20px;overflow-wrap:anywhere}.case-intro{font-size:17px;line-height:1.9;max-width:580px}.case-facts{margin-top:28px;font-size:12px;line-height:1.7}.case-facts>div{display:grid;grid-template-columns:82px 1fr;gap:24px;border-top:1px solid var(--line);padding:11px 0}.case-facts dt{color:var(--muted)}.case-main>.case-image{margin-bottom:88px}.case-section,.detail-row{display:grid;grid-template-columns:27% minmax(0,1fr);gap:48px;margin:0 0 88px;align-items:start;scroll-margin-top:32px}.case-rail,.detail-rail{min-width:0}.case-rail h2,.detail-note h2,.series-intro h2{font-size:26px;letter-spacing:-.035em;line-height:1.4;margin:0 0 18px}.case-rail h2 span{display:block;font-size:12px;color:var(--muted);letter-spacing:0;margin-top:10px}.case-rail p,.detail-note p,.series-intro p{font-size:14px;line-height:1.85;color:var(--muted);max-width:35em}.case-rail p+p{margin-top:16px}.case-images{display:flex;flex-direction:column;gap:36px;min-width:0}.case-image,.detail-media{min-width:0}.image-open{display:block;width:100%;padding:0;cursor:zoom-in;text-align:left}.image-open img{width:100%;height:auto;object-fit:contain}.image-open:hover img{opacity:.96}.media-caption{display:flex;justify-content:space-between;gap:18px;font-size:11px;color:var(--muted);margin-top:12px;line-height:1.6}.media-caption span:first-child{min-width:0}.media-caption span:last-child{white-space:nowrap}.retained-hero{margin:0 0 88px;padding-top:36px;border-top:1px solid var(--line)}.retained-hero .detail-media{width:73%;margin-left:auto}.case-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.case-screens,.ui-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;align-items:start}.case-screens figcaption,.ui-gallery figcaption{display:block}.case-screens figcaption span,.ui-gallery figcaption span{display:block}.case-screens img,.ui-gallery img,.ui-long img{background:#f3f3f1}.ui-long{max-width:460px;margin-inline:auto;width:100%}.media-narrow{max-width:480px;margin-inline:auto}.media-compact,.media-book{max-width:760px}.media-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.series-intro{padding-top:44px;border-top:1px solid var(--line)}.detail-category{font-size:12px;color:var(--muted)}.detail-video{width:100%;display:block;aspect-ratio:16/9;background:#111}.case-end{display:flex;justify-content:space-between;align-items:center;gap:36px;padding:36px 0;border-top:1px solid var(--line);font-size:13px}.case-end>a{min-height:44px}.case-end small{display:block;font-size:10px;color:var(--muted);margin-bottom:8px}.case-end strong{font-size:24px;font-weight:400}.case-end>a:last-child{text-align:right}.related-project{margin:60px 0;padding:30px;border:1px solid var(--line);font-size:14px}.related-project a{display:inline-flex;min-height:44px;align-items:center;text-decoration:underline;text-underline-offset:5px}.case-source{font-size:12px!important}
.font-specimen{font-family:'My Font',serif;font-weight:400;font-synthesis:none}.glyph-feature{font-size:clamp(70px,10vw,150px);display:flex;justify-content:space-between;gap:20px;line-height:1.3}.glyph-alphabet,.glyph-punctuation{font-size:clamp(24px,3vw,44px);overflow-wrap:anywhere;line-height:1.7;margin-top:24px}.glyph-copy{font-size:clamp(28px,4vw,56px);line-height:1.4;margin-top:36px}.font-play{border-block:1px solid var(--line);padding:32px 0;margin:0 0 88px}.font-play label{display:block;font-size:13px;margin-bottom:12px}.font-play input{width:100%;padding:20px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;font:clamp(30px,5vw,70px)/1.2 'My Font',serif;background:transparent;min-width:0}.font-play p{font-size:12px;color:var(--muted);margin:16px 0}.font-play .pill{margin-top:8px}
.image-viewer{border:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;background:var(--paper);color:var(--ink);overflow:hidden}.image-viewer::backdrop{background:rgba(0,0,0,.8)}.viewer-bar{height:72px;display:flex;align-items:center;gap:24px;padding:10px 24px;border-bottom:1px solid var(--line);font-size:12px}.viewer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.viewer-bar button,.viewer-bar a{min-height:44px;display:flex;align-items:center;white-space:nowrap;padding:6px 0}.viewer-stage{position:absolute;inset:72px 0 0;overflow:auto;padding:16px;overscroll-behavior:contain}.viewer-image{width:100%;height:100%;max-width:none;object-fit:contain;margin:0}.is-native .viewer-image{width:auto;height:auto;object-fit:initial;max-width:none}body.viewer-open{overflow:hidden}
.film-link{margin:-40px 0 80px}
@media(min-width:1000px){.case-rail{position:sticky;top:28px}.works-intro{padding:40px 0 48px}.works-intro h1{font-size:clamp(80px,8vw,128px)}}
@media(max-width:1000px){.brand-cn{display:none}.works-intro{gap:30px}.works-intro h1{font-size:10.5vw}.intro-copy .intro-cn{font-size:26px}.work-caption h3{font-size:20px}.work-grid{column-gap:24px}.case-section,.detail-row{grid-template-columns:26% minmax(0,1fr);gap:28px}.case-opening{gap:40px}.case-rail h2,.detail-note h2{font-size:23px}}
@media(max-width:700px){:root{--gutter:20px;--space:72px}.portfolio-header{min-height:85px;padding:18px 0;gap:16px}.wordmark strong{font-size:16px}.portfolio-header nav{gap:18px}.portfolio-header nav a{font-size:12px}.portfolio-header nav span{display:none}.works-intro{grid-template-columns:1fr;gap:26px;padding:38px 0 42px}.works-intro h1{font-size:clamp(69px,19.5vw,124px);margin-top:16px}.title-count{font-size:12px;margin:10px 0 0 14px}.intro-copy{margin:0;max-width:none;display:grid;grid-template-columns:1fr auto;gap:14px 22px;padding:0}.intro-copy .intro-cn{grid-column:1/-1;font-size:23px;margin:0}.intro-copy>p:not(.intro-cn){font-size:13px;line-height:1.8}.desktop-break{display:none}.text-link{margin:0;gap:14px;align-self:end;font-size:11px}.section-heading{padding:22px 0 12px;align-items:flex-start}.section-heading h2{font-size:23px}.section-heading h2 span{font-size:10px;display:block;margin-top:6px}.section-heading>p{font-size:10px;padding-top:5px}.filter-bar{display:block;margin-bottom:22px}.filters{gap:0 17px}.filters button{font-size:12px;min-height:44px}.result-count{margin-top:10px}.work-grid{grid-template-columns:1fr;gap:38px}.work-caption{margin-top:13px;gap:10px;grid-template-columns:22px 1fr 20px}.work-caption h3{font-size:23px}.work-caption p{font-size:10px}.work-description{font-size:13px;margin-left:32px;margin-top:9px}.open-project{display:none}.download-section{grid-template-columns:1fr;gap:22px;padding-top:30px}.download-section>.eyebrow{grid-column:auto}.download-section h2{font-size:34px}.download-section p:not(.eyebrow){font-size:13px}.download-links a:first-child{padding-top:6px}.portfolio-footer{padding-top:44px}.contact-lead{padding-bottom:44px}.contact-lead h2{font-size:42px}.footer-meta{grid-template-columns:1fr;gap:16px;font-size:12px}.footer-meta>a{justify-self:start}.footer-name{font-size:14.2vw;letter-spacing:-.035em;margin-top:20px}.footer-bottom{flex-wrap:wrap;gap:8px 18px;font-size:10px;padding:16px 0 24px}.footer-bottom>span:nth-child(2){display:none}.footer-bottom a{min-height:44px;display:flex;align-items:center;margin-left:auto}.case-breadcrumb{font-size:11px;padding-top:16px;gap:16px}.case-opening{grid-template-columns:1fr;padding:24px 0 36px;gap:28px}.case-opening h1{font-size:clamp(38px,10vw,62px);margin-top:14px}.case-intro{font-size:16px;line-height:1.85}.case-facts{margin-top:20px}.case-facts>div{grid-template-columns:68px 1fr;gap:14px}.case-main>.case-image{margin-bottom:54px}.case-section,.detail-row{display:block;margin-bottom:58px}.case-rail,.detail-rail{position:static;margin-bottom:24px}.case-rail h2,.detail-note h2,.series-intro h2{font-size:24px;margin-bottom:12px}.case-rail p,.detail-note p,.series-intro p{font-size:15px;line-height:1.8}.case-images{gap:28px}.media-caption{font-size:11px;gap:12px}.retained-hero{padding-top:26px;margin-bottom:54px}.retained-hero .detail-media{width:100%}.case-pair,.media-pair{grid-template-columns:1fr;gap:28px}.case-screens,.ui-gallery{grid-template-columns:1fr;gap:32px}.case-screens>figure,.ui-gallery>figure{width:100%;max-width:340px;margin-inline:auto}.case-screens figcaption,.ui-gallery figcaption{display:flex}.media-narrow{width:100%;max-width:340px}.case-end{display:grid;grid-template-columns:1fr;padding:24px 0;gap:20px}.case-end>a:last-child{text-align:left}.case-end strong{font-size:23px}.related-project{margin:40px 0;padding:22px}.font-play{padding:24px 0;margin-bottom:54px}.font-play input{font-size:36px}.viewer-bar{height:106px;gap:0 20px;padding:8px 16px;flex-wrap:wrap;font-size:11px}.viewer-label{flex-basis:100%;max-width:100%}.viewer-close{margin-left:auto}.viewer-stage{top:106px;padding:12px}}
@media(max-width:360px){.portfolio-header nav{gap:14px}.intro-copy{grid-template-columns:1fr;gap:16px}.intro-copy .text-link{justify-self:start}.works-intro{padding-bottom:32px}.filters{gap:0 15px}.work-caption p span{display:block}.work-caption h3{font-size:21px}.work-description{margin-right:0}.case-breadcrumb>span{max-width:45%;text-align:right}.footer-name{font-size:14vw}.media-caption span:last-child{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}