/* ============================================================
   City albums: reserved frames, paper / low-saturation / red index
   ============================================================ */

.album-grid--auto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: clamp(220px, 30vw, 360px);
  grid-auto-flow: dense;
  gap: 10px;
  height: auto;
}

.album-grid--auto .album-frame--landscape {
  grid-column: span 2;
}

.album-grid--auto .album-frame--portrait {
  grid-column: span 1;
}

.album-frame--empty,
.album-frame--missing {
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 46%),
    var(--paper-deep);
}

.album-frame--empty::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  pointer-events: none;
}

.album-frame--empty::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 1px;
  background: var(--red);
  opacity: 0.45;
  transform: translate(-50%, -50%);
}

.album-frame--photo {
  background: var(--paper-deep);
}

.album-frame--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.62) contrast(0.95) sepia(0.07);
  transition: filter 0.6s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.album-frame--photo:hover img {
  filter: saturate(0.74) contrast(0.98) sepia(0.05);
  transform: scale(1.015);
}

.album-frame--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(20, 20, 20, 0.035) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.16), transparent 55%);
  mix-blend-mode: multiply;
  opacity: 0.5;
}

.album-frame__no {
  z-index: 4;
  color: var(--red);
  mix-blend-mode: normal;
  font-weight: 600;
}

.album-frame__red {
  position: absolute;
  right: 14px;
  top: 12px;
  z-index: 4;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--red);
}

.album-frame__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 34px 16px 14px;
  color: var(--paper-soft);
  background: linear-gradient(180deg, transparent, rgba(15, 13, 11, 0.68));
}

.album-frame__caption span {
  display: block;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: rgba(248, 244, 235, 0.7);
}

.album-frame__caption strong {
  display: block;
  margin-top: 4px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
}

.album-frame__caption p {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(248, 244, 235, 0.78);
}

.album-frame--empty .album-frame__no {
  color: var(--red);
}

@media (max-width: 700px) {
  .album-grid--auto {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(220px, 58vw);
  }

  .album-grid--auto .album-frame--landscape,
  .album-grid--auto .album-frame--portrait {
    grid-column: span 1;
  }
}

/* Empty latest-upload slots, no instructional copy */
.photo-masonry__item--empty {
  position: relative;
  min-height: 260px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 46%),
    var(--paper-deep);
}

.photo-masonry__item--empty::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(20, 20, 20, 0.08);
}

.photo-masonry__item--empty .photo-index {
  position: absolute;
  right: 14px;
  top: 12px;
  color: var(--red);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.photo-masonry__item {
  position: relative;
}

.photo-masonry__item img {
  filter: saturate(0.66) contrast(0.96) sepia(0.06);
}

.photo-masonry__item .photo-index {
  position: absolute;
  right: 10px;
  top: 9px;
  z-index: 3;
  color: var(--red);
  background: var(--paper);
  padding: 2px 4px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
}