#map-dialog{width:min(1200px,calc(100vw - 32px));max-width:1200px;padding:26px 30px;max-height:calc(100dvh - 32px);overflow:auto;background:#ece5d1}
#map-dialog h2{margin:6px 0 12px;font:34px/1.15 Georgia,serif}
#map-dialog .atlas-intro{font:14px/1.55 'Segoe UI',Arial,sans-serif;margin:0 0 24px;color:#596449;max-width:780px}
.atlas-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:26px;align-items:start}
.atlas-land{position:relative;aspect-ratio:10/7;width:100%;min-height:390px;background:#cbd4c3;border:1px solid #99a689;overflow:hidden}
.atlas-land>svg{position:absolute;inset:0;width:100%;height:100%;max-height:none;pointer-events:none}
.atlas-coast{fill:#dedfc6;stroke:#879274;stroke-width:2}.atlas-highland{fill:url(#atlas-hatch)}.atlas-water{fill:none;stroke:#93ac9c;stroke-width:28}.atlas-riverbank{fill:none;stroke:#83967f;stroke-width:1;opacity:.6}.atlas-road{fill:none;stroke:#526a49;stroke-width:2.5;stroke-dasharray:4 5}.atlas-road.future{stroke:#8b937c;stroke-dasharray:2 8}
.atlas-river-name{font:italic 15px Georgia,serif;letter-spacing:.08em;fill:#3e6a57}
.atlas-region{position:absolute;transform:translate(-50%,-50%);font:italic 13px Georgia,serif;color:#6e785c;white-space:nowrap;pointer-events:none}
/* Drawn marks (world-atlas.js): pixel-sized glyphs placed in percent, so they keep their shape on any screen */
.atlas-land>.atlas-marks{overflow:visible}
.atlas-marks use{fill:#e3d3aa;stroke:#4a3d2c;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.atlas-marks .ink{fill:none}.atlas-marks .line{fill:none}
.atlas-marks .am-star{fill:#4a3d2c;stroke:none}.atlas-marks .am-wave{stroke:#3e6a57;stroke-opacity:.75}
.atlas-pond{fill:#8fb0a0;fill-opacity:.6;stroke:#3e6a57;stroke-width:1.2}.atlas-pond-ripple{fill:none;stroke:#3e6a57;stroke-opacity:.55;stroke-dasharray:3 4}
.atlas-compass{position:absolute;left:2.2%;top:2.6%;width:52px;text-align:center;color:#4d634b;pointer-events:none}
.atlas-compass b{display:block;margin-bottom:2px;font:16px/1 Georgia,serif}
.atlas-land .atlas-compass svg{display:block;width:52px;height:52px;max-height:none;fill:#e9ead6;stroke:currentColor;stroke-width:1}
.atlas-compass .ring{fill:none;stroke-dasharray:1.5 2.5}.atlas-compass .ink{fill:currentColor}
.atlas-sea{position:absolute;left:3.3%;top:38%;transform:translate(-50%,-50%) rotate(-90deg);font:italic 13px Georgia,serif;letter-spacing:.16em;white-space:nowrap;color:#6e785c;pointer-events:none}
.atlas-scale{position:absolute;left:2.2%;bottom:1.8%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;font:12px Georgia,serif;color:#4d634b;pointer-events:none}
.atlas-scale i{display:block;width:56px;height:5px;border:1px solid currentColor;background:repeating-linear-gradient(90deg,currentColor 0 14px,transparent 14px 28px)}
/* A place is a point: the dot sits on it, the label hangs below it or on the side the atlas names */
.atlas-location{position:absolute;width:0;height:0;margin:0;padding:0;border:0;background:none;color:#263e2b;cursor:pointer;z-index:1;font:500 12px/1.15 'Segoe UI',Arial,sans-serif}
.atlas-location i{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:grid;place-items:center;width:27px;height:27px;font:600 10px 'Segoe UI',Arial,sans-serif;border-radius:50%;background:#e9ead6;border:1px solid #567051;font-style:normal}
.atlas-location span{position:absolute;left:0;top:18px;transform:translateX(-50%);width:max-content;max-width:120px;padding:3px 5px;text-align:center;background:#e5e5cedf;box-shadow:0 2px 8px #d4d7ba;white-space:normal}
.atlas-location.label-above span{top:auto;bottom:18px}
.atlas-location.label-left span{top:0;left:auto;right:18px;transform:translateY(-50%)}
.atlas-location.label-right span{top:0;left:18px;transform:translateY(-50%)}
.atlas-location.planned i{border-style:dashed;color:#697b5a;background:#d9dfc8}.atlas-location.planned span{color:#697559}
.atlas-location.selected i{background:#405b3a;color:#fff3c9;box-shadow:0 0 0 4px #405b3a25}.atlas-location.selected span{color:#162c18;background:#f5eccd}.atlas-location:hover{z-index:3}
.atlas-detail{padding:8px 0;min-width:0}.atlas-detail small{font:600 10px/1.5 'Segoe UI',Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#657752}
#map-dialog .atlas-detail h3{font:27px/1.15 Georgia,serif;margin:12px 0 18px;letter-spacing:-.02em;text-wrap:balance}.atlas-detail h4{font:600 14px/1.5 'Segoe UI',Arial,sans-serif;margin:22px 0 6px}.atlas-detail p{font:14px/1.65 'Segoe UI',Arial,sans-serif;margin:10px 0;color:#4d5a46}.atlas-connection{border-top:1px solid #9ba68b66;padding-top:14px}
.atlas-visit{margin-top:14px;background:#40573a;color:#f2e7c9;padding:11px 18px;font:500 14px 'Segoe UI',Arial,sans-serif;border:1px solid #40573a}.atlas-unbuilt{font-style:italic!important;color:#7a7f68!important}
.atlas-legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;font:12px/1.5 'Segoe UI',Arial,sans-serif;color:#637255;margin-top:18px}.atlas-legend span{display:flex;align-items:center;gap:8px}
.atlas-legend i{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid #405b3a;border-radius:50%;background:#e9ead6;font:600 10px/1 Georgia,serif;font-style:normal}.atlas-legend .unbuilt{border-style:dashed}
.atlas-legend .atlas-hint{margin-left:auto}
.atlas-location.aside i svg,.atlas-legend .aside svg,.atlas-location.start i svg,.atlas-legend .start svg{width:46%;height:auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.atlas-location.aside i circle,.atlas-legend .aside circle{fill:currentColor;stroke:none}
@media(max-width:1020px){.atlas-layout{grid-template-columns:1fr}.atlas-detail{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.atlas-detail small,.atlas-detail h3,.atlas-detail>p:first-of-type{grid-column:1/-1}.atlas-detail .atlas-visit{width:fit-content}.atlas-land{min-height:440px}.atlas-location{font-size:11px}.atlas-location span{max-width:96px}.atlas-region{font-size:11px}.atlas-legend .atlas-hint{flex-basis:100%;margin-left:0}}
/* The land stretches past 10:7 once min-height wins (under ~700 px): text on the river would stretch with it */
@media(max-width:700px){.atlas-river-name{display:none}}
@media(max-width:500px){#map-dialog{padding:22px 12px}.atlas-land{min-height:470px}.atlas-location{font-size:10px}.atlas-location i{width:23px;height:23px}.atlas-location span{top:15px;max-width:76px}.atlas-location.label-above span{bottom:15px}.atlas-location.planned:not(.selected) span{display:none}.atlas-region{display:none}.atlas-detail{display:block;padding:10px}.atlas-detail p{font-size:14px}}
@media(max-width:360px){.atlas-location span{max-width:58px;padding:2px 3px;font-size:9.5px}
/* two labels hung over a neighbour's dot at 320 px: the observatory's goes above its own, the court's folds onto two lines */
#map-dialog .atlas-location[data-place="observatory"] span{top:auto;bottom:calc(var(--dot)/2 + 4px)}
#map-dialog .atlas-location[data-place="attic"] span{top:calc(var(--dot)/2 + 11px)}
#map-dialog .atlas-location[data-place="floodplain"] span{max-width:52px}}