.region-page .hero-image { object-position: center; }
.region-map { position: relative; container-type: inline-size; }
.region-map-points { list-style: none; margin: 0; padding: 0; }
.region-map-points li { position: absolute; transform: translate(-50%, -50%); }
.region-map-points .region-number { display: grid; place-items: center; width: clamp(24px, 7.33cqw, 44px); height: auto; min-width: 0; min-height: 0; aspect-ratio: 1; padding: 0; border: 1px solid #70876c; border-radius: 50%; color: #102c32; background: #f7f7ef; font: 600 clamp(11px, 2.33cqw, 14px)/1 sans-serif; text-decoration: none; box-shadow: 0 1px 5px #102c321c; }
.region-map-points .region-number:hover, .region-map-points .region-number[aria-expanded="true"] { color: #f7f7ef; background: #102c32; }
.region-map-key { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 12px; padding: 18px 0 4px; margin: 0; text-align: left; }
.region-map-key .region-key-button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 5px 8px; width: 100%; font-size: 13px; line-height: 1.35; white-space: normal; text-align: left; border-radius: 4px; }
.region-key-button span { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; color: #f7f7ef; background: #102c32; font-size: 11px; }
.region-map-key .region-key-button[aria-expanded="true"] { color: #f7f7ef; background: #102c32; }
.region-page .coverage-art .map-coverage-note { margin-top: 12px; font-size: 11px; color: #61716e; }
@media(max-width:650px) { .region-map-key { gap: 4px 6px; } .region-map-key .region-key-button { font-size: 12px; } }