/* Nearby places: the existing brochure map becomes a light, interactive chapter. */
.project-location { background: #f4f4ea; color: #000; scroll-margin-top: 90px; overflow: clip; }
.nearby-inner { max-width: 1680px; margin-inline: auto; padding-block: clamp(88px,6.25vw,120px) 80px; }
.nearby-chapter { padding-inline: max(var(--gutter),calc((100% - 1680px)/2)); }
.nearby-heading { display: grid; grid-template-columns: 1.45fr 1fr; gap: 8%; align-items: end; }
.nearby-heading h2 { font-size: clamp(48px,4vw,72px); line-height: 1.06; letter-spacing: -.035em; text-transform: uppercase; }
.location-intro-copy { max-width: 480px; font-size: 20px; line-height: 1.5; }
.nearby-explorer { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(0,1.8fr); gap: 56px; align-items: center; margin-block-start: 64px; }
.nearby-directory { position: relative; z-index: 2; }
.nearby-directory h3 { font-size: 20px; font-weight: 400; line-height: 1.4; margin-block-end: 24px; text-transform: uppercase; }
.nearby-places { list-style: none; padding: 0; margin: 0; }
.nearby-place-button { display: block; width: 100%; min-height: 64px; padding: 16px 0; border: 0; border-radius: 0; background: transparent; color: #000; text-align: start; }
.nearby-place-name { display: block; font-size: clamp(24px,1.875vw,36px); line-height: 1.25; font-weight: 400; }
.nearby-place-button[aria-expanded='true'] { color: #753323; }
.nearby-place-button:focus-visible,.nearby-pin:focus-visible { outline: 2px solid #753323; outline-offset: 6px; }
.nearby-details { display: grid; margin-block-start: 40px; }
/* Reserve the largest detail panel so switching places never moves the map. */
.nearby-place-detail { grid-area: 1 / 1; border-block-start: 1px solid #b9bdaf; padding-block-start: 24px; font-size: 18px; line-height: 1.5; }
.is-interactive .nearby-place-detail[hidden] { display: block; visibility: hidden; pointer-events: none; }
.nearby-place-detail h4 { font-size: 18px; line-height: 1.4; font-weight: 400; text-transform: uppercase; }
.nearby-journey { display: flex; align-items: center; gap: 12px; margin-block: 20px; font-size: 20px; line-height: 1.4; }
.nearby-journey svg { flex: none; width: 28px; height: 24px; }
.nearby-place-description { max-width: 38ch; }
:not(.is-interactive) > .nearby-inner .nearby-place-detail[hidden] { display: block; }
:not(.is-interactive) > .nearby-inner .nearby-place-detail { grid-area: auto; margin-block-end: 24px; }
.nearby-map { position: relative; min-width: 0; margin: 0; aspect-ratio: 1.6; perspective: 1800px; }
.nearby-map-reveal { position: absolute; inset: 0; transform-style: preserve-3d; }
.nearby-plane { position: absolute; width: 100%; aspect-ratio: 1; top: 50%; left: 0; transform: translateY(-50%) rotateX(58deg) rotateZ(-16deg); transform-style: preserve-3d; }
.location-diagram { display: block; width: 100%; height: auto; overflow: hidden; }
.location-minor-roads { stroke: #b9bdaf; stroke-width: 2; }
.location-major-roads { stroke: #969b89; stroke-width: 5; }
.location-route { stroke: #753323; stroke-width: 4; }
.location-project-footprint { fill: #753323; }
.location-project-leader { stroke: #753323; stroke-width: 1.5; stroke-dasharray: 3 5; }
.location-map-labels { font-size: 20px; fill: #525348; font-weight: 400; direction: ltr; }
.location-map-labels circle { fill: #753323; }
.location-map-labels .location-map-project { font-size: 32px; fill: #753323; font-weight: 500; }
.nearby-marker { position: absolute; left: var(--pin-x); top: var(--pin-y); width: 0; height: 0; transform-style: preserve-3d; }
.nearby-marker-face { position: absolute; width: 0; height: 0; transform: rotateZ(16deg) rotateX(-58deg); transform-style: preserve-3d; }
.nearby-pin { position: absolute; top: -22px; left: -22px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 0; color: #753323; }
.nearby-pin span { width: 12px; height: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px #f4f4ea; transition: box-shadow .25s; }
.nearby-pin[aria-expanded='true'] span { box-shadow: 0 0 0 5px #f4f4ea,0 0 0 6px #753323; }
.nearby-pin-name { position: absolute; top: 22px; left: -100px; width: 200px; text-align: center; font-size: 14px; line-height: 1.4; pointer-events: none; color: #525348; }
.nearby-photo { position: absolute; bottom: 28px; left: -150px; width: 300px; margin: 0; opacity: 0; visibility: hidden; transform-origin: 50% 100%; pointer-events: none; color: #000; background: #f4f4ea; }
.nearby-photo-crop { overflow: hidden; aspect-ratio: 3 / 2; }
.nearby-photo img { width: 100%; height: 100%; object-fit: cover; }
.nearby-photo figcaption { padding-block: 10px; font-size: 14px; line-height: 1.4; }
.nearby-photo.is-unavailable .nearby-photo-crop { display: none; }
.nearby-map:has(.nearby-marker.is-active) .nearby-pin-name { visibility: hidden; }
.nearby-marker.is-active { z-index: 3; }
.nearby-marker.is-active .nearby-photo { opacity: 1; visibility: visible; }
.nearby-fallback-photo { width: 100%; max-width: 320px; height: auto; margin-block-end: 20px; }
.is-interactive .nearby-fallback-photo { display: none; }
html[dir='rtl'] .nearby-heading h2 { line-height: 1.3; letter-spacing: 0; text-transform: none; }
html[dir='rtl'] .location-intro-copy { line-height: 1.7; }
html[dir='rtl'] .nearby-place-description { line-height: 1.7; }
html[dir='rtl'] .location-map-labels { direction: rtl; }
@media(max-width:1199px) { .nearby-explorer { gap: 32px; grid-template-columns: minmax(280px,.85fr) minmax(0,1.5fr); } .nearby-heading { gap: 40px; } .nearby-place-name { font-size: 28px; } .nearby-photo { width: 240px; left: -120px; } .nearby-pin-name { font-size: 12px; width: 150px; left: -75px; } }
@media(max-width:899px) { .nearby-chapter { padding-inline: 24px; } .nearby-inner { padding-block: 80px 64px; } .nearby-heading { grid-template-columns: 1fr; gap: 32px; } .nearby-heading h2 { max-width: 720px; } .nearby-explorer { grid-template-columns: 1fr; gap: 24px; margin-block-start: 48px; } .nearby-directory { display: contents; } .nearby-directory h3 { margin: 0; } .nearby-places { display: flex; flex-wrap: wrap; gap: 12px 24px; } .nearby-place { flex: 1 1 180px; } .nearby-place-button { min-height: 64px; padding-block: 12px; } .nearby-place-name { font-size: 24px; } .nearby-details { order: 4; margin: 0; max-width: 60ch; } .nearby-map { order: 3; max-width: 720px; width: 100%; margin-inline: auto; aspect-ratio: 1.15; } .nearby-photo { width: 240px; left: -120px; } }
@media(max-width:599px) { .nearby-chapter { padding-inline: 20px; } .nearby-inner { padding-block: 72px 48px; } .nearby-heading h2 { font-size: clamp(36px,9.3vw,52px); } .location-intro-copy { font-size: 18px; } .nearby-places { display: block; } .nearby-place-name { font-size: 24px; } .nearby-map { aspect-ratio: .96; margin-block-start: 100px; } .nearby-plane { transform: translateY(-50%) rotateX(28deg) rotateZ(-12deg); } .nearby-marker-face { transform: rotateZ(12deg) rotateX(-28deg); } .nearby-photo { width: 180px; left: -90px; } .nearby-marker[data-place-marker="0"] .nearby-photo { left: -108px; } .nearby-pin-name { display: none; } .location-map-labels { font-size: 28px; } .location-map-labels .location-map-project { font-size: 44px; } }
@media(prefers-reduced-motion:reduce) { .nearby-pin span { transition: none; } }