/* WORLDVIEW *************************************************/

/* COLOUR THEME: change these and the whole map follows.
   Active: MODERN. The SAFARI values are kept below so you can swap back. */
:root {
	--wv-bg-1: rgba(255,255,255,0.97);       /* overlay, centre */
	--wv-bg-2: rgba(226,228,232,0.97);       /* overlay, edges */
	--wv-ring: #F2F3F5;                      /* thin ring around the buttons, borders between countries */
	--wv-land: #CBCDD3;                      /* countries */
	--wv-btn: #66748F;                       /* close and zoom buttons */
	--wv-btn-hover: var(--blue);             /* their hover colour */
	--wv-btn-off: #C5CAD6;                   /* zoom button at its limit */
	--wv-glyph: #FFFFFF;                     /* X, + and - */
	--wv-caucus: var(--wv-btn);
	--wv-caucus-hover: #4A5772 }                /* Caucus Network countries */                    /* X, + and - */

/* SAFARI (previous):
	--wv-bg-1 / --wv-bg-2: rgba(243,233,210,0.93)
	--wv-ring: #F3E9D2   --wv-land: #C8B28A
	--wv-btn: #C8B28A    --wv-btn-hover: #B5532D
	--wv-btn-off: #DACDAE   --wv-glyph: #F3E9D2 */

/* Hidden by default: this is a desktop-only feature */
#world-pointer, #worldview {
	display: none }


/* KEYFRAMES ************************************************/
@keyframes world-x-in {
	from { opacity: 0 }
	to   { opacity: 1 } }

@keyframes world-intro-in {
	from { opacity: 0; transform: translateY(24px) }
	to   { opacity: 1; transform: translateY(0) } }


/* MIN 1160PX ************************************************/
@media (min-width:1160px) {

/* WORLD POINTER */
#world-pointer {
	display: flex;
	position: fixed;
	right: 50px;
	right: max(50px, calc(50% - 850px));
	bottom: 0;
	flex-flow: row nowrap;
	justify-content: center;
	align-content: center;
	align-items: center;
	padding: 5px 5px 0 5px;
	color: #FFFFFF;
	background-color: var(--dark);
	cursor: pointer;
	transition: opacity 0.6s ease, background-color 0.5s ease;
	z-index: 800 }

#world-pointer .wp-inner {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	border-top: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
	border-left: 1px solid #DDDDDD }

#world-pointer span {
	font-size: 14px;
	line-height: 1;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	white-space: nowrap;
	padding: 0 0 0 20px }

#world-pointer svg {
	font-size: 24px;
	padding: 15px }

#world-pointer:hover, #world-pointer:focus-visible {
	background-color: var(--blue) }

/* Fades away while any menu panel or the map is open */
body.blur #world-pointer {
	opacity: 0;
	filter: none;
	pointer-events: none }


/* WORLDVIEW (the overlay) */
#worldview {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: radial-gradient(circle at 50% 38%, var(--wv-bg-1), var(--wv-bg-2));
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
	z-index: 900 }

body.world-on #worldview {
	visibility: visible;
	opacity: 1;
	filter: none;
	transition: opacity 2.4s ease 0.4s, visibility 0s }


/* The top bar steps aside, and the round X stays on top */
body.world-on nav.menu {
	visibility: hidden;
	animation: none }

body.world-on .menu-toggler {
	z-index: 1000;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	min-width: 0;
	min-height: 0;
	max-width: 40px;
	max-height: 40px;
	aspect-ratio: 1 / 1;
	background-color: var(--wv-btn);
	box-shadow: 0 0 0 3px var(--wv-ring);
	transition: background-color 0.5s ease;
	animation: world-x-in 1s ease 2s both }

body.world-on .menu-toggler:hover {
	background-color: var(--wv-btn-hover) }

/* The X itself (two bars) */
body.world-on .menu-toggler span::before,
body.world-on .menu-toggler span::after,
body.world-on .menu-toggler:hover span::before,
body.world-on .menu-toggler:hover span::after {
	width: 12px;
	background-color: var(--wv-glyph) }


/* THE MAP */
#world-stage {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box }

#world-map {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible }

/* Countries and their border lines (both classes come from the SVG file) */
#world-map .wm-land {
	fill: var(--wv-land);
	transition: fill 1.4s ease var(--d, 0s), stroke 1.4s ease var(--d, 0s) }

/* Countries lit up by a button (JS adds the class, with a small delay for each) */
#world-map .hl-caucus .wm-land, #world-map .wm-land.hl-caucus {
	fill: var(--wv-caucus) }

/* The hovered country goes a shade darker, and shows the pointer */
#world-map .is-hover .wm-land, #world-map .wm-land.is-hover {
	fill: var(--wv-caucus-hover) }

#world-map:not(:active) .hl-caucus, #world-map:not(:active) .hl-caucus * {
	cursor: pointer }

#world-map .wm-line {
	fill: var(--wv-ring);
	pointer-events: none }

/* INTRO TITLE (mimics the homepage slideshow) */
#world-intro {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding: 0 10%;
	pointer-events: none;
	z-index: 3 }

#world-intro h2 {
	flex: 0 0 auto;
	max-width: 1200px;
	margin: 25px;
	padding: 10px 20px;
	font-size: 34px;
	line-height: 38px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	color: #000000;
	background: #FFFFFF }

#world-intro p {
	flex: 0 0 auto;
	margin: 0;
	padding: 10px 20px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 300;
	color: #000000;
	background: #FFFFFF }

/* Staggered arrival, replayed every time the map opens */
body.world-on #world-intro h2 {
	animation: world-intro-in 1.6s ease-out 1s both }

body.world-on #world-intro p {
	animation: world-intro-in 1.6s ease-out 1.7s both }

/* The two choice buttons (styled like the slideshow buttons) */
#world-choices {
	display: flex;
	position: static;
	flex: 1 1 100%;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: auto;
	max-width: none;
	margin: 25px 0 0;
	padding: 0;
	background: none;
	pointer-events: auto }

#world-choices .wc-btn {
	display: flex;
	position: static;
	flex: 0 0 auto;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	max-width: none;
	height: calc(15px + 4vh);
	min-height: 0;
	padding: 0 30px;
	margin: 0;
	border: none;
	border-radius: 0;
	outline: none;
	float: none;
	font-family: inherit;
	font-size: 13px;
	line-height: 1;
	font-weight: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	color: #111111;
	background: #FFFFFF;
	cursor: pointer;
	transition: all 0.35s ease 0s }

#world-choices .wc-btn + .wc-btn {
	margin-left: 20px }

#world-choices .wc-btn:hover, #world-choices .wc-btn:focus-visible {
	padding: 0 50px;
	color: #FFFFFF;
	background: #000000 }

/* They arrive after the title, one by one */
body.world-on #world-choices .wc-btn {
	animation: world-intro-in 1.6s ease-out 2.5s both }

body.world-on #world-choices .wc-btn + .wc-btn {
	animation-delay: 2.8s }

body.world-on #world-choices .wc-btn + .wc-btn + .wc-btn {
	animation-delay: 3.1s }

/* Once a button is chosen the buttons and title vanish, one after the other */
@keyframes world-intro-out {
	from { opacity: 1; transform: translateY(0); filter: blur(0) }
	to   { opacity: 0; transform: translateY(-28px); filter: blur(6px) } }

#worldview.mode-chosen #world-choices .wc-btn {
	animation: world-intro-out 1.2s ease-in 0s both }

#worldview.mode-chosen #world-choices .wc-btn + .wc-btn {
	animation-delay: 0.15s }

#worldview.mode-chosen #world-choices .wc-btn + .wc-btn + .wc-btn {
	animation-delay: 0.3s }

#worldview.mode-chosen #world-intro p {
	animation: world-intro-out 1.2s ease-in 0.45s both }

#worldview.mode-chosen #world-intro h2 {
	animation: world-intro-out 1.4s ease-in 0.75s both }

#worldview.mode-chosen #world-intro {
	visibility: hidden;
	transition: visibility 0s linear 2.3s }

#worldview.mode-chosen #world-choices {
	pointer-events: none }

@media (max-height:800px) {
#world-intro h2 {
	font-size: 30px;
	line-height: 34px }
#world-intro p {
	font-size: 12px;
	line-height: 16px } }

@media (min-height:901px) {
#world-intro h2 {
	font-size: 48px;
	line-height: 52px }
#world-intro p {
	font-size: 16px;
	line-height: 22px } }


/* LOGO (top left, links home; same colour as the buttons) */
#world-logo {
	display: block;
	position: absolute;
	top: 20px;
	left: 50px;
	left: max(50px, calc(50% - 850px));
	z-index: 2 }

#world-logo svg {
	display: block;
	width: auto;
	height: 80px;
	color: #FFFFFF;
	--fa-primary-color: #FFFFFF;
	--fa-secondary-color: #FFFFFF;
	--fa-primary-opacity: 1;
	--fa-secondary-opacity: 1;
	opacity: 1;
	filter: drop-shadow(0 1px 1px rgba(40, 50, 70, 0.6)) }   /* keeps it readable over the lighter land */

/* it stays white, hovered or not */
#world-logo:hover svg, #world-logo:focus-visible svg {
	color: #FFFFFF;
	--fa-primary-color: #FFFFFF;
	--fa-secondary-color: #FFFFFF }

/* Arrives with the controls, once the map has settled */
body.world-on #world-logo {
	animation: world-x-in 1.4s ease 2.6s both }

@media (max-height:800px) {
#world-logo svg {
	height: 60px } }

@media (max-height:500px) {
#world-logo {
	display: none } }

@media (min-height:901px) {
#world-logo svg {
	height: 100px } }

@media (min-width:1560px) {
#world-logo {
	top: 72px } }


/* CAPITAL PINS */
#world-pins {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1 }

#world-pins .pin {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0 }

/* The pin: green ring, white glass disc, a point that lands on the capital, a soft shadow on the map */
#world-pins {
	--pin: clamp(26px, 3.6vh, 40px);   /* pin width */
	--tip: calc(var(--pin) * 0.32);    /* length of the point */ }

#world-pins .pin-dot {
	display: block;
	position: absolute;
	left: calc(var(--pin) / -2);
	bottom: calc(var(--tip) - 1px);
	width: var(--pin);
	height: var(--pin);
	border-radius: 50%;
	background: var(--green);
	filter: drop-shadow(0 2px 3px rgba(16, 24, 40, 0.3));
	transform-origin: 50% calc(100% + var(--tip));
	animation: pin-drop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) calc(2.2s + var(--i) * 90ms) both }

/* the disc: each country's flag fills it (the picture's address is set per pin by worldview.js) */
#world-pins .pin-dot::before {
	content: "";
	position: absolute;
	top: 10%;
	right: 10%;
	bottom: 10%;
	left: 10%;
	border-radius: 50%;
	background-color: #EEF1F3;
	background-image: var(--flag);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: inset 0 2px 4px rgba(16, 24, 40, 0.22);
	/* flags rest in the map's bluish greys, and show their true colours on hover */
	filter: grayscale(1) sepia(0.7) hue-rotate(182deg) saturate(0.75) contrast(0.85) brightness(1.15);
	transition: filter 0.4s ease }

#world-pins .pin-dot {
	pointer-events: auto;
	cursor: pointer }

#world-pins .pin-dot:hover::before {
	filter: none }

/* HOVER: hovering a country (or its pin) grows its pin to twice its size and comes to the front,
   every other pin fades out; moving away brings them all back */
#world-pins .pin {
	transition: opacity 0.45s ease }

#world-pins .pin-dot, #world-pins .pin-ground {
	transition: scale 0.45s cubic-bezier(0.34, 1.3, 0.64, 1) }

#world-pins .pin-dot::before {
	transition: filter 0.4s ease }

#world-pins .pin.is-on {
	z-index: 100000 !important }

#world-pins .pin.is-on .pin-dot, #world-pins .pin.is-on .pin-ground {
	scale: 2 }

#world-pins .pin.is-on .pin-dot::before {
	filter: none }

#world-pins.has-focus .pin:not(.is-on) {
	opacity: 0 }

#world-pins.has-focus .pin:not(.is-on) .pin-dot {
	pointer-events: none }


/* the point */
#world-pins .pin-dot::after {
	content: "";
	position: absolute;
	top: calc(100% - 2px);
	left: 50%;
	margin-left: calc(var(--tip) * -0.78);
	border-left: calc(var(--tip) * 0.78) solid transparent;
	border-right: calc(var(--tip) * 0.78) solid transparent;
	border-top: var(--tip) solid var(--green) }

/* soft shadow where the point touches the map */
#world-pins .pin-ground {
	display: block;
	position: absolute;
	left: calc(var(--pin) * -0.45);
	top: calc(var(--pin) * -0.1);
	width: calc(var(--pin) * 0.9);
	height: calc(var(--pin) * 0.22);
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(16, 24, 40, 0.38) 0%, rgba(16, 24, 40, 0) 70%);
	animation: pin-ground-in 0.9s ease calc(2.4s + var(--i) * 90ms) both }

@keyframes pin-drop {
	from { transform: translateY(-18px) scale(0.4); opacity: 0 }
	to   { transform: translateY(0) scale(1); opacity: 1 } }

@keyframes pin-ground-in {
	from { opacity: 0; transform: scale(0.3) }
	to   { opacity: 1; transform: scale(1) } }


/* THE TEXT BOX (appears on hover; a click keeps it, its X closes it) */
#world-panel {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	width: 340px;
	max-width: 340px;
	padding: 22px 26px 24px;
	color: #000000;
	background: #FFFFFF;
	box-shadow: 0 10px 30px rgba(16, 24, 40, 0.2);
	max-height: calc(100% - 40px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	z-index: 4 }

#world-panel.show {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0s }

#world-panel.pinned {
	pointer-events: auto }

#world-panel .wpn-title {
	margin: 0;
	padding: 0 34px 0 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: left;
	color: #000000 }

#world-panel .wpn-sub {
	margin: 4px 0 0;
	padding: 0 34px 0 0;
	font-size: 15px;
	line-height: 18px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-align: left;
	color: #4F5C77 }

#world-panel [hidden] {
	display: none }

#world-panel .wpn-lead {
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid #E2E4E8 }

#world-panel .wpn-lead-label {
	margin: 0 0 8px;
	padding: 0;
	font-size: 11px;
	line-height: 16px;
	font-weight: bold;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: left;
	color: var(--wv-btn) }

#world-panel .wpn-lead-list {
	margin: 0;
	padding: 0 }

#world-panel .wpn-lead-item {
	position: relative;
	display: block;
	margin: 0;
	padding: 0 0 0 16px;
	font-size: 13px;
	line-height: 20px;
	font-weight: 300;
	text-align: left;
	color: #000000 }

#world-panel .wpn-lead-item + .wpn-lead-item {
	margin-top: 3px }

#world-panel .wpn-lead-item::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 8px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wv-btn) }

#world-panel.wide {
	width: 720px;
	max-width: 720px }

#world-panel .wpn-cols {
	display: flex;
	align-items: flex-start;
	margin: 18px 0 0;
	padding: 0 }

#world-panel .wpn-col {
	display: block;
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 0 28px 0 0 }

#world-panel .wpn-col + .wpn-col {
	padding: 0 0 0 28px;
	border-left: 1px solid #E2E4E8 }

#world-panel .wpn-col .wpn-text {
	margin-top: 8px }

#world-panel .wpn-lead-head {
	margin: 10px 0 3px;
	padding: 0;
	font-size: 12px;
	line-height: 18px;
	font-weight: bold;
	text-align: left;
	color: #000000 }

#world-panel .wpn-lead-head:first-child {
	margin-top: 0 }

#world-panel .wpn-text {
	margin: 10px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 22px;
	font-weight: 300;
	text-align: left;
	color: #000000 }

#world-panel .wpn-text.is-empty {
	color: #8A91A0 }

/* the close button: same look as the one that closes the map, smaller */
#world-panel .wpn-close {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	background-color: var(--wv-btn);
	cursor: pointer;
	transition: background-color 0.5s ease }

#world-panel.pinned .wpn-close {
	display: block;
	animation: world-x-in 0.4s ease both }

#world-panel .wpn-close:hover, #world-panel .wpn-close:focus-visible {
	background-color: var(--wv-btn-hover) }

#world-panel .wpn-close span {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 0 }

#world-panel .wpn-close span::before,
#world-panel .wpn-close span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 4px;
	background-color: var(--wv-glyph) }

#world-panel .wpn-close span::before {
	transform: rotate(45deg) }

#world-panel .wpn-close span::after {
	transform: rotate(-45deg) }


/* ZOOM BUTTONS (stacked at the bottom right, same style as the close button) */
#world-zoom {
	position: absolute;
	bottom: 20px;
	right: 20px;
	right: max(20px, calc(50% - 880px));
	display: flex;
	flex-flow: column nowrap;
	gap: 10px;
	z-index: 2 }

#world-zoom button {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 0;
	outline: none;
	background-color: var(--wv-btn);
	box-shadow: 0 0 0 3px var(--wv-ring);
	cursor: pointer;
	transition: background-color 0.5s ease }

#world-zoom button:hover, #world-zoom button:focus-visible {
	background-color: var(--wv-btn-hover) }

/* The + and - signs are drawn with bars, like the X */
#world-zoom button span::before,
#world-zoom button span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 4px;
	background-color: var(--wv-glyph) }

#world-zoom button.wz-plus span::after {
	transform: rotate(90deg) }

#world-zoom button.wz-minus span::after {
	display: none }

/* At the zoom limit */
#world-zoom button:disabled {
	background-color: var(--wv-btn-off);
	pointer-events: none }

/* They arrive one by one, right after the close button */
body.world-on #world-zoom button {
	animation: world-x-in 1s ease 2.2s both }

body.world-on #world-zoom button + button {
	animation-delay: 2.4s }

/* Map can be dragged */
#world-map {
	cursor: grab }

#world-map:active {
	cursor: grabbing }

/* Same distance from the bottom as the close button is from the top */
@media (min-width:1560px) {
#world-zoom {
	bottom: 72px } }

}

/* scrolling happens inside, so the close button stays put */
#world-panel .wpn-scroll {
	display: block;
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	scrollbar-width: thin }

/* FLAGSHIP INITIATIVES: one shade per initiative, no borders inside it */
#world-map .hl-flagship .wm-land, #world-map .wm-land.hl-flagship {
	fill: var(--rc, var(--wv-caucus));
	stroke: var(--rc, var(--wv-caucus));
	stroke-width: 0.8;
	stroke-linejoin: round }

#world-map .hl-flagship .wm-line, #world-map .wm-line.hl-flagship {
	opacity: 0 }

/* the thumbnail card that sits on the map (follows it when it pans and zooms) */
#world-pins {
	--card-w: clamp(150px, 13vw, 240px) }

#world-pins .pin-thumb .thumb-card {
	display: flex;
	flex-flow: column nowrap;
	align-items: stretch;
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	width: var(--card-w);
	padding: 5px;
	translate: -50% 0;
	background: #FFFFFF;
	box-shadow: 0 10px 30px rgba(16, 24, 40, 0.3);
	overflow: hidden;
	pointer-events: none;
	transition: box-shadow 0.9s ease 0.2s;
	animation: thumb-in 0.9s ease calc(1s + var(--i) * 150ms) both }

/* the left part (picture and title) never changes size */
#world-pins .pin-thumb .thumb-main {
	display: block;
	flex: 0 0 auto;
	box-sizing: border-box;
	position: relative;
	width: 100% }

#world-pins .pin-thumb .thumb-img {
	display: block;
	position: relative;
	width: 100%;
	height: calc((var(--card-w) - 10px) / 1.5);
	overflow: hidden;
	background-color: #EEF1F3;
	transition: height 0.95s cubic-bezier(0.65, 0, 0.25, 1) 0.1s }

/* the picture itself lives on a layer that can drift slowly */
#world-pins .pin-thumb .thumb-img::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: var(--thumb);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	scale: 1;
	transition: scale 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) }

#world-pins .pin-thumb .thumb-title {
	display: block;
	margin: 0;
	padding: calc(var(--card-w) * 0.045) calc(var(--card-w) * 0.045) calc(var(--card-w) * 0.06);
	font-family: inherit;
	font-size: clamp(12px, calc(var(--card-w) * 0.064), 15px);
	line-height: 1.2;
	font-weight: bold;
	text-transform: uppercase;
	text-align: left;
	letter-spacing: 0.5px;
	color: #4F5C77;
	transition: font-size 0.95s ease 0.1s, padding 0.95s ease 0.1s, letter-spacing 0.95s ease 0.1s }

@keyframes thumb-in {
	from { opacity: 0; scale: 0.85 }
	to { opacity: 1; scale: 1 } }

/* Flagship regions colour in slowly */
#world-map .wm-land.hl-flagship, #world-map .hl-flagship .wm-land { transition: fill 4.5s ease var(--d, 0s), stroke 4.5s ease var(--d, 0s) }
/* HOVER ON A THUMBNAIL: the card opens into a large, airy panel; the others step aside */
#world-pins { --open-w: min(clamp(640px, 46vw, 920px), calc(100vw - 48px)) }

#world-pins.thumbs-ready .pin-thumb .thumb-card {
	pointer-events: auto;
	cursor: pointer }

#world-pins .pin-thumb .thumb-card {
	transition: width 0.95s cubic-bezier(0.65, 0, 0.25, 1) 0.1s, box-shadow 0.95s ease 0.1s }

#world-pins .pin-thumb.is-open .thumb-card {
	width: var(--open-w);
	box-shadow: 0 34px 90px rgba(16, 24, 40, 0.38) }

#world-pins .pin-thumb { --img-h: clamp(120px, 8.5vw, 170px) }

#world-pins .pin-thumb.is-open .thumb-img {
	height: var(--img-h) }

#world-pins .pin-thumb.is-open .thumb-img::before {
	scale: 1.1 }

#world-pins .pin-thumb.is-open .thumb-title {
	padding: 33px 36px 6px;
	font-size: clamp(18px, 1.15vw, 24px);
	line-height: 1.25;
	letter-spacing: 0.6px }

/* small label on the picture */
#world-pins .pin-thumb .thumb-tag {
	display: inline-flex;
	position: absolute;
	flex-flow: row wrap;
	align-content: center;
	align-items: center;
	box-sizing: border-box;
	top: calc(var(--img-h, 120px) - 15px);
	z-index: 2;
	left: 36px;
	padding: 15px;
	margin: 0;
	font-family: inherit;
	font-size: 10px;
	line-height: 0;
	font-weight: normal;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #000000;
	background-color: var(--blue);
	opacity: 0;
	translate: 0 -8px;
	transition: opacity 0.3s ease, translate 0.3s ease }

#world-pins .pin-thumb.is-open .thumb-tag {
	opacity: 1;
	translate: 0 0;
	transition: opacity 0.7s ease 0.8s, translate 0.7s ease 0.8s }

/* what unfolds underneath */
#world-pins .pin-thumb .thumb-more {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.95s cubic-bezier(0.65, 0, 0.25, 1) 0.1s }

#world-pins .pin-thumb.is-open .thumb-more {
	grid-template-rows: 1fr }

#world-pins .pin-thumb .thumb-more-in {
	display: block;
	box-sizing: border-box;
	min-height: 0;
	overflow: hidden;
	padding: 0 36px }

#world-pins .pin-thumb .thumb-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	padding: 10px 0 0 }

#world-pins .pin-thumb .thumb-desc {
	display: block;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.75;
	font-weight: 300;
	text-align: left;
	color: #1B1F27 }

#world-pins .pin-thumb .thumb-stats {
	display: grid;
	grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
	box-sizing: border-box;
	margin: 30px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid #E2E4E8 }

#world-pins .pin-thumb .thumb-stat {
	display: block;
	margin: 0;
	padding: 0 20px }

#world-pins .pin-thumb .thumb-stat:first-of-type {
	padding-left: 0 }

#world-pins .pin-thumb .thumb-stat + .thumb-stat {
	border-left: 1px solid #E2E4E8 }

#world-pins .pin-thumb .thumb-stat-n {
	display: block;
	font-family: inherit;
	font-size: clamp(18px, 1.28vw, 24px);
	line-height: 1.05;
	font-weight: 300;
	letter-spacing: 0.5px;
	color: var(--c, var(--blue)) }

#world-pins .pin-thumb .thumb-stat-logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 38px;
	margin: 14px 0 0;
	padding: 0;
	border: none }

#world-pins .pin-thumb .thumb-stat-l {
	display: block;
	margin-top: 7px;
	font-family: inherit;
	font-size: 11px;
	line-height: 1.45;
	font-weight: normal;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #6B7385 }

/* the milestones sit under the figures, with their own small heading */
#world-pins .pin-thumb .thumb-stats.is-milestones {
	margin-top: 26px;
	padding-top: 24px }

/* colour-coded cards (used when an initiative lists steps rather than numbers) */
#world-pins .pin-thumb .thumb-stats.is-cards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
	padding-top: 22px }

#world-pins .pin-thumb .thumb-stats-title {
	grid-column: 1 / -1;
	margin: 0 0 22px;
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.4;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #4F5C77 }

#world-pins .pin-thumb .is-cards .thumb-stat {
	position: relative;
	box-sizing: border-box;
	padding: 14px 16px 14px 18px;
	border: none;
	border-left: 4px solid var(--c, var(--blue));
	background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--blue)) 14%, #FFFFFF) 0%, color-mix(in srgb, var(--c, var(--blue)) 3%, #FFFFFF) 100%) }

#world-pins .pin-thumb .is-cards .thumb-stat:first-child {
	padding-left: 18px }

#world-pins .pin-thumb .is-cards .thumb-stat + .thumb-stat {
	border-left: 4px solid var(--c, var(--blue)) }

#world-pins .pin-thumb .is-cards .thumb-stat-n {
	font-size: 15px;
	line-height: 1;
	font-weight: bold;
	letter-spacing: 2px;
	color: var(--c, var(--blue)) }

#world-pins .pin-thumb .is-cards .thumb-stat-l {
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: #1B1F27 }

/* on shorter screens the open panel tightens up so it always fits */
@media (max-height:860px) {
#world-pins .pin-thumb .thumb-desc {
	font-size: 14px;
	line-height: 1.6 }

#world-pins .pin-thumb .thumb-stats {
	margin-top: 20px;
	padding-top: 18px }

#world-pins .pin-thumb .thumb-stats.is-cards {
	gap: 10px 14px }

#world-pins .pin-thumb .thumb-stats.is-milestones {
	margin-top: 16px;
	padding-top: 16px }

#world-pins .pin-thumb .thumb-stats-title {
	margin-bottom: 14px }

#world-pins .pin-thumb .is-cards .thumb-stat {
	padding: 10px 14px 10px 16px }

#world-pins .pin-thumb .is-cards .thumb-stat-l {
	margin-top: 5px;
	font-size: 12.5px;
	line-height: 1.4 }

#world-pins .pin-thumb .thumb-link {
	margin: 18px 0 22px } }

/* standard site button (.btn) */
#world-pins .pin-thumb .thumb-link {
	display: inline-flex;
	box-sizing: border-box;
	min-height: 50px;
	justify-content: center;
	align-items: center;
	align-content: center;
	font-family: inherit;
	font-size: 13px;
	line-height: 18px;
	font-weight: normal;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 1px;
	white-space: nowrap;
	color: #161616;
	padding: 0 20px;
	margin: 26px 0 32px;
	background: var(--blue);
	cursor: pointer;
	transition: all 0.2s ease-in-out 0s }

#world-pins .pin-thumb .thumb-link:hover, #world-pins .pin-thumb .thumb-link:focus-visible {
	padding: 0 50px;
	color: #FFFFFF;
	background: #000000;
	border-radius: 2px }

/* the pieces arrive one after the other */
#world-pins .pin-thumb .thumb-desc, #world-pins .pin-thumb .thumb-stats, #world-pins .pin-thumb .thumb-link {
	opacity: 0;
	translate: 0 14px;
	transition: opacity 0.25s ease, translate 0.25s ease, background-color 0.2s ease, color 0.2s ease, padding 0.35s ease }

#world-pins .pin-thumb.is-open .thumb-desc, #world-pins .pin-thumb.is-open .thumb-stats, #world-pins .pin-thumb.is-open .thumb-link {
	opacity: 1;
	translate: 0 0;
	transition: opacity 0.8s ease 0.75s, translate 0.8s ease 0.75s, background-color 0.2s ease, color 0.2s ease, padding 0.35s ease }

#world-pins .pin-thumb.is-open .thumb-stats {
	transition-delay: 0.9s, 0.9s, 0s, 0s, 0s }

#world-pins .pin-thumb.is-open .thumb-link {
	transition-delay: 1.05s, 1.05s, 0s, 0s, 0s }

/* while the size is being measured, nothing animates */
#world-pins .pin-thumb .measuring, #world-pins .pin-thumb .measuring * {
	transition: none !important }

#world-pins .pin-thumb.is-open { z-index: 100000 !important }

#world-pins.has-open .pin-thumb:not(.is-open) {
	opacity: 0;
	pointer-events: none }

/* OCEANS AND SEAS (drawn under the countries, light up while the Ocean thumbnail is open) */
#world-map .wv-ocean {
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.2s ease 0s }

#world-map .wv-oceans.on .wv-ocean {
	opacity: 1;
	transition: opacity 2s ease var(--d, 0s) }

/* THE SEA FLOOR: while the Ocean thumbnail is open the whole screen turns the darkest marine blue */
#worldview::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: radial-gradient(circle at 50% 42%, #0C4466 0%, #062A45 48%, #02121F 100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.8s ease }

#worldview.oceans-on::before {
	opacity: 1 }

#world-map .wv-oceans.on {
	filter: brightness(1.12) saturate(1.05) }

/* LAND ON THE SEA FLOOR: while the Ocean thumbnail is open the land turns mostly transparent */
#world-map .svg-pan-zoom_viewport > *:not(.wv-oceans) {
	transition: opacity 1.6s ease }

#worldview.oceans-on #world-map .svg-pan-zoom_viewport > *:not(.wv-oceans) {
	opacity: 0.3 }


/* FINANCIAL ARCHITECTURE: a bright sky with the initiative's own picture, blurred, behind the map */
#worldview.tinted::before {
	top: -40px;
	right: -40px;
	bottom: -40px;
	left: -40px;
	background:
		radial-gradient(circle at 50% 42%, var(--tint-c1, rgba(240, 249, 255, 0.6)) 0%, var(--tint-c2, rgba(170, 214, 247, 0.54)) 55%, var(--tint-c3, rgba(110, 175, 235, 0.6)) 100%),
		var(--tint-img, none) center / cover no-repeat,
		var(--tint-c0, #9CCBF2);
	filter: blur(16px);
	opacity: 1 }

#world-map .wm-land, #world-map .wm-line {
	transition: opacity 1.6s ease }

#world-map .wm-land.hl-flagship, #world-map .hl-flagship .wm-land {
	transition: opacity 1.6s ease, fill 4.5s ease var(--d, 0s), stroke 4.5s ease var(--d, 0s) }

#worldview.tinted #world-map .wm-land:not(.hl-focus):not(.hl-focus *),
#worldview.tinted #world-map .wm-line:not(.hl-focus):not(.hl-focus *) {
	opacity: 0.4 }

/* its own countries deepen a little so they hold their own against the new background */
#worldview.tinted #world-map .hl-focus .wm-land, #worldview.tinted #world-map .wm-land.hl-focus {
	fill: var(--tint-focus, var(--rc, var(--wv-caucus)));
	stroke: var(--tint-focus, var(--rc, var(--wv-caucus)));
	transition: opacity 1.6s ease, fill 1.6s ease, stroke 1.6s ease }


/* THE OPEN PANEL ON SHORTER SCREENS: set by the script when the panel would not fit */
#world-pins .pin-thumb.compact { --img-h: clamp(90px, 6vw, 120px) }

#world-pins .pin-thumb.compact.is-open .thumb-title {
	padding: 24px 36px 4px;
	font-size: clamp(16px, 1.05vw, 20px) }

#world-pins .pin-thumb.compact .thumb-desc {
	font-size: 14px;
	line-height: 1.55 }

#world-pins .pin-thumb.compact .thumb-stats {
	margin-top: 18px;
	padding-top: 16px }

#world-pins .pin-thumb.compact .thumb-stats.is-milestones {
	margin-top: 14px;
	padding-top: 14px }

#world-pins .pin-thumb.compact .thumb-stat-n {
	font-size: 18px }

#world-pins .pin-thumb.compact .thumb-stats-title {
	margin-bottom: 12px }

#world-pins .pin-thumb.compact .thumb-link {
	min-height: 42px;
	margin: 16px 0 20px }

#world-pins .pin-thumb.tight { --img-h: 64px }

#world-pins .pin-thumb.tight.is-open .thumb-title {
	padding: 22px 30px 2px 36px;
	font-size: 15px }

#world-pins .pin-thumb.tight .thumb-desc {
	font-size: 13px;
	line-height: 1.45 }

#world-pins .pin-thumb.tight .thumb-stats {
	margin-top: 12px;
	padding-top: 12px }

#world-pins .pin-thumb.tight .thumb-stats.is-milestones {
	margin-top: 10px;
	padding-top: 10px }

#world-pins .pin-thumb.tight .thumb-stat-n {
	font-size: 16px }

#world-pins .pin-thumb.tight .thumb-stat-l {
	margin-top: 4px;
	font-size: 10px;
	line-height: 1.35;
	letter-spacing: 0.8px }

#world-pins .pin-thumb.tight .thumb-link {
	min-height: 38px;
	margin: 12px 0 16px }


/* LEGEND (bottom left): the two maps, one click apart ************************/
#world-legend {
	display: block;
	position: absolute;
	box-sizing: border-box;
	left: 50px;
	left: max(50px, calc(50% - 850px));
	bottom: 40px;
	width: 300px;
	padding: 14px 16px 12px;
	z-index: 2;
	background: rgba(255, 253, 247, 0.94);
	border: 1px solid #3F4A63;
	box-shadow: 0 0 0 4px rgba(255, 253, 247, 0.94), 0 0 0 5px #3F4A63, 0 18px 40px rgba(16, 24, 40, 0.28);
	opacity: 0;
	translate: 0 16px;
	pointer-events: none;
	transition: opacity 0.5s ease, translate 0.5s ease }

#worldview.mode-chosen #world-legend {
	opacity: 1;
	translate: 0 0;
	pointer-events: auto;
	transition: opacity 1.2s ease 1.6s, translate 1.2s ease 1.6s }

#world-legend .wl-title {
	display: flex;
	align-items: center;
	margin: 0 0 8px;
	padding: 0;
	font-family: inherit;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 4px;
	text-transform: uppercase;
	text-align: center;
	color: #3F4A63 }

#world-legend .wl-title::before, #world-legend .wl-title::after {
	content: "";
	flex: 1 1 auto;
	height: 5px;
	border-top: 1px solid #3F4A63;
	border-bottom: 1px solid #3F4A63 }

#world-legend .wl-title span {
	flex: 0 0 auto;
	padding: 0 12px 0 16px }

#world-legend .wl-item {
	display: flex;
	flex: none;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 9px 8px;
	border: none;
	border-top: 1px dotted #A9AFBD;
	border-radius: 0;
	font-family: inherit;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	color: #1B1F27;
	background: none;
	cursor: pointer;
	transition: background-color 0.3s ease, padding 0.3s ease }

#world-legend .wl-item:first-of-type {
	border-top: none }

#world-legend .wl-item:hover, #world-legend .wl-item:focus-visible {
	padding-left: 14px;
	color: #1B1F27;
	background: rgba(63, 74, 99, 0.07) }

#world-legend .wl-item.is-active {
	background: rgba(63, 74, 99, 0.1);
	cursor: default }

/* the key symbols, drawn like the ones on an old map */
#world-legend .wl-key {
	display: flex;
	flex: 0 0 52px;
	justify-content: center;
	align-items: center;
	height: 30px;
	margin: 0 12px 0 0;
	border: 1px solid #3F4A63;
	background: #FFFFFF }

#world-legend .wl-key-flag i {
	display: block;
	width: 6px;
	height: 18px;
	margin: 0 1px }

#world-legend .wl-key-flag i:nth-child(1) { background: #5A6E96 }
#world-legend .wl-key-flag i:nth-child(2) { background: #D8C7A0 }
#world-legend .wl-key-flag i:nth-child(3) { background: #9A88B4 }
#world-legend .wl-key-flag i:nth-child(4) { background: #93A98E }
#world-legend .wl-key-flag i:nth-child(5) { background: #2A7FA8 }

#world-legend .wl-key-caucus i {
	display: block;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	border: 2px solid #FFFFFF;
	border-radius: 50%;
	background: var(--wv-caucus);
	box-shadow: 0 0 0 1px var(--wv-caucus), 0 0 0 6px rgba(102, 116, 143, 0.22) }

#world-legend .wl-text {
	display: block;
	flex: 1 1 auto;
	min-width: 0 }

#world-legend .wl-text b {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	font-weight: bold;
	letter-spacing: 1.4px;
	text-transform: uppercase }

#world-legend .wl-text small {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	line-height: 1.35;
	font-style: italic;
	color: #5A6275 }

/* the map you are on is marked with a little pennant */
#world-legend .wl-item.is-active .wl-text b::after {
	content: "";
	display: inline-block;
	margin-left: 8px;
	vertical-align: 1px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-right: 7px solid var(--blue) }

@media (max-height:800px) {
#world-legend {
	bottom: 24px;
	padding: 10px 14px 8px }

#world-legend .wl-item {
	padding: 6px 8px }

#world-legend .wl-text small {
	display: none } }


/* the text boxes sit above the + and - buttons */
#world-pins.has-open { z-index: 6 }

#world-panel { z-index: 6 }


/* LEGEND, dressed like the text boxes: flat white card, blue tag label, thin rules ************/
#world-legend {
	width: 290px;
	padding: 30px 22px 10px;
	background: #FFFFFF;
	border: none;
	box-shadow: 0 18px 50px rgba(16, 24, 40, 0.28) }

#world-legend .wl-title {
	display: inline-flex;
	position: absolute;
	top: -15px;
	left: 22px;
	margin: 0;
	padding: 15px;
	font-size: 10px;
	line-height: 0;
	font-weight: normal;
	letter-spacing: 1.5px;
	color: #000000;
	background: var(--blue) }

#world-legend .wl-title::before, #world-legend .wl-title::after { display: none }

#world-legend .wl-title span { padding: 0 }

#world-legend .wl-item {
	padding: 12px 0;
	border-top: 1px solid #E3E6EC;
	background: none }

#world-legend .wl-item:hover, #world-legend .wl-item:focus-visible {
	padding-left: 6px;
	background: none }

#world-legend .wl-item.is-active { background: none }

#world-legend .wl-key {
	flex: 0 0 48px;
	height: 30px;
	border: 1px solid #D5D9E1 }

#world-legend .wl-text b {
	font-size: 12px;
	letter-spacing: 0.8px;
	color: #4F5C77 }

#world-legend .wl-text small {
	margin-top: 3px;
	font-size: 11px;
	font-style: normal;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #6B7487 }

#world-legend .wl-item.is-active .wl-text b { color: #000000 }

@media (max-height:800px) {
#world-legend { padding: 26px 20px 4px }
#world-legend .wl-item { padding: 8px 0 }
#world-legend .wl-text small { display: none } }