/* Places map: a plain greyscale world sits behind the places list,
   with a pulsing dot on each city. The land is an SVG used as a mask,
   so it takes the page's own text colour and follows light/dark mode. */
.pm-host{position:relative;isolation:isolate}
.pm{
  position:absolute;z-index:-1;right:0;top:50%;transform:translateY(-50%);
  width:min(54%,780px);aspect-ratio:1000 / 432.8;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%);
  mask-image:linear-gradient(to right,transparent 0,#000 24%);
}
.pm-land{
  position:absolute;inset:0;background:var(--fg);opacity:.2;
  -webkit-mask:url(worldmap-land.svg) center / 100% 100% no-repeat;
  mask:url(worldmap-land.svg) center / 100% 100% no-repeat;
}
.pm-c{position:absolute;width:0;height:0}
.pm-c::before,.pm-c::after{
  content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;
}
.pm-c::before{background:var(--accent)}
.pm-c::after{
  border:1.5px solid var(--accent);
  animation:pm-pulse 3s ease-out infinite;animation-delay:var(--d,0s);
}
.pm-c.home::before,.pm-c.home::after{left:-5px;top:-5px;width:10px;height:10px}
@keyframes pm-pulse{
  0%{transform:scale(1);opacity:.9}
  100%{transform:scale(4.6);opacity:0}
}
:root[data-theme="light"] .pm-c::before{background:#141516}
:root[data-theme="light"] .pm-c::after{border-color:#141516}
@media (max-width:760px){
  .pm{
    width:100%;top:auto;bottom:0;transform:none;opacity:.7;
    -webkit-mask-image:none;mask-image:none;
  }
}
@media (prefers-reduced-motion:reduce){
  .pm-c::after{animation:none;transform:scale(2.4);opacity:.35}
}