@font-face {
	font-family: "Fredoka";
	src: url("/fonts/fredoka.woff2") format("woff2");
	font-weight: 300 700;
	font-display: swap;
}

@font-face {
	font-family: "Nunito";
	src: url("/fonts/nunito.woff2") format("woff2");
	font-weight: 200 1000;
	font-display: swap;
}

:root {
	color-scheme: light;

	--blue: #2c69c5;
	--navy: #12428a;
	--ink: #17223b;
	--muted: #4a5774;
	--paper: #ffffff;
	--tint: #eef3fb;
	--sun: #ffc845;
	--sun-dark: #f0ad00;

	--font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
	--font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

	--gutter: clamp(1rem, 4vw, 2rem);
	--space: clamp(4rem, 10vw, 7.5rem);
	--radius: clamp(1.75rem, 4vw, 3.25rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
}

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

h1, h2, h3 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--blue); }

:focus-visible { outline: 3px solid var(--sun-dark); outline-offset: 3px; }

.wrap {
	width: min(100% - 2 * var(--gutter), 72rem);
	margin-inline: auto;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.section-title {
	font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
	text-align: center;
}

/* White downward triangle on the top edge of a coloured section. */
.notch { position: relative; }
.notch::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: -1px;
	left: 50%;
	width: clamp(4rem, 9vw, 6.5rem);
	aspect-ratio: 2 / 1;
	translate: -50% 0;
	background: var(--paper);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Buttons */

.btn {
	display: inline-block;
	padding: 0.85em 1.9em;
	border-radius: 999px;
	background: var(--sun);
	box-shadow: 0 4px 0 var(--sun-dark);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 600;
	text-decoration: none;
	transition: translate 0.15s, box-shadow 0.15s;
}
.btn:hover { translate: 0 -2px; box-shadow: 0 6px 0 var(--sun-dark); }
.btn:active { translate: 0 3px; box-shadow: 0 1px 0 var(--sun-dark); }

.link-arrow {
	font-weight: 700;
	text-decoration: none;
}
.link-arrow::after { content: " →"; }
.link-arrow:hover { text-decoration: underline; }

.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
	margin-top: 2rem;
}

/* Hero */

.hero { padding-block: clamp(1.25rem, 3vw, 2rem) clamp(3rem, 7vw, 5rem); }

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--blue);
	text-decoration: none;
}
.brand__logo { width: 1.6rem; height: 4rem; }
.brand__name {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hero__grid {
	display: grid;
	gap: 2rem;
	align-items: center;
	margin-top: clamp(1.5rem, 4vw, 3rem);
}

.hero h1 { font-size: clamp(2.125rem, 1.4rem + 3vw, 3.75rem); }
.hero .hl { color: var(--blue); }
.nowrap { white-space: nowrap; }

.lead {
	max-width: 34rem;
	margin-top: 1.25rem;
	color: var(--muted);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
}

.hero__art {
	position: relative;
	justify-self: center;
	width: min(70vw, 22rem);
}
.hero__art::before {
	content: "";
	position: absolute;
	inset: 8% 4% 2%;
	z-index: -1;
	border-radius: 50%;
	background: var(--tint);
}

@media (min-width: 900px) {
	.hero__grid { grid-template-columns: 1.35fr 1fr; gap: 3rem; }
	.hero__art { width: min(100%, 24rem); }
}

/* Stats */

.stats {
	background: var(--blue);
	color: #fff;
}
.stats__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-block: 0;
	padding: clamp(4rem, 9vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem);
	list-style: none;
	text-align: center;
	font-size: clamp(1rem, 0.9rem + 0.6vw, 1.375rem);
	font-weight: 700;
}
.stats strong {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
	font-weight: 600;
	line-height: 1.1;
}

/* Feature: a screenshot fading into a navy panel with text. */

.feature {
	position: relative;
	display: grid;
	overflow: hidden;
	border-radius: 0 0 var(--radius) var(--radius);
	background: var(--navy);
	color: #fff;
}
.feature__media { position: relative; }
.feature__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.feature__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 45%, var(--navy));
}
.feature__body {
	position: relative;
	width: min(100% - 2 * var(--gutter), 36rem);
	margin: -3rem auto 0;
	padding-bottom: clamp(3rem, 8vw, 4.5rem);
	text-align: center;
}
.feature h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.625rem); }
.feature p { margin-top: 1rem; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }
.feature .feature__punch {
	margin-top: 1.25rem;
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
	font-weight: 600;
	line-height: 1.25;
}

@media (min-width: 900px) {
	.feature {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		min-height: clamp(30rem, 40vw, 38rem);
	}
	.feature__media {
		position: absolute;
		inset: 0 auto 0 0;
		width: 62%;
	}
	.feature__media img { height: 100%; aspect-ratio: auto; }
	.feature__media::after { background: linear-gradient(to right, transparent 35%, var(--navy) 97%); }
	.feature__body {
		grid-column: 2;
		width: auto;
		max-width: 34rem;
		margin: 0;
		padding: 4rem var(--gutter) 4rem 0;
		text-align: left;
	}

	.feature--flip .feature__media { inset: 0 0 0 auto; }
	.feature--flip .feature__media::after { background: linear-gradient(to left, transparent 35%, var(--navy) 97%); }
	.feature--flip .feature__body {
		grid-column: 1;
		justify-self: end;
		padding: 4rem 0 4rem var(--gutter);
	}
}

/* Trailer */

.trailer { margin-top: var(--space); }

.trailer__stage {
	position: relative;
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.video {
	width: min(100% - 2 * var(--gutter), 50rem);
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: clamp(0.75rem, 2vw, 1.5rem);
	background: #000;
	box-shadow: 0 1.5rem 3rem -1rem rgb(18 66 138 / 0.45);
}
.video__link, .video iframe {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.video__link img { width: 100%; height: 100%; object-fit: cover; }
.video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: clamp(4rem, 12vw, 5.5rem);
	aspect-ratio: 1;
	translate: -50% -50%;
	border-radius: 50%;
	background: var(--sun);
	box-shadow: 0 4px 0 var(--sun-dark);
	color: var(--ink);
	transition: scale 0.15s;
}
.video__play svg { width: 50%; translate: 6% 0; }
.video__link:hover .video__play { scale: 1.08; }

/* Scenery on both sides of the video, only where there is room for it. */
.trailer__deco { display: none; }

@media (min-width: 1100px) {
	.trailer__deco {
		position: absolute;
		bottom: -2.5rem;
		display: block;
		width: min(17rem, (100% - 50rem) / 2 - 2rem);
	}
	/* Hug the video's edges rather than the viewport's. */
	.trailer__deco--left { right: calc(50% + 25rem + 1rem); }
	.trailer__deco--right { left: calc(50% + 25rem + 1rem); }
}

/* Team */

.team { margin-top: var(--space); }

.team__grid {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	margin-top: clamp(2rem, 5vw, 3rem);
}

@media (min-width: 900px) {
	.team__grid { grid-template-columns: 1fr 1fr; }
}

.member { container-type: inline-size; }
.member__card {
	display: grid;
	height: 100%;
	overflow: hidden;
	border-radius: 1.5rem;
	background: var(--tint);
}
.member__photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 25%;
}
.member__body {
	position: relative;
	padding: 1.5rem 1.5rem 1.75rem;
}
.member__beet {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: 1rem;
	height: 2.5rem;
	color: var(--blue);
}
.member h3 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); }
.member__role {
	margin-top: 0.15rem;
	color: var(--blue);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
}
.member__role + p { margin-top: 0.85rem; color: var(--muted); }

@container (min-width: 30rem) {
	.member__card { grid-template-columns: 2fr 3fr; }
	.member__photo { height: 100%; min-height: 16rem; aspect-ratio: auto; }
	.member__body { padding: 1.75rem 1.75rem 2rem; }
}

/* Plot section after the team keeps a gap above it. */
.feature--flip { margin-top: var(--space); }

/* Closing */

.closing {
	display: grid;
	grid-template-areas:
		"text text"
		"left right";
	align-items: end;
	gap: 2rem 1rem;
	margin-top: var(--space);
	text-align: center;
}
.closing__text { grid-area: text; max-width: 42rem; margin-inline: auto; }
.closing h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
.closing__name {
	display: block;
	color: var(--blue);
	font-size: 1.9em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.closing p {
	margin: 1.25rem 0 2rem;
	color: var(--muted);
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
}
.closing__art { width: 100%; max-width: 15rem; }
.closing__art--left { grid-area: left; justify-self: end; width: 75%; }
.closing__art--right { grid-area: right; justify-self: start; }

@media (min-width: 1000px) {
	.closing {
		grid-template-columns: 1fr minmax(0, 40rem) 1fr;
		grid-template-areas: "left text right";
		gap: 2rem;
	}
	.closing__art--left { width: 85%; }
}

/* Footer */

.footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.25rem;
	margin-top: var(--space);
	padding-block: 2rem;
	border-top: 1px solid var(--tint);
	color: var(--muted);
	font-size: 0.95rem;
}
.footer__logo { width: 0.8rem; height: 2rem; color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.btn, .video__play { transition: none; }
}