/* ===== WORKS (horizontal infinite) ===== */
.works-page{
  height: calc(var(--vh, 1vh) * 100);
  overflow:hidden;
}
.works-wrap{
  width:min(var(--max), calc(100% - 2rem));
  margin:0 auto;
  padding-top: 110px;
  padding-bottom: 26px;
}

.works-title{ margin:0; }
.works-sub{ margin:.6rem 0 0; color: var(--muted); max-width: 90ch; }

.works-stage{
  margin-top: 18px;
  border-radius: calc(var(--radius) + 14px);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
  height: calc(var(--vh, 1vh) * 100 - 110px - 26px - 120px);
  min-height: 420px;
  display:grid;
  align-content:center;
  padding: 14px;
}

.track{
  display:flex;
  gap: 14px;
  will-change: transform;
}
.row{
  display:flex;
  gap: 14px;
  padding: 10px 0;
}
.tile{
  height: clamp(220px, 28vh, 320px);
  width: clamp(280px, 30vw, 520px);
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#0a0a0a;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  flex: 0 0 auto;
}
.tile.wide{ width: clamp(360px, 38vw, 660px); }
.tile.narrow{ width: clamp(220px, 24vw, 420px); }

.tile img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform .8s ease, filter .8s ease;
}
.tile:hover img{
  transform: scale(1.08);
  filter: saturate(1.15) contrast(1.06);
}

.hint{
  margin-top: 10px;
  color: rgba(255,255,255,.60);
  font-size: .9rem;
}