body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  color: #000;
  background: #fff;
}

a { color: inherit; }

.quiet { color: #666; font-size: 0.875rem; }

/* plain pages */

.page { max-width: 40rem; margin: 0 auto; padding: 16px; }
.page nav a { text-decoration: none; }
.page h2 { font-size: 1rem; margin: 2rem 0 0.5rem; }
.page ul { list-style: none; padding: 0; margin: 0; }
.page li { margin: 0 0 1rem; }
.page img { display: block; max-width: 100%; }
.page input { font: inherit; width: 100%; box-sizing: border-box; margin: 1.5rem 0 0; padding: 4px 6px; }

/* the map: homepage and any/ */

.home { overflow: hidden; height: 100vh; }
#intro { text-align: center; padding-top: 20vh; cursor: pointer; }
#intro h1 { margin: 0; font-weight: normal; }
#intro p { margin: 0.5rem 0; letter-spacing: 0.5rem; }

#map { position: fixed; inset: 0; }
#map svg { position: absolute; width: 100%; height: 100%; }
#map path { fill: none; stroke: #ccc; }
.node { position: absolute; left: 0; top: 0; text-decoration: none; }
.node .mark { display: block; line-height: 1; }
.node .dot { display: block; border-radius: 50%; background: currentColor; }
.node .label { position: absolute; width: max-content; color: #000; line-height: 1.3; }
.node .label .title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node .label small { display: block; color: #666; }
.node.crowded .label { visibility: hidden; }
.node.crowded:hover .label, .node.crowded:focus .label, .node.hot .label { visibility: visible; background: #fff; z-index: 1; }
#map path.hot { stroke: #888; }
#map { cursor: pointer; }