:root {
	--navy: #1f2a44;
	--navy-deep: #16203a;
	--gold: #c9a24b;
	--gold-soft: #e6cf96;
	--cream: #faf7f0;
	--ink: #2b3245;
	--muted: #5c6478;
}

* {
	box-sizing: border-box;
}

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

body {
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	color: var(--ink);
	background: radial-gradient(
			1200px 600px at 50% -10%,
			#33415f 0%,
			transparent 60%
		),
		linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 20px;
}

.card {
	width: 100%;
	max-width: 560px;
	background: var(--cream);
	border-radius: 18px;
	padding: 56px 48px 40px;
	text-align: center;
	box-shadow:
		0 30px 60px rgba(0, 0, 0, 0.35),
		0 2px 0 rgba(255, 255, 255, 0.06) inset;
	animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cross-ring {
	width: 96px;
	height: 96px;
	margin: 0 auto 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #fdfbf5 0%, #f1e9d6 100%);
	border: 2px solid var(--gold);
	box-shadow: 0 10px 24px rgba(201, 162, 75, 0.25);
	animation: ring-glow 3s ease-in-out infinite;
}

.cross-ring svg {
	width: 40px;
	height: 40px;
	fill: var(--navy);
}

.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--gold);
	margin: 0 0 14px;
}

h1 {
	font-family: Georgia, "Times New Roman", "Noto Serif", serif;
	font-size: clamp(1.9rem, 4.5vw, 2.6rem);
	line-height: 1.15;
	font-weight: 600;
	color: var(--navy);
	margin: 0 0 18px;
}

.verse {
	font-family: Georgia, "Times New Roman", "Noto Serif", serif;
	font-style: italic;
	color: var(--muted);
	font-size: 1.02rem;
	line-height: 1.6;
	margin: 0 auto 10px;
	max-width: 42ch;
}

.verse-ref {
	display: block;
	margin-top: 6px;
	font-style: normal;
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold);
}

.divider {
	width: 64px;
	height: 2px;
	background: var(--gold-soft);
	margin: 28px auto;
	border-radius: 2px;
}

.details {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.chip {
	font-size: 0.85rem;
	color: var(--muted);
	background: #fff;
	border: 1px solid #e8e1cf;
	border-radius: 999px;
	padding: 8px 16px;
	white-space: nowrap;
}

.chip strong {
	color: var(--ink);
	font-weight: 600;
}

.footer {
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid #ece5d3;
	font-size: 0.8rem;
	color: #8a90a0;
	letter-spacing: 0.04em;
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ring-glow {
	0%,
	100% {
		box-shadow: 0 10px 24px rgba(201, 162, 75, 0.2);
	}
	50% {
		box-shadow: 0 10px 32px rgba(201, 162, 75, 0.45);
	}
}

@media (prefers-reduced-motion: reduce) {
	.card,
	.cross-ring {
		animation: none;
	}
}

@media (max-width: 480px) {
	.card {
		padding: 44px 26px 32px;
	}
}