@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 150ms; }
::view-transition-new(root) { animation-duration: 180ms; }
::view-transition-group(journey-photo) { animation-duration: 260ms; animation-timing-function: ease-out; }
[data-journey-hero] { view-transition-name: journey-photo; }
.journey-returned { outline: 2px dashed #42685b; outline-offset: 7px; }
.photo-viewer[open] { width: min(1080px, 96vw); max-height: 96dvh; padding: 16px 20px; overflow-y: auto; }
.photo-viewer figure { margin: 0; }
.photo-viewer .photo-viewer-stage { height: min(57dvh, 650px); width: 100%; overflow: hidden; display: grid; place-items: center; touch-action: none; cursor: zoom-in; border-radius: 3px; background: #183c37; }
.photo-viewer-stage.is-zoomed { cursor: grab; }
.photo-viewer-stage.is-zoomed:active { cursor: grabbing; }
.photo-viewer .photo-viewer-stage img { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; transform-origin: center; user-select: none; }
.photo-viewer figcaption { min-height: 1.5em; padding: 10px 4px 2px; line-height: 1.5; }
.photo-zoom-tools { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 4px; }
.photo-zoom-tools button { min-height: 36px; min-width: 38px; padding: 5px 12px; font: inherit; cursor: pointer; color: #f6dfac; background: #254e3f; border: 1px solid #aebf9770; border-radius: 5px; }
.photo-zoom-tools button:disabled { opacity: .4; cursor: default; }
.photo-thumbnails { display: flex; gap: 10px; overflow-x: auto; padding: 8px 4px 5px; }
.photo-thumbnails button { flex: 0 0 76px; padding: 4px 4px 9px; background: #e2d9be; border: 2px solid transparent; cursor: pointer; border-radius: 2px; }
.photo-thumbnails button[aria-current=true] { border-color: #50745f; background: #d4dfb4; }
.photo-thumbnails img { display: block; width: 64px; height: 48px; object-fit: cover; }
@media (max-width: 600px) {
  .photo-viewer[open] { padding: 10px; width: 98vw; max-height: 98dvh; }
  .photo-viewer .photo-viewer-stage { height: 48dvh; }
  .photo-viewer-bar h2 { font-size: 1.1rem; }
  .photo-thumbnails button { flex-basis: 62px; }
  .photo-thumbnails img { width: 50px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(journey-photo) { animation: none; }
}