:root {
	--page-bg: #f7f3ea;
	--panel-bg: rgba(255, 252, 245, 0.9);
	--text-main: #1f2933;
	--text-muted: #52606d;
	--accent: #c2410c;
	--accent-soft: rgba(194, 65, 12, 0.12);
	--border: rgba(82, 96, 109, 0.18);
	font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
	line-height: 1.5;
	color: var(--text-main);
	background:
		radial-gradient(circle at top, rgba(194, 65, 12, 0.18), transparent 35%),
		linear-gradient(180deg, #fcfaf5 0%, var(--page-bg) 100%);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 2rem;
	background: transparent;
}

main {
	width: min(100%, 42rem);
	padding: 3rem;
	border: 1px solid var(--border);
	border-radius: 24px;
	background: var(--panel-bg);
	box-shadow: 0 24px 80px rgba(31, 41, 51, 0.12);
	backdrop-filter: blur(10px);
	animation: rise 300ms ease-out;
}

h1 {
	margin: 0 0 1rem;
	font-size: clamp(2.5rem, 8vw, 4.5rem);
	line-height: 0.95;
	letter-spacing: -0.04em;
}

p {
	margin: 0;
	max-width: 34rem;
	font-size: 1.1rem;
	color: var(--text-muted);
}

.eyebrow {
	display: inline-flex;
	margin-bottom: 1rem;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

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

@media (max-width: 640px) {
	body {
		padding: 1rem;
	}

	main {
		padding: 2rem;
		border-radius: 20px;
	}

	p {
		font-size: 1rem;
	}
}