.photo-open {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 1px;
  background: transparent;
  cursor: zoom-in;
}

.photo-open:focus-visible {
  outline: 2px solid var(--hot);
  outline-offset: 3px;
}

.gallery-hint { display: none; }

.travel-viewer {
  width: min(440px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 16px;
  overflow: auto;
  border: 0;
  border-radius: 12px;
  background: #fffcf6;
  color: #513943;
  box-shadow: 0 24px 90px #1c111b55;
}

.travel-viewer::backdrop {
  background: #21121dd9;
  backdrop-filter: blur(8px);
}

.travel-viewer[open] { animation: photo-unfold .3s var(--ease); }
.viewer-print { margin: 0; }
.viewer-print img {
  width: 100%;
  height: min(62vh, 560px);
  height: min(62svh, 560px);
  object-fit: contain;
  background: #f4e9e7;
}

.viewer-print figcaption { padding: 17px 5px 13px; text-align: center; }
.viewer-print h2 {
  margin: 0;
  font-family: 'Italiana', Georgia, serif;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -.5px;
}
.viewer-print p {
  margin: 7px 0 0;
  font-size: 10px;
  line-height: 1.5;
  color: #907983;
  letter-spacing: .2px;
}

.viewer-close {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #fff9;
  border-radius: 50%;
  background: #fffcf6ed;
  box-shadow: 0 3px 15px #21121d16;
  font-size: 25px;
  line-height: 1;
}

.viewer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.viewer-controls button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #d6bcc8;
  border-radius: 50%;
  background: transparent;
  font-size: 19px;
  transition: background .2s, transform .2s;
}
.viewer-controls button:hover { background: #f2e2e8; transform: translateY(-2px); }
.viewer-controls span { min-width: 43px; font-size: 10px; text-align: center; color: #907983; }

@keyframes photo-unfold {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.travel-peek {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100dvh;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  background: #21121df5;
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease);
}
.travel-peek[hidden] { display: none; }
.travel-peek.is-visible { opacity: 1; }
.peek-print {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;
  max-width: 800px;
  min-height: 0;
  margin: 0;
  transform: translateY(8px) scale(.97);
  transition: transform .22s var(--ease);
}
.travel-peek.is-visible .peek-print { transform: translateY(0) scale(1); }
.peek-print img { flex: 1; width: 100%; height: 0; min-height: 0; object-fit: contain; }
.peek-print figcaption { flex: none; color: #fffcf6; text-align: center; }
.peek-print figcaption > span { font-family: 'Italiana', Georgia, serif; font-size: 25px; line-height: 1.2; }
.peek-print figcaption > small { display: block; margin-top: 7px; color: #dfc2d0; font-size: 10px; }

@media (max-width: 500px) {
  .instax-collection {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    max-width: 380px;
    height: clamp(472.5px, 150vw, 615px);
    margin: 12px auto 0;
    padding: 0;
  }

  .instax-collection .instax-print,
  .instax-collection.visible .instax-print {
    position: absolute;
    left: var(--scatter-x);
    top: var(--scatter-y);
    z-index: var(--scatter-layer);
    width: 35%;
    min-width: 104px;
    max-width: 133px;
    margin: 0;
    padding: 6px 6px 0;
    transform: rotate(var(--scatter-tilt));
    animation: none;
    box-shadow: 0 7px 16px #482e3824, 0 1px 2px #482e3821;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .instax-collection .photo-open { touch-action: pan-y pinch-zoom; -webkit-touch-callout: none; }

  .instax-collection .instax-print:hover {
    z-index: var(--scatter-layer);
    transform: rotate(var(--scatter-tilt));
  }

  .instax-collection .instax-print.is-lifted,
  .instax-collection .instax-print:has(.photo-open:focus-visible) {
    z-index: var(--scatter-layer);
    transform: translateY(-8px) rotate(0) scale(1.1);
    box-shadow: 0 13px 25px #482e3833;
  }

  .instax-print figcaption { min-height: 51px; padding: 7px 0 9px; }
  .instax-print figcaption > span { font-size: 12px; letter-spacing: -.25px; }
  .instax-print time { margin-top: 4px; font-size: 6px; letter-spacing: .1px; }
  .instax-print figcaption > small { margin-top: 2px; font-size: 6px; }

  .gallery-hint {
    display: block;
    margin: 7px 0 0;
    color: #907983;
    font-size: 9px;
    line-height: 1.5;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .travel-viewer[open] { animation: none; }
  .instax-collection .instax-print,
  .instax-collection.visible .instax-print,
  .viewer-controls button,
  .travel-peek,
  .peek-print { transition: none; }
}