:root {
	color-scheme: light;
	--bg-top: #f5f3ec;
	--bg-bottom: #dbe4e6;
	--halo: rgba(105, 130, 135, 0.18);
	--card: rgba(255, 255, 255, 0.68);
	--card-border: rgba(74, 90, 94, 0.14);
	--text: #1f2a2d;
	--link: #25464f;
	--link-hover: #173038;
}

* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	font-family:
		"Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
	color: var(--text);
	background:
		radial-gradient(circle at top, var(--halo), transparent 42%),
		linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

.shell {
	min-height: 100%;
	display: grid;
	place-items: center;
	padding: 2rem;
}

.card {
	width: min(100%, 34rem);
	padding: 2.5rem 2rem;
	border: 1px solid var(--card-border);
	border-radius: 24px;
	background: var(--card);
	backdrop-filter: blur(14px);
	box-shadow: 0 20px 60px rgba(52, 68, 72, 0.08);
	text-align: center;
}

.mark {
	margin: 0 0 1rem;
	font-size: clamp(3.2rem, 8vw, 4.8rem);
	line-height: 1;
	filter: drop-shadow(0 12px 24px rgba(31, 57, 66, 0.1));
}

.contact {
	color: var(--link);
	font-size: clamp(1.1rem, 2.5vw, 1.35rem);
	letter-spacing: 0.02em;
	text-decoration: none;
	border-bottom: 1px solid rgba(37, 70, 79, 0.25);
	padding-bottom: 0.2rem;
	transition:
		color 140ms ease,
		border-color 140ms ease;
}

.contact:hover,
.contact:focus-visible {
	color: var(--link-hover);
	border-color: currentColor;
}

.contact:focus-visible {
	outline: none;
}

@media (max-width: 640px) {
	.shell {
		padding: 1.25rem;
	}

	.card {
		padding: 2rem 1.5rem;
		border-radius: 20px;
	}
}