/* Dot globe: the box the planet draws into. part.js adds a <canvas class="dot-globe__canvas"> that fills it.
   .dot-globe--hero = the source framing: a very wide, short box centred under the hero's buttons, so only the top
   of a big planet shows, arcing behind the content and cut off by the section's bottom edge. Put it inside a
   section with position: relative and overflow: hidden, and lift the section's content above it (z-index 1).
   Knobs (on .dot-globe--hero or a parent; defaults = Decimals' hero):
     --dg-top     clamp(220px, 20vw, 292px)   where the box starts, from the top of the section
     --dg-width   min(160vw, 2200px)          box width (wider than the screen on purpose: the arc is a planet)
     --dg-height  clamp(420px, 44vw, 640px)   box height */
.dot-globe { position: relative; }
.dot-globe__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.dot-globe--hero {
  position: absolute;
  left: 50%;
  top: var(--dg-top, clamp(220px, 20vw, 292px));
  width: var(--dg-width, min(160vw, 2200px));
  height: var(--dg-height, clamp(420px, 44vw, 640px));
  transform: translateX(-50%);
}
/* drag to turn (touch by default): vertical swipes still scroll the page */
.dot-globe.dg-draggable { touch-action: pan-y; }