:root {
	--ink: #111827;
	--paper: #fff8e8;
	--white: #ffffff;
	--muted: #5f6673;
	--line: rgba(17, 24, 39, 0.12);
	--orange: #ff7a1a;
	--yellow: #ffd447;
	--accent: #f06a23;
	--accent-dark: #bd4318;
	color: var(--ink);
	font-family:
		Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background: linear-gradient(135deg, #fffaf0 0%, #f7efe2 48%, #eadfcd 100%);
	color: var(--ink);
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	display: block;
	max-width: 100%;
}

.top-wordmark,
.logo-title {
	font-family: "Lobster", cursive;
	font-weight: 400;
	letter-spacing: 0;
}

.top-wordmark {
	background: linear-gradient(110deg, var(--orange), var(--yellow), var(--orange));
	background-clip: text;
	background-size: 320% 320%;
	color: transparent;
	display: inline-block;
	font-size: 8rem;
	line-height: 1.25;
	padding: 0 0.08em 0.12em;
	position: relative;
	text-shadow: 0 16px 34px rgba(240, 106, 35, 0.16);
	z-index: 10;
	animation: wordmark-shift 8s ease-in-out infinite alternate;
}

@keyframes wordmark-shift {
	from {
		background-position: 0% 50%;
	}

	to {
		background-position: 100% 50%;
	}
}

.hero {
	align-items: center;
	background: linear-gradient(135deg, #fffaf0 0%, #f7efe2 48%, #eadfcd 100%);
	color: var(--ink);
	display: grid;
	justify-items: center;
	min-height: 100vh;
	overflow: hidden;
	position: relative;
	text-align: center;
}

.hero-scrim {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 248, 232, 0));
	inset: 0;
	position: absolute;
}

.hero-content {
	display: grid;
	gap: 0.45rem;
	justify-items: center;
	max-width: 680px;
	padding: 4rem 2rem;
	position: relative;
}

.center-message {
	color: #27170c;
	font-family: "Fraunces", Georgia, serif;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.05;
	margin: 0;
	text-shadow: 0 18px 44px rgba(189, 67, 24, 0.12);
}

.eyebrow {
	color: var(--accent-dark);
	font-size: 0.82rem;
	font-weight: 900;
	letter-spacing: 0;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.hero .eyebrow {
	color: #ffd98a;
}

h1,
p {
	margin-top: 0;
}

.logo-title {
	font-size: 6.5rem;
	line-height: 0.9;
	margin-bottom: 1rem;
}

.hero .logo-title {
	color: #fff7d1;
	text-shadow:
		0 3px 0 rgba(255, 122, 26, 0.18),
		0 18px 44px rgba(255, 122, 26, 0.22);
}

.hero-copy {
	color: rgba(255, 255, 255, 0.86);
	font-size: 1.3rem;
	margin-bottom: 1.7rem;
}

.button {
	background: linear-gradient(135deg, var(--orange), var(--yellow));
	border-radius: 999px;
	box-shadow: 0 14px 30px rgba(240, 106, 35, 0.22);
	color: #351705;
	display: inline-flex;
	font-weight: 850;
	min-height: 2.75rem;
	padding: 0.8rem 1rem;
}

.button:hover {
	box-shadow: 0 18px 34px rgba(240, 106, 35, 0.28);
	transform: translateY(-1px);
}

.button.dark {
	background: linear-gradient(135deg, var(--ink), #3c2a12);
	color: var(--white);
}

.button.dark:hover {
	background: #263244;
}

@media (max-width: 700px) {
	.top-wordmark {
		font-size: 5rem;
	}

	.center-message {
		font-size: 1.5rem;
	}

	.logo-title {
		font-size: 4.2rem;
	}

	.hero-content {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.top-wordmark {
		animation: none;
	}
}