:root{--ink:#111;--mute:#999;--bg:#fff;--m:47px}
@media (prefers-color-scheme:dark){:root{--bg:#fff}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:"Barlow Semi Condensed","Helvetica Neue",Arial,sans-serif;font-size:14px;font-weight:500;letter-spacing:.03em;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
header{display:flex;justify-content:space-between;align-items:baseline;padding:48px var(--m) 46px;font-size:14px;letter-spacing:.05em;line-height:1.4}
header .brand span,header nav a{color:var(--mute)}
header nav a{margin-left:14px}
header nav a[aria-current],header nav a:hover{color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);margin:0 var(--m) 80px}
.grid a,.grid div{display:block;position:relative;aspect-ratio:1;overflow:hidden}
.grid img{width:100%;height:100%;object-fit:cover;display:block}
.project .intro{max-width:620px;margin:clamp(60px,13.5vw,250px) auto clamp(100px,27vw,500px);padding:0 20px;text-align:center;font-size:15px;letter-spacing:.08em;line-height:1.9}
.project h1{font-size:22px;font-weight:500;letter-spacing:.1em;margin:0 0 30px}
.project .intro p{margin:0 0 26px}
.project .imgs{margin:0 var(--m)}
.project .imgs img,.project .imgs video{display:block;width:auto;max-width:100%;height:auto;margin:0 auto}
.next{width:auto;margin:0;text-align:center;padding:120px 0 150px;font-size:20px;letter-spacing:.12em;line-height:1.5}
.lead{font-size:25px;line-height:1.6;letter-spacing:.1em;font-weight:500;margin:70px 0 0 8%;max-width:400px}
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:30px;width:62%;margin:90px 0 120px 14%;font-size:15px;letter-spacing:.08em;line-height:2}
.about img{width:100%;height:auto;display:block}
.about p{margin:0 0 24px}
.about h2{font-size:15px;font-weight:500;margin:50px 0 24px}
.about .it{font-style:italic}
.contact{text-align:center;margin-top:130px;min-height:40vh;font-size:16px;letter-spacing:.08em;line-height:1.9}
.contact p{margin:0 0 36px}
.contact .lbl{display:block;margin-bottom:22px}

.grid span{position:absolute;inset:0;display:flex;align-items:flex-end;padding:0 4% 14% 17%;white-space:nowrap;color:#fff;background:rgba(0,0,0,.5);opacity:0;transition:opacity .2s ease;font-size:max(14px,calc((100vw - 94px) / 4 * .053));letter-spacing:.1em;line-height:1.4}
.grid a:hover span,.grid a:focus-visible span,.grid div:hover span{opacity:1}
@media(hover:none){.grid span{display:none}}
@media(max-width:800px){.grid span{font-size:max(14px,calc((100vw - 40px) / 2 * .053))}}
b{font-weight:700}

.menu{display:none}
@media(max-width:800px){
:root{--m:18px}
header{position:relative;z-index:30;padding:22px var(--m) 20px;font-size:16px;align-items:center;gap:12px}
header .brand{flex:1}
.menu{display:block;position:relative;flex:none;width:40px;height:32px;margin:-6px -8px -6px 0;padding:0;background:none;border:0;cursor:pointer;color:var(--ink)}
.menu span{position:absolute;left:8px;right:8px;height:1.5px;background:currentColor;transition:transform .2s ease,top .2s ease,opacity .2s ease}
.menu span:nth-child(1){top:9px}
.menu span:nth-child(2){top:15px}
.menu span:nth-child(3){top:21px}
body.menu-open .menu span:nth-child(1){top:15px;transform:rotate(45deg)}
body.menu-open .menu span:nth-child(2){opacity:0}
body.menu-open .menu span:nth-child(3){top:15px;transform:rotate(-45deg)}
header nav{display:none}
body.menu-open{overflow:hidden}
body.menu-open header{color:#fff}
body.menu-open header .brand span{color:#9a9a9a}
body.menu-open .menu{color:#fff}
body.menu-open header nav{display:flex;flex-direction:column;justify-content:center;align-items:center;position:fixed;inset:0;z-index:-1;background:#131313;padding:0 var(--m);font-size:26px;line-height:1.9;letter-spacing:.1em}
body.menu-open header nav a,body.menu-open header nav a[aria-current]{color:#fff}
header nav a{margin:0}
.grid{grid-template-columns:repeat(2,1fr)}
.lead{font-size:24px;max-width:none;margin:56px var(--m) 0 40px}
.about{grid-template-columns:1fr;gap:90px;width:auto;margin:110px var(--m) 80px;font-size:16px}
.project .intro{font-size:16px}
.contact{margin-top:80px}
.next{width:auto;padding:80px var(--m) 100px;font-size:16px}
}

@media(min-width:801px){
.lead{margin-left:101px;font-size:30px;line-height:1.6}
.about-lead{font-size:30px;line-height:1.6;max-width:500px;margin-left:128px}
.about{grid-template-columns:308px minmax(0,480px);gap:34px;width:auto;margin:210px 0 120px max(40px,calc(50% - 510px));line-height:2.13}
.about>div{margin-top:-10px}
.about p{margin-bottom:26px}
}
.project .video{position:relative;aspect-ratio:16/9;background:#000;margin-bottom:14px}
.project .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.project .imgs img+.video,.project .imgs video+.video{margin-top:14px}
.project .video.strip{aspect-ratio:1747/227;margin-bottom:0;overflow:hidden}
.project .video.strip iframe{inset:auto;left:0;top:50%;height:auto;aspect-ratio:16/9;transform:translateY(-50%)}
.project .intro h1,.project .intro p{text-wrap:balance}
@media(max-width:700px){.project .intro br.d{display:none}}
.next{text-wrap:balance}