/* Contact: towns within about 30 miles of Yeovil. Centred on the town centre only. */
.area-map { --area-map-ring: #859385; margin: 32px 0 0; container-type: inline-size; }
.area-map-svg { width: 100%; max-width: 480px; height: auto; }
.area-map-reach { fill: var(--paper); stroke: var(--line-dark); stroke-width: 1; }
.area-map-ring { fill: none; stroke: var(--area-map-ring); stroke-width: 1.25; stroke-dasharray: 1 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.area-map-svg text { paint-order: stroke; stroke: var(--paper); stroke-width: 6px; stroke-linejoin: round; }
.area-map-north text, .area-map-distance.outer { stroke: none; }
.area-map-distance { font: 500 14px var(--sans); letter-spacing: .04em; fill: var(--muted); }
.area-map-north path { fill: var(--line-dark); }
.area-map-north text { font: 13px var(--display); fill: var(--muted); }
.area-map-town circle { fill: var(--forest); }
.area-map-town text { font: 17px var(--sans); fill: var(--ink); }
.area-map-town.tier-2 circle { fill: var(--line-dark); }
.area-map-town.tier-2 text { font-size: 15.5px; fill: var(--muted); }
.area-map-centre circle { fill: var(--white); stroke: var(--forest); stroke-width: 2; }
.area-map-centre text { font: 18px var(--display); fill: var(--forest); }
.area-map figcaption { margin-top: 16px; font-size: 1rem; line-height: 1.55; color: var(--muted); }
.area-map-towns { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.area-map-towns summary { cursor: pointer; font-weight: 500; }
.area-map-towns h3 { margin: 16px 0 2px; font: 600 1rem/1.4 var(--sans); letter-spacing: 0; }
.area-map-towns p { margin: 0; font-size: 1rem; color: var(--muted); }
.area-map-towns p:last-child { margin-top: 16px; }
/* Hide secondary towns whenever the diagram itself is narrow, at any viewport. */
@container (max-width: 420px) { .area-map-town.tier-2 { display: none; } }
/* Below the desktop layout, give the map card the full row so labels stay legible. */
@media (max-width: 1000px) { .card-grid:has(.area-map) { grid-template-columns: minmax(0, 1fr); } }
@media (forced-colors: active) { .area-map-distance.outer, .area-map-north text, .area-map-north path { fill: CanvasText; } }