/* ==================================================================
   /fun — the plate index
   ==================================================================
   Every entry is a plate, the way an exhibition catalog lists what is
   on the walls: picture first, then the label under it. Two columns
   above 1140px, one below, sized to the image rather than the shell.

   Tokens, shell, page head, section label, and the placeholder slot
   come from css/site.css.
   ================================================================== */

/* --- groups -------------------------------------------------------- */

.group {
  padding-top: var(--space-12);
  margin-top: var(--space-8);
  border-top: var(--border-width) solid var(--rule);
}

/* --- the plates ---------------------------------------------------- */

.plates {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-16) 2.8rem;
}

@media (min-width: 1140px) {
  .plates {
    grid-template-columns: repeat(2, minmax(0, 34rem));
  }
}

.plate {
  display: grid;
  align-content: start;
}

.plate__figure {
  margin: 0 0 1.2rem;
}

.plate__figure img {
  display: block;
  width: 100%;
  border: var(--border-width) solid var(--rule);
}

.plate__medium {
  margin: 0 0 .4rem;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: var(--leading-snug);
}

.plate__title {
  margin: 0 0 .6rem;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: -.01em;
}

.plate__caption {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.7;
}

/* --- stacked, below the breakpoint ---------------------------------
   Same cap and centering as the homepage and /work, so every page
   holds one line length on a phone and on a tablet. */

@media (max-width: 1139px) {
  .sheet-head,
  .group {
    max-width: 40rem;
    margin-inline: auto;
  }
}

/* --- print ----------------------------------------------------------
   The index prints as a list. A still of an animation is worth little
   on paper, and one of them is a page of strobe, so the pictures go. */

@media print {
  .plate__figure { display: none; }

  .plates { display: block; }

  .plate {
    padding-bottom: 1.2rem;
    break-inside: avoid;
  }
}