*{box-sizing:border-box}
body{margin:0;background:#fafafa;color:#111;font-family:Arial,"PingFang SC",sans-serif}
nav{position:fixed;top:0;width:100%;padding:32px 7vw;display:flex;justify-content:space-between;font-size:12px;letter-spacing:4px;z-index:2}
.hero{min-height:100vh;padding:18vh 8vw}
.small{font-size:12px;letter-spacing:5px;color:#777}
h1{font-size:clamp(80px,15vw,200px);line-height:.82;letter-spacing:-8px;margin:50px 0}
h2{font-size:60px;font-weight:300}
.works{padding:100px 8vw}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:35px}
.card{cursor:pointer}
.card img{width:100%;height:360px;object-fit:cover;transition:.5s}
.card:hover img{transform:scale(.97)}
.card h3{font-size:26px;font-weight:400}
.overlay{display:none;position:fixed;inset:0;background:#fff;z-index:10}
.overlay.show{display:block}
.detail{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);background:#fff;overflow:auto;padding:60px;transform-origin:center;transform:scale(.1);opacity:0;border-radius:20px;transition:.6s cubic-bezier(.2,.8,.2,1)}
.detail.active{inset:0;width:100%;height:100%;transform:scale(1);opacity:1;border-radius:0}
.detail button{position:absolute;right:40px;top:20px;background:none;border:0;font-size:40px}
.detail h1{font-size:80px;margin:80px 0 20px;letter-spacing:-4px}
.detail img{width:min(900px,100%);margin-top:40px}