/*
 * "Seen in the wild" -- the wall of photographs, after the back catalog.
 *
 * The one rule this section has: DO NOT MAKE THESE LOOK LIKE THE ARTWORK.
 * Every photo here was taken on a phone in a shop and is supposed to look it.
 * No comic frame, no halftone, no duotone, no forced ratio -- a real
 * photograph dressed to match the illustrations stops being evidence and
 * becomes more illustration, which is the exact thing this section exists to
 * break up.
 *
 * What it does get is the site's ink border, because a photograph pinned to a
 * board still has an edge, and the whole page is built out of edges.
 */

/* Plain block, so `hidden` already wins. Stated anyway: a later
   `.wild-wall { display: grid }` would unhide an empty wall without anybody
   noticing -- the same trap new-issues.css and drop-archive.css call out. */
.wild-wall[hidden] { display: none; }

.wild-wall {
  position: relative;
  color: var(--paper);
  background: var(--ink);
  border-top: 3px solid var(--ink);
}

/*
 * A pinned board rather than a grid of equal tiles.
 *
 * Masonry columns, so a portrait phone shot and a wide shelf shot both keep
 * their own shape. `object-fit: cover` on a fixed box would crop somebody's
 * head off to make the wall tidy, and a tidy wall is the wrong wall.
 */
.wild-wall-rack {
  columns: 3 clamp(180px, 22vw, 260px);
  column-gap: clamp(12px, 1.6vw, 20px);
}

.wild-shot {
  /* break-inside on the figure, so a caption never parts from its photo. */
  break-inside: avoid;
  margin: 0 0 clamp(12px, 1.6vw, 20px);
  display: block;
}

.wild-shot-photo {
  display: block;
  width: 100%;
  /* Height auto against the width, so the intrinsic ratio survives. The
     600x600 in the markup is a placeholder that reserves space before the
     photo lands; it is not a crop. */
  height: auto;
  border: 3px solid var(--paper);
}

.wild-shot figcaption {
  margin-top: 8px;
  color: #b9b3bd;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.35;
}

@media (max-width: 720px) {
  .wild-wall-rack { columns: 2 auto; }
}