
.fifty-globe {
  --globe-paper: var(--paper, #f2ede5);
  --globe-grid: rgba(23, 19, 15, .16);
  --globe-equator: rgba(23, 19, 15, .24);
  --globe-land: rgba(23, 19, 15, .58);
  --globe-rim: rgba(23, 19, 15, .34);
  --globe-rim-outer: rgba(23, 19, 15, .12);
  --globe-quiet: rgba(23, 19, 15, .38);
  --globe-lit: var(--cognac, #d4754e);
  --globe-country: rgba(212, 117, 78, .26);
  --globe-country-stroke: var(--cognac-dark, #964a28);
  position: relative;
  background: var(--globe-paper);
  color: var(--ink, #17130f);
}

.fifty-globe-track {
  position: relative;
  
  min-height: calc(var(--globe-runway, 6) * 100vh);
}
.fifty-globe-stage {
  
  --globe-stat-top: clamp(248px, 27vh, 286px);
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
}

.fifty-globe-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
  transition: opacity .45s ease;
  cursor: default;
  touch-action: pan-y;
}
.fifty-globe:not([data-ready]) .fifty-globe-svg { opacity: 0; }
.fifty-globe[data-globe-interactive] .fifty-globe-svg { cursor: grab; }
.fifty-globe[data-dragging] .fifty-globe-svg { cursor: grabbing; }
.fifty-globe[data-globe-interactive] .fifty-globe-svg:focus-visible { outline: 2px solid var(--globe-country-stroke); outline-offset: -4px; }

.fifty-globe [data-layer="disc"] { fill: var(--globe-paper); }
.fifty-globe [data-layer="stayQuiet"],
.fifty-globe [data-layer="goQuiet"] { stroke-width: 3.1; }
.fifty-globe [data-layer="stayLit"],
.fifty-globe [data-layer="goLit"] { stroke-width: 5.2; }

.fb-hotel-pin {
  fill: var(--globe-paper);
  stroke: rgba(23, 19, 15, .74);
  stroke-width: 1.6;
  transition: fill .2s ease, stroke .2s ease;
}
.fb-hotel-pin[data-country] { fill: var(--globe-lit); stroke: var(--cognac-dark, #964a28); stroke-width: 2; }

.fifty-globe-copy {
  position: absolute;
  z-index: 3;
  top: 112px;
  left: 50%;
  width: min(1040px, calc(100% - 80px));
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  text-align: center;
  pointer-events: none;
}

.fifty-globe-kicker {
  margin: 0 0 13px;
  font: 600 12px/18px Switzer, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cognac-dark, #964a28);
}

.fifty-globe-copy h1 {
  max-width: 980px;
  margin: 0;
  font: 650 clamp(56px, 5.25vw, 78px)/.98 Satoshi, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(60px, 5vw, 74px) !important;
  font-weight: 650;
  letter-spacing: -.052em;
  text-wrap: balance;
  color: var(--ink, #17130f);
  text-shadow: 0 0 18px var(--globe-paper), 0 0 8px var(--globe-paper), 0 0 3px var(--globe-paper);
}

.fifty-globe-lines {
  display: grid;
  width: min(760px, 80vw);
  margin-top: 22px;
}
.fb-line {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  font: 450 clamp(19px, 1.65vw, 24px)/1.32 Satoshi, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.018em;
  color: rgba(23, 19, 15, .78);
  text-shadow: 0 0 18px var(--globe-paper), 0 0 8px var(--globe-paper), 0 0 3px var(--globe-paper);
  transition: none;
}
.fb-line[data-active] {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.fb-line b { color: var(--cognac-dark, #964a28); font-weight: 650; }

.fifty-globe-skip {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transform: translateX(-50%);
  pointer-events: auto;
  padding: 11px 16px 12px 18px;
  border: 1px solid rgba(23, 19, 15, .26);
  border-radius: 999px;
  background: var(--globe-paper);
  font: 500 15px/20px Switzer, ui-sans-serif, system-ui, sans-serif;
  color: var(--ink, #17130f);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .12s ease;
}
.fifty-globe-skip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fifty-globe-skip:is(:hover, :focus-visible) { border-color: rgba(23, 19, 15, .65); }
.fifty-globe-skip:focus-visible { outline: 2px solid var(--globe-lit); outline-offset: 3px; }
html:not([data-globe-scrolling="on"]) .fifty-globe-skip { opacity: 0; pointer-events: none; }

.fb-country {
  position: absolute;
  z-index: 4;
  left: clamp(30px, 4vw, 64px);
  bottom: 34px;
  width: min(390px, 34vw);
  padding: 4px 0 6px 18px;
  border-left: 2px solid var(--globe-country-stroke);
  background: linear-gradient(90deg, var(--globe-paper) 0%, rgba(242, 237, 229, .92) 78%, transparent 100%);
}
.fb-country[data-changing] .fb-country-head strong,
.fb-country[data-changing] ol { animation: fb-country-in .28s ease both; }
@keyframes fb-country-in { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.fb-country-head { display: grid; gap: 2px; }
.fb-country-head > span {
  display: flex;
  gap: 10px;
  font: 600 12px/18px Switzer, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cognac-dark, #964a28);
}
.fb-country-head i { font-style: normal; color: rgba(23, 19, 15, .5); }
.fb-country-head strong {
  font: 650 clamp(28px, 2.6vw, 38px)/1.05 Satoshi, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.035em;
}
.fb-country-proof { margin-top: 9px; }
.fb-country-proof p {
  margin: 0;
  font: 450 15px/21px Switzer, ui-sans-serif, system-ui, sans-serif;
  color: rgba(23, 19, 15, .68);
}
.fb-country-proof p:first-child { color: var(--ink, #17130f); }
.fb-country-proof b { font-weight: 650; }
.fb-country ol {
  display: grid;
  gap: 3px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.fb-country li {
  display: grid;
  grid-template-columns: 25px 1fr;
  align-items: baseline;
  font: 500 15px/20px Satoshi, ui-sans-serif, system-ui, sans-serif;
}
.fb-country li span { font: 500 12px/18px Switzer, ui-sans-serif, system-ui, sans-serif; color: var(--cognac-dark, #964a28); }

.fifty-globe-kicker,
.fb-country-head > span,
.fb-country-head > span *,
.fb-country li > span,
.fifty-globe-legend { font-size: 12px !important; }
.fb-country-proof p,
.fb-country-proof p *,
.fb-country li,
.fifty-globe-skip { font-size: 15px !important; }

.fb-field-stat {
  position: absolute;
  z-index: 4;
  top: var(--globe-stat-top);
  left: 50%;
  width: min(620px, calc(100% - 40px));
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
.fb-field-stat strong { font: 650 clamp(52px, 6vw, 86px)/.92 Satoshi, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.06em; color: var(--cognac-dark, #964a28); }
.fb-field-stat span { margin-top: 8px; font: 500 15px/22px Switzer, ui-sans-serif, system-ui, sans-serif; color: rgba(23, 19, 15, .7); }

.fifty-globe-legend {
  position: absolute;
  z-index: 3;
  right: 32px;
  bottom: 74px;
  width: min(340px, 31vw);
  margin: 0;
  font: 500 12px/18px Switzer, ui-sans-serif, system-ui, sans-serif;
  color: rgba(23, 19, 15, .64);
  text-align: right;
  pointer-events: none;
}
.fb-legend-line { display: none; }
.fb-legend-line[data-active] { display: inline; }
.fifty-globe-tip, .fb-focus { display: none !important; }

@media (min-width: 761px) and (max-height: 760px) {
  .fifty-globe-stage { --globe-stat-top: 240px; }
  .fifty-globe-copy { top: 96px; }
  .fb-field-stat strong { font-size: 64px; }
  .fb-field-stat span { margin-top: 5px; }
  .fifty-globe-legend { bottom: 64px; }
}


@media (min-width: 761px) and (max-width: 900px) {
  .fifty-globe-stage { --globe-stat-top: 320px; }
  .fb-country { bottom: 90px; }
}

@media (max-width: 760px) {
  .fifty-globe-stage { min-height: 720px; }
  .fifty-globe-copy { top: 78px; width: calc(100% - 34px); }
  .fifty-globe-copy h1 { max-width: 12ch; font-size: clamp(42px, 12.2vw, 54px) !important; line-height: .98; letter-spacing: -.05em; }
  .fifty-globe-kicker { margin-bottom: 9px; font-size: 10px; line-height: 16px; }
  .fifty-globe-lines { width: min(92vw, 560px); margin-top: 15px; }
  .fb-line { font-size: 18px; line-height: 1.3; }
  .fb-country {
    left: 17px;
    right: 17px;
    bottom: 70px;
    width: auto;
    padding: 7px 0 7px 14px;
    background: linear-gradient(90deg, var(--globe-paper) 0%, rgba(242, 237, 229, .94) 86%, transparent 100%);
  }
  .fb-country-head strong { font-size: 27px; }
  .fb-country-proof p { font-size: 12px; line-height: 18px; }
  .fb-country-proof p:last-child { display: none; }
  .fb-country ol { margin-top: 7px; gap: 1px; }
  .fb-country li { font-size: 13px; line-height: 18px; }
  .fb-field-stat { top: 245px; }
  .fb-field-stat strong { font-size: 56px; }
  .fb-field-stat span { max-width: 30ch; font-size: 13px; line-height: 19px; }
  .fifty-globe [data-layer="stayQuiet"], .fifty-globe [data-layer="goQuiet"] { stroke-width: 3.8; }
  .fifty-globe [data-layer="stayLit"], .fifty-globe [data-layer="goLit"] { stroke-width: 6; }
  .fifty-globe-legend { display: none; }
  .fifty-globe-skip { bottom: max(13px, env(safe-area-inset-bottom)); font-size: 14px !important; }
}

@media (max-width: 340px) {
  
  .fb-field-stat { top: 296px; }
}

@media (prefers-reduced-motion: reduce) {
  .fifty-globe-track { min-height: 0; }
  .fifty-globe-stage { position: relative; height: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; }
  .fifty-globe-copy { position: static; order: 1; width: min(900px, calc(100% - 40px)); transform: none !important; margin: 0 auto; padding: 104px 0 30px; }
  .fifty-globe-copy h1, .fifty-globe-kicker { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .fifty-globe-lines { display: grid; gap: 8px; margin-top: 24px; }
  .fifty-globe-lines .fb-line { grid-area: auto; opacity: 1; visibility: visible; transform: none; animation: none; }
  .fifty-globe-svg { position: static; order: 2; width: 100%; height: min(74vw, 760px); }
  .fifty-globe-svg { cursor: default; }
  .fb-country { position: relative; order: 3; inset: auto; width: min(390px, calc(100% - 40px)); margin: -175px 0 50px clamp(20px, 4vw, 64px); }
  .fifty-globe-legend, .fb-field-stat { display: none; }
  .fifty-globe-skip { position: static; margin-top: 12px; }
  html:not([data-globe-scrolling="on"]) .fifty-globe-skip { opacity: 1; pointer-events: auto; }
}
