.hero {
	display: flex;
	align-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	justify-content: space-between;
	height: 100vh;
	height: 100svh;
	/* margin-bottom: 50vh; */
	/* margin-bottom: 50svh; */
	/* padding: 0; */
	padding-bottom: calc(0.725em + var(--margin-double));
	position: relative;
	z-index: 20;
	background-color: hsl(var(--hsl-dark-brown));
	color: hsl(var(--hsl-white))
}

.hero__logo {
	position: sticky;
	top: 0;
	z-index: 10;
}

.hero__scroll {
	position: absolute;
	bottom: var(--margin-double);
	left: var(--margin-double);
	font-family: "Suisse Intl Mono";
	line-height: 0.725;
	text-transform: uppercase;
}

.hero__flare {
	position: relative;
}

.hero__flare {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.hero__flare > canvas,
.hero__flare > noscript > video {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
}

.hero__flare > noscript > video {
	opacity: 0;
	animation: in 1s forwards;
}

.hero__taglines > :is(div, span) {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	transform: translate(-50%, -50%);
	font-family: "Suisse Intl Mono";
	text-transform: uppercase;
	white-space: nowrap;
	user-select: none;
}