/* The global presence keeps the original regions and geography, in a new 3D stage. */
.page-world .inner-content { width: 100%; max-width: none; padding: 0; }
.world-stage { position: relative; overflow: clip; isolation: isolate; padding: 148px 0 36px; color: #f9f3e6; background: radial-gradient(ellipse at 27% 46%,#15374066,transparent 46%),radial-gradient(ellipse at 80% 10%,#84683c19,transparent 55%),#080f12; }
.world-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: radial-gradient(1px 1px at 35px 50px,#e9dbb5 80%,transparent),radial-gradient(1px 1px at 130px 170px,#a0c5d3 80%,transparent),radial-gradient(1px 1px at 280px 85px,#ffffff80 80%,transparent); background-size: 330px 290px,470px 370px,590px 430px; }
.world-stage-grid { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 54px; max-width: 1600px; }
.world-visual { min-width: 0; position: relative; }
.globe-viewport { position: relative; width: 100%; aspect-ratio: 1; min-height: 320px; outline-offset: -14px; border-radius: 50%; }
.globe-viewport canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.globe-viewport.is-dragging canvas { cursor: grabbing; }
.globe-viewport:focus-visible { outline: 1px solid #e6cf98; }
.globe-fallback { position: absolute; inset: 12%; width: 76%; height: 76%; border-radius: 50%; object-fit: cover; object-position: 70% 50%; opacity: .65; box-shadow: inset -30px -20px 70px #000a,0 0 50px #b8d1d32e; }
.globe-viewport[data-state=ready] .globe-fallback { display: none; }
.globe-viewport:not([data-state=ready]) ~ .globe-toolbar .globe-tools { visibility: hidden; }
.globe-orbit { position: absolute; inset: 9%; pointer-events: none; border-radius: 50%; border: 1px solid #e1c89526; box-shadow: 0 0 0 23px #e1c89505,0 0 0 55px #e1c89503; }
.globe-orbit::before,.globe-orbit::after { content: ''; position: absolute; inset: 5%; border-radius: 50%; border: 1px solid #e1c89517; transform: rotate(-28deg) scaleX(1.35) scaleY(.4); }
.globe-orbit::after { transform: rotate(38deg) scaleX(1.3) scaleY(.55); }
.globe-markers { position: absolute; inset: 0; pointer-events: none; }
.globe-marker { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; pointer-events: auto; border-radius: 50%; background: none; color: #f3dca9; }
.globe-marker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #f0d5a0; box-shadow: 0 0 0 5px #edd09924,0 0 14px #eccb7f99; border: 1px solid #fff4d8; }
.globe-marker[aria-pressed=true]::before { width: 10px; height: 10px; box-shadow: 0 0 0 7px #edd09933,0 0 26px #eccb7fb3; }
.globe-marker > span { position: absolute; left: 30px; padding: 6px 10px; white-space: nowrap; font-size: 12px; line-height: 1.4; border: 1px solid #e5cb9847; border-radius: 999px; background: #111d21c9; backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.globe-marker[aria-pressed=true] > span,.globe-marker:hover > span,.globe-marker:focus-visible > span { opacity: 1; }
.globe-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 0 auto; width: 85%; }
.globe-gesture { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: #b6c1c4; white-space: nowrap; }
.globe-gesture svg { width: 17px; height: 17px; color: #dbc28b; }
.globe-tools { display: flex; gap: 3px; padding: 4px; border: 1px solid #e3d1ae2e; border-radius: 999px; background: #ffffff08; backdrop-filter: blur(16px); }
.globe-tools button { width: 32px; height: 32px; border-radius: 50%; color: #e9d6af; font-size: 18px; }
.globe-tools button:hover,.globe-tools button:focus-visible { background: #ffffff14; }
.globe-tools button:disabled { opacity: .4; cursor: default; }
.world-stage .eyebrow { font-size: 12px; color: #d5b67c; letter-spacing: 2.2px; margin-bottom: 26px; }
.world-stage h1 { font-size: clamp(52px,5.3vw,84px); line-height: 1.02; letter-spacing: -.055em; font-weight: 500; margin: 0; }
.world-stage h1 > span { color: #d7ba82; }
.world-stage .world-stage-lead { font-size: 18px; line-height: 1.7; color: #c5c9c5; margin: 24px 0 28px; }
.globe-region-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.globe-region { padding: 8px 14px; border: 1px solid #d4c5a52e; border-radius: 999px; background: #ffffff04; color: #c4cccb; font-size: 13px; line-height: 1.5; transition: color .2s,background .2s,border-color .2s; }
.globe-region:hover { border-color: #e6ce9673; color: #fff5df; background: #e0c68e0f; }
.globe-region[aria-pressed=true] { border-color: #e6ce9699; color: #eed6a5; background: linear-gradient(115deg,#d3ae6029,#d3ae600a); box-shadow: inset 0 1px 0 #ffffff12; }
.globe-region-detail { min-height: 202px; padding: 22px 24px; border: 1px solid #e4cf9d33; border-radius: 24px; background: linear-gradient(135deg,#ffffff0a,#ffffff03); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 #ffffff0d; }
.globe-region-detail .globe-detail-kicker { margin: 0 0 12px; font-size: 10px; line-height: 1.5; letter-spacing: 1.7px; color: #acb9b9; }
.globe-region-detail h2 { font-size: 28px; color: #efe4cd; letter-spacing: -.03em; margin: 0 0 10px; }
.globe-region-detail [data-globe-description] { font-size: 14px; line-height: 1.8; color: #bcc5c4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; }
.globe-region-link { display: inline-flex; align-items: center; gap: 28px; margin-top: 18px; font-size: 13px; color: #e0c48c; }
.globe-region-link svg { width: 15px; height: 15px; }
.world-scroll { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 38px auto 0; font-size: 10px; line-height: 1.8; letter-spacing: 2px; color: #aab4b2; }
.world-scroll > span { color: #ddc58e; font-size: 18px; }
.world-content { padding-top: 80px; padding-bottom: 80px; scroll-margin-top: 20px; }
.world-content .world-introduction { grid-template-columns: .7fr 1fr; gap: 80px; margin-bottom: 60px; }
.world-content .eyebrow { align-self: start; padding-top: 12px; }
@media(min-width:1800px) { .world-stage { padding-top: 170px; } .world-stage-grid { gap: 90px; } }
@media(max-width:1200px) { .world-stage-grid { gap: 24px; grid-template-columns: 1.1fr 1fr; } .world-stage { padding-top: 132px; } .world-stage h1 { font-size: 58px; } .globe-toolbar { width: 100%; } .globe-region { padding: 7px 12px; font-size: 12px; } }
@media(max-width:900px) { .world-stage-grid { grid-template-columns: 1fr; gap: 24px; } .world-stage { padding-top: 126px; } .world-stage-copy { display: contents; } .world-stage .eyebrow { grid-row: 1; margin: 0; text-align: center; } .world-stage h1 { grid-row: 2; text-align: center; font-size: 62px; } .world-stage h1 br { display: none; } .world-stage .world-stage-lead { grid-row: 3; text-align: center; margin: -6px 0 0; } .world-visual { grid-row: 4; max-width: 600px; width: 100%; margin: -20px auto 0; } .globe-region-list { justify-content: center; margin: 8px 0 0; } .globe-region-detail { min-height: 0; } .world-scroll { margin-top: 30px; } .world-content .world-introduction { grid-template-columns: 1fr; gap: 15px; } }
@media(max-width:520px) { .world-stage { padding-top: 115px; padding-bottom: 30px; } .world-stage-grid { gap: 20px; } .world-stage .eyebrow { font-size: 10px; letter-spacing: 1.6px; } .world-stage h1 { font-size: clamp(32px,9vw,46px); } .world-stage .world-stage-lead { font-size: 14px; } .world-visual { width: calc(100% + 20px); max-width: none; margin: -10px -10px 0; } .globe-viewport { min-height: 0; } .globe-toolbar { width: calc(100% - 20px); } .globe-gesture { font-size: 11px; gap: 7px; } .globe-tools button { width: 30px; height: 30px; } .globe-region-list { gap: 7px; } .globe-region { padding: 7px 11px; font-size: 12px; } .globe-region-detail { padding: 22px; border-radius: 20px; } .globe-region-detail h2 { font-size: 26px; } .world-scroll { font-size: 9px; letter-spacing: 1.3px; } .world-content { padding-top: 50px; padding-bottom: 50px; } .world-content .world-introduction { margin-bottom: 35px; } .globe-marker > span { font-size: 10px; padding: 5px 8px; left: 26px; } }
@media(prefers-reduced-motion:reduce) { .globe-marker > span,.globe-region { transition: none; } }
