/* A geographic backdrop, not a second map application. */
.home-locations {
  overflow: clip;
  isolation: isolate;
}

.home-locations__inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
  align-items: center;
  gap: var(--space-xl);
}

.home-locations__copy {
  position: relative;
  z-index: 1;
  max-width: 36rem;
}

.home-locations__copy .h2 {
  margin-top: var(--space-md);
}

.home-locations__copy .h2 em {
  display: block;
  margin-top: .06em;
  padding-bottom: .08em;
  color: var(--color-accent-soft);
  font-family: var(--font-serif);
  font-size: 1.12em;
  font-weight: 500;
  line-height: 1.12;
}

.home-locations__lead {
  max-width: 42ch;
  margin: var(--space-lg) 0 0;
  color: var(--color-body);
  font-size: var(--text-lead);
}

.home-locations__coverage {
  display: flex;
  align-items: stretch;
  gap: var(--space-lg);
  margin-block: var(--space-lg);
}

.home-locations__coverage-item {
  display: grid;
  gap: var(--space-xs);
}

.home-locations__coverage-item + .home-locations__coverage-item {
  padding-inline-start: var(--space-lg);
  border-inline-start: 1px solid var(--color-border);
}

.home-locations__coverage strong {
  color: var(--color-accent-soft);
  font-size: clamp(3rem, 4.3vw, 5.2rem);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: 1;
}

.home-locations__coverage strong span {
  display: inline-block;
  margin-left: .08em;
  font-size: .5em;
  vertical-align: top;
  line-height: 1.4;
}

.home-locations__coverage p {
  margin: 0;
  color: var(--color-body);
  font-size: var(--text-body);
  line-height: 1.6;
}

.home-locations__note {
  max-width: 44ch;
  margin: var(--space-md) 0 0;
  color: var(--color-muted);
  font-size: .8rem;
  line-height: 1.7;
}

.home-locations__scene {
  position: relative;
  width: calc(100% + max(var(--gutter), (100vw - var(--container-wide)) / 2));
  margin-block: calc(-1 * var(--space-xl));
}

.home-locations__map {
  width: 100%;
  height: auto;
  overflow: visible;
  pointer-events: auto;
}

.home-locations__borders {
  fill: var(--color-surface);
  fill-opacity: .34;
  stroke: var(--locations-map-ink, var(--color-muted));
  stroke-width: 1.1;
  stroke-linejoin: round;
}

.home-locations__rivers {
  fill: none;
  stroke: var(--color-accent-soft);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.home-locations__dots {
  fill: var(--color-accent-soft);
}

.home-locations__city-labels {
  fill: var(--color-body);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
}

.home-locations__map-base {
  --locations-map-base-opacity: .3;
  opacity: var(--locations-map-base-opacity);
}

.home-locations__map-reveal {
  --locations-map-ink: var(--color-accent-soft);
  opacity: 1;
}

.home-locations__hub {
  fill: none;
  stroke: var(--color-accent-soft);
  stroke-width: 1;
}

.home-locations__hub ellipse:first-child { opacity: .65; }
.home-locations__hub ellipse:nth-child(2) { opacity: .2; }
.home-locations__hub circle { fill: var(--color-accent-soft); stroke: none; }

.home-locations__hub-label path {
  fill: none;
  stroke: var(--color-accent-soft);
  stroke-opacity: .55;
}

.home-locations__hub-label text {
  fill: var(--color-text);
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 600;
}

.home-locations__hub-label .home-locations__hub-caption {
  fill: var(--color-body);
  font-size: 12px;
  font-weight: 400;
}

.home-locations__map-note {
  position: absolute;
  bottom: 2%;
  left: 25%;
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--color-muted);
  font-size: .7rem;
}

.home-locations__map-note span {
  width: 1.75rem;
  height: 1px;
  background: var(--color-accent);
}

@media (max-width: 1100px) {
  .home-locations__inner { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .home-locations__scene { width: calc(100% + 2 * var(--gutter)); margin-left: calc(-1 * var(--gutter)); }
  .home-locations__map-note { left: 16%; }
}

@media (max-width: 760px) {
  .home-locations__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .home-locations__copy { max-width: 36rem; }
  .home-locations__scene {
    margin-block: 0 calc(-1 * var(--space-xl));
    aspect-ratio: 1.08;
  }
  .home-locations__map { width: 150%; max-width: none; margin-left: -25%; }
  .home-locations__map-note { left: 10%; bottom: -5%; }
  .home-locations__map-base { --locations-map-base-opacity: .5; }
}

@media (prefers-reduced-motion: reduce), (hover: none) {
  .home-locations__map-base { --locations-map-base-opacity: .5; }
}