/* Tailwind handles layout; this file owns bespoke charts, maps, and motion. */

:root {
  --paper: #f3efe6;
  --ink: #1d1a17;
  --terra: #c76545;
  --clay: #9b4d36;
  --slate: #536675;
  --sand: #dfd2bc;
  --sun: #dfad52;
  /* Shared vertical inset for a full-screen slide. Kept symmetric so every
     slide centres its content with the same gap above and below (the top value
     also clears the fixed logo/language header). One token = one rhythm. */
  --slide-pad: 5rem;
  /* Every section subheading (lead) shares one measure. */
  --lead-measure: 64rem;
}

html {
  scroll-behavior: smooth;
  /* Desktop: one section = one screen (like the metro site). Phones and narrow
     tablets fall back to continuous scroll below (see the max-width:1023px block). */
  scroll-snap-type: y mandatory;
}

body {
  margin: 0;
  overflow-x: hidden;
}

button,
input,
select {
  font: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--terra), transparent 45%);
  outline-offset: 3px;
}

.story-section {
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* The reference section is the last snap slide. It keeps a real snap point
   (align: start) so mandatory snapping can actually land on it — otherwise the
   scroll gets trapped on the previous section and this one is unreachable. Its
   content may run slightly past one screen, which is fine: nothing snaps below
   it, so any overflow scrolls freely. */
.method-section {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/*
 * Phones + narrow tablets (< 1024px): continuous scroll, natural section
 * heights. The full-viewport two-column layouts only assemble at >= 1024px, so
 * snapping and the forced 100svh minimum are scoped to that range to avoid
 * both mid-section traps and empty gaps under short content.
 */
@media (max-width: 1023px) {
  html {
    scroll-snap-type: none;
  }

  /* Neutralize the 100svh floor so short sections take their natural height and
     leave no empty gaps. !important is needed because the Tailwind CDN injects
     min-h-[100svh] at runtime, after this stylesheet, at equal specificity. */
  .story-section,
  .story-section [class*="100svh"] {
    min-height: 0 !important;
  }
}

/* Snap-desktop range: give every slide the same symmetric inset and centre its
   content vertically, so the gap above the content matches the gap below it.
   These three inners carry a height-capped chart (see .history-chart /
   .fertility-chart max-height): justify-content:center splits the leftover
   space evenly instead of letting it all pool at the bottom. */
@media (min-width: 1024px) {
  .place-section > div,
  .history-section > div,
  .fertility-section > div {
    justify-content: center;
    padding-top: var(--slide-pad);
    padding-bottom: var(--slide-pad);
  }
}

.story-section::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(29, 26, 23, 0.055) 0.65px, transparent 0.65px);
  background-size: 7px 7px;
  content: "";
  opacity: 0.34;
  pointer-events: none;
}

.intro-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 45%, rgba(199, 101, 69, 0.15), transparent 32%),
    radial-gradient(circle at 16% 86%, rgba(223, 173, 82, 0.16), transparent 27%),
    var(--paper);
}

.site-logo {
  display: inline-flex;
  border-radius: 50%;
}

.site-logo img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(29, 26, 23, 0.08));
  transition: transform 0.3s ease;
}

.site-logo:hover img {
  transform: scale(1.08) rotate(-3deg);
}

.site-lang {
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.site-lang a {
  text-decoration: none;
}

.site-lang.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.site-lang a.is-active {
  background: var(--ink);
  color: var(--paper);
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  transform: translateY(-180%);
  border-radius: 9999px;
  background: var(--ink);
  color: var(--paper);
  padding: 0.65rem 1rem;
  transition: transform 0.18s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.section-nav {
  position: fixed;
  right: 0.7rem;
  top: 50%;
  z-index: 45;
  display: grid;
  gap: 0.38rem;
  transform: translateY(-50%);
}

.section-nav button {
  width: 0.5rem;
  height: 0.5rem;
  border: 0;
  border-radius: 999px;
  background: rgba(29, 26, 23, 0.22);
  box-shadow: 0 0 0 3px rgba(243, 239, 230, 0.58);
  padding: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}

.section-nav button.is-active {
  background: var(--terra);
  transform: scale(1.6);
}

.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 46;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid rgba(29, 26, 23, 0.12);
  border-radius: 999px;
  background: rgba(243, 239, 230, 0.9);
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(29, 26, 23, 0.18);
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.6rem) scale(0.9);
  pointer-events: none;
  backdrop-filter: blur(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--paper);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .back-to-top {
    right: 1rem;
    bottom: 1rem;
    width: 2.6rem;
    height: 2.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.2s ease;
    transform: none;
  }
  .back-to-top.is-visible {
    transform: none;
  }
}

.kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(29, 26, 23, 0.48);
}

.section-title {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2.7rem, 6vw, 5.8rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.half-section {
  padding-top: 0;
  padding-bottom: 0;
}

.half-inner {
  width: 100%;
}

.half-carousel {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  min-height: 0;
  gap: 0.7rem;
}

.half-viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 18rem;
  overflow: hidden;
  touch-action: pan-y;
}

.half-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(0);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    visibility 0.4s ease;
}

.half-slide.is-from-right {
  transform: translateX(8%);
}

.half-slide.is-from-left {
  transform: translateX(-8%);
}

.half-slide.is-to-left {
  transform: translateX(-8%);
}

.half-slide.is-to-right {
  transform: translateX(8%);
}

.half-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  z-index: 1;
}

.half-nav {
  z-index: 4;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  align-self: center;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid rgba(29, 26, 23, 0.12);
  border-radius: 50%;
  background: rgba(243, 239, 230, 0.92);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(58, 47, 38, 0.08);
}

.half-nav svg {
  width: 1.2rem;
  height: 1.2rem;
}

.half-nav:hover {
  background: #fff;
}

.half-section .gallery-card {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}

.half-section .mini-map {
  flex: 1 1 auto;
  min-height: 12rem;
  aspect-ratio: auto;
}

.half-caption {
  flex: 0 0 auto;
  padding: 0.9rem 1.1rem 1.05rem;
}

.half-card-title {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.half-card-body {
  color: rgba(29, 26, 23, 0.58);
  font-size: clamp(0.78rem, 1.15vw, 0.95rem);
  line-height: 1.4;
}

.stock-section {
  padding-top: 0;
  padding-bottom: 0;
}

.stock-inner {
  height: 100svh;
  overflow: hidden;
  justify-content: center;
  padding-top: var(--slide-pad);
  padding-bottom: var(--slide-pad);
}

.stock-section .stock-lead {
  /* In em so the first sentence (~68.5em) keeps one line at any font size. */
  max-width: 72em;
  white-space: pre-line;
  text-wrap: pretty;
  line-height: 1.4;
}

.stock-stage {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

.stock-section .large-map {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

.stock-section .map-legend-row {
  flex: 0 0 auto;
  justify-content: center;
  margin-top: 0.55rem;
}

.stock-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  padding: 0.12rem 0.4rem;
  font: inherit;
  cursor: pointer;
}

.stock-legend-item:hover,
.stock-legend-item.is-active {
  color: var(--ink);
  background: rgba(29, 26, 23, 0.07);
}

.stock-legend-item.is-dimmed {
  opacity: 0.38;
}

.stock-section .country-shape.is-muted,
.stock-dot.is-muted {
  opacity: 0.14;
}

.stock-section .country-shape.is-muted:hover,
.stock-dot.is-muted:hover {
  opacity: 0.4;
}

.stock-section .large-map[hidden] {
  display: none;
}

.compare-section {
  padding-top: 0;
  padding-bottom: 0;
}

.compare-section .compare-grid {
  flex: 1 1 auto;
  min-height: 0;
}

.compare-section.contrast-section .kicker {
  color: rgba(243, 239, 230, 0.5);
}

.compare-section.contrast-section .history-title {
  color: var(--paper);
}

.compare-section.contrast-section .history-lead {
  max-width: var(--lead-measure);
  color: rgba(243, 239, 230, 0.58);
  white-space: normal;
}

.stock-color-bar {
  width: min(46vw, 20rem);
  height: 0.58rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #e8eef1,
    #c9d6dc,
    #a6bac4,
    #8199a6,
    #5d7684,
    #3e5361,
    #1a242b
  );
}

.stock-chart-axis path,
.stock-chart-axis line {
  stroke: rgba(29, 26, 23, 0.18);
}

.stock-chart-axis text {
  fill: rgba(29, 26, 23, 0.48);
  font-size: 0.68rem;
}

.stock-chart-label {
  fill: rgba(29, 26, 23, 0.42);
  font-size: 0.72rem;
}

.stock-label {
  fill: rgba(29, 26, 23, 0.82);
  font-size: 0.72rem;
  font-weight: 600;
  paint-order: stroke;
  stroke: #f3efe6;
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.stock-why {
  fill: rgba(29, 26, 23, 0.5);
  font-size: 0.6rem;
  paint-order: stroke;
  stroke: #f3efe6;
  stroke-width: 2.5px;
  stroke-linejoin: round;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.stock-leader {
  stroke: rgba(29, 26, 23, 0.42);
  stroke-width: 1;
  transition: opacity 0.2s ease;
}

.stock-anchor-ring {
  fill: none;
  stroke: rgba(29, 26, 23, 0.55);
  stroke-width: 1.1;
  transition: opacity 0.2s ease;
}

.stock-label.is-muted,
.stock-why.is-muted,
.stock-leader.is-muted,
.stock-anchor-ring.is-muted {
  opacity: 0.14;
}

.stock-average {
  fill: none;
  stroke: #536675;
  stroke-width: 1.35;
  stroke-dasharray: 5 5;
  opacity: 0.55;
}

.stock-average-label {
  fill: #536675;
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.72;
}

.hero-number {
  max-width: 7ch;
  font-size: clamp(4.2rem, 10vw, 9.8rem);
  font-weight: 700;
  letter-spacing: -0.075em;
  line-height: 0.82;
}

.live-population-section {
  background:
    radial-gradient(circle at 50% 42%, rgba(199, 101, 69, 0.12), transparent 34%),
    var(--paper);
}

.live-population-number {
  font-size: clamp(2.7rem, 10vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.065em;
  line-height: 0.9;
  white-space: nowrap;
}

.live-counter-note {
  max-width: 100%;
  font-size: clamp(0.72rem, 1.7vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: nowrap;
}

.population-rate-card {
  display: grid;
  gap: 0.8rem;
  border: 1px solid rgba(29, 26, 23, 0.11);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.34);
  padding: 1.35rem;
  text-align: left;
  box-shadow: 0 12px 35px rgba(58, 47, 38, 0.045);
}

.population-rate-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(29, 26, 23, 0.56);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rate-icon {
  width: 1.55rem;
  height: 1.55rem;
  flex-shrink: 0;
  overflow: visible;
}

.population-rate-card-births .rate-icon {
  color: var(--terra);
}

.population-rate-card-deaths .rate-icon {
  color: var(--slate);
}

.population-rate-number {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.2rem, 2.1vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  white-space: nowrap;
}

.population-rate-secondary {
  color: rgba(29, 26, 23, 0.54);
  font-size: 0.8rem;
  line-height: 1.4;
}

.live-rates .history-insight {
  max-width: none;
}

@media (min-width: 768px) {
  .population-rate-secondary {
    white-space: nowrap;
  }
}

@media (max-width: 639px) {
  .live-population-section {
    padding-top: 5.5rem;
    padding-bottom: 2.5rem;
  }

  .live-population-number {
    font-size: clamp(2.15rem, 12vw, 3.2rem);
  }

  .live-population-section .live-rates {
    margin-top: 1.75rem;
  }

  .population-rate-card {
    gap: 0.5rem;
    padding: 1.05rem 1.15rem;
  }
}

.history-section {
  padding-top: 0;
  padding-bottom: 0;
}

.history-title {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.history-lead {
  max-width: var(--lead-measure);
  color: rgba(29, 26, 23, 0.58);
  font-size: clamp(0.72rem, 1.15vw, 0.95rem);
  line-height: 1.35;
  white-space: normal;
}

.history-insight {
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  quotes: none;
  border-left: 3px solid var(--terra);
  padding: 0.1rem 0 0.1rem 1rem;
  color: rgba(29, 26, 23, 0.72);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(0.88rem, 1.35vw, 1.08rem);
  font-weight: 400;
  line-height: 1.45;
}

.place-section {
  padding-top: 0;
  padding-bottom: 0;
}

.place-remaining-label {
  flex: 0 0 auto;
  color: rgba(29, 26, 23, 0.48);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.place-remaining-number {
  flex: 0 0 auto;
  margin-top: 0.2rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2.1rem, 5.4vw, 4.2rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.place-section.is-complete .place-remaining-label {
  display: none;
}

.place-section.is-complete .place-remaining-number {
  margin-top: 1.25rem;
  color: var(--terra);
  font-size: clamp(1.7rem, 4vw, 3.1rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  animation: place-cheer 0.6s ease-out;
}

.place-section.is-complete .place-bar {
  animation: place-bar-cheer 0.7s ease-out;
}

@keyframes place-cheer {
  0% {
    opacity: 0;
    transform: translateY(0.4rem) scale(0.92);
  }
  62% {
    opacity: 1;
    transform: translateY(-0.12rem) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes place-bar-cheer {
  0% {
    transform: scaleX(0.97);
    filter: saturate(0.7);
  }
  55% {
    transform: scaleX(1.01);
    filter: saturate(1.15);
  }
  100% {
    transform: none;
    filter: none;
  }
}

.place-bar {
  display: flex;
  flex: 0 0 auto;
  overflow: hidden;
  height: 0.7rem;
  margin-top: 0.85rem;
  border-radius: 9999px;
  background: rgba(29, 26, 23, 0.08);
}

.place-bar i {
  display: block;
  height: 100%;
}

.place-board {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.place-vessel-head,
.place-vessel {
  display: grid;
  grid-template-columns: 2.1rem 16rem minmax(0, 1fr) 6.4rem 5.8rem;
  gap: 0.7rem 0.85rem;
  align-items: center;
}

.place-vessel-head {
  flex: 0 0 auto;
  color: rgba(29, 26, 23, 0.42);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.place-vessel-head span:nth-child(4),
.place-vessel-head span:nth-child(5),
.place-count-units,
.place-count-people {
  text-align: right;
}

.place-vessels {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
}

.place-vessel {
  min-height: 3.1rem;
  padding: 0.35rem 0;
  color: var(--vessel, var(--terra));
}

.place-vessel-icon {
  width: 2.1rem;
  height: 2.1rem;
  background-color: var(--vessel, var(--terra));
  /* The mask image is set inline on the element (see initPlace): a url() inside
     an inline style resolves against the document, while the same url() carried
     through a custom property here would resolve against this stylesheet's own
     folder (css/img/…) and 404, which is what made the icons disappear. */
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.place-vessel-copy {
  min-width: 0;
}

.place-vessel-copy strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
}

.place-vessel-copy span {
  display: block;
  color: rgba(29, 26, 23, 0.48);
  font-size: 0.72rem;
}

.place-vessel-copy .place-vessel-meta {
  white-space: nowrap;
}

.place-vessel-copy .place-vessel-world {
  display: inline;
  color: var(--vessel, var(--terra));
  font-weight: 600;
}

.place-vessel-copy .place-vessel-world::before {
  content: "·";
  margin: 0 0.4em;
  color: rgba(29, 26, 23, 0.35);
  font-weight: 400;
}

.place-columns-hint {
  flex: 0 0 auto;
  max-width: 44rem;
  color: rgba(29, 26, 23, 0.5);
  font-size: 0.78rem;
  line-height: 1.4;
}

.place-vessel-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.place-vessel-controls button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(29, 26, 23, 0.14);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.4);
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.place-vessel-controls button:hover {
  background: rgba(255, 255, 255, 0.8);
}

.place-vessel-controls input[type="range"] {
  width: 100%;
  min-width: 0;
  height: 1.4rem;
  appearance: none;
  background: transparent;
}

.place-vessel-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 0.38rem;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--vessel) 0 var(--fill, 0%),
    rgba(29, 26, 23, 0.1) var(--fill, 0%) 100%
  );
}

.place-vessel-controls input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 1rem;
  height: 1rem;
  margin-top: -0.31rem;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--vessel);
  box-shadow: 0 0 0 1px rgba(29, 26, 23, 0.12);
}

.place-vessel-controls input[type="range"]::-moz-range-track {
  height: 0.38rem;
  border: 0;
  border-radius: 999px;
  background: rgba(29, 26, 23, 0.1);
}

.place-vessel-controls input[type="range"]::-moz-range-progress {
  height: 0.38rem;
  border-radius: 999px;
  background: var(--vessel);
}

.place-vessel-controls input[type="range"]::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--vessel);
  box-shadow: 0 0 0 1px rgba(29, 26, 23, 0.12);
}

.place-count-units,
.place-count-people {
  color: var(--ink);
  font-size: 0.82rem;
}

.place-insight {
  margin-bottom: clamp(1.75rem, 5vh, 3.5rem);
}

.place-insight[hidden] {
  display: none;
}

/* The reset only matters once everyone is seated, so it appears under
   "Ура! Вы всех разместили!" instead of waiting in the header. The selectors
   outrank the later .secondary-button { display: inline-flex }. */
.place-section .place-reset-done {
  display: none;
}

.place-section.is-complete .place-reset-done {
  display: inline-flex;
}

/* The count (or "Ура!") and the reset share a wrapping row: side by side on wide
   screens, so finishing adds no height to the slide; the reset drops under the
   message on a phone. */
.place-remaining-row {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

/* The finished message drops lower; that space goes on the row, not the message,
   so the reset stays centred on the text beside it. */
.place-section.is-complete .place-remaining-row {
  margin-top: 1.25rem;
}

.place-section.is-complete .place-remaining-row .place-remaining-number {
  margin-top: 0;
}

.place-section.contrast-section .kicker {
  color: rgba(243, 239, 230, 0.5);
}

.place-section.contrast-section .history-lead {
  color: rgba(243, 239, 230, 0.58);
  white-space: normal;
  max-width: var(--lead-measure);
}

.place-section.contrast-section .place-remaining-label {
  color: rgba(243, 239, 230, 0.45);
}

.place-section.contrast-section .place-remaining-number {
  color: var(--paper);
}

.place-section.contrast-section.is-complete .place-remaining-number {
  color: var(--sun);
}

.place-section.contrast-section .place-bar {
  background: rgba(243, 239, 230, 0.12);
}

.place-section.contrast-section .place-vessel-head {
  color: rgba(243, 239, 230, 0.38);
}

.place-section.contrast-section .place-vessel-copy strong,
.place-section.contrast-section .place-count-units,
.place-section.contrast-section .place-count-people {
  color: var(--paper);
}

.place-section.contrast-section .place-vessel-copy span {
  color: rgba(243, 239, 230, 0.48);
}

.place-section.contrast-section .place-vessel-copy .place-vessel-world {
  color: var(--vessel, var(--paper));
}

.place-section.contrast-section .place-columns-hint {
  color: rgba(243, 239, 230, 0.5);
}

.place-section.contrast-section .place-vessel-controls button {
  border-color: rgba(243, 239, 230, 0.2);
  background: rgba(243, 239, 230, 0.08);
  color: var(--paper);
}

.place-section.contrast-section .place-vessel-controls button:hover {
  background: rgba(243, 239, 230, 0.18);
}

.place-section.contrast-section .place-vessel-controls input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--vessel) 0 var(--fill, 0%),
    rgba(243, 239, 230, 0.16) var(--fill, 0%) 100%
  );
}

.place-section.contrast-section .place-vessel-controls input[type="range"]::-moz-range-track {
  background: rgba(243, 239, 230, 0.16);
}

.place-section.contrast-section .place-insight {
  color: rgba(243, 239, 230, 0.8);
}

.history-chart {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(56svh, 30rem);
  display: flex;
}

/* The shared `.chart-frame svg { height: 100% }` overflows this flexbox on short,
   wide viewports (the svg keeps the viewBox aspect and grows taller than the
   frame), and overflow:hidden then clips the bottom X axis. `height: auto` lets
   align-items:stretch size the svg to the frame's content box instead. The
   double-class selector outweighs the later `.chart-frame svg` rule. */
.chart-frame.history-chart svg,
.chart-frame.fertility-chart svg {
  height: auto;
}

.history-chart .milestone-line {
  stroke: rgba(29, 26, 23, 0.18);
  stroke-dasharray: 3 4;
}

.history-chart .chart-axis-unit,
.shape-eras .chart-axis-unit {
  fill: rgba(29, 26, 23, 0.45);
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
}

.history-chart .history-milestone {
  cursor: pointer;
}

.history-chart .milestone-label {
  fill: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
}

.history-chart .milestone-gap {
  fill: rgba(29, 26, 23, 0.55);
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
}

/* Beside-the-dot labels on a phone cross gridlines, so they get a paper halo. */
.history-chart .milestone-inline {
  paint-order: stroke;
  stroke: #f3efe6;
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* The caption beside the 2025 point may cross gridlines, so it gets a paper halo. */
.fertility-chart .fertility-now-label {
  fill: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  paint-order: stroke;
  stroke: #f3efe6;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.fertility-chart .fertility-now-value {
  fill: rgba(29, 26, 23, 0.6);
  font-weight: 500;
}

.future-section {
  padding-top: 0;
  padding-bottom: 0;
}

.future-inner {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--slide-pad);
  padding-bottom: var(--slide-pad);
}

.future-lead {
  max-width: var(--lead-measure);
  white-space: normal;
}

.future-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.15rem;
}

.future-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.future-swatch {
  display: block;
  width: 1.45rem;
  height: 0.22rem;
  border-radius: 999px;
}

.future-swatch-estimate {
  height: 0;
  border-top: 2px dashed #8a847a;
  background: transparent;
  border-radius: 0;
}

.future-swatch-past {
  background: #1d1a17;
}

.future-swatch-median {
  background: #c76545;
}

.future-swatch-band {
  height: 0.7rem;
  border-radius: 3px;
  background: rgba(199, 101, 69, 0.16);
  border: 1px dashed #9a8b7b;
}

.future-chart {
  flex: 1 1 auto;
  width: 100%;
  height: min(52svh, 28rem);
  min-height: 18rem;
  display: flex;
}

.future-chart .future-peak-label {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 650;
  fill: var(--ink);
  paint-order: stroke fill;
  stroke: #f3efe6;
  stroke-width: 4px;
  stroke-linejoin: round;
}

.fertility-section {
  padding-top: 0;
  padding-bottom: 0;
}

.fertility-lead {
  max-width: var(--lead-measure);
  white-space: normal;
}

.fertility-legend {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  max-width: 14rem;
  color: rgba(29, 26, 23, 0.55);
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: right;
  pointer-events: none;
}

.fertility-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.fertility-chart {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  /* Scale the (viewBox) chart down on short screens so the fixed copy + facts
     still clear one viewport; the SVG letterboxes instead of clipping. */
  max-height: min(46svh, 22rem);
  display: flex;
}

.fertility-hover-line {
  stroke: rgba(29, 26, 23, 0.28);
  stroke-dasharray: 3 4;
  pointer-events: none;
}

.fertility-facts {
  flex: 0 0 auto;
}

.fertility-facts-grid {
  display: grid;
  gap: 0.7rem;
}

@media (min-width: 640px) {
  .fertility-facts-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 1.25rem;
  }
}

.fertility-fact {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  border: 1px solid rgba(29, 26, 23, 0.11);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.34);
  padding: 0.85rem 1rem;
}

.fertility-fact-value {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.fertility-fact-label {
  color: rgba(29, 26, 23, 0.55);
  font-size: 0.78rem;
  line-height: 1.35;
}

.treemap-section {
  padding-top: 0;
  padding-bottom: 0;
}

.treemap-inner {
  overflow: hidden;
}

.treemap-chart {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  padding: 0;
}

.treemap-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.treemap-cell {
  cursor: pointer;
  stroke: var(--paper);
  stroke-width: 1.6;
  transition: filter 0.18s ease, stroke 0.18s ease;
}

/* Touch browsers keep :hover on the last tapped element, so only a real pointer
   gets the hover outline; a tap marks its cell with .is-active instead. */
@media (hover: hover) {
  .treemap-cell:hover {
    filter: brightness(1.06);
    stroke: var(--ink);
    stroke-width: 2;
  }
}

/* The cell's clip keeps only the inner half of the stroke, so a tapped cell gets a
   wider one to read under a finger. */
.treemap-cell.is-active {
  filter: brightness(1.06);
  stroke: var(--ink);
  stroke-width: 4;
}

.treemap-label,
.treemap-pop,
.treemap-continent {
  pointer-events: none;
  font-family: "DM Sans", sans-serif;
}

.treemap-continent {
  fill: rgba(29, 26, 23, 0.55);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.treemap-continent.is-bundled {
  fill: rgba(29, 26, 23, 0.8);
  letter-spacing: 0.05em;
}

.treemap-label {
  fill: rgba(29, 26, 23, 0.88);
  font-size: 11px;
  font-weight: 650;
}

.treemap-pop {
  fill: rgba(29, 26, 23, 0.52);
  font-size: 10px;
}

/* Below the desktop slide layout the carousel sizes itself to its tallest card:
   every slide shares one grid cell (inactive ones stay laid out but invisible), so
   the height holds steady from slide to slide and no caption is ever clipped. */
@media (max-width: 1023px) {
  .half-viewport {
    display: grid;
    min-height: 0;
  }

  .half-section .half-slide,
  .half-section .half-slide[hidden] {
    position: relative;
    inset: auto;
    display: flex;
    grid-area: 1 / 1;
  }

  .half-section .gallery-card {
    height: auto;
  }

  .half-section .mini-map {
    flex: none;
    min-height: 0;
    aspect-ratio: 2 / 1;
  }
}

@media (max-width: 639px) {
  /* The arrows move under the card, so the card gets the full column width. */
  .half-carousel {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1rem;
  }

  .half-viewport {
    flex: 1 0 100%;
    order: -1;
  }

  .half-nav {
    width: 2.75rem;
    height: 2.75rem;
  }

  .half-caption {
    padding: 0.75rem 0.9rem 0.9rem;
  }

  /* A tall frame (about a screen high) gives the mid-size cells room for whole
     names; the corner button widens it further (makeChartExpandable). */
  .treemap-chart {
    flex: none;
    min-height: 0;
    aspect-ratio: 1 / 2;
  }

  /* The scatter is redrawn at its box's real size on a phone, so it can take a
     square frame that gives the log–log cloud room. */
  #stock-chart.large-map {
    aspect-ratio: 1 / 1;
  }

  .stock-inner {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    padding-top: 4.5rem;
    padding-bottom: 0.9rem;
  }

  .stock-section .large-map {
    min-height: min(34svh, 16rem);
  }
}

.fertility-chart .future-label,
.future-chart .future-label {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 650;
  paint-order: stroke fill;
  stroke: #f3efe6;
  stroke-width: 4px;
  stroke-linejoin: round;
}

.future-chart .future-label-median {
  font-size: 12.5px;
  font-weight: 750;
}

.future-chart .chart-axis-unit {
  fill: rgba(29, 26, 23, 0.45);
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
}

@media (max-width: 639px) {
  .future-inner {
    min-height: 0;
    padding-top: 4.5rem;
    padding-bottom: 1.25rem;
  }

  .future-chart {
    height: 17.5rem;
    min-height: 0;
  }
}

.journey-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--paper);
  padding: 0.8rem 1.2rem;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease;
}

.journey-button:hover,
.secondary-button:hover {
  transform: translateY(-2px);
  background: var(--clay);
}

.secondary-button {
  border-color: rgba(29, 26, 23, 0.14);
  background: transparent;
  color: var(--ink);
}

.secondary-button-light {
  border-color: rgba(243, 239, 230, 0.24);
  color: var(--paper);
}

/* Bottom-right author byline — sits above the crowd, clears the fixed section-nav dots */
.intro-author {
  position: absolute;
  right: 2.5rem;
  bottom: 1.5rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  max-width: calc(100% - 3rem);
  font-size: 0.875rem;
  line-height: 1.3;
  color: rgba(29, 26, 23, 0.55);
}

.intro-author-label {
  flex-shrink: 0;
}

.intro-author-name {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 0.15em;
  transition: color 0.15s ease;
}

.intro-author-name:hover {
  color: var(--terra);
  text-decoration: underline;
}

.intro-author-name:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
  border-radius: 2px;
}

.intro-author-tg {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: -0.1rem;
  border-radius: 9999px;
  color: rgba(29, 26, 23, 0.55);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.intro-author-tg svg {
  display: block;
  flex-shrink: 0;
}

.intro-author-tg:hover {
  color: var(--terra);
  background-color: rgba(199, 101, 69, 0.1);
}

.intro-author-tg:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .intro-author {
    right: 1.5rem;
    bottom: 1.25rem;
    font-size: 0.8125rem;
  }
}

.intro-crowd {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  overflow: hidden;
  transform: translateX(-50%);
  pointer-events: none;
}

.intro-person {
  position: absolute;
  width: clamp(1rem, 2vw, 2.25rem);
  aspect-ratio: 0.48;
  color: var(--terra);
  opacity: 0.1;
  cursor: pointer;
  pointer-events: auto;
  will-change: transform, opacity;
  animation: person-float var(--duration, 6s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

.intro-person:nth-child(4n) { color: var(--slate); }
.intro-person:nth-child(7n) { color: var(--sun); }

@keyframes person-float {
  from {
    opacity: 0.07;
    transform: translate3d(0, 0, 0) scale(var(--person-scale, 1));
  }

  to {
    opacity: 0.2;
    transform:
      translate3d(var(--drift-x, 0.25rem), var(--drift-y, -0.35rem), 0)
      scale(var(--person-scale, 1));
  }
}

.intro-person.is-flying {
  pointer-events: none;
  animation: person-fly 0.8s cubic-bezier(.36, .02, .72, .25) forwards;
}

.intro-person.is-returning {
  pointer-events: none;
  animation: person-return 0.65s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes person-fly {
  0% {
    opacity: 0.2;
    transform: translate3d(0, 0, 0) rotate(0) scale(var(--person-scale, 1));
  }

  18% {
    opacity: 0.3;
    transform: translate3d(0, -0.35rem, 0) rotate(0) scale(calc(var(--person-scale, 1) * 1.16));
  }

  100% {
    opacity: 0;
    transform:
      translate3d(var(--fly-x, 12rem), var(--fly-y, -18rem), 0)
      rotate(var(--fly-rotate, 380deg))
      scale(0.2);
  }
}

@keyframes person-return {
  from {
    opacity: 0;
    transform: translate3d(0, 0.8rem, 0) scale(0.35);
  }

  to {
    opacity: 0.12;
    transform: translate3d(0, 0, 0) scale(var(--person-scale, 1));
  }
}

.chart-frame,
.fact-card,
.age-you-card {
  border: 1px solid rgba(29, 26, 23, 0.11);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 45px rgba(58, 47, 38, 0.05);
}

.chart-frame {
  overflow: hidden;
  padding: 0.75rem;
}

.chart-frame svg,
.large-map svg,
.you-chart svg {
  display: block;
  width: 100%;
  height: 100%;
}

.chart-axis text {
  fill: rgba(29, 26, 23, 0.5);
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
}

.chart-axis path,
.chart-axis line {
  stroke: rgba(29, 26, 23, 0.12);
}

.fact-card {
  padding: 1.35rem;
}

.fact-number {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.billion-card {
  min-height: 7.8rem;
  border: 1px solid rgba(29, 26, 23, 0.1);
  border-radius: 0.9rem;
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.24);
}

.billion-card strong {
  display: block;
  font-size: 1.4rem;
}

.billion-card span {
  display: block;
  margin-top: 1rem;
  color: rgba(29, 26, 23, 0.5);
  font-size: 0.72rem;
}

.contrast-section {
  background: var(--ink);
}

.contrast-section::before {
  background-image: radial-gradient(rgba(243, 239, 230, 0.08) 0.65px, transparent 0.65px);
}

.chip-row,
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  border: 1px solid currentColor;
  border-color: rgba(29, 26, 23, 0.14);
  border-radius: 9999px;
  padding: 0.25rem;
}

.contrast-section .chip-row {
  border-color: rgba(243, 239, 230, 0.2);
}

.chip-row button,
.segmented button {
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  padding: 0.5rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.chip-row button.is-active,
.segmented button.is-active {
  background: var(--terra);
  color: #fff;
}

/* Phones: a two-option switch spans the column in two equal halves (as in metro),
   so a long label ("Продолжительность жизни") wraps inside its own half instead
   of breaking the pill into a two-row lozenge. */
@media (max-width: 639px) {
  .segmented {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
  }

  .segmented button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.45rem 0.6rem;
    line-height: 1.15;
  }
}

.hundred-section {
  padding-top: 0;
  padding-bottom: 0;
}

.hundred-layout {
  display: grid;
  flex: 1 1 auto;
  gap: 1.5rem 2.5rem;
  align-items: center;
  min-height: 0;
}

.hundred-copy {
  min-width: 0;
}

.hundred-lead {
  max-width: var(--lead-measure);
  color: rgba(29, 26, 23, 0.62);
  white-space: normal;
}

.hundred-insights {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.hundred-insights[hidden] {
  display: none;
}

.hundred-insight {
  margin: 0;
  border: 0;
  quotes: none;
  border-left: 3px solid var(--terra);
  padding: 0.15rem 0 0.15rem 1rem;
  color: rgba(29, 26, 23, 0.74);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(0.88rem, 1.35vw, 1.08rem);
  line-height: 1.45;
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.28rem 0.36rem;
  align-items: end;
  width: min(100%, calc(52svh * 0.54));
  justify-self: center;
}

@media (min-width: 1024px) {
  .hundred-layout {
    grid-template-columns: minmax(20rem, 0.92fr) minmax(0, 1.08fr);
  }

  .people-grid {
    /* Wider side gap so the hundred silhouettes spread out and fill more of the
       column; the width factor rises with the gap so each figure keeps its size
       and the block stays the same height. */
    gap: 0.28rem 1rem;
    width: min(100%, calc(72svh * 0.67));
  }
}

@media (max-width: 1023px) {
  .hundred-layout {
    display: flex;
    flex-direction: column;
  }

  .hundred-copy {
    display: contents;
  }

  .hundred-intro {
    order: 0;
  }

  .people-grid {
    order: 1;
    width: min(100%, calc(48svh * 0.54));
  }

  .hundred-insights {
    order: 2;
    margin-top: 0.4rem;
  }

  #hundred-legend {
    order: 3;
  }
}

.person-button {
  border: 0;
  background: transparent;
  color: var(--terra);
  padding: 0;
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.55s ease;
}

.person-button:hover {
  transform: translateY(-2px);
}

.person-button.is-muted {
  opacity: 0.14;
}

.person-icon {
  display: block;
  width: 100%;
  aspect-ratio: 0.48;
  fill: currentColor;
}

.ranks-section {
  padding-top: 0;
  padding-bottom: 0;
}

.ranks-inner {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--slide-pad);
  padding-bottom: var(--slide-pad);
}

.ranks-lead {
  max-width: var(--lead-measure);
  white-space: normal;
}

.ranks-chart {
  display: flex;
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
}

.ranks-svg text {
  font-family: "DM Sans", system-ui, sans-serif;
}

.ranks-year {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  fill: var(--ink);
}

.ranks-year-note {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: rgba(29, 26, 23, 0.42);
}

.ranks-name {
  font-size: 15px;
  font-weight: 600;
}

.ranks-pop {
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ranks-rank {
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ranks-ribbon {
  opacity: 0.34;
  transition: opacity 0.18s ease;
}

.ranks-ribbon-stub {
  opacity: 0.2;
}

.ranks-item {
  transition: opacity 0.18s ease;
}

.ranks-chart.ranks-hover .ranks-ribbon:not(.is-hi) {
  opacity: 0.1;
}

.ranks-chart.ranks-hover .ranks-ribbon.is-hi {
  opacity: 0.6;
}

.ranks-chart.ranks-hover .ranks-item:not(.is-hi) {
  opacity: 0.32;
}

@media (max-width: 1023px) {
  .ranks-inner {
    min-height: 0;
    padding-top: 4.5rem;
    padding-bottom: 1.25rem;
  }

  /* Three text-heavy columns cannot shrink to a phone's width and stay
     legible, so the chart keeps a readable size and scrolls sideways. */
  .ranks-chart {
    flex: none;
    height: auto;
    min-height: 0;
    padding: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(29, 26, 23, 0.28) transparent;
  }

  .ranks-chart.ranks-chart svg {
    width: auto;
    height: min(74svh, 34rem);
    min-width: 720px;
  }

  /* Touch browsers don't keep a scrollbar on screen, so the edge that still hides
     chart fades out (updateScrollHints toggles the classes as the chart scrolls).
     Expanded phone charts (makeChartExpandable) use the same fades. */
  .ranks-chart.can-scroll-right,
  .is-expanded.can-scroll-right {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent);
  }

  .ranks-chart.can-scroll-left,
  .is-expanded.can-scroll-left {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5rem);
    mask-image: linear-gradient(90deg, transparent, #000 3.5rem);
  }

  .ranks-chart.can-scroll-left.can-scroll-right,
  .is-expanded.can-scroll-left.can-scroll-right {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 3.5rem,
      #000 calc(100% - 3.5rem),
      transparent
    );
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 3.5rem,
      #000 calc(100% - 3.5rem),
      transparent
    );
  }
}

.shape-section {
  padding-top: 0;
  padding-bottom: 0;
}

.shape-inner {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--slide-pad);
  padding-bottom: var(--slide-pad);
}

.shape-lead {
  max-width: var(--lead-measure);
  white-space: normal;
}

.shape-eras {
  flex: 1 1 auto;
  min-height: min(46svh, 24rem);
  overflow: hidden;
  padding: 0.75rem;
  border: 1px solid rgba(29, 26, 23, 0.11);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 45px rgba(58, 47, 38, 0.05);
}

.shape-eras svg {
  display: block;
  width: 100%;
  height: 100%;
}

.shape-band-label {
  font-family: "DM Sans", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.shape-today-label {
  font-family: "DM Sans", sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  fill: rgba(29, 26, 23, 0.55);
}

@media (max-width: 767px) {
  .shape-inner {
    min-height: 0;
    padding-top: 4.5rem;
    padding-bottom: 1.25rem;
  }

  .shape-eras {
    min-height: min(56svh, 22rem);
  }

  .shape-band-label {
    font-size: 0.72rem;
  }
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(29, 26, 23, 0.14);
  border-radius: 9999px;
  padding: 0.35rem 0.6rem;
  font-size: 0.72rem;
  color: rgba(29, 26, 23, 0.72);
}

.legend-chip::before {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--chip-color);
  content: "";
}

.legend-chip {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.legend-chip.is-active {
  border-color: rgba(29, 26, 23, 0.55);
  background: rgba(29, 26, 23, 0.06);
  color: rgba(29, 26, 23, 0.95);
}

.snap-gallery {
  display: grid;
  grid-auto-columns: min(82vw, 54rem);
  grid-auto-flow: column;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.gallery-card {
  min-height: 32rem;
  overflow: hidden;
  border: 1px solid rgba(29, 26, 23, 0.11);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.34);
  scroll-snap-align: center;
}

.contrast-section .gallery-card {
  border-color: rgba(243, 239, 230, 0.13);
  background: rgba(243, 239, 230, 0.055);
}

.mini-map {
  position: relative;
  aspect-ratio: 20 / 9;
  min-height: 14rem;
}

.mini-map svg,
.mini-map canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.mini-map canvas {
  z-index: 1;
  pointer-events: none;
}

.mini-map .mini-overlay {
  z-index: 2;
  pointer-events: none;
}

.large-map {
  position: relative;
  min-height: min(72svh, 52rem);
  overflow: hidden;
  border: 1px solid rgba(29, 26, 23, 0.1);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.25);
}

.large-map-dark {
  border-color: rgba(243, 239, 230, 0.12);
  background: rgba(243, 239, 230, 0.04);
}

.country-shape {
  stroke: var(--paper);
  stroke-width: 0.45;
  vector-effect: non-scaling-stroke;
  outline: none;
  pointer-events: fill;
  transition: fill 0.35s ease, opacity 0.35s ease;
}

.country-shape:hover {
  stroke: var(--ink);
  stroke-width: 1.2;
}

.country-shape.is-flow-highlight {
  fill: #f2c230;
  stroke: #7a5c00;
  stroke-width: 1.4;
}

.large-map-dark .country-shape {
  stroke: rgba(29, 26, 23, 0.7);
}

.map-tooltip {
  position: fixed;
  z-index: 90;
  max-width: 16rem;
  pointer-events: none;
  border: 1px solid rgba(29, 26, 23, 0.1);
  border-radius: 0.8rem;
  background: rgba(243, 239, 230, 0.96);
  padding: 0.75rem 0.85rem;
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.4;
  box-shadow: 0 12px 30px rgba(29, 26, 23, 0.15);
  backdrop-filter: blur(8px);
}

.map-tooltip.hidden {
  display: none;
}

.map-legend-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1rem;
  color: rgba(29, 26, 23, 0.55);
  font-size: 0.7rem;
}

.map-legend-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.map-legend-row i {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
}

.map-legend-row i.stock-color-bar {
  width: min(46vw, 20rem);
  height: 0.58rem;
  border-radius: 999px;
}

/* A sequential legend (renderSequentialLegend) reads as a bar plus swatch chips on
   wide screens. On a phone the chips wrapped around the bar at random, so there
   the bar spans the row and the values sit on the line under it, each at its
   place on the scale. */
.map-legend-row .legend-scale-ticks {
  display: none;
}

@media (max-width: 639px) {
  .map-legend-row .legend-scale {
    display: flex;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
  }

  .map-legend-row .legend-scale i.stock-color-bar {
    width: 100%;
  }

  .map-legend-row .legend-scale-ticks {
    position: relative;
    display: block;
    height: 1.1em;
  }

  .map-legend-row .legend-scale-ticks b {
    position: absolute;
    top: 0;
    font-weight: 500;
    white-space: nowrap;
  }

  .map-legend-row .legend-swatch {
    display: none;
  }

  /* The population legend (renderPopulationLegend): one equal step per filter
     band, with each band's button centred under its step. */
  .map-legend-row.is-banded {
    display: grid;
    grid-template-columns: repeat(var(--legend-bands, 7), minmax(0, 1fr));
    gap: 0.3rem 0;
  }

  .map-legend-row.is-banded .legend-scale {
    grid-column: 1 / -1;
  }

  .map-legend-row.is-banded .legend-scale i.stock-color-bar {
    border-radius: 0.3rem;
    background: var(--legend-steps);
  }

  .map-legend-row.is-banded .stock-legend-item {
    justify-content: center;
    min-height: 2rem;
    padding: 0.1rem 0.05rem;
    font-size: 0.62rem;
    line-height: 1.1;
    text-align: center;
  }

  .map-legend-row.is-banded .stock-legend-item i {
    display: none;
  }
}

.quiz-card {
  min-width: 0;
  border: 1px solid rgba(243, 239, 230, 0.13);
  border-radius: 1.25rem;
  background: rgba(243, 239, 230, 0.055);
  padding: 1.25rem;
}

#quiz-options {
  min-width: 0;
}

.quiz-option {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  border: 1px solid rgba(243, 239, 230, 0.16);
  border-radius: 1rem;
  background: rgba(243, 239, 230, 0.05);
  color: var(--paper);
  padding: 0.9rem 0.85rem;
  text-align: left;
  container-type: inline-size;
  transition: border 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.quiz-option-name {
  display: flex;
  align-items: baseline;
  max-width: 100%;
  font-size: clamp(1.02rem, 11cqi, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
}

.quiz-option-label {
  min-width: 0;
  /* Wrap multi-word names between words only — never split a word or
     hyphenate. A single long word that would overflow is instead shrunk to
     fit by fitOne() in main.js. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.quiz-option-dot {
  flex: 0 0 auto;
  width: 0.62em;
  height: 0.62em;
  margin-right: 0.45em;
  border-radius: 999px;
}

.quiz-option-area {
  margin-top: auto;
  padding-top: 1.1rem;
  color: rgba(243, 239, 230, 0.42);
  font-size: 0.78rem;
}

.quiz-option:hover {
  border-color: var(--terra);
  background: rgba(199, 101, 69, 0.14);
  transform: translateY(-2px);
}

.quiz-option.is-correct {
  border-color: var(--pair-color, var(--sun));
  background: color-mix(in srgb, var(--pair-color, var(--sun)) 18%, transparent);
}

.quiz-option.is-wrong {
  opacity: 0.45;
}

.quiz-result:empty,
.quiz-actions:not(:has(button:not(.hidden):not([hidden]))) {
  display: none;
}

.quiz-result:not(:empty) {
  margin-bottom: 1rem;
}

@media (max-width: 1023px) {
  .quiz-footer:has(#quiz-result:not(:empty)),
  .quiz-footer:has(button:not(.hidden):not([hidden])),
  .quiz-footer:has(#quiz-finale:not([hidden])) {
    margin-top: 1.15rem;
  }
}

.quiz-finale[hidden],
.quiz-highlight[hidden],
#quiz-options[hidden] {
  display: none;
}

.compare-map-wrap {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
}

#compare-map {
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  min-height: min(58svh, 34rem);
}

@media (min-width: 1024px) {
  .compare-grid {
    align-items: stretch;
  }

  .compare-quiz {
    display: flex;
    flex-direction: column;
    align-self: start;
  }

  .quiz-card {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
  }

  .quiz-footer {
    margin-top: 1.15rem;
  }

  .quiz-card:has(#quiz-finale:not([hidden])) .quiz-footer {
    margin-top: 1.15rem;
  }

  .compare-map-wrap,
  #compare-map {
    height: 100%;
    min-height: min(58svh, 34rem);
  }
}

#compare-map svg {
  display: block;
  width: 100%;
  height: 100%;
}

.compare-legend {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  z-index: 2;
  justify-content: flex-start;
  max-width: calc(100% - 1.7rem);
  margin: 0;
  border-radius: 0.75rem;
  background: rgba(29, 26, 23, 0.62);
  padding: 0.4rem 0.65rem;
  color: rgba(243, 239, 230, 0.82);
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.compare-legend.is-empty {
  visibility: hidden;
}

.country-shape.is-pair {
  animation: quiz-pulse 1.7s ease-in-out infinite;
}

@keyframes quiz-pulse {
  0%,
  100% {
    filter: brightness(0.88);
  }

  50% {
    filter: brightness(1.12);
  }
}

.search-input,
.select-input,
.year-input {
  border: 1px solid rgba(29, 26, 23, 0.16);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
  padding: 0.7rem 0.9rem;
}

.contrast-section .search-input,
.contrast-section .year-input {
  border-color: rgba(243, 239, 230, 0.18);
  background: rgba(243, 239, 230, 0.08);
  color: var(--paper);
}

.search-input {
  width: min(100%, 21rem);
}

.year-input {
  width: 100%;
  font-size: 2rem;
  font-weight: 600;
}

.age-section {
  padding-top: 0;
  padding-bottom: 0;
}

.age-section-inner {
  display: grid;
  min-height: 100svh;
  align-items: stretch;
  gap: 1.5rem;
  padding-top: var(--slide-pad);
  padding-bottom: var(--slide-pad);
}

.age-lead {
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(29, 26, 23, 0.58);
  font-size: clamp(0.72rem, 1.15vw, 0.95rem);
  line-height: 1.4;
}

.age-lead li {
  position: relative;
  margin-top: 0.55rem;
  padding-left: 1.05rem;
}

.age-lead li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: var(--terra);
  content: "";
}

.age-map-wrap {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.age-map-wrap .segmented {
  align-self: flex-start;
}

.age-section #age-map {
  flex: 1 1 auto;
  width: 100%;
  min-height: min(42svh, 22rem);
}

.age-section #age-map-legend {
  flex: 0 0 auto;
  margin-top: 0.7rem;
}

.age-insights {
  display: grid;
  gap: 0.8rem;
}

@media (min-width: 1024px) {
  .age-section-inner {
    grid-template-columns: minmax(17rem, 0.82fr) minmax(0, 1.38fr);
    gap: 2.25rem 2.75rem;
  }

  .age-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .age-map-wrap,
  .age-section #age-map {
    height: 100%;
    min-height: min(62svh, 38rem);
  }
}

@media (max-width: 1023px) {
  .age-section-inner {
    min-height: 0;
    align-items: stretch;
    padding-top: 4.5rem;
    padding-bottom: 1.25rem;
  }

  .age-section #age-map {
    min-height: min(42svh, 22rem);
  }
}

.you-section {
  padding-top: 0;
  padding-bottom: 0;
}

.you-inner {
  min-height: 100svh;
  justify-content: center;
  padding-top: var(--slide-pad);
  padding-bottom: var(--slide-pad);
}

/* Snap-desktop: the slide is exactly one screen and the histogram takes whatever
   height the copy above leaves (up to its old cap). A fixed min(52svh, 26rem)
   frame pushed short/laptop screens past 100svh, so the snap pinned the top and
   clipped the legend at the bottom. The ResizeObserver redraws it at the new size. */
@media (min-width: 1024px) {
  .you-section .you-inner {
    height: 100svh;
    min-height: 0;
  }

  .you-section .you-chart {
    flex: 1 1 0;
    height: auto;
    min-height: 12rem;
    max-height: min(52svh, 26rem);
  }
}

/* Match the shape ("Форма мира") slide's frame: full max-w-7xl column with the
   same vertical rhythm, so the closing copy lines up with every other section
   instead of sitting in a narrower, offset block. */
.close-section {
  padding-top: 0;
  padding-bottom: 0;
}

.close-inner {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--slide-pad);
  padding-bottom: var(--slide-pad);
}

@media (max-width: 767px) {
  .close-inner {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 4.5rem;
    padding-bottom: 1.25rem;
  }
}

.you-section.contrast-section .kicker,
.close-section.contrast-section .kicker {
  color: rgba(243, 239, 230, 0.5);
}

.close-synthesis {
  max-width: 42rem;
  color: rgba(243, 239, 230, 0.72);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  line-height: 1.6;
}

.close-statement {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--paper);
}

/* On the desktop layout keep the whole "eight billion" line on one row: nowrap
   plus a width-scaled size that fits the max-w-7xl column from 1024px up. Phones
   keep the wrapping clamp above. */
@media (min-width: 1024px) {
  .close-statement {
    white-space: nowrap;
    font-size: clamp(2rem, 3.4vw, 3.5rem);
  }
}

.close-share-label {
  color: rgba(243, 239, 230, 0.55);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.close-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.close-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(243, 239, 230, 0.22);
  border-radius: 9999px;
  padding: 0.55rem 1rem;
  background: rgba(243, 239, 230, 0.04);
  color: var(--paper);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.close-share-btn:hover {
  background: rgba(243, 239, 230, 0.12);
  border-color: rgba(243, 239, 230, 0.4);
  transform: translateY(-1px);
}

.close-share-btn:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 2px;
}

.close-share-icon {
  flex: 0 0 auto;
}

.close-share-copy.is-copied {
  color: var(--sun);
  border-color: rgba(223, 173, 82, 0.6);
  background: rgba(223, 173, 82, 0.12);
}

/* Synthesis and the readers crowd share one row on desktop so the closing
   slide keeps its height; narrower screens stack them. */
.close-body {
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .close-body {
    grid-template-columns: minmax(0, 42rem) minmax(0, 26rem);
    align-items: end;
    justify-content: space-between;
    gap: 3.5rem;
  }
}

.readers {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Class display rules would otherwise beat the UA [hidden] rule. */
.readers[hidden],
.readers-join[hidden],
.readers-note[hidden] {
  display: none;
}

/* 60 slots = 20 × 3 on desktop (as tall as the synthesis beside it, so a
   720px-high screen still fits the slide); phones get 36 = 12 × 3 (see
   READERS_SLOTS). */
.readers-crowd {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 0.45rem 0.35rem;
  width: 100%;
  max-width: 26rem;
}

@media (max-width: 767px) {
  .readers-crowd {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    max-width: 24rem;
  }
}

.reader-person {
  color: rgba(243, 239, 230, 0.4);
  transition: color 0.15s ease, transform 0.15s ease;
}

.reader-person:not(.is-empty):hover {
  color: rgba(243, 239, 230, 0.85);
  transform: translateY(-2px);
}

.reader-person.is-empty {
  color: rgba(243, 239, 230, 0.07);
}

.reader-person.is-you,
.reader-person.is-you:hover {
  color: var(--terra);
}

.reader-person.is-new {
  animation: reader-pop 0.7s cubic-bezier(0.2, 0.8, 0.2, 1.25) both;
}

@keyframes reader-pop {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.4);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.readers-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.readers-caption {
  color: rgba(243, 239, 230, 0.72);
  font-size: 0.95rem;
  line-height: 1.45;
}

.readers-caption.is-you {
  color: var(--paper);
  font-weight: 600;
}

.readers-join {
  border-color: rgba(199, 101, 69, 0.7);
  background: rgba(199, 101, 69, 0.16);
}

.readers-join:hover {
  border-color: var(--terra);
  background: rgba(199, 101, 69, 0.3);
}

.readers-join:disabled {
  cursor: progress;
  opacity: 0.6;
}

.readers-note {
  color: var(--sun);
  font-size: 0.8rem;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .close-share-btn {
    transition: none;
  }

  .close-share-btn:hover {
    transform: none;
  }
}

.you-section .history-title,
.close-section .history-title {
  color: var(--paper);
}

.you-year-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.1rem;
}

.you-year-slider {
  flex: 1 1 14rem;
  min-width: 0;
  height: 2.4rem;
  accent-color: var(--terra);
}

.you-year-row .year-input {
  width: 7.25rem;
  flex: 0 0 auto;
  padding: 0.4rem 0.65rem;
  font-size: 1.65rem;
  text-align: center;
}

.you-chart {
  min-height: 0;
  height: min(52svh, 26rem);
  overflow: hidden;
  border: 1px solid rgba(243, 239, 230, 0.12);
  border-radius: 1.5rem;
  background: rgba(243, 239, 230, 0.04);
  padding: 0.9rem 1rem 0.5rem;
}

.you-insight {
  margin: 0;
  border: 0;
  quotes: none;
  border-left: 3px solid var(--terra);
  padding: 0.1rem 0 0.1rem 1rem;
  color: rgba(243, 239, 230, 0.8);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(0.88rem, 1.3vw, 1.08rem);
  font-weight: 400;
  line-height: 1.4;
}

.you-insight[hidden] {
  display: none;
}

.you-legend {
  justify-content: flex-start;
  margin-top: 0.75rem;
  color: rgba(243, 239, 230, 0.65);
}

@media (max-width: 767px) {
  .you-section {
    padding-top: 4.5rem;
    padding-bottom: 1.25rem;
  }

  .you-inner {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 4.5rem;
    padding-bottom: 1.25rem;
  }

  .you-chart {
    height: 15rem;
  }
}

.contrast-section .chart-axis text {
  fill: rgba(243, 239, 230, 0.55);
}

.contrast-section .chart-axis path,
.contrast-section .chart-axis line {
  stroke: rgba(243, 239, 230, 0.18);
}

.age-you-card {
  padding: clamp(1.25rem, 4vw, 2.4rem);
}

.top-section {
  padding-top: 0;
  padding-bottom: 0;
}

.top-inner {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--slide-pad);
  padding-bottom: var(--slide-pad);
}

.top-head,
.top-body {
  width: 100%;
}

.top-body {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.top-lead {
  white-space: normal;
}

.top-switcher {
  display: flex;
  width: 100%;
}

.top-switcher button {
  flex: 1 1 calc(20% - 0.2rem);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

@media (min-width: 900px) {
  .top-switcher button {
    flex: 1 1 0;
  }
}

.top-country-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
}

.top-stage {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.9rem;
}

.top-pyramid-wrap,
.top-map-wrap {
  display: flex;
  min-width: 0;
  min-height: min(42svh, 24rem);
  flex-direction: column;
}

.top-pyramid-legend,
.top-heat-legend {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 0.4rem;
}

.top-heat-legend {
  align-items: center;
}

.top-pyramid-legend span,
.top-heat-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.top-pyramid-legend i {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.15rem;
}

.top-heat-bar {
  display: block;
  flex: 1 1 auto;
  height: 0.45rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #e4bc7a, #d9894a, #c76545, #6e2a1c);
}

.top-pyramid,
.top-map {
  overflow: hidden;
}

.top-pyramid .pyramid-axis text {
  fill: #1d1a17;
  font-size: 13px;
  font-weight: 650;
  paint-order: stroke fill;
  stroke: #f3efe6;
  stroke-width: 4px;
  stroke-linejoin: round;
}

.top-pyramid .pyramid-value-axis text {
  fill: rgba(29, 26, 23, 0.55);
  font-size: 11px;
  font-weight: 600;
  paint-order: stroke fill;
  stroke: #f3efe6;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.top-pyramid {
  flex: 1 1 auto;
  min-height: 0;
}

.top-map {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.top-pyramid svg,
.top-map svg,
.top-map canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.top-map svg,
.top-map canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

.top-map-stroke {
  z-index: 2;
}

.top-insights {
  display: grid;
  gap: 0.75rem 1.4rem;
  align-items: stretch;
}

/* Keep the two captions consistent from country to country: both cells take the
   taller height and the text is centred vertically, so the terra accent bar is
   the same length on the left and the right regardless of how many lines each
   caption wraps to. */
.top-insights .history-insight {
  display: flex;
  align-items: center;
}

@media (min-width: 1024px) {
  .top-stage,
  .top-insights {
    grid-template-columns: 1fr 1fr;
  }

  .top-pyramid-wrap,
  .top-map-wrap {
    height: min(42svh, 24rem);
    min-height: min(42svh, 24rem);
  }
}

@media (max-width: 1023px) {
  .top-inner {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 4.5rem;
    padding-bottom: 1.25rem;
  }

  .top-pyramid-wrap,
  .top-map-wrap {
    min-height: min(34svh, 16rem);
  }
}

.pyramid-chart {
  min-height: 25rem;
}

.flow-section {
  padding-top: 0;
  padding-bottom: 0;
}

.flow-inner {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--slide-pad);
  padding-bottom: var(--slide-pad);
}

.flow-lead {
  white-space: normal;
}

.flow-stage {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  gap: 1.25rem;
}

.flow-map-col {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.flow-section .large-map {
  min-height: min(42svh, 22rem);
  flex: 1 1 auto;
}

.flow-legend {
  flex: 0 0 auto;
}

@media (min-width: 1024px) {
  .flow-stage {
    grid-template-columns: 1.4fr 0.6fr;
    align-items: stretch;
  }

  .flow-ranking {
    max-height: none;
  }
}

@media (max-width: 1023px) {
  .flow-inner {
    min-height: 0;
    padding-top: 4.5rem;
    padding-bottom: 1.25rem;
  }

  .flow-section .large-map {
    min-height: min(38svh, 18rem);
  }

  /* Stacked under the map, the ranking has no fixed height to share, so it grows
     to its rows; min-height:0 + overflow:auto collapsed it to a ~47px scroll box. */
  .flow-section .flow-ranking {
    overflow: visible;
  }

  .flow-section .flow-rank-block,
  .flow-section .flow-rank-rows {
    flex: none;
  }
}

.flow-ranking {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(29, 26, 23, 0.1);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.28);
  padding: 1rem;
}

.flow-rank-block {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  flex-direction: column;
}

.flow-chart-head {
  flex: 0 0 auto;
  margin-bottom: 0.5rem;
}

.flow-chart-head h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.flow-rank-rows {
  display: grid;
  grid-template-columns: minmax(3rem, 7rem) minmax(2.5rem, 1fr) auto;
  grid-auto-rows: minmax(min-content, 1fr);
  align-content: stretch;
  gap: 0.28rem 0.55rem;
  flex: 1 1 auto;
  min-height: 0;
}

.flow-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  font-size: 0.74rem;
  cursor: pointer;
  border-radius: 0.5rem;
}

.flow-name {
  min-width: 0;
}

.flow-row.is-active {
  background: rgba(242, 194, 48, 0.28);
  box-shadow: 0 0 0 0.35rem rgba(242, 194, 48, 0.28);
}

.flow-row.is-active .flow-name {
  font-weight: 600;
}

.flow-bar {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 9999px;
  background: rgba(29, 26, 23, 0.07);
}

.flow-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.method-section {
  background:
    linear-gradient(rgba(243, 239, 230, 0.9), rgba(243, 239, 230, 0.9)),
    repeating-linear-gradient(90deg, transparent 0 7.5%, rgba(29, 26, 23, 0.04) 7.5% 7.65%);
}

/* One tidy, self-contained block instead of a sprawling full-height layout. */
.method-inner {
  width: 100%;
}

.method-heading {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.method-lead {
  margin-inline: auto;
}

.method-card {
  border: 1px solid rgba(29, 26, 23, 0.12);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.42);
  padding: 1.35rem;
}

@media (min-width: 640px) {
  .method-card {
    padding: 1.75rem 2rem;
  }
}

.method-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2.5rem;
}

@media (min-width: 900px) {
  /* Wider right column so "Ограничения" + the note balance the height of
     "Источники" — the two columns end at roughly the same point. */
  .method-columns {
    grid-template-columns: 0.73fr 1.27fr;
  }
}

.method-block-title {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Compact source rows (populated by renderSources) rather than tall cards. */
.method-sources {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
}

.source-card {
  border-top: 1px solid rgba(29, 26, 23, 0.12);
  padding: 0.6rem 0;
}

.source-card:first-child {
  border-top-color: var(--terra);
  border-top-width: 2px;
}

.source-card h3 {
  font-size: 0.98rem;
  line-height: 1.25;
}

.source-card p {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  line-height: 1.4;
}

.source-card h3 a {
  color: var(--clay);
  text-decoration: none;
}

.source-card h3 a:hover {
  color: var(--terra);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.method-limits {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.55rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(29, 26, 23, 0.68);
}

.method-limits li {
  padding-left: 0.95rem;
  position: relative;
}

.method-limits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 9999px;
  background: var(--terra);
}

/* Careful, neutral note on how the country outlines (incl. Russia) are drawn. */
.method-russia-note {
  margin-top: 1rem;
  border-left: 3px solid var(--slate);
  border-radius: 0 0.5rem 0.5rem 0;
  background: rgba(83, 102, 117, 0.08);
  padding: 0.7rem 0.9rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(29, 26, 23, 0.72);
}

.method-russia-note strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--ink);
}

/* Author credit plaque — mirrors the metro reference, recoloured for this site. */
/* Compact one-row credit bar: links grouped left, contact button inline right. */
.methods-credit {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem 1.25rem;
  border: 1px solid rgba(199, 101, 69, 0.24);
  border-radius: 0.9rem;
  background: rgba(223, 210, 188, 0.26);
  color: var(--ink);
  padding: 0.7rem 1.15rem;
  text-align: left;
}

@media (min-width: 640px) {
  .methods-credit {
    padding: 0.75rem 1.35rem;
  }
}

.methods-credit-line {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}

.methods-credit-line a {
  color: var(--clay);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.15em;
}

.methods-credit-line a:hover {
  color: var(--terra);
}

/* Links grouped tightly at the left, dot-separated. */
.methods-credit-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0;
}

.methods-credit-links .methods-credit-line:not(:last-child)::after {
  content: "·";
  margin: 0 0.6rem;
  color: rgba(29, 26, 23, 0.35);
  font-weight: 700;
}

.methods-credit-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1.5px solid var(--terra);
  background: transparent;
  color: var(--clay);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.42rem 0.95rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.methods-credit-cta-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.methods-credit-cta:hover {
  background: var(--terra);
  color: #fff;
}

.methods-credit-cta:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .section-nav {
    display: none;
  }

  /* py-24 (192px) is generous on a phone; tighten the counter's own padding.
     !important beats the runtime-injected Tailwind py-24 at equal specificity. */
  .live-population-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Country maps are drawn in a fixed 1100×610 frame. Size every map box to that
     ratio so the map fills it edge to edge; a viewport-tall minimum left the map
     floating in 100–290px of empty card on a phone. */
  .large-map,
  .flow-section .large-map,
  .stock-section .large-map,
  .age-section #age-map,
  #compare-map {
    flex: none;
    height: auto;
    min-height: 0;
    aspect-ratio: 1100 / 610;
  }

  /* The settlement map sets its frame ratio per country (drawCountrySettlement). */
  .top-map.large-map {
    aspect-ratio: var(--top-map-ratio, 800 / 520);
  }

  .top-pyramid-wrap,
  .top-map-wrap {
    min-height: 0;
  }

  .top-pyramid {
    flex: none;
    height: 16.5rem;
  }

  .stock-inner {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .gallery-card {
    min-height: 29rem;
  }

  .history-lead {
    white-space: normal;
  }

  .stock-section .stock-lead {
    white-space: pre-line;
  }

  .fertility-lead {
    white-space: normal;
  }

  .place-vessel-head {
    display: none;
  }

  .place-columns-hint {
    display: none;
  }

  .place-vessel-copy .place-vessel-meta {
    white-space: normal;
  }

  .place-vessel-copy .place-vessel-world {
    display: block;
  }

  .place-vessel-copy .place-vessel-world::before {
    display: none;
  }

  .place-vessel {
    grid-template-columns: 2rem minmax(0, 1fr) 4.8rem 4.6rem;
    gap: 0.35rem 0.55rem;
  }

  .place-vessel-controls {
    grid-column: 1 / -1;
  }

  .place-count-units,
  .place-count-people {
    grid-row: 1;
    font-size: 0.72rem;
  }

  .place-count-units {
    grid-column: 3;
  }

  .place-count-people {
    grid-column: 4;
  }

  .place-count-units::before,
  .place-count-people::before {
    display: block;
    color: rgba(29, 26, 23, 0.4);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    content: attr(data-label);
  }

  .place-section.contrast-section .place-count-units::before,
  .place-section.contrast-section .place-count-people::before {
    color: rgba(243, 239, 230, 0.42);
  }
}

/* Corner toggle that re-draws a chart wide and scrollable (makeChartExpandable);
   only phones get it. */
.chart-expand {
  display: none;
}

@media (max-width: 767px) {
  /* It sits on the frame's top edge, half outside, so it never covers the plot.
     The negative bottom margin cancels its height plus the frame's mt-4. */
  .chart-expand {
    position: relative;
    z-index: 3;
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 0.75rem -2.25rem auto;
    padding: 0;
    border: 1px solid rgba(29, 26, 23, 0.14);
    border-radius: 50%;
    background: #f7f4ec;
    color: var(--ink);
    box-shadow: 0 4px 14px rgba(58, 47, 38, 0.1);
    cursor: pointer;
  }

  .chart-expand svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .chart-expand[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper);
  }

  .is-expanded {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(29, 26, 23, 0.28) transparent;
  }

  /* Room for the beside-the-dot billion labels (renderHistory). */
  .history-chart {
    min-height: 17rem;
  }

  /* The legend joins the flow above the plot, left-aligned, so it clears both the
     corner button and the 2025 caption; renderFertility sizes the plot to fit. */
  .fertility-chart {
    flex-direction: column;
    min-height: 17rem;
  }

  .fertility-legend {
    position: static;
    align-items: flex-start;
    max-width: none;
    margin-bottom: 0.25rem;
    text-align: left;
  }
}

/* Phones and tablets scroll continuously: the intro stays one full screen, and
   every block after it shares one vertical inset (a touch more inside the dark
   panels) instead of the slide paddings the snap-desktop layout needs. The
   !important beats the runtime Tailwind py-* classes and the 100svh neutralizer. */
@media (max-width: 1023px) {
  .story-section.intro-section,
  .intro-section > [class*="100svh"] {
    min-height: 100svh !important;
  }

  .story-section:not(.intro-section) {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .story-section.contrast-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .story-section:not(.intro-section) > div {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .stock-inner {
    height: auto;
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}