/*
conceit  the line of every adult on Earth, poorest on the left, richest on the right, one dot per two million people, and the visitor is the gold dot standing in it; every panel is a reading taken from where that dot stands
shape    dashboard: the visitor reads states and numbers, the first screen is the main reading and every chart under it is another reading of the same income, recomputed on every keystroke
type     Bodoni Moda (display, optical size 96 on the big figures, 24 on panel heads) because a rank is a figure printed in the financial press and a didone's hairline numerals carry 220 px without shouting; Schibsted Grotesk for everything read, a newspaper grotesque with tabular figures
colour   ground #0C0D10, panel #121419, ink #ECEAE4, quiet ink #9EA2AB, dots above you #2A2E37, dots below you #6C717C, one accent gold #FFC93C for the visitor and for the countries where they are in the top 1%
grid     twelve columns, 28 px gutter, no max width: the queue and the map run to 32 px from the viewport edge at every width, the reading text holds 62ch inside its column
texture  the queue itself: 2,800 dots of people, and later 216 circles of countries, are the only texture on the page, no grain, no gradient behind anything
motion   one ease, cubic-bezier(.25,.9,.3,1); everything that moves is the answer changing: the dots fill to the visitor, the figures run to their new value, the map recolours west to east
move     the queue of 5.6 billion fills up to you: on load and on every change of income, the dots below the visitor light column by column until the wave stops on the gold dot, in the hero
details  hero lands in order (stagger by --i); queue fills to the gold dot; figures count to their new value in tabular figures; primary button's arrow draws its shaft; mode switch thumb slides between purchasing power and exchange rate; map recolours as a wave from west to east; the people-against-income bar grows its gold end; six surprising numbers arrive one after the other; country circles grow in from left to right; the 1820 lines draw themselves; wealth slices slide open; map country lights on hover; panels reveal on scroll with children staggered; method line draws itself; questions turn plus into cross and open by height; nav grows a rule after the hero; text-wrap balance on headings and pretty on paragraphs; Bodoni optical size per size; selection in gold on ink; focus ring in gold with offset; scroll-margin under the bar
*/

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

:root {
  --ground: #0C0D10;
  --panel: #121419;
  --panel-2: #181B21;
  --ink: #ECEAE4;
  --ink-2: #9EA2AB;
  --ink-3: #8A8F99;
  --dot-above: #2A2E37;
  --dot-below: #6C717C;
  --gold: #FFC93C;
  --gold-ink: #17130A;
  --line: rgba(236, 234, 228, .12);
  --line-2: rgba(236, 234, 228, .24);
  --map-0: #1C1F26;
  --map-1: #D9D6CC;
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.25, .9, .3, 1);
  --t-1: 160ms;
  --t-2: 280ms;
  --t-3: 640ms;
  --gut: clamp(16px, 2.2vw, 32px);
  color-scheme: dark;
  accent-color: var(--gold);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.55 var(--text);
  overflow-x: hidden;
}
::selection { background: var(--gold); color: var(--gold-ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--line-2); background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size var(--t-2) var(--ease), text-decoration-color var(--t-1) var(--ease), color var(--t-1) var(--ease); }
a:not([class]):hover { text-decoration-color: transparent; background-size: 100% 1px; }
[id] { scroll-margin-top: 84px; }
b { font-weight: 500; color: var(--ink); }

[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gut); top: 8px; z-index: 50; background: var(--gold); color: var(--gold-ink); padding: 8px 12px; }

/* ---- bar */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  padding: 12px var(--gut);
  background: var(--ground);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-2) var(--ease);
}
.bar.is-scrolled { border-bottom-color: var(--line); }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; letter-spacing: -.01em; }
.mark svg { width: 22px; height: 14px; fill: var(--dot-below); overflow: visible; }
.mark .you { fill: var(--gold); transform-origin: 19px 3px; transition: transform var(--t-2) var(--ease); }
.mark:hover .you { transform: scale(1.35); }
.mark i { font-style: normal; color: var(--ink-3); transition: color var(--t-1) var(--ease); }
.mark:hover i { color: var(--ink-2); }
.bar nav { display: flex; gap: 22px; justify-content: center; font-size: 15px; }
.bar nav a { text-decoration: none; color: var(--ink-2); position: relative; padding: 4px 0; }
.bar nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--t-2) var(--ease); }
.bar nav a:hover { color: var(--ink); }
.bar nav a:hover::after { transform: scaleX(1); }

.mode { position: relative; display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px; font-size: 14px; transition: border-color var(--t-1) var(--ease); }
.mode:hover { border-color: var(--line-2); }
.mode:hover .mode-thumb { box-shadow: 0 0 0 2px var(--gold); }
.mode button:active { transform: scale(.97); }
.mode-thumb { position: absolute; top: 3px; bottom: 3px; left: 0; width: var(--w, 50%); transform: translateX(var(--x, 3px)); background: var(--ink); border-radius: 999px; transition: transform var(--t-2) var(--ease), width var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease); }
.mode button { position: relative; z-index: 1; border: 0; background: none; padding: 6px 14px; border-radius: 999px; cursor: pointer; color: var(--ink-2); transition: color var(--t-2) var(--ease); }
.mode button:hover { color: var(--ink); text-decoration: underline 1px var(--gold); text-underline-offset: .3em; }
.mode button[aria-checked="true"]:hover { color: var(--ground); }
.mode button[aria-checked="true"] { color: var(--ground); background: var(--ink); transition: color var(--t-2) var(--ease), background-color 0s linear var(--t-2); }

/* ---- hero */
.hero {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 28px; row-gap: 40px;
  padding: clamp(24px, 4vw, 64px) var(--gut) clamp(40px, 5vw, 72px);
  min-height: calc(100svh - 58px); align-items: center;
}
.ask { grid-column: 1 / span 5; display: grid; gap: 28px; align-content: center; }
.answer { grid-column: 6 / -1; margin: 0; display: grid; gap: 10px; }
h1 {
  font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 72;
  font-size: clamp(38px, 4.3vw, 76px); line-height: 1.02; letter-spacing: -.02em;
}
h1 span { white-space: nowrap; }
.lede { color: var(--ink-2); max-width: 46ch; font-size: 18px; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.field { display: grid; gap: 6px; }
.field span { font-size: 14px; color: var(--ink-2); }
.field.amount { grid-column: 1 / -1; }
.field input, .field select {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-2);
  padding: 6px 0 8px; border-radius: 0; outline-offset: 4px;
  transition: border-color var(--t-1) var(--ease);
}
.field input { font-family: var(--display); font-variation-settings: "opsz" 48; font-size: clamp(34px, 3.4vw, 52px); line-height: 1.1; letter-spacing: -.01em; }
.field select { font-size: 18px; appearance: none; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239EA2AB' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 3px center; padding-right: 22px; }
.field select option { background: var(--panel); color: var(--ink); }
.field:hover input, .field:hover select { border-bottom-color: var(--ink-2); }
.field input:focus, .field select:focus { border-bottom-color: var(--gold); }

.go {
  display: inline-flex; align-items: center; gap: 12px; justify-self: start;
  background: var(--gold); color: var(--gold-ink); border: 0; border-radius: 999px;
  padding: 14px 24px; font-weight: 500; font-size: 17px; cursor: pointer; text-decoration: none;
  transition: background-color var(--t-1) var(--ease), transform var(--t-1) var(--ease), box-shadow var(--t-2) var(--ease);
}
.go svg { width: 20px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; overflow: visible; }
.go .shaft { stroke-dasharray: 17; stroke-dashoffset: 9; transition: stroke-dashoffset var(--t-2) var(--ease); }
.go:hover { background: #FFD666; box-shadow: 0 0 0 4px rgba(255, 201, 60, .22); transform: translateY(-1px); }
.go:hover .shaft { stroke-dashoffset: 0; }
.go svg { transition: transform var(--t-2) var(--ease); }
.go:hover svg { transform: translateX(4px); }
.go:active { transform: translateY(1px); }
.form .go { grid-column: 1 / -1; }
.free { grid-column: 1 / -1; font-size: 14px; color: var(--ink-3); }

.say { font-size: clamp(18px, 1.5vw, 22px); color: var(--ink-2); }
.say b { color: var(--gold); font-weight: 500; }
.big {
  font-family: var(--display); font-variation-settings: "opsz" 96; font-weight: 400;
  font-size: clamp(84px, 12.5vw, 228px); line-height: .86; letter-spacing: -.035em;
  font-variant-numeric: lining-nums tabular-nums; margin: 4px 0 6px -.04em;
}
.sub { color: var(--ink-2); max-width: 62ch; }
.ranks b { font-variant-numeric: tabular-nums; }
.queue { position: relative; margin-top: 18px; }
.pulse { position: absolute; width: var(--r); height: var(--r); margin: calc(var(--r) / -2) 0 0 calc(var(--r) / -2); border: 1px solid var(--gold); border-radius: 50%; pointer-events: none; animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }
#queue-canvas { width: 100%; display: block; cursor: crosshair; }
.queue-tip, .map-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--ink); color: var(--ground); font-size: 13px; line-height: 1.4;
  padding: 8px 10px; border-radius: 4px; white-space: nowrap;
  animation: tip var(--t-1) var(--ease);
}
.queue-tip { bottom: calc(100% + 6px); transform: translateX(-50%); }
.axis { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); padding-top: 8px; border-top: 1px solid var(--line); }
.axis b { color: var(--ink-2); font-weight: 400; }
.note { font-size: 13px; color: var(--ink-3); }

/* ---- proof */
.proof { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); margin: 0 var(--gut); }
.proof p { padding: 20px 20px 20px 0; color: var(--ink-2); font-size: 15px; }
.proof p + p { padding-left: 20px; border-left: 1px solid var(--line); }
.proof b { display: block; font-family: var(--display); font-variation-settings: "opsz" 48; font-size: 32px; font-weight: 500; color: var(--ink); line-height: 1.1; }

/* ---- readings */
.readings { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px; padding: clamp(56px, 7vw, 112px) var(--gut); }
.readings > h2, .map-head h2, .sec-head h2, .facts h2, .method h2, .faq h2, .close h2 {
  font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 72;
  font-size: clamp(32px, 3.6vw, 60px); line-height: 1.04; letter-spacing: -.02em;
}
.readings > h2 { grid-column: 1 / -1; }
.panel { background: var(--panel); border-radius: 6px; padding: 24px; display: grid; gap: 14px; align-content: start;
  box-shadow: inset 0 0 0 1px transparent; transition: background-color var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease); }
.panel:hover { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.panel h3 { font-family: var(--display); font-variation-settings: "opsz" 24; font-weight: 500; font-size: 22px; line-height: 1.15; }
.panel p { color: var(--ink-2); }
.fig { font-family: var(--display); font-variation-settings: "opsz" 96; font-size: clamp(54px, 5vw, 84px); line-height: .9; letter-spacing: -.03em; color: var(--ink) !important; font-variant-numeric: lining-nums tabular-nums; }
.fig.small { font-size: clamp(36px, 3.4vw, 54px); line-height: 1; }
.panel.world { grid-column: span 4; }
.panel.home { grid-column: span 5; }
.panel.poor { grid-column: span 4; }
.panel.where { grid-column: span 8; }
.panel.rich { grid-column: span 3; }
.aside { font-size: 15px; border-top: 1px solid var(--line); padding-top: 12px; }
.curve { width: 100%; height: auto; overflow: visible; }
.curve .area { fill: rgba(236, 234, 228, .05); }
.curve .line { fill: none; stroke: var(--ink-2); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .home:not(.in) .curve .line { stroke-dashoffset: 1; }
.home.in .curve .line { animation: draw 1.2s var(--ease) both; }
.curve .med { stroke: var(--line-2); stroke-dasharray: 2 3; }
.curve text { fill: var(--ink-3); font-size: 11px; font-family: var(--text); }
.curve .you { fill: var(--gold); }
.curve .you-line { stroke: var(--gold); stroke-opacity: .5; }
.curve .cut { stroke: var(--line-2); }
.curve .cut-t { fill: var(--ink-3); font-size: 10px; }

/* the adults above you against the income they take: the gold end grows in from the right */
.split { display: grid; gap: 10px; }
.split-row { display: grid; grid-template-columns: 4.2em 1fr 3.6em; gap: 10px; align-items: center; font-size: 14px; color: var(--ink-3); }
.split-row b { text-align: right; color: var(--gold); font-weight: 500; }
.split-bar { height: 10px; background: var(--dot-below); border-radius: 2px; overflow: hidden; display: flex; justify-content: flex-end; }
.split-bar i { width: calc(var(--v) * 100%); background: var(--gold); transform-origin: right; transition: width var(--t-3) var(--ease); }
.js .world:not(.in) .split-bar i { transform: scaleX(0); }
.world.in .split-bar i { animation: grow var(--t-3) var(--ease) both; animation-delay: 240ms; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bars li { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; font-size: 15px; padding-bottom: 6px; }
.bars li::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform: scaleX(var(--w)); background: var(--dot-below); transform-origin: left; transition: transform var(--t-3) var(--ease), background-color var(--t-1) var(--ease); }
.bars li:hover::after { background: var(--gold); }
.bars b { font-weight: 400; color: var(--ink-2); }
.bars em { font-style: normal; color: var(--ink-3); font-size: 13px; grid-column: 2; text-align: right; }
/* ---- surprises */
.facts { padding: clamp(56px, 7vw, 112px) var(--gut); border-top: 1px solid var(--line); }
.fact-list { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
.fact-list li { border-top: 1px solid var(--line-2); padding-top: 18px; display: grid; gap: 10px; align-content: start; transition: border-color var(--t-2) var(--ease); }
.fact-list li:hover { border-top-color: var(--gold); }
.fact-list b { font-family: var(--display); font-variation-settings: "opsz" 96; font-weight: 400; font-size: clamp(48px, 4.6vw, 80px); line-height: .95; letter-spacing: -.03em; }
.fact-list p { color: var(--ink-2); max-width: 36ch; }
.js .fact-list li { opacity: 0; transform: translateY(16px); }
.js .facts.in .fact-list li { opacity: 1; transform: none; transition: opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease), border-color var(--t-2) var(--ease); transition-delay: calc(var(--i) * 90ms), calc(var(--i) * 90ms), 0ms; }

/* ---- shared head of the chart sections */
.swarm, .time, .wealth { padding: clamp(48px, 6vw, 96px) var(--gut); border-top: 1px solid var(--line); }
.sec-head { display: grid; grid-template-columns: 5fr 5fr 2fr; gap: 28px; align-items: end; margin-bottom: 28px; }
.sec-head p { color: var(--ink-2); max-width: 58ch; }
.opt { display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.opt i { font-style: normal; color: var(--ink-3); }
.opt input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 4px 0 6px;
  font-family: var(--display); font-variation-settings: "opsz" 48; font-size: 30px; transition: border-color var(--t-1) var(--ease); }
.opt input::placeholder { color: var(--ink-3); opacity: .55; }
.opt:hover input { border-bottom-color: var(--ink-2); }
.opt input:focus { border-bottom-color: var(--gold); outline: none; }
.tl { fill: var(--ink-3); font-size: 12px; font-family: var(--text); }

/* ---- every country: circles placed at your rank, they grow in from left to right */
.regions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink-3); }
.regions li::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--c); }
.af { --c: #D98466; } .am { --c: #6E9FD1; } .as { --c: #8DB872; } .eu { --c: #AE97D6; } .oc { --c: #4FB0A6; } .hm { --c: var(--gold); }
.swarm-svg { width: 100%; overflow: visible; }
.swarm-svg .tick { stroke: var(--line); }
.swarm-svg text.tl { text-anchor: middle; }
.swarm-svg .c { fill: var(--c); fill-opacity: .78; stroke: var(--ground); stroke-width: .8; transform-box: fill-box; transform-origin: center;
  transition: transform var(--t-3) var(--ease), fill-opacity var(--t-1) var(--ease), stroke var(--t-1) var(--ease); transition-delay: calc(var(--d) * 700ms), 0ms, 0ms; }
.swarm-svg .c.home { fill: var(--gold); fill-opacity: 1; stroke: var(--ink); stroke-width: 1.4; }
.swarm-svg .c:hover { fill-opacity: 1; stroke: var(--ink); transition-delay: 0ms; }
.js .swarm:not(.in) .swarm-svg .c { transform: scale(0); }
.swarm-svg .lab { fill: var(--ink); font-size: 14px; font-family: var(--text); paint-order: stroke; stroke: var(--ground); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.swarm-svg .lab.home { fill: var(--gold); font-weight: 500; }
.axis-note { color: var(--ink-3); font-size: 13px; margin-top: 10px; }

/* ---- since 1820: both lines draw themselves from 1820 to today */
.time-frame { position: relative; }
.time-svg { width: 100%; overflow: visible; }
.time-svg .grid { stroke: var(--line); }
.time-svg path { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 1; }
.time-svg path.w { stroke: var(--ink-2); }
.time-svg path.h { stroke: var(--gold); stroke-width: 2.6; }
.js .time:not(.in) .time-svg path { stroke-dashoffset: 1; }
.time.in .time-svg path { animation: draw 1.6s var(--ease) both; }
.time.in .time-svg path.h { animation-delay: 200ms; }
.time-svg circle.w { fill: var(--ink-2); } .time-svg circle.h { fill: var(--gold); }
.time-svg .end-t { fill: var(--ink-2); font-size: 14px; font-family: var(--text); }
.time-svg .end-t.h, .time-svg .end-v.h { fill: var(--gold); }
.time-svg .end-v { fill: var(--ink); font-size: 18px; font-family: var(--display); font-variant-numeric: tabular-nums; }
.time-svg .born { stroke: var(--ink-3); stroke-dasharray: 3 4; }
.time-svg .born-t { fill: var(--ink-2); font-size: 13px; font-family: var(--text); }
.time-tip { position: absolute; top: 0; z-index: 5; pointer-events: none; display: grid; gap: 2px; background: var(--ink); color: var(--ground); font-size: 13px; padding: 8px 10px; border-radius: 4px; animation: tip var(--t-1) var(--ease); }
.time-read { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 24px; color: var(--ink-2); }
.time-read p { border-top: 1px solid var(--line); padding-top: 12px; }
.time-read .born-line { color: var(--ink); }

/* ---- wealth: who gets each slice, income against wealth, the slices slide open */
.stacks { display: grid; gap: 10px; }
.stack-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-3); margin-left: 10.5em; }
.stack-key span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; background: var(--s); }
.g0 { --s: #3A3F4A; } .g1 { --s: #6C717C; } .g2 { --s: #B9B5AA; } .g3 { --s: var(--gold); }
.stack-row { display: grid; grid-template-columns: 10em 1fr; gap: 0 .5em; align-items: center; font-size: 15px; color: var(--ink-2); }
.stack { display: flex; height: 38px; border-radius: 3px; overflow: hidden; background: var(--panel); }
.stack i { flex: 0 0 calc(var(--v) * 100%); background: var(--s); display: flex; align-items: center; padding-left: 8px; overflow: hidden; transition: flex-basis var(--t-3) var(--ease), filter var(--t-1) var(--ease); }
.stack i:hover { filter: brightness(1.18); }
.js .wealth:not(.in) .stack i { flex-basis: 0; }
.stack em { font-style: normal; font-size: 13px; color: var(--ink); white-space: nowrap; }
.stack .g2 em, .stack .g3 em { color: var(--gold-ink); }
.wealth-read { display: grid; grid-template-columns: 6fr 3fr 3fr; gap: 28px; margin-top: 32px; color: var(--ink-2); align-items: start; }
.wealth-read > p { border-top: 1px solid var(--line); padding-top: 12px; }
.wealth-read > p:first-of-type { color: var(--ink); }
.ranks { display: grid; gap: 12px; grid-row: span 3; }
.ranks:empty { display: none; }
.rank-row { display: grid; grid-template-columns: 9.5em 1fr 5.4em; gap: 12px; align-items: center; font-size: 14px; color: var(--ink-3); }
.rank-row b { text-align: right; color: var(--ink); font-weight: 500; }
.rank-track { position: relative; height: 14px; border-bottom: 1px solid var(--line-2); }
.rank-track i { position: absolute; left: calc(var(--x) * 100%); bottom: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--gold); transition: left var(--t-3) var(--ease); }
.rank-row:nth-child(2n) .rank-track i { background: var(--ink); }

/* ---- map */
.map { padding: clamp(40px, 5vw, 80px) var(--gut); }
.map-head { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: 28px; align-items: end; margin-bottom: 24px; }
.map-head p { color: var(--ink-2); max-width: 52ch; }
.legend { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.legend i { flex: 1; height: 8px; background: linear-gradient(90deg, var(--map-0), var(--map-1)); }
.legend i + span + i { flex: 0 0 22px; background: var(--gold); }
.map-frame { position: relative; }
#world { width: 100%; height: auto; display: block; }
#world .land { fill: var(--map-0); stroke: var(--ground); stroke-width: .5; transition: stroke var(--t-1) var(--ease), stroke-width var(--t-1) var(--ease); cursor: pointer; }
#world .land.none { fill: #15171C; cursor: default; }
#world .land:hover, #world .land.on { stroke: var(--gold); stroke-width: 1.4; }
.map-tip { display: grid; gap: 2px; white-space: normal; width: 200px; }
.map-tip em { font-style: normal; font-weight: 700; }
.nojs { color: var(--ink-3); padding: 40px 0; }

/* ---- method */
.method { padding: clamp(56px, 7vw, 112px) var(--gut); }
.steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; padding-top: 28px; }
.steps::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-2); transform-origin: left; }
.js .method:not(.in) .steps::before { transform: scaleX(0); }
.method.in .steps::before { animation: line 1.1s var(--ease) both; }
.steps h3 { font-size: 18px; font-weight: 500; margin-bottom: 8px; }
.steps p { color: var(--ink-2); font-size: 15px; max-width: 40ch; }

/* ---- faq */
.faq { padding: clamp(40px, 5vw, 80px) var(--gut); display: grid; grid-template-columns: 4fr 8fr; gap: 28px; align-items: start; }
.faq h2 { grid-row: span 6; }
details { border-top: 1px solid var(--line); grid-column: 2; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font-size: 19px; transition: color var(--t-1) var(--ease); }
summary::-webkit-details-marker { display: none; }
summary::before, summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 1.5px; background: var(--ink-2); transition: transform var(--t-2) var(--ease), background-color var(--t-1) var(--ease); }
summary::after { transform: rotate(90deg); }
summary:hover { color: var(--gold); }
summary:hover::before, summary:hover::after { background: var(--gold); }
details[open] summary::before { transform: rotate(45deg); }
details[open] summary::after { transform: rotate(135deg); }
details > div { padding: 0 40px 20px 0; color: var(--ink-2); max-width: 70ch; }
details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--t-2) var(--ease), content-visibility var(--t-2) allow-discrete; }
details[open]::details-content { block-size: auto; }
:root { interpolate-size: allow-keywords; }

/* ---- close */
.close { padding: clamp(64px, 9vw, 144px) var(--gut); display: grid; gap: 20px; justify-items: start; border-top: 1px solid var(--line); }
.close h2 { font-size: clamp(40px, 5.4vw, 92px); max-width: 16ch; }
.close > p:not(.free) { color: var(--ink-2); font-size: 19px; }

.foot { padding: 28px var(--gut) 40px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--ink-3); font-size: 14px; border-top: 1px solid var(--line); }

/* ---- arrivals and reveals: hidden only when the script is there to show them */
.js .hero > * > *, .js .hero .answer { animation: land var(--t-3) var(--ease) both; animation-delay: calc(var(--i) * 70ms + 60ms); }
.js .hero > * > * { --i: 0; }
.js .ask > :nth-child(2) { --i: 1; } .js .ask > :nth-child(3) { --i: 2; }
.js .answer > :nth-child(2) { --i: 4; } .js .answer > :nth-child(3) { --i: 5; } .js .answer > :nth-child(4) { --i: 6; } .js .answer > :nth-child(n+5) { --i: 7; }
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease); }
.js .readings .panel { transition-delay: calc(var(--p) * 60ms); --p: 0; }
.js .readings .panel:nth-of-type(4n+2) { --p: 1; }
.js .readings .panel:nth-of-type(4n+3) { --p: 2; }
.js .readings .panel:nth-of-type(4n) { --p: 3; }

@keyframes land { from { opacity: 0; transform: translateY(14px); } }
@keyframes tip { from { opacity: 0; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes line { from { transform: scaleX(0); } }
@keyframes grow { from { transform: scaleX(0); } }

/* ---- widths */
@media (max-width: 1180px) {
  .ask { grid-column: 1 / span 6; } .answer { grid-column: 7 / -1; }
  .panel.world, .panel.home, .panel.rich, .panel.poor { grid-column: span 6; } .panel.where { grid-column: 1 / -1; }
  .fact-list { grid-template-columns: 1fr 1fr; }
  .sec-head { grid-template-columns: 1fr 1fr; } .sec-head .opt, .sec-head .regions { grid-column: 1 / -1; max-width: 320px; } .sec-head .regions { max-width: none; }
  .wealth-read { grid-template-columns: 1fr 1fr; } .ranks { grid-column: 1 / -1; grid-row: auto; }
  .bar nav { display: none; }
  .map-head { grid-template-columns: 1fr 1fr; } .legend { grid-column: 1 / -1; max-width: 420px; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .bar { grid-template-columns: 1fr auto; }
  .mode { font-size: 12.5px; } .mode button { padding: 6px 10px; }
  .mark i { display: none; }
  .hero { display: flex; flex-direction: column; min-height: 0; row-gap: 0; }
  .ask { display: contents; }
  .hero h1 { order: 0; margin-bottom: 24px; }
  .form { order: 1; margin-bottom: 40px; }
  .answer { order: 2; margin-bottom: 32px; }
  .lede { order: 3; }
  .answer .big { font-size: 76px; }
  .answer .queue { order: 3; margin-top: 8px; } .answer .axis { order: 4; } .answer .sub { order: 5; } .answer .note { order: 6; }
  .answer { display: flex; flex-direction: column; gap: 8px; }
  .readings { grid-template-columns: 1fr; gap: 16px; }
  .panel, .panel.world, .panel.home, .panel.rich, .panel.poor, .panel.where { grid-column: 1 / -1; }
  .fact-list { grid-template-columns: 1fr; gap: 28px; }
  .sec-head { grid-template-columns: 1fr; }
  .time-read, .wealth-read { grid-template-columns: 1fr; gap: 16px; }
  .time-svg .end-v { font-size: 16px; } .time-svg .end-t { font-size: 12px; } .swarm-svg .lab { font-size: 12px; }
  .stack-key { margin-left: 0; }
  .stack-row { grid-template-columns: 1fr; gap: 4px; }
  .rank-row { grid-template-columns: 1fr 5em; } .rank-track { grid-column: 1 / -1; grid-row: 2; }
  .proof { grid-template-columns: 1fr 1fr; }
  .proof p:nth-child(3) { border-left: 0; padding-left: 0; }
  .proof p:nth-child(n+3) { border-top: 1px solid var(--line); }
  .map-head { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; } .faq h2 { grid-row: auto; } details { grid-column: 1; }
  .axis span:nth-child(2) { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .method:not(.in) .steps::before { transform: none; }
  .js .home:not(.in) .curve .line, .js .time:not(.in) .time-svg path { stroke-dashoffset: 0; }
  .js .fact-list li { opacity: 1; transform: none; }
  .js .swarm:not(.in) .swarm-svg .c { transform: none; }
  .js .wealth:not(.in) .stack i { flex-basis: calc(var(--v) * 100%); }
  :root { scroll-behavior: auto; }
}