/* John Morley — Areas Map: the coast, 10-mile rings, a dot and a link for every town */
.jm.amapw { padding: clamp(56px, 7vw, 104px) 0; }
.jm .amapw__head { display: grid; gap: 18px; max-width: 780px; margin-bottom: clamp(24px, 3vw, 40px); }
.jm .amapw__h { margin: 0; font: 800 clamp(40px, 5vw, 76px)/.92 var(--font-display); text-transform: uppercase; letter-spacing: .005em; color: var(--slate); text-wrap: balance; }
.jm .amapw__lead { margin: 0; }

.jm .amap { position: relative; margin: 0; }
.jm .amap__board { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: #D8E2E5; box-shadow: 0 1px 0 rgba(43, 43, 45, .04), 0 24px 60px -36px rgba(43, 43, 45, .35); }
/* jm-base gives every svg an icon stroke; the map's shapes set their own */
.jm .amap__svg { display: block; width: 100%; height: auto; font-family: var(--body); fill: none; stroke: none; stroke-width: 1; }

/* labels: font sizes come from the map (screen-pixel sized), so none are set here */
.jm .amap__svg text { paint-order: stroke; stroke: #EFECE5; stroke-linejoin: round; }
.jm .amap__l { font-weight: 600; fill: var(--slate); }
.jm .amap__l--city { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.jm .amap__l--village { font-weight: 500; fill: var(--slate-2); }
.jm .amap__l.is-on { fill: var(--clay-d); font-weight: 700; }
.jm .amap__l.is-dim { opacity: .5; }
.jm .amap__ring { font-weight: 700; fill: var(--lead); letter-spacing: .02em; }
.jm .amap__lb, .jm .amap__lf { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; fill: var(--clay-d); }
.jm .amap__lbs { font-weight: 600; fill: var(--mute); }
.jm .amap__dist rect { fill: var(--clay); stroke: none; }
.jm .amap__dist text { font-weight: 700; fill: #fff; stroke: none; }

/* dots */
.jm .amap__p { cursor: pointer; }
.jm .amap__p circle { fill: var(--slate); stroke: #fff; transition: fill .15s; }
.jm .amap__p.is-on circle { fill: var(--clay); }
.jm .amap__p.is-dim circle { fill: var(--lead); opacity: .6; }
.jm .amap__svg .amap__hit { fill: transparent !important; stroke: none !important; opacity: 1 !important; }.jm .amap__p:hover circle:not(.amap__hit):not(.amap__pulse),
.jm .amap__p:focus-visible circle:not(.amap__hit):not(.amap__pulse) { fill: var(--clay); opacity: 1; }
.jm .amap__p:focus { outline: none; }
.jm .amap__p:focus-visible circle:not(.amap__hit):not(.amap__pulse) { stroke: var(--clay-d); }
.jm .amap__pulse { fill: none; stroke: var(--clay); transform-box: fill-box; transform-origin: center; animation: jm-amap-pulse 2.4s var(--ease) infinite; }
@keyframes jm-amap-pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }

/* hover tip */
.jm .amap__tip { position: absolute; z-index: 2; display: grid; gap: 2px; padding: 8px 12px; border-radius: 6px; background: var(--slate); color: #fff; font-size: 14px; line-height: 1.3; white-space: nowrap; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); box-shadow: 0 10px 24px -10px rgba(22, 22, 24, .5); }
.jm .amap__tip[hidden] { display: none; }
.jm .amap__tip b { font-weight: 700; }
.jm .amap__tip span { font-size: 12.5px; color: rgba(255, 255, 255, .75); }

/* key and credit */
.jm .amap__key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 14px; font-size: 14px; color: var(--mute); }
.jm .amap__k { display: inline-flex; align-items: center; gap: 8px; }
.jm .amap__k::before { content: ""; flex: none; border-radius: 50%; background: var(--slate); }
.jm .amap__k--base::before { width: 12px; height: 12px; background: var(--clay); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--clay); }
.jm .amap__k--town::before { width: 8px; height: 8px; }
.jm .amap__k--village::before { width: 6px; height: 6px; }
.jm .amap__k--ring::before { width: 22px; height: 0; border-radius: 0; background: none; border-top: 1.5px dashed var(--slate); }
.jm .amap__credit { margin-left: auto; font-size: 12.5px; color: var(--lead); }

@media (max-width: 640px) {
	.jm .amap__credit { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.jm .amap__pulse { animation: none; opacity: .35; }
}