html, body { margin: 0; height: 100%; }
body { display: flex; flex-direction: column; color: #2f302b; background: #f4f1eb; font: 13px/1.5 Georgia, serif; }
#archipel-map { flex: 1; min-height: 180px; background: #e6e4db; }
.archipel-map-marker { border-radius: 50%; background: #6b665d; border: 2px solid #f4f1eb; box-sizing: border-box; }
.leaflet-tooltip { color: #2f302b; background: #f4f1eb; border-color: #b8afa3; font: 12px/1.4 Georgia, serif; box-shadow: 0 1px 3px #0002; }
.archipel-map-places { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0; padding: .75rem 1rem; list-style: none; }
.archipel-map-places a { color: inherit; display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; min-height: 32px; }
.archipel-map-places span { display: inline-grid; place-items: center; background: #6b665d; color: #fff; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; }
a:focus-visible, #archipel-map:focus-visible { outline: 2px solid #6b665d; outline-offset: 2px; }
#map-status { margin: 0; padding: .5rem 1rem; font-size: 12px; }
[hidden] { display: none; }
.leaflet-touch .leaflet-bar a, .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font: 400 26px/44px Arial, sans-serif; }
.leaflet-container a.leaflet-popup-close-button { width: 44px; height: 44px; font: 400 26px/44px Arial, sans-serif; }
.leaflet-popup-content { margin-right: 44px; }
.leaflet-control-zoom svg, #map-status svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }