.maphead{padding:24px 0 12px}.maphead h1{font-size:clamp(26px,3.4vw,40px);color:var(--ink);margin:10px 0 4px}.maphead p{color:var(--muted);max-width:60ch}
.mfilter{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
#lmap{height:calc(100vh - 220px);min-height:460px;width:100%;border-radius:16px;border:1px solid var(--line);z-index:1}
.leaflet-popup-content{margin:0;width:210px!important}
.pp{width:210px}.pp .pi{height:110px;background-size:cover;background-position:center;background-color:#dfe6f2}
.pp .pc{padding:10px 12px 12px}.pp .pt{font-family:'Space Mono';font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pp .pn{font-family:'Bricolage Grotesque';font-weight:700;font-size:15px;color:var(--ink);margin:2px 0 6px;line-height:1.1}
.pp a.pl-link{font-family:'Space Mono';font-size:11px;color:var(--cobalt);border-bottom:1px solid var(--marigold)}
/* Форма несе категорію нарівні з кольором: на світлій підкладці відтінок
   читається погано, а силует — завжди. Плюс це працює для дальтоніків. */
.marker-dot{border-radius:50%;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.35)}
.marker-dot.m-museum,.marker-dot.m-castle{border-radius:4px}
.marker-dot.m-transport{border-radius:3px;transform:rotate(45deg)}
.marker-dot.m-park{border-radius:50% 50% 50% 3px;transform:rotate(45deg)}
.marker-dot.m-church{border-radius:50% 50% 4px 4px}
.marker-dot.m-top{box-shadow:0 0 0 4px rgba(242,160,61,.42),0 2px 7px rgba(0,0,0,.4)}

@media (max-width:900px){}