/* =====================================================
   ACC GALLERY SYSTEM
   Extracted from /References/project-page.html. Powers the
   Spaces project template AND the Places / Sports / Elsewhere
   personal-work galleries (per brief: those three do not
   get their own invented layout, they reuse this).

   Rules preserved:
   - two independent columns either side of one spine gutter
   - align-items:start so columns end at different heights
   - only two standard cell shapes: vertical (3/4), horizontal (3/2)
   - a full-width panorama may break the two-column system — rare
   - a three-up vertical reset may break it — rare
   - never force a photo into a ratio it wasn't composed for
===================================================== */

.gallery{
  display:flex;
  flex-direction:column;
  gap:var(--gutter);
  margin:0 var(--margin);
  padding-bottom:clamp(56px,7vw,96px);
}

.gallery .duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:var(--gutter);
  align-items:start;
}
.gallery .col{
  display:flex;
  flex-direction:column;
  gap:var(--gutter);
}

.gallery .three-up{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gutter);
}
.gallery .three-up .media{ aspect-ratio:3/4; } /* same proportion as standard vertical, smaller only because three share the width */

@media (max-width:760px){
  .gallery .duo{ grid-template-columns:1fr; }
  .gallery .three-up{ grid-template-columns:1fr; }
}

/* ---------- project intro (used above the gallery) ---------- */
.project-intro{
  padding:clamp(40px,5.6vw,70px) var(--margin) clamp(36px,5.3vw,66px);
  text-align:center;
}
.project-intro .eyebrow{ text-align:center; margin-bottom:14px; }
.project-intro h1{ margin-bottom:18px; }
.project-intro .body-text{ max-width:44ch; margin:0 auto; }

/* ---------- prev/next project nav ---------- */
.project-nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(28px,5vw,64px);
  padding:clamp(32px,4vw,48px) var(--margin) 0;
}