.about-geography {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
  background: var(--color-surface-dark);
  color: var(--color-on-accent);
}

.about-geography__map {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 696;
  border: .5px solid var(--color-border-map);
  overflow: hidden;
}

.about-geography__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-geography--interactive {
  background: radial-gradient(ellipse at 72% 50%, var(--color-globe-background), var(--color-surface-dark) 70%);
  overflow: clip;
}

.about-geography__layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr);
  align-items: center;
  gap: var(--space-xl);
}

.about-geography__content { min-width: 0; }
.about-geography__hint {
  margin-block: var(--space-md) var(--space-xl);
  color: var(--color-text-secondary);
  font-size: var(--fs-caption);
  line-height: var(--lh-description);
}
.about-geography__routes { display: grid; }
.about-geography__details {
  margin-block-start: var(--space-xl);
  padding-inline-start: var(--space-md);
  border-inline-start: 2px solid var(--color-gradient-start);
}
.about-geography__route-title {
  margin: 0;
  font-size: var(--fs-body-large);
  line-height: var(--lh-description);
}
.about-geography__route-description {
  margin-block: var(--space-xs) 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
}
.about-geography__visual { min-width: 0; }
.about-geography__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  isolation: isolate;
  touch-action: none;
}
.about-geography__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}
.about-geography__canvas:active { cursor: grabbing; }
.about-geography__fallback { position: absolute; inset: 0; }
.about-geography__fallback .about-geography__image { object-fit: contain; }
.is-globe-ready .about-geography__fallback { display: none; }
.about-geography__marker {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  z-index: 2;
  max-width: 45%;
  padding: calc(var(--space-xs) / 2) var(--space-xs);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-globe-label);
  color: var(--color-text-secondary);
  font-size: var(--fs-review-role);
  line-height: var(--lh-description);
  overflow-wrap: anywhere;
  text-align: center;
  pointer-events: none;
}
.about-geography__marker.is-active {
  border-color: var(--color-gradient-start);
  color: var(--color-on-accent);
}
.about-geography__controls {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  margin-block-start: var(--space-xs);
}
.is-globe-ready .about-geography__controls { display: flex; }
.about-geography__drag-hint {
  margin-inline-end: auto;
  color: var(--color-text-secondary);
  font-size: var(--fs-review-role);
}
.about-geography__credit {
  margin-block: var(--space-sm) 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-review-role);
  line-height: var(--lh-description);
  text-align: end;
}

@media (width <= 64rem) {
  .about-geography__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--space-lg); }
}

@media (width <= 48rem) {
  .about-geography__map { aspect-ratio: 3 / 2; }
  .about-geography__layout { grid-template-columns: minmax(0, 1fr); }
  .about-geography__content { display: contents; }
  .about-geography__heading { order: 0; }
  .about-geography__hint { order: 1; margin-block: 0; }
  .about-geography__visual { order: 2; }
  .about-geography__routes { order: 3; }
  .about-geography__details { order: 4; margin-block-start: 0; }
  .about-geography__marker { font-size: var(--fs-review-role); }
}

/* Страны и направления: прежний вид строк (21.10) */
.about-geography__countries { display: grid; }
.about-geography__routes-title {
  margin-block: var(--space-lg) var(--space-xs);
  color: var(--color-text-secondary);
  font-size: var(--fs-caption);
  line-height: var(--lh-description);
}
.about-geography__routes [hidden], .about-geography__more[hidden] { display: none; }
.about-geography__countries:not(.is-expanded) .is-extra { display: none; }
.about-geography__more { margin-block-start: var(--space-xs); }
@media (width <= 48rem) {
  .about-geography__countries { order: 3; }
  .about-geography__more { order: 3; justify-self: start; }
  .about-geography__routes-title { order: 3; margin-block: var(--space-md) 0; }
}