:root {
  --cream: #F4EEE1; --parchment: #EAE0CC; --linen: #D9CCB4; --ink: #2A1D19; --ink-soft: #6B5A50;
  --bordeaux: #6E1A2C; --claret: #9B3346; --rose: #D8A39D; --oak: #8A6748; --cork: #C4A783;
  --gold: #C9A646; --gold-deep: #A8862C; --sage: #87957A;
  --land: #E6DCC6; --state: #EFE6D3; --sea: #F4EEE1;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--cream); color: var(--ink); }
body { font-family: "Source Serif 4", Georgia, serif; max-width: 1180px; margin: 0 auto; padding: 18px 16px 40px; }
a { color: var(--bordeaux); }
.back { font: 500 12px "Libre Franklin", sans-serif; color: var(--ink-soft); text-decoration: none; letter-spacing: .04em; text-transform: uppercase; }

header { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: end; border-bottom: 2px solid var(--ink); padding: 10px 0 12px; }
.kicker { font: 600 11px "Libre Franklin", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--bordeaux); }
h1 { font-family: "Pinyon Script", cursive; font-weight: 400; font-size: 64px; line-height: .95; margin: 4px 0 2px; color: var(--bordeaux); }
.dek { font-family: "Source Serif 4", serif; font-size: 17px; color: var(--ink-soft); margin: 0; max-width: 640px; }
.vintage { text-align: right; }
.vintage .label { font: 600 11px "Libre Franklin", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.vintage .year { font: 700 64px/1 "Playfair Display", serif; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.vintage .total { font: 400 13px "Libre Franklin", sans-serif; color: var(--ink-soft); }

.controls { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linen); font-family: "Libre Franklin", sans-serif; font-size: 13px; }
.controls label { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; color: var(--ink-soft); }
select { font: 15px "Playfair Display", serif; color: var(--ink); background: var(--parchment); border: 1px solid var(--linen); border-radius: 2px; padding: 5px 8px; }
button.play { font: 600 12px "Libre Franklin", sans-serif; letter-spacing: .1em; text-transform: uppercase; background: var(--bordeaux); color: var(--cream); border: 0; padding: 8px 14px; border-radius: 2px; cursor: pointer; min-width: 84px; }
button.play:hover { background: var(--claret); }
.slider { flex: 1 1 380px; position: relative; min-width: 260px; }
.slider input { width: 100%; accent-color: var(--bordeaux); }
.slider .ticks { position: relative; height: 26px; font-size: 10px; color: var(--ink-soft); }
.slider .ticks span { position: absolute; top: 12px; transform: translateX(-50%); white-space: nowrap; }
.slider .ticks span.event { top: 0; color: var(--bordeaux); font-size: 8px; cursor: help; }
.speed { display: flex; gap: 4px; align-items: center; }
.speed button { font: 500 11px "Libre Franklin", sans-serif; background: none; border: 1px solid var(--linen); color: var(--ink-soft); padding: 3px 7px; cursor: pointer; border-radius: 2px; }
.speed button.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 12px "Libre Franklin", sans-serif; color: var(--ink-soft); padding: 8px 0 0; }
.legend i { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 6px; border-radius: 2px; }

figure { margin: 0; }
#map { width: 100%; height: auto; display: block; margin-top: 4px; }
#map .sphere { fill: var(--sea); stroke: var(--linen); stroke-width: 1; }
#map .grat { fill: none; stroke: var(--linen); stroke-width: .5; opacity: .6; }
#map .land { fill: var(--land); }
#map .state { fill: var(--state); stroke: var(--cork); stroke-width: .45; transition: fill .4s; }
#map .state.sel { fill: var(--bordeaux); }
#map .state.hover { fill: var(--rose); }
#map .arc { fill: none; stroke-linecap: round; }
#map .anchor { fill: var(--ink); }
.section-title { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--ink); margin-top: 8px; padding-top: 8px; }
.section-title h2 { font: 700 18px "Playfair Display", serif; margin: 0; }
.section-title h2 em { font-weight: 400; color: var(--bordeaux); }
.section-title .note { font: 12px "Libre Franklin", sans-serif; color: var(--ink-soft); }
#sankey { width: 100%; height: auto; display: block; }
#sankey .node rect { stroke: none; }
#sankey .link { mix-blend-mode: multiply; }
#sankey text { font: 11px "Libre Franklin", sans-serif; fill: var(--ink); }
#sankey text.col { font: 600 10px "Libre Franklin", sans-serif; letter-spacing: .14em; text-transform: uppercase; fill: var(--ink-soft); }
#sankey text.focus { font: italic 700 15px "Playfair Display", serif; fill: var(--bordeaux); }

.tip { position: fixed; pointer-events: none; background: var(--ink); color: var(--cream); font: 12px "Libre Franklin", sans-serif; padding: 6px 9px; border-radius: 2px; opacity: 0; transition: opacity .15s; max-width: 260px; z-index: 5; }
.tip b { font-family: "Playfair Display", serif; font-size: 14px; font-weight: 700; }

footer { margin-top: 18px; border-top: 2px solid var(--ink); padding-top: 10px; font: 12px/1.55 "Libre Franklin", sans-serif; color: var(--ink-soft); columns: 2 320px; column-gap: 28px; }
footer p { margin: 0 0 8px; break-inside: avoid; }
footer b { color: var(--ink); }

@media (max-width: 720px) {
  h1 { font-size: 44px; }
  .vintage .year { font-size: 44px; }
  header { grid-template-columns: 1fr; }
  .vintage { text-align: left; }
}

/* capture layout for the shared GIF / video: 1080 x 1350 */
.cap-foot { display: none; }
body.capture { width: 1080px; max-width: 1080px; padding: 26px 30px 0; }
body.capture .back, body.capture .controls, body.capture footer, body.capture .section-title .note { display: none; }
body.capture header { padding-top: 4px; }
body.capture h1 { font-size: 66px; }
body.capture .dek { font-size: 19px; max-width: 640px; margin-top: 10px; }
body.capture .vintage .year { font-size: 84px; }
body.capture .vintage .total { font-size: 15px; }
body.capture .legend { font-size: 15px; padding-top: 10px; }
body.capture .legend span:last-child { display: none; }
body.capture #map { margin-top: 0; }
body.capture .section-title { margin-top: 2px; padding-top: 6px; }
body.capture .section-title h2 { font-size: 22px; }
body.capture #sankey text { font-size: 16px; }
body.capture #sankey text.col { font-size: 13px; }
body.capture #sankey text.focus { font-size: 22px; }
body.capture .cap-foot { display: flex; justify-content: space-between; border-top: 2px solid var(--ink); padding: 8px 0 0; font: 13px "Libre Franklin", sans-serif; color: var(--ink-soft); }