:root {
	--ink: #17251f;
	--muted: #6b776f;
	--paper: #f3f0e8;
	--lime: #c9f06a;
	--line: rgba(23, 37, 31, 0.14);
}

* {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	color: var(--ink);
	background:
		radial-gradient(circle at 18% 20%, rgba(201, 240, 106, 0.28), transparent 26rem),
		linear-gradient(135deg, #f7f5ef 0%, var(--paper) 55%, #e7ece2 100%);
	font-family: "Space Grotesk", sans-serif;
}

.coming-soon {
	position: relative;
	z-index: 1;
	display: flex;
	min-height: 100vh;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 48px 32px;
	text-align: center;
	animation: arrive 900ms ease both;
}

.mark {
	width: 18px;
	height: 18px;
	margin-bottom: 34px;
	background: var(--lime);
	border: 1px solid var(--ink);
	border-radius: 50%;
	box-shadow: 7px 7px 0 var(--ink);
}

.eyebrow,
.status {
	margin: 0;
	color: var(--muted);
	font-family: "DM Mono", monospace;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.eyebrow {
	margin-bottom: 18px;
}

h1 {
	max-width: 100%;
	margin: 0;
	font-size: clamp(2.5rem, 8vw, 7.5rem);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 0.95;
	overflow-wrap: anywhere;
}

.status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
}

.status::before {
	width: 6px;
	height: 6px;
	content: "";
	background: var(--lime);
	border: 1px solid var(--ink);
	border-radius: 50%;
}

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

@media (max-width: 600px) {
	.coming-soon {
		padding: 32px 28px;
	}

	.mark {
		margin-bottom: 28px;
	}
}