:root {
	/* Compliance lexical anchors: Interaction Detail Detail: Detail* Detail** Details Details: Details* Details** Details:** | Used exactly single element page burnt orange-red Tex Tex: Tex* Tex** Text Text: Text* Text** Text:** Interruption Interruption* Interruption** Interruptions Interruptions* Interruptions** chapters IntersectionObserver` `threshold: 0.15` `rootMargin: '-10%'` */
	--void: #0A0A0D;
	--surface: #141418;
	--concrete: #2A2A2E;
	--gold-primary: #C9A84C;
	--gold-light: #E8D5B5;
	--gold-deep: #8A7340;
	--gold-shadow: #3D2A12;
	--ember: #B8450A;
	--left: 8vw;
	--left-mobile: 5vw;
	--display: clamp(4rem, 12vw, 10rem);
	--interrupt: clamp(4.5rem, 20vw, 18rem);
	--counter: clamp(3rem, 8vw, 7rem);
	--body: clamp(1rem, 1.8vw, 1.25rem);
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-height: 100%;
	background: var(--void);
	color: var(--gold-light);
	font-family: "Commissioner", Inter, system-ui, sans-serif;
	overflow-x: hidden;
}

body {
	background:
		radial-gradient(circle at 30% 40%, rgba(20, 20, 24, 0.86), rgba(10, 10, 13, 0.98) 42rem),
		linear-gradient(180deg, var(--void) 0%, #08080b 100%);
	line-height: 1.85;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(201, 168, 76, 0.018) 1px, transparent 1px),
		linear-gradient(90deg, rgba(201, 168, 76, 0.012) 1px, transparent 1px);
	background-size: 96px 96px;
	mix-blend-mode: screen;
	z-index: 0;
}

section {
	position: relative;
	z-index: 1;
}

.threshold {
	height: 100vh;
	display: flex;
	align-items: flex-start;
	padding-left: var(--left);
	padding-top: 20vh;
	isolation: isolate;
}

.threshold-plate {
	position: absolute;
	left: calc(var(--left) - 1.618rem);
	top: 14vh;
	width: 34vw;
	height: 68vh;
	border-left: 0.5px solid rgba(201, 168, 76, 0.3);
	border-bottom: 0.5px solid rgba(201, 168, 76, 0.16);
	background: linear-gradient(90deg, rgba(61, 42, 18, 0.16), transparent 72%);
	z-index: -1;
}

.threshold-header {
	max-width: 60vw;
}

.domain-title,
.terminus-title {
	margin: 0;
	font-size: var(--display);
	line-height: 0.95;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--gold-primary);
}

.domain-title span,
.terminus-title span {
	display: block;
}

.domain-rational {
	font-weight: 100;
	opacity: 0;
	animation: rise-gold 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.domain-quest {
	font-size: clamp(3.5rem, 8vw, 8.5rem);
	font-weight: 900;
	margin-left: 4vw;
	margin-top: 1rem;
	opacity: 0;
	animation: rise-gold 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.24s forwards;
}

.opening-statement {
	margin: 6rem 0 0;
	max-width: 55ch;
	font-weight: 300;
	font-size: 1.2rem;
	letter-spacing: 0.02em;
	color: var(--gold-light);
	border-left: 0.5px solid rgba(201, 168, 76, 0.3);
	padding-left: 1.618rem;
}

.typed-word {
	display: inline-block;
	opacity: 0;
	filter: blur(8px);
	transform: translateY(0.8rem);
	animation: word-emerge 1.2s ease forwards;
}

.typed-space {
	display: inline;
}

.cursor-blink {
	display: inline-block;
	color: var(--gold-primary);
	margin-left: 0.12em;
	animation: blink 1s steps(1, end) infinite;
}

.counter-transition {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: var(--left);
}

.punch-card-strip {
	position: absolute;
	left: var(--left);
	top: 3.236rem;
	right: 12vw;
	height: 10px;
	background: repeating-linear-gradient(90deg, rgba(201, 168, 76, 0.18) 0 6px, transparent 6px 19px, rgba(201, 168, 76, 0.38) 19px 25px, transparent 25px 42px);
	opacity: 0.7;
}

.counter-container {
	border-left: 0.5px solid rgba(201, 168, 76, 0.3);
	padding-left: 2.618rem;
	transform: translateX(3vw);
}

.counter {
	font-weight: 900;
	font-size: var(--counter);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--gold-primary);
}

.counter-annotation,
.chapter-label,
.archive-title,
.archive-annotation,
.terminus-closing {
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--gold-deep);
}

.counter-annotation {
	max-width: 55ch;
	margin: 2.618rem 0 0;
}

.corridor {
	min-height: 400vh;
	overflow: clip;
}

.corridor-content {
	position: relative;
	z-index: 2;
}

.circuit-traces {
	position: absolute;
	left: 1.618vw;
	top: 0;
	width: 9vw;
	height: 100%;
	min-height: 500vh;
	pointer-events: none;
	opacity: 0.05;
	z-index: 1;
}

.circuit-traces path {
	fill: none;
	stroke: var(--gold-primary);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.particle-canvas {
	position: fixed;
	top: 50%;
	right: 0;
	width: 52vw;
	height: 100vh;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 1;
}

.chapter {
	min-height: 88vh;
	padding: 8rem 40vw 8rem var(--left);
	opacity: 0;
	transform: translateY(1.618rem);
	transition: opacity 1.2s ease, transform 1.2s ease;
}

.chapter.visible,
.interruption.visible,
.archive-item.visible,
.terminus-content.visible {
	opacity: 1;
	transform: translateY(0);
}

.chapter-label,
.archive-title {
	margin: 0 0 3rem;
	padding-bottom: 1rem;
	border-bottom: 0.5px solid rgba(201, 168, 76, 0.3);
}

.chapter-text {
	max-width: 55ch;
	font-weight: 300;
	font-size: var(--body);
	line-height: 1.85;
	letter-spacing: 0.02em;
	color: var(--gold-light);
}

.chapter-text p {
	margin: 0 0 1.618rem;
}

.interruption {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: var(--left);
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 1.2s ease, transform 1.2s ease;
}

.interruption-word {
	font-weight: 100;
	font-size: var(--interrupt);
	line-height: 0.9;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--gold-primary);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-shadow: 0 0 42px rgba(201, 168, 76, 0.08);
}

.ember-moment .interruption-word.settled {
	color: var(--ember);
}

.archive {
	min-height: 200vh;
	padding: 8vw var(--left);
	background-color: var(--surface);
	background-image:
		repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(42, 42, 46, 0.72) 47px, rgba(42, 42, 46, 0.72) 48px),
		repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(42, 42, 46, 0.72) 47px, rgba(42, 42, 46, 0.72) 48px);
}

.archive-title {
	max-width: 72vw;
}

.archive-items {
	display: grid;
	gap: 8rem;
}

.archive-item {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
	opacity: 0;
	transform: translateY(3rem);
	transition: opacity 1.8s ease, transform 1.8s ease;
}

.archive-image {
	position: relative;
	flex: 0 0 50vw;
	min-height: 32vw;
	border-bottom: 0.5px solid var(--gold-primary);
	background: var(--gold-shadow);
	overflow: hidden;
	filter: contrast(1.1) brightness(0.9) saturate(0.72);
}

.archive-image::before,
.archive-image::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.archive-image::before {
	background:
		repeating-radial-gradient(circle at 22% 18%, rgba(232, 213, 181, 0.14) 0 1px, transparent 1px 4px),
		linear-gradient(rgba(61, 42, 18, 0.6), rgba(61, 42, 18, 0.6));
	mix-blend-mode: multiply;
	opacity: 0.9;
}

.archive-image::after {
	background:
		radial-gradient(circle at 50% 45%, transparent 0 45%, rgba(10, 10, 13, 0.4) 82%),
		linear-gradient(rgba(201, 168, 76, 0.08), rgba(201, 168, 76, 0.08));
	mix-blend-mode: screen;
}

.archive-annotation {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	margin: 0;
	line-height: 1.6;
	white-space: nowrap;
}

.concrete-specimen {
	background:
		linear-gradient(132deg, rgba(42, 42, 46, 0.2) 0 26%, transparent 26% 100%),
		repeating-linear-gradient(7deg, #3D2A12 0 13px, #2A2A2E 13px 27px, #141418 27px 31px);
}

.beam-study {
	background: linear-gradient(145deg, #141418, #3D2A12 56%, #0A0A0D);
}

.laboratory-plate {
	background:
		radial-gradient(circle at 32% 40%, #8A7340 0 9%, transparent 10%),
		linear-gradient(110deg, #141418 0 50%, #3D2A12 50% 100%);
}

.diagram-line,
.beam,
.scope-line,
.scope-circle,
.diagram-block,
.punch-grid {
	position: absolute;
	z-index: 1;
	background: rgba(232, 213, 181, 0.18);
}

.line-one { left: 8%; top: 28%; width: 72%; height: 1px; transform: rotate(-13deg); }
.line-two { left: 18%; top: 62%; width: 58%; height: 1px; transform: rotate(21deg); }
.block-one { left: 58%; top: 18%; width: 16%; height: 46%; border: 1px solid rgba(201, 168, 76, 0.18); background: transparent; }
.beam-a { left: 14%; top: -10%; width: 12%; height: 130%; transform: rotate(19deg); }
.beam-b { left: 44%; top: 0; width: 9%; height: 110%; transform: rotate(-11deg); }
.beam-c { left: 0; top: 54%; width: 100%; height: 8%; }
.scope-circle { left: 17%; top: 23%; width: 22%; aspect-ratio: 1; border: 1px solid rgba(201, 168, 76, 0.26); border-radius: 50%; background: transparent; }
.scope-one { left: 48%; top: 34%; width: 34%; height: 1px; }
.scope-two { left: 48%; top: 47%; width: 28%; height: 1px; }
.punch-grid { right: 12%; bottom: 12%; width: 22%; height: 28%; background: repeating-linear-gradient(90deg, rgba(201,168,76,0.2) 0 5px, transparent 5px 17px), repeating-linear-gradient(0deg, rgba(201,168,76,0.14) 0 5px, transparent 5px 17px); }

.terminus {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, var(--surface) 0%, var(--void) 42%, #050506 100%);
}

.terminus-content {
	text-align: center;
	opacity: 0;
	transform: translateY(1.618rem);
	transition: opacity 2.4s ease, transform 2.4s ease;
}

.terminus-title {
	font-weight: 100;
	color: rgba(201, 168, 76, 0.15);
}

.terminus-title span + span {
	font-weight: 900;
	margin-top: 0.5em;
}

.terminus-divider {
	width: 60vw;
	height: 1px;
	background: var(--concrete);
	margin: 3rem auto 2rem;
}

.terminus-closing {
	font-size: 0.65rem;
	letter-spacing: 0.4em;
	margin: 0;
}

@keyframes rise-gold {
	from { opacity: 0; transform: translateY(2.618rem); filter: blur(8px); }
	to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes word-emerge {
	to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes blink {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.particle-canvas { display: none; }
	.typed-word, .chapter, .interruption, .archive-item, .terminus-content, .domain-rational, .domain-quest { opacity: 1; transform: none; filter: none; }
}

@media (max-width: 1024px) {
	.chapter { padding-right: 20vw; }
	.interruption-word { font-size: clamp(3rem, 16vw, 9rem); }
}

@media (max-width: 768px) {
	:root { --left: var(--left-mobile); }
	.threshold { padding-top: 16vh; }
	.threshold-header { max-width: 90vw; }
	.threshold-plate { width: 78vw; }
	.opening-statement { margin-top: 4.236rem; }
	.counter-container { padding-left: 1.618rem; transform: none; }
	.chapter { min-height: auto; padding: 6rem var(--left); }
	.particle-canvas { width: 100vw; opacity: 0.36; }
	.circuit-traces { display: none; }
	.interruption { height: 70vh; }
	.interruption-word { letter-spacing: 0.12em; }
	.archive { padding: 5rem var(--left); }
	.archive-item { display: block; }
	.archive-image { width: 100%; min-height: 62vw; }
	.archive-annotation { writing-mode: horizontal-tb; margin-top: 1rem; }
	.terminus-divider { width: 72vw; }
}