/* Pakki Password — front-end password gate — pakki.work brand */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700;900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Victor+Mono:ital,wght@0,400;0,500;1,400&display=swap');

:root {
	--paper: #fffdf5;
	--ink: #171717;
	--jeans: #2b4e68;
	--tool: #d14e1a;
	--soft: #a89e86;

	--ink-body: color-mix(in oklch, var(--ink) 85%, transparent);
	--ink-secondary: color-mix(in oklch, var(--ink) 55%, transparent);
	--ink-rule: color-mix(in oklch, var(--ink) 28%, transparent);
	--ink-border-card: color-mix(in oklch, var(--ink) 12%, transparent);
	--ink-border-input: color-mix(in oklch, var(--ink) 20%, transparent);

	--panel: color-mix(in oklch, white 100%, transparent 25%);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: 'Inter', sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
	position: relative;
	overflow-x: hidden;
}

/* Subtle grid backdrop (Pakki paper-pencil motif) */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image:
		linear-gradient(color-mix(in oklch, var(--jeans) 8%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in oklch, var(--jeans) 8%, transparent) 1px, transparent 1px);
	background-size: 28px 28px;
	background-position: 0 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.6;
}

.pp-gate {
	position: relative;
	z-index: 1;
	width: min(440px, 100%);
	background: var(--panel);
	border: 1px solid var(--ink-border-card);
	border-radius: 4px;
	padding: 40px 36px 36px;
	box-shadow:
		0 2px 0 color-mix(in oklch, var(--ink) 6%, transparent),
		0 8px 32px color-mix(in oklch, var(--jeans) 14%, transparent);
}

.pp-gate__brand {
	font-family: 'Courier New', 'Courier', monospace;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jeans);
	margin-bottom: 22px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.pp-gate__brand::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	background: var(--tool);
	border-radius: 50%;
}

.pp-gate__eyebrow {
	font-family: 'Courier New', 'Courier', monospace;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-secondary);
	margin: 0 0 6px 0;
}

.pp-gate__title {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 2.1rem;
	line-height: 1.0;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 8px 0;
}

.pp-gate__title em {
	font-style: normal;
	color: var(--tool);
}

.pp-gate__lead {
	font-family: 'Inter', sans-serif;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--ink-body);
	margin: 0 0 24px 0;
}

.pp-gate__error {
	font-family: 'Inter', sans-serif;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--tool);
	background: color-mix(in oklch, var(--tool) 6%, transparent);
	border-left: 3px solid var(--tool);
	padding: 12px 14px;
	margin: 0 0 20px 0;
	border-radius: 0 3px 3px 0;
}

.pp-gate__field-label {
	display: block;
	font-family: 'Courier New', 'Courier', monospace;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jeans);
	margin: 0 0 8px 0;
}

.pp-gate__input {
	width: 100%;
	background: var(--paper);
	border: 1px solid var(--ink-border-input);
	color: var(--ink);
	font-family: 'Inter', sans-serif;
	font-size: 1.05rem;
	padding: 12px 14px;
	border-radius: 3px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.pp-gate__input:focus {
	border-color: var(--jeans);
	outline: none;
	box-shadow: 0 0 0 1px var(--jeans);
	background: var(--paper);
}

.pp-gate__input:disabled {
	background: color-mix(in oklch, var(--ink) 4%, transparent);
	color: var(--ink-secondary);
	cursor: not-allowed;
}

.pp-gate__submit {
	display: block;
	width: 100%;
	margin-top: 16px;
	padding: 14px 18px;
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--ink);
	border-radius: 3px;
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 0.92rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pp-gate__submit:hover:not(:disabled),
.pp-gate__submit:focus:not(:disabled) {
	background: var(--jeans);
	border-color: var(--jeans);
	outline: none;
}

.pp-gate__submit:disabled {
	background: transparent;
	color: var(--ink-secondary);
	border-color: var(--ink-border-card);
	cursor: not-allowed;
}

.pp-gate__footer {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--ink-border-card);
	font-family: 'Courier New', 'Courier', monospace;
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-secondary);
	text-align: center;
}

.pp-gate__footer a {
	color: var(--jeans);
	text-decoration: none;
}

.pp-gate__footer a:hover {
	color: var(--tool);
}

/* Reduced motion: kill grid animation, simpler shadow */
@media (prefers-reduced-motion: reduce) {
	.pp-gate {
		box-shadow: 0 1px 0 var(--ink-border-card);
	}
}

@media (max-width: 480px) {
	.pp-gate { padding: 28px 24px 24px; }
	.pp-gate__title { font-size: 1.7rem; }
}