/* The wedding album as a page of its own: a large sheet of the invitation's ivory stock, a small
   heading with the couple, many prints with white borders in columns (three on a phone, up to five
   on a wide screen) at their own shape, and the full-screen viewer with its caption and arrows. */
.sheet.is-card .sheet-panel:has(.album-card) { width: 100%; height: 100%; }
@media (min-width: 900px) {
  .sheet.is-card .sheet-panel:has(.album-card) { width: min(64rem, 100%); }
}
.sheet-body .card-section.album-card {
  margin: 1.9rem 0 0; padding: 1.4rem 0.85rem 1.1rem; text-align: center; border-radius: 16px;
  background: var(--paper) var(--paper-grain);
  box-shadow: inset 0 0 0 1px rgba(var(--rule-rgb), 0.85), inset 0 0 0 5px var(--paper), inset 0 0 0 6px rgba(var(--rule-rgb), 0.45);
}
.album-card :where(p) { margin: 0; }
.album-kicker { font: 600 var(--fs-caps) var(--font-ui); letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--brand-soft); }
.album-names { margin-top: 0.1rem; font-family: var(--font-script); font-size: clamp(1.6rem, 7.4vw, 2.6rem); line-height: 1.25; color: var(--brand); white-space: nowrap; }
.album-count { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.1rem; color: var(--ink-soft); }

.album-grid { columns: 3; column-gap: 0.4rem; margin-top: 0.9rem; text-align: left; }
.album-grid .photo {
  display: block; break-inside: avoid; margin: 0 0 0.4rem; padding: 3px; aspect-ratio: auto; border-radius: 3px;
  background-color: #fff; background-origin: content-box; background-clip: content-box;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.12), 0 6px 16px rgba(var(--shadow-rgb), 0.12); cursor: zoom-in;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.album-grid .photo:nth-child(4n + 2) { transform: rotate(0.6deg); }
.album-grid .photo:nth-child(4n + 3) { transform: rotate(-0.6deg); }
.album-grid .photo:hover { transform: scale(1.02); box-shadow: 0 2px 4px rgba(var(--shadow-rgb), 0.14), 0 12px 26px rgba(var(--shadow-rgb), 0.18); }
.album-grid .photo img { height: auto; border-radius: 2px; }
.album-grid .photo-soon { min-height: 9rem; display: grid; font-size: 1rem; }
.album-back { margin-top: 0.4rem; min-height: 2.6rem; border-radius: 999px; font-size: 0.9375rem; }
@media (min-width: 700px) {
  .album-grid { columns: 4; column-gap: 0.55rem; }
  .album-grid .photo { margin-bottom: 0.55rem; padding: 5px; }
}
@media (min-width: 1100px) {
  .album-grid { columns: 5; }
}

/* The viewer: one photo on a dark ground. */
.photo-viewer {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: calc(3rem + var(--safe-top)) 0.8rem calc(3.4rem + var(--safe-bottom));
  background: rgba(var(--shadow-rgb), 0.94); animation: viewer-in 0.25s ease both; touch-action: pan-y;
}
@keyframes viewer-in { from { opacity: 0; } }
.viewer-frame { display: grid; justify-items: center; gap: 0.6rem; max-width: 100%; max-height: 100%; margin: 0; }
.viewer-img {
  display: block; max-width: min(96vw, 1100px); max-height: calc(100dvh - 9rem); object-fit: contain;
  border: 6px solid var(--paper); border-radius: 4px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.viewer-caption { margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.2rem; color: var(--paper); text-align: center; }
.viewer-caption:empty { display: none; }
.viewer-count { position: absolute; left: 50%; bottom: calc(1rem + var(--safe-bottom)); margin: 0; transform: translateX(-50%); font: 600 var(--fs-note) var(--font-ui); letter-spacing: 0.12em; color: rgba(var(--paper-rgb), 0.75); }
.viewer-arrow {
  position: absolute; top: 50%; width: 2.8rem; height: 2.8rem; transform: translateY(-50%); border: 0; border-radius: 50%;
  background: rgba(var(--paper-rgb), 0.14); color: var(--paper); font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.viewer-arrow.is-prev { left: 0.6rem; }
.viewer-arrow.is-next { right: 0.6rem; }
.viewer-close { position: absolute; top: calc(0.6rem + var(--safe-top)); right: 0.6rem; color: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  .photo-viewer { animation: none; }
  .album-grid .photo { transition: none; }
}