html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; font-family: system-ui, sans-serif; }
#article-map { width: 100%; height: 100%; background: #edf1eb; }
#map-status { position: absolute; z-index: 2; top: 12px; left: 12px; right: 55px; width: fit-content; max-width: calc(100% - 90px); padding: 9px 12px; border-radius: 5px; background: #fff; color: #283e40; box-shadow: 0 1px 6px #0003; font: 14px/1.45 system-ui, sans-serif; }
#map-status[hidden], #map-retry[hidden] { display: none; }
#map-retry { border: 0; background: #177e80; color: #fff; border-radius: 3px; padding: 5px 9px; cursor: pointer; }
.article-map-marker { border: 2px solid #fff; border-radius: 50%; width: 30px; height: 30px; background: #187f80; color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 1px 4px #0006; }
.maplibregl-popup-content { max-width: min(280px, 70vw); padding: 14px 22px 14px 14px; font: 14px/1.45 system-ui, sans-serif; color: #233b3d; overflow-wrap: anywhere; }
.maplibregl-popup-content strong { display: block; margin-bottom: 5px; }
.maplibregl-popup-content p { margin: 5px 0 9px; }
.maplibregl-popup-content a { color: #006e70; }
.maplibregl-popup-close-button { font-size: 20px; }