/* Media page: the Hall's artwork catalogued as plates in a grid,
   following the courses catalogue pattern. Driven by data/media.toml. */

.media {
  max-width: 72.5rem;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 6rem;
}
.media-head {
  text-align: center;
  margin-bottom: 3.5rem;
}
.media-head h1 {
  font-family: 'Cardo', serif;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-top: .625rem;
}
.media-note {
  max-width: 35rem;
  margin: 1.5rem auto 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 1000px) { .media-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .media-grid { grid-template-columns: 1fr; } }

/* Every plate is mounted square so captions align across a row; wide
   artwork letterboxes on the vellum mount. */
.media-card figure {
  border: 1px solid var(--gold);
  padding: .5rem;
  background: var(--vellum);
  aspect-ratio: 1;
}
.media-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.media-card h2 {
  font-family: 'Cardo', serif;
  font-weight: 400;
  font-size: 1.35rem;
  margin-top: 1rem;
}
.media-card p {
  margin-top: .375rem;
  color: var(--ink-soft);
  font-size: 1rem;
}
/* Cards are flex columns and grid rows stretch, so the link pins to
   the bottom edge and stays level across a row whatever the length of
   the usage note above it. */
.media-card {
  display: flex;
  flex-direction: column;
}
.media-card .media-full {
  align-self: flex-start;
  margin-top: auto;
  padding-top: .75rem;
  letter-spacing: .16em;
  font-size: .9rem;
  color: var(--lapis);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}