.photos { min-height: 100vh; padding: 3rem 6vw 5rem; background: #1d2b24; color: var(--paper); }
.photos-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 7rem; }
.wordmark, .return { color: var(--paper); }
.return { font: 500 .7rem var(--mono); text-transform: uppercase; text-underline-offset: 5px; }
.photos-intro { max-width: 800px; }
.photos-intro h1 { font: 500 clamp(4rem, 10vw, 9rem)/.8 var(--serif); letter-spacing: -.07em; margin: .8rem 0 1.5rem; }
.photos-intro h1 em { color: var(--yellow); font-style: italic; }
.photos-intro p { font-size: 1.1rem; max-width: 580px; }
.photo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; margin-top: 5rem; }
.photo { position: relative; display: grid; place-items: center; margin: 0; overflow: hidden; background: #26382d; }
.photo:nth-child(1) { grid-column: 1 / span 8; aspect-ratio: 8 / 5; }
.photo:nth-child(2) { grid-column: 9 / span 4; aspect-ratio: 4 / 5; }
.photo:nth-child(3) { grid-column: 1 / span 4; aspect-ratio: 4 / 5; }
.photo:nth-child(4) { grid-column: 5 / span 8; aspect-ratio: 8 / 5; }
.photo:nth-child(5) { grid-column: 1 / span 5; aspect-ratio: 1 / 1; }
.photo:nth-child(6) { grid-column: 6 / span 7; aspect-ratio: 7 / 5; }
.photo > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.photo figcaption { position: absolute; bottom: .85rem; left: .85rem; z-index: 1; padding: .5rem .6rem; background: rgba(29, 43, 36, .82); color: var(--paper); font: .6rem var(--mono); letter-spacing: .05em; }
.photo figcaption span { display: block; margin-top: .2rem; opacity: .75; }
@media (max-width: 720px) {
  .photos { padding: 2rem 7vw 4rem; }
  .photos-header { margin-bottom: 5rem; }
  .photos-intro h1 { font-size: 5rem; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 3rem; }
  .photo:nth-child(n) { grid-column: span 1; aspect-ratio: 4 / 5; }
  .photo:nth-child(1), .photo:nth-child(4), .photo:nth-child(6) { grid-column: span 2; aspect-ratio: 16 / 10; }
  .photo:nth-child(5) { aspect-ratio: 1 / 1; }
}