.domaintrees-tree-map {
  margin-block: clamp(3rem, 8vw, 7rem);
}

.domaintrees-tree-map__eyebrow {
  color: #287449;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  margin-bottom: .35rem;
  text-transform: uppercase;
}

.domaintrees-tree-map__demo {
  background: #f5f1df;
  border-left: 4px solid #d59d23;
  padding: .85rem 1rem;
}

.domaintrees-tree-map__canvas {
  background: #dce9e5;
  border: 1px solid #b8cbc4;
  border-radius: 1rem;
  box-shadow: 0 1.2rem 3rem rgba(20, 61, 43, .12);
  height: clamp(25rem, 62vh, 43rem);
  margin-top: 1.25rem;
  overflow: hidden;
  width: 100%;
}

.domaintrees-tree-marker {
  align-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  display: flex;
  justify-content: center;
}

.domaintrees-tree-marker--tree { background: #21834f; color: #0c5d34; }
.domaintrees-tree-marker--project { background: #dda52d; color: #9b6500; }
.domaintrees-tree-marker span { font-size: 0; }

.domaintrees-tree-popup span,
.domaintrees-tree-popup em {
  display: block;
  margin-top: .25rem;
}

.domaintrees-tree-map__legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: .9rem;
  gap: .45rem .75rem;
}

.tree-swatch {
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #80928b;
  display: inline-block;
  height: .85rem;
  width: .85rem;
}

.tree-swatch--tree { background: #21834f; }
.tree-swatch--project { background: #dda52d; }

.domaintrees-tree-map__accessible {
  margin-top: 1rem;
}

.domaintrees-tree-map__accessible ol {
  columns: 2;
  font-size: .88rem;
}

@media (max-width: 640px) {
  .domaintrees-tree-map__canvas { height: 28rem; }
  .domaintrees-tree-map__accessible ol { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .leaflet-zoom-animated { transition: none !important; }
}