.photo-walkthrough { width: 100%; min-width: 0; margin: 0; }
.photo-stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #252b20; touch-action: pan-y; }
.photo-stage picture, .photo-stage img { display: block; width: 100%; height: 100%; }
.photo-stage img { object-fit: cover; }
.story-bars { position: absolute; z-index: 3; top: 8px; left: 10px; right: 10px; display: flex; gap: 5px; }
.story-bar { flex: 1; min-width: 0; height: 26px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.story-bar-track { display: block; height: 3px; overflow: hidden; border-radius: 2px; background: #f5efe088; box-shadow: 0 1px 3px #0008; }
.story-bar-fill { display: block; width: 0; height: 100%; background: var(--cream); }
.story-tap { position: absolute; z-index: 2; top: 36px; bottom: 0; width: 50%; padding: 0 15px; border: 0; color: var(--cream); background: transparent; cursor: pointer; font: inherit; font-size: 32px; }
.story-tap.previous { left: 0; text-align: left; }
.story-tap.next { right: 0; text-align: right; }
.story-tap span { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #283021a8; opacity: 0; transition: opacity .2s; }
.photo-stage:hover .story-tap span, .story-tap:focus-visible span { opacity: 1; }
.story-bar:focus-visible, .story-tap:focus-visible, .photo-walkthrough:focus-visible { outline: 2px solid var(--cream); outline-offset: -3px; }
.photo-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 47px; padding-top: 12px; font-size: 14px; }
.photo-caption { margin: 0; flex: 1; }
.photo-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .photo-stage { aspect-ratio: 4 / 5; }
  .photo-controls { font-size: 13px; }
  .story-tap span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .story-tap span { transition: none; } }