/* A vertical destination gallery, with a small horizontal album inside each city. */
.journey {position:relative;background:var(--bg);padding:70px var(--gutter)}
.journey__head {text-align:center;margin:0 0 40px}
.journey__head h2 {font-family:var(--font-display);font-weight:400;font-size:clamp(26px,2.7vw,40px);letter-spacing:-.035em;line-height:1.15}
.journey__head h2 em {font-weight:400}
.journey__photo {margin:0 0 40px}
.journey__photo img {display:block;width:100%;height:auto}
.journey__photo figcaption {font-size:13px;margin-top:10px}
.journey__caption,.journey__controls,.journey__photo-controls {display:none}
.journey.is-enhanced {padding:0}
.is-enhanced .journey__pin {position:sticky;top:0;height:100svh;overflow:clip;isolation:isolate}
.is-enhanced .journey__head {position:absolute;top:80px;left:8%;right:8%;z-index:3;margin:0;pointer-events:none}
.is-enhanced .journey__stage {position:absolute;inset:0;z-index:1}
.is-enhanced .journey__photo {position:absolute;left:50%;top:0;width:var(--journey-photo-w);height:var(--journey-photo-h);margin:0;will-change:transform}
.is-enhanced .journey__slides {position:relative;width:100%;height:100%}
.is-enhanced .journey__slide {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none}
.is-enhanced .journey__slide.is-active {opacity:1}
/* A small increase in the fitted portrait, keeping one complete image centered. */
.is-enhanced .journey__slide.is-portrait {inset:-4%;width:108%;height:108%;max-width:none}
.is-enhanced .journey__photo figcaption {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.is-enhanced .journey__caption {display:block;position:absolute;top:46%;left:4.7%;width:14%;z-index:2;pointer-events:none}
.journey__caption>span {display:block;font-family:var(--font-body);font-size:10px;letter-spacing:.04em;margin-bottom:14px}
.journey__caption h3 {font-family:var(--font-display);font-size:clamp(21px,2.35vw,38px);line-height:1.05;letter-spacing:-.05em;font-weight:400;margin:0}
.is-enhanced .journey__photo-controls {display:block;position:absolute;right:4.7%;top:46%;text-align:center;z-index:3}
.journey__photo-count {font-family:var(--font-display);font-style:italic;font-size:13px}
.journey__photo-controls>div {display:flex;gap:14px;margin-top:12px}
.journey__photo-controls button {color:inherit;background:none;border:0;font-size:20px;width:36px;min-height:40px;padding:8px;cursor:pointer}
.journey__photo-controls button:disabled {opacity:.22;cursor:default}
/* The reference's italic numerals, small dots and fine draggable rule. */
.is-enhanced .journey__controls {position:absolute;bottom:5.5%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;z-index:3;white-space:nowrap}
.journey__controls>button {display:flex;align-items:center;gap:16px;background:none;border:0;color:inherit;padding:8px;cursor:pointer}
.journey__controls>button:disabled {cursor:default}
.journey__controls>button span {font-family:var(--font-display);font-style:italic;font-size:34px;font-weight:400;line-height:1.2;min-width:24px;text-align:center}
.journey__controls i {display:block;width:4px;height:4px;border-radius:50%;background:currentColor}
.journey__curve {width:7px;height:11px;fill:none;stroke:currentColor;stroke-width:1;transition:transform .3s}
.journey__curve--left {transform:rotateY(180deg)}
.journey__controls button:disabled .journey__curve {opacity:.25}
.journey__controls button:not(:disabled):hover .journey__curve {transform:translateX(3px)}
.journey__controls button:not(:disabled):hover .journey__curve--left {transform:rotateY(180deg) translateX(3px)}
.journey__scrubber {appearance:none;-webkit-appearance:none;width:140px;height:36px;margin:0 4px;background:transparent;color:var(--text);cursor:grab;border-radius:8px;padding:0 10px;--position:0%}
.journey__scrubber:hover {background:rgba(0,32,91,.035)}
.journey__scrubber:active {cursor:grabbing}
.journey__scrubber::-webkit-slider-runnable-track {height:1px;background:linear-gradient(to right,var(--text) var(--position),rgba(0,32,91,.25) var(--position))}
.journey__scrubber::-webkit-slider-thumb {appearance:none;-webkit-appearance:none;width:5px;height:5px;background:var(--text);border:0;border-radius:50%;margin-top:-2px}
.journey__scrubber::-moz-range-track {height:1px;background:rgba(0,32,91,.25)}
.journey__scrubber::-moz-range-thumb {width:5px;height:5px;border:0;background:var(--text);border-radius:50%}
.journey button:focus-visible,.journey__scrubber:focus-visible {outline:1px solid currentColor;outline-offset:4px}
@media(max-width:700px){
 .is-enhanced .journey__head {top:82px;left:8%;right:8%}
 .journey__head h2 {font-size:25px;line-height:1.12;max-width:280px;margin:0 auto}
 .journey__head h2 em {display:block}
 .is-enhanced .journey__caption {top:var(--journey-caption-y);left:8%;width:66%}
 .journey__caption>span {font-size:10px;margin-bottom:8px}
 .journey__caption h3 {font-size:28px}
 .is-enhanced .journey__photo-controls {top:var(--journey-caption-y);right:8%}
 .journey__photo-controls>div {margin-top:4px;gap:12px}
 .journey__photo-controls button {font-size:18px;padding:8px}
 .is-enhanced .journey__controls {bottom:6%;gap:4px}
 .journey__controls>button {gap:12px;padding:8px 4px}
 .journey__controls>button span {font-size:27px}
 .journey__scrubber {width:114px;margin:0}
}
@media(max-height:600px) and (min-width:701px){.is-enhanced .journey__head {top:66px}.journey__head h2 {font-size:24px}}
@media(prefers-reduced-motion:reduce){.journey__curve {transition:none}}
