/* ----------------------------------------------------------------------
   age-gate.css — full-screen modal (NO blur), corner-mark button, ledger composition
   JS controls display (display property not set here)
---------------------------------------------------------------------- */

.age-gate {
	position: fixed;
	inset: 0;
	background: var(--c-special);
	/* NO backdrop-filter blur — copperplate-ledger editorial */
	z-index: 9999;
	align-items: center;
	justify-content: center;
	padding: var(--s-24);
	overflow-y: auto;
	/* display controlled by JS */
}

.age-gate__card {
	position: relative;
	width: 100%;
	max-width: 460px;
	background: var(--c-surface);
	border-radius: var(--r-md);
	padding: var(--s-48) var(--s-40);
	padding-left: var(--s-48);
	text-align: left;
}

/* Left vertical rule (ledger-entry) */
.age-gate__card::before {
	content: '';
	position: absolute;
	top: var(--s-32);
	bottom: var(--s-32);
	left: var(--s-16);
	width: 3px;
	background: var(--c-accent);
}

.age-gate__wordmark {
	font-family: var(--f-heading);
	font-weight: 500;
	font-size: 1.5rem;
	color: var(--c-white);
	margin-bottom: var(--s-16);
}

.age-gate__rule-paired {
	height: 8px;
	background:
		linear-gradient(to bottom,
			var(--c-accent) 0 3px,
			transparent 3px 7px,
			var(--c-white) 7px 8px);
	margin: var(--s-16) 0 var(--s-24);
}

.age-gate__title {
	font-family: var(--f-heading);
	font-weight: 500;
	font-size: 1.5rem;
	color: var(--c-white);
	margin-bottom: var(--s-16);
}

.age-gate__body {
	font-family: var(--f-body);
	font-size: 1rem;
	color: var(--c-text);
	line-height: 1.65;
	margin-bottom: var(--s-32);
}

.age-gate__actions {
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
	margin-bottom: var(--s-24);
}
@media (min-width: 520px) {
	.age-gate__actions { flex-direction: row; }
	.age-gate__actions .btn { flex: 1 1 auto; }
}

.age-gate__notice {
	font-family: var(--f-mono);
	font-size: 0.75rem;
	color: var(--c-text-dim);
	letter-spacing: 0.3px;
	line-height: 1.65;
	border-top: 1px solid var(--c-border);
	padding-top: var(--s-16);
}
.age-gate__notice a { color: var(--c-accent-sec); }
.age-gate__notice a:hover { color: var(--c-white); }

/* Body lock while gate is visible */
body.kw-age-locked { overflow: hidden; }