/* ════════════════════════════════════════════════════════════
   Studio Barnes — Project case-study page
   Structure follows the Project Storytelling Framework:
   Snapshot → Situation/Challenge/Approach/Outcome → Gallery
   (largest section) → Reflection → Navigation. The work leads;
   copy supports. Reuses the global v2 type, surfaces and nav.
   ════════════════════════════════════════════════════════════ */

body[data-page="project"] { background: var(--surface-page); }

/* ── head: eyebrow, title, lede, snapshot ── */
.proj-head { padding: calc(var(--nav-h) + clamp(56px, 8vw, 120px)) 0 0; }
.proj-head__inner { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 36px); }
.proj-head .hero__display { max-width: 14ch; }
.proj-head .lede { max-width: 40ch; }

.snapshot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: clamp(20px, 2vw, 28px);
  margin: 0;
}
.snapshot__item { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.snapshot dt {
  font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-semibold); color: var(--sb-grey-500);
}
.snapshot dd { margin: 0; font-size: clamp(15px, 1.05vw, 18px); color: var(--sb-white); line-height: 1.4; }

/* ── cover ── */
.proj-cover { margin-top: clamp(40px, 6vw, 88px); }
.proj-cover img, .proj-cover image-slot {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--sb-grey-800);
}

/* ── narrative: numbered editorial rows (heading left, copy right) ── */
.steps { display: flex; flex-direction: column; }
.step {
  display: grid;
  grid-template-columns: minmax(190px, 0.6fr) 1.5fr;
  gap: clamp(20px, 4vw, 80px);
  align-items: start;
  border-top: 1px solid var(--border-subtle);
  padding: clamp(30px, 3.6vw, 52px) 0;
}
.step:last-child { border-bottom: 1px solid var(--border-subtle); }
.step__head { display: flex; flex-direction: column; gap: var(--space-3); }
.step__num {
  font-size: clamp(26px, 2.8vw, 40px); font-weight: var(--weight-light);
  color: var(--sb-orange); line-height: 1; letter-spacing: -0.02em;
}
.step h3 {
  margin: 0; font-size: clamp(21px, 2vw, 30px); font-weight: var(--weight-semibold);
  letter-spacing: -0.015em; color: var(--sb-white); line-height: 1.15;
}
.step p {
  margin: 0; font-size: clamp(16px, 1.15vw, 19px); color: var(--text-body);
  line-height: var(--leading-body); max-width: 60ch; text-wrap: pretty;
}

/* ── gallery: editorial 6-col grid, varied spans ── */
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 1.6vw, 24px); align-items: start; }
.gallery figure { margin: 0; }
.gallery img, .gallery image-slot {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--sb-grey-800);
}
.g-wide    { grid-column: span 6; }
.g-half    { grid-column: span 3; }
.g-third   { grid-column: span 2; }
.g-twothird{ grid-column: span 4; }
.g-wide img, .g-wide image-slot         { aspect-ratio: 16 / 9; }
.g-half img, .g-half image-slot         { aspect-ratio: 4 / 3; }
.g-third img, .g-third image-slot       { aspect-ratio: 1 / 1; }
.g-twothird img, .g-twothird image-slot { aspect-ratio: 3 / 2; }
.g-tall img, .g-tall image-slot         { aspect-ratio: 4 / 5; }
.g-tall    { grid-column: span 2; }

/* ── reflection ── */
.reflect-sec { background: var(--surface-section); }
.reflect {
  font-size: clamp(28px, 4vw, 54px); font-weight: var(--weight-light);
  letter-spacing: -0.02em; line-height: 1.18; color: var(--sb-white);
  text-wrap: balance; max-width: 20ch; margin: 0;
}

/* ── project navigation ── */
.projnav { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
.projnav__link {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  padding: clamp(24px, 2.6vw, 36px);
  background: var(--surface-card);
  transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.projnav__link:hover { border-color: rgba(255, 255, 255, 0.4); transform: translateY(-3px); }
.projnav__link--next { align-items: flex-end; text-align: right; }
.projnav__dir { font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-weight: var(--weight-semibold); color: var(--sb-grey-500); }
.projnav__name { font-size: clamp(20px, 2vw, 30px); font-weight: var(--weight-semibold); letter-spacing: -0.015em; color: var(--sb-white); }

/* ── responsive ── */
@media (max-width: 860px) {
  .snapshot { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .step { grid-template-columns: 1fr; gap: var(--space-4); }
  .g-wide, .g-half, .g-third, .g-twothird, .g-tall { grid-column: span 6; }
  .g-half image-slot, .g-third image-slot, .g-twothird image-slot, .g-tall image-slot { aspect-ratio: 16 / 10; }
  .projnav { grid-template-columns: 1fr; }
  .projnav__link--next { align-items: flex-start; text-align: left; }
}