@font-face{font-family:'YS Text';src:url(/yastatic/s3/home/fonts/ys/1/text-light.woff2) format('woff2'),url(/yastatic/s3/home/fonts/ys/1/text-light.woff) format('woff');font-weight:300;font-style:normal;font-stretch:normal}@font-face{font-family:'YS Text';src:url(/yastatic/s3/home/fonts/ys/1/text-regular.woff2) format('woff2'),url(/yastatic/s3/home/fonts/ys/1/text-regular.woff) format('woff');font-weight:400;font-style:normal;font-stretch:normal}@font-face{font-family:'YS Text';src:url(/yastatic/s3/home/fonts/ys/1/text-medium.woff2) format('woff2'),url(/yastatic/s3/home/fonts/ys/1/text-medium.woff) format('woff');font-weight:500;font-style:normal;font-stretch:normal}@font-face{font-family:'YS Text';src:url(/yastatic/s3/home/fonts/ys/1/text-bold.woff2) format('woff2'),url(/yastatic/s3/home/fonts/ys/1/text-bold.woff) format('woff');font-weight:700;font-style:normal;font-stretch:normal}.font_loaded body{font-family:'YS Text','Helvetica Neue',Arial,sans-serif;-webkit-font-feature-settings:'liga','kern';-moz-font-feature-settings:'liga','kern';font-feature-settings:'liga','kern'}
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	/* outline: 1px solid #f00; */
}

:root {
	--col-text-primary: #000;
	--col-text-secondary: #999693;
	--col-text-link: #06f;

	--col-control-active: #000;
	--col-control-border: #c9c6c3;

	--col-background: #fff;
	--col-backviz: #f9f6f3;
	--col-backcontrol: rgba(249, 246, 243, .9);

	--size-radius: 5px;
	--size-font: 16px;
	--size-item: 200px;
	--size-popup: 300px;

	--width-single: min(790px, calc(100% - 2rem));
	--width-grid: min(1000px, calc(100% - 2rem));

	@media (max-width: 767px) {
		--size-font: 14px;
		--size-item: 177px;
	}

	@media (max-width: 500px) {
		--size-item: 159px;
	}
}

html {
	font-family: 'YS Text', sans-serif;
	font-weight: 400;
	font-size: var(--size-font);
}

.rs-root {
	font-size: 1rem;
	line-height: 1.5rem;

	background: var(--col-background);
	color: var(--col-text-primary);

	position: relative;
	margin-block: 0 3rem;

	h1 {
		font-weight: 500;
		font-size: 2.5rem;
		line-height: 2.5rem;
		text-wrap: balance;

		width: var(--width-single);
		margin: 6rem auto 1.5rem;
	}

	h2 {
		font-weight: 500;
		font-size: 1.5rem;
		line-height: 1.5rem;
		text-wrap: balance;

		width: var(--width-single);
		margin: 4.5rem auto 1.5rem;
	}

	h3 {
		font-weight: 700;
		font-size: 1.2rem;
		line-height: 1.5rem;
		text-wrap: balance;

		width: var(--width-single);
		margin: 0 auto .5rem;
	}

	h4 {
		font-weight: 700;
		font-size: 1rem;
		line-height: 1.5rem;
		text-wrap: balance;

		margin: 0 0 .5rem 0;
	}

	p {
		width: var(--width-single);
		margin: 1.5rem auto;

		@media (max-width: 767px) {
			-webkit-hyphens: auto;
			-webkit-hyphenate-limit-chars: 6 3 2;
			-webkit-hyphenate-limit-lines: 3;
			-webkit-hyphenate-limit-last: always;
			-moz-hyphens: auto;
			-moz-hyphenate-limit-chars: 6 3 2;
			-moz-hyphenate-limit-lines: 3;
			-moz-hyphenate-limit-last: always;
			-ms-hyphens: auto;
			-ms-hyphenate-limit-chars: 6 3 2;
			-ms-hyphenate-limit-lines: 3;
			-ms-hyphenate-limit-last: always;
			hyphens: auto;
			hyphenate-limit-chars: 6 3 2;
			hyphenate-limit-lines: 3;
			hyphenate-limit-last: always;
		}

		&.rs-source {
			opacity: .35;
		}

		&.rs-copyright {
			font-size: .6rem;
			letter-spacing: .05rem;
			text-transform: uppercase;
			opacity: .35;
			margin: 1rem auto;
		}
	}

	a {
		color: var(--col-text-link);
	}

	img,
	svg {
		display: block;
		width: 100%;
		height: auto;
	}

	figcaption {
		font-size: .875rem;
		line-height: 1.2rem;
		margin: .5rem 0;
	}

	input,
	select,
	option,
	label {
		cursor: pointer;
		user-select: none;

		font-family: 'YS Text', sans-serif;
	}

	text {
		font-family: 'YS Text', sans-serif;
	}

	blockquote {
		background: var(--col-backviz);
		border: 1px solid transparent;
		border-radius: var(--size-radius);

		width: var(--width-single);
		margin: 3rem auto;

		.author {
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			gap: 1rem;
			margin: 1rem;

			.portrait {
				flex-basis: 100px;
				flex-grow: 0;
				flex-shrink: 0;

				img {
					border-radius: 50%;

					width: 100px;
					height: 100px;
				}
			}

			.name {
				font-weight: 700;
				font-size: .95rem;
				letter-spacing: .05rem;
				text-transform: uppercase;
			}

			.position {
				font-size: .65rem;
				line-height: 1rem;
				letter-spacing: .05rem;
				text-transform: uppercase;
			}
		}
	}

	details {
		background: var(--col-backviz);
		border: 1px solid transparent;
		border-radius: var(--size-radius);

		width: var(--width-single);
		margin: 1.5rem auto;

		&[open] {
			summary {
				&::before {
					transform: rotate(180deg);
				}
			}
		}

		summary {
			cursor: pointer;
			user-select: none;
			font-weight: 500;

			list-style: none;
			border-radius: var(--size-radius);

			position: relative;
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			min-height: 40px;
			padding: .5rem .5rem .5rem 40px;

			&::before {
				content: '';

				background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"%3E%3Cpath stroke="%23000" stroke-width="2" fill="none" d="M15,18 l5,5 l5,-5"/%3E%3C/svg%3E');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;

				position: absolute;
				top: 0;
				left: 0;
				width: 40px;
				height: 40px;
				transform: rotate(0);
			}

			&::marker,
			&::-webkit-details-marker {
				display: none;
			}

			&:focus {
				outline: none;
			}

			&:hover {
				outline: 2px solid var(--col-control-active);
			}
		}

		.details {
			border-top: 1px dashed var(--col-control-border);

			padding: 1rem;

			> * + * {
				margin: 1.5rem 0;
			}
		}
	}

	.columns {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
		grid-template-rows: auto;
		gap: 1rem;

		p {
			width: 100%;
			margin: 0;
		}
	}

	.cite {
		> * + * {
			margin: 1.5rem 1rem;
		}
	}

	.hyphen {
		-webkit-hyphens: auto;
		-webkit-hyphenate-limit-chars: 6 3 2;
		-webkit-hyphenate-limit-lines: 3;
		-webkit-hyphenate-limit-last: always;
		-moz-hyphens: auto;
		-moz-hyphenate-limit-chars: 6 3 2;
		-moz-hyphenate-limit-lines: 3;
		-moz-hyphenate-limit-last: always;
		-ms-hyphens: auto;
		-ms-hyphenate-limit-chars: 6 3 2;
		-ms-hyphenate-limit-lines: 3;
		-ms-hyphenate-limit-last: always;
		hyphens: auto;
		hyphenate-limit-chars: 6 3 2;
		hyphenate-limit-lines: 3;
		hyphenate-limit-last: always;
	}

	.cover {
		transform: translate3d(0, 0, 0);

		position: relative;
		display: flex;
		flex-flow: column;
		justify-content: center;
		width: 100%;
		height: 50vw;
		min-height: 400px;
		overflow: hidden;

		.slides {
			z-index: -1;

			&::after {
				content: '';

				background-image: linear-gradient(rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
				background-position: top center;
				background-size: cover;

				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 100%;
				height: 50vw;
				min-height: 400px;
			}

			.graticules {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 50vw;
				min-height: 400px;

				img {
					min-height: 400px;
					object-fit: cover;
				}
			}

			.slide {
				opacity: 0;

				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 50vw;
				min-height: 400px;

				--delay: calc(var(--i, 0) * 2.5s);
				animation: fade 10s var(--delay, 0s) infinite forwards ease-in-out;

				&:nth-child(2) { --i: 1; }
				&:nth-child(3) { --i: 2; }
				&:nth-child(4) { --i: 3; }

				img {
					min-height: 400px;
					object-fit: cover;
				}
			}
		}
	}

	.rs-tooltip {
		cursor: pointer;
		white-space: nowrap;

		&::after {
			content: '+';

			color: var(--col-text-link);

			border: 1px solid var(--col-text-link);
			border-radius: 50%;

			display: inline-flex;
			justify-content: center;
			align-items: center;
			width: 20px;
			height: 20px;
			margin-left: 3px;
			padding-top: 1px;
		}
	}

	.popup {
		z-index: 99999;

		font-size: .875rem;
		line-height: 1.25rem;

		background: var(--col-background);
		color: var(--col-text-primary);
		border: 1px solid var(--col-control-border);
		border-radius: var(--size-radius);
		box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5);

		position: absolute;
		top: 25px;
		left: 0;
		display: none;
		width: var(--size-popup);
		padding: 1rem;

		&.active {
			display: block;
		}
	}

	.disclaimer {
		width: var(--width-single);
		margin: .5rem auto;
	}

	.control {
		background: var(--col-backviz);

		z-index: 9999;
		position: sticky;
		bottom: 0;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		gap: 1rem;
		margin: 0 auto;
		padding: 1rem calc((100% - var(--width-single)) / 2);

		& > div {
			flex: 1 0 198px;
		}

		.selector {
			display: flex;
			flex-flow: row nowrap;
			gap: 5px;

			.button {
				flex: 1 0;
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				margin: 0;
				padding: 0;

				input {
					appearance: none;
					width: 0;
					height: 0;
					margin: 0;
					padding: 0;

					&:focus {
						outline: none;
					}
				}

				label {
					line-height: 1rem;
					text-align: center;

					background: var(--col-background);
					border: 1px solid var(--col-control-border);
					border-radius: var(--size-radius);

					display: flex;
					flex-flow: row wrap;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 40px;
					padding: 0 5px;
				}

				input:checked + label {
					background: var(--col-control-active);
					color: var(--col-background);
					border: 1px solid var(--col-control-active);
				}

				input:hover + label {
					border: 1px solid var(--col-control-active);
					outline: 1px solid var(--col-control-active);
				}
			}
		}

		.help {
			--legend-align: flex-end;

			@media (max-width: 767px) {
				--legend-align: center;
			}

			&.left {
				--legend-align: flex-start;

				@media (max-width: 767px) {
					--legend-align: center;
				}
			}

			display: flex;
			justify-content: var(--legend-align);

			object {
				width: auto;
				height: 40px;
			}
		}
	}

	.visual {
		background: var(--col-backviz);

		padding: 3rem 0 1.5rem;

		.single {
			width: var(--width-single);
			margin: 1rem auto;

			svg {
				user-select: none;

				.rs-title {
					font-size: .875rem;
				}

				.domain {
					display: none;
				}

				.tick {
					text {
						font-size: .75rem;
						fill: var(--col-text-secondary);
					}
				}

				.axis-x {
					.tick {
						line {
							opacity: .25;
						}
					}
				}

				.axis-y {
					.tick {
						line {
							opacity: .1;
						}
					}
				}
			}
		}

		.grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(var(--size-item), 1fr));
			grid-template-rows: auto;
			gap: 1rem;
			width: var(--width-grid);
			margin: 1rem auto;

			svg {
				user-select: none;

				.rs-title {
					font-size: .75rem;
				}

				.domain {
					display: none;
				}

				.tick {
					line {
						opacity: .1;
					}

					text {
						font-size: .5rem;
						fill: var(--col-text-secondary);
					}
				}
			}
		}
	}

	.warming {
		.reference {
			fill: var(--col-background);
		}

		.tip {
			text-anchor: middle;
			fill: var(--col-text-primary);
			stroke: var(--col-background);
			stroke-width: 5px;
			stroke-linejoin: round;
			paint-order: stroke fill;
		}

		.rs-tooltip {
			fill: transparent;
			stroke: var(--col-text-link);
		}

		.single {
			.curve {
				fill: none;
				stroke-width: 2px;
			}
		}

		.single + .grid {
			margin-top: 3rem;

			.curve {
				fill: none;
				stroke-width: 1px;
			}
		}
	}

	.seasons {
		.axis-x {
			.tick {
				text-anchor: end;

				&:first-of-type {
					text-anchor: start;
				}
			}
		}

		.axis-y {
			.tick:nth-of-type(2n+1) {
				display: none;
			}
		}
	}

	.records {
		.tips {
			text {
				text-anchor: middle;
				fill: var(--col-text-primary);
				stroke: var(--col-backviz);
				stroke-width: 5px;
				stroke-linejoin: round;
				paint-order: stroke fill;
			}
		}

		.clusters {
			line {
				opacity: .25;
			}

			text {
				font-size: 0.75rem;
				text-anchor: middle;
				stroke: var(--col-backviz);
				stroke-width: 5px;
				stroke-linejoin: round;
				paint-order: stroke fill;
				transform: translateY(-8px);
			}
		}

		.chart {
			circle {
				stroke: var(--col-backviz);
				stroke-width: 1px;
			}

			text {
				font-size: 0.75rem;
				stroke: var(--col-backviz);
				stroke-width: 5px;
				stroke-linejoin: round;
				paint-order: stroke fill;
				transform: translateY(4px);
			}
		}
	}

	.precipitation {
		.single {
			svg {
				.stripes {
					line:nth-of-type(2n+1) {
						stroke: var(--col-background);
					}

					line:nth-of-type(2n) {
						display: none;
					}
				}

				.chart {
					.range {
						.now {
							opacity: .25;
						}

						text {
							transform: translate(5px, 4px);

							&.city {
								font-size: 0.875rem;
							}
						}
					}
				}

				.axis-x {
					.tick {
						line {
							opacity: .1;
						}
					}
				}

				.divider {
					line {
						stroke: var(--col-text-primary);
						opacity: .25;
					}

					text {
						font-size: 0.75rem;
						fill: var(--col-text-secondary);
					}
				}

				.tip {
					font-size: 0.75rem;
					text-anchor: middle;
					fill: var(--col-text-secondary);
				}
			}
		}
	}

	.extreme {
		.reference {
			fill: var(--col-background);
		}

		.axis-x {
			.tick:nth-of-type(2n+1) {
				display: none;
			}
		}
	}

	.snow {
		.axis-x {
			.tick:nth-of-type(2n+1) {
				display: none;
			}
		}
	}

	.firstsnow {
		.single {
			svg {
				.stripes {
					line:nth-of-type(2n+1) {
						stroke: var(--col-background);
					}

					line:nth-of-type(2n) {
						display: none;
					}
				}

				.chart {
					.range {
						&.even {
							text {
								stroke: var(--col-background);
							}

							circle {
								stroke: var(--col-background);
								stroke-width: 1px;
							}
						}

						text {
							stroke: var(--col-backviz);
							stroke-width: 5px;
							stroke-linejoin: round;
							paint-order: stroke fill;

							transform: translate(5px, 4px);

							&.city {
								font-size: 0.875rem;
							}

							&.days {
								font-size: 0.75rem;
							}
						}

						circle {
							stroke: var(--col-backviz);
							stroke-width: 1px;
						}
					}

					.mark {
						font-size: 0.75rem;
						text-anchor: end;
					}

					.marked {
						display: none;
					}
				}

				.axis-x {
					.tick {
						line {
							opacity: .1;
						}
					}
				}
			}
		}
	}

	.areas,
	.snowmap {
		transform: translate3d(0, 0, 0);

		.map {
			position: relative;
			overflow-x: scroll;
			overflow-y: hidden;

			figure {
				z-index: 9;
				user-select: none;

				position: relative;
				width: max(100%, 600px);
				height: auto;
				aspect-ratio: 2 / 1;
			}

			.graticules,
			.cities {
				z-index: 99;

				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: max(100%, 600px);
				height: auto;
				aspect-ratio: 2 / 1;
			}

			.legend {
				z-index: 99;

				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: auto;
				height: 40px;
			}

			.swiper {
				z-index: 999;

				position: absolute;
				top: 60px;
				left: 0;
				display: none;
				width: 40px;
				height: 30px;

				@media (max-width: 627px) {
					display: block;
				}
			}

			.rs-title {
				z-index: 999;

				font-size: 1.75rem;
				line-height: 2rem;
				text-align: center;

				position: absolute;
				top: 0;
				left: 0;
				width: max(100%, 600px);
			}
		}

		.caption {
			p {
				width: 100%;
				margin: 0;
			}
		}

		.combo {
			.subtitle {
				font-size: 1rem;
			}

			.year {
				.tick {
					text {
						fill: var(--col-text-primary);
						stroke: var(--col-backviz);
						stroke-width: 5px;
						stroke-linejoin: round;
						paint-order: stroke fill;
					}
				}
			}

			.range {
				width: 100%;
				height: auto;

				input {
					-moz-appearance: none;
					-webkit-appearance: none;
					appearance: none;

					background: var(--col-background);
					border: 1px solid var(--col-control-border);
					border-radius: 10px;

					display: block;
					width: calc(92.4% + 20px);
					height: 20px;
					margin: 15px 0 0 0;

					&::-moz-range-thumb {
						-moz-appearance: none;
						appearance: none;

						background-color: var(--col-control-active);
						background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"%3E%3Cpath stroke="%23fff" stroke-width="2" fill="none" d="M15,15 l-5,5 l5,5 M25,15 l5,5 l-5,5"/%3E%3C/svg%3E%0A');
						background-size: cover;
						background-position: center center;
						border: none;
						border-radius: var(--size-radius);

						width: 40px;
						height: 40px;
					}

					&::-webkit-slider-thumb {
						-webkit-appearance: none;
						appearance: none;

						background-color: var(--col-control-active);
						background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"%3E%3Cpath stroke="%23fff" stroke-width="2" fill="none" d="M15,15 l-5,5 l5,5 M25,15 l5,5 l-5,5"/%3E%3C/svg%3E%0A');
						background-size: cover;
						background-position: center center;
						border: none;
						border-radius: var(--size-radius);

						width: 40px;
						height: 40px;
					}

					&:focus {
						outline: none;

						&::-moz-range-thumb {
							outline: none;
						}

						&::-webkit-slider-thumb {
							outline: none;
						}
					}

					&:hover {
						outline: none;

						&::-moz-range-thumb {
							outline: 2px solid var(--col-control-active);
						}

						&::-webkit-slider-thumb {
							outline: 2px solid var(--col-control-active);
						}
					}
				}
			}
		}
	}

	.rs-share {
		width: var(--width-single);
		margin: 0 auto;
		padding: 3rem 0;

		.rs-socials {
			list-style: none;
			display: flex;
			flex-flow: row nowrap;
			gap: 1rem;
			justify-content: center;
			padding: 0;

			li {
				width: 40px;
				height: 40px;

				a {
					background-color: var(--col-background);
					color: transparent;
					border-radius: 50%;

					display: block;
					width: 40px;
					height: 40px;

					&:hover {
						background-color: var(--col-control-active);
					}

					img {
						mix-blend-mode: difference;
					}
				}
			}
		}
	}
}

@keyframes fade {
	from { opacity: 0; }
	25% { opacity: 1; }
	50% { opacity: 0; }
	to { opacity: 0; }
}