/* Media page: the brand artwork catalogued as plates in a grid, 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: 38rem;
  margin: 1.5rem auto 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* Every plate is mounted square so captions align across a row; wide
   artwork letterboxes on the vellum mount. */
.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; } }

.media-card figure {
  aspect-ratio: 1;
}
.media-card figure img {
  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;
}
.media-card .media-full:hover { color: var(--gold-ink); }

/* The 'Logo explorations' subsection: a divider heading, then a denser
   contact-sheet grid of the prototype marks with compact captions. */
.media-subhead {
  text-align: center;
  margin: 5rem auto 3rem;
}
.media-subhead h2 {
  font-family: 'Cardo', serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin-top: .5rem;
}
.media-grid--dense {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
@media (max-width: 1000px) { .media-grid--dense { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .media-grid--dense { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .media-grid--dense { grid-template-columns: 1fr; } }

.media-card--compact h2 { font-size: 1.05rem; margin-top: .625rem; }
.media-card--compact p { font-size: .85rem; margin-top: .25rem; }
.media-card--compact .media-full { font-size: .8rem; padding-top: .5rem; }