@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/PlusJakartaSans-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 500 600;
	font-display: swap;
	src: url("assets/fonts/PlusJakartaSans-Medium.ttf") format("truetype");
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/PlusJakartaSans-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("assets/fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype");
}

:root {
	color-scheme: dark;
	font-family: "Plus Jakarta Sans", Aptos, "Segoe UI", system-ui, sans-serif;
	font-synthesis: none;
	--space-8: 8px;
	--space-16: 16px;
	--space-32: 32px;
	--space-64: 64px;
	--content-narrow: 640px;
	--content-default: 960px;
	--content-wide: 1280px;
	--content-max: 1440px;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 10px;
	--stroke: 2px;
	--background: #0e0e0c;
	--panel: #171512;
	--panel-strong: #211d18;
	--ink: #d4c8b7;
	--muted: #938475;
	--accent: #ed741d;
	--accent-strong: #ff9c42;
	--accent-secondary: #ffb162;
	--line: rgba(184, 132, 75, 0.16);
	--primary-start: #a94d1f;
	--primary-end: #6f2e19;
	--primary-hover: #7f2f1a;
	--primary-ink: #ffffff;
	--shadow: rgba(0, 0, 0, 0.35);
	--surface-subtle: color-mix(in srgb, var(--panel) 95%, var(--ink) 5%);
	--surface: color-mix(in srgb, var(--panel) 92%, var(--ink) 8%);
	--surface-hover: color-mix(in srgb, var(--panel) 86%, var(--ink) 14%);
	--surface-strong: color-mix(in srgb, var(--panel) 76%, var(--ink) 24%);
	--surface-inset: color-mix(in srgb, var(--panel) 90%, var(--background) 10%);
	--accent-soft: color-mix(in srgb, var(--panel) 88%, var(--accent) 12%);
	background: var(--background);
}

* {
	box-sizing: border-box;
}

html {
	min-width: 320px;
	scroll-behavior: smooth;
}

body {
	min-width: 320px;
	min-height: 100%;
	margin: 0;
	background:
		radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 28%),
		var(--background);
	color: var(--ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
}

body::before {
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px);
	background-size: 32px 32px;
	content: "";
	pointer-events: none;
}

a {
	color: inherit;
	text-decoration: none;
}

a:focus-visible {
	outline: var(--stroke) solid var(--accent);
	outline-offset: 2px;
}

img {
	display: block;
	max-width: 100%;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	width: min(100%, var(--content-wide));
	height: 64px;
	margin: 0 auto;
	padding: 0 var(--space-32);
	background: color-mix(in srgb, var(--background) 90%, transparent);
	border-bottom: var(--stroke) solid var(--line);
	backdrop-filter: blur(10px);
}

.brand,
.footer-brand {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.brand img,
.footer-brand img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.footer-brand img {
	width: 48px;
	height: 48px;
}

nav {
	display: flex;
	gap: var(--space-32);
	font-weight: 700;
	letter-spacing: 0.04em;
}

nav a,
.text-link {
	transition: color 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

nav a:hover,
nav a:focus-visible,
.text-link:hover,
.text-link:focus-visible {
	color: var(--accent-strong);
}

.hero,
.section,
footer {
	width: min(100%, var(--content-wide));
	margin: 0 auto;
	padding-right: var(--space-32);
	padding-left: var(--space-32);
}

.hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
	align-items: center;
	min-height: calc(100svh - 64px);
	padding-top: 128px;
	padding-bottom: 128px;
	overflow: visible;
}

.hero::before {
	position: absolute;
	inset: -64px auto 0 50%;
	width: 100vw;
	background: url("assets/images/Splash_Main.jpg") center top / cover no-repeat;
	content: "";
	opacity: 0.056;
	pointer-events: none;
	transform: translateX(-50%);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 100%);
}

.hero-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 72% 46%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 32%);
	pointer-events: none;
}

.hero-context {
	position: absolute;
	top: var(--space-32);
	right: var(--space-32);
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.hero-copy {
	position: relative;
	z-index: 1;
	max-width: var(--content-narrow);
}

.eyebrow {
	margin: 0 0 var(--space-16);
	color: var(--accent);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
}

.game-number,
.role {
	margin: 0 0 var(--space-16);
	color: var(--muted);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1,
h2,
h3 {
	line-height: 1.1;
}

h1 {
	margin-bottom: var(--space-32);
	font-size: 64px;
	font-weight: 800;
	letter-spacing: normal;
	line-height: 1;
}

h1 em {
	color: var(--accent-strong);
	font-style: normal;
}

h2 {
	margin-bottom: var(--space-32);
	font-size: 48px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

h3 {
	margin-bottom: var(--space-16);
	font-size: 36px;
	font-weight: 800;
}

.lede {
	max-width: var(--content-narrow);
	margin-bottom: var(--space-32);
	color: var(--muted);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
}

.actions,
.contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
}

.contact-actions {
	align-items: center;
}

.contact-primary {
	position: relative;
	display: inline-flex;
}

.contact-primary .button {
	position: relative;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--space-8) var(--space-16);
	border: var(--stroke) solid var(--line);
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	transition:
		transform 140ms cubic-bezier(0.4, 0, 0.2, 1),
		background 140ms cubic-bezier(0.4, 0, 0.2, 1),
		border-color 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.button:hover,
.button:focus-visible {
	transform: translateY(-8px);
}

.button-primary {
	background: linear-gradient(135deg, var(--primary-start), var(--primary-end));
	border-color: var(--accent);
	color: var(--primary-ink);
}

.button-primary:hover,
.button-primary:focus-visible {
	background: var(--primary-hover);
	border-color: var(--accent-strong);
}

.button-secondary {
	background: var(--surface);
}

.button-secondary:hover,
.button-secondary:focus-visible {
	background: var(--surface-hover);
	border-color: var(--accent);
}

.hero-mark {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 384px;
}

.hero-mark::after {
	position: absolute;
	border-radius: 50%;
	content: "";
}

.hero-mark::after {
	width: min(27vw, 320px);
	aspect-ratio: 1;
	border: var(--stroke) solid var(--line);
}

.hero-mark img {
	position: relative;
	z-index: 1;
	width: min(22vw, 256px);
	filter: drop-shadow(0 20px 32px var(--shadow));
}

.section {
	padding-top: 128px;
	padding-bottom: 128px;
	border-top: var(--stroke) solid var(--line);
}

.section-heading {
	margin-bottom: var(--space-64);
}

.section-heading h2,
.section-heading p {
	margin-bottom: 0;
}

.section-heading.compact {
	display: block;
}

.section-heading.compact .eyebrow {
	margin-bottom: var(--space-16);
}

.game-card {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
	gap: var(--space-64);
	align-items: center;
	margin-bottom: 192px;
}

.game-card:last-child {
	margin-bottom: 0;
}

.game-card-reverse {
	grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.45fr);
}

.game-card-reverse .game-media {
	order: 2;
}

.game-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1024 / 575;
	background: var(--surface-inset);
	border-radius: var(--radius-md);
	box-shadow: 0 20px 70px var(--shadow);
}

.game-media::after {
	position: absolute;
	inset: 0;
	border: var(--stroke) solid var(--line);
	border-radius: inherit;
	content: "";
	pointer-events: none;
}

.game-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.game-media:hover img,
.game-media:focus-visible img {
	transform: scale(1.02);
}

.game-copy p:not(.game-number) {
	color: var(--muted);
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin: var(--space-32) 0;
	padding: 0;
	list-style: none;
}

.tags li {
	padding: var(--space-8) var(--space-16);
	background: var(--accent-soft);
	border: var(--stroke) solid var(--line);
	border-radius: 999px;
	color: var(--accent-strong);
	font-size: 14px;
	font-weight: 700;
}

.text-link {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.award-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--space-16);
}

.award-grid img {
	width: 100%;
	height: 128px;
	padding: var(--space-16);
	object-fit: contain;
	background: var(--surface-subtle);
	border: var(--stroke) solid var(--line);
	border-radius: var(--radius-md);
	filter: grayscale(1) brightness(1.2);
	transition:
		filter 140ms cubic-bezier(0.4, 0, 0.2, 1),
		background 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.award-grid img:hover {
	background: var(--surface-hover);
	filter: none;
}

.universe-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-32);
	margin-bottom: var(--space-16);
}

.universe-heading .eyebrow {
	margin-bottom: 0;
}

.universe-carousel {
	position: relative;
}

.carousel-slide {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-32);
	align-items: center;
}

.carousel-slide[hidden] {
	display: none;
}

.carousel-slide.is-active {
	animation: carousel-slide-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.carousel-slide.is-active .carousel-copy {
	animation: carousel-copy-in 460ms 70ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes carousel-slide-in {
	from {
		opacity: 0;
		transform: translateX(-24px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes carousel-copy-in {
	from {
		opacity: 0;
		transform: translateX(-14px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.carousel-image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #000;
	border: var(--stroke) solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: 0 20px 70px var(--shadow);
}

.carousel-copy {
	order: -1;
	width: 70%;
	max-width: none;
}

.carousel-copy h2 {
	margin-bottom: var(--space-32);
	font-size: clamp(36px, 4vw, 64px);
	line-height: 1.05;
}

.carousel-copy > p:last-child {
	max-width: none;
	min-height: 3.3em;
	margin-bottom: 0;
	color: var(--muted);
	font-size: 18px;
	line-height: 1.65;
	text-wrap: balance;
}

.carousel-controls,
.carousel-dots {
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

.carousel-arrow,
.carousel-dot {
	padding: 0;
	border: var(--stroke) solid var(--line);
	background: var(--surface-subtle);
	color: var(--ink);
	cursor: pointer;
	font: inherit;
	transition:
		background 140ms cubic-bezier(0.4, 0, 0.2, 1),
		border-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-arrow {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	font-size: 18px;
}

.carousel-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible,
.carousel-dot:hover,
.carousel-dot:focus-visible,
.carousel-dot.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--primary-ink);
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
	transform: translateY(-2px);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.studio {
	display: block;
}

.studio-intro {
	max-width: var(--content-narrow);
}

.studio-intro > p:last-child {
	color: var(--muted);
}

.founders {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-32);
	margin-top: var(--space-64);
}

.founder-card {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: var(--space-16);
	align-items: center;
	padding: var(--space-16);
	background: var(--surface-subtle);
	border: var(--stroke) solid var(--line);
	border-radius: var(--radius-md);
}

.founder-card img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	filter: saturate(0.75) contrast(1.08);
}

.founder-card h3 {
	margin-bottom: var(--space-8);
	font-size: 20px;
	line-height: 1.2;
}

.founder-card .role {
	margin-bottom: var(--space-8);
}

.contact {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: var(--space-32);
	border-top: 0;
}

.contact h2 {
	margin-bottom: 0;
}

footer {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--space-32);
	align-items: center;
	min-height: 192px;
	padding-top: var(--space-32);
	padding-bottom: var(--space-32);
	border-top: var(--stroke) solid var(--line);
	color: var(--muted);
	font-size: 14px;
}

footer p {
	margin: 0;
}

.footer-brand {
	white-space: nowrap;
}

@media (max-width: 800px) {
	.hero {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
		min-height: auto;
		padding-top: var(--space-64);
		padding-bottom: 96px;
	}

	.hero-context {
		position: static;
		order: -2;
		margin-bottom: var(--space-32);
	}

	.hero-mark {
		order: -1;
		width: 176px;
		min-height: 176px;
		margin-bottom: var(--space-32);
	}

	.hero-mark::after {
		width: 176px;
	}

	.hero-mark img {
		width: 112px;
	}

	.section {
		padding-top: 96px;
		padding-bottom: 96px;
	}

	.section-heading {
		margin-bottom: var(--space-32);
	}

	.game-card,
	.game-card-reverse {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-32);
		margin-bottom: 96px;
	}

	.game-card-reverse .game-media {
		order: 0;
	}

	.game-card,
	.game-card-reverse {
		grid-template-columns: 1fr;
		gap: var(--space-32);
	}

	.carousel-slide {
		grid-template-columns: 1fr;
		gap: var(--space-32);
	}

	.award-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.founders {
		grid-template-columns: 1fr;
	}

	footer {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.site-header,
	.hero,
	.section,
	footer {
		padding-right: var(--space-16);
		padding-left: var(--space-16);
	}

	.site-header {
		align-items: center;
	}

	.brand span {
		display: none;
	}

	nav {
		gap: var(--space-16);
		font-size: 14px;
	}

	h1 {
		font-size: 48px;
		line-height: 1.1;
	}

	h2 {
		font-size: 36px;
	}

	.lede {
		font-size: 14px;
	}

	.award-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.universe-heading {
		align-items: flex-start;
		flex-direction: column;
		margin-bottom: var(--space-16);
	}

	.carousel-copy h2 {
		font-size: 36px;
	}

	.carousel-copy > p:last-child {
		min-height: 0;
		font-size: 16px;
	}

	.carousel-copy {
		width: 100%;
	}

	.founder-card {
		grid-template-columns: 64px 1fr;
		gap: var(--space-16);
		align-items: start;
	}

	.founder-card img {
		width: 64px;
		height: 64px;
	}

	.contact-actions,
	.contact-primary,
	.contact-actions .button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}