/* Coverage map in a case study (260 Brands): the key sits above the map on
   every screen size, with the visit levels in a row. The map spans the full
   content width, margin to margin, like the photo gallery below it, at its
   own aspect ratio (nothing cropped); the key starts at the same left edge,
   with the site's 24px step between them. The swatch colours are sampled
   from the map's own bubbles. Loaded on index.html and work.html (both carry
   the case study pop-ups). */

.case__mapgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.case__map {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-xs); /* same corners as the gallery photos */
}

.case__key {
  color: var(--ink-2);
}
.case__key-title {
  margin: 0 0 .35rem;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--paper-ink);
}
.case__key-note {
  margin: 0 0 .9rem;
  font-size: .85rem;
  line-height: 1.5;
}
.case__key-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.1rem;
  font-size: .95rem;
}
.case__key-label { color: var(--paper-ink); }
.case__key-list {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}
.case__key-list li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--paper-ink);
}
.case__key-list li::before {
  content: "";
  width: 1.1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(11, 11, 18, .08);
}