.works-page{--works-grid-inset:38px;--works-header-height:149px;overflow:hidden;background:var(--ink)}
.works-header{position:fixed;inset:0 var(--scroll-gutter) auto 0;z-index:6;height:var(--works-header-height);pointer-events:none}
.works-header>a,.works-header>button,.works-header>nav{pointer-events:auto}
.works-layout{height:100svh;height:100dvh;width:calc(100% - var(--scroll-gutter));padding:calc(var(--works-header-height) + var(--works-grid-inset)) var(--works-grid-inset) 0}
.works-scroller{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;outline:none;overscroll-behavior:contain}
.works-scroller:focus-visible{outline:1px solid var(--yellow);outline-offset:5px}
.works-scroller::-webkit-scrollbar{display:none}
.works-heading{display:flex;align-items:baseline;justify-content:space-between;gap:25px;margin-bottom:32px;flex:none}
.works-heading h1{margin:0;font-size:clamp(3rem,5vw,5rem);font-weight:400;line-height:1;letter-spacing:-.04em}
.works-heading p{margin:0;font-size:12px;color:#aab5bf}
.works-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--works-grid-inset) 28px}
.project-tile{display:flex;flex-direction:column;min-width:0}
.tile-cover{position:relative;overflow:hidden;aspect-ratio:1;background:#171b1d;border-radius:28% 24% 30% 22% / 42% 36% 40% 34%;animation:organicWindow 22s ease-in-out infinite;isolation:isolate}
.project-tile:nth-child(2) .tile-cover{animation-delay:-9s}
.tile-cover video,.tile-cover .project-cover-image{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.project-tile:nth-child(3n) .tile-cover{animation-delay:-15s}
.project-tile:nth-child(3n + 1) .tile-cover{animation-delay:-4s}
.tile-caption{--tile-rule:#aaada2;flex:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(1.4em,auto);align-content:start;gap:8px;padding:11px 0 4px;border-bottom:1px solid var(--tile-rule);text-align:start;font-size:11px;overflow:hidden}
.tile-caption-line{display:flex;align-items:center;gap:10px;min-width:0}
.tile-caption h2,.tile-year{margin:0;font-size:clamp(13px,1vw,15px);font-weight:700;line-height:1.35;letter-spacing:.08em}
.tile-caption h2{min-width:0;overflow-wrap:anywhere;text-transform:uppercase}
.tile-caption h2.is-compact{font-size:clamp(11.5px,.88vw,13.25px)}
.tile-caption h2.is-measuring{white-space:nowrap}
.tile-caption-rule{flex:1;min-width:12px;border-top:1px solid var(--tile-rule)}
.tile-year{flex:none;font-variant-numeric:tabular-nums}
.tile-tags{list-style:none;margin:0;padding:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted);font-size:11px;font-weight:400;line-height:1.4;text-transform:uppercase}
.tile-tags.is-fitted{width:max-content;transform:scaleX(var(--tag-scale,1));transform-origin:left center}
.tile-tags li{display:inline}
.tile-tags li span{margin-inline:2px}
.works-footer{display:flex;justify-content:space-between;gap:24px;margin-top:70px;padding:24px 0 0;border-top:1px solid #394048;font-size:12px}
.expanded-project{position:fixed;top:0;left:0;width:100%;height:100svh;height:100dvh;z-index:5;transform-origin:0 0;overflow:hidden;background:var(--ink);outline:none}
.expanded-project iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--ink);opacity:0}
.expanded-project.is-loaded iframe{opacity:1}
.transition-film{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.transition-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cover-transition-media{position:absolute;z-index:1;object-fit:cover;pointer-events:none}
.expanded-project:is(.is-opening-image,.is-returning-cover){background:transparent}
.expanded-project.is-opening-image iframe{opacity:0}
.expanded-project.image-project .transition-film{display:none}
.works-page.project-open>#works-scrollbar{visibility:hidden}

.works-page.project-open .tile-cover{animation-play-state:paused}
@media(min-width:701px) and (max-width:1100px){.works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.works-page{--works-grid-inset:24px;--works-header-height:126px}.works-heading{margin-bottom:32px}.works-heading h1{font-size:48px}.works-grid{grid-template-columns:1fr}.works-footer{margin-top:48px;font-size:11px}.works-heading p{font-size:11px}}
@media(prefers-reduced-motion:reduce){.tile-cover{animation:none}}



.project-open .works-header .hamburger i{top:11px;left:0;width:28px;transform:none;background:currentColor}
.project-open .works-header .hamburger i:last-child{top:6px;left:0;width:12px;height:12px;background:transparent;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.works-header .hamburger i{transition:transform .35s var(--ease),width .35s var(--ease),top .35s var(--ease),left .35s var(--ease),background .25s}
@media(hover:hover) and (pointer:fine){
 .project-open .works-header .menu-toggle:is(:hover,:focus-visible) .hamburger i{left:-8px;width:36px;background:currentColor}
 .project-open .works-header .menu-toggle:is(:hover,:focus-visible) .hamburger i:last-child{left:-8px;width:12px;background:transparent}
}
.project-light .works-header{color:#0b0f14}
.project-light .header-logo svg :is(path,.logo-word){fill:#0b0f14}

#works-index{position:relative;z-index:2}
.expanded-project.is-loaded,.expanded-project.is-loaded iframe{background:transparent}
.expanded-project.is-opening-image iframe{background:var(--ink)}
.expanded-project.is-loaded .transition-film,.expanded-project.is-loaded>.motion-loop-fallback,.expanded-project.is-loaded .transition-still{visibility:hidden;transition:visibility 0s linear .2s}
@media(prefers-reduced-motion:reduce){.expanded-project.is-loaded .transition-film,.expanded-project.is-loaded>.motion-loop-fallback,.expanded-project.is-loaded .transition-still{transition:none}}
.project-open:not(.project-transitioning) #works-index{visibility:hidden}