.market { position: relative; }

.market__stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.market__head {
  position: absolute;
  left: var(--gutter);
  top: var(--section-top);
}

.market__close {
  position: absolute;
  left: var(--gutter);
  top: 44vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(22px, min(2.2vw, 3.6vh), 36px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--text-primary);
}
.market__close > span + span { color: var(--text-secondary); }

/* A zero-size marker at the point's position; the canvas draws lines between markers. */
.point {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
}
.point__halo, .point__dot { position: absolute; border-radius: 50%; }
.point__halo { left: -11px; top: -11px; width: 22px; height: 22px; background: var(--hairline); }
.point__dot { left: -4px; top: -4px; width: 8px; height: 8px; background: var(--text-primary); }

.point__label {
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1.4;
}
.point__label img { display: block; width: 18px; height: 18px; }
.point--below .point__label { top: 24px; }
.point--above .point__label { bottom: 24px; }