/* 06 — Gallery: an asymmetric contact sheet with crop marks and plate captions */

.gallery {
  margin-top: 0;
  padding-block: clamp(72px, 10vw, 150px);
  background: var(--paper-deep);
  border-block: 1px solid var(--rule-soft);
}
.gallery__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 48px; margin-bottom: clamp(44px, 6vw, 96px); }
.gallery__head .note { max-width: 40ch; }

.plates { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px 0; }
.plate { position: relative; }
.plate--2, .plate--4, .plate--6 { width: 78%; justify-self: end; }
.plate--3 { width: 86%; }

.photo-slot { position: relative; }
.plate .photo-slot { aspect-ratio: var(--ar, 4 / 3); }

/* crop marks, drawn just outside each frame */
.plate .photo-slot::before {
  --m: linear-gradient(var(--ink), var(--ink));
  content: ""; position: absolute; inset: -14px; z-index: 4; pointer-events: none;
  background:
    var(--m) 0 14px / 9px 1px no-repeat,                  var(--m) 14px 0 / 1px 9px no-repeat,
    var(--m) 100% 14px / 9px 1px no-repeat,               var(--m) calc(100% - 14px) 0 / 1px 9px no-repeat,
    var(--m) 0 calc(100% - 14px) / 9px 1px no-repeat,     var(--m) 14px 100% / 1px 9px no-repeat,
    var(--m) 100% calc(100% - 14px) / 9px 1px no-repeat,  var(--m) calc(100% - 14px) 100% / 1px 9px no-repeat;
}

/* real photographs: drop an <img> inside the slot and the artwork + label step aside */
.plate .photo-slot > img { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; }
.plate .photo-slot:has(> img) .slot-label { display: none; }

.plate figcaption {
  margin-top: 22px; max-width: 34ch;
  font: italic 400 1.0625rem/1.35 var(--f-text); color: var(--ink-2);
}
.plate figcaption span {
  display: inline-block; margin-right: .8em;
  font: 500 10.5px/1 var(--f-ui); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}

@media (min-width: 960px) {
  .plates { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(64px, 7vw, 112px); align-items: start; }
  .plate--2, .plate--3, .plate--4, .plate--6 { width: auto; justify-self: stretch; }
  .plate--1 { grid-column: 1 / 8; }
  .plate--2 { grid-column: 9 / 13; margin-top: clamp(4rem, 9vw, 9rem); }
  .plate--3 { grid-column: 2 / 6; }
  .plate--4 { grid-column: 7 / 13; margin-top: clamp(3rem, 6vw, 6rem); }
  .plate--5 { grid-column: 1 / 7; }
  .plate--6 { grid-column: 8 / 12; margin-top: clamp(4rem, 8vw, 8rem); }
}