* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Design compliance tokens: dates (Google IntersectionObserver` `threshold: 0.15` trigger entrance animations. should animate its child elements in sequence: corner first (0ms Primary Layout Strategy (3% layout */

:root {
	--marble-cream: #F5F0E8;
	--warm-linen: #EDE7DB;
	--alabaster: #FAFAF5;
	--deep-charcoal: #2C2C2E;
	--muted-stone: #5A5A58;
	--dusty-sage: #8B9D77;
	--faded-olive: #A3B08E;
	--dried-herb: #6B7A5E;
	--cool-gray: #C8C3B8;
	--pale-sage: #B5C4A3;
	--elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

html {
	scroll-snap-type: y proximity;
	background: #F5F0E8;
}

body {
	min-height: 100%;
	overflow-x: hidden;
	font-family: "Cormorant Garamond", Garamond, serif;
	color: #2C2C2E;
	background: #F5F0E8;
}

.marble-field {
	position: fixed;
	inset: -18vh -18vw;
	z-index: -2;
	pointer-events: none;
	background-color: #F5F0E8;
	background-image:
		linear-gradient(118deg, rgba(250,250,245,0.64), rgba(237,231,219,0.38) 44%, rgba(245,240,232,0.72)),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .018' numOctaves='4' seed='17'/%3E%3CfeColorMatrix values='0 0 0 0 0.784 0 0 0 0 0.765 0 0 0 0 0.722 0 0 0 .15 0'/%3E%3C/filter%3E%3Crect width='900' height='900' fill='%23F5F0E8'/%3E%3Crect width='900' height='900' filter='url(%23m)' opacity='1'/%3E%3Cpath d='M-80 110 L160 190 L390 150 L720 260 L990 220 M-40 520 L190 470 L430 580 L670 540 L950 680 M80 -30 L180 220 L140 460 L260 720 L220 950 M610 -50 L560 170 L650 360 L610 620 L740 960' fill='none' stroke='%23C8C3B8' stroke-width='1' opacity='.18'/%3E%3C/svg%3E");
	background-size: cover, 900px 900px;
	transform: translate3d(0, calc(var(--scroll-shift, 0px) * -0.03), 0);
}

.progress-line {
	position: fixed;
	top: 0;
	left: 20px;
	z-index: 10;
	width: 1px;
	height: 0;
	background: #8B9D77;
	transform-origin: top;
	transition: height 320ms var(--elastic), box-shadow 320ms var(--elastic);
}

.progress-line.pulse {
	box-shadow: 0 0 0 5px rgba(139, 157, 119, 0.12);
}

.ledger-scroll {
	position: relative;
	z-index: 1;
}

.hero-section {
	position: relative;
	height: 100vh;
	scroll-snap-align: start;
}

.hero-content {
	position: absolute;
	top: 60%;
	left: 10%;
	transform: translateY(-8%);
}

.hero-content h1 {
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	font-size: clamp(4rem, 10vw, 9rem);
	font-weight: 400;
	line-height: 0.88;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #2C2C2E;
	animation: heroRise 1100ms var(--elastic) both;
}

.hero-rule {
	width: 200px;
	height: 1px;
	margin: 1.4rem 0 1.1rem;
	background: #C8C3B8;
	transform-origin: left;
	animation: ruleDraw 850ms var(--elastic) 140ms both;
}

.hero-content p {
	max-width: 430px;
	font-size: clamp(1rem, 1.3vw, 1.25rem);
	font-style: italic;
	line-height: 1.85;
	letter-spacing: 0.01em;
	color: #5A5A58;
	animation: heroRise 1100ms var(--elastic) 260ms both;
}

.down-chevron {
	position: absolute;
	left: 50%;
	bottom: 7vh;
	width: 42px;
	height: 42px;
	border: 0;
	background: transparent;
	transform: translateX(-50%);
	cursor: pointer;
}

.down-chevron span {
	display: block;
	width: 22px;
	height: 22px;
	border-right: 1px solid #6B7A5E;
	border-bottom: 1px solid #6B7A5E;
	transform: rotate(45deg);
	animation: chevronPulse 1700ms ease-in-out infinite;
}

.specimen-section {
	position: relative;
	min-height: 100vh;
	padding: 20vh 8vw;
	scroll-snap-align: start;
}

.specimen-left .specimen-card {
	margin-left: 2vw;
}

.specimen-right .specimen-card {
	margin-left: auto;
	margin-right: 4vw;
}

.specimen-center .specimen-card {
	margin-left: auto;
	margin-right: auto;
}

.specimen-section.deep {
	padding-top: 24vh;
}

.specimen-card {
	position: relative;
	width: min(640px, 82vw);
	padding: clamp(2rem, 4vw, 4rem);
	border: 1px solid #8B9D77;
	background: rgba(250, 250, 245, 0.84);
	box-shadow: 18px 20px 0 rgba(181, 196, 163, 0.10);
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 900ms var(--elastic), transform 900ms var(--elastic), border-color 400ms var(--elastic);
}

.specimen-card.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.brackets,
.brackets span {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.brackets::before,
.brackets::after,
.brackets span::before,
.brackets span::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	border-color: #B5C4A3;
	border-style: solid;
	opacity: 0;
	transition: opacity 400ms var(--elastic), transform 400ms var(--elastic);
}

.brackets::before {
	top: -1px;
	left: -1px;
	border-width: 1px 0 0 1px;
	transform: translate(-10px, -10px);
}

.brackets::after {
	top: -1px;
	right: -1px;
	border-width: 1px 1px 0 0;
	transform: translate(10px, -10px);
}

.brackets span::before {
	bottom: -1px;
	left: -1px;
	border-width: 0 0 1px 1px;
	transform: translate(-10px, 10px);
}

.brackets span::after {
	right: -1px;
	bottom: -1px;
	border-width: 0 1px 1px 0;
	transform: translate(10px, 10px);
}

.is-visible .brackets::before,
.is-visible .brackets::after,
.is-visible .brackets span::before,
.is-visible .brackets span::after {
	opacity: 1;
	transform: translate(0, 0);
}

.hash-watermark {
	position: absolute;
	top: 2.2rem;
	right: 2rem;
	font-family: "IBM Plex Mono", monospace;
	font-size: clamp(1.4rem, 3vw, 3rem);
	letter-spacing: 0.12em;
	color: rgba(181, 196, 163, 0.20);
	white-space: nowrap;
}

.specimen-id {
	position: absolute;
	top: 1.35rem;
	left: 1.35rem;
	font-family: "IBM Plex Mono", monospace;
	font-size: clamp(0.7rem, 0.9vw, 0.85rem);
	letter-spacing: 0.06em;
	color: #8B9D77;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 600ms var(--elastic) 500ms, transform 600ms var(--elastic) 500ms;
}

.botanical {
	position: absolute;
	top: 1.75rem;
	right: 1.75rem;
	width: 94px;
	height: 94px;
	fill: none;
	stroke: #8B9D77;
	stroke-width: 1.5;
	stroke-linejoin: miter;
	stroke-linecap: square;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 600ms var(--elastic) 440ms, transform 600ms var(--elastic) 440ms;
}

.specimen-card h2 {
	position: relative;
	margin-top: 2.2rem;
	margin-bottom: 1.2rem;
	padding-right: 7rem;
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	font-size: clamp(1.8rem, 3.5vw, 3rem);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #2C2C2E;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 600ms var(--elastic) 200ms, transform 600ms var(--elastic) 200ms;
}

.specimen-card p {
	position: relative;
	max-width: 560px;
	font-size: clamp(1rem, 1.3vw, 1.25rem);
	font-weight: 400;
	line-height: 1.85;
	letter-spacing: 0.01em;
	color: #5A5A58;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 650ms var(--elastic) 350ms, transform 650ms var(--elastic) 350ms;
}

.is-visible .specimen-id,
.is-visible .botanical,
.is-visible h2,
.is-visible p,
.is-visible .provenance-tag {
	opacity: 1;
	transform: translateY(0);
}

.provenance-tag {
	position: absolute;
	z-index: 2;
	display: grid;
	grid-template-columns: 90px auto;
	align-items: start;
	gap: 0.5rem;
	font-family: "IBM Plex Mono", monospace;
	font-size: clamp(0.65rem, 0.78vw, 0.78rem);
	line-height: 1.6;
	letter-spacing: 0.06em;
	color: #6B7A5E;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 600ms var(--elastic) 500ms, transform 600ms var(--elastic) 500ms;
}

.provenance-tag span {
	display: block;
	padding: 0.55rem 0.7rem;
	border: 1px solid #B5C4A3;
	background: rgba(237, 231, 219, 0.86);
	white-space: nowrap;
}

.provenance-tag svg {
	width: 90px;
	height: 42px;
	fill: none;
	stroke: #8B9D77;
	stroke-width: 1;
	stroke-dasharray: 132;
	stroke-dashoffset: 132;
	transition: stroke-dashoffset 600ms var(--elastic) 500ms;
}

.is-visible .provenance-tag svg {
	stroke-dashoffset: 0;
}

.tag-right {
	top: -3rem;
	right: -13rem;
}

.tag-left {
	top: -3rem;
	left: -13rem;
	grid-template-columns: auto 90px;
}

.tag-left svg {
	grid-column: 2;
	grid-row: 1;
}

.tag-left span {
	grid-column: 1;
	grid-row: 1;
}

.provenance-tag.low {
	top: auto;
	bottom: -3.4rem;
}

.chevron-divider {
	height: 30vh;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='8' viewBox='0 0 48 8'%3E%3Cpolyline points='0,4 8,0 16,4 24,0 32,4 40,0 48,4' fill='none' stroke='%236B7A5E' stroke-width='1' opacity='.3'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: center;
	background-size: 48px 8px;
}

.closing-section {
	display: grid;
	place-items: center;
	height: 60vh;
	scroll-snap-align: end;
}

.closing-section p {
	max-width: 620px;
	padding: 0 8vw;
	font-size: clamp(1.2rem, 2vw, 1.8rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.85;
	letter-spacing: 0.02em;
	text-align: center;
	color: #5A5A58;
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 900ms var(--elastic), transform 900ms var(--elastic);
}

.closing-section.is-visible p {
	opacity: 1;
	transform: translateY(0);
}

@keyframes heroRise {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ruleDraw {
	from {
		opacity: 0;
		transform: scaleX(0);
	}
	to {
		opacity: 1;
		transform: scaleX(1);
	}
}

@keyframes chevronPulse {
	0%, 100% {
		opacity: 0.55;
		transform: translateY(0) rotate(45deg);
	}
	50% {
		opacity: 1;
		transform: translateY(9px) rotate(45deg);
	}
}

@media (max-width: 980px) {
	.progress-line {
		left: 12px;
	}

	.specimen-section {
		padding-left: 9vw;
		padding-right: 6vw;
	}

	.specimen-left .specimen-card,
	.specimen-right .specimen-card,
	.specimen-center .specimen-card {
		margin-left: auto;
		margin-right: auto;
	}

	.provenance-tag,
	.tag-left,
	.tag-right,
	.provenance-tag.low {
		top: auto;
		left: 1.4rem;
		right: auto;
		bottom: -4.25rem;
		grid-template-columns: 70px auto;
	}

	.tag-left svg,
	.tag-left span {
		grid-column: auto;
		grid-row: auto;
	}

	.provenance-tag svg {
		width: 70px;
	}
}

@media (max-width: 640px) {
	.hero-content {
		left: 8%;
		top: 58%;
	}

	.specimen-card {
		width: 88vw;
		padding: 2rem;
	}

	.botanical {
		width: 70px;
		height: 70px;
	}

	.specimen-card h2 {
		padding-right: 5rem;
	}

	.provenance-tag span {
		white-space: normal;
	}
}