.locality.locationAtlas { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(15px,4vw,72px); align-content:center; background:#fcf9f2; }
.locationAtlas .atlasIntro { min-width:0; }
.locationAtlas .eyebrow { color:#815817; }
.locationAtlas .atlasDistances { width:min(100%,22rem); margin:1rem 0 .3rem; }
.atlasDistances>div { display:flex; justify-content:space-between; gap:.7rem; padding:.34rem 0; border-bottom:1px solid #dbd2bf; }
.atlasDistances dd { margin:0; color:#58442e; font-variant-numeric:tabular-nums; }
.locality.locationAtlas .geographicMap { width:100%; max-width:min(100%,calc((100svh - var(--headheight,80px) - 145px)*1.377)); height:auto; margin:0; justify-self:end; background:#f7f4ea; border:1px solid #b8b09c; border-radius:4px; overflow:hidden; scroll-margin-top:var(--headheight); }
.atlasModes { display:flex; background:#21342a; padding:.25rem .35rem; align-items:stretch; }
.atlasModes button { flex:1; padding:.52rem .2rem; color:#f4f0e6; border-bottom:2px solid transparent; font-size:clamp(.72rem,1vw,.88rem); line-height:1.2; }
.atlasModes button[aria-pressed=true] { color:#ffdd87; border-color:#dcb860; }
.geoFrame { position:relative; aspect-ratio:730/530; width:100%; background:#e8eddf; isolation:isolate; overflow:hidden; }
.locality .geoFrame>img,.geoDrawing { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.locality .geoFrame>img { filter:saturate(.72); }
.geoDrawing polygon { fill:#cad8ba; stroke:#696c43; stroke-width:2.5; }
.geoDrawing g { cursor:pointer; }
.geoDrawing g:nth-of-type(even) polygon { fill:#ded8aa; }
.geoDrawing g:focus polygon,.geoDrawing g:hover polygon { fill:#efce7a; stroke:#70551e; }
.geoDrawing text { font:600 26px Georgia,serif; fill:#283624; text-anchor:middle; dominant-baseline:central; pointer-events:none; }
.atlasPin { position:absolute; width:0; height:0; margin:0; padding:0; border:0; background:none; z-index:1; }
.atlasPin::before { content:''; position:absolute; left:-4px; top:-4px; width:9px; height:9px; background:#314b40; border:2px solid white; border-radius:50%; box-shadow:0 1px 4px #0008; }
.atlasPin>span { position:absolute; left:0; bottom:.4rem; transform:translateX(-50%); white-space:nowrap; padding:.18rem .45rem; background:#fffdf2; color:#253c31; border:1px solid #a3997d; border-radius:3px; font:600 clamp(10px,1vw,15px)/1.2 var(--sans,sans-serif); }
.atlasPin.goldPin::before { background:#efa92e; width:13px; height:13px; left:-6px; top:-6px; }
.atlasPin.goldPin>span { background:#1a3026; color:#ffdc79; padding:.27rem .65rem; border:1.5px solid #ffd46f; font-size:clamp(12px,1.18vw,17px); }
.atlasPin.goldPin:focus-visible>span { outline:3px solid #b17e17; }
.atlasCompass,.atlasScale { position:absolute; color:#27352d; background:#fffdf2e8; font:600 10px/1.2 Arial,sans-serif; }
.atlasCompass { top:.45rem; right:.45rem; padding:.3rem; }
.atlasScale { bottom:.45rem; left:.45rem; border:solid #324438; border-width:0 1px 2px; text-align:center; white-space:nowrap; }
.locality .geographicMap figcaption { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin:0; padding:.3rem .55rem; color:#4a5247; font:400 clamp(10px,1vw,12px)/1.25 var(--sans,sans-serif); }
.geographicMap figcaption a { margin-left:auto; text-decoration:underline; }
@media(max-width:700px) and (orientation:portrait) {
  .locality.locationAtlas { display:flex; flex-direction:column; justify-content:center; gap:.65rem; padding-block:.65rem; align-items:stretch; }
  .locationAtlas .atlasIntro>h2 { font-size:clamp(1.46rem,5.4vw,2rem); margin:.2rem 0 .4rem; }
  .locationAtlas .atlasIntro>p { margin:.2rem 0; font-size:.9rem; line-height:1.32; }
  .locationAtlas .atlasDistances { margin:.45rem 0 .18rem; width:100%; font-size:.85rem; }
  .atlasDistances>div { padding:.12rem 0; }
  .locality.locationAtlas .geographicMap { align-self:center; max-width:min(100%,calc(43svh*1.377)); }
  .atlasModes button { padding:.5rem .15rem; }
}
@media (max-height:640px) and (orientation:portrait) { .locationAtlas .geoIntro { display:none; } }
@media (max-height:500px) and (orientation:landscape) {
  .locality.locationAtlas { display:grid; grid-template-columns:1fr 1fr; padding-block:6px; }
  .locationAtlas .geoIntro { display:none; }
  .locationAtlas .atlasIntro h2 { font-size:clamp(1.3rem,3vw,2rem); }
  .locality.locationAtlas .geographicMap { max-width:min(100%,calc((100svh - var(--headheight,60px) - 65px)*1.377)); }
}