:root {
	--active-void: #020304;
	--active-ink: #050608;
	--active-cream: #f6f2ea;
	--active-muted: #aaa59c;
	--active-gold: #caa35a;
	--active-gold-soft: #efd08a;
	--active-green: #32ff8f;
	--active-green-soft: #a8ffd0;
	--active-line: rgba(202, 163, 90, 0.34);
	--active-light-line: rgba(255, 255, 255, 0.1);
	--active-max: 1260px;
	--active-radius: 26px;
	--active-header-height: 74px;
	--active-mx: 50%;
	--active-my: 30%;
	color-scheme: dark;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--active-header-height) + 24px);
}

body {
	margin: 0;
	overflow-x: clip;
	background: var(--active-void);
}

/*
 * WordPress expresses full-width blocks with viewport units. On platforms
 * where the vertical scrollbar consumes layout width, that can create a
 * narrow horizontal scroll area. ACTIVE's page shells already occupy the
 * full site canvas, so percentage width preserves the intended edge-to-edge
 * design without extending beneath the scrollbar.
 */
.active-main.alignfull,
.active-main .alignfull,
.active-matrix-wp-header.alignfull,
.active-matrix-wp-footer.alignfull {
	width: 100%;
	max-width: none;
	margin-right: 0;
	margin-left: 0;
}

body.admin-bar {
	--active-admin-offset: 32px;
}

body,
button,
input,
select,
textarea {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

img {
	height: auto;
	max-width: 100%;
}

a {
	text-underline-offset: 0.2em;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	border-radius: 2px;
	outline: 2px solid var(--active-green-soft);
	outline-offset: 4px;
}

::selection {
	color: var(--active-void);
	background: var(--active-green-soft);
}

.active-skip-link {
	position: fixed;
	z-index: 100000;
	top: 12px;
	left: 12px;
	padding: 10px 14px;
	color: var(--active-void);
	background: var(--active-green-soft);
	font: 700 0.78rem/1.2 Consolas, "Courier New", monospace;
	transform: translateY(-160%);
}

.active-skip-link:focus {
	transform: translateY(0);
}

.active-main {
	min-height: 55vh;
}

.wp-site-blocks > .active-main,
.wp-site-blocks > .active-matrix-wp-footer {
	margin-block-start: 0 !important;
}

.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0 !important;
}

.active-main > .wp-block-post-content,
.active-main > .wp-block-post-content > :first-child {
	margin-top: 0;
}

.active-main > .wp-block-post-content,
.active-main > .wp-block-post-content > :last-child {
	margin-bottom: 0;
}

.active-home,
.active-journal,
.active-shop,
.active-rights {
	position: relative;
	isolation: isolate;
	width: 100vw;
	max-width: 100vw !important;
	margin-inline: calc(50% - 50vw) !important;
	overflow: hidden;
	color: var(--active-cream);
	background:
		radial-gradient(circle at 20% 15%, rgba(50, 255, 143, 0.055), transparent 30%),
		radial-gradient(circle at 85% 30%, rgba(202, 163, 90, 0.07), transparent 32%),
		linear-gradient(180deg, #020304, #07090c 48%, #0d0f13);
}

:is(.active-llc-page-fast.active-home, .active-blog-page, .active-shop-page.active-shop)
	:is(h1, h2, h3, h4, h5, h6, p) {
	text-wrap: pretty;
}

.active-home > *,
.active-journal > *,
.active-shop > *,
.active-rights > * {
	position: relative;
	z-index: 2;
}

.active-atmosphere {
	position: absolute !important;
	z-index: 0 !important;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.active-atmosphere::before {
	position: absolute;
	inset: 0;
	content: "";
	opacity: 0.24;
	background:
		repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, 0.018) 3px 4px),
		linear-gradient(90deg, transparent, rgba(50, 255, 143, 0.045), transparent);
	mix-blend-mode: screen;
}

.active-network {
	position: absolute;
	inset: -15%;
	opacity: 0.18;
	background:
		linear-gradient(rgba(50, 255, 143, 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(50, 255, 143, 0.12) 1px, transparent 1px);
	background-size: 76px 76px;
	transform: perspective(720px) rotateX(60deg) translateY(-8%);
	transform-origin: center top;
	animation: active-network-drift 16s linear infinite;
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%);
	mask-image: linear-gradient(to bottom, #000, transparent 80%);
}

.active-pointer-glow {
	position: fixed;
	inset: 0;
	opacity: 0;
	background: radial-gradient(360px circle at var(--active-mx) var(--active-my), rgba(202, 163, 90, 0.12), transparent 72%);
	transition: opacity 0.5s ease;
}

.active-js .active-pointer-glow {
	opacity: 1;
}

.active-matrix-code {
	position: absolute;
	top: -12%;
	right: 2%;
	width: min(34vw, 440px);
	color: rgba(50, 255, 143, 0.1);
	font: 600 clamp(1rem, 2.4vw, 2.3rem)/1.22 Consolas, "Courier New", monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	animation: active-code-fall 18s linear infinite;
}

.active-kicker,
.active-role,
.active-review-date {
	color: var(--active-gold-soft);
	font: 700 0.74rem/1.4 Consolas, "Courier New", monospace;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.active-kicker::before {
	display: inline-block;
	width: 40px;
	height: 1px;
	margin-right: 12px;
	vertical-align: middle;
	content: "";
	background: linear-gradient(90deg, transparent, currentColor);
}

.active-lead {
	max-width: 680px;
	color: rgba(246, 242, 234, 0.78);
	font-size: clamp(1rem, 1.35vw, 1.2rem);
	line-height: 1.78;
}

mark {
	padding: 0;
	color: var(--active-gold-soft);
	background: transparent;
}

.active-reveal {
	opacity: 1;
	transform: none;
}

.active-js .active-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.25, 1);
}

.active-js .active-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@keyframes active-network-drift {
	to { transform: perspective(720px) rotateX(60deg) translateY(68px); }
}

@keyframes active-code-fall {
	to { transform: translateY(44%); }
}

@media (max-width: 782px) {
	body.admin-bar {
		--active-admin-offset: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar {
		--active-admin-offset: 0px;
	}

	.active-pointer-glow {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.active-js .active-reveal {
		opacity: 1;
		transform: none;
	}
}