/* The selected night atlas, integrated into the complete static homepage. */
.hero--atlas{height:740px;min-height:740px;display:block;background:#05131f;color:#eff6f7}
.hero--atlas .inner-masthead{background:transparent}
.hero--atlas .art{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero--atlas .art:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#030f1a6e,transparent 56%)}
.hero--atlas .copy{position:relative;z-index:2;margin-left:var(--gutter);width:42%;padding-top:59px;pointer-events:none}
.hero--atlas .copy a{pointer-events:auto}
.hero--atlas .copy .eyebrow{font-size:9px;font-weight:500;letter-spacing:.21em;line-height:1.5;color:#acd0e0}
.hero--atlas .copy h1{font-size:clamp(49px,4.7vw,75px);line-height:1.045;font-weight:450;letter-spacing:-.047em;margin:27px 0 26px}
.hero--atlas .standfirst{font-size:18px;line-height:1.55;max-width:340px;color:#c9d8df}
.hero--atlas .actions{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}
.hero--atlas .button{font-size:12px;padding:15px 20px;gap:25px;border-radius:2px;white-space:nowrap}
.hero--atlas .button.primary{background:#a4e5ff;border-color:#a4e5ff}
.hero--atlas .button.secondary{background:#0a253847;color:#d3eef8;border-color:#8dbaca}
.hero--atlas .button span{font-size:19px}
.hero--atlas .city-layer{position:absolute;inset:0;z-index:2}
.hero--atlas .city{position:absolute;background:none;border:0;color:#fff;padding:0;text-align:left;filter:drop-shadow(0 2px 5px #00111f)}
.hero--atlas .city>span{display:block;animation:atlas-levitate 10s ease-in-out infinite;animation-delay:var(--delay);background:linear-gradient(120deg,#0b2539dd,#061727a8);border-top:1px solid #b4e5fa40;backdrop-filter:blur(8px);font-weight:500;letter-spacing:.025em;white-space:nowrap;line-height:1.5}
.hero--atlas .city:hover>span,.hero--atlas .city:focus-visible>span{background:#153a52ed;border-color:#a3dbef}
.hero--atlas .city:hover>span{animation-play-state:paused}
.hero--atlas .hero-signature{position:absolute;right:var(--gutter);bottom:38px;font-size:9px;letter-spacing:.2em;line-height:1.9;color:#9fbbc9;text-transform:uppercase}
.hero--atlas .place-detail{position:absolute;right:var(--gutter);bottom:100px;width:360px;max-height:calc(100% - 210px);overflow-y:auto;padding:26px 30px;background:#071c2ef7;border:1px solid #a1d6eb55;box-shadow:0 20px 70px #00101baa;backdrop-filter:blur(15px);z-index:5}
.hero--atlas .place-detail h2{font-size:29px;font-weight:450;margin:13px 0}
.hero--atlas .place-detail p{line-height:1.5}
.hero--atlas .detail-type{font-size:9px;color:#acd0e0;max-width:255px}
.hero--atlas .detail-region{color:#a4e5ff;font-size:15px;margin-bottom:15px}
.hero--atlas .detail-chamber{font-size:13px;color:#b8cbd5}
.hero--atlas .close-detail{position:absolute;top:7px;right:8px;background:none;color:#c1dae7;border:0;font-size:24px;width:36px;height:36px}
.hero--atlas :is(a,button):focus-visible{outline-color:#b9e9fb}
/* The hidden link to all members and partners, shown on focus as a focused label: from the map's centre, which is in view at every width. */
.hero--atlas .atlas-all:focus{position:absolute;left:50%;top:50%;transform:translateY(-50%);z-index:3;padding:6px 9px;background:#153a52ed;border-top:1px solid #a3dbef;color:#fff;font-size:12px;font-weight:500;letter-spacing:.025em;line-height:1.5;white-space:nowrap}
@keyframes atlas-levitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(max-width:1100px){
 .hero--atlas .copy{width:43%}
 .hero--atlas .copy h1{font-size:51px}
 .hero--atlas .actions{gap:12px}
 .hero--atlas .copy .eyebrow{max-width:260px}
}
@media(max-width:1100px){
 .hero--atlas{height:auto;min-height:0;padding-bottom:420px;display:block}
 .hero--atlas .art{top:auto;bottom:0;height:420px;z-index:0}
 .hero--atlas .art:after{background:linear-gradient(180deg,#05131f,transparent 25%)}
 .hero--atlas .copy{margin:0;padding:30px var(--gutter) 50px;width:100%}
 .hero--atlas .copy h1{font-size:clamp(39px,8.7vw,58px);margin:23px 0;max-width:none}
 .hero--atlas .copy .eyebrow{max-width:none;font-size:8px}
 .hero--atlas .standfirst{font-size:16px;max-width:350px}
 .hero--atlas .actions{gap:12px;margin-top:27px}
 .hero--atlas .button{font-size:11px;padding:13px 14px;gap:14px}
 .hero--atlas .hero-signature{display:none}
 .hero--atlas .place-detail{right:var(--gutter);bottom:20px;width:calc(100% - var(--gutter)*2);max-width:380px;padding:22px}
}
@media(prefers-reduced-motion:reduce){.hero--atlas .city>span{animation:none}}

/* The bitmap, delta and HTML anchors share one 2:1 image coordinate plane. */
.atlas-plane{position:absolute;left:50%;top:50%;width:max(100%,1480px);aspect-ratio:2/1;transform:translate(-50%,-50%)}
.atlas-plane>img{display:block;width:100%;height:100%}
.atlas-plane>.delta-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
body[data-geographic="true"] .city-layer{position:absolute;inset:0;width:100%;height:100%;transform:none}
body[data-geographic="true"] .city>span{font-size:12px;padding:6px 9px}
body[data-geographic="true"] .city{left:var(--label-x,var(--x));top:var(--label-y,var(--y));transform:translate(-50%,-50%);min-width:0;opacity:var(--presence,0);visibility:hidden;pointer-events:none;transition:none}
body[data-geographic="true"] .city[data-visible="true"]{visibility:visible}
body[data-geographic="true"] .city[data-interactive="true"]{pointer-events:auto}
body[data-geographic="true"][data-rotation-held="true"] .city>span{animation-play-state:paused}
body[data-geographic="true"] .city:after,body[data-geographic="true"] .city:before{display:none}
.city-connectors{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.city-connectors path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.city-connectors .leader-underlay{stroke:#04111c;stroke-opacity:.96;stroke-width:3.5}
.city-connectors .leader-line{stroke:#efdab0;stroke-opacity:.95;stroke-width:1.15}
.city-connectors .pin-underlay{fill:#04111c;fill-opacity:.98}
.city-connectors .pin-ring{fill:none;stroke:#ffe0a5;stroke-width:1.5;vector-effect:non-scaling-stroke}
.city-connectors .pin-centre{fill:#fff5de}
.city-connectors g{opacity:var(--presence,0)}
/* The always-shown city (Istanbul): a bigger, steadily lit dot in the same warm palette; no animation, also not in reduced motion. */
.city-connectors .is-always .pin-glow{fill:none;stroke:#ffe0a5;stroke-opacity:.45;stroke-width:1.5;vector-effect:non-scaling-stroke}
.city-connectors .is-always .pin-ring{stroke-width:2;filter:drop-shadow(0 0 2.5px #ffe0a5)}
@media(max-width:1100px){
 body[data-geographic="true"] .atlas-plane{top:50%;left:-43%;width:143%;height:auto;transform:translateY(-50%)}
 body[data-geographic="true"] .city-layer{inset:0;top:0;left:0;width:100%;height:100%;transform:none}
 body[data-geographic="true"] .city>span{font-size:11px;padding:5px 7px}
}
/* Keep the full geographic plane with a quiet lower margin on narrow screens. */
@media(max-width:1100px){
 .hero--atlas{padding-bottom:calc(71.5vw + 32px)}
 .hero--atlas .art{height:calc(71.5vw + 32px)}
 body[data-geographic="true"] .hero--atlas .atlas-plane{top:0;transform:none}
}
