/* ══════════════════════════════════════════════════════
   PROJECT PAGE — shared template styles
   Space Grotesk for structure · Space Mono for meta/data
   Electric-blue accent · restrained off-alignment
   ══════════════════════════════════════════════════════ */

.project-wrapper { max-width: 1100px; margin: 0 auto; padding: 0 60px 100px; }

/* back link — mono, technical */
.back-link {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted); text-decoration: none;
  padding: 32px 0 0; display: inline-block; transition: color 0.2s;
}
.back-link:hover { color: var(--accent); }

/* ── HEADER ─────────────────────────────────────────── */
.project-header {
  padding: 44px 0 48px; border-bottom: 1px solid rgba(17,17,16,0.1);
  margin-bottom: 64px;
}
.project-header h1 {
  font-size: clamp(30px, 4.5vw, 58px); font-weight: 500;
  letter-spacing: -0.035em; line-height: 1.02;
  margin-bottom: 18px;
}
/* off-alignment: nudge the title a touch out of the grid */
.project-header h1 .off { display: inline-block; transform: translateX(8px); }

/* meta stacked directly under the title — wall-label style, all mono */
.project-meta-inline {
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--font-mono);
  margin-bottom: 34px;
}
.project-meta-inline .pm-year { font-size: 13px; color: var(--ink); }
.project-meta-inline .pm-medium { font-size: 12px; color: var(--ink-muted); }
.project-meta-inline .pm-context { font-size: 12px; color: var(--ink-muted); }

.project-description { font-size: 16px; line-height: 1.85; color: var(--ink-muted); max-width: 640px; }
.project-description p + p { margin-top: 20px; }
/* content links inside descriptions — black text, blue underline */
.project-description a,
.proj-inline-link {
  color: var(--ink); text-decoration: none;
  border-bottom: 1.5px solid var(--accent); padding-bottom: 1px;
  transition: color 0.2s;
}
.project-description a:hover,
.proj-inline-link:hover { color: var(--accent); }

/* series tag — links to the Burnout Machines page */
.series-link {
  display: inline-block; margin-top: 4px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink); text-decoration: none;
  border-bottom: 1.5px solid var(--accent); padding-bottom: 1px;
  transition: color 0.2s;
}
.series-link:hover { color: var(--accent); }

/* ── VIDEO (YouTube embed) ──────────────────────────── */
.video-embed {
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
  background: #111110; margin-bottom: 60px;
}
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.video-placeholder {
  aspect-ratio: 16/9; background: #111110;
  display: flex; align-items: center; justify-content: center; margin-bottom: 60px;
}
.video-placeholder span {
  font-family: var(--font-mono);
  font-size: 10px; color: rgba(255,255,255,0.25);
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ── IMAGES — scattered, off-aligned, varied sizes ─────
   Instead of a tidy grid, images sit at different widths and
   horizontal offsets; some butt up against each other, some
   overlap, some sit alone. Denser than a grid, composed. */
.images-block { position: relative; padding: 12px 0; }

.ph-img {
  position: relative;
  overflow: hidden;
  background: #e2ded5;
  margin-bottom: 28px;                /* tighter default gap */
}
.ph-img img { width: 100%; display: block; object-fit: cover; transition: transform 0.7s ease; height: 100%; }
.ph-img:hover img { transform: scale(1.03); }
.ph-img .img-placeholder {
  width: 100%; height: 100%; min-height: 160px;
  display: flex; align-items: center; justify-content: center;
}
.ph-img .img-placeholder span {
  font-family: var(--font-mono);
  font-size: 9px; color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase;
}

/* WIDTHS */
.ph-img.w-full  { width: 100%; }
.ph-img.w-lg    { width: 74%; }
.ph-img.w-md    { width: 54%; }
.ph-img.w-sm    { width: 40%; }
.ph-img.w-xs    { width: 30%; }

/* HORIZONTAL PLACEMENT */
.ph-img.left    { margin-right: auto; }
.ph-img.right   { margin-left: auto; }
.ph-img.center  { margin-left: auto; margin-right: auto; }
.ph-img.off-l   { margin-right: auto; margin-left: -60px; }   /* bleeds off left */
.ph-img.off-r   { margin-left: auto;  margin-right: -60px; }  /* bleeds off right */

/* VERTICAL NUDGE — negative margins pull images up so they
   overlap the one above (denser, stacked feel) */
.ph-img.up      { margin-top: -40px; }
.ph-img.up-lg   { margin-top: -90px; }
.ph-img.tight   { margin-bottom: 4px; }

/* OVERLAP: pull up AND sit over the previous image with z-index */
.ph-img.overlap    { margin-top: -120px; z-index: 2; position: relative; }
.ph-img.overlap-r  { margin-top: -120px; margin-left: auto; z-index: 2; position: relative; }
.ph-img.overlap-l  { margin-top: -120px; margin-right: auto; z-index: 2; position: relative; }
.ph-img.behind     { z-index: 1; }

/* ASPECT RATIOS (varied) */
.ph-img.a-wide  { aspect-ratio: 16/9; }
.ph-img.a-land  { aspect-ratio: 4/3; }
.ph-img.a-sq    { aspect-ratio: 1/1; }
.ph-img.a-port  { aspect-ratio: 3/4; }
.ph-img.a-tall  { aspect-ratio: 2/3; }
.ph-img.a-pano  { aspect-ratio: 21/9; }

/* full, uncropped image — natural height, whole image visible */
.ph-img.natural { aspect-ratio: auto; }
.ph-img.natural img { height: auto; object-fit: contain; }

/* a pair that sits side by side and touches */
.img-pair { display: flex; gap: 4px; align-items: flex-start; margin-bottom: 28px; }
.img-pair .ph-img { margin-bottom: 0; }
.img-pair .ph-img.grow { flex: 1.6; }
.img-pair .ph-img.shrink { flex: 1; }

/* a stack: images layered with slight offsets */
.img-stack { position: relative; margin-bottom: 40px; }
.img-stack .ph-img { margin-bottom: 0; }

/* ── CREDITS (mono) ─────────────────────────────────── */
.credits-block { margin-top: 60px; padding-top: 32px; border-top: 1px solid rgba(17,17,16,0.1); }
.credits-block .credits-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 12px;
}
.credits-block p {
  font-family: var(--font-mono);
  font-size: 12px; line-height: 1.9; color: var(--ink-muted);
}

/* ── NEXT PROJECT ───────────────────────────────────── */
.next-project { margin-top: 80px; padding-top: 32px; border-top: 1px solid rgba(17,17,16,0.1); display: flex; justify-content: flex-end; }
.next-project a { text-decoration: none; text-align: right; }
.next-project .next-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); display: block; margin-bottom: 6px;
}
.next-project .next-title { font-size: 24px; font-weight: 400; letter-spacing: -0.02em; color: var(--ink); transition: color 0.2s; display: block; }
.next-project a:hover .next-title { color: var(--accent); }

@media (max-width: 768px) {
  .project-wrapper { padding: 0 24px 80px; }
  /* on mobile, collapse the scattered layout to a clean full-width stack */
  .ph-img { width: 100% !important; margin: 0 0 20px 0 !important; aspect-ratio: 4/3; }
  .img-pair { flex-direction: column; }
}