/* Temporary holding pages for radek.suski.io and staging.radek.suski.io (docs/DEPLOYMENT.md).
   Follows the suski.io login style: cream background, red and gold, white card with a gold top edge. */

:root {
	color-scheme: light;
	--bg: #f8f5ef;
	--text: #1f1a17;
	--muted: #6f655c;
	--red: #9b1c22;
	--red-dark: #74131a;
	--gold: #c9a227;
	--card: #ffffff;
	--line: #e9e0cf;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background:
		radial-gradient(circle at 15% 0%, rgba(201, 162, 39, .08), transparent 40%),
		radial-gradient(circle at 85% 100%, rgba(155, 28, 34, .06), transparent 45%),
		var(--bg);
	color: var(--text);
	font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.6;
}

main {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 16px;
}

.brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	max-width: 100%;
}

.brand h1 { min-width: 0; }

.brand img { width: 64px; height: 64px; }

.brand h1 {
	margin: 0;
	font-size: clamp(1.6rem, 5vw, 2.4rem);
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 26px 0 14px;
	color: var(--gold);
	font-size: .8rem;
}

.divider::before, .divider::after {
	content: "";
	width: 90px;
	height: 1px;
	background: var(--gold);
}

.tagline {
	margin: 0 0 36px;
	font-size: .78rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	text-align: center;
}

.card {
	width: min(100%, 560px);
	padding: 40px clamp(24px, 6vw, 48px) 44px;
	border: 1px solid var(--line);
	border-top: 3px solid var(--gold);
	border-radius: 16px;
	background: var(--card);
	box-shadow: 0 24px 60px rgba(60, 40, 20, .08);
	text-align: center;
}

.card h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 0 18px;
	font-size: 1.1rem;
	font-weight: 700;
}

.card h2::before, .card h2::after {
	content: "";
	width: 60px;
	height: 1px;
	background: var(--gold);
	opacity: .7;
}

.card p { margin: 0 0 12px; color: var(--muted); }
.card p:last-child { margin-bottom: 0; }

.badge {
	display: inline-block;
	margin-bottom: 18px;
	padding: 4px 14px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--red), var(--red-dark));
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 16px;
	border-top: 1px solid rgba(201, 162, 39, .45);
	font-size: .9rem;
}

footer img { width: 22px; height: 22px; }

a { color: var(--red); font-weight: 600; text-decoration: none; }
a:hover { color: var(--red-dark); text-decoration: underline; text-underline-offset: .18em; }

@media (max-width: 480px) {
	.brand { gap: 14px; }
	.brand img { width: 48px; height: 48px; }
	.divider::before, .divider::after { width: 60px; }
	.tagline { letter-spacing: .2em; }
}