/* Studio page. Extends css/main.css; only the gallery-specific rules live here. */

.masthead-inner { align-items: flex-start; }
.affiliation a { color: var(--faint); border-bottom: 1px solid transparent; }
.affiliation a:hover { color: var(--accent); border-bottom-color: var(--accent-tint); }

/* Masonry-ish columns: plates keep their own aspect ratio and the column
   balances them, which suits a mix of portrait and landscape scans. */
.plates {
  column-count: 3;
  column-gap: 14px;
  margin-top: 4px;
}

.plate {
  margin: 0 0 14px;
  break-inside: avoid;
  display: block;
}

.plate a {
  display: block;
  border-bottom: none;
  background: var(--band);
}

.plate img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--band-edge);
  transition: opacity .15s ease;
}
.plate a:hover img,
.plate a:focus-visible img { opacity: .82; }

.plate-date {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--faint);
  margin-top: 5px;
}
/* Hidden until a date is known, so undated plates show nothing rather than a gap. */
.plate-date:empty { display: none; }

@media (max-width: 860px) {
  .plates { column-count: 2; }
}

@media (max-width: 520px) {
  .plates { column-count: 1; }
}

@media print {
  .plates { column-count: 2; }
}