:root {
	--color-black:       #000;
	--color-placeholder: linear-gradient(to bottom, #C9FEE2, #CAEEFF 80%);

	--font-brand: 'GT-Super', Times, serif;
	--width-max: 1000px;
	--width-wide: 834px;
	--width-text: 664px;
	--padding-main: 23px;
	--radius-button: 10px;
	--time-header-title: 550ms;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

html {
	scroll-padding-top: calc(115px + 1em);
}

body {
	position: relative;
	max-width: var(--width-max);
	margin: auto;

	background: linear-gradient(to bottom, #C9FEE2, #CAEEFF);

	font-family: 'Yantramanav', sans-serif;
	font-weight: 300;
	font-size: 114%;
	line-height: calc(24 / 18);

	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; */
}

ul, ol {
	list-style: none;
}

a,
button {
	color: var(--color-black);
	text-decoration: none;
}

img {
	vertical-align: bottom;
}

figure img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

figcaption,
.video-caption {
	display: block;
	padding-top: 6px;
	font-size: 0.85em;
	text-align: left;
}

sub {
	position: relative;
	top: -0.05em;
	font-size: 0.8em;
	line-height: 0;
}

.outline-only {
	display: none;
}

.fixed-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	height: fit-content;
}

.fixed-container header {
	position: relative;
	max-width: var(--width-max);
	margin: auto;
	background: white;
}

#header-site {
	position: relative;
	z-index: 10000;

	display: flex;
	align-items: center;
	padding: 5px 10px;

	background: white;
	border-bottom: 1px solid var(--color-black);
}

#sponsor-tag {
	display: flex;
	flex-direction: column;
	width: fit-content;
	margin-right: 10px;
}

#sponsor-tag .sponsor {
	padding-left: 5px;
	font-size: 15.3px;
	line-height: 1;
}

#sponsor-tag .tag {
	padding: 2px 5px 1px;
	background: var(--color-black);
	color: #95FFC6;
	border-radius: 5px 0 5px 0;
	font-weight: 400;
	font-size: 9px;
	line-height: 1;
	text-align: center;
	letter-spacing: calc(20 / 1000 * 1em);
	text-transform: uppercase;
}

#referrer-logo {
	max-height: 33px;
	max-width: 150px;
}

#nav-toggler {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 6px;

	margin-left: auto;
	padding: 11px 7px 11px 5px;

	background: white;
	border: 1px solid var(--color-black);
	border-radius: var(--radius-button);

	font-size: 15px;
	text-transform: uppercase;
	cursor: pointer;
}

#nav-toggler::after {
	content: '';
	width: 28px;
	height: 20.5px;
	background-image: url(../img/menu.svg);
	background-repeat: no-repeat;
	background-position: center center;
	transition: all 300ms;
}
#nav-toggler[aria-expanded="true"]::after {
	background-image: url(../img/menu-close.svg);
}

#nav-main {
	position: absolute;
	z-index: 9000;
	transform: translateX(100%);
	width: 100%;
	height: calc(100vh - 55px);
	overflow-y: scroll;
	overscroll-behavior: none;
	visibility: hidden;
	opacity: 0;
	transition: all 300ms;
	pointer-events: none;
}

#nav-main.in {
	transform: translateX(0);
	visibility: visible;
	opacity: 1;
	pointer-events: initial;
}

#nav-bg-container {
	padding: var(--padding-main);
	padding-bottom: 100px;

	background: linear-gradient(to bottom, #C9FEE2, #CAEEFF);
	background-attachment: scroll;
	background-size: 100% 100%;
	box-shadow: 0 1px var(--color-black);
}

#language-switch {
	position: relative;
	width: fit-content;
	margin: auto;
	display: flex;

	background: #D0D0D0;
	border: 1px solid var(--color-black);
	border-radius: var(--radius-button);

	text-transform: uppercase;
}

#language-switch::before {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	width: 50%;
	height: 100%;
	background: white;
	border: 1px solid var(--color-black);
	border-radius: var(--radius-button);
}

#language-switch:has(.fr[aria-current])::before {
	left: auto;
	right: -1px;
}

#language-switch a {
	position: relative;
	padding: 0.05em 30px 0;

	border-radius: var(--radius-button);

	font-size: 15px;
	line-height: 1.9;
}

nav h2 {
	margin-top: 40px;
	margin-bottom: 14px;

	font-family: var(--font-brand);
	font-weight: 700;
	font-size: 30px;
	text-transform: uppercase;
}

nav h2,
nav .lead {
	text-align: center;
}

nav .lead {
	margin-bottom: 30px;
	line-height: calc(24 / 18);
}

nav ul {
	margin-bottom: 20px;
}

nav li {
	padding: 22px 0;
	border-bottom: 1px solid var(--color-black);
}

nav li a {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;

	font-family: var(--font-brand);
	font-weight: 700;
	line-height: 1.25;
}

nav a img {
	flex: 1 0 36%;
	max-width: 36%;

	aspect-ratio: 124 / 66;
	object-fit: cover;

	background: #767676;
}


hr {
	height: 12px;
	border: 0;
	border-top: 1px solid var(--color-black);
	border-bottom: 8px solid var(--color-black);
}

#header-title,
#header-title .driving,
#driving-g::after,
#header-title .tomorrow
{
	transition-duration: var(--time-header-title);
	transition-timing-function: ease-in-out;
}


#header-title {
	position: relative;
	display: block;
	height: 138px;

	border-bottom: 10px solid var(--color-black);
	transition-property: height, border-width;

	line-height: 1;
}

#header-title .driving {
	position: absolute;
	right: calc(50% - 130px - 7px);
	top: 10px;
	transform-origin: top right;
	transform: scale(1);

	transition-property: top, transform;

	font-family: var(--font-brand);
	font-weight: 900;
	font-size: 75px;
	letter-spacing: calc(-10 / 1000 * 1em);
}

#driving-g {
	position: relative;
}
#driving-g::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 64px;
	width: 1px;
	height: 64px;
	transform-origin: 0 0;
	transform: scale(1);

	background: var(--color-black);
	transition-property: top, transform;
}

#header-title .tomorrow {
	position: absolute;
	top: 59px;
	left: calc(50% - 115px - 25px);
	transform-origin: 0 0;
	transform: scale(1);

	font-weight: 100;
	font-size: 60px;
	transition-property: top, transform;
}

#header-title.shrink {
	height: 58px;
	border-width: 1px;
}

#header-title.shrink .driving {
	transform: scale(0.48) translateX(-317px);
}
#header-title.shrink #driving-g::after {
	transform: scaleY(0.01);
}
#header-title.shrink .tomorrow {
	top: 9px;
	transform: scale(0.62) translateX(221px);
}


main,
footer {
	max-width: var(--width-max);
	margin: 0 auto;
	padding: 193px var(--padding-main) 10px;

	background: white;
	box-shadow: -1px 0 var(--color-black), 1px 0 var(--color-black);
}

footer {
	padding: 10px var(--padding-main) 50px;
	text-align: center;
}

.content {
	max-width: var(--width-text);
	margin: 0 auto;
}

.content.wide {
	max-width: var(--width-wide);
}

.content p a {
	text-decoration: underline;
}


/*
 * Home / Top Stories
 */
article {
	--padding-top: 64px;

	padding-top: var(--padding-top);
	text-align: right;
}
article:nth-of-type(2n) {
	text-align: left;
}

article header {
	position: relative;
}

article header::before {
	content: '';
	position: absolute;
	top: calc(var(--padding-top) * -1);
	right: 281px;
	width: 1px;
	height: calc(100% + var(--padding-top) - 7px);
	background: var(--color-black);
	transition: all var(--time-header-title);
}
article:first-of-type header::before {
	box-shadow: 0 -200px var(--color-black);
}
article:nth-of-type(2n) header::before {
	right: auto;
	left: 281px;
}

article img {
	display: inline-block;
	width: 264px;
	height: 277px;
	background: var(--color-placeholder);
	object-fit: cover;
}

article h1 {
	position: relative;
	z-index: 0;
	width: fit-content;
	margin-top: 10px;
	margin-left: auto;

	font-family: var(--font-brand);
	font-size: 54px;
	text-transform: uppercase;
	line-height: 0.95;
	letter-spacing: calc(-10 / 1000 * 1em);
	hyphens: manual;
}
article h1::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 61px;
	background: white;
}

article:nth-of-type(2n) h1 {
	margin-left: 0;
	margin-right: auto;
}
article:nth-of-type(2n) h1::after {
	left: auto;
	right: 0;
}

article p {
	margin: 5px 0 var(--padding-main);
	font-size: 22px;
	line-height: calc(26 / 22);
}

#more-stories {
	margin-top: 50px;
	padding: 10px 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--color-black);
	cursor: pointer;
	text-align: right;
}

h2 {
	margin: 10px 0;
	font-family: var(--font-brand);
	font-size: 20px;
}


.fine-print {
	max-width: 500px;
	margin: 0 auto var(--padding-main);
	font-size: 12px;
	line-height: calc(16 / 12);
}



.story-title {
	margin: var(--padding-main) calc(-1 * var(--padding-main) + 10px);
	border-bottom: 1px solid var(--color-black);
}

.story-title h1 {
	margin: 1em calc(var(--padding-main) - 10px) 1.5em;
	font-family: var(--font-brand);
	font-weight: 700;
	font-size: 33px;
	line-height: 1;
}

.story-title img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--color-placeholder);
}

.video-container {
	position: relative;
}

.content > .video-container {
	margin-bottom: 2em;
}

.video-affordance {
	background: var(--color-black) url(../img/video-play.svg) center center no-repeat;
	cursor: pointer;
}

.video-affordance::before {
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: url(../img/video-play.svg) center center no-repeat;
	cursor: pointer;
	pointer-events: none;
}

video {
	width: 100%;
	aspect-ratio: 16 / 9;
	vertical-align: bottom;
	background: var(--color-black);
}

.story-lead {
	margin: var(--padding-main) 0;
	font-size: 22px;
	line-height: calc(26 / 22);
}

.content > p {
	margin: 1.4em 0;

	-webkit-hyphens: auto;
	hyphens: auto;
}

.content > ul {
	padding-left: 1em;
	list-style: '– ' outside;
}

.content > ul li {
	padding-left: 1em;
}

.first-para {
	margin-top: 2.8em;
}

.interview-question {
	font-weight: 400;
}

.box {
	padding-top: 1.2em;
	border-top: 1px solid var(--color-black);
}

figure {
	margin: 2em 0;
	text-align: center;
}

blockquote {
	margin: 1em 0 2em;
	font-family: var(--font-brand);
	font-weight: 700;
	font-size: 33px;
	line-height: 1;
	text-align: center;
}

.testimonial {
	margin-top: 50px;
}

.testimonial figure {
	margin-bottom: 18px;
}
.testimonial figure img {
	width: 66%;
	max-width: 320px;
	aspect-ratio: 256 / 286;
	background: var(--color-placeholder);
}

.testimonial h2 {
	margin-bottom: 20px;
	font-size: 30px;
	line-height: 1;
	text-align: center;
}

.testimonial-person-info {
	text-align: center;
}

.testimonial p {
	margin-bottom: 1.4em;
}


/** Image Slider **/

.image-slider {
	margin: 2em 0;
}

.image-slider ul {
	width: inherit;
	display: flex;
	list-style: none;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.image-slider ul::-webkit-scrollbar {
	display: none;
}

.image-slider li {
	width: 100%;
	flex-shrink: 0;
	display: flex;
	scroll-snap-align: center;
}

.image-slider figure {
	margin: 0 0 10px 0;
}

.slider-nav {
	height: var(--margin-unit-actual);

	display: flex;
	align-items: center;
	justify-content: center;
}

.slider-nav-button {
	width: 18px;
	height: 18px;
	margin: 0 4px;
	padding: 0;
	border: 1px solid var(--color-black);
	border-radius: 50%;
	background: white;
	box-shadow: inset 0 0 0 2px white;
	cursor: pointer;
	transition: 300ms all;
}

.slider-nav-button.current {
	box-shadow: inset 0 0 0 2px white, inset 0 0 0 9px #7b7b7b;
}

.slider-nav-button:active {
	box-shadow: inset 0 0 0 3px #7b7b7b;
}


@media screen and (min-width: 500px) and (max-width: 679px) {
	#nav-bg-container {
		padding-left: 10vw;
		padding-right: 10vw;
	}

	nav a img {
		flex: 1 0 26%;
		max-width: 26%;
	}
}

@media screen and (min-width: 500px) {
	#referrer-logo {
		max-height: 33px;
		max-width: 150px;
	}
}

@media screen and (min-width: 500px) and (max-width: 879px) {
	.content,
	.content.wide {
		max-width: 500px;
	}
}

@media screen and (min-width: 680px) and (max-width: 999px) {
	#nav-bg-container {
		padding-left: 15vw;
		padding-right: 15vw;
	}

	nav a img {
		flex: 1 0 20%;
		max-width: 20%;
	}
}


@media screen and (min-width: 880px) {
	article {
		text-align: left;
	}

	article:nth-of-type(2n) {
		text-align: right;
	}

	article header::before {
		right: 299px;
	}

	article:nth-of-type(2n) header::before {
		left: 299px;
	}

	article p {
		text-align: right;
	}

	article img {
		width: 514px;
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

@media (min-width: 1000px) {
	html {
		scroll-padding-top: calc(129px + 1em);
	}

	#header-site {
		padding: 5px 85px;
	}

	#header-title {
		height: 179px;
	}

	#header-title .driving {
		right: calc(50% - 170px - 12px);
		top: 14px;

		font-size: 98px;
	}

	#driving-g::after {
		top: 80px;
		height: 84px;
	}

	#header-title .tomorrow {
		top: 79px;
		left: calc(50% - 150px - 33px);

		font-size: 79px;
	}

	#header-title.shrink {
		height: 68px;
	}

	#header-title.shrink .driving {
		top: 10px;
		transform: scale(0.48) translateX(-419px);
	}

	#header-title.shrink #driving-g::after {
		transform: scaleY(0.01);
	}

	#header-title.shrink .tomorrow {
		top: 9px;
		transform: scale(0.62) translateX(290px);
	}


	#nav-main {
		transform: translateY(-100%);
	}

	#nav-main.in {
		transform: translateY(0);
	}

	#nav-bg-container {
		padding: var(--padding-main) 10px;
	}

	.nav-sections {
		display: flex;
		gap: 0 36px;
	}

	.nav-sections section {
		flex: 1;
	}

	.nav-sections hr {
		display: none;
	}

	nav li a {
		font-size: 0.9em;
	}


	main {
		padding-top: 234px;
	}

	footer {
		padding-top: 34px;
		padding-bottom: 6em;
	}

	.story-title {
		margin: var(--padding-main) 0;
	}

	.story-title picture,
	.story-title .video-container {
		width: 834px;
		margin: 0 -85px;
	}

	.story-title img,
	.story-title video {
		width: 834px;
	}

	.story-title h1 {
		margin: 0.5em 0 1em;
		font-size: 58px;
	}

	.content .story-lead {
		margin: var(--padding-main) 0;
		font-size: 28px;
		line-height: calc(34 / 28);
	}

	.content>p,
	.content>ul {
		font-size: 22px;
		line-height: calc(28 / 22);
	}

	blockquote {
		font-size: 58px;
	}

	#more-stories {
		padding-bottom: 38px;
		text-align: center;
	}

	#more-stories p {
		font-size: 22px;
		line-height: calc(28 / 22);
	}

	h2 {
		font-size: 24px;
	}

	article header::before {
		right: 260px;
	}

	article:nth-of-type(2n) header::before {
		left: 260px;
	}

	article img {
		width: 549px;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	article h1 {
		margin-bottom: 20px;
		font-size: 84px;
		line-height: 0.7;
	}
	article h1::after {
		height: 69px;
		left: auto;
		right: 0;
	}
	article:nth-of-type(2n) h1::after {
		right: auto;
		left: 0;
	}

	article p {
		margin-bottom: 1.3em;
		font-size: 28px;
		line-height: calc(41 / 28);
	}
}


@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}

	.image-slider ul {
		scroll-behavior: auto !important;
	}
}


.chart {
	margin: 2em 0;
	text-align: center;
}

.chart h2 {
	margin-bottom: 1em;
	text-transform: uppercase;
}

.canvas-container {
	position: relative;
	aspect-ratio: 16 / 9;
}

#chart-tooltip-type {
	height: 3em;
	max-width: 20em;
	margin: 0 auto 1em;
	padding: 1em;
	transition: opacity 200ms ease-in-out;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.1;
}

#chart-tooltip-amount {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 200ms ease-in-out;

	font-family: var(--font-brand);
	font-size: 36px;
}