@font-face {
	font-family: 'PT Serif';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/pt-serif-italic-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Raleway';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url('assets/fonts/raleway-italic-300.woff2') format('woff2');
}

:root {
	color-scheme: dark;
	--ink: #f6f3ef;
	--ink-soft: rgba(246, 243, 239, 0.82);
	--scrim-top: rgba(18, 15, 13, 0.5);
	--scrim-bottom: rgba(12, 10, 9, 0.86);
	--panel-bg: #16130f;
}

* {
	box-sizing: border-box;
}

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

body {
	background: var(--panel-bg);
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
}

.hero {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.hero__photo,
.hero__panel {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.hero__photo {
	order: 2;
	flex: 0 0 auto;
	aspect-ratio: 4 / 3;
	background-image: url('assets/img/hero-lifestyle.jpg');
}

.hero__panel {
	order: 1;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--panel-bg);
	background-image: linear-gradient(180deg, var(--scrim-top), var(--scrim-bottom)), url('assets/img/hero-texture.jpg');
	padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 6vw, 3rem);
}

.hero__content {
	width: 100%;
	max-width: 34rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
}

.hero__logo {
	width: clamp(7rem, 20vw, 9.5rem);
	height: auto;
}

.hero__message {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.hero__headline {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	column-gap: 0.45em;
	line-height: 1.1;
	color: var(--ink);
}

.hero__headline-serif,
.hero__headline-sans {
	font-size: clamp(2rem, 3vw + 1.4rem, 3.75rem);
}

.hero__headline-serif {
	font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
}

.hero__headline-sans {
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
	font-style: italic;
	font-weight: 300;
}

.hero__subtext {
	margin: 0;
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1rem, 0.4vw + 0.9rem, 1.15rem);
	line-height: 1.55;
	color: var(--ink-soft);
}

.hero__divider {
	width: 100%;
	max-width: 12rem;
	border: none;
	border-top: 1px solid rgba(246, 243, 239, 0.28);
	margin: 0;
}

.hero__contact {
	margin: 0;
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
	font-weight: 300;
	font-size: clamp(0.9rem, 0.3vw + 0.85rem, 1rem);
	letter-spacing: 0.03em;
}

.hero__contact a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-color: rgba(246, 243, 239, 0.5);
}

.hero__contact a:hover {
	text-decoration-color: currentColor;
}

.hero__contact a:focus-visible {
	outline: 1px solid var(--ink);
	outline-offset: 0.25em;
}

@media (min-width: 56em) {
	.hero {
		flex-direction: row;
	}

	.hero__photo {
		order: 1;
		flex: 1 1 58%;
		aspect-ratio: auto;
		min-height: 100vh;
		min-height: 100dvh;
	}

	.hero__panel {
		order: 2;
		flex: 1 1 42%;
		min-height: 100vh;
		min-height: 100dvh;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.hero__content {
		animation: hero-fade-in 0.6s ease-out both;
	}
}

@keyframes hero-fade-in {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}

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