* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100%;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	background: #111;
	color: #fff;
}

.hero {
	position: relative;
	width: 100%;
	min-height: 100dvh;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;

	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.35) 0%,
		rgba(0, 0, 0, 0.08) 50%,
		rgba(0, 0, 0, 0) 75%
	);

	pointer-events: none;
}

.masthead {
	position: absolute;
	top: 4vw;
	left: 5vw;
	z-index: 1;

	font-size: clamp(3rem, 8vw, 8rem);
	font-weight: 700;
	line-height: 0.8;
	letter-spacing: -0.06em;

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

.masthead a,
.masthead a:link,
.masthead a:visited,
.masthead a:hover,
.masthead a:active {
    color: #fff;
    text-decoration: none;
}

.hero-content {
	position: absolute;
	left: 5vw;
	bottom: 14vh;
	z-index: 1;

	max-width: 700px;

	color: #fc0;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.65);
}

.hero-content h1 {
	margin: 0 0 0.4rem 0;

	font-size: clamp(2rem, 4vw, 4.5rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.03em;

	color: #fff;
}

.hero-content p {
	margin: 0.5rem 0;
	padding-left: 0.2rem;

	font-size: clamp(1rem, 1.5vw, 1.4rem);
}

.hero-content a {
	display: inline-block;

	color: #fc0;
	text-decoration: none;

	transition:
		transform 0.15s ease,
		text-shadow 0.15s ease;
}

.coming-soon {
	color: #fff;
	opacity: 0.85;
}

.site-footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;

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

	padding: 3rem 5vw 1.5rem;

	font-size: 0.8rem;
	letter-spacing: 0.04em;

	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.65) 20%,
		rgba(0, 0, 0, 0.35) 65%,
		rgba(0, 0, 0, 0) 100%
	);
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
}


/* Mobile layout */

@media (max-width: 700px) {

	.masthead {
		top: 2rem;
		left: 1.5rem;

		font-size: clamp(4rem, 22vw, 7rem);
	}

	.hero-content {
		left: 1.5rem;
		right: 1.5rem;
		bottom: 3rem;
	}

	.site-footer {
		padding: 1.25rem 1.5rem;
	}

	.hero::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;

		height: 10rem;

		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.65) 0%,
			rgba(0, 0, 0, 0.35) 55%,
			rgba(0, 0, 0, 0) 100%
		);

		pointer-events: none;
	}

	.hero-content,
	.site-footer {
		z-index: 2;
	}

}


/* Mouse / trackpad hover */

@media (hover: hover) and (pointer: fine) {

	.hero-content a:hover {
		transform: translateY(-2px) scale(1.08);
	}

}


/* Touch feedback */

@media (hover: none) {

	.hero-content a:active {
		transform: scale(1.08);
	}

}