@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.ar-story-popup {
	--ar-black: #070707;
	--ar-white: #f4f1eb;
	--ar-muted: #aaa8a2;
	--ar-line: #2b2b2b;
	--ar-red: #ff2d24;
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	font-family: "IBM Plex Mono", monospace;
}

.ar-story-popup[hidden] {
	display: none;
}

.ar-story-popup-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 4, 4, .82);
}

.ar-story-popup-panel {
	width: min(420px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	position: relative;
	z-index: 1;
	padding: clamp(28px, 5vw, 40px);
	background: #0c0c0c;
	border: 1px solid var(--ar-line);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
	color: var(--ar-white);
}

.ar-story-popup-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 1px solid var(--ar-line);
	color: var(--ar-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.ar-story-popup-panel h3 {
	margin: 0 0 12px;
	padding-right: 30px;
	color: var(--ar-white);
	font: 800 clamp(24px, 4vw, 30px)/1.1 "Barlow Condensed", sans-serif;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

.ar-story-popup-msg {
	margin: 0 0 22px;
	color: var(--ar-muted);
	font-size: 12px;
	line-height: 1.7;
}

.ar-story-popup-error {
	margin-bottom: 16px;
	padding: 10px 12px;
	background: #1a0f0e;
	border: 1px solid var(--ar-red);
	color: #ffaaa5;
	font-size: 11px;
}

.ar-story-popup-error[hidden] {
	display: none;
}

.ar-story-popup-form {
	display: grid;
	gap: 15px;
}

.ar-story-popup-form label {
	display: grid;
	gap: 6px;
	color: var(--ar-red);
	font-size: 10px;
	letter-spacing: .08em;
}

.ar-story-popup-form label small {
	color: var(--ar-muted);
}

.ar-story-popup-form input[type="text"],
.ar-story-popup-form input[type="email"],
.ar-story-popup-form input[type="password"] {
	width: 100%;
	min-height: 46px;
	padding: 11px 12px;
	background: #060606;
	border: 1px solid #393939;
	color: var(--ar-white);
	font: 400 13px "IBM Plex Mono", monospace;
	box-sizing: border-box;
}

.ar-story-popup-check {
	display: flex !important;
	flex-direction: row;
	align-items: flex-start;
	gap: 9px;
	color: var(--ar-muted) !important;
	font-size: 11px;
	line-height: 1.5;
}

.ar-story-popup-check a {
	color: var(--ar-white);
}

.ar-story-popup-form input[type="checkbox"] {
	margin-top: 2px;
	accent-color: var(--ar-red);
}

.ar-story-popup-form button {
	min-height: 48px;
	padding: 13px 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--ar-red);
	border: 0;
	color: var(--ar-black);
	font: 600 11px "IBM Plex Mono", monospace;
	letter-spacing: .07em;
	cursor: pointer;
}

.ar-story-popup-form button:disabled {
	opacity: .6;
	cursor: default;
}