#fh-globe *{box-sizing:border-box;}
#fh-globe .g-wrap{position:relative;margin-block-start:clamp(28px,4vw,48px);width:min(560px,100%);margin-inline:auto;aspect-ratio:1;touch-action:none;}
#fh-globe .g-wrap canvas{width:100%;height:100%;display:block;cursor:grab;}
#fh-globe .g-wrap canvas:active{cursor:grabbing;}
#fh-globe .g-hint{position:absolute;inset-block-end:-4px;inset-inline:0;text-align:center;font-family:Poppins,system-ui,sans-serif;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(43,43,43,.48);transition:opacity .4s ease;}
#fh-globe .g-wrap[data-touched] .g-hint{opacity:0;}
#fh-globe .g-read{margin-block-start:26px;text-align:center;display:flex;flex-direction:column;gap:5px;}
#fh-globe .g-read b{font-family:Poppins,system-ui,sans-serif;font-weight:600;font-size:clamp(21px,2.2vw,29px);letter-spacing:-0.02em;color:#2B2B2B;}
#fh-globe .g-read span{font-size:15.5px;color:rgba(43,43,43,.68);}
#fh-globe .g-read b, #fh-globe .g-read span{text-align:center;}
#fh-globe #global .g-hint{text-align:center;margin-inline:0;}
@media (prefers-reduced-motion: reduce){
  #fh-globe .g-hint{display:none;}
}
/* Bigger on staging, 2 Sept: 80vh left roughly 240px of slack under the
   globe before the Dubai caption. 92vh closes most of it and still keeps
   the section inside one screen — 262px is the measured overhead, so at
   a 700px window this is 382+262=644, and at 1200px it is 842+262=1104. */
#fh-globe .g-wrap{width:max(300px,min(900px,calc(92vh - 262px),100%)) !important;margin-block-start:clamp(6px,1vh,14px) !important;}
#fh-globe .g-read{margin-block-start:10px !important;}
#fh-globe .g-read b{font-size:clamp(17px,1.55vw,21px) !important;}
#fh-globe .g-read span{font-size:14.5px !important;}
#fh-globe .g-hint{inset-block-end:-23px !important;}
#fh-globe .g-wrap{margin-block-end:52px;}
#fh-globe .g-hint{inset-block-end:-40px;}
#fh-globe .g-tip{position:absolute;transform:translate(12px,-30px);pointer-events:none;background:#2B2B2B;color:#FFFFFF;font-family:Poppins,system-ui,sans-serif;font-size:12px;line-height:1;padding:6px 9px;border-radius:5px;white-space:nowrap;z-index:2;}
#fh-globe .g-tip[hidden]{display:none;}

/* The old flat world map, hidden in CSS rather than by the script, so it
   never paints and is then yanked away. Same reasoning as the header. */
[data-fh-oldglobe]{display:none !important;}
