.critish-map{position:relative;height:430px;width:100%;border-radius:14px;overflow:hidden;background:#cfd8dc;isolation:isolate}
@media(max-width:640px){.critish-map{height:340px}}
.critish-map .leaflet-container{font-family:inherit}
/* map looks (data-tiles) */
.critish-map.is-dark{background:#1b1d22}

.critish-map.is-sepia{background:#e8dcc0}
.critish-map.is-sepia .leaflet-tile-pane{filter:sepia(.75) saturate(.85) contrast(.95) brightness(1.02)}
.critish-map.is-mono{background:#ddd}
.critish-map.is-mono .leaflet-tile-pane{filter:grayscale(1) contrast(1.12)}
.critish-map.is-gold{background:#0e0b08}
.critish-map.is-noir{background:#14110e}
.critish-map.is-noir::after{content:"";position:absolute;inset:0;background:#3a2a10;opacity:.2;pointer-events:none;z-index:450}
.critish-map.is-cream{background:#eef3dc}
.critish-map.is-cream .leaflet-tile-pane{filter:sepia(.3) hue-rotate(38deg) saturate(.85) brightness(1.03) contrast(.97)}
.critish-map.is-warm{background:#f1d9bd}
.critish-map.is-warm .leaflet-tile-pane{filter:sepia(.55) hue-rotate(-12deg) saturate(1.35) brightness(1.02)}

/* bubble shapes (data-bubble) */
.critish-map[data-bubble=squircle] .bubble{border-radius:26px}
.critish-map[data-bubble=hex] .bubble{border-radius:0;border:0;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);box-shadow:none;filter:drop-shadow(0 6px 10px #0006)}
.critish-map[data-bubble=ring] .bubble{border:3px solid var(--ring,#e6c878)}
.critish-map[data-bubble=wide] .bubble{width:132px;height:84px;border-radius:14px}
.map-note{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:800;max-width:calc(100% - 90px);padding:8px 16px;border-radius:99px;background:#111d;color:#fff;font:600 .85rem/1.3 system-ui,sans-serif;text-align:center;pointer-events:none}
.map-note[hidden],.map-note:empty{display:none}

/* One place at a time: pops in, breathes, fades out */
.bubble-wrap{background:none;border:0}
.bubble{will-change:transform;position:relative;width:58px;height:58px;margin:0 auto;border-radius:50%;background:#fff;border:3px solid #fff;opacity:.94;box-shadow:0 4px 12px #0006,0 0 0 1px #0003;display:grid;place-items:center;overflow:hidden;cursor:pointer;animation:bubble-pop .8s cubic-bezier(.2,1.5,.4,1) both,bubble-breathe 5s ease-in-out .8s infinite}
.critish-map .leaflet-marker-pane .bubble img{position:absolute;inset:0;width:100%;height:100%;display:block;box-sizing:border-box}  /* beats Leaflet's "width:auto" on marker images */
.bubble span{color:#e6c878;font:700 1.2rem Georgia,serif;letter-spacing:.04em}
.bubble-name{margin:5px auto 0;width:max-content;max-width:116px;padding:2px 8px;border-radius:99px;background:#111d;color:#fff;font:700 .6rem/1.3 system-ui,sans-serif;text-align:center}
.bubble-wrap{animation:fade-in .6s both}
.bubble-wrap.leaving{animation:fade-out .75s ease-in forwards}
@keyframes bubble-pop{from{transform:scale(0) translateY(18px)}to{transform:scale(1)}}
@keyframes bubble-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes fade-out{to{opacity:0;transform:scale(.9)}}
@media(prefers-reduced-motion:reduce){.bubble{animation:none}.bubble-wrap,.bubble-wrap.leaving{animation:none}.bubble-wrap.leaving{opacity:0}}
.leaflet-popup-content{margin:12px 14px;font:.9rem/1.4 system-ui,sans-serif}