.photo-map {
  margin-block: 44px 32px;
  padding: clamp(24px, 4vw, 46px) 6%;
  border-block: 1px solid #d6c7b0;
  background: #f3ecdf;
  scroll-margin-top: 8px;
}

.photo-map-heading {
  margin: 0;
  color: #433729;
  font: 400 clamp(32px, 4vw, 56px)/1.1 var(--serif);
  letter-spacing: -.025em;
}

.photo-map-intro {
  margin: 12px 0 22px;
  color: #675744;
  font: 13px/1.7 var(--sans);
}

.photo-map-browser {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(225px, 1fr);
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
}

.photo-map-stage {
  position: relative;
  aspect-ratio: 640 / 440;
  min-width: 0;
  border: 1px solid #b8c8c8;
  border-radius: 14px;
  background: #e1e9e7;
  direction: ltr;
}

.photo-map-outline {
  display: block;
  width: 100%;
  height: 100%;
}

.photo-map-pin,
.photo-map-choice-marker {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #f8f2e7;
  color: #4d3b2a;
  font: 700 13px/1 var(--sans);
}

.photo-map-pin {
  position: absolute;
  width: 44px;
  height: 44px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 2px solid #7f6d56;
  box-shadow: 0 2px 7px #253b3433;
}

.photo-map-pin[aria-pressed='true'],
.photo-map-choice[aria-pressed='true'] .photo-map-choice-marker {
  z-index: 1;
  border-color: #725134;
  background: #725134;
  color: #fff8ec;
}

.photo-map-pin:hover,
.photo-map-choice:hover,
.photo-map-photo:hover {
  border-color: #7e5c3b;
}

.photo-map :is(button):focus-visible {
  z-index: 2;
  outline: 2px solid #67401e;
  outline-offset: 3px;
}

.photo-map-places {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.photo-map-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 9px 12px;
  border: 1px solid #cfbea4;
  border-radius: 11px;
  background: #faf6ef;
  color: #4d3b2a;
  text-align: start;
  font: 600 13px/1.35 var(--sans);
}

.photo-map-choice[aria-pressed='true'] {
  border-color: #88613f;
  background: #e9d8c0;
}

.photo-map-choice-marker {
  width: 26px;
  height: 26px;
  border: 1px solid #bdab91;
  font-size: 11px;
}

.photo-map-choice-count {
  color: #695842;
  font-variant-numeric: tabular-nums;
}

.photo-map-place-name,
.photo-map-photo-caption {
  overflow-wrap: anywhere;
}

.photo-map-results {
  margin-block-start: 24px;
}

.photo-map-result-heading {
  margin: 0;
  color: #493927;
  font: 400 clamp(25px, 3vw, 36px)/1.15 var(--serif);
}

.photo-map-result-status {
  margin: 6px 0 14px;
  color: #675744;
  font: 12px/1.5 var(--sans);
}

.photo-map-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.photo-map-photo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #cfbea4;
  border-radius: 11px;
  background: #faf6ef;
  color: #4d3b2a;
  text-align: start;
}

.photo-map-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.photo-map-photo-caption {
  padding: 10px 12px;
  font: 600 13px/1.4 var(--sans);
}

@media (max-width: 680px) {
  .photo-map-browser { grid-template-columns: minmax(0, 1fr); }
  .photo-map-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 400px) {
  .photo-map-pin { width: 36px; height: 36px; }
}