/* Home, section 06: the world at a glance (editorial/home-globe.php, home-globe.js), 2026-10-07. */
.hg{position:relative;z-index:4;margin-top:-30px;clip-path:polygon(0 0,100% 42px,100% 100%,0 100%);background:#0b1317;color:#e6f3f1;padding:120px 4.6% 90px;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-rows:auto 1fr;grid-template-areas:"copy stage" "voices stage";column-gap:5%;row-gap:40px;align-items:start;min-height:100vh;overflow:hidden;isolation:isolate}
.hg:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 72% 50%,#13262f 0%,#0b1317 70%);z-index:-1}
.hg .mono{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.hg__kicker{display:block;color:#8fa9af}
.hg__copy{grid-area:copy;min-width:0}
.hg h2{margin:22px 0 0;font:400 clamp(40px,4.8vw,78px)/.95 Manrope,Arial,sans-serif;letter-spacing:-.06em;color:#f1f4ef}
.hg h2 em{display:block;font:italic 400 1.18em/.95 'Cormorant Garamond',Georgia,serif;letter-spacing:-.04em;color:#b9e9fb}
.hg__numbers{display:grid;grid-template-columns:repeat(3,auto);gap:10px 34px;margin:40px 0 0;padding-top:26px;border-top:1px solid #adc4c733;justify-content:start}
.hg__numbers div{display:flex;flex-direction:column}
.hg__numbers dd{margin:0;font-size:clamp(2.6rem,4.6vw,4.6rem);font-weight:300;letter-spacing:-.06em;line-height:.95;color:#f1f4ef;font-variant-numeric:tabular-nums}
.hg__numbers dt{margin-top:10px;color:#8fa9af;max-width:18ch;line-height:1.5}
.hg__countries{display:flex;align-items:center;gap:18px;margin-top:30px;padding:12px 0;border-top:1px solid #adc4c722;border-bottom:1px solid #adc4c722;color:#8fa9af}
.hg__countries>span{flex-shrink:0;color:#e0b46a}
.hg__ticker{flex:1;min-width:0;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hg__ticker span{display:inline-block;padding-right:48px;color:#c4d6dd;animation:hg-ticker 90s linear infinite}
.hg__ticker:hover span{animation-play-state:paused}
@keyframes hg-ticker{to{transform:translateX(-100%)}}
.hg__cta{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:30px}
.hg__cta .line-link{font-size:11px;color:#e6f3f1}
.hg__leader{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.hg__stage{grid-area:stage;position:relative;align-self:center;justify-self:center;width:100%;max-width:min(100%,84vh);aspect-ratio:1}
.hg__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.hg__stage canvas.is-dragging{cursor:grabbing}
.hg__tip{position:absolute;pointer-events:none;background:#0b1317f0;border:1px solid #8fc7dc66;color:#e6f3f1;padding:7px 10px;font-size:10px!important;letter-spacing:.08em!important;max-width:260px;text-transform:none!important;line-height:1.5;z-index:3;transform:translate(-50%,calc(-100% - 14px));white-space:nowrap}
.hg__tip b{display:block;font-weight:500;color:#b9e9fb}
.hg__hint{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);color:#7f9ca6;white-space:nowrap}
.hg__voices{grid-area:voices;position:relative;min-width:0;padding-top:26px;border-top:1px solid #adc4c733}
.hg__voice{margin:16px 0 0}
.hg__voice blockquote{margin:0}
.hg__voice p{margin:0;font:italic 400 clamp(22px,2.1vw,30px)/1.25 'Cormorant Garamond',Georgia,serif;letter-spacing:-.015em;color:#f1f4ef;max-width:30ch;min-height:3.75em;transition:opacity .45s}
.hg__voice p em{font-style:italic;color:#b9e9fb}
.hg__voice.is-switching p,.hg__voice.is-switching figcaption{opacity:0}
.hg__voice figcaption{display:flex;flex-direction:column;gap:5px;margin-top:16px;transition:opacity .45s}
.hg__voice figcaption strong{font-weight:600;font-size:14px;letter-spacing:-.01em}
.hg__voice figcaption .mono{color:#8fa9af}
.hg__voice figcaption a{color:#b9e9fb;width:max-content;border-bottom:1px solid #b9e9fb66;padding-bottom:2px}
.hg__voice-nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px}
.hg__voice-nav button{background:none;border:0;padding:8px 0;color:#8fa9af;font:500 13px/1.3 Manrope,Arial,sans-serif;display:flex;flex-direction:column;gap:3px;text-align:left;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.hg__voice-nav button .mono{font-size:10px}
.hg__voice-nav button[aria-pressed=true]{color:#f1f4ef;border-bottom-color:#b9e9fb}
.hg__voice-nav button:hover{color:#e6f3f1}
.hg__progress{display:block;height:1px;margin-top:12px;background:#adc4c722;overflow:hidden}
.hg__progress:after{content:'';display:block;height:100%;width:100%;background:#b9e9fb;transform:scaleX(0);transform-origin:left}
.hg__progress.is-running:after{animation:hg-progress var(--hg-dwell,9s) linear forwards}
@keyframes hg-progress{to{transform:scaleX(1)}}
@media(max-width:1100px){.hg{column-gap:4%}.hg__numbers{gap:10px 22px}}
@media(max-width:900px){
  .hg{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"copy" "stage" "voices";row-gap:34px;padding:90px 6% 70px;min-height:0;clip-path:polygon(0 0,100% 28px,100% 100%,0 100%)}
  .hg__stage{width:min(100%,520px);max-width:none;height:min(100vw - 12vw,520px);aspect-ratio:auto;align-self:start}
  .hg__numbers{grid-template-columns:repeat(3,auto);gap:10px 18px}
  .hg__numbers dd{font-size:clamp(2rem,9vw,3rem)}
  .hg__numbers dt{font-size:10px}
  .hg__voice p{min-height:0}
}
@media(prefers-reduced-motion:reduce){.hg__ticker{white-space:normal;-webkit-mask-image:none;mask-image:none}.hg__ticker span{animation:none;padding-right:0}.hg__ticker span+span{display:none}.hg__progress.is-running:after{animation:none;transform:scaleX(1)}}