/* BACK LINK */
.back-wrap { padding: 5rem var(--side) 0; }
.back {
  font-size: .78rem; font-weight: 300;
  color: var(--muted); text-decoration: none; transition: color .2s;
}
.back:hover { color: var(--text); }

/* PROJECT HEADER */
.project-header {
  padding: 2.5rem var(--side) 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  border-bottom: 1px solid var(--light-gray);
}
@media (max-width: 800px) { .project-header { grid-template-columns: 1fr; gap: 2.5rem; } }

.project-cat { font-size: .72rem; color: var(--muted); margin-bottom: .75rem; transition: color var(--transition); }
.project-title {
  font-family: 'EB Garamond', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400; line-height: 1.1;
  color: var(--text); letter-spacing: -0.01em;
  transition: color var(--transition);
}

.project-meta { display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: 4px; }
.meta-group { display: flex; flex-direction: column; gap: .25rem; }
.meta-label { font-size: .72rem; font-weight: 300; color: var(--muted); transition: color var(--transition); }
.meta-value { font-size: .88rem; font-weight: 300; color: var(--text); line-height: 1.5; transition: color var(--transition); }
.meta-desc {
  font-size: .9rem; font-weight: 300; color: var(--text);
  line-height: 1.75; margin-bottom: .5rem;
  transition: color var(--transition);
}
.meta-credits {
  font-size: .72rem; font-weight: 300; color: var(--muted);
  line-height: 1.8; margin-top: .25rem;
  transition: color var(--transition);
}

/* DESCRIPTION */
.project-desc { padding: 2.5rem var(--side) 0; }
.project-desc p {
  font-size: .88rem; font-weight: 300; color: var(--muted);
  line-height: 1.75; max-width: 640px;
  transition: color var(--transition);
}

/* IMAGE GRID */
.project-images {
  padding: var(--gap) var(--side) 5rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: var(--gap); row-gap: 0;
  align-items: start;
}
@media (max-width: 1100px) { .project-images { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .project-images { grid-template-columns: 1fr; } }

.project-images img { width: 100%; height: auto; display: block; }
.project-images video { width: 100%; height: auto; display: block; }
.project-images p { display: contents; }
.project-images figure { margin: 0; }
.project-images figure img,
.project-images figure video { width: 100%; height: auto; display: block; }
/* Stagger second column on 2-column layout; middle column on 3-column layout */
@media (max-width: 1100px) and (min-width: 601px) {
  .project-images > *:nth-child(even) { margin-top: 5rem; }
}
@media (min-width: 1101px) {
  .project-images > *:nth-child(3n+2) { margin-top: 5rem; }
}
.project-images > * { margin-bottom: var(--gap); }
figcaption {
  font-size: .72rem; font-weight: 300; color: var(--muted);
  margin-top: .4rem; line-height: 1.5;
  transition: color var(--transition);
}

.proj-img {
  width: 100%;
  background: rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; color: var(--muted);
}
.proj-img.span2 { grid-column: 1/-1; }
.proj-img.r169  { aspect-ratio: 16/9; }
.proj-img.r43   { aspect-ratio: 4/3; }
.proj-img.r34   { aspect-ratio: 3/4; }
.proj-img.r23   { aspect-ratio: 2/3; }
.proj-img.r11   { aspect-ratio: 1/1; }