/* Variant D — The Reserve Globe (adds to style.css) */
.hero .hero-art { display: none; }

.d-globe-wrap {
  position: absolute;
  top: 46%;
  /* anchored to the content column, not the viewport edge - on wide
     monitors the globe stays beside the copy instead of drifting away */
  left: calc(50% + 330px);
  width: min(680px, 48vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 1;
}
/* the hero's transparent content container sits above the canvas (z-index 2)
   and would swallow every drag - let empty space fall through to the globe
   while the actual copy, module, and proof line keep their own events */
.hero-inner { pointer-events: none; }
.hero-inner .hero-copy,
.hero-inner .module,
.hero-inner .hero-proof,
.hero-inner a,
.hero-inner button { pointer-events: auto; }

.d-globe-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}
.d-globe-wrap canvas.dragging { cursor: grabbing; }
.d-globe-wrap canvas.star-hover { cursor: pointer; }

.d-globe-label {
  position: absolute;
  padding: .4rem .85rem .45rem;
  background: rgba(2, 31, 26, .88);
  border: 1px solid rgba(184, 155, 94, .55);
  border-radius: 4px;
  transform: translate(-50%, -135%);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.d-globe-label.show { opacity: 1; }
.d-globe-label .d-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold-bright);
  line-height: 1.2;
}
.d-globe-label .d-hint {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(246, 241, 232, .75);
}

@media (max-width: 1180px) {
  .d-globe-wrap { left: 82%; opacity: .45; }
}
/* touch devices at ANY width (incl. phones rotated to landscape): the globe is
   never interactive, so a touch-action:none canvas can never trap a scroll swipe */
@media (pointer: coarse) {
  .d-globe-wrap { pointer-events: none; }
  .d-globe-wrap canvas { touch-action: auto; cursor: default; }
}

/* phones: the globe returns as a quiet backdrop behind the hero copy.
   Non-interactive (pointer-events none, touch-action restored) so it can
   never trap a vertical swipe the way an interactive canvas would. */
@media (max-width: 760px) {
  .d-globe-wrap {
    /* small globe peeking in at the top right, echoing the desktop layout */
    left: auto;
    right: -16vw;
    top: 150px;
    width: min(62vw, 270px);
    transform: translateY(-50%);
    opacity: .5;
    pointer-events: none;
  }
  .d-globe-wrap canvas { touch-action: auto; cursor: default; }
  .d-globe-label { display: none; }
}