:root {
	--deep-ground: #2A1F14;
	--warm-parchment: #E8D5BC;
	--sienna: #C4956A;
	--umber-mid: #8B7355;
	--clay-shadow: #6B5B47;
	--burnt-ochre: #D4783A;
	--smoke-wash: #3E2C14;
	--bone-white: #F5EDE0;
	--display: "Space Grotesk", Inter, sans-serif;
	--body: "Libre Baskerville", Georgia, serif;
	--mono: "IBM Plex Mono", monospace;
	--ease-organic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--bone-white);
	color: var(--smoke-wash);
	font-family: var(--body);
	line-height: 1.7;
	overflow-x: hidden;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 20;
	background-image:
		radial-gradient(circle at 22% 18%, rgba(196, 149, 106, 0.08), transparent 24%),
		linear-gradient(90deg, rgba(42, 31, 20, 0.035) 1px, transparent 1px),
		linear-gradient(rgba(42, 31, 20, 0.03) 1px, transparent 1px);
	background-size: auto, 48px 48px, 48px 48px;
	mix-blend-mode: multiply;
}

h1,
h2 {
	font-family: var(--display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 0.96;
	margin: 0 0 1.25rem;
}

h1 {
	font-size: clamp(2.2rem, 6vw, 5.7rem);
}

h2 {
	font-size: clamp(1.8rem, 4vw, 3.6rem);
}

p {
	font-size: 1rem;
	margin: 0;
}

.archive-shell {
	position: relative;
	z-index: 2;
}

.design-token {
	display: none;
}

.opening-void {
	position: relative;
	height: 100vh;
	min-height: 650px;
	background: var(--deep-ground);
	overflow: hidden;
}

.darkroom-wash {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 60% 45%, rgba(196, 149, 106, 0.16), transparent 22%),
		radial-gradient(ellipse at 18% 80%, rgba(139, 115, 85, 0.18), transparent 34%),
		linear-gradient(180deg, #2A1F14 0%, #3E2C14 55%, #2A1F14 100%);
}

.darkroom-wash::after,
.image-block::after,
.contact-sheet span::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='4' seed='7'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
	opacity: 0.08;
}

.void-orb,
.closing-orb {
	position: absolute;
	left: 60%;
	top: 45%;
	width: 200px;
	height: 200px;
	transform: translate(-50%, -50%);
	border: 1px solid var(--sienna);
	border-radius: 50%;
	display: grid;
	place-items: center;
	animation: pulse-void 8s var(--ease-organic) infinite;
}

.void-orb span,
.closing-orb span {
	font-family: var(--display);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: var(--warm-parchment);
}

.void-meta,
.closing-meta,
.code {
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 0.08em;
	color: var(--clay-shadow);
	text-transform: uppercase;
}

.void-meta {
	position: absolute;
	left: 60%;
	top: calc(45% + 145px);
	transform: translateX(-50%);
	width: max-content;
	max-width: 86vw;
}

@keyframes pulse-void {
	0%, 100% { transform: translate(-50%, -50%) scale(0.97); }
	50% { transform: translate(-50%, -50%) scale(1.03); }
}

.cluster {
	position: relative;
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: 20px;
	padding: 120px 20px;
	min-height: 92vh;
	align-items: start;
}

.cluster::before {
	content: attr(data-cluster);
	position: absolute;
	top: 70px;
	left: 20px;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	color: rgba(107, 91, 71, 0.55);
}

.module {
	position: relative;
	min-height: 245px;
	padding: clamp(1.4rem, 3vw, 3rem);
	border: 1px solid transparent;
	overflow: hidden;
	clip-path: circle(0% at 50% 50%);
	opacity: 0;
	transition: border-color 200ms ease, border-width 200ms ease, transform 650ms var(--ease-organic), opacity 650ms var(--ease-organic), clip-path 850ms var(--ease-organic);
}

.module.is-visible,
.closing-orb.is-visible {
	clip-path: circle(145% at 50% 50%);
	opacity: 1;
}

.module:hover {
	border: 2px solid var(--burnt-ochre);
}

.light {
	background: var(--warm-parchment);
	color: var(--smoke-wash);
}

.dark {
	background: var(--deep-ground);
	color: var(--warm-parchment);
}

.dark h2,
.dark p:not(.code),
.dark .measurement {
	color: var(--warm-parchment);
}

.wide,
.archive-card,
.secondary-card {
	grid-column: span 6;
}

.strip {
	grid-column: span 2;
	min-height: 80vh;
	background: transparent;
	border-color: rgba(139, 115, 85, 0.45);
}

.short {
	min-height: 470px;
}

.floating {
	grid-column: span 3;
	transform: translateY(-30px) rotate(0.8deg);
	border: 1px dashed var(--umber-mid);
	box-shadow: 0 8px 32px rgba(62, 44, 20, 0.25);
}

.floating.is-visible {
	transform: translateY(-30px) rotate(0.8deg);
}

.cluster-one .archive-card { grid-column: 1 / span 6; }
.cluster-one .secondary-card { grid-column: 2 / span 6; margin-top: 40px; }
.cluster-one .strip { grid-column: 8 / span 2; grid-row: 1 / span 2; }
.cluster-one .contact-module { grid-column: 7 / span 3; grid-row: 2; }
.cluster-two .alfa { grid-column: 1 / span 5; }
.cluster-two .alfa-image { grid-column: 6 / span 3; margin-top: 70px; }
.cluster-two .specimen-tag { grid-column: 9 / span 2; margin-top: 25px; }
.cluster-three .bravo-copy { grid-column: 2 / span 5; }
.cluster-three .image-block { grid-column: 6 / span 3; }
.cluster-three .strip { grid-column: 9 / span 2; }
.cluster-three .annotation-card { grid-column: 1 / span 3; margin-top: -40px; }
.cluster-four .charlie-copy { grid-column: 1 / span 6; }
.cluster-four .image-block { grid-column: 6 / span 3; margin-top: 190px; }
.cluster-four .label-module { grid-column: 8 / span 3; }
.cluster-five .delta-copy { grid-column: 2 / span 6; }
.cluster-five .tall { grid-column: 8 / span 3; min-height: 62vh; }
.cluster-five .grid-note { grid-column: 1 / span 2; margin-top: 180px; }

.code {
	margin-bottom: 1rem;
}

.annotation {
	margin-top: 2.2rem;
	font-style: italic;
	font-size: 0.8rem;
	color: var(--umber-mid);
	transform: rotate(-2deg);
}

.measurement {
	font-family: var(--display);
	font-size: clamp(1.4rem, 3vw, 2.4rem);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.image-block {
	min-height: 45vh;
	background:
		radial-gradient(ellipse 60% 50% at 30% 60%, rgba(196, 149, 106, 0.4), transparent 70%),
		linear-gradient(135deg, #E8D5BC 0%, #6B5B47 100%);
}

.contact-sheet {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 48px);
	gap: 2px;
	width: max-content;
	padding: 10px;
	border: 1px solid var(--umber-mid);
	background: var(--warm-parchment);
}

.contact-sheet span {
	position: relative;
	display: block;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(139, 115, 85, 0.72);
	transform: rotate(var(--rot, 0deg));
	background: linear-gradient(var(--angle, 135deg), var(--warm-parchment), var(--clay-shadow));
	overflow: hidden;
}

.contact-sheet span:nth-child(3n) { background: radial-gradient(circle at 35% 64%, var(--sienna), var(--clay-shadow)); }
.contact-sheet span:nth-child(4n) { background: linear-gradient(25deg, var(--clay-shadow), var(--warm-parchment)); }
.contact-sheet span:nth-child(5n) { background: radial-gradient(ellipse, var(--warm-parchment), var(--umber-mid)); }

.morph-plate,
.morph-object,
.floating-figure {
	width: 100%;
	height: 100%;
	display: block;
	color: var(--sienna);
}

.morph-line,
.morph-shadow,
.floating-figure circle,
.floating-figure rect,
.floating-figure ellipse,
.floating-figure polygon,
.floating-figure line,
.morph-object circle,
.morph-object line {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.morph-shadow,
.morph-blob,
.morph-filled {
	fill: rgba(62, 44, 20, 0.3);
	stroke: none;
}

.dark .morph-filled { fill: rgba(196, 149, 106, 0.28); }

.floating-figure {
	position: absolute;
	inset: 12% 8%;
	width: 84%;
	height: 76%;
	animation: float-drift 13s var(--ease-organic) infinite;
}

.floating-figure text {
	fill: var(--clay-shadow);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.08em;
}

.morph-line { animation: line-morph 16s var(--ease-organic) infinite; }
.morph-shadow { animation: shadow-morph 18s var(--ease-organic) infinite; }
.morph-blob { animation: blob-morph 19s var(--ease-organic) infinite; }
.morph-filled { animation: filled-morph 20s var(--ease-organic) infinite; }

@keyframes float-drift {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25% { transform: translateY(-4px) rotate(0.5deg); }
	50% { transform: translateY(0) rotate(0.1deg); }
	75% { transform: translateY(4px) rotate(-0.5deg); }
}

@keyframes line-morph {
	0%, 100% { d: path("M92 35 C54 92 139 123 84 184 C37 237 154 273 95 336 C55 379 107 425 88 491"); }
	50% { d: path("M86 35 C130 82 49 143 101 195 C148 246 51 295 102 350 C148 402 70 432 93 491"); }
}

@keyframes shadow-morph {
	0%, 100% { d: path("M90 118 C120 156 125 231 88 273 C48 319 68 398 105 427 C129 448 53 472 68 493"); }
	50% { d: path("M93 92 C49 133 57 213 111 260 C151 295 112 371 70 407 C42 432 145 458 112 493"); }
}

@keyframes blob-morph {
	0%, 100% { d: path("M120 42 C172 40 204 82 184 130 C169 167 159 200 113 194 C58 188 35 150 48 105 C61 61 82 43 120 42Z"); }
	50% { d: path("M116 38 C153 54 198 54 197 108 C196 163 159 172 130 203 C84 201 43 177 40 130 C37 75 75 25 116 38Z"); }
}

@keyframes filled-morph {
	0%, 100% { d: path("M105 36 C53 70 43 132 70 190 C93 240 38 303 95 365 C144 334 177 270 145 215 C119 170 176 91 105 36Z"); }
	50% { d: path("M105 36 C150 69 171 129 132 188 C100 237 174 295 111 365 C58 331 44 259 78 214 C114 166 37 92 105 36Z"); }
}

.dial-stack {
	position: absolute;
	inset: 15%;
	display: grid;
	place-items: center;
}

.dial-stack i {
	position: absolute;
	border: 1px solid var(--sienna);
	border-radius: 50%;
	opacity: 0.48;
}

.dial-stack i:nth-child(1) { width: 64%; height: 64%; }
.dial-stack i:nth-child(2) { width: 42%; height: 42%; transform: translate(18px, -16px); }
.dial-stack i:nth-child(3) { width: 25%; height: 25%; transform: translate(-21px, 35px); }

.dashed-box {
	border: 1px dashed var(--umber-mid);
	padding: 24px;
	min-height: 160px;
}

.micro-grid {
	height: 180px;
	margin-bottom: 22px;
	background:
		linear-gradient(var(--umber-mid) 1px, transparent 1px),
		linear-gradient(90deg, var(--umber-mid) 1px, transparent 1px);
	background-size: 28px 28px;
	opacity: 0.55;
}

.deep-archive {
	position: relative;
	height: 150vh;
	min-height: 900px;
	background: linear-gradient(180deg, var(--bone-white) 0%, var(--deep-ground) 72%);
	display: grid;
	place-items: center;
	align-content: center;
	overflow: hidden;
}

.closing-orb {
	position: relative;
	left: auto;
	top: auto;
	transform: none;
	clip-path: circle(0% at 50% 50%);
	opacity: 0;
	animation: pulse-close 8s var(--ease-organic) infinite;
}

.closing-orb span,
.closing-meta {
	color: var(--sienna);
}

.closing-meta {
	margin-top: 48px;
	padding-bottom: 200px;
}

@keyframes pulse-close {
	0%, 100% { transform: scale(1.03); }
	50% { transform: scale(0.97); }
}

.connector-layer {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	pointer-events: none;
	z-index: 1;
	overflow: visible;
}

.connector-layer path {
	fill: none;
	stroke: var(--sienna);
	stroke-width: 1;
	stroke-dasharray: 8 9;
	opacity: 0.45;
	animation: connector-drift 18s linear infinite;
}

@keyframes connector-drift {
	from { stroke-dashoffset: 80; }
	to { stroke-dashoffset: 0; }
}

.progress-dial {
	position: fixed;
	right: 30px;
	bottom: 30px;
	width: 72px;
	height: 72px;
	z-index: 30;
	color: var(--sienna);
}

.progress-dial svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.dial-track,
.dial-fill {
	fill: none;
	stroke-width: 2;
}

.dial-track { stroke: rgba(196, 149, 106, 0.22); }
.dial-fill {
	stroke: var(--sienna);
	stroke-linecap: round;
	stroke-dasharray: 175.929;
	stroke-dashoffset: 175.929;
}

.dial-ticks line {
	stroke: var(--sienna);
	stroke-width: 1;
	opacity: 0.65;
}

@media (max-width: 900px) {
	.cluster {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		padding: 90px 16px;
	}

	.cluster-one .archive-card,
	.cluster-one .secondary-card,
	.cluster-one .strip,
	.cluster-one .contact-module,
	.cluster-two .alfa,
	.cluster-two .alfa-image,
	.cluster-two .specimen-tag,
	.cluster-three .bravo-copy,
	.cluster-three .image-block,
	.cluster-three .strip,
	.cluster-three .annotation-card,
	.cluster-four .charlie-copy,
	.cluster-four .image-block,
	.cluster-four .label-module,
	.cluster-five .delta-copy,
	.cluster-five .tall,
	.cluster-five .grid-note {
		grid-column: span 6;
		grid-row: auto;
		margin-top: 0;
	}

	.strip { min-height: 360px; }
	.floating,
	.floating.is-visible { transform: translateY(0) rotate(0.8deg); }
	.void-orb, .void-meta { left: 50%; }
}

@media (max-width: 560px) {
	.opening-void { min-height: 560px; }
	.cluster { grid-template-columns: 1fr; padding: 70px 12px; }
	.module { grid-column: 1 / -1 !important; min-height: 220px; }
	.contact-sheet { grid-template-columns: repeat(3, 48px); }
	.progress-dial { display: none; }
	.void-orb, .closing-orb { width: 164px; height: 164px; }
	.void-meta { top: calc(45% + 126px); text-align: center; }
}