/* The existing perspective collection, extended with a visible eight-place index. */
.voyage .postcard-photo { width: 100%; height: 100%; object-fit: cover; }
.voyage .postcard.is-parked { opacity: 0; visibility: hidden; pointer-events: none; transition: transform .85s cubic-bezier(.25,.6,.2,1), opacity .7s, visibility 0s .85s; }
.voyage .atlas-note h3.destination-title--long { font-size: clamp(2.5rem,3.55vw,4rem); }
.atlas-story-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.voyage .atlas-story-links .text-button { margin-top: 19px; font-size: .85rem; }
.voyage-topline > span:last-child { display: none; }
.voyage > .playback-toggle { top: 22px; right: 6vw; background: #281f19cc; border-color: #d3ad5670; color: var(--cream); }
.atlas-index { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 28px 6vw 12px; }
.atlas-index button { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 12px; min-height: 76px; border: 1px solid #d3ad5638; background: transparent; color: var(--cream); padding: 15px 18px; text-align: left; transition: border-color .3s, background .3s; }
.atlas-index small { color: var(--gold); font-size: .64rem; letter-spacing: .08em; }
.atlas-index span { font: 400 1.1rem/1.25 var(--serif); }
.atlas-index button:hover, .atlas-index button[aria-pressed="true"] { border-color: var(--gold); background: #d3ad5611; }
.atlas-index button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.atlas .atlas-foot { padding: 24px 6vw; font-size: .83rem; }
.destination-chapter { scroll-margin-top: 135px; }
@media(max-width:1050px) { .atlas-index button { padding: 12px; gap: 7px; } }
@media(max-width:750px) {
  .voyage.atlas-body { height: 920px; }
  .voyage-topline { left: 24px; right: 24px; top: 30px; font-size: .58rem; letter-spacing: .09em; }
  .voyage > .playback-toggle { right: 24px; top: 18px; font-size: .76rem; padding: 8px 12px; }
  .voyage .atlas-collage { top: 80px; right: 0; width: 100%; height: 355px; }
  .voyage .postcard { width: 180px; height: 280px; top: 48%; transform: translate(-50%,-50%) translateX(calc(var(--offset)*79%)) rotateY(calc(var(--offset)*-42deg)) scale(.83); }
  .voyage .postcard.active { transform: translate(-50%,-50%) scale(1.04); }
  .voyage .postcard span { left: 15px; bottom: 38px; font-size: 1.6rem; }
  .voyage .postcard small { left: 15px; bottom: 18px; font-size: .54rem; }
  .voyage .atlas-note { top: 450px; left: 24px; width: calc(100% - 48px); max-width: none; }
  .voyage .atlas-note h3 { font-size: 3rem; margin: 15px 0; }
  .voyage .atlas-note h3.destination-title--long { font-size: 2.5rem; }
  .voyage .atlas-note > p:not(.eyebrow) { font-size: .94rem; max-width: 420px; line-height: 1.7; }
  .voyage .atlas-story-links .text-button { margin-top: 12px; }
  .voyage-controls { bottom: 30px; left: 24px; right: 24px; transform: none; justify-content: space-between; }
  .atlas-index { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding: 24px 24px 12px; scrollbar-width: thin; scrollbar-color: #d3ad5670 transparent; }
  .atlas-index button { flex: 0 0 180px; min-height: 86px; padding: 12px; scroll-snap-align: center; }
  .atlas .atlas-foot { padding: 24px; }
  .destination-chapter { scroll-margin-top: 110px; }
}
@media(prefers-reduced-motion:reduce) {
  .voyage .postcard.is-parked, .atlas-index button { transition: none; }
  .voyage .postcard { transform: translate(-50%,-50%) translateX(calc(var(--offset)*90%)) scale(.8); }
  .voyage .postcard.active { transform: translate(-50%,-50%); }
}