/* Each stop has its own composition. Photos keep their full image area. */
.memory-album{max-width:1160px;margin:40px auto 0;padding:25px 22px}
.memory-spread{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:30px 34px;position:relative;align-items:start;margin-bottom:65px}
.memory-print{position:relative;margin:0;min-width:0;z-index:1;grid-column:span 4;align-self:start}
.memory-photo{display:block;position:relative;padding:0;border:0;background:none;width:100%;cursor:zoom-in;color:inherit;overflow:hidden}
.memory-photo img{display:block;width:100%;height:auto;max-height:460px;object-fit:contain;box-shadow:0 7px 20px #263b3214}
.memory-photo:focus-visible{outline:3px solid var(--wine);outline-offset:7px}
.photo-open-mark{position:absolute;right:13px;bottom:13px;z-index:2;display:grid;place-items:center;width:34px;height:34px;border:1px solid #fffaf0a8;border-radius:50%;color:#fffaf0;background:#183a31de;box-shadow:0 5px 16px #102a2240;pointer-events:none;transition:transform .25s ease,background .25s ease}
.memory-print:not(.has-moment) .photo-open-mark{display:none}
.photo-open-mark svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.memory-photo:hover .photo-open-mark{background:var(--wine-dark);transform:translateY(-2px) scale(1.05)}
.memory-print.has-moment .memory-photo:after{content:'';position:absolute;inset:-80% -35%;background:linear-gradient(105deg,transparent 42%,#fff8d966 49%,transparent 56%);transform:translateX(-48%) rotate(8deg);transition:transform .8s ease;pointer-events:none}
.memory-print.has-moment .memory-photo:hover:after{transform:translateX(48%) rotate(8deg)}
.memory-print figcaption{font-family:var(--memory-caption-font,'Kaiti TC','STKaiti',var(--serif));font-size:var(--memory-caption-size,19px);line-height:1.75;color:#4a544b;margin:17px 8px 0;max-width:none;text-align:center;text-wrap:wrap;line-break:auto;letter-spacing:0;word-break:normal;overflow-wrap:anywhere}
.memory-print.no-wrap figcaption{display:block;width:max-content;max-width:calc(100vw - 72px);margin-left:50%;transform:translateX(calc(-50% + var(--caption-shift,0px)));white-space:nowrap;text-align:center}
.memory-print.no-wrap.crowded-caption figcaption{width:auto;max-width:calc(100% - 16px);margin:17px 8px 0;transform:none;white-space:normal;font-size:var(--memory-caption-size,19px)!important}
.memory-print.has-note figcaption:before{content:'—';color:var(--wine);margin-right:8px}
.memory-photo.in-view img{animation:print-arrive .7s ease-out both}
@keyframes print-arrive{from{opacity:.4;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Loose prints on the table; the small snapshots nest beside a tall print. */
.spread-desk{grid-template-rows:auto auto;gap:35px 55px;padding:12px 30px}
.spread-desk .memory-print{background:#fffaf0;padding:12px 12px 22px;box-shadow:0 9px 25px #223d3220;transform:rotate(var(--tilt))}
.spread-desk .memory-print:before,.spread-scrapbook .memory-print:before{content:'';position:absolute;z-index:2;top:-9px;left:36%;width:85px;height:23px;background:#cdbd8899;transform:rotate(-5deg);pointer-events:none}
.spread-desk .slot-1{grid-column:1/7;grid-row:1/3;margin-top:30px}
.spread-desk .slot-2{grid-column:8/12;grid-row:1}
.spread-desk .slot-3{grid-column:8/13;grid-row:2}
.spread-desk .slot-2 img,.spread-desk .slot-3 img{max-height:300px}
.spread-desk.count-2 .slot-2{grid-column:8/13;margin-top:95px}
/* Macau as a contact print and a pair of smaller street postcards. */
.spread-city{padding:20px 0 15px;border-bottom:1px solid #b59b6c55}
.spread-city .slot-1{grid-column:2/7;grid-row:1/3;padding:14px;background:#283d35;transform:rotate(-1deg)}
.spread-city .slot-1 figcaption{color:#f7ecd5}
.spread-city .slot-2{grid-column:8/12;grid-row:1;margin-top:65px}
.spread-city .slot-3{grid-column:7/12;grid-row:2;margin-left:30px}
.spread-city .slot-2 img,.spread-city .slot-3 img{max-height:290px}
/* Sea spreads: generous landscape above a narrow off-centre keepsake. */
.spread-coast .slot-1{grid-column:1/9;grid-row:1}
.spread-coast .slot-2{grid-column:10/13;grid-row:1;margin-top:150px;transform:rotate(2deg)}
.spread-coast .slot-3{grid-column:4/12;grid-row:2;margin-top:5px}
.spread-coast .slot-3 img{max-height:380px}
.spread-coast:before{content:'';position:absolute;left:7%;right:2%;bottom:15px;height:45%;background:#83b9b415;border-radius:50%;pointer-events:none}
.spread-coast.alternate .slot-1{grid-column:2/8}
.spread-coast.alternate .slot-2{grid-column:9/13;margin-top:65px}
/* Ship's log: a large window, a narrow detail, then a landscape meal. */
.spread-deck{padding:22px 18px;border-left:2px solid #ba9a6150}
.spread-deck .slot-1{grid-column:1/8;grid-row:1}
.spread-deck .slot-2{grid-column:9/13;grid-row:1;margin-top:115px;transform:rotate(1deg)}
.spread-deck .slot-3{grid-column:3/11;grid-row:2}
.spread-deck .slot-3 img{max-height:340px}
.spread-deck.alternate .slot-1{grid-column:2/6}
.spread-deck.alternate .slot-2{grid-column:7/13;margin-top:45px}
/* Domestic scrapbook: four unequal prints around a fold. */
.spread-scrapbook{gap:35px 45px;padding:30px;background:linear-gradient(90deg,transparent 49.8%,#b5a58a20 50%,transparent 50.2%)}
.spread-scrapbook .memory-print{padding:11px 11px 18px;background:#fffaf0;transform:rotate(var(--tilt));box-shadow:0 5px 15px #263b3214}
.spread-scrapbook .slot-1{grid-column:1/6;grid-row:1}
.spread-scrapbook .slot-2{grid-column:8/13;grid-row:1;margin-top:75px}
.spread-scrapbook .slot-3{grid-column:2/8;grid-row:2}
.spread-scrapbook .slot-4{grid-column:9/13;grid-row:2;margin-top:85px}
.spread-scrapbook img{max-height:350px}
/* Beijing: a line wanders between photographs instead of an equal grid. */
.theme-trail{position:relative}
.theme-trail:before{content:'';position:absolute;left:50%;top:20px;bottom:35px;border-left:2px dashed #a1875955;transform:rotate(3deg);pointer-events:none}
.spread-trail{padding:0 15px;margin-bottom:60px}
.spread-trail .slot-1{grid-column:1/6;margin-top:20px}
.spread-trail .slot-2{grid-column:8/13;margin-top:145px}
.spread-trail .memory-print:before{content:'';position:absolute;left:-18px;top:20px;width:8px;height:8px;border-radius:50%;background:#994b4c}
.spread-trail.alternate .slot-1{grid-column:2/7}
.spread-trail.alternate .slot-2{grid-column:9/13;margin-top:70px}
/* Three little everyday scenes, one anchored low between two prints. */
.spread-home .memory-print{padding:13px 13px 20px;background:#fffbf2;box-shadow:0 8px 20px #20372d18}
.spread-home .slot-1{grid-column:1/5;transform:rotate(-3deg)}
.spread-home .slot-2{grid-column:6/10;margin-top:180px;transform:rotate(2deg)}
.spread-home .slot-3{grid-column:9/13;margin-top:0;grid-row:2;transform:rotate(-1deg)}
/* Return to Macau: a street sign opens the spread, then two postcard sizes. */
.spread-postcards .slot-1{grid-column:1/8;grid-row:1;transform:rotate(-1deg)}
.spread-postcards .slot-2{grid-column:9/13;grid-row:1;margin-top:100px;padding:12px;background:#fff8e9;transform:rotate(3deg)}
.spread-postcards .slot-3{grid-column:3/8;grid-row:2;padding:10px 10px 20px;background:#fff8e9;transform:rotate(-2deg)}
.spread-postcards.alternate .slot-1{grid-column:2/6}
.spread-postcards.alternate .slot-2{grid-column:7/13;margin-top:70px}
/* Travel journal: inset portraits, wide scenery and margin notes. */
.spread-journal{padding:20px 15px;border-bottom:1px dashed #b59b6c55}
.spread-journal .slot-1{grid-column:1/5;grid-row:1;transform:rotate(-1.5deg)}
.spread-journal .slot-2{grid-column:6/13;grid-row:1;margin-top:65px}
.spread-journal .slot-3{grid-column:3/11;grid-row:2;margin-top:15px}
.spread-journal .slot-3 img{max-height:360px}
.spread-journal.alternate .slot-1{grid-column:2/7}
.spread-journal.alternate .slot-2{grid-column:9/13;margin-top:120px;transform:rotate(2deg)}
.spread-journal.alternate .slot-3{grid-column:1/9}
.memory-spread.count-1 .slot-1{grid-column:3/11;grid-row:1;margin-top:0}
.memory-spread.count-1 .slot-1.tall{grid-column:4/9}
.station h2,.scene-heading h3,.lightbox-moment h3{text-wrap:balance;line-break:strict;word-break:normal}
.station-story .lead,.scene-heading p,.lightbox-moment p{text-wrap:pretty;line-break:strict}
.lightbox-moment{width:300px;right:30px}
.lightbox-moment h3{font-size:26px}
.lightbox figcaption{font-family:var(--memory-caption-font,var(--serif));font-size:calc(var(--memory-caption-size,19px) + 2px);text-align:center;text-wrap:balance;line-height:1.6}
.memory-photo[data-photo-id="img_4240"],.memory-photo[data-photo-id="img_4247"]{aspect-ratio:4/3;background:#e8decb}
.memory-photo[data-photo-id="img_4240"] img,.memory-photo[data-photo-id="img_4247"] img{position:absolute;left:50%;top:50%;width:75%;height:133.333%;max-height:none;transform:translate(-50%,-50%) rotate(90deg)!important;animation:none!important;object-fit:contain}
.lightbox.orientation-fixed img{transform:rotate(90deg);max-width:65%;justify-self:center}
.lightbox img.is-swapping{animation:lightbox-photo-in .38s ease-out both}
@keyframes lightbox-photo-in{from{opacity:.2;filter:blur(5px) saturate(.7)}to{opacity:1;filter:none}}
.moment-photo-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:25px;padding-top:17px;border-top:1px solid #ffffff25}
.moment-photo-option{position:relative;min-width:0;padding:0;border:1px solid #ffffff2d;background:#ffffff0d;color:#f7f0df;cursor:pointer;overflow:hidden;transition:border-color .25s ease,transform .25s ease,background .25s ease}
.moment-photo-option:hover,.moment-photo-option:focus-visible{border-color:#d8bc7d;background:#ffffff1c;transform:translateY(-2px)}
.moment-photo-option.is-selected{border-color:#d8bc7d;box-shadow:0 0 0 2px #d8bc7d55}
.moment-photo-option img{display:block;width:100%;height:58px;object-fit:cover;opacity:.8}
.moment-photo-option.is-selected img{opacity:1}
.spread-home .slot-3{grid-column:3/9;grid-row:2;margin-top:15px}
.spread-home .slot-2{grid-column:7/13;margin-top:100px}
.spread-home .slot-1{grid-column:1/6}
@media(prefers-reduced-motion:reduce){.memory-photo.in-view img{animation:none}.memory-print.has-moment .memory-photo:after{display:none}}
@media(max-width:1320px){
  /* Keep short/single-photo captions on one line when they fit. The runtime
     adds .crowded-caption for long captions in multi-photo spreads, where a
     local wrap is clearer than crossing into the neighbouring photo. */
  .memory-print.no-wrap.crowded-caption figcaption{max-width:none;margin-left:8px}
}