:root{--nav-width:174px;--mono:'Courier New',Courier,monospace;--thumb-width:14.4vw;--thumb-height:6.4vw;--strip-bottom:40px}*{box-sizing:border-box;margin:0;padding:0}html{font-family:Arial,Helvetica,'Microsoft YaHei',sans-serif;background:#000}body{background:#000;color:#fff}button,a{-webkit-tap-highlight-color:transparent}button{border:0;background:none;color:inherit;cursor:pointer;font:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:1px solid currentColor;outline-offset:3px}img,video{display:block;width:100%;height:100%;object-fit:cover}button,nav,.mono{font-family:var(--mono);font-size:12px;font-weight:400;line-height:1.1;text-transform:uppercase}[hidden]{display:none!important}
.navigation{position:fixed;top:16px;left:16px;z-index:100;color:white;font-family:var(--mono);font-size:12px;line-height:1}.nav-main{background:#000;height:17.6px;width:174px;display:flex;align-items:center;padding:0 6px}.nav-main a{opacity:.5;padding:2px 0;white-space:nowrap}.nav-main a:first-child{width:64px;font-size:11px;font-weight:700;letter-spacing:-1px}.nav-main a:nth-child(2){width:65px}.nav-main a:last-child{width:32.5px;text-align:right}.nav-main a:hover,.nav-main a[aria-current=page]{opacity:1}.nav-sub{position:absolute;top:18px;left:65px;background:#000;width:108px;height:18px;display:flex;align-items:center;justify-content:space-between;padding:0 6px}.nav-sub a{opacity:.5}.nav-sub a:hover,.nav-sub a[aria-current=page]{opacity:1}
.home{position:fixed;inset:0;overflow:hidden;touch-action:none;user-select:none;background:#000}.hero-media{position:absolute;inset:0;transition:opacity .7s ease;background:#000}.hero-layer{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}.hero-layer.active{opacity:1}.hero-layer .media{height:100%;width:100%}.media{position:relative;overflow:hidden;background:#141414}.media>img,.media>video{object-position:var(--position,50% 50%);transform:scale(var(--zoom,1))}.demo-motion>img{animation:drift 15s ease-in-out infinite alternate}.home.dragging .hero-media{opacity:.4}.timeline{position:absolute;inset:0;overflow:hidden;pointer-events:none}.timeline-group{position:absolute;left:0;bottom:var(--strip-bottom);will-change:transform;pointer-events:auto;display:flex;flex-direction:column;gap:20px}.timeline-title{align-self:flex-start;color:#fff;white-space:nowrap;opacity:.3;transition:opacity .3s;font-size:12px;line-height:1.1;font-family:var(--mono);text-transform:uppercase;padding:2px 6px;display:flex;gap:8px}.timeline-title span:last-child{opacity:.5}.timeline-title:hover,.timeline-group.selected .timeline-title{background:#000;opacity:1}.timeline-images{display:flex;background:#0008;opacity:.3;transition:opacity .3s}.timeline-group.selected .timeline-images,.timeline-group:hover .timeline-images{opacity:1}.timeline-frame{display:block;width:var(--thumb-width);height:var(--thumb-height);flex:none;overflow:hidden}.timeline-frame .media{width:100%;height:100%}.timeline-frame img{pointer-events:none}.timeline-images:before{content:'';position:absolute;bottom:-240px;top:34px;left:0;background:#ffffff66;width:1px;pointer-events:none}.center-tick{position:absolute;bottom:0;left:50%;width:2px;height:8px;background:white;mix-blend-mode:difference}.media-status{position:absolute;right:16px;top:16px;font:12px var(--mono);background:#000;color:white;padding:3px 6px;z-index:2}.home-pause{position:absolute;right:16px;bottom:12px;color:#fff;opacity:0;transition:opacity .2s;background:#000;padding:3px 5px}.home:hover .home-pause,.home-pause:focus-visible,.home-paused .home-pause{opacity:.65}@keyframes drift{from{transform:scale(1.04) translate(-1%,0) rotate(-1deg)}to{transform:scale(1.14) translate(1%,1%) rotate(1deg)}}
.work-grid{background:#000}.work-row{display:block;position:relative;width:100%;height:35vw;overflow:clip}.work-row .work-media{position:absolute;inset:0;display:flex;opacity:.4;transition:opacity .3s}.work-row.active .work-media,.work-row:hover .work-media{opacity:1}.work-media .media{flex:0 0 60%;height:100%}.work-media .media:nth-child(even){flex-basis:40%}.work-row .project-label-wrap{position:sticky;top:0;z-index:5;padding:16px 16px 0 190px}.project-label{display:grid;grid-template-columns:3fr 5fr 2fr 2fr;font-family:var(--mono);font-size:12px;line-height:17px;text-transform:uppercase;padding:0 5px;color:#000;background:#ffffff50;gap:0}.project-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-label span:last-child{text-align:right}.work-row.active .project-label,.work-row:hover .project-label{background:#fff}.work-row:focus-visible{outline-offset:-3px}
.list-page{min-height:100svh;background:#fff;color:#000;padding:16px 16px 100px 190px}.list-header{display:grid;grid-template-columns:3fr 5fr 2fr 2fr;gap:0;font:12px/17px var(--mono);text-transform:uppercase;margin-bottom:12px;padding:0 5px;color:#888}.list-header>button:last-child{text-align:right}.type-filter{position:relative}.type-filter>button{color:#888;white-space:nowrap}.filter-menu{position:absolute;top:-8px;left:-8px;padding:8px;background:#000;color:white;z-index:25;min-width:192px;display:none;gap:6px;flex-direction:column;align-items:flex-start}.type-filter:hover .filter-menu,.type-filter:focus-within .filter-menu{display:flex}.filter-menu button[aria-pressed=true]{opacity:.5}.list-row{display:block;margin-bottom:8px}.list-row .project-label{background:transparent}.list-row:hover .project-label,.list-row:focus-visible .project-label{background:#000;color:white}.list-hover{position:fixed;right:16px;z-index:35;width:25vw;max-width:500px;min-width:200px;pointer-events:none}.list-hover .media{aspect-ratio:1.5}.empty{font:12px var(--mono);padding:30px 5px;color:#777}
.info-page{background:#fff;color:#000;min-height:100svh;padding-top:112px}.info-content{width:100%;max-width:768px;margin:0 auto;padding:0 16px;font-size:30px;line-height:1.25}.info-mark{font-size:56px;font-weight:700;letter-spacing:-5px;margin-bottom:72px;line-height:1;width:max-content}.info-about p+p{margin-top:24px}.info-columns{display:grid;grid-template-columns:1fr 1fr;row-gap:56px;margin-top:80px}.info-cell h2{font:12px/1.1 var(--mono);font-weight:400;text-transform:uppercase;margin-bottom:12px}.info-cell:not(.contact-cell) p,.info-cell:not(.contact-cell)>a,.info-cell:not(.contact-cell)>span{font-size:12px;line-height:1.25;font-weight:600;display:block;max-width:85%}.contact-cell p{font-size:30px;margin-top:24px}.contact-cell .contact-placeholder{font-size:24px;color:#777}.info-cell a:hover{opacity:.5}.placeholder-note{font:11px/1.5 var(--mono);color:#777;margin-top:80px;margin-bottom:80px}.info-filmstrip{display:flex;width:100%;overflow:auto;scrollbar-width:none;gap:0}.info-filmstrip>a{flex:0 0 33.333%;height:25vw}.info-filmstrip .media{width:100%;height:100%}
.detail-page{background:#fff;color:#000;min-height:100svh}.detail-heading{padding:16px 16px 16px 190px;min-height:50px}.detail-heading .project-label{background:#fff}.detail-hero{width:100%;max-height:calc(100svh - 50px);aspect-ratio:16/9}.detail-hero .media{width:100%;height:100%}.detail-hero video{object-fit:contain}.detail-description{font-size:30px;line-height:1.25;max-width:768px;padding:0 16px;margin:80px auto}.detail-gallery{display:grid;grid-template-columns:1fr 1fr;gap:0}.detail-gallery .media{aspect-ratio:1.25;cursor:zoom-in}.detail-gallery .full{grid-column:1/-1;aspect-ratio:16/9}.detail-gallery video{object-fit:contain}.credits{margin:80px auto;max-width:768px;padding:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:32px}.credits h3{font:12px var(--mono);text-transform:uppercase;font-weight:400;margin-bottom:10px}.credits p{font-size:20px}.next-project{display:block;background:#000;position:relative;height:35vw;overflow:hidden}.next-project .media{height:100%;opacity:.6}.next-project>span{position:absolute;top:16px;left:16px;color:#fff;background:#000;padding:3px 6px}.lightbox{border:0;background:#000;color:#fff;width:100vw;max-width:none;height:100svh;max-height:none;padding:0}.lightbox::backdrop{background:#000}.lightbox .media{width:100%;height:100%;background:#000}.lightbox .media>img{object-fit:contain;transform:none}.lightbox button{position:absolute;right:16px;top:16px;z-index:10;background:#000;padding:4px 6px;color:#fff}
@media(max-width:767px){:root{--thumb-width:36vw;--thumb-height:16vw;--strip-bottom:52px}.navigation{top:auto;bottom:16px}.nav-main{height:18px}.nav-sub{top:auto;bottom:18px}.timeline-group{gap:16px}.center-tick{display:none}.home-pause{bottom:17px;opacity:.65}.work-row{height:70vw}.work-row .project-label-wrap{position:absolute;top:0;width:100%;padding:16px 16px 0}.project-label{grid-template-columns:1fr 1fr}.project-label span:nth-child(3),.project-label span:nth-child(4){display:none}.project-label span:nth-child(2){text-align:right}.work-media .media{flex-basis:100%}.work-media .media:nth-child(even){display:none}.list-page{padding:16px 16px 90px}.list-header{grid-template-columns:1fr 1fr;margin-bottom:20px}.list-header>span{display:none}.filter-menu{top:16px}.list-hover{display:none}.list-row{margin-bottom:12px}.info-page{padding-top:16px;padding-bottom:70px}.info-content{padding:0 40px 0 16px;font-size:20px}.info-mark{font-size:34px;letter-spacing:-3px;margin-bottom:32px}.info-columns{grid-template-columns:1fr;gap:40px;margin-top:56px}.contact-cell p{font-size:20px}.contact-cell .contact-placeholder{font-size:20px}.placeholder-note{margin:56px 0}.info-filmstrip>a{flex-basis:75%;height:60vw}.detail-heading{padding:16px;min-height:48px}.detail-description{font-size:20px;margin:40px 0;padding:0 16px}.detail-hero{aspect-ratio:1.25}.detail-gallery{grid-template-columns:1fr}.detail-gallery .full{grid-column:auto;aspect-ratio:1.25}.credits{margin:40px 0;gap:25px}.credits p{font-size:16px}.next-project{height:70vw}.detail-page{padding-bottom:60px}.home-pause{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Preserve the supplied project names verbatim. */
.timeline-title,.project-label span:nth-child(2),.next-project>span{text-transform:none}.timeline-title span:only-child{opacity:1}.info-content:has(.info-columns):not(:has(.placeholder-note)){padding-bottom:80px}

.timeline-frame,.timeline-title{cursor:grab;-webkit-user-drag:none}.home.dragging,.home.dragging *{cursor:grabbing!important}

/* Project title hover list on detail pages. */
.detail-heading{position:sticky;top:0;z-index:40;background:#fff}
.detail-switcher{position:relative;margin-bottom:-16px;padding-bottom:16px}
.detail-switcher-trigger{display:block;width:100%;text-align:left;cursor:pointer}
.detail-project-list{position:absolute;top:100%;left:0;right:0;background:#fff;padding:12px 0;max-height:65svh;overflow-y:auto;box-shadow:0 12px 20px #00000014}
.detail-project-list[hidden]{display:none}
.detail-project-list .list-row{margin:0;padding:4px 0}
.detail-project-list .list-row[aria-current=page] .project-label{background:#eee}
.detail-project-list .list-row:hover .project-label,.detail-project-list .list-row:focus-visible .project-label{background:#000;color:#fff}

.detail-list-preview{position:fixed;right:16px;width:min(25vw,500px);z-index:50;pointer-events:none;background:#fff}
.detail-list-preview[hidden]{display:none}
.detail-list-preview img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain}
@media(max-width:767px){.detail-list-preview{width:35vw;right:16px}}


/* Slim floating detail header, aligned with the main navigation. */
.detail-heading{position:fixed;top:16px;left:190px;right:16px;padding:0;min-height:0;background:transparent;z-index:40}
.detail-heading .detail-switcher{margin-bottom:0;padding-bottom:0}
.detail-heading .detail-switcher-trigger>.project-label{height:17.6px;line-height:17.6px;font-size:12px;font-weight:400;background:#fff}
.detail-heading .detail-project-list{top:100%}
.detail-hero{max-height:100svh}
@media(max-width:767px){
 .detail-heading{top:16px;left:16px;right:16px;padding:0;min-height:0}
 .detail-heading .detail-switcher-trigger>.project-label{font-size:11px}
}