:root {
	--color-background: #11100e;
	--color-background-soft: #181612;
	--color-background-light: #e2ddd1;

	--color-text: #ece8df;
	--color-text-muted: #b8b1a5;
	--color-text-dark: #24211c;

	--color-accent: #9c332d;
	--color-accent-hover: #b83c34;

	--color-border: rgba(236, 232, 223, 0.22);
	--color-border-strong: rgba(236, 232, 223, 0.42);

	--site-width: 1440px;
	--site-padding: clamp(20px, 4vw, 72px);

	--header-height: 82px;
}


/* Base */

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;

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

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 16px;
	line-height: 1.6;
}

body.menu-open {
	overflow: hidden;
}

a {
	color: inherit;

	text-decoration: none;
}

button {
	font: inherit;
}

img {
	max-width: 100%;
}

.site-container {
	width: min(
		calc(100% - (var(--site-padding) * 2)),
		var(--site-width)
	);

	margin-inline: auto;
}


/* Anchor targets */

#game-intro,
#trailer,
#campaign-vision,
#support,
#skies-above-the-great-war,
#roma-invicta {
	scroll-margin-top:
		calc(var(--header-height) + 30px);
}


/* Header */

.site-header {
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;

	width: 100%;

	border-bottom:
		1px solid rgba(255, 255, 255, 0.11);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;

	height: var(--header-height);
}

.site-logo {
	display: flex;
	align-items: center;

	flex-shrink: 0;
}

.site-logo img {
	display: block;

	width: auto;
	height: 40px;
}


/* Main navigation */

.main-navigation {
	display: flex;
	align-items: center;

	gap:
		clamp(15px, 1.45vw, 30px);

	font-size: 12px;
	font-weight: 700;

	letter-spacing: 0.07em;

	text-transform: uppercase;
}

.main-navigation > a,
.navigation-dropdown__button {
	transition:
		color 160ms ease,
		opacity 160ms ease;
}

.main-navigation > a:not(.main-navigation__wishlist):not(.main-navigation__support):hover,
.navigation-dropdown__button:hover {
	color: #ffffff;
}


/* Games dropdown */

.navigation-dropdown {
	position: relative;
}

.navigation-dropdown__button {
	display: flex;
	align-items: center;

	gap: 7px;

	padding:
		28px
		0;

	border: 0;

	background: transparent;
	color: inherit;

	cursor: pointer;

	font-size: inherit;
	font-weight: inherit;

	letter-spacing: inherit;

	text-transform: inherit;
}

.navigation-dropdown__button span {
	position: relative;
	top: -1px;

	font-size: 15px;
}

.navigation-dropdown__menu {
	position: absolute;
	top: calc(100% - 10px);
	left: -24px;

	display: flex;
	flex-direction: column;

	width: 290px;

	padding: 10px;

	border:
		1px solid var(--color-border);

	background:
		rgba(20, 18, 15, 0.97);

	box-shadow:
		0 18px 45px rgba(0, 0, 0, 0.28);

	opacity: 0;
	visibility: hidden;

	transform:
		translateY(6px);

	transition:
		opacity 160ms ease,
		transform 160ms ease,
		visibility 160ms ease;
}

.navigation-dropdown:hover .navigation-dropdown__menu,
.navigation-dropdown:focus-within .navigation-dropdown__menu {
	opacity: 1;
	visibility: visible;

	transform:
		translateY(0);
}

.navigation-dropdown__menu a {
	padding:
		13px
		14px;

	color: var(--color-text-muted);

	font-size: 12px;

	letter-spacing: 0.04em;

	text-transform: none;

	transition:
		background 150ms ease,
		color 150ms ease;
}

.navigation-dropdown__menu a:hover {
	background:
		rgba(255, 255, 255, 0.06);

	color: #ffffff;
}

.navigation-dropdown__current-game {
	color: #ffffff !important;
}


/* Header action buttons */

.main-navigation__wishlist,
.main-navigation__support {
	padding:
		10px
		14px;

	border:
		1px solid rgba(255, 255, 255, 0.45);

	white-space: nowrap;

	transition:
		background 150ms ease,
		border-color 150ms ease,
		color 150ms ease !important;
}

.main-navigation__wishlist:hover,
.main-navigation__support:hover {
	border-color: #ffffff;

	background: #ffffff;
	color: #15130f;
}


/* Mobile menu button */

.menu-toggle {
	display: none;

	width: 44px;
	height: 44px;

	padding: 10px;

	border: 0;

	background: transparent;

	cursor: pointer;
}

.menu-toggle span {
	display: block;

	width: 100%;
	height: 2px;

	margin:
		5px
		0;

	background: #ffffff;

	transition:
		transform 180ms ease,
		opacity 180ms ease;
}


/* Hero */

.hero {
	position: relative;

	display: flex;
	align-items: center;

	min-height: 100svh;

	overflow: hidden;
}

.hero__background {
	position: absolute;

	inset: 0;

	background-image:
		url("/assets/images/europae-invicta/hero.jpg");

	background-position:
		center center;

	background-size: cover;

	transform:
		scale(1.01);
}

.hero__overlay {
	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(11, 10, 8, 0.95) 0%,
			rgba(11, 10, 8, 0.82) 25%,
			rgba(11, 10, 8, 0.46) 47%,
			rgba(11, 10, 8, 0.16) 72%,
			rgba(11, 10, 8, 0.05) 100%
		),
		linear-gradient(
			0deg,
			rgba(11, 10, 8, 0.76) 0%,
			rgba(11, 10, 8, 0.15) 38%,
			transparent 65%
		);
}

.hero__content {
	position: relative;
	z-index: 2;

	padding-top:
		calc(var(--header-height) + 50px);

	padding-bottom: 100px;
}

.hero__text {
	max-width: 680px;
}

.hero__title {
	margin: 0;
}

.hero__title img {
	display: block;

	width:
		min(100%, 610px);

	height: auto;
}

.hero__description {
	max-width: 650px;

	margin:
		32px
		0
		0;

	color: #ded9cf;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(17px, 1.35vw, 21px);

	line-height: 1.65;

	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.65);
}

.hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 15px;

	margin-top: 36px;
}


/* Buttons */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 52px;

	padding:
		12px
		24px;

	border:
		1px solid transparent;

	font-size: 12px;
	font-weight: 700;

	letter-spacing: 0.1em;

	text-transform: uppercase;

	transition:
		background 150ms ease,
		border-color 150ms ease,
		color 150ms ease,
		transform 150ms ease;
}

.button:hover {
	transform:
		translateY(-1px);
}

.button--primary {
	background: var(--color-accent);
	color: #ffffff;

	box-shadow:
		0 7px 24px rgba(0, 0, 0, 0.18);
}

.button--primary:hover {
	background:
		var(--color-accent-hover);
}

.button--secondary {
	border-color:
		rgba(255, 255, 255, 0.44);

	background:
		rgba(0, 0, 0, 0.16);
}

.button--secondary:hover {
	border-color: #ffffff;

	background:
		rgba(255, 255, 255, 0.08);
}

.button--support {
	margin-top: 28px;

	border-color:
		var(--color-accent);

	background:
		var(--color-accent);

	color: #ffffff;
}

.button--support:hover {
	border-color:
		var(--color-accent-hover);

	background:
		var(--color-accent-hover);
}

.button__play {
	margin-right: 9px;

	font-size: 9px;
}


/* Hero scroll */

.hero__scroll {
	position: absolute;
	z-index: 3;
	bottom: 26px;
	left: 50%;

	display: flex;
	align-items: center;
	flex-direction: column;

	color:
		rgba(255, 255, 255, 0.62);

	transform:
		translateX(-50%);

	font-size: 9px;
	font-weight: 700;

	letter-spacing: 0.2em;

	text-transform: uppercase;

	transition:
		color 150ms ease;
}

.hero__scroll:hover {
	color: #ffffff;
}

.hero__scroll-arrow {
	margin-top: 4px;

	font-size: 17px;
}


/* Shared section heading */

.section-kicker {
	margin: 0;

	color: var(--color-accent);

	font-size: 11px;
	font-weight: 700;

	letter-spacing: 0.18em;

	text-transform: uppercase;
}


/* Game introduction */

.game-intro {
	padding:
		clamp(100px, 10vw, 170px)
		0
		clamp(110px, 12vw, 190px);

	background:
		var(--color-background-light);

	color:
		var(--color-text-dark);
}

.game-intro__header {
	display: grid;

	grid-template-columns:
		minmax(0, 1.4fr)
		minmax(280px, 0.6fr);

	align-items: end;

	gap:
		clamp(40px, 6vw, 100px);

	margin-bottom:
		clamp(65px, 8vw, 115px);
}

.game-intro__header .section-kicker {
	grid-column: 1 / -1;

	margin-bottom: -22px;
}

.game-intro__header h2 {
	margin: 0;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(48px, 6vw, 88px);

	font-weight: 400;

	letter-spacing: -0.045em;

	line-height: 0.98;
}

.game-intro__lead {
	max-width: 440px;

	margin:
		0
		0
		8px;

	color:
		rgba(36, 33, 28, 0.72);

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(17px, 1.35vw, 21px);

	line-height: 1.65;
}


/* Game pillars */

.game-pillars {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap:
		clamp(20px, 2.2vw, 38px);
}

.game-pillar {
	position: relative;

	min-width: 0;
}

.game-pillar__image {
	position: relative;

	aspect-ratio: 16 / 10;

	overflow: hidden;

	border:
		1px solid rgba(36, 33, 28, 0.22);

	background: #26231e;
}

.game-pillar__image::after {
	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			0deg,
			rgba(15, 13, 10, 0.28) 0%,
			transparent 50%
		);

	content: "";

	pointer-events: none;
}

.game-pillar__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 500ms ease;
}

.game-pillar:hover .game-pillar__image img {
	transform:
		scale(1.025);
}

.game-pillar__number {
	position: absolute;
	z-index: 2;
	right: 14px;
	bottom: 8px;

	color:
		rgba(255, 255, 255, 0.72);

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size: 26px;
	font-weight: 400;
}

.game-pillar__content {
	padding:
		25px
		2px
		0;
}

.game-pillar h3 {
	margin:
		0
		0
		14px;

	color:
		var(--color-accent);

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 11px;
	font-weight: 700;

	letter-spacing: 0.18em;

	line-height: 1.4;

	text-transform: uppercase;
}

.game-pillar__content > p {
	max-width: 400px;

	margin: 0;

	color:
		rgba(36, 33, 28, 0.72);

	font-size: 15px;

	line-height: 1.65;
}


/* Trailer */

.trailer-section {
	padding:
		clamp(100px, 10vw, 170px)
		0
		clamp(90px, 9vw, 150px);

	background: #171511;

	color: var(--color-text);
}

.trailer-section__header {
	display: grid;

	grid-template-columns:
		minmax(0, 1.35fr)
		minmax(280px, 0.65fr);

	align-items: end;

	gap:
		clamp(40px, 6vw, 100px);

	margin-bottom:
		clamp(50px, 6vw, 80px);
}

.trailer-section__header h2 {
	margin:
		12px
		0
		0;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(48px, 6vw, 84px);

	font-weight: 400;

	letter-spacing: -0.045em;

	line-height: 0.98;
}

.trailer-section__lead {
	max-width: 420px;

	margin:
		0
		0
		7px;

	color:
		var(--color-text-muted);

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(17px, 1.3vw, 20px);

	line-height: 1.65;
}

.trailer-player {
	position: relative;

	aspect-ratio: 16 / 9;

	overflow: hidden;

	border:
		1px solid rgba(255, 255, 255, 0.16);

	background: #080706;

	cursor: pointer;
}

.trailer-player__image {
	position: absolute;

	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 700ms ease,
		filter 500ms ease;
}

.trailer-player:hover .trailer-player__image {
	transform:
		scale(1.012);

	filter:
		brightness(1.04);
}

.trailer-player__shade {
	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.72) 0%,
			rgba(0, 0, 0, 0.12) 40%,
			rgba(0, 0, 0, 0.12) 65%,
			rgba(0, 0, 0, 0.34) 100%
		);
}

.trailer-player__button {
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;

	display: flex;
	align-items: center;

	gap: 18px;

	padding: 0;

	border: 0;

	background: transparent;
	color: #ffffff;

	cursor: pointer;

	transform:
		translate(-50%, -50%);
}

.trailer-player__play-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 82px;
	height: 82px;

	border:
		1px solid rgba(255, 255, 255, 0.72);

	background:
		rgba(15, 13, 10, 0.58);

	font-size: 20px;

	transition:
		background 180ms ease,
		border-color 180ms ease,
		transform 180ms ease;
}

.trailer-player:hover .trailer-player__play-icon {
	border-color: #ffffff;

	background:
		var(--color-accent);

	transform:
		scale(1.04);
}

.trailer-player__button-text {
	font-size: 11px;
	font-weight: 700;

	letter-spacing: 0.18em;

	text-transform: uppercase;

	text-shadow:
		0 1px 3px rgba(0, 0, 0, 0.8);
}

.trailer-player__caption {
	position: absolute;
	z-index: 2;
	right: 28px;
	bottom: 24px;
	left: 28px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 30px;

	color:
		rgba(255, 255, 255, 0.74);

	font-size: 10px;
	font-weight: 700;

	letter-spacing: 0.15em;

	text-transform: uppercase;
}

.trailer-player iframe {
	position: absolute;
	z-index: 5;

	inset: 0;

	width: 100%;
	height: 100%;

	border: 0;
}

.trailer-section__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 30px;

	margin-top: 25px;

	color:
		var(--color-text-muted);

	font-size: 13px;
}

.trailer-section__footer p {
	margin: 0;
}

.text-link {
	position: relative;

	flex-shrink: 0;

	color:
		var(--color-text);

	font-size: 11px;
	font-weight: 700;

	letter-spacing: 0.12em;

	text-transform: uppercase;
}

.text-link::after {
	position: absolute;
	right: 0;
	bottom: -5px;
	left: 0;

	height: 1px;

	background:
		var(--color-accent);

	content: "";

	transform:
		scaleX(0);

	transform-origin: right;

	transition:
		transform 180ms ease;
}

.text-link:hover::after {
	transform:
		scaleX(1);

	transform-origin: left;
}


/* Campaign map vision */

.campaign-vision {
	padding:
		clamp(110px, 11vw, 180px)
		0
		clamp(80px, 8vw, 125px);

	background:
		radial-gradient(
			circle at 82% 16%,
			rgba(124, 39, 34, 0.18),
			transparent 32%
		),
		#11100e;

	color: var(--color-text);
}

.campaign-vision__header {
	display: grid;

	grid-template-columns:
		minmax(0, 1.2fr)
		minmax(300px, 0.8fr);

	align-items: end;

	gap:
		clamp(50px, 8vw, 120px);

	margin-bottom:
		clamp(70px, 8vw, 110px);
}

.campaign-vision__header .section-kicker {
	grid-column: 1 / -1;
}

.campaign-vision__header h2 {
	margin:
		14px
		0
		0;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(58px, 7vw, 104px);

	font-weight: 400;

	letter-spacing: -0.055em;

	line-height: 0.92;
}

.campaign-vision__lead {
	max-width: 440px;

	margin: 0;

	color:
		var(--color-text-muted);

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(18px, 1.5vw, 22px);

	line-height: 1.6;
}


/* Campaign vision text */

.campaign-vision__content {
	columns: 2;

	column-gap:
		clamp(55px, 7vw, 110px);
}

.campaign-vision__content p {
	break-inside: avoid;

	margin:
		0
		0
		26px;

	color:
		rgba(236, 232, 223, 0.74);

	font-size:
		clamp(15px, 1.05vw, 17px);

	line-height: 1.75;
}

.campaign-vision__content p:first-child {
	column-span: all;

	max-width: 900px;

	margin:
		0
		0
		clamp(45px, 5vw, 70px);

	color:
		var(--color-text);

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(21px, 1.8vw, 28px);

	line-height: 1.55;
}

.campaign-vision__content .campaign-vision__statement {
	column-span: all;

	max-width: 980px;

	margin:
		clamp(45px, 5vw, 70px)
		0
		0;

	color:
		var(--color-text);

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(25px, 2.5vw, 38px);

	letter-spacing: -0.025em;

	line-height: 1.4;
}


/* Campaign Discord CTA */

.campaign-vision__discord {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap:
		clamp(40px, 7vw, 100px);

	margin-top:
		clamp(65px, 7vw, 95px);

	padding-top:
		clamp(35px, 4vw, 48px);

	border-top:
		1px solid rgba(236, 232, 223, 0.18);
}

.campaign-vision__discord-text {
	max-width: 760px;
}

.campaign-vision__discord-text .section-kicker {
	margin-bottom: 13px;
}

.campaign-vision__discord-text > p:last-child {
	margin: 0;

	color:
		var(--color-text-muted);

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(18px, 1.45vw, 22px);

	line-height: 1.6;
}

.campaign-vision__discord .button {
	flex-shrink: 0;

	width: auto;
}


/* Patreon support */

.support-section {
	position: relative;

	overflow: hidden;

	padding:
		clamp(110px, 11vw, 180px)
		0;

	background: #211c17;

	color: var(--color-text);
}

.support-section__background {
	position: absolute;

	inset: 0;

	background:
		radial-gradient(
			circle at 82% 45%,
			rgba(156, 51, 45, 0.20),
			transparent 34%
		),
		linear-gradient(
			120deg,
			rgba(255, 255, 255, 0.025),
			transparent 42%
		);

	pointer-events: none;
}

.support-section__inner {
	position: relative;
	z-index: 2;

	display: grid;

	grid-template-columns:
		minmax(0, 1.05fr)
		minmax(330px, 0.75fr);

	align-items: start;

	gap:
		clamp(60px, 9vw, 150px);
}

.support-section__heading h2 {
	max-width: 760px;

	margin:
		12px
		0
		0;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(50px, 6.5vw, 92px);

	font-weight: 400;

	letter-spacing: -0.045em;

	line-height: 0.98;
}

.support-section__content {
	max-width: 520px;

	padding-top: 29px;
}

.support-section__content > p {
	margin:
		0
		0
		20px;

	color:
		var(--color-text-muted);

	font-size: 15px;

	line-height: 1.75;
}

.support-section__lead {
	color:
		var(--color-text) !important;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(18px, 1.4vw, 22px) !important;

	line-height:
		1.65 !important;
}

.support-section__note {
	margin-top:
		22px !important;

	color:
		rgba(184, 177, 165, 0.68) !important;

	font-size:
		12px !important;

	line-height:
		1.6 !important;
}


/* Previous releases */

.previous-games {
	padding:
		clamp(110px, 11vw, 180px)
		0
		clamp(120px, 12vw, 190px);

	background: #d8d1c4;

	color:
		var(--color-text-dark);
}

.previous-games__header {
	display: grid;

	grid-template-columns:
		minmax(0, 1.3fr)
		minmax(280px, 0.7fr);

	align-items: end;

	gap:
		clamp(40px, 7vw, 110px);

	margin-bottom:
		clamp(65px, 7vw, 100px);
}

.previous-games__header .section-kicker {
	grid-column: 1 / -1;

	margin-bottom: -20px;
}

.previous-games__header h2 {
	margin: 0;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(50px, 6vw, 86px);

	font-weight: 400;

	letter-spacing: -0.045em;

	line-height: 0.98;
}

.previous-games__lead {
	max-width: 420px;

	margin:
		0
		0
		8px;

	color:
		rgba(36, 33, 28, 0.68);

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(17px, 1.3vw, 20px);

	line-height: 1.65;
}

.previous-games__grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap:
		clamp(40px, 5vw, 80px);
}

.steam-game {
	min-width: 0;

	padding-top: 28px;

	border-top:
		1px solid rgba(36, 33, 28, 0.24);
}

.steam-game__heading {
	margin-bottom: 28px;
}

.steam-game__meta {
	margin:
		0
		0
		13px;

	color:
		var(--color-accent);

	font-size: 10px;
	font-weight: 700;

	letter-spacing: 0.17em;

	text-transform: uppercase;
}

.steam-game h3 {
	margin: 0;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(32px, 3vw, 48px);

	font-weight: 400;

	letter-spacing: -0.035em;

	line-height: 1.02;
}

.steam-game__gallery {
	display: grid;

	grid-template-columns:
		minmax(0, 2fr)
		minmax(0, 1fr);

	grid-template-rows:
		repeat(2, minmax(0, 1fr));

	gap: 8px;

	aspect-ratio: 16 / 8;

	overflow: hidden;

	background: #1b1915;
}

.steam-game__gallery-main {
	grid-row: 1 / 3;
}

.steam-game__gallery-main,
.steam-game__gallery-small {
	position: relative;

	min-width: 0;
	min-height: 0;

	overflow: hidden;

	background: #1b1915;
}

.steam-game__gallery img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 500ms ease,
		filter 500ms ease;
}

.steam-game__gallery-main:hover img,
.steam-game__gallery-small:hover img {
	transform:
		scale(1.025);

	filter:
		brightness(1.04);
}


/* Steam widgets */

.steam-widget {
	width: 100%;

	margin-top: 12px;

	overflow: hidden;

	background: #171a21;

	box-shadow:
		0 14px 35px rgba(35, 29, 22, 0.10);
}

.steam-widget iframe {
	display: block;

	width: 100%;
	height: 190px;

	border: 0;
}


/* Footer */

.site-footer {
	padding:
		50px
		0;

	border-top:
		1px solid var(--color-border);

	background: #0c0b09;
}

.site-footer__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 40px;
}

.site-footer__brand strong {
	font-family:
		Georgia,
		"Times New Roman",
		serif;

	letter-spacing: 0.12em;
}

.site-footer__brand p {
	margin:
		8px
		0
		0;

	color:
		var(--color-text-muted);

	font-size: 13px;
}

.site-footer__links {
	display: flex;
	flex-wrap: wrap;

	gap: 24px;

	color:
		var(--color-text-muted);

	font-size: 12px;
	font-weight: 700;

	letter-spacing: 0.06em;

	text-transform: uppercase;
}

.site-footer__links a {
	transition:
		color 150ms ease;
}

.site-footer__links a:hover {
	color: #ffffff;
}


/* Tablet and mobile */

@media (max-width: 1200px) {
	:root {
		--header-height: 70px;
	}

	.site-logo img {
		height: 34px;
	}

	.menu-toggle {
		position: relative;
		z-index: 103;

		display: block;
	}

	.menu-toggle.is-active span:nth-child(1) {
		transform:
			translateY(7px)
			rotate(45deg);
	}

	.menu-toggle.is-active span:nth-child(2) {
		opacity: 0;
	}

	.menu-toggle.is-active span:nth-child(3) {
		transform:
			translateY(-7px)
			rotate(-45deg);
	}


	/* Mobile navigation */

	.main-navigation {
		position: fixed;
		z-index: 101;

		inset: 0;

		display: flex;
		align-items: stretch;
		justify-content: center;
		flex-direction: column;

		gap: 0;

		padding:
			100px
			var(--site-padding)
			40px;

		overflow-y: auto;

		background:
			linear-gradient(
				90deg,
				rgba(12, 11, 9, 0.96) 0%,
				rgba(12, 11, 9, 0.91) 55%,
				rgba(12, 11, 9, 0.82) 100%
			),
			linear-gradient(
				0deg,
				rgba(12, 11, 9, 0.94),
				rgba(12, 11, 9, 0.68)
			),
			url("/assets/images/europae-invicta/hero.jpg");

		background-position:
			center center;

		background-size:
			cover;

		opacity: 0;
		visibility: hidden;

		transform:
			translateY(-10px);

		transition:
			opacity 180ms ease,
			transform 180ms ease,
			visibility 180ms ease;

		font-family:
			Georgia,
			"Times New Roman",
			serif;

		font-size: 26px;
		font-weight: 400;

		letter-spacing: 0;

		text-transform: none;
	}

	.main-navigation.is-open {
		opacity: 1;
		visibility: visible;

		transform:
			translateY(0);
	}

	.main-navigation > a {
		padding:
			14px
			0;

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

	.main-navigation__featured-game {
		color: #ffffff;

		font-size:
			clamp(27px, 5vw, 36px);

		line-height: 1.15;
	}

	.navigation-dropdown {
		padding:
			18px
			0
			13px;

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

	.navigation-dropdown__button {
		width: 100%;

		padding:
			0
			0
			7px;

		color:
			var(--color-accent);

		cursor: default;

		font-family:
			Arial,
			Helvetica,
			sans-serif;

		font-size: 10px;
		font-weight: 700;

		letter-spacing: 0.18em;

		text-transform: uppercase;
	}

	.navigation-dropdown__button span {
		display: none;
	}

	.navigation-dropdown__menu {
		position: static;

		display: flex;

		width: auto;

		padding: 0;

		border: 0;

		background: transparent;

		box-shadow: none;

		opacity: 1;
		visibility: visible;

		transform: none;
	}

	.navigation-dropdown__menu a {
		padding:
			7px
			0;

		background: transparent;

		color:
			rgba(236, 232, 223, 0.76);

		font-family:
			Georgia,
			"Times New Roman",
			serif;

		font-size: 20px;
		font-weight: 400;

		letter-spacing: 0;

		text-transform: none;
	}

	.navigation-dropdown__menu a:hover {
		background: transparent;

		color: #ffffff;
	}

	.navigation-dropdown__current-game {
		display: none;
	}

	.main-navigation__wishlist,
	.main-navigation__support {
		margin-top: 14px;

		padding:
			13px
			15px !important;

		border-bottom: 0 !important;

		font-family:
			Arial,
			Helvetica,
			sans-serif;

		font-size: 11px;
		font-weight: 700;

		letter-spacing: 0.1em;

		text-align: center;
		text-transform: uppercase;
	}

	.main-navigation__wishlist {
		border:
			1px solid var(--color-accent) !important;

		background:
			var(--color-accent);

		color: #ffffff;
	}

	.main-navigation__wishlist:hover {
		border-color:
			var(--color-accent-hover) !important;

		background:
			var(--color-accent-hover);

		color: #ffffff;
	}

	.main-navigation__support {
		border:
			1px solid rgba(255, 255, 255, 0.55) !important;

		background:
			rgba(0, 0, 0, 0.10);

		color: #ffffff;
	}

	.main-navigation__support:hover {
		border-color: #ffffff;

		background:
			rgba(255, 255, 255, 0.08);

		color: #ffffff;
	}


	/* Hero */

	.hero {
		align-items: flex-end;

		min-height: 100svh;
	}

	.hero__background {
		background-position:
			62% center;
	}

	.hero__overlay {
		background:
			linear-gradient(
				0deg,
				rgba(11, 10, 8, 0.99) 0%,
				rgba(11, 10, 8, 0.91) 34%,
				rgba(11, 10, 8, 0.52) 63%,
				rgba(11, 10, 8, 0.14) 100%
			);
	}

	.hero__content {
		padding-top: 160px;
		padding-bottom: 90px;
	}

	.hero__text {
		max-width: 600px;
	}

	.hero__title img {
		width:
			min(100%, 500px);
	}

	.hero__description {
		max-width: 540px;

		margin-top: 27px;

		font-size: 16px;

		line-height: 1.55;
	}

	.hero__actions {
		align-items: stretch;
		flex-direction: column;

		margin-top: 30px;
	}

	.button {
		width: 100%;
	}

	.hero__scroll {
		display: none;
	}


	/* Main sections */

	.game-intro__header,
	.trailer-section__header,
	.campaign-vision__header,
	.support-section__inner,
	.previous-games__header {
		grid-template-columns: 1fr;

		gap: 28px;
	}

	.game-intro__header,
	.previous-games__header {
		margin-bottom: 65px;
	}

	.game-intro__header .section-kicker,
	.previous-games__header .section-kicker {
		margin-bottom: -5px;
	}

	.game-intro__lead,
	.trailer-section__lead,
	.campaign-vision__lead,
	.support-section__content,
	.previous-games__lead {
		max-width: 620px;
	}

	.game-pillars {
		grid-template-columns: 1fr;

		gap: 65px;
	}

	.game-pillar__image {
		aspect-ratio: 16 / 9;
	}

	.game-pillar__content > p {
		max-width: 620px;
	}


	/* Campaign vision */

	.campaign-vision__content {
		columns: 2;

		column-gap: 50px;
	}


	/* Support */

	.support-section__content {
		padding-top: 8px;
	}


	/* Previous releases */

	.previous-games__grid {
		grid-template-columns: 1fr;

		gap: 75px;
	}

	.steam-game__gallery {
		aspect-ratio: 16 / 7;
	}


	/* Footer */

	.site-footer__inner {
		flex-direction: column;
	}
}


/* Campaign vision */

@media (max-width: 850px) {
	.campaign-vision__content {
		columns: 1;
	}

	.campaign-vision__content p:first-child {
		margin-bottom: 35px;
	}

	.campaign-vision__discord {
		align-items: flex-start;
		flex-direction: column;

		gap: 25px;
	}

	.campaign-vision__discord .button {
		width: 100%;
	}
}


/* Small mobile */

@media (max-width: 500px) {
	:root {
		--site-padding: 20px;
	}

	.site-logo img {
		height: 29px;
	}

	.main-navigation {
		padding:
			88px
			20px
			28px;
	}

	.main-navigation__featured-game {
		font-size: 25px;
	}

	.navigation-dropdown__menu a {
		font-size: 18px;
	}


	/* Hero */

	.hero__title img {
		width:
			min(100%, 420px);
	}

	.hero__description {
		margin-top: 23px;

		font-size: 15px;
	}


	/* Sections */

	.game-intro,
	.trailer-section,
	.campaign-vision,
	.support-section,
	.previous-games {
		padding:
			85px
			0
			90px;
	}

	.game-intro__header {
		margin-bottom: 55px;
	}

	.game-intro__header h2,
	.trailer-section__header h2,
	.campaign-vision__header h2,
	.support-section__heading h2,
	.previous-games__header h2 {
		font-size:
			clamp(42px, 13vw, 58px);
	}

	.game-pillars {
		gap: 58px;
	}

	.game-pillar__content {
		padding-top: 22px;
	}

	.game-pillar h3 {
		font-size: 10px;
	}


	/* Trailer */

	.trailer-section__header {
		margin-bottom: 40px;
	}

	.trailer-player__play-icon {
		width: 62px;
		height: 62px;

		font-size: 16px;
	}

	.trailer-player__button {
		flex-direction: column;

		gap: 10px;
	}

	.trailer-player__button-text {
		font-size: 9px;
	}

	.trailer-player__caption {
		right: 15px;
		bottom: 12px;
		left: 15px;

		font-size: 8px;
	}

	.trailer-player__caption span:last-child {
		display: none;
	}

	.trailer-section__footer {
		align-items: flex-start;
		flex-direction: column;
	}


	/* Campaign vision */

	.campaign-vision__header {
		margin-bottom: 60px;
	}

	.campaign-vision__lead {
		font-size: 17px;
	}

	.campaign-vision__content p {
		font-size: 15px;

		line-height: 1.7;
	}

	.campaign-vision__content p:first-child {
		font-size: 20px;
	}

	.campaign-vision__content .campaign-vision__statement {
		font-size: 25px;
	}

	.campaign-vision__discord {
		margin-top: 60px;

		padding-top: 40px;
	}

	.campaign-vision__discord-text > p:last-child {
		font-size: 17px;
	}


	/* Support */

	.support-section__content {
		padding-top: 0;
	}


	/* Previous releases */

	.previous-games__grid {
		gap: 65px;
	}

	.steam-game__gallery {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		grid-template-rows: auto;

		aspect-ratio: auto;

		background: transparent;
	}

	.steam-game__gallery-main {
		grid-column: 1 / -1;
		grid-row: auto;

		aspect-ratio: 16 / 9;
	}

	.steam-game__gallery-small {
		aspect-ratio: 16 / 9;
	}

	.steam-widget iframe {
		height: 190px;
	}


	/* Footer */

	.site-footer__links {
		flex-direction: column;

		gap: 12px;
	}
}