.album-page { background: var(--paper); }
.album-catalogue-link { display: inline-flex; text-decoration: none; }
.album-hero {
  align-items: end;
  background: linear-gradient(135deg, var(--ink), #285b42);
  color: #fff;
  display: grid;
  gap: 4rem;
  grid-template-columns: 1.1fr .9fr;
  min-height: 430px;
}
.album-hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.7rem, 8vw, 7.5rem);
  letter-spacing: -.065em;
  line-height: .82;
  margin: 1rem 0 0;
}
.album-hero h1 em { color: var(--sun); font-weight: 400; }
.album-hero > div:last-child { max-width: 620px; }
.album-hero > div:last-child p { color: rgba(255, 255, 255, .78); line-height: 1.8; }
.album-hero .text-link { color: #fff; }
.album-gallery { padding-bottom: 7rem; }
.album-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.album-item { min-width: 0; }
.album-image-wrap {
  aspect-ratio: 4 / 5;
  background: #e7eadf;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}
.album-image-wrap img {
  height: 100%;
  object-fit: cover;
  user-select: none;
  width: 100%;
  -webkit-user-drag: none;
}
.album-image-wrap:not(.is-watermarked)::after {
  background: url("/laura/watermark.png") center / contain no-repeat;
  content: "";
  height: clamp(36px, 4vw, 56px);
  left: clamp(12px, 2vw, 22px);
  opacity: .48;
  pointer-events: none;
  position: absolute;
  top: clamp(12px, 2vw, 22px);
  width: clamp(36px, 4vw, 56px);
}
.album-item h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; margin: 1rem 0 .2rem; }
.album-item p { color: var(--ink-soft); font-size: .72rem; margin: 0; text-transform: uppercase; }
.album-empty, .album-error, .album-loading { color: var(--ink-soft); grid-column: 1 / -1; padding: 5rem 1rem; text-align: center; }
.album-empty span { color: var(--coral); font-size: 2rem; }
.album-empty h2 { font-family: Georgia, "Times New Roman", serif; font-size: 2.4rem; margin: .8rem 0; }
.album-empty p { font-size: .9rem; text-transform: none; }
@media (max-width: 900px) {
  .album-hero { gap: 2rem; grid-template-columns: 1fr; }
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .album-catalogue-link { font-size: .64rem; }
  .album-catalogue-link::before { content: none; }
}
@media (max-width: 600px) {
  .album-hero { min-height: 360px; }
  .album-grid { grid-template-columns: 1fr; }
  .album-page .site-header nav { display: none; }
}
