/**
 * Mindivr Neural Constellation Visual Lab — page-scoped styles (Phase 2F.2.1).
 *
 * Loaded only on the experimental page template. Consumes --mindivr-* tokens
 * from main.css. The static atmosphere below is the WebGL/no-JS fallback: it
 * renders on its own, and the Three.js canvas is layered on top of it.
 *
 * Nothing here hides content while waiting for JavaScript. Scroll-scrubbed
 * motion is written as inline styles by the conductor, so a script failure
 * costs the animation and never the article.
 */

.mindivr-lab {
	--mindivr-lab-teal: var(--mindivr-accent);
	--mindivr-lab-violet: var(--mindivr-accent-topic);
	--mindivr-lab-gold: var(--mindivr-accent-warm);
	--mindivr-lab-void: #04090c;
	--mindivr-lab-panel: color-mix(in srgb, var(--mindivr-surface) 72%, transparent);
	--mindivr-lab-rail: clamp(1rem, 5vw, 4rem);
	--mindivr-lab-frame: 78rem;
	--mindivr-lab-carousel-height: min(74svh, 40rem);
	--mindivr-lab-carousel-fade: clamp(5rem, 12vw, 11rem);

	position: relative;
	isolation: isolate;
	color: var(--mindivr-text);
}

/* The lab owns the whole viewport backdrop, so the page shell goes dark too. */
body.mindivr-lab-page,
body.mindivr-lab-page .site-content {
	background-color: var(--mindivr-lab-void, #04090c);
}

/* --------------------------------------------------------------------------
   Persistent stage: static atmosphere + Three.js canvas host
   -------------------------------------------------------------------------- */

.mindivr-lab__stage {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: var(--mindivr-lab-void);
	background-image:
		radial-gradient(60% 45% at 18% 12%, color-mix(in srgb, var(--mindivr-lab-teal) 16%, transparent), transparent 70%),
		radial-gradient(55% 50% at 82% 30%, color-mix(in srgb, var(--mindivr-lab-violet) 18%, transparent), transparent 72%),
		radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--mindivr-lab-teal) 9%, transparent), transparent 76%),
		linear-gradient(180deg, var(--mindivr-lab-void), #06121a 55%, var(--mindivr-lab-void));
}

/* Grain + vignette sit above the canvas so the whole stage reads as one image. */
.mindivr-lab__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 50% 45%, transparent 42%, rgba(2, 6, 9, 0.55) 100%),
		repeating-linear-gradient(
			0deg,
			rgba(255, 255, 255, 0.014) 0,
			rgba(255, 255, 255, 0.014) 1px,
			transparent 1px,
			transparent 3px
		);
}

.mindivr-lab__stage canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: transparent;
	background-color: transparent;
}

/**
 * Static constellation + celestial hint for the no-WebGL / no-JS path. The
 * large soft disc on the right stands in for the Signal Moon so the fallback
 * still reads as a composed space, not an empty gradient.
 */
.mindivr-lab__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.6;
	background-image:
		radial-gradient(
			circle at 84% 22%,
			color-mix(in srgb, var(--mindivr-lab-teal) 20%, transparent) 0 6%,
			color-mix(in srgb, var(--mindivr-lab-void) 82%, transparent) 6.4% 13%,
			transparent 14%
		),
		radial-gradient(1.5px 1.5px at 12% 22%, color-mix(in srgb, var(--mindivr-lab-teal) 70%, transparent), transparent 100%),
		radial-gradient(1.5px 1.5px at 28% 64%, color-mix(in srgb, var(--mindivr-lab-teal) 55%, transparent), transparent 100%),
		radial-gradient(1.5px 1.5px at 44% 18%, color-mix(in srgb, var(--mindivr-lab-violet) 65%, transparent), transparent 100%),
		radial-gradient(2px 2px at 63% 48%, color-mix(in srgb, var(--mindivr-lab-gold) 55%, transparent), transparent 100%),
		radial-gradient(1.5px 1.5px at 78% 26%, color-mix(in srgb, var(--mindivr-lab-teal) 60%, transparent), transparent 100%),
		radial-gradient(1.5px 1.5px at 88% 72%, color-mix(in srgb, var(--mindivr-lab-violet) 50%, transparent), transparent 100%),
		radial-gradient(1.5px 1.5px at 34% 88%, color-mix(in srgb, var(--mindivr-lab-teal) 45%, transparent), transparent 100%),
		radial-gradient(1.5px 1.5px at 70% 90%, color-mix(in srgb, var(--mindivr-lab-teal) 40%, transparent), transparent 100%),
		radial-gradient(1.5px 1.5px at 20% 44%, color-mix(in srgb, var(--mindivr-lab-teal) 38%, transparent), transparent 100%),
		radial-gradient(1.5px 1.5px at 55% 74%, color-mix(in srgb, var(--mindivr-lab-violet) 38%, transparent), transparent 100%);
}

/* Once WebGL is live the CSS star hint would double up, so retire it. */
.mindivr-lab--webgl .mindivr-lab__stage::before {
	opacity: 0;
	transition: opacity calc(600ms * var(--mindivr-motion-scale)) var(--mindivr-ease-standard);
}

/* --------------------------------------------------------------------------
   Editorial flow
   -------------------------------------------------------------------------- */

.mindivr-lab__flow {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: calc(var(--mindivr-lab-frame) + var(--mindivr-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--mindivr-gutter);
	overflow-x: clip;
}

.mindivr-lab__section {
	position: relative;
	padding-block: clamp(3.5rem, 9vw, 7.5rem);
	background-color: transparent;
}

/**
 * Convergence guard for Featured only. Scale must not clip planet rings —
 * that clip rectangle reads as a hard-edged black panel through the scene.
 */
.mindivr-lab__featured {
	overflow-x: clip;
	overflow-y: visible;
}

/**
 * Localized atmospheric contrast.
 *
 * Copy sits on the WebGL world. Each text group gets a feathered elliptical
 * vignette that dies to transparency before the element's box, so no
 * rectangular panel edge can be seen. Horizontal bleed is clipped by the
 * editorial flow (`overflow-x: clip`), never by the stage.
 */
.mindivr-lab__signal::before,
.mindivr-lab__featured-panel::before,
.mindivr-lab__latest-intro::before {
	content: "";
	position: absolute;
	inset: -28% -22%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(
		ellipse at 42% 46%,
		rgb(2 13 18 / 0.32) 0%,
		rgb(2 13 18 / 0.12) 42%,
		transparent 70%
	);
}

.mindivr-lab__scale-copy::before,
.mindivr-lab__standards-intro::before {
	content: "";
	position: absolute;
	inset: -42% -38%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(
		ellipse at 38% 42%,
		rgb(2 13 18 / 0.28) 0%,
		rgb(2 13 18 / 0.1) 38%,
		transparent 66%
	);
}

.mindivr-lab__featured-panel,
.mindivr-lab__latest-intro,
.mindivr-lab__scale-copy,
.mindivr-lab__standards-intro {
	position: relative;
}

.mindivr-lab__eyebrow,
.mindivr-lab__kicker {
	margin: 0 0 var(--mindivr-space-3);
	color: var(--mindivr-lab-teal);
	font-family: var(--mindivr-font-sans);
	font-size: var(--mindivr-fs-00);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mindivr-lab__title {
	max-width: 18ch;
	margin: 0 0 var(--mindivr-space-5);
	font-family: var(--mindivr-font-display);
	font-size: var(--mindivr-fs-5);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: var(--mindivr-lh-tight);
	text-wrap: balance;
}

.mindivr-lab__title-emphasis {
	color: var(--mindivr-lab-teal);
	font-style: italic;
}

.mindivr-lab__deck,
.mindivr-lab__section-deck {
	max-width: 52ch;
	margin: 0 0 var(--mindivr-space-5);
	color: var(--mindivr-text-muted);
	font-size: var(--mindivr-fs-1);
	line-height: var(--mindivr-lh-body);
}

.mindivr-lab__section-heading {
	margin: 0 0 var(--mindivr-space-4);
	font-family: var(--mindivr-font-display);
	font-size: var(--mindivr-fs-3);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: var(--mindivr-lh-tight);
	text-shadow: 0 0 1.6rem rgb(2 13 18 / 0.7);
}

.mindivr-lab__actions {
	margin: var(--mindivr-space-5) 0 0;
}

.mindivr-lab__actions--hero {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mindivr-space-3) var(--mindivr-space-4);
	align-items: center;
}

.mindivr-lab__meta {
	margin: 0 0 var(--mindivr-space-2);
	color: var(--mindivr-text-muted);
	font-family: var(--mindivr-font-sans);
	font-size: var(--mindivr-fs-00);
	letter-spacing: 0.04em;
}

/* Motion elements are transformed by JS. Promote them, nothing more. */
[data-mindivr-lab-motion] {
	will-change: auto;
}

.mindivr-lab--motion-ready:not(.mindivr-lab--static) [data-mindivr-lab-motion] {
	will-change: transform, opacity;
}

/* Sound toggle -------------------------------------------------------- */

.mindivr-lab__sound {
	display: inline-flex;
	gap: var(--mindivr-space-2);
	align-items: center;
	padding: 0.5rem 0.95rem;
	border: var(--mindivr-border-width) solid color-mix(in srgb, var(--mindivr-lab-teal) 34%, var(--mindivr-border));
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--mindivr-surface) 60%, transparent);
	color: var(--mindivr-text-muted);
	font-family: var(--mindivr-font-sans);
	font-size: var(--mindivr-fs-00);
	letter-spacing: 0.06em;
	cursor: pointer;
	transition:
		border-color var(--mindivr-duration-2) var(--mindivr-ease-standard),
		color var(--mindivr-duration-2) var(--mindivr-ease-standard);
}

/* `display: inline-flex` above would otherwise win over the UA [hidden] rule. */
.mindivr-lab__sound[hidden] {
	display: none;
}

.mindivr-lab__sound:hover,
.mindivr-lab__sound:focus-visible {
	border-color: color-mix(in srgb, var(--mindivr-lab-teal) 62%, var(--mindivr-border));
	color: var(--mindivr-text);
}

.mindivr-lab__sound[aria-pressed="true"] {
	border-color: var(--mindivr-lab-teal);
	color: var(--mindivr-text);
}

.mindivr-lab__sound-wave {
	display: inline-flex;
	gap: 2px;
	align-items: center;
	height: 0.85rem;
}

.mindivr-lab__sound-wave span {
	display: block;
	width: 2px;
	height: 30%;
	border-radius: 1px;
	background-color: currentColor;
	transition: height var(--mindivr-duration-2) var(--mindivr-ease-standard);
}

.mindivr-lab__sound[aria-pressed="true"] .mindivr-lab__sound-wave span:nth-child(1) {
	height: 55%;
}

.mindivr-lab__sound[aria-pressed="true"] .mindivr-lab__sound-wave span:nth-child(2) {
	height: 100%;
}

.mindivr-lab__sound[aria-pressed="true"] .mindivr-lab__sound-wave span:nth-child(3) {
	height: 70%;
}

/* Hero ---------------------------------------------------------------- */

.mindivr-lab__signal {
	position: relative;
	min-height: min(86svh, 46rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Featured Deep Dive --------------------------------------------------- */

.mindivr-lab__featured-inner {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

.mindivr-lab__featured-media {
	position: relative;
	overflow: hidden;
	border: var(--mindivr-border-width) solid color-mix(in srgb, var(--mindivr-lab-teal) 24%, var(--mindivr-border));
	border-radius: var(--mindivr-radius);
	background-color: var(--mindivr-surface);
	transform-origin: 50% 50%;
}

.mindivr-lab__featured-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Single scan pass, triggered once when the section is first entered. */
.mindivr-lab__scan-line {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 38%;
	opacity: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		transparent,
		color-mix(in srgb, var(--mindivr-lab-teal) 26%, transparent) 62%,
		color-mix(in srgb, var(--mindivr-lab-teal) 60%, transparent) 96%,
		transparent
	);
}

.mindivr-lab__featured-media.is-scanned .mindivr-lab__scan-line {
	animation: mindivr-lab-scan calc(1500ms * var(--mindivr-motion-scale)) var(--mindivr-ease-standard) both;
}

.mindivr-lab__featured-media.is-scanned::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(
			90deg,
			color-mix(in srgb, var(--mindivr-lab-teal) 12%, transparent) 1px,
			transparent 1px
		),
		linear-gradient(180deg, color-mix(in srgb, var(--mindivr-lab-teal) 12%, transparent) 1px, transparent 1px);
	background-size: 44px 44px;
	animation: mindivr-lab-grid-fade calc(1800ms * var(--mindivr-motion-scale)) var(--mindivr-ease-standard) both;
}

@keyframes mindivr-lab-scan {
	from {
		opacity: 0.9;
		transform: translateY(-40%);
	}

	to {
		opacity: 0;
		transform: translateY(300%);
	}
}

@keyframes mindivr-lab-grid-fade {
	0% {
		opacity: 0;
	}

	35% {
		opacity: 0.85;
	}

	100% {
		opacity: 0;
	}
}

.mindivr-lab__featured-title {
	margin: 0 0 var(--mindivr-space-3);
	font-family: var(--mindivr-font-display);
	font-size: var(--mindivr-fs-4);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: var(--mindivr-lh-tight);
	text-wrap: balance;
}

.mindivr-lab__featured-title a {
	color: inherit;
	text-decoration: none;
}

.mindivr-lab__featured-title a:hover,
.mindivr-lab__featured-title a:focus-visible {
	color: var(--mindivr-lab-teal);
}

.mindivr-lab__featured-deck {
	max-width: 48ch;
	margin: 0;
	color: var(--mindivr-text-muted);
	font-size: var(--mindivr-fs-1);
	line-height: var(--mindivr-lh-body);
}

/* --------------------------------------------------------------------------
   Latest — carousel
   --------------------------------------------------------------------------

   Three layouts behind one piece of markup:

     default   — a plain editorial grid. This is what no-JS and reduced motion
                 get, so it must be complete on its own.
     .is-native — a real horizontal scroll container with scroll-snap.
     .is-scrubbed — a sticky viewport whose track is translated by the page's
                 own vertical progress. Native scrolling stays in charge.
   -------------------------------------------------------------------------- */

.mindivr-lab__track {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mindivr-lab__carousel-controls {
	/* Enhancement only: shown once JS puts the carousel into native mode. */
	display: none;
	gap: var(--mindivr-space-3);
	align-items: center;
	margin-top: var(--mindivr-space-5);
}

.is-live.is-native .mindivr-lab__carousel-controls {
	display: flex;
}

.mindivr-lab__carousel-button {
	display: inline-flex;
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	border: var(--mindivr-border-width) solid color-mix(in srgb, var(--mindivr-lab-teal) 34%, var(--mindivr-border));
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--mindivr-surface) 62%, transparent);
	color: var(--mindivr-text);
	font-size: var(--mindivr-fs-1);
	cursor: pointer;
	transition:
		border-color var(--mindivr-duration-2) var(--mindivr-ease-standard),
		opacity var(--mindivr-duration-2) var(--mindivr-ease-standard);
}

.mindivr-lab__carousel-button:hover:not(:disabled),
.mindivr-lab__carousel-button:focus-visible {
	border-color: var(--mindivr-lab-teal);
}

.mindivr-lab__carousel-button:disabled {
	opacity: 0.35;
	cursor: default;
}

.mindivr-lab__carousel-status {
	margin: 0;
	color: var(--mindivr-text-muted);
	font-family: var(--mindivr-font-sans);
	font-size: var(--mindivr-fs-00);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

/* Native horizontal mode ---------------------------------------------- */

.is-native .mindivr-lab__carousel-viewport {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Bleed to the screen edge so the next card genuinely peeks. */
	margin-inline: calc(var(--mindivr-gutter) * -1);
	padding-inline: var(--mindivr-gutter);
	padding-block-end: var(--mindivr-space-2);
}

.is-native .mindivr-lab__carousel-viewport::-webkit-scrollbar {
	display: none;
}

.is-native .mindivr-lab__track {
	display: flex;
	gap: clamp(1rem, 3vw, 1.75rem);
}

.is-native .mindivr-lab__slide {
	flex: 0 0 min(80vw, 26rem);
	scroll-snap-align: start;
}

/* Sticky scrubbed mode ------------------------------------------------- */

.is-scrubbed .mindivr-lab__carousel {
	height: calc(var(--mindivr-lab-carousel-height) + var(--mindivr-lab-carousel-travel, 0px));
}

.is-scrubbed .mindivr-lab__carousel-viewport {
	position: sticky;
	/* Centre the pinned band so it never collides with the sticky header. */
	top: calc((100svh - var(--mindivr-lab-carousel-height)) / 2);
	height: var(--mindivr-lab-carousel-height);
	overflow: hidden;
	/* Bleed right so the next card peeks past the content rail. */
	margin-inline-end: calc(var(--mindivr-lab-rail) * -1);
}

.is-scrubbed .mindivr-lab__track {
	display: flex;
	height: 100%;
	gap: clamp(1.5rem, 2.6vw, 2.5rem);
	align-items: stretch;
	/* Inset both ends so the first and last cards rest in the opaque safe zone. */
	padding-inline: var(--mindivr-lab-carousel-fade);
	will-change: transform;
}

.is-scrubbed .mindivr-lab__slide {
	flex: 0 0 clamp(360px, 42vw, 560px);
}

/**
 * Layer A — viewport edge mask.
 *
 * Applied only to the carousel viewport so the neural field, headings and
 * controls stay untouched. Black in a CSS mask is retained opacity, not paint.
 * Companion dark-gradient overlays are forbidden: they reintroduce a
 * rectangular black layer at the carousel edges.
 */
.is-live.is-scrubbed .mindivr-lab__carousel-viewport,
.is-live.is-native .mindivr-lab__carousel-viewport {
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 12%,
		#000 88%,
		transparent 100%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 12%,
		#000 88%,
		transparent 100%
	);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.mindivr-lab__carousel-edge {
	display: none;
}

/* Cards ---------------------------------------------------------------- */

.mindivr-lab__slide {
	position: relative;
	min-width: 0;
}

/**
 * Layer B — proximity fade on the complete card composite.
 *
 * Opacity lives on the article, not on inner image/text, so background,
 * border, shadow and media disappear together. Backdrop-filter is omitted:
 * it paints a frosted rectangle that survives ancestor opacity.
 */
.is-live .mindivr-lab__slide {
	z-index: var(--card-z, 1);
	transform: scale(var(--card-scale, 1));
	transform-origin: center center;
}

.is-live .mindivr-lab__card {
	opacity: var(--card-opacity, 1);
	filter: saturate(var(--card-saturation, 1));
	background-color: color-mix(
		in srgb,
		var(--mindivr-lab-panel) calc(var(--card-proximity, 1) * 100%),
		transparent
	);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.is-live .mindivr-lab__slide:focus-within {
	z-index: 12;
	transform: scale(1);
}

.is-live .mindivr-lab__slide:focus-within .mindivr-lab__card {
	opacity: 1;
	filter: none;
	background-color: var(--mindivr-lab-panel);
}

.mindivr-lab__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: var(--mindivr-border-width) solid var(--mindivr-border);
	border-radius: var(--mindivr-radius);
	background-color: var(--mindivr-lab-panel);
	transition:
		border-color var(--mindivr-duration-2) var(--mindivr-ease-standard),
		background-color var(--mindivr-duration-2) var(--mindivr-ease-standard),
		box-shadow var(--mindivr-duration-2) var(--mindivr-ease-standard);
}

.mindivr-lab__card:hover,
.mindivr-lab__card:focus-within {
	border-color: color-mix(in srgb, var(--mindivr-lab-teal) 45%, var(--mindivr-border));
	background-color: color-mix(in srgb, var(--mindivr-surface-elevated) 80%, transparent);
}

/**
 * Neighbouring cards recede through Layer B opacity/scale. Imagery stays at
 * full local contrast so the slide-level fade is the only dimming.
 */
.is-live .mindivr-lab__slide .mindivr-lab__card {
	border-color: color-mix(
		in srgb,
		var(--mindivr-lab-teal) calc(var(--card-proximity, 1) * 38%),
		var(--mindivr-border)
	);
	box-shadow: 0 0 calc(var(--card-proximity, 1) * 1.6rem) color-mix(
		in srgb,
		var(--mindivr-lab-teal) calc(var(--card-proximity, 1) * 18%),
		transparent
	);
}

.is-live .mindivr-lab__slide.is-active .mindivr-lab__card-index,
.is-live .mindivr-lab__slide:focus-within .mindivr-lab__card-index {
	color: var(--mindivr-lab-teal);
}

.mindivr-lab__card-media {
	position: relative;
	overflow: hidden;
	border-bottom: var(--mindivr-border-width) solid color-mix(in srgb, var(--mindivr-border) 70%, transparent);
}

.mindivr-lab__card-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.is-scrubbed .mindivr-lab__card-media {
	flex: 1 1 auto;
	min-height: 0;
}

.is-scrubbed .mindivr-lab__card-image {
	height: 100%;
	aspect-ratio: auto;
}

/* Edge light instead of tilt: no transform on the card, so links stay stable. */
.mindivr-lab__card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	background: linear-gradient(
		130deg,
		transparent 45%,
		color-mix(in srgb, var(--mindivr-lab-teal) 22%, transparent) 100%
	);
	transition: opacity var(--mindivr-duration-2) var(--mindivr-ease-standard);
}

.mindivr-lab__card:hover .mindivr-lab__card-media::after,
.mindivr-lab__card:focus-within .mindivr-lab__card-media::after,
.is-active .mindivr-lab__card-media::after {
	opacity: 1;
}

.mindivr-lab__card-body {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	padding: clamp(1rem, 2.4vw, 1.6rem);
}

.mindivr-lab__card-index {
	margin: 0 0 var(--mindivr-space-2);
	color: color-mix(in srgb, var(--mindivr-lab-teal) 70%, var(--mindivr-text-muted));
	font-family: var(--mindivr-font-sans);
	font-size: var(--mindivr-fs-00);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.18em;
}

.mindivr-lab__card-title {
	margin: 0 0 var(--mindivr-space-2);
	font-family: var(--mindivr-font-display);
	font-size: var(--mindivr-fs-2);
	font-weight: 500;
	line-height: var(--mindivr-lh-tight);
}

.mindivr-lab__card-title a {
	color: inherit;
	text-decoration: none;
}

.mindivr-lab__card-title a:hover,
.mindivr-lab__card-title a:focus-visible {
	color: var(--mindivr-lab-teal);
}

.mindivr-lab__card-deck {
	margin: 0;
	color: var(--mindivr-text-muted);
	font-size: var(--mindivr-fs-0);
	line-height: var(--mindivr-lh-body);
}

/* --------------------------------------------------------------------------
   Cosmic Scale Passage
   -------------------------------------------------------------------------- */

.mindivr-lab__scale {
	/* No forced viewport height: the composition earns its space or shrinks. */
	padding-block: clamp(2.5rem, 6vw, 5rem);
	overflow: visible;
	background: transparent;
}

.mindivr-lab__scale-grid {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

.mindivr-lab__scale-heading {
	max-width: 18ch;
	margin: 0 0 var(--mindivr-space-4);
	font-family: var(--mindivr-font-display);
	font-size: var(--mindivr-fs-4);
	font-weight: 500;
	font-style: italic;
	letter-spacing: -0.01em;
	line-height: var(--mindivr-lh-tight);
	text-wrap: balance;
	text-shadow: 0 0 1.8rem rgb(2 13 18 / 0.72);
}

.mindivr-lab__scale-line {
	display: block;
}

.mindivr-lab__scale-lede {
	max-width: 46ch;
	margin: 0;
	color: var(--mindivr-text-muted);
	font-size: var(--mindivr-fs-1);
	line-height: var(--mindivr-lh-body);
}

.mindivr-lab__scale-aside {
	position: relative;
	min-height: 15rem;
	overflow: visible;
	background: transparent;
}

.mindivr-lab__scale-aside::before {
	content: "";
	position: absolute;
	inset: 6% 0 0 20%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
		ellipse at 58% 38%,
		rgb(212 168 90 / 0.14) 0%,
		rgb(2 13 18 / 0.12) 36%,
		transparent 68%
	);
}

.mindivr-lab__scale-steps {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--mindivr-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.mindivr-lab__scale-step {
	display: flex;
	gap: var(--mindivr-space-3);
	align-items: baseline;
	padding-block: var(--mindivr-space-2);
	border-top: var(--mindivr-border-width) solid color-mix(in srgb, var(--mindivr-lab-teal) 18%, transparent);
}

.mindivr-lab__scale-step:last-child {
	border-bottom: var(--mindivr-border-width) solid color-mix(in srgb, var(--mindivr-lab-teal) 18%, transparent);
}

.mindivr-lab__scale-step-index {
	color: color-mix(in srgb, var(--mindivr-lab-teal) 78%, var(--mindivr-text-muted));
	font-family: var(--mindivr-font-sans);
	font-size: var(--mindivr-fs-00);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.2em;
}

.mindivr-lab__scale-step-label {
	font-family: var(--mindivr-font-display);
	font-size: var(--mindivr-fs-2);
	letter-spacing: -0.01em;
}

/* Orbital arc: a drawn line that hands the eye down to Editorial standards. */
.mindivr-lab__orbit {
	position: absolute;
	inset-block-start: -18%;
	inset-inline-end: -10%;
	z-index: 0;
	width: min(26rem, 108%);
	height: auto;
	overflow: visible;
	pointer-events: none;
	fill: none;
}

.mindivr-lab__orbit-ring {
	stroke: color-mix(in srgb, var(--mindivr-lab-gold) 34%, transparent);
	stroke-width: 1;
}

.mindivr-lab__orbit-ring--inner {
	stroke: color-mix(in srgb, var(--mindivr-lab-teal) 32%, transparent);
}

.mindivr-lab__orbit-path {
	stroke: color-mix(in srgb, var(--mindivr-lab-teal) 42%, transparent);
	stroke-width: 1;
	stroke-dasharray: 3 7;
	stroke-linecap: round;
}

.mindivr-lab__orbit-marker {
	fill: color-mix(in srgb, var(--mindivr-lab-teal) 80%, transparent);
}

/* Evidence network ----------------------------------------------------- */

.mindivr-lab__standards {
	overflow: visible;
	background: transparent;
}

.mindivr-lab__standards-intro {
	max-width: 42rem;
}

.mindivr-lab__observatory {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
	overflow: visible;
	background: transparent;
}

.mindivr-lab__observatory-proof {
	min-width: 0;
	background: transparent;
}

.mindivr-lab__observatory-well {
	display: none;
}

.mindivr-lab__well-field {
	position: relative;
	width: min(100%, 22rem);
	aspect-ratio: 1;
}

.mindivr-lab__well-core {
	position: absolute;
	inset: 28%;
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--mindivr-lab-gold) 38%, #1a2430) 0 18%, transparent 42%),
		radial-gradient(circle at 62% 58%, color-mix(in srgb, var(--mindivr-lab-teal) 28%, #0c1822), #071018);
	box-shadow:
		0 0 2.4rem color-mix(in srgb, var(--mindivr-lab-gold) 22%, transparent),
		inset 0 0 1.4rem color-mix(in srgb, var(--mindivr-lab-void) 55%, transparent);
}

.mindivr-lab--webgl .mindivr-lab__well-core {
	opacity: 0.2;
}

.mindivr-lab__well-orbit {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: none;
}

.mindivr-lab__orbit-ring--outer {
	stroke: color-mix(in srgb, var(--mindivr-lab-teal) 22%, transparent);
	stroke-dasharray: 2 10;
}

.mindivr-lab ol,
.mindivr-lab ul {
	max-width: none;
}

.mindivr-lab__principles {
	display: grid;
	width: 100%;
	max-width: none;
	gap: clamp(1.15rem, 2.6vw, 1.85rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mindivr-lab-principle;
}

.mindivr-lab__principle {
	position: relative;
	padding-inline-start: 2.5rem;
}

.mindivr-lab__principle-node {
	position: absolute;
	inset-inline-start: 0;
	top: 0.35rem;
	width: 0.85rem;
	height: 0.85rem;
	border: 1px solid color-mix(in srgb, var(--mindivr-lab-teal) 55%, var(--mindivr-border));
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--mindivr-lab-teal) 18%, transparent);
	transition:
		background-color calc(420ms * var(--mindivr-motion-scale)) var(--mindivr-ease-standard),
		box-shadow calc(420ms * var(--mindivr-motion-scale)) var(--mindivr-ease-standard);
}

/* Single-column signal path: Integrity → Evidence → Sources → Corrections. */
.mindivr-lab__principle:not(:last-child)::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.425rem;
	top: 1.35rem;
	bottom: calc(var(--mindivr-space-3) * -1);
	width: 1px;
	background-color: color-mix(in srgb, var(--mindivr-border) 85%, transparent);
}

.mindivr-lab__principle.is-lit .mindivr-lab__principle-node {
	background-color: var(--mindivr-lab-teal);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--mindivr-lab-teal) 16%, transparent);
}

.mindivr-lab__principle.is-lit:not(:last-child)::before {
	background-color: color-mix(in srgb, var(--mindivr-lab-teal) 45%, var(--mindivr-border));
}

.mindivr-lab__principle-label {
	margin: 0 0 var(--mindivr-space-1);
	font-family: var(--mindivr-font-sans);
	font-size: var(--mindivr-fs-1);
	font-weight: 700;
	letter-spacing: 0.01em;
}

.mindivr-lab__principle-text {
	margin: 0;
	max-width: 36ch;
	color: var(--mindivr-text-muted);
	font-size: var(--mindivr-fs-0);
	line-height: var(--mindivr-lh-body);
}

/* Keep the signal alive — one relay instrument ------------------------------- */

.mindivr-lab__alive {
	padding-block-start: clamp(2.5rem, 6vw, 4.5rem);
	padding-block-end: clamp(1.5rem, 3vw, 2rem);
}

.mindivr-lab__relay {
	isolation: isolate;
	overflow: hidden;
	max-width: 72rem;
	margin-inline: auto;
	border: var(--mindivr-border-width) solid color-mix(in srgb, var(--mindivr-lab-teal) 22%, var(--mindivr-border));
	border-radius: calc(var(--mindivr-radius) * 1.15);
	background-color: color-mix(in srgb, var(--mindivr-surface) 42%, transparent);
	box-shadow: 0 0 2.5rem color-mix(in srgb, var(--mindivr-lab-teal) 10%, transparent);
}

.mindivr-lab__relay-intro {
	position: relative;
	padding: clamp(1.35rem, 3vw, 2.15rem) clamp(1.35rem, 3.4vw, 2.4rem) clamp(1.1rem, 2.4vw, 1.6rem);
}

.mindivr-lab__relay-intro .mindivr-lab__section-heading,
.mindivr-lab__relay-intro .mindivr-lab__section-deck {
	margin-bottom: 0;
}

.mindivr-lab__relay-intro .mindivr-lab__section-deck {
	margin-top: var(--mindivr-space-3);
}

.mindivr-lab__relay-intro::after {
	content: "";
	position: absolute;
	inset-inline-start: clamp(1.35rem, 3.4vw, 2.4rem);
	bottom: 0;
	width: 0.65rem;
	height: 0.65rem;
	border: 1px solid color-mix(in srgb, var(--mindivr-lab-teal) 55%, var(--mindivr-border));
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--mindivr-lab-teal) 28%, transparent);
	transform: translateY(50%);
}

.mindivr-lab__relay-grid {
	display: grid;
	align-items: stretch;
}

.mindivr-lab__engage {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	overflow: hidden;
	padding: clamp(1.35rem, 3vw, 2.15rem) clamp(1.35rem, 3.4vw, 2.4rem);
	border: 0;
	background: transparent;
}

.mindivr-lab__engage--support {
	border-block-start: var(--mindivr-border-width) solid color-mix(in srgb, var(--mindivr-lab-gold) 28%, var(--mindivr-border));
}

.mindivr-lab__engage--subscribe {
	border-block-start: var(--mindivr-border-width) solid color-mix(in srgb, var(--mindivr-lab-violet) 30%, var(--mindivr-border));
}

.mindivr-lab__engage--support .mindivr-lab__kicker {
	color: var(--mindivr-lab-gold);
}

.mindivr-lab__engage--subscribe .mindivr-lab__kicker {
	color: color-mix(in srgb, var(--mindivr-lab-violet) 70%, var(--mindivr-text));
}

.mindivr-lab__engage .mindivr-lab__actions {
	margin-top: auto;
	padding-top: var(--mindivr-space-5);
}

/* One soft wave on hover/focus — not a permanent pulse. */
.mindivr-lab__engage::after {
	content: "";
	position: absolute;
	inset-inline-start: var(--mindivr-lab-wave-x, 50%);
	top: var(--mindivr-lab-wave-y, 50%);
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	border-radius: 50%;
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--mindivr-lab-teal) 30%, transparent);
}

.mindivr-lab__engage.is-waving::after {
	animation: mindivr-lab-wave calc(900ms * var(--mindivr-motion-scale)) var(--mindivr-ease-standard) both;
}

.mindivr-lab__engage--support.is-waving::after {
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--mindivr-lab-gold) 34%, transparent);
}

@keyframes mindivr-lab-wave {
	from {
		opacity: 0.75;
		box-shadow: 0 0 0 0 currentColor;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(1);
		box-shadow: 0 0 0 22rem transparent;
	}
}

.mindivr-lab__engage-heading {
	margin: 0 0 var(--mindivr-space-3);
	font-family: var(--mindivr-font-display);
	font-size: var(--mindivr-fs-2);
	font-weight: 500;
	line-height: var(--mindivr-lh-tight);
}

.mindivr-lab__engage-copy {
	margin: 0;
	max-width: 38ch;
	color: var(--mindivr-text-muted);
	font-size: var(--mindivr-fs-0);
	line-height: var(--mindivr-lh-body);
}

/* --------------------------------------------------------------------------
   Responsive art direction
   -------------------------------------------------------------------------- */

@media (min-width: 40rem) {
	/* Two columns, so four stories never leave an orphan on the last row. */
	.mindivr-lab__track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mindivr-lab__principles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(1.5rem, 3.2vw, 2.75rem);
		row-gap: clamp(1.25rem, 2.8vw, 2rem);
	}

	/* 2×2 path: vertical thread only on the first row. */
	.mindivr-lab__principle:not(:last-child)::before {
		display: none;
	}

	.mindivr-lab__principle:nth-child(-n + 2)::before {
		display: block;
		bottom: calc((clamp(1.25rem, 2.8vw, 2rem) + 0.35rem) * -1);
	}

	/* Horizontal thread lives in the column gap only, so it never crosses titles. */
	.mindivr-lab__principle:nth-child(odd)::after {
		content: "";
		position: absolute;
		inset-inline-start: auto;
		inset-inline-end: calc(clamp(1.5rem, 3.2vw, 2.75rem) * -1);
		top: 0.72rem;
		width: clamp(1.5rem, 3.2vw, 2.75rem);
		height: 1px;
		pointer-events: none;
		background: linear-gradient(
			90deg,
			color-mix(in srgb, var(--mindivr-border) 90%, transparent),
			transparent
		);
	}

	.mindivr-lab__principle.is-lit:nth-child(-n + 2)::before,
	.mindivr-lab__principle.is-lit:nth-child(odd)::after {
		background: linear-gradient(
			90deg,
			color-mix(in srgb, var(--mindivr-lab-teal) 55%, var(--mindivr-border)),
			color-mix(in srgb, var(--mindivr-lab-teal) 18%, transparent)
		);
		background-color: color-mix(in srgb, var(--mindivr-lab-teal) 45%, var(--mindivr-border));
	}
}

@media (min-width: 48rem) {
	.mindivr-lab__relay-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mindivr-lab__engage--support,
	.mindivr-lab__engage--subscribe {
		border-block-start: var(--mindivr-border-width) solid color-mix(in srgb, var(--mindivr-border) 80%, transparent);
	}

	.mindivr-lab__engage--subscribe {
		border-inline-start: var(--mindivr-border-width) solid color-mix(in srgb, var(--mindivr-lab-violet) 28%, var(--mindivr-border));
	}

	.mindivr-lab__scale-grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	}
}

@media (min-width: 64rem) {
	.mindivr-lab__featured--has-image .mindivr-lab__featured-inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}

	.mindivr-lab__principles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		width: 100%;
	}

	.mindivr-lab__principle-text {
		max-width: none;
	}

	.mindivr-lab__principle:nth-child(-n + 2)::before {
		display: none;
	}

	.mindivr-lab__principle:nth-child(-n + 3)::after {
		content: "";
		position: absolute;
		inset-inline-start: auto;
		inset-inline-end: calc(clamp(1.5rem, 3.2vw, 2.75rem) * -1);
		top: 0.72rem;
		width: clamp(1.5rem, 3.2vw, 2.75rem);
		height: 1px;
		pointer-events: none;
		background: linear-gradient(
			90deg,
			color-mix(in srgb, var(--mindivr-lab-teal) 28%, var(--mindivr-border)),
			transparent
		);
	}

	.mindivr-lab__principle.is-lit:nth-child(-n + 3)::after {
		background: linear-gradient(
			90deg,
			color-mix(in srgb, var(--mindivr-lab-teal) 55%, var(--mindivr-border)),
			color-mix(in srgb, var(--mindivr-lab-teal) 18%, transparent)
		);
	}
}

@media (max-width: 63.99rem) {
	.mindivr-lab {
		--mindivr-lab-carousel-fade: clamp(1.25rem, 6vw, 2rem);
	}
}

@media (max-width: 20rem) {
	.mindivr-lab__title {
		font-size: var(--mindivr-fs-4);
	}

	.is-native .mindivr-lab__slide {
		flex-basis: 86vw;
	}
}

/* --------------------------------------------------------------------------
   Reduced motion — composed static state, everything still visible
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	[data-mindivr-lab-motion] {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		will-change: auto !important;
	}

	/* No sticky journey, no translated track: the plain grid stands alone. */
	.mindivr-lab__carousel,
	.is-scrubbed .mindivr-lab__carousel {
		height: auto;
	}

	.is-scrubbed .mindivr-lab__carousel-viewport,
	.is-native .mindivr-lab__carousel-viewport {
		position: static;
		height: auto;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
		scroll-snap-type: none;
	}

	.is-scrubbed .mindivr-lab__track,
	.is-native .mindivr-lab__track {
		display: grid;
		height: auto;
		transform: none !important;
	}

	.is-scrubbed .mindivr-lab__slide,
	.is-native .mindivr-lab__slide {
		flex-basis: auto;
	}

	.is-scrubbed .mindivr-lab__card-image {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.is-live .mindivr-lab__slide {
		opacity: 1 !important;
		transform: none !important;
	}

	.is-live .mindivr-lab__card {
		opacity: 1 !important;
		filter: none !important;
		background-color: var(--mindivr-lab-panel);
	}

	.is-live.is-scrubbed .mindivr-lab__carousel-viewport,
	.is-live.is-native .mindivr-lab__carousel-viewport {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.is-live .mindivr-lab__slide .mindivr-lab__card-image {
		opacity: 1;
		transition: none;
	}

	.mindivr-lab__carousel-controls {
		display: none !important;
	}

	.mindivr-lab__featured-media.is-scanned .mindivr-lab__scan-line,
	.mindivr-lab__featured-media.is-scanned::after,
	.mindivr-lab__engage.is-waving::after {
		animation: none;
		opacity: 0;
	}

	.mindivr-lab__card,
	.mindivr-lab__card-media::after,
	.mindivr-lab__principle-node,
	.mindivr-lab__sound-wave span {
		transition: none;
	}

	.mindivr-lab--webgl .mindivr-lab__stage::before {
		transition: none;
	}
}

@media (forced-colors: active) {
	.mindivr-lab__stage {
		display: none;
	}

	.mindivr-lab__card,
	.mindivr-lab__engage,
	.mindivr-lab__relay,
	.mindivr-lab__featured-media,
	.mindivr-lab__sound,
	.mindivr-lab__carousel-button {
		border: 1px solid CanvasText;
	}
}