@import"https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Xanh+Mono:ital@0;1&display=swap";html{scroll-behavior:smooth}*,*:before,*:after{box-sizing:border-box}html,body{overflow-x:hidden}main{margin:0;background:#000;color:#fff;font-family:Josefin Sans,Trebuchet MS,sans-serif;font-weight:350;font-style:normal;font-size:1rem}h1,h2{font-size:1.6rem;font-weight:700}h3,h4{font-size:1.2rem;font-weight:700}p{font-weight:350;font-style:normal}a,button{transition:opacity .2s;color:inherit;text-decoration:none}a:hover,button:hover{opacity:.8}.grid{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-flow:dense;width:100%;background:#fff;padding:.2rem}.tile{font-family:Josefin Sans,Trebuchet MS,sans-serif;border:.2rem solid #fff;padding:0;background:transparent;cursor:pointer;position:relative;overflow:hidden;width:100%;isolation:isolate}.tile[data-size=small]{grid-column:span 1;aspect-ratio:3/2}.tile[data-size=wide]{grid-column:span 2;aspect-ratio:3/1}.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:transform .35s ease,filter .35s ease;will-change:transform,filter;z-index:0}.tile:after{content:"";position:absolute;inset:0;background:#00000059;backdrop-filter:blur(.5rem) saturate(1.2);-webkit-backdrop-filter:blur(.5rem) saturate(1.2);opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:1}.tile .hover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.25rem;opacity:0;transition:opacity .25s ease;pointer-events:none;color:#fff;z-index:2;padding:clamp(1.5rem,4vw,3rem)}.tile:hover img,.tile:focus-visible img{transform:scale(1.04);filter:blur(.2rem) saturate(1.2)}.tile:hover:after,.tile:focus-visible:after{opacity:1}.tile:hover .hover,.tile:focus-visible .hover{opacity:1}.hover .meta{display:flex;gap:.5rem;align-items:baseline;justify-content:center;font-size:.8rem;line-height:1.2}.hover .client{font-weight:700}.hover .year{font-weight:350}.hover .title{margin:.3rem 0 0;font-weight:700;font-size:1.4rem;line-height:1;text-transform:uppercase}.hover .credits{margin:.6rem 0 0;font-weight:350;font-size:.8rem;line-height:1.2;font-style:italic}.contact{width:100%;padding:clamp(1.5rem,4vw,5rem)}.contact-wrap{width:100%;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:5rem;align-items:center}.portrait{width:min(50vh,500px);aspect-ratio:1/1;overflow:hidden}.portrait img{width:100%;height:100%;object-fit:cover;display:block}.contact-copy{max-width:40rem;min-width:0}.contact-copy h2{margin:0 0 1.5rem}.contact-copy p{margin:0 0 2rem;line-height:1.6;overflow-wrap:anywhere}.contact-actions{display:flex;gap:1rem;flex-wrap:wrap}.pill{padding:.4rem .8rem;border:1px solid currentColor;border-radius:999px;display:inline-flex;transition:transform .2s}.pill:hover{transform:translateY(-.2rem)}.lightbox{position:fixed;inset:0;display:none;z-index:50}.lightbox[data-open=true]{display:flex;align-items:center;justify-content:center}.lb-backdrop{position:absolute;inset:0;background:#00000059;backdrop-filter:blur(1rem) saturate(1.2);-webkit-backdrop-filter:blur(1rem) saturate(1.2);cursor:pointer}.lb-panel{position:relative;z-index:2;width:min(80vw,1440px);height:min(80svh,810px);display:flex;align-items:center;justify-content:center}.lb-video{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.lb-panel,.lb-video{pointer-events:none}.lb-video iframe{pointer-events:auto}.lb-video .embed{width:100%;height:auto;aspect-ratio:16/9}.lb-video .embed iframe{width:100%;height:100%;border:0}@media(max-width:1200px){.grid{grid-template-columns:repeat(3,1fr)}.tile[data-size=wide]{grid-column:span 2}}@media(max-width:900px){.tile[data-active=true] img{transform:scale(1.04);filter:blur(.2rem) saturate(1.2)}.tile[data-active=true]:after{opacity:1}.tile[data-active=true] .hover{opacity:1}.grid{grid-template-columns:1fr}.tile[data-size=wide]{grid-column:span 1}.contact-wrap{grid-template-columns:1fr;gap:2rem}.portrait{width:100%;max-width:420px}.lb-panel{width:100vw;height:auto;padding:0 1rem}.lb-video{height:auto}.lb-video .embed{width:100%;height:auto;aspect-ratio:16/9}.lb-video .embed iframe{width:100%;height:100%}}
