.overlap-trial .photo-scene{z-index:3;background:#0b1216;min-height:100%}

@media(max-width:650px){.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}#journey .map-heading{max-width:170px}.photo-scene .photo-area{flex-shrink:0}}
@media(max-width:650px) and (max-height:550px){.restored-hero h1{font-size:clamp(108px,34vw,140px)}.restored-hero .edition{margin-bottom:18px}.hero-content{padding-top:12px;padding-bottom:12px}.restored-opening{margin-top:18px}}
@media(max-width:650px) and (max-height:440px){.restored-hero h1{font-size:100px}.restored-hero .edition{margin-bottom:12px}.restored-opening{margin-top:12px}}

@media(max-width:350px) and (max-height:600px){.restored-hero .edition{font-size:12px}.restored-opening h2{font-size:25px;line-height:1.16;margin-bottom:12px}.restored-opening p{font-size:14px;line-height:1.45;margin-bottom:12px}.restored-opening a{font-size:16px}.restored-opening{margin-top:16px}.hero-content{padding-top:12px;padding-bottom:12px}}

/* Version 32: mobile entrances are coordinated with the foreground layer. */
.project-nav .topics-toggle{display:inline-flex;align-items:center;justify-content:center;line-height:1;padding-block:0;background:transparent;color:#ff6845;border-color:#ff6845}
.project-nav .share-toggle{background:#ff6845;color:#0b1216}
.project-nav .share-toggle:active,.project-nav .share-toggle[aria-expanded=true]{background:#e95332;border-color:#e95332;color:#0b1216}
.project-nav .topics-toggle:active,.project-nav .topics-toggle[aria-expanded=true]{background:#ff6845;border-color:#ff6845;color:#fff}
@media(hover:hover){.project-nav .share-toggle:hover{background:#e95332;border-color:#e95332}.project-nav .topics-toggle:hover{background:#ff6845;border-color:#ff6845;color:#fff}}
@media(max-width:650px){
 .map-mobile-bottom-fade{display:none!important}
 .photo-scene .photo-area,.photo-scene .photo-heading,.photo-scene .frame-choice{animation:none!important;transition:none;will-change:transform,opacity}
 .photo-scene .frame-strip{opacity:1!important}
 .photo-scene .main-photo-corners{color:#ff6845}
}

/* Readable mobile hero text, including browser bars open. Keep the full viewport hero. */
@media(max-width:650px) and (max-height:600px){
 .hero-content{padding:8px 16px 32px;justify-content:center}
 .restored-hero .edition{font-size:12px;line-height:1.4;margin-bottom:18px;padding:3px 10px}
 .restored-opening{margin-top:18px}
 .restored-opening h2{font-size:30px;line-height:1.16;margin-bottom:12px}
 .restored-opening p{font-size:16px;line-height:1.45;margin-bottom:12px;opacity:.85}
 .restored-opening a{font-size:18px;line-height:1.4}
 .restored-opening a span{font-size:24px;line-height:1}
}
@media(max-width:650px) and (max-height:440px){
 .hero-content{padding-top:4px;padding-bottom:12px}
 .restored-hero .edition{margin-bottom:12px}
 .restored-opening{margin-top:12px}
 .restored-opening h2{font-size:28px;margin-bottom:8px}
 .restored-opening p{margin-bottom:8px}
 .restored-opening a{font-size:17px}
 .restored-opening a span{font-size:22px}
}

/* Slightly tighter editorial paragraphs without changing type size. */
.type-bridge .bridge-copy,.story .story-copy{line-height:1.5}

/* Preserve the early exit while interpolating opacity across quick wheel steps. */
@media(max-width:650px){.map-heading.early-caption-fade{transition:opacity .28s ease-out;pointer-events:none}}


.comparison-details{display:none}
.photo-meta .credit-state{display:none!important;max-width:none;width:100%;text-align:center}
.photo-meta[data-photo="0"] .credit-state[data-photo="0"],.photo-meta[data-photo="1"] .credit-state[data-photo="1"]{display:block!important}
@media(max-width:650px){
/* Single-photo experiment: one comparison and a stable metadata footer. */
.photo-scene .photo-area{display:flex;flex-direction:column;gap:10px;margin-bottom:0;padding-bottom:12px;flex:none}
.photo-scene .photo-area .photo-meta{position:static;display:grid;grid-template-columns:1fr;width:100%!important;max-width:100%;min-height:40px;font-size:14px;line-height:20px;text-align:center;padding:0;color:#d4d4ce;transform:none}
.photo-meta .credit-state{display:block!important;grid-area:1/1;opacity:0;transition:opacity .18s ease;align-self:start;font:inherit;color:inherit}
.photo-meta[data-photo="0"] .credit-state[data-photo="0"],.photo-meta[data-photo="1"] .credit-state[data-photo="1"]{opacity:1}
.photo-area .main-photo-corners{bottom:0}
.photo-date,.center-date,.photo-progress{display:none!important}
.comparison-details{display:grid;grid-template-columns:1fr;width:calc(var(--pw) + 36px);max-width:calc(100% - 12px);min-height:26px;flex:none;color:#fff6e8;font-size:17px;line-height:26px;font-variant-numeric:tabular-nums}
.detail-state{grid-area:1/1;display:flex;justify-content:space-between;direction:rtl;opacity:0;transition:opacity .18s ease}
.detail-state strong{font-weight:700}
.comparison-details[data-photo="0"] [data-photo="0"],.comparison-details[data-photo="1"] [data-photo="1"]{opacity:1}
.photo-scene .photo-area .compare-handle{height:var(--ph);top:0;bottom:auto}

@media(max-width:650px){.photo-scene{gap:12px;padding-top:16px;padding-bottom:16px}.photo-scene .photo-heading{min-height:24px}.compact-story .photo-scene .story{padding-top:16px}}

/* Let the framed unit include the credit instead of retaining the old canvas-only height. */
.photo-scene .photo-area{height:auto!important;min-height:0;justify-content:flex-start}
.photo-scene .photo-area canvas{flex:none;height:var(--ph)}

.photo-scene .photo-area{margin-top:0}
.photo-meta .credit-state{text-align:center}

.photo-scene .photo-area .photo-meta{min-height:20px}


.photo-meta .credit-state{max-width:none;width:100%}

.photo-scene .frame-strip{display:none!important}
}
/* A finer control outline, without changing its hover or open colors. */
.project-nav .topics-toggle{border-width:.5px}
@media(max-width:350px),(max-width:650px) and (max-height:600px){
 :root{--header-height:58px}
 .project-nav .nav-inner{padding-inline:12px;gap:10px}
 .project-nav .nav-actions{gap:8px}
 .project-nav .brand{width:88px;height:33px}
 .project-nav .topics-toggle{height:36px;font-size:15px;padding-inline:13px;word-spacing:0}
 .project-nav .share-toggle{width:36px;height:36px}
 .project-nav .share-toggle svg{width:18px;height:18px}
}

.project-nav .topics-toggle,.project-nav .topics-toggle:focus,.project-nav .topics-toggle:focus-visible{border:0;box-shadow:inset 0 0 0 .5px #ff6845}

/* Mobile frame encloses only the image, with equal 18px insets. */
@media(max-width:650px){
 .photo-scene .photo-area{padding-bottom:18px;gap:0}
 .photo-scene .main-photo-corners{inset:-18px -18px auto;height:calc(var(--ph) + 36px)}
 .comparison-details{margin-top:-6px;row-gap:4px;grid-template-rows:26px auto}
 .comparison-details .photo-meta{grid-row:2;grid-column:1;position:static;display:grid;grid-template-columns:1fr;width:100%!important;max-width:none;min-height:20px;margin:0;padding:0;font-size:14px;line-height:20px;color:#d4d4ce;text-align:center;transform:none}
}

/* Give the location heading room above the frame and put credit in the left gutter. */
@media(max-width:650px){
 .photo-scene .photo-heading{margin-bottom:24px}
 .comparison-details{grid-template-rows:26px;row-gap:0}
 .photo-scene .photo-area .photo-meta{position:absolute;top:calc(var(--ph) / 2);left:-10px;right:auto;bottom:auto;width:calc(var(--ph) - 16px)!important;height:16px;min-height:0;max-width:none;margin:0;padding:0;display:grid;line-height:16px;font-size:14px;white-space:nowrap;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;color:#d4d4ce}
 .photo-scene .photo-area .photo-meta .credit-state{line-height:16px;align-self:center}
}

/* Credit stays below the image and clear of the wipe handle at either edge. */
@media(max-width:650px){
 .photo-scene .photo-area .photo-meta{top:calc(var(--ph) + 9px);left:50%;width:100%!important;transform:translate(-50%,-50%);text-align:center}
}

/* Center the complete reference pair on the main framed image, excluding the heading. */
@media(min-width:651px){.photo-scene .frame-strip{grid-row:2;align-self:center}.photo-scene .photo-area{align-self:center}}