*{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}

/* LMM v5 mobile typography optimization */
.hero-title {
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-weight: 700;
}
.hero-subtitle {
  max-width: 420px;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  .hero, .container {
    min-height: 100svh;
    padding-left: 24px;
    padding-right: 24px;
  }
  h1 {
    font-size: clamp(48px, 14vw, 88px);
    line-height: 0.92;
  }
  .hero-title {
    font-size: clamp(52px, 15vw, 96px);
  }
  img {
    max-width: 100%;
    height: auto;
  }
}