/* ---------- project case-study pages, v2 theme ---------- */
.pj-hero {
  padding: 190px var(--gutter) clamp(40px,5vw,72px);
  max-width: var(--maxw); margin: 0 auto;
}
.pj-hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(44px, 8.6vw, 140px); letter-spacing: -.05em;
  line-height: .88; margin: 16px 0 0;
}
.pj-hero-grid {
  display: grid; grid-template-columns: 1.4fr .6fr; gap: clamp(20px,3vw,48px);
  align-items: end; margin-top: clamp(26px,3vw,44px);
}
@media (max-width: 820px) { .pj-hero-grid { grid-template-columns: 1fr; align-items: start; } }
.pj-sub { margin: 0; font-size: clamp(16px,1.35vw,22px); color: var(--ink-60); max-width: 46ch; }
.pj-cta { display: inline-flex; align-items: center; gap: 9px; justify-self: end; }
@media (max-width: 820px) { .pj-cta { justify-self: start; } }

.pj-cover {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
}
.pj-cover .frame {
  position: relative; overflow: hidden; border-radius: 20px;
  aspect-ratio: 16/9; background: var(--panel);
}
.pj-cover img, .pj-shot img {
  width: 100%; height: 116%; position: absolute; inset: -8% 0 auto 0;
  object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

.pj-body { max-width: var(--maxw); margin: 0 auto; padding: clamp(58px,7vw,120px) var(--gutter); }
.pj-intro-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(24px,4vw,80px); }
@media (max-width: 880px) { .pj-intro-grid { grid-template-columns: 1fr; } }
.pj-intro { margin: 0; font-size: clamp(16px,1.4vw,23px); line-height: 1.45; letter-spacing: -.012em; }

.pj-meta { margin: 0; display: grid; gap: 0; align-content: start; }
.pj-meta > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--hair);
}
.pj-meta > div:last-child { border-bottom: 1px solid var(--hair); }
.pj-meta dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-40);
}
.pj-meta dd { margin: 0; font-size: 15px; text-align: right; }

.pj-shots {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: clamp(16px,2vw,30px);
}
.pj-shot { position: relative; overflow: hidden; border-radius: 18px;
  aspect-ratio: 16/10; background: var(--panel); }

.pj-next { border-top: 1px solid var(--hair); margin-top: clamp(60px,8vw,130px); }
.pj-next-inner {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(40px,5vw,80px) var(--gutter);
}
.pj-next a.card { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(20px,3vw,48px); align-items: center; }
@media (max-width: 820px) { .pj-next a.card { grid-template-columns: 1fr; } }
.pj-next .thumb { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 4/3; background: var(--panel); }
.pj-next .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pj-next a.card:hover .thumb img { transform: scale(1.05); }
.pj-next h3 {
  font-family: var(--display); font-weight: 400; font-size: clamp(28px,4vw,64px);
  letter-spacing: -.045em; line-height: .95; margin: 14px 0 0;
}
.pj-next p { margin: 16px 0 0; color: var(--ink-60); max-width: 46ch; }