#dance-globe {
  position: relative;
  width: 100%;
  height: max(520px, calc(100vh - 5.5rem));
  overflow: hidden;
  background: radial-gradient(ellipse at center, #0d1626 0%, #060a12 100%);
  touch-action: pan-y;
}

#dance-globe:fullscreen {
  height: 100vh;
}

.ergx-globe-fs {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2147483001;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(254, 250, 243, 0.25);
  border-radius: var(--radius-m, 0.8rem);
  background: rgba(26, 22, 20, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--paper, #fefaf3);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.ergx-globe-fs:hover {
  background: rgba(167, 17, 44, 0.75);
}

.ergx-globe-credit {
  position: absolute;
  bottom: 0.5rem;
  right: 0.75rem;
  z-index: 2147483001;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: rgba(254, 250, 243, 0.45);
  text-decoration: none;
}

.ergx-globe-credit:hover {
  color: rgba(254, 250, 243, 0.8);
}

#dance-globe .ergx-globe-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stone, #e8e0d5);
  font-size: 15px;
}

/* Globe.gl rewrites this element's inline transform every frame,
   so hover effects live on the inner svg, never on the wrapper. */
.ergx-globe-pin {
  cursor: pointer;
  pointer-events: auto;
}

/* The CSS2D layer centers the wrapper on the coordinates; shifting the svg
   up by half its height puts the pin TIP exactly on the spot. The scale
   origin is the tip, so hover growth never moves it. */
.ergx-globe-pin svg {
  display: block;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
  transition: transform 0.18s ease;
  transform-origin: 50% 100%;
  transform: translateY(-50%);
}

.ergx-globe-pin:hover svg,
.ergx-globe-pin.is-active svg,
.ergx-globe-pin:focus-visible svg {
  transform: translateY(-50%) scale(1.15);
}

.ergx-globe-pin:focus-visible {
  outline: none;
}

.ergx-globe-popup {
  position: absolute;
  z-index: 2147483000; /* above the CSS2D layer's per-frame element z-indexes */
  width: 320px;
  background: var(--paper, #fefaf3);
  color: var(--ink, #1a1614);
  border-radius: var(--radius-m, 0.8rem);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  font-family: 'Outfit', sans-serif;
}

.ergx-globe-popup__img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.ergx-globe-popup__body {
  padding: 15px 17px 17px;
}

/* Close button — only meaningful in bottom-sheet (touch) mode. */
.ergx-globe-popup__close {
  display: none;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(26, 22, 20, 0.6);
  color: var(--paper, #fefaf3);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.ergx-globe-popup__meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-burgundy, #a7112c);
  margin: 0 0 0.35rem;
}

.ergx-globe-popup__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.4rem;
}

.ergx-globe-popup__excerpt {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(26, 22, 20, 0.75);
  margin: 0 0 0.6rem;
}

.ergx-globe-popup__link {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-burgundy, #a7112c);
  text-decoration: none;
}

.ergx-globe-popup__link:hover {
  text-decoration: underline;
}

/* Bigger touch targets on coarse pointers: padding grows the hit box while
   the centered transform keeps the visual pin in place. */
@media (pointer: coarse) {
  .ergx-globe-pin {
    padding: 12px;
  }
}

/* Bottom-sheet mode: on touch/narrow screens a card floating next to the pin
   gets clipped and is hard to read, so the popup docks to the bottom of the
   globe instead, full width, with the image beside the text to stay compact. */
.ergx-globe-popup.is-sheet {
  position: fixed;
  left: 0 !important;
  right: 0;
  top: auto !important;
  bottom: 0;
  width: 100%;
  transform: none !important;
  border-radius: var(--radius-l, 1.2rem) var(--radius-l, 1.2rem) 0 0;
  display: flex;
  align-items: stretch;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
}

.ergx-globe-popup.is-sheet .ergx-globe-popup__img {
  width: 38%;
  max-width: 190px;
  height: auto;
  min-height: 100%;
  flex-shrink: 0;
}

.ergx-globe-popup.is-sheet .ergx-globe-popup__body {
  flex: 1;
  min-width: 0;
  padding: 16px 17px 18px;
}

.ergx-globe-popup.is-sheet .ergx-globe-popup__close {
  display: block;
}

.ergx-globe-popup.is-sheet .ergx-globe-popup__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Comfortable tap target for the article link on touch devices. */
.ergx-globe-popup.is-sheet .ergx-globe-popup__link {
  display: inline-block;
  padding: 6px 0;
  font-size: 16px;
}

@media (max-width: 700px) {
  #dance-globe {
    height: max(420px, calc(100vh - 4.5rem));
  }

  .ergx-globe-fs span {
    display: none;
  }
}

/* Very narrow phones: stack image above text instead of side-by-side. */
@media (max-width: 380px) {
  .ergx-globe-popup.is-sheet {
    display: block;
  }

  .ergx-globe-popup.is-sheet .ergx-globe-popup__img {
    width: 100%;
    max-width: none;
    height: 110px;
    min-height: 0;
  }
}