/* The global story is part of the page: open typography, a globe, and activity. */
.global {
  --activity-muted: #a5afa0;
  padding-block: 100px 70px;
  background: var(--color-paper);
}

.activity-shell { min-width: 0; }
.global__composition {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 35px;
  align-items: center;
}
.global__content { min-width: 0; padding-block: 20px 40px; }
.global__intro .section-kicker { margin-bottom: 27px; }
.global__intro h2 {
  font-size: clamp(64px, 6.2vw, 98px);
  line-height: 1.02;
  letter-spacing: -.06em;
}
.global__description {
  margin-top: 28px;
  max-width: 380px;
  color: var(--color-ink-2);
  font-size: 15px;
  line-height: 1.8;
}
.global__intro .global__numbers { gap: 48px; margin-top: 31px; }
.global__intro .global__numbers dd {
  font-size: 48px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.05em;
}
.global__intro .global__numbers dt { margin-top: 7px; color: var(--activity-muted); font-size: 11px; }
.activity-panel { margin-top: 42px; min-width: 0; }
.activity-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 25px;
  align-items: end;
  max-width: 465px;
}
.activity-label { display: flex; align-items: center; gap: 8px; color: var(--activity-muted); font: 400 12px/1.5 var(--font-body); letter-spacing: 0; }
.activity-label .status-dot { width: 5px; height: 5px; }
.activity-total {
  display: block;
  margin-top: 6px;
  font: 500 clamp(45px, 4.2vw, 64px)/1.08 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.06em;
}
.activity-subline { margin-top: 9px; color: var(--activity-muted); font-size: 10px; line-height: 1.6; }
.activity-trend { min-width: 0; padding-bottom: 2px; }
.activity-chart { height: 57px; color: var(--color-accent); }
.activity-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.activity-chart path { vector-effect: non-scaling-stroke; }
.activity-chart__labels { display: flex; justify-content: space-between; margin-top: 10px; gap: 12px; color: var(--activity-muted); font-size: 9px; }
.activity-map { position: relative; min-width: 0; padding-top: 20px; }
.activity-map__heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--activity-muted);
  font-size: 10px;
  letter-spacing: .04em;
}
.activity-map__heading > span:first-child { display: flex; align-items: center; gap: 8px; }
.activity-map .globe { width: min(100%, 700px); max-width: none; margin: 16px auto 0; }
.activity-map .globe__backdrop { inset: 5%; box-shadow: 0 0 100px #a9dd4612; }
.activity-map .globe__caption { min-height: 44px; gap: 14px; color: var(--activity-muted); font-size: 10px; }
.activity-map .globe__live { max-width: 350px; text-align: center; }
.activity-map .globe__toggle {
  min-height: 30px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--activity-muted);
  font-size: 10px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.activity-map .globe__toggle:hover { color: var(--color-accent); }
.activity-map .globe__canvas:focus-visible { outline-offset: -8px; }
.activity-map .globe__nojs { inset: 28%; font-size: 14px; }
.activity-selection {
  position: absolute;
  top: 74px;
  right: 0;
  z-index: 2;
  display: grid;
  gap: 3px;
  text-align: right;
  pointer-events: none;
}
.activity-selection small { color: var(--activity-muted); font-size: 10px; }
.activity-country-picker {
  justify-self: end;
  width: auto;
  max-width: 250px;
  min-height: 32px;
  padding: 2px 19px 2px 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background-color: transparent;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-accent) 50%), linear-gradient(135deg, var(--color-accent) 50%, transparent 50%);
  background-position: right 5px center, right center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  color: var(--color-ink);
  color-scheme: dark;
  font: 500 21px/1.25 var(--font-display);
  letter-spacing: -.035em;
  text-align: right;
  field-sizing: content;
  cursor: pointer;
  pointer-events: auto;
}
.activity-country-picker:hover { color: var(--color-accent); }
.activity-country-picker option { background: var(--color-paper); color: var(--color-ink); font-size: 14px; }
.activity-selection > span { color: var(--color-accent); font-size: 11px; font-variant-numeric: tabular-nums; }
.activity-selection b { font-weight: 500; }
.activity-fallback { margin-top: 15px; color: var(--activity-muted); font-size: 12px; }
.activity-coverage { padding-block: 15px; color: var(--activity-muted); font-size: 13px; }
.activity-coverage summary { cursor: pointer; color: var(--color-ink); }
.activity-coverage p { padding-block: 10px; line-height: 1.8; }
.activity-ready .activity-fallback { display: none; }
.activity-shell [hidden] { display: none !important; }

@media (min-width: 1500px) {
  .global__composition { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 55px; }
  .activity-summary { max-width: 490px; }
}

@media (max-width: 1150px) {
  .global__composition { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 25px; }
  .global__intro h2 { font-size: clamp(58px, 6.8vw, 78px); }
  .global__description { font-size: 14px; }
  .global__intro .global__numbers { gap: 35px; }
  .global__intro .global__numbers dd { font-size: 42px; }
  .activity-summary { grid-template-columns: minmax(0, 1fr) minmax(0, .68fr); gap: 20px; }
  .activity-total { font-size: 49px; }
  .activity-map__heading { font-size: 9px; }
  .activity-selection { top: 64px; }
  .activity-country-picker { font-size: 19px; }
  .activity-selection small { font-size: 9px; }
  .activity-map .globe__live { max-width: 270px; }
}

@media (max-width: 900px) {
  .global { padding-block: 75px 55px; }
  .global__composition { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .global__content { display: contents; }
  .global__intro { grid-row: 1; max-width: 520px; }
  .global__intro h2 { font-size: clamp(66px, 10vw, 88px); }
  .global__intro .global__numbers { gap: 60px; }
  .global__intro .global__numbers dd { font-size: 48px; }
  .activity-map { grid-row: 2; padding-top: 0; margin-top: 45px; }
  .activity-map .globe { width: min(100%, 650px); margin-top: 18px; }
  .activity-map__heading { font-size: 10px; }
  .activity-selection { top: 56px; }
  .activity-country-picker { font-size: 23px; }
  .activity-map .globe__live { max-width: 350px; }
  .activity-panel { grid-row: 3; margin-top: 25px; }
  .activity-summary { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; }
  .activity-total { font-size: 64px; }
  .activity-label { font-size: 13px; }
  .activity-subline { font-size: 11px; }
  .activity-chart { height: 65px; }
  .activity-chart__labels { font-size: 10px; }
}

@media (max-width: 650px) {
  .global__intro { max-width: none; }
  .global__intro .section-kicker { margin-bottom: 21px; }
  .global__intro h2 { font-size: clamp(57px, 14vw, 80px); }
  .global__description { margin-top: 24px; max-width: 360px; }
  .global__intro .global__numbers { gap: 48px; margin-top: 26px; }
  .global__intro .global__numbers dd { font-size: 45px; }
  .activity-map { margin-top: 38px; }
  .activity-map__heading { font-size: 9px; gap: 16px; }
  .activity-map__heading > span:first-child { align-items: baseline; gap: 6px; }
  .activity-map__heading > span:last-child { flex: none; }
  .activity-map .globe { width: 100%; margin-top: 64px; }
  .activity-map .globe__caption { gap: 12px; font-size: 10px; }
  .activity-map .globe__live { max-width: 255px; }
  .activity-selection { top: 39px; left: 0; right: auto; gap: 2px; text-align: left; }
  .activity-selection small { display: none; }
  .activity-country-picker { justify-self: start; font-size: 20px; text-align: left; }
  .activity-selection > span { font-size: 10px; }
  .activity-panel { margin-top: 28px; }
  .activity-summary { grid-template-columns: minmax(0, 1fr) minmax(0, .74fr); gap: 24px; }
  .activity-total { font-size: 55px; }
  .activity-label { font-size: 11px; }
  .activity-subline { font-size: 10px; }
  .activity-chart { height: 55px; }
  .activity-chart__labels { font-size: 8px; gap: 6px; }
}

@media (max-width: 380px) {
  .activity-map__heading { font-size: 8px; gap: 12px; }
  .activity-map .globe__live { max-width: 235px; }
  .activity-map .globe__caption { font-size: 9px; gap: 10px; }
  .activity-total { font-size: 49px; }
  .activity-summary { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .activity-shell *, .activity-shell *::before, .activity-shell *::after { transition: none; }
}
