/* Pine · usepine.dev. One black page: bitmap title, monospace everything else. */
:root {
	--bg: #0a0a09;
	--text: #ece7da;
	--muted: #9c998d;
	--dim: #66655c;
	--accent: #8dba98;
	--pine: #4f8d64;
	--pixel: 'Geist Pixel', 'Geist Mono', monospace;
	--mono: 'Geist Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	background: var(--bg);
	color: var(--text);
	font-family: var(--mono);
	-webkit-font-smoothing: antialiased;
}

body { overflow: hidden; }

#field {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
	position: relative;
	z-index: 1;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	max-width: 760px;
	padding: 48px 16px 96px clamp(16px, 9vw, 160px);
	pointer-events: none; /* let the mouse reach the field… */
}
.hero a { pointer-events: auto; } /* …except where you click */

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 40px;
}
.logo { width: 18px; height: 28px; fill: var(--pine); }

h1 {
	font-family: var(--pixel);
	font-weight: 400;
	font-size: clamp(44px, 8vw, 104px);
	line-height: 1;
	letter-spacing: -0.01em;
	margin: 0 0 28px;
}
h1 .accent { color: var(--accent); }

.copy {
	font-size: clamp(14px, 1.3vw, 17px);
	line-height: 1.65;
	color: var(--muted);
	max-width: 34em;
	margin: 0 0 36px;
}

/* ── Actions ──────────────────────────────────────────────────────────── */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
	display: inline-block;
	padding: 13px 20px;
	border: 1px solid rgba(236, 231, 218, 0.22);
	background: rgba(10, 10, 9, 0.75);
	color: var(--text);
	font: 600 14px var(--mono);
	text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--text); color: #141512; border-color: var(--text); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); color: #141512; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.hint {
	margin: 44px 0 0;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--dim);
}
.k-person { color: var(--text); }
.k-agent { color: var(--accent); }

footer {
	position: fixed;
	left: clamp(16px, 9vw, 160px);
	bottom: 28px;
	z-index: 1;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--dim);
	pointer-events: none;
}

@media (max-width: 560px) {
	.actions { flex-direction: column; width: 100%; }
	.btn { text-align: center; }
	.hint { display: none; }
}