#annotations{position:absolute;inset:0;pointer-events:none}
.spatial-pin{position:absolute;top:0;left:0;padding:0;width:220px;height:110px;text-align:left;background:none;border:0;border-radius:0;box-shadow:none;text-shadow:0 1px 12px #f5f4e8;opacity:0;visibility:hidden;transition:opacity 180ms;pointer-events:none!important}
/* Native input reaches the map even beneath a name or its arrow. The map
   resolves buildings first and clickable label bounds second. */
.spatial-pin[data-visible=true]{opacity:1;visibility:visible}.spatial-pin:active{scale:1}
.spatial-pin .pin-index{display:block;font-size:8px;letter-spacing:.16em;color:#48605a;margin-bottom:6px}
.spatial-pin .pin-top{font:300 34px/.95 Cormorant,serif;letter-spacing:-.025em;gap:15px;display:flex;align-items:center}
.spatial-pin .pin-top b{display:grid;place-items:center;width:28px;height:28px;flex:none;border:1px solid #5b726e80;border-radius:50%;font:16px Futura,sans-serif;transition:transform 220ms var(--ease),background 220ms,color 220ms}
.spatial-pin .pin-rule{display:block;height:1px;margin-top:10px;background:#304e4b50;position:relative;overflow:hidden}
.spatial-pin .pin-rule::after{content:'';position:absolute;inset:0;background:#244e47;transform:scaleX(.13);transform-origin:left;transition:transform 240ms var(--ease)}
.spatial-pin .pin-facts{display:block;height:37px;max-height:none;margin:8px 0 0;font-size:10px;line-height:1.8;opacity:0;transform:translateY(5px);transition:transform 220ms var(--ease),opacity 180ms}
.spatial-pin[data-hover=true] .pin-facts,.spatial-pin:focus-visible .pin-facts{opacity:1;transform:translateY(0)}
.spatial-pin[data-hover=true] .pin-top b,.spatial-pin:focus-visible .pin-top b{background:#294f49;color:#f2f1e8;transform:rotate(45deg)}
.spatial-pin[data-hover=true] .pin-rule::after,.spatial-pin:focus-visible .pin-rule::after{transform:scaleX(1)}
.locator{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:.6;transition:opacity 200ms}
.locator path{fill:none;stroke:#41675f;stroke-width:1;vector-effect:non-scaling-stroke}.locator .signal{stroke:#f6fbe5;stroke-width:2;stroke-dasharray:8 92;opacity:0}.locator circle{fill:#e8eddc;stroke:#355950;stroke-width:1}
.locator[data-hover=true]{opacity:1}
/* The travelling highlight belongs to the visible name, not only to hover.
   Close-up labels keep it until the name itself leaves the map. */
.locator[data-visible=true] .signal{opacity:1;animation:locator-travel 1.8s linear infinite}
@keyframes locator-travel{to{stroke-dashoffset:-100}}
#residence-picker{display:flex;gap:0;background:#f3f1e9ef;border:1px solid #ffffff80;max-width:calc(100% - 165px)}
#residence-picker button{padding:14px 21px;border:0;border-right:1px solid #a1aea330;background:none;text-align:left;min-height:65px;border-radius:0;min-width:125px}
#residence-picker button:last-child{border-right:0}#residence-picker small{display:block;font-size:8px;letter-spacing:.12em;color:#6b7d73;margin-bottom:5px}#residence-picker strong{font:24px Cormorant,serif}
#residence-picker button[data-hover=true]{background:#dce5d4}.details img{background:#d8ded3}.details h2{font-size:clamp(48px,5.2vw,80px)}
body.keyboard .spatial-pin .pin-rule::after{transition:none}
@media(hover:hover) and (pointer:fine){.spatial-pin:hover{background:none}#residence-picker button:hover{background:#dce5d4}}
@media(min-width:761px) and (max-width:900px){.intro{top:105px;max-width:310px}.intro h1{font-size:34px;margin:12px 0}.intro>p:last-child{font-size:11px}}
@media(max-width:900px){.spatial-pin{width:190px}.spatial-pin .pin-top{font-size:30px}.spatial-pin .pin-facts{font-size:9px}}
@media(max-width:760px){.intro{top:100px;max-width:calc(100vw - 44px)}.intro h1{font-size:clamp(28px,8vw,36px);margin-bottom:12px}.intro .eyebrow{font-size:7px}.intro>p:last-child{font-size:11px}.spatial-pin{width:145px;height:91px}.spatial-pin .pin-top{font-size:25px;gap:8px}.spatial-pin .pin-top b{width:23px;height:23px;font-size:13px}.spatial-pin .pin-index{font-size:7px;letter-spacing:.08em}.spatial-pin .pin-facts{font-size:8px}.spatial-pin .pin-facts span{white-space:normal}.bottom-bar{bottom:73px;display:block}.map-controls{position:absolute;right:0;bottom:96px}#residence-picker{width:100%;max-width:none}#residence-picker button{min-width:0;flex:1;padding:12px 10px;min-height:67px}#residence-picker small{font-size:7px}#residence-picker strong{font-size:22px}.details h2{font-size:45px}}
@media(prefers-reduced-motion:reduce){.locator .signal{animation:none!important}.spatial-pin *,.locator{transition:none!important}}
@media(max-width:760px){#residence-picker strong{font-size:19px;white-space:nowrap}}
#residence-picker{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;pointer-events:auto}
#residence-picker button{flex:0 0 auto;scroll-snap-align:start}
#photo-credit{font-size:10px;text-decoration:underline}#photo-credit:not([hidden]){display:block;margin-top:5px}
.spatial-pin{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;height:auto}.spatial-pin .pin-top{font-size:28px;line-height:1.05}.spatial-pin .pin-top>span{min-width:0;flex:1}.spatial-pin .pin-rule{flex:none}
@media(max-width:760px){#residence-picker button{min-width:155px;flex:0 0 auto}.spatial-pin{height:auto}.spatial-pin .pin-top{font-size:23px}}
.spatial-pin,.locator{transition:opacity 160ms ease-out,visibility 0s linear 160ms}
.spatial-pin[data-visible=true],.locator[data-visible=true]{transition-delay:0s}
.locator{opacity:0;visibility:hidden}
.locator[data-visible=true]{opacity:.85;visibility:visible}
.locator[data-visible=true][data-hover=true]{opacity:1}
.locator:not([data-visible=true]) .signal{animation:none;opacity:0}
body.keyboard .spatial-pin,body.keyboard .spatial-pin *,body.keyboard .locator{transition:none}
@media(prefers-reduced-motion:reduce){.spatial-pin,.locator{transition:none!important}}
/* Only an extreme close-up needs a contrast surface. It changes no measured
   label dimensions and cannot intercept map input or cover the connector. */
.spatial-pin[data-docked=true]{isolation:isolate;text-shadow:none}
.spatial-pin[data-docked=true]::before{content:'';position:absolute;inset:-8px -10px calc(var(--pin-surface-bottom,0px) - 8px);background:#f4f3e9f5;box-shadow:0 4px 20px #294f4912;z-index:-1;pointer-events:none}
/* Two price rows under the name: a short label (buy, rent) and the price. The
   labels share one column, so long translations never run into the price.
   Notes, sources and dates stay in the building's detail view. */
.spatial-pin[data-prices=true]{width:280px}
.pin-prices{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;gap:4px 12px;margin-top:11px;font:13px/1.45 Futura,sans-serif;letter-spacing:0;text-shadow:none}
.pin-price-row{display:contents}
.pin-price-label{font-size:11px;color:#48605a}
.pin-price-value{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
@media(max-width:900px){.spatial-pin[data-prices=true]{width:260px}}
@media(max-width:760px){.spatial-pin[data-prices=true]{width:min(250px,calc(100vw - 104px))}.pin-prices{gap:3px 8px;margin-top:9px;font-size:12px}}