/* Selective test: original v122 design and motion, with a full-width desktop stage. */
.map-heading,.photo-top,.story,.bridge-copy{text-align:right}
.map-heading .eyebrow{margin-right:0;margin-left:auto;color:#fff}
.photo-scene .photo-area .photo-meta{font-size:14px;line-height:20px;top:calc(100% + 2px)}
@media(max-width:650px){.map-heading{left:auto;right:24px}}
@media(min-width:651px){
  main{width:var(--content-width);max-width:none}
  .bridge-pin{width:min(800px,100%);margin-inline:auto;text-align:right}
  .story{width:min(720px,var(--copy-width),calc(100% - 32px));margin-right:var(--chapter-right);margin-left:auto;text-align:right}
  .photo-scene{justify-content:center;column-gap:32px}
  .photo-scene .photo-heading{width:var(--pw)!important;justify-self:center}
  .photo-scene .photo-area .photo-meta{font-size:16px;line-height:22px;top:calc(100% + 1px)}
  .map-border{border:0}
}

/* Mobile story follows the reference pair during the comparison, inside the same stage. */
@media(max-width:650px) and (min-height:440px){
 .compact-story .photo-scene{height:max-content;min-height:100%;bottom:auto}
 .compact-story .photo-scene .story{margin:0!important;padding:16px 20px 24px;width:100%;max-width:100%;flex:none}
 .compact-story .photo-scene .story h2{margin:12px 0 20px}
}

/* Desktop entrance: main image, first reference, second reference, every 230ms. */
@media(min-width:651px){
 .photo-scene .photo-area{opacity:0;transform:translateY(64px)}
 .photo-scene.gallery-arrived .photo-area{animation:main-photo-arrival .95s both}
 .photo-scene .frames-arrived .frame-choice{animation-delay:.23s}
 .photo-scene .frames-arrived .frame-choice:nth-child(2){animation-delay:.46s}
}
@keyframes main-photo-arrival{
 0%{opacity:0;transform:translateY(64px);animation-timing-function:cubic-bezier(.2,.65,.3,1)}
 80%,100%{opacity:1;transform:translateY(0)}
}

/* Keep each label attached to the image entrance it describes. */
.frame-strip .frame-actions{opacity:0;transform:translateY(64px)}
.frame-strip.frames-arrived .frame-actions{animation:main-photo-arrival .95s both}
@media(min-width:651px){
 .photo-scene .photo-heading{opacity:0;transform:translateY(64px)}
 .photo-scene.gallery-arrived .photo-heading{animation:main-photo-arrival .95s both}
 .frame-strip.frames-arrived .frame-actions{animation-delay:.23s}
}

/* Match the reference-frame rise exactly; tint only the main frame corners. */
@media(min-width:651px){
 .photo-scene.gallery-arrived .photo-area{animation-name:source-frame-arrival}
 .photo-scene .main-photo-corners i{border-color:currentColor}
 .photo-scene .main-photo-corners{color:#ff6845}
 .photo-scene.gallery-arrived .main-photo-corners{animation:main-corners-settle .95s both}
}
@keyframes main-corners-settle{0%,80%{color:#ff6845}100%{color:#fff6e8}}

/* Mobile maps blend into the page; editorial and attribution retain internal padding. */
.map-mobile-bottom-fade{display:none;position:absolute;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(11,18,22,0),#0b1216)}
@media(max-width:650px){
 .map-border{border:0!important}
 .map-mobile-bottom-fade{display:block}
}

/* Return control aligns with the outer left reference-frame corners, including wrapped rows. */
@media(min-width:651px){.frame-actions .back-compare{margin-inline-start:auto}}

/* Overlap the fractional clip edge so no uncovered raster row survives the fade. */
@media(max-width:650px){.map-border{display:none!important}.map-mobile-bottom-fade{background:linear-gradient(to bottom,rgba(11,18,22,0),#0b1216 92%,#0b1216)}}

/* Remove the obsolete gray top veil on every viewport; keep the hero-colored bottom fade. */
.journey:not(.repeat-journey) .map-scene:after{content:none;background:none}

/* Cover the mobile clip seam from outside its composited layer, below photo content. */
.map-edge-seal{display:none;position:absolute;left:0;right:0;height:6px;z-index:2;background:var(--project-background,#0b1216);pointer-events:none}
@media(min-width:651px){.map-edge-seal{display:none!important}}

/* Subpixel painted strokes stay finer on high-density displays, without border rounding. */
.main-photo-corners i,.corner-frame i{border-width:0!important;background-repeat:no-repeat}
.main-photo-corners i:nth-child(1),.corner-frame i:nth-child(1){background-image:linear-gradient(to bottom,currentColor .75px,transparent .75px),linear-gradient(to left,currentColor .75px,transparent .75px)}
.main-photo-corners i:nth-child(2),.corner-frame i:nth-child(2){background-image:linear-gradient(to bottom,currentColor .75px,transparent .75px),linear-gradient(to right,currentColor .75px,transparent .75px)}
.main-photo-corners i:nth-child(3),.corner-frame i:nth-child(3){background-image:linear-gradient(to top,currentColor .75px,transparent .75px),linear-gradient(to left,currentColor .75px,transparent .75px)}
.main-photo-corners i:nth-child(4),.corner-frame i:nth-child(4){background-image:linear-gradient(to top,currentColor .75px,transparent .75px),linear-gradient(to right,currentColor .75px,transparent .75px)}
.frame-choice[aria-pressed="true"] .corner-frame i{color:#ff6845}

/* Mobile overview caption stays over the sea on the first map only. */
@media(max-width:650px){#journey:not(.repeat-journey) .map-heading{left:24px;right:auto;max-width:calc(50% - 24px);text-align:right}}

/* Keep the actual pin aperture in sync when browser bars change the viewport. */
.stage{height:var(--view)!important}

/* Mobile: left-aligned opening and direct comparison controls. */
@media(max-width:650px){
 #journey:not(.repeat-journey) .map-heading{text-align:left}
 #journey:not(.repeat-journey) .map-heading .eyebrow{margin-left:0;margin-right:auto}
 .frame-strip .frame-actions{display:none}
 .single-photo .compare-handle{visibility:visible}
}