.h2s-f1-site {
	--h2s-f1-red: #e10600;
	--h2s-f1-red-bright: #ff211b;
	--h2s-f1-red-deep: #a90400;
	--h2s-f1-bg: #050608;
	--h2s-f1-line: rgba(255, 255, 255, 0.12);
	min-height: 100vh;
	background:
		linear-gradient(180deg, rgba(3, 4, 6, 0.08), rgba(3, 4, 6, 0.64)),
		url("../images/f1-site-background.png") center top / cover fixed,
		var(--h2s-f1-bg);
	color: #f7f7f8;
}

.h2s-f1-shell {
	width: min(calc(100% - 40px), 1320px);
	margin-inline: auto;
}

.h2s-f1-header {
	position: sticky;
	z-index: 1000;
	top: 0;
	border-top: 3px solid var(--h2s-f1-red);
	background: rgba(5, 6, 8, 0.94);
	color: #fff;
	backdrop-filter: blur(20px);
	box-shadow: 0 18px 54px rgba(0, 0, 0, 0.44);
}

body.admin-bar .h2s-f1-header {
	top: 32px;
}

.h2s-f1-header__top {
	border-bottom: 1px solid rgba(255, 255, 255, 0.075);
	background: #08090c;
}

.h2s-f1-header__top-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 34px;
}

.h2s-f1-back,
.h2s-f1-header__contact,
.h2s-f1-header__contact a {
	display: flex;
	align-items: center;
}

.h2s-f1-back {
	gap: 8px;
	min-height: 34px;
	color: #aab0ba;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	transition: color 180ms ease;
}

.h2s-f1-back:hover {
	color: #fff;
}

.h2s-f1-back svg {
	width: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.h2s-f1-header__contact {
	gap: 8px;
}

.h2s-f1-header__contact a {
	min-height: 30px;
	justify-content: center;
	color: #c2c6cd;
	font-size: 10px;
	font-weight: 750;
}

.h2s-f1-header__contact a:first-child {
	margin-right: 8px;
}

.h2s-f1-header__contact a:not(:first-child) {
	width: 28px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.035);
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.h2s-f1-header__contact a:not(:first-child):hover {
	border-color: rgba(255, 33, 27, 0.75);
	background: var(--h2s-f1-red);
	color: #fff;
}

.h2s-f1-header__contact svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

.h2s-f1-league-top-profile {
	position: relative;
}

.h2s-f1-league-top-profile .h2s-profile-trigger {
	min-height: 30px;
	padding: 2px 8px 2px 3px;
}

.h2s-f1-league-top-profile .h2s-profile-trigger img {
	width: 26px;
	height: 26px;
}

.h2s-f1-league-top-login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 0 11px;
	border: 1px solid var(--h2s-f1-red);
	border-radius: 7px;
	background: var(--h2s-f1-red);
	color: #fff;
	font-size: 9px;
	font-weight: 900;
	text-transform: uppercase;
}

.h2s-f1-header__main {
	position: relative;
	isolation: isolate;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: linear-gradient(110deg, rgba(255, 255, 255, 0.025), transparent 38%), rgba(10, 12, 16, 0.96);
}

.h2s-f1-header__main::after {
	position: absolute;
	z-index: 0;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--h2s-f1-red), transparent);
	content: "";
	opacity: 0.72;
}

.h2s-f1-header__main-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 22px;
	min-height: 82px;
}

.h2s-f1-brand {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
	min-width: max-content;
	transform: skewX(-5deg);
}

.h2s-f1-brand img {
	width: 52px;
	height: 52px;
	object-fit: contain;
	filter: drop-shadow(0 0 15px rgba(225, 6, 0, 0.35));
	transform: scale(1.28);
}

.h2s-f1-brand > span,
.h2s-f1-footer__brand span {
	display: grid;
	line-height: 1;
}

.h2s-f1-brand strong,
.h2s-f1-footer__brand strong {
	font-family: var(--h2s-display);
	font-weight: 950;
	font-style: italic;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.h2s-f1-brand strong {
	font-size: 18px;
}

.h2s-f1-brand small,
.h2s-f1-footer__brand small {
	margin-top: 6px;
	color: var(--h2s-f1-red-bright);
	font-size: 9px;
	font-weight: 950;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.h2s-f1-nav {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 0;
}

.h2s-f1-nav > a,
.h2s-f1-nav-dropdown > summary,
.h2s-f1-login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: 8px;
	color: #d7dae0;
	font-family: var(--h2s-display);
	font-size: 11px;
	font-weight: 950;
	font-style: italic;
	letter-spacing: 0.03em;
	white-space: nowrap;
	text-transform: uppercase;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.h2s-f1-nav > a:hover,
.h2s-f1-nav > a:focus-visible,
.h2s-f1-nav > a.is-current,
.h2s-f1-nav-dropdown > summary:hover,
.h2s-f1-nav-dropdown > summary:focus-visible,
.h2s-f1-nav-dropdown.is-current > summary,
.h2s-f1-nav-dropdown[open] > summary {
	border-color: rgba(255, 255, 255, 0.14);
	background: linear-gradient(135deg, var(--h2s-f1-red-bright), var(--h2s-f1-red-deep));
	color: #fff;
	box-shadow: 0 10px 26px rgba(225, 6, 0, 0.24);
}

.h2s-f1-nav-dropdown {
	position: relative;
}

.h2s-f1-nav-dropdown[open] {
	z-index: 50;
}

.h2s-f1-nav-dropdown > summary {
	gap: 7px;
	cursor: pointer;
	list-style: none;
}

.h2s-f1-nav-dropdown > summary::-webkit-details-marker,
.h2s-f1-mobile-nav details summary::-webkit-details-marker {
	display: none;
}

.h2s-f1-nav-dropdown > summary svg {
	width: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	transition: transform 180ms ease;
}

.h2s-f1-nav-dropdown[open] > summary svg {
	transform: rotate(180deg);
}

.h2s-f1-nav-dropdown > div {
	position: absolute;
	z-index: 60;
	top: calc(100% + 10px);
	left: 50%;
	display: grid;
	width: 230px;
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-top: 2px solid var(--h2s-f1-red);
	border-radius: 12px;
	background: #050608;
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.82), 0 0 0 1px rgba(0, 0, 0, 0.7);
	transform: translateX(-50%);
}

.h2s-f1-nav-dropdown > div a {
	display: flex;
	align-items: center;
	min-height: 42px;
	padding: 0 12px;
	border-radius: 7px;
	color: #c9cdd5;
	font-size: 11px;
	font-weight: 800;
	transition: background 160ms ease, color 160ms ease, padding 160ms ease;
}

.h2s-f1-nav-dropdown > div a:hover,
.h2s-f1-nav-dropdown > div a.is-current,
.h2s-f1-nav-dropdown > div a:focus-visible {
	padding-left: 16px;
	background: var(--h2s-f1-red);
	color: #fff;
}

.h2s-f1-header__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
}

.h2s-f1-login {
	min-width: 92px;
	border-color: rgba(255, 255, 255, 0.16);
	background: linear-gradient(135deg, var(--h2s-f1-red-bright), var(--h2s-f1-red-deep));
	color: #fff;
	box-shadow: 0 12px 30px rgba(225, 6, 0, 0.25);
}

.h2s-f1-login:hover {
	border-color: rgba(255, 255, 255, 0.32);
	background: #fff;
	color: #111318;
}

.h2s-f1-header .h2s-profile-trigger img {
	border-color: var(--h2s-f1-red-bright);
}

.h2s-f1-header .h2s-profile-trigger:hover {
	border-color: rgba(255, 33, 27, 0.7);
}

.h2s-f1-menu-toggle {
	border-color: rgba(255, 255, 255, 0.16);
	background: #11141a;
}

.h2s-f1-stage {
	min-height: clamp(520px, 72vh, 900px);
	background: linear-gradient(90deg, rgba(5, 6, 8, 0.72), rgba(5, 6, 8, 0.2) 50%, rgba(5, 6, 8, 0.72));
}

.h2s-f1-mobile-nav {
	z-index: 999;
	top: 119px;
	background: linear-gradient(180deg, rgba(8, 10, 13, 0.98), rgba(4, 5, 7, 0.99));
}

.h2s-f1-mobile-nav > .h2s-f1-shell {
	display: grid;
	padding-block: 18px 48px;
}

.h2s-f1-mobile-nav a,
.h2s-f1-mobile-nav summary {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 62px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: #fff;
	font-family: var(--h2s-display);
	font-size: 22px;
	font-weight: 950;
	font-style: italic;
	text-transform: uppercase;
}

.h2s-f1-mobile-nav a span,
.h2s-f1-mobile-nav summary span {
	color: var(--h2s-f1-red-bright);
	font-family: var(--h2s-body);
	font-size: 9px;
	font-style: normal;
	letter-spacing: 0.12em;
}

.h2s-f1-mobile-nav details summary {
	position: relative;
	cursor: pointer;
	list-style: none;
}

.h2s-f1-mobile-nav details summary i {
	width: 8px;
	height: 8px;
	margin-right: 4px;
	margin-left: auto;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	transition: transform 180ms ease;
}

.h2s-f1-mobile-nav details[open] summary i {
	transform: rotate(225deg);
}

.h2s-f1-mobile-nav details > div {
	display: grid;
	padding: 6px 0 12px 30px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.h2s-f1-mobile-nav details > div a {
	min-height: 46px;
	border: 0;
	color: #b9bec8;
	font-family: var(--h2s-body);
	font-size: 13px;
	font-style: normal;
}

.h2s-f1-mobile-nav > .h2s-f1-shell > a.is-current,
.h2s-f1-mobile-nav > .h2s-f1-shell > details.is-current > summary {
	padding-inline: 12px;
	border-left: 3px solid var(--h2s-f1-red-bright);
	background: linear-gradient(90deg, rgba(225, 6, 0, 0.22), transparent);
}

.h2s-f1-mobile-nav details > div a.is-current {
	color: #fff;
	background: rgba(225, 6, 0, 0.22);
}

.h2s-f1-footer {
	border-top: 2px solid var(--h2s-f1-red);
	background: rgba(4, 5, 7, 0.97);
	color: #fff;
}

.h2s-f1-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: 118px;
}

.h2s-f1-footer__brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.h2s-f1-footer__brand img {
	width: 42px;
	height: 42px;
	object-fit: contain;
	transform: scale(1.25);
}

.h2s-f1-footer__brand small {
	margin-top: 5px;
	font-size: 8px;
}

.h2s-f1-footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: flex-end;
}

.h2s-f1-footer nav a {
	color: #aeb3bd;
	font-size: 10px;
	font-weight: 850;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: color 180ms ease;
}

.h2s-f1-footer nav a:hover {
	color: var(--h2s-f1-red-bright);
}

.h2s-f1-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	color: #727782;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.h2s-f1-header a:focus-visible,
.h2s-f1-header summary:focus-visible,
.h2s-f1-footer a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 1180px) {
	.h2s-f1-nav > a,
	.h2s-f1-nav-dropdown > summary {
		padding-inline: 8px;
		font-size: 10px;
	}

	.h2s-f1-brand > span {
		display: none;
	}
}

@media (max-width: 1020px) {
	.h2s-f1-nav {
		display: none;
	}

	.h2s-f1-header__main-inner {
		justify-content: space-between;
		min-height: 72px;
	}

	.h2s-f1-brand > span {
		display: grid;
	}

	.h2s-f1-menu-toggle {
		display: block;
	}

	.h2s-f1-header .h2s-profile-menu,
	.h2s-f1-header .h2s-f1-login {
		display: none;
	}

	.h2s-f1-header .h2s-f1-league-top-profile .h2s-profile-menu {
		display: block;
	}
}

@media (max-width: 782px) {
	body.admin-bar .h2s-f1-header {
		top: 46px;
	}

	body.admin-bar .h2s-f1-mobile-nav {
		top: 165px;
	}
}

@media (max-width: 600px) {
	.h2s-f1-shell {
		width: min(calc(100% - 24px), 1320px);
	}

	.h2s-f1-header__contact > a:first-child {
		display: none;
	}

	.h2s-f1-league-top-profile .h2s-profile-trigger span {
		display: none;
	}

	.h2s-f1-brand img {
		width: 46px;
		height: 46px;
	}

	.h2s-f1-brand strong {
		font-size: 15px;
	}

	.h2s-f1-brand small {
		font-size: 8px;
	}

	.h2s-f1-mobile-nav {
		top: 109px;
	}

	body.admin-bar .h2s-f1-mobile-nav {
		top: 155px;
	}

	.h2s-f1-footer__inner {
		align-items: flex-start;
		flex-direction: column;
		padding-block: 30px;
	}

	.h2s-f1-footer nav {
		gap: 12px 20px;
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.h2s-f1-site *,
	.h2s-f1-site *::before,
	.h2s-f1-site *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}
