/* ---------- Hero: interactive globe (assets/js/globe.js) ---------- */
.g-hero { position: relative; min-height: max(760px, 100svh); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 78% 40%, #1a140c 0%, #0b0a0f 45%, var(--bg) 75%); }
.g-stars { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; }
.g-stage { position: absolute; z-index: -1; right: -28vw; top: 38%; transform: translateY(-50%); width: min(1400px, 105vw); aspect-ratio: 1; }
.g-stage canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.g-stage canvas:active { cursor: grabbing; }
.g-labels { position: absolute; inset: 0; pointer-events: none; }
.g-label { position: absolute; transform: translate(-50%, calc(-100% - 10px)); font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-100); background: rgba(7,7,10,.82); border: 1px solid rgba(220,181,83,.35); padding: 3px 6px; border-radius: 4px; white-space: nowrap; transition: opacity .2s; }
.g-label b { color: var(--gold-300); font-weight: 600; margin-left: 5px; }
.g-label small { display: block; margin-top: 1px; font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0; text-transform: none; color: var(--gold-200); }
.g-label.hq { border-color: var(--gold-400); color: var(--gold-200); }
.g-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,7,10,.92) 0%, rgba(7,7,10,.55) 38%, rgba(7,7,10,0) 62%), linear-gradient(0deg, var(--bg) 0%, rgba(7,7,10,0) 22%); }
.g-content { padding-top: 170px; padding-bottom: clamp(56px, 9vh, 110px); pointer-events: none; }
.g-content > * { pointer-events: auto; }
.g-title { font-size: clamp(46px, 7vw, 124px); margin: 0 0 28px; }
.g-foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px 48px; }
.g-foot .lede { color: var(--ink-200); margin: 0; }
.g-count { display: flex; gap: 28px; margin-top: 34px; }
.g-count div { border-left: 1px solid rgba(220,181,83,.5); padding-left: 14px; }
.g-count b { display: block; font-family: var(--font-display); font-weight: 850; font-variation-settings: 'wdth' 112; font-size: 34px; line-height: 1; }
.g-count span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); }
.g-hint { position: absolute; right: var(--gutter); bottom: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-400); display: flex; align-items: center; gap: 10px; }
.g-tip { position: fixed; z-index: 50; pointer-events: none; padding: 10px 12px; border-radius: 10px; background: rgba(12,12,16,.95); border: 1px solid rgba(220,181,83,.4); font-size: 14px; opacity: 0; transition: opacity .15s; }
.g-tip b { display: block; font-size: 15px; }
.g-tip span { color: var(--gold-300); font-family: var(--font-mono); font-size: 12px; }
.g-loading { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--ink-400); text-transform: uppercase; }
/* scroll-driven spin: the hero pins while you scroll through .g-scroll */
.g-scroll { position: relative; height: 290vh; }
.g-scroll .g-hero { position: sticky; top: 0; height: 100svh; min-height: 0; }
.g-content { opacity: calc(1 - var(--p, 0) * 2.4); transform: translateY(calc(var(--p, 0) * -90px)); }
.g-hint { opacity: calc(1 - var(--p, 0) * 4); }
.g-shade { opacity: calc(1 - var(--p, 0) * .55); }
.g-stage { transform-origin: 50% 50%; will-change: transform; }
.g-panel { position: absolute; left: var(--gutter); bottom: clamp(40px, 10vh, 110px); z-index: 2; width: min(460px, calc(100% - 2 * var(--gutter)));
  opacity: clamp(0, calc((var(--p, 0) - .55) * 3.2), 1); transform: translateY(calc((1 - clamp(0, calc((var(--p, 0) - .55) * 3.2), 1)) * 40px)); pointer-events: none; }
.g-panel.live { pointer-events: auto; }
.g-panel .h2 { font-size: clamp(38px, 5vw, 72px); margin: 14px 0 18px; }
.g-panel-lede { margin: 0 0 26px; color: var(--ink-200); }
@media (prefers-reduced-motion: reduce) {
  .g-scroll { height: auto; } .g-scroll .g-hero { position: relative; height: auto; min-height: max(760px, 100svh); }
  .g-panel { position: relative; left: auto; bottom: auto; opacity: 1; transform: none; pointer-events: auto; width: auto; margin-top: 40px; }
}
@media (max-width: 860px) {
  .g-panel { bottom: 86px; }
  .g-panel .h2 { font-size: 34px; }
}
@media (max-width: 860px) {
  .g-stage { right: -38vw; top: calc(150px + 42vw); width: 175vw; opacity: .9; }
  .g-shade { background: linear-gradient(0deg, var(--bg) 10%, rgba(7,7,10,.7) 55%, rgba(7,7,10,.1) 80%); }
  .g-hint { display: none; }
}