.area-map {
    margin: 0;
}

.area-map svg {
    display: block;
    width: auto;
    height: clamp(230px, 30vw, 380px);
    margin-inline: auto;
    /* No clipping. This used to be overflow:hidden to cut off the Ada County
       path, which ran ~990 units past the bottom of the viewBox. That path is no
       longer drawn, every city fits the frame (Kuna reaches y=1098 of 1140), and
       clipping now would only cut the focus ring off the map's own links. */
    overflow: visible;
}

/* These outlines are the only thing identifying four link targets, so they are
   held to WCAG 1.4.11 (3:1 for non-text UI). The old 0.5-alpha stroke measured
   2.38:1 on enamel slate and the 0.08 fill about 1.2:1, a table of contents you
   had to already know was there. 0.78 alpha measures ~3.6:1. */
.map-city path {
    fill: rgba(217, 181, 116, 0.16);
    stroke: rgba(217, 181, 116, 0.78);
    stroke-width: 2.5;
    stroke-linejoin: round;
    transition: fill 160ms ease-out, stroke 160ms ease-out;
}

.map-city text {
    font-family: var(--serif);
    font-size: 46px;
    fill: var(--enamel-letter);
    fill-opacity: 0.72;
    text-anchor: middle;
    dominant-baseline: middle;
    /* A slate halo so a label stays legible over a jagged boundary. */
    paint-order: stroke fill;
    stroke: var(--enamel-slate);
    stroke-width: 7;
    stroke-linejoin: round;
}

/* Raised from 0.26 when the resting fill went 0.08 -> 0.16 for contrast: the
   old value left only 0.10 of separation, and "you are here" has to stay obvious
   now that every other shape is a link too. */
.map-city.is-current path {
    fill: rgba(217, 181, 116, 0.36);
    stroke: var(--brass);
    stroke-width: 4;
}

/* The current city is the one label that must win. Brass on its own brass fill
   disappears, so it goes trim-white and keeps the slate halo. */
.map-city.is-current text {
    fill: var(--trim-white);
    fill-opacity: 1;
    stroke-width: 8;
}

/* On the index the map is the section's table of contents. */
.area-map.is-linked .map-city a {
    cursor: pointer;
}

.area-map.is-linked .map-city:hover path,
.area-map.is-linked .map-city a:focus-visible path {
    fill: rgba(217, 181, 116, 0.24);
    stroke: var(--brass);
    stroke-width: 4;
}

.area-map.is-linked .map-city:hover text,
.area-map.is-linked .map-city a:focus-visible text {
    fill: var(--trim-white);
    fill-opacity: 1;
}

/* A paint change alone cannot carry focus here: fill moved 1.33:1 and stroke
   2.09:1 between states, both under the 3:1 that WCAG 2.2 SC 2.4.11 wants. A
   real ring is also the only focus cue that survives the shapes being small. */
.area-map.is-linked .map-city a:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
}

/* Home base. The map exists to prove "five cities, one drive", which is a claim
   about distance from somewhere, so the somewhere has to be on the drawing. */
.map-home circle {
    fill: none;
    stroke: var(--trim-white);
    stroke-width: 3;
}

.map-home .map-home-pip {
    fill: var(--trim-white);
    stroke: none;
}

.map-home text {
    font-family: var(--sans);
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 0.06em;
    fill: var(--trim-white);
    text-anchor: middle;
    paint-order: stroke fill;
    stroke: var(--enamel-slate);
    stroke-width: 7;
    stroke-linejoin: round;
}

/* The current city stays legible as "you are here" even though every shape is
   now a link: its brass is solid where the others are 0.78, and the rest-state
   rule below never outranks it because .is-current adds a class. */

/* Stacked under the copy, the map was a 230px drawing with five labels and an
   office mark crowding each other. On a phone it becomes the engraving on the
   plaque instead: the city limits run behind the copy as an outline, bleeding
   off the right edge. The linked map is not drawn at all here, so its links
   leave the tab order and the accessibility tree; .map-outline redraws the same
   shapes with no links, labels, or office mark, and the section tabs directly
   below carry the five links. */
.area-map .map-outline {
    display: none;
}

@media (max-width: 960px) {
    .area-map .map-linked {
        display: none;
    }

    /* The aside already spans the screen, so right: 0 is the screen edge. */
    .area-map .map-outline {
        display: block;
        position: absolute;
        top: 46%;
        right: 0;
        height: min(112%, 480px);
        margin: 0;
        transform: translateY(-50%);
    }

    /* Set on the <use>, not the path: a redrawn shape does not match the
       linked map's .map-city rules, it inherits from the element that drew it. */
    .map-outline use {
        fill: none;
        stroke: rgba(217, 181, 116, 0.24);
        stroke-width: 3;
        stroke-linejoin: round;
    }

    /* "You are here", quiet enough to read copy across. */
    .map-outline use.is-current {
        fill: rgba(217, 181, 116, 0.07);
        stroke: rgba(217, 181, 116, 0.5);
        stroke-width: 3.5;
    }
}

/* Up to here the copy runs across the map, so the outline fades out toward the
   left. That costs the western cities: on the Star page the current-city
   highlight sits in the faded part and all but disappears. */
@media (max-width: 780px) {
    .area-map .map-outline {
        -webkit-mask-image: linear-gradient(to right, transparent 8%, #000 78%);
        mask-image: linear-gradient(to right, transparent 8%, #000 78%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-city path {
        transition: none;
    }
}