/* =========================================================
   PROJECT PAGE — cinematic case study
   Black + aurora + white only
   ========================================================= */

/* Back to index button */
.back-btn {
  position: fixed;
  top: 64px;
  left: 32px;
  z-index: 99;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 100px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.back-btn:hover {
  background: rgba(0,0,0,0.65);
  border-color: rgba(255,255,255,0.5);
}
.back-btn::before {
  content: "←";
  display: inline-block;
  transition: transform 0.3s ease;
}
.back-btn:hover::before { transform: translateX(-4px); }
@media (max-width: 900px) { .back-btn { top: 58px; left: 18px; } }

/* HERO ====================================================== */
.pj-hero {
  position: relative;
  min-height: 100svh;
  padding: 120px 32px 60px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
.pj-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pj-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.95) 100%);
}
.pj-hero-grain {
  position: absolute; inset: 0; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.4;
  pointer-events: none;
}

.pj-hero-meta {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.85);
}

.pj-hero-title {
  position: relative;
  z-index: 2;
  align-self: end;
  padding-top: 60px;
}
.pj-hero-title .tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #fff;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 100px;
  margin-bottom: 28px;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.25);
}
.pj-hero-title .client {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 16px;
}
.pj-hero-title h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 14vw, 240px);
  line-height: 0.88;
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff;
}
.pj-hero-title h1 .spark { font-size: 0.25em; vertical-align: top; margin-left: 0.1em; }
.pj-hero-title .sub {
  margin-top: 28px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.7);
}
.pj-hero-title .sub span:not(:last-child)::after {
  content: " /";
  color: rgba(255,255,255,0.4);
  margin-left: 24px;
}

@media (max-width: 768px) {
  .pj-hero { padding: 100px 18px 40px; }
}

/* INFO BAR ================================================== */
.pj-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 56px 32px;
  border-bottom: 1px solid var(--line);
}
.pj-info-item {
  display: grid;
  gap: 8px;
}
.pj-info-item h4 {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-mute);
}
.pj-info-item p {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: #fff;
}
@media (max-width: 768px) {
  .pj-info { grid-template-columns: 1fr 1fr; gap: 24px; padding: 36px 18px; }
  .pj-info-item p { font-size: 22px; }
}

/* INTRO TEXT ================================================ */
.pj-intro {
  padding: 140px 32px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
}
.pj-intro .eyebrow { align-self: start; }
.pj-intro p {
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  color: rgba(255,255,255,0.95);
  max-width: 900px;
}
.pj-intro p + p {
  margin-top: 32px;
  color: rgba(255,255,255,0.7);
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.55;
  max-width: 720px;
}
@media (max-width: 768px) {
  .pj-intro { grid-template-columns: 1fr; gap: 24px; padding: 80px 18px; }
}

/* GALLERY =================================================== */
.pj-gallery {
  display: grid;
  gap: 12px;
  padding: 0 32px 80px;
}
.pj-row {
  display: grid;
  gap: 12px;
}
.pj-row.r-1-1 { grid-template-columns: 1fr 1fr; }
.pj-row.r-2-1 { grid-template-columns: 2fr 1fr; }
.pj-row.r-1-2 { grid-template-columns: 1fr 2fr; }
.pj-row.r-3 { grid-template-columns: repeat(3, 1fr); }
.pj-row.r-full { grid-template-columns: 1fr; }

.pj-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--bg-2);
  border-radius: 8px;
}
.pj-media.tall { aspect-ratio: 3/4; }
.pj-media.wide { aspect-ratio: 16/9; }
.pj-media.square { aspect-ratio: 1/1; }
.pj-media.cinema { aspect-ratio: 21/9; }
.pj-media.phone { aspect-ratio: 9/16; }
.pj-row.r-center { grid-template-columns: 1fr; justify-items: center; }
.pj-row.r-center .pj-media { width: min(420px, 100%); }

/* Dense mosaic grid — many small images, easy to scan */
.pj-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 0 32px 80px;
}
.pj-mosaic .pj-media { aspect-ratio: 3/4; border-radius: 4px; }
@media (max-width: 1100px) { .pj-mosaic { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 900px) { .pj-mosaic { grid-template-columns: repeat(4, 1fr); padding: 0 18px 60px; gap: 6px; } }
@media (max-width: 560px) { .pj-mosaic { grid-template-columns: repeat(3, 1fr); } }

/* Masonry gallery — stills grouped by shoot/look, each group in its own 1-2 row block
   so different looks never share a row. .nN modifiers set the group's column count
   (higher specificity than the responsive default, so they win at every breakpoint). */
.pj-masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pj-media.shoot { aspect-ratio: 1289/1600; border-radius: 8px; }
.pj-masonry.n2 { grid-template-columns: repeat(2, 1fr); }
.pj-masonry.n3 { grid-template-columns: repeat(3, 1fr); }
.pj-masonry.n4 { grid-template-columns: repeat(4, 1fr); }
.pj-row.r-center .pj-media.shoot { width: min(360px, 70%); }
@media (max-width: 900px) {
  .pj-masonry.n4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .pj-masonry { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
.pj-media video.bg { object-fit: cover; }
.pj-hero-bg > video, .pj-hero-bg > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pj-media .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.pj-media:hover .bg { transform: scale(1.04); }
.pj-media .caption {
  position: absolute;
  bottom: 14px; left: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.65);
  z-index: 2;
  pointer-events: none;
  background: rgba(0,0,0,0.4);
  padding: 4px 8px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}
.pj-media .play-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 96px; height: 96px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  transition: all 0.4s cubic-bezier(.2,.8,.2,1);
  z-index: 2;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.25);
}
.pj-media:hover .play-icon {
  background: #fff;
  border-color: #fff;
  color: #000;
  transform: translate(-50%, -50%) scale(1.08);
}

@media (max-width: 768px) {
  .pj-gallery { padding: 0 18px 60px; }
  .pj-row.r-3, .pj-row.r-2-1, .pj-row.r-1-2, .pj-row.r-1-1 { grid-template-columns: 1fr; }
}

/* CREDITS =================================================== */
.pj-credits {
  padding: 120px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  border-bottom: 1px solid var(--line);
}
.pj-credits h3 {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 140px);
  line-height: 0.9;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.pj-credits h3 .spark { font-size: 0.3em; vertical-align: top; margin-left: 0.08em; }
.pj-credits-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  align-self: start;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pj-credit {
  background: #000;
  padding: 20px 0;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 24px;
}
.pj-credit dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-mute);
}
.pj-credit dd { font-size: 15px; color: #fff; }
@media (max-width: 768px) {
  .pj-credits { grid-template-columns: 1fr; gap: 32px; padding: 60px 18px; }
}

/* NEXT PROJECT ============================================== */
.pj-next {
  position: relative;
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 80px 32px;
  overflow: hidden;
}
.pj-next-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: transform 1.5s cubic-bezier(.2,.8,.2,1);
}
.pj-next:hover .pj-next-bg { transform: scale(1.05); }
.pj-next-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.95));
}
.pj-next-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
  justify-items: center;
}
.pj-next-inner .small {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.7);
}
.pj-next-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(44px, 12vw, 200px);
  line-height: 0.9;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
  max-width: 16ch;
}
.pj-next-inner h2 .spark { font-size: 0.3em; vertical-align: top; margin-left: 0.08em; }
.pj-next-inner .arrow {
  font-size: 28px;
  color: #fff;
  transition: transform 0.4s ease;
}
.pj-next:hover .pj-next-inner .arrow { transform: translateY(8px); }
.pj-next a.cover { position: absolute; inset: 0; z-index: 10; }
@media (max-width: 768px) { .pj-next { min-height: 60vh; padding: 60px 18px; } }

/* PREV / NEXT TOP NAV (project pages) ====================== */
.pj-page-nav {
  position: fixed;
  top: 64px;
  right: 32px;
  z-index: 99;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 100px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pj-page-nav a { transition: opacity 0.3s ease; color: #fff; }
.pj-page-nav a:hover { opacity: 0.65; }
.pj-page-nav .sep { opacity: 0.35; }
@media (max-width: 768px) { .pj-page-nav { display: none; } }