.museum-section {
  margin-block-start: clamp(2.5rem, 6vw, 5rem);
  scroll-margin-top: 7rem;
}

.museum-section h2 { margin-block-end: .65rem; }
.museum-section h3 { margin-block: 1.6rem .75rem; }

.museum-map-frame {
  position: relative;
  height: clamp(360px, 48vw, 550px);
  overflow: hidden;
  border: 1px solid #bdb9ac;
  border-radius: .5rem;
  background: #dbe5e7;
}

.museum-map-scroll { height: 100%; overflow: auto; }
.museum-osm {
  position: absolute;
  inset: 0;
  z-index: 1;
  visibility: hidden;
}
.museum-map-frame.has-osm .museum-osm { visibility: visible; }
.museum-osm .leaflet-popup-content ul { margin: 0; padding-inline-start: 1.2em; }
.museum-osm .leaflet-popup-content li + li { margin-block-start: .45em; }

.museum-osm .museum-town-label {
  color: #253b4b;
  font: 650 12px/1.2 system-ui, sans-serif;
  padding: .2rem .35rem;
}
.museum-osm-marker {
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #253b4b;
  color: #fff;
  font: 700 13px/1 system-ui, sans-serif;
  box-shadow: 0 1px 4px #0006;
}
.museum-osm-marker.is-memorial { background: #87492d; }
.museum-osm-marker.is-group { background: #344b39; }

.museum-map {
  display: block;
  width: 100%;
  min-width: 760px;
  height: auto;
  aspect-ratio: 880 / 330;
  stroke: none;
}
.museum-water { fill: #dbe5e7; }
.museum-land { fill: #f1ede0; stroke: #a8a18c; stroke-width: 1.5; }
.museum-geography { fill: #364853; font: 600 16px system-ui, sans-serif; }
.museum-leader { stroke: #52636a; stroke-width: 1.5; }
.museum-pin { color: #253b4b; }
.museum-pin-memorial { color: #87492d; }
.museum-pin circle { fill: currentColor; stroke: #fff; stroke-width: 2; }
.museum-pin text { fill: #fff; font: 700 13px system-ui, sans-serif; }
.museum-pin:hover circle, .museum-pin:focus-visible circle { stroke: #ffd17d; stroke-width: 4; }

.museum-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  padding: 0;
  margin-block: .7rem 0;
  list-style: none;
}

.museum-legend li::before {
  display: inline-block;
  width: .75em;
  height: .75em;
  margin-inline-end: .45em;
  border-radius: 50%;
  background: #253b4b;
  content: '';
}

.museum-legend li + li::before { background: #87492d; }

.museum-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: .65rem 1rem;
  padding: 0;
  list-style: none;
}

.museum-list li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .8rem;
  border: 1px solid #bdb9ac;
  border-radius: .4rem;
  scroll-margin-top: 7rem;
}

.museum-list li:target { outline: 2px solid #87492d; outline-offset: 2px; }
.museum-place-number {
  display: grid;
  flex: 0 0 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 50%;
  background: #253b4b;
  color: #fff;
  font-weight: 700;
}

.museum-list li p { margin: .1rem 0; }
.museum-list li a { display: inline-block; margin-inline-end: .65rem; }
.museum-sources { padding-inline-start: 1.35rem; }