/* Studio Eleven — project pages: scroll-expansion hero + gallery */
body.pj { background: #0A0A09; color: #FFFFFF; }
.pj a { color: var(--tangerine); }
.pj a:hover { color: #FFFFFF; }

.pj-crumb { position: fixed; top: 84px; left: 32px; z-index: 20; color: rgba(255,255,255,.6); }
.pj-crumb a { color: inherit; }

/* ── SCROLL EXPANSION HERO ── */
.xp { height: 240vh; position: relative; }
.xp-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.xp-media {
  position: relative; overflow: hidden; border-radius: 6px;
  will-change: width, height; background: #141412;
}
.xp-media img, .xp-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.xp-media .xp-scrim { position: absolute; inset: 0; background: rgba(10,10,9,.30); pointer-events: none; }
.xp-media.ph {
  background: #101010;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px);
  display: flex; align-items: center; justify-content: center;
}
.xp-media.ph span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.4); text-align: center; padding: 0 24px;
}
.xp-titles {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: .35em;
  font-size: clamp(44px, 8.4vw, 140px); font-weight: 300; letter-spacing: -0.045em;
  color: var(--tangerine); white-space: nowrap;
  text-shadow: 0 2px 40px rgba(10,10,9,.45);
}
.xp-t1, .xp-t2 { display: block; will-change: transform, opacity; }
.xp-meta {
  position: absolute; left: 32px; bottom: 36px; z-index: 6; opacity: 0; will-change: opacity, transform;
}
.xp-meta h1 { font-size: clamp(40px, 6.5vw, 110px); font-weight: 300; letter-spacing: -0.05em; line-height: .95; color: var(--tangerine); margin: 0 0 12px; }
.xp-meta p { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.65); margin: 0; }
.xp-hint {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 6;
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5);
}

/* ── BODY ── */
.pj-body { max-width: 1400px; margin: 0 auto; padding: 96px 32px 120px; }
.pj-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 72px;
}
.pj-fact-k { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--tangerine); margin-bottom: 8px; }
.pj-fact-v { font-size: 15px; font-weight: 300; }
.pj-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pjg { margin: 0; overflow: hidden; background: #141412; }
.pjg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.pjg:hover img { transform: scale(1.03); }
.pjg-full { grid-column: span 2; aspect-ratio: 16/8.5; }
.pjg-half { aspect-ratio: 4/3.4; }
.pjg-port { aspect-ratio: 3/4; }
.pjg-fullport { grid-column: span 2; aspect-ratio: 16/9.6; }
.pj-note {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.35); padding: 48px 0;
}
.pj-brief { max-width: 1400px; margin: 0 auto; padding: 90px 32px 100px; display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: start; }
.pj-brief .sec-label { color: var(--tangerine); font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.pj-brief-lead { font-size: clamp(22px, 2.8vw, 36px); font-weight: 300; line-height: 1.4; letter-spacing: -0.02em; margin: 0 0 24px; color: white; }
.pj-brief-text { font-size: 15px; line-height: 1.85; color: rgba(255,255,255,.55); max-width: 560px; }
@media (max-width: 760px) { .pj-brief { grid-template-columns: 1fr; gap: 20px; } }
.pj-next {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 96px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12);
  text-decoration: none; color: #FFFFFF !important; transition: color .2s;
}
.pj-next:hover .pj-next-name { color: var(--tangerine); }
.pj-next-k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.pj-next-name { font-size: clamp(26px, 4vw, 56px); font-weight: 300; letter-spacing: -0.03em; transition: color .2s; }

.reveal { opacity: 0; transform: translateY(36px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 800px) {
  .pj-facts { grid-template-columns: 1fr 1fr; }
  .pj-gallery { grid-template-columns: 1fr; }
  .pjg-full { grid-column: span 1; aspect-ratio: 4/3; }
  .pjg-fullport { grid-column: span 1; aspect-ratio: 3/4; }
  .xp-meta { left: 20px; bottom: 28px; }
}