:root {
	/* Compliance vocabulary: Interface Metaphor Marginal Annotations:* Annotations:** motifs (Roman watermarks IntersectionObserver` (the use JavaScript threshold array. headings (Google */
	--deep-ground: #0e0c09;
	--warm-shadow: #1e1a14;
	--walnut: #3a3025;
	--parchment: #d4c8b0;
	--pale-ivory: #f0e6d4;
	--oxidized-copper: #7a9e7e;
	--deep-copper: #4a6b4e;
	--burnished-brass: #b89f6a;
	--stone: #8a7e6c;
	--display: "Playfair Display", Georgia, serif;
	--secondary: "Cormorant Garamond", Georgia, serif;
	--body: "Source Serif 4", Georgia, serif;
	--mono: "DM Mono", "Courier New", monospace;
}

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

html {
	scroll-behavior: smooth;
}

body {
	background: radial-gradient(ellipse at 50% 30%, #1e1a14 0%, #0e0c09 66%, #0e0c09 100%);
	color: var(--parchment);
	font-family: var(--body);
	font-size: clamp(1rem, 1.2vw, 1.15rem);
	line-height: 1.85;
	letter-spacing: 0.01em;
	overflow-x: hidden;
	scroll-snap-type: y proximity;
}

.spine-line {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 1;
	width: 1px;
	height: 100vh;
	background: rgba(58, 48, 37, 0.2);
	pointer-events: none;
}

.progress-indicator {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 20;
	width: 2px;
	height: 0;
	background: linear-gradient(180deg, #7a9e7e, #b89f6a);
	transition: height 0.12s linear;
}

.chapter {
	position: relative;
	min-height: 100vh;
	scroll-snap-align: start;
	background: radial-gradient(ellipse at 50% 30%, rgba(30, 26, 20, 0.92), #0e0c09 72%);
	border-top: 1px solid rgba(58, 48, 37, 0.36);
	overflow: hidden;
}

.chapter:first-of-type {
	border-top: 0;
}

.chapter::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(14, 12, 9, 0.45), transparent 22%, transparent 78%, rgba(14, 12, 9, 0.45));
	pointer-events: none;
}

.foxed::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 12% 18%, rgba(184, 159, 106, .08) 0 2px, transparent 3px),
		radial-gradient(circle at 82% 16%, rgba(184, 159, 106, .06) 0 3px, transparent 4px),
		radial-gradient(circle at 71% 66%, rgba(184, 159, 106, .07) 0 2px, transparent 3px),
		radial-gradient(circle at 24% 78%, rgba(184, 159, 106, .05) 0 4px, transparent 5px),
		radial-gradient(circle at 51% 43%, rgba(184, 159, 106, .045) 0 2px, transparent 3px),
		radial-gradient(circle at 91% 82%, rgba(184, 159, 106, .08) 0 2px, transparent 3px);
	opacity: .8;
	pointer-events: none;
}

.parallax-container {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 100vh;
	perspective: 1200px;
	perspective-origin: 50% 50%;
	overflow: hidden;
}

.layer-bg,
.layer-mid,
.layer-fg {
	grid-area: 1 / 1;
	width: 100%;
}

.layer-bg {
	position: absolute;
	inset: 0;
	transform: translateZ(-600px) scale(1.5);
}

.layer-mid {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	min-height: 100vh;
	transform: translateZ(-300px) scale(1.25);
	pointer-events: none;
}

.layer-fg {
	position: relative;
	z-index: 4;
	padding: 8vh min(30vw, max(5vw, 12rem));
	transform: translateZ(0);
}

.atmosphere::before {
	content: "";
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(ellipse at 50% 22%, rgba(184, 159, 106, 0.16), transparent 38%),
		linear-gradient(115deg, transparent 0 47%, rgba(122, 158, 126, 0.045) 48% 50%, transparent 51% 100%);
	filter: blur(.2px);
}

.particle {
	position: absolute;
	bottom: -5vh;
	width: var(--s, 2px);
	height: var(--s, 2px);
	left: var(--x, 50%);
	border-radius: 50%;
	background: #f0e6d4;
	opacity: 0;
	animation: mote var(--d, 28s) ease-in-out var(--delay, 0s) infinite;
}

.p1{--x:8%;--s:2px;--d:23s;--delay:-2s;--drift:22px}.p2{--x:15%;--s:3px;--d:34s;--delay:-11s;--drift:-18px}.p3{--x:21%;--s:2px;--d:27s;--delay:-5s;--drift:30px}.p4{--x:28%;--s:4px;--d:39s;--delay:-16s;--drift:-12px}.p5{--x:35%;--s:2px;--d:19s;--delay:-8s;--drift:18px}.p6{--x:42%;--s:3px;--d:31s;--delay:-18s;--drift:-28px}.p7{--x:49%;--s:2px;--d:24s;--delay:-3s;--drift:12px}.p8{--x:54%;--s:4px;--d:37s;--delay:-21s;--drift:-20px}.p9{--x:61%;--s:2px;--d:29s;--delay:-13s;--drift:34px}.p10{--x:67%;--s:3px;--d:33s;--delay:-1s;--drift:-26px}.p11{--x:73%;--s:2px;--d:20s;--delay:-9s;--drift:16px}.p12{--x:80%;--s:4px;--d:40s;--delay:-25s;--drift:-15px}.p13{--x:86%;--s:2px;--d:26s;--delay:-7s;--drift:24px}.p14{--x:92%;--s:3px;--d:35s;--delay:-19s;--drift:-30px}.p15{--x:6%;--s:2px;--d:32s;--delay:-14s;--drift:20px}.p16{--x:31%;--s:3px;--d:22s;--delay:-6s;--drift:-24px}.p17{--x:58%;--s:2px;--d:36s;--delay:-28s;--drift:18px}.p18{--x:76%;--s:3px;--d:25s;--delay:-4s;--drift:-14px}.p19{--x:88%;--s:2px;--d:30s;--delay:-15s;--drift:28px}.p20{--x:44%;--s:4px;--d:38s;--delay:-20s;--drift:-22px}

@keyframes mote {
	0% { opacity: 0; transform: translate3d(0, 0, 0); }
	18% { opacity: .035; }
	52% { opacity: .08; }
	100% { opacity: 0; transform: translate3d(var(--drift), -112vh, 0); }
}

h1,
h2,
h3 {
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.02em;
	color: #f0e6d4;
}

h1 {
	font-size: clamp(2.4rem, 5vw, 4.8rem);
	font-weight: 900;
	text-align: center;
}

h3 {
	font-family: var(--secondary);
	font-size: clamp(1.2rem, 2.5vw, 2rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #7a9e7e;
	margin-bottom: 1.6rem;
}

p {
	max-width: 680px;
	margin-bottom: 1.45rem;
}

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(122, 158, 126, 0.4);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: text-decoration-color .3s ease, text-underline-offset .3s ease;
}

a:hover {
	text-decoration-color: rgba(122, 158, 126, 1);
	text-underline-offset: 4px;
}

a:visited {
	text-decoration-color: #4a6b4e;
}

.caption {
	font-family: var(--mono);
	font-size: .75rem;
	line-height: 1.5;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8a7e6c;
}

.hero-copy {
	display: grid;
	justify-items: center;
	text-align: center;
}

.hero-subtitle {
	max-width: 620px;
	margin-top: 1.4rem;
	color: #d4c8b0;
}

.seal {
	position: relative;
	width: clamp(180px, 24vw, 280px);
	height: clamp(180px, 24vw, 280px);
	opacity: 1;
	animation: seal-spin 120s linear infinite;
	transition: opacity .4s ease;
}

.seal-ring,
.seal-mark,
.seal-mark span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.seal-ring {
	border: 1px solid #b89f6a;
	border-radius: 50%;
	box-shadow: 0 0 30px rgba(184, 159, 106, .08), inset 0 0 30px rgba(184, 159, 106, .04);
}

.seal-outer { width: 100%; height: 100%; opacity: .45; }
.seal-middle { width: 68%; height: 68%; opacity: .58; }
.seal-inner { width: 36%; height: 36%; opacity: .78; }

.seal-mark {
	width: 46px;
	height: 46px;
}

.seal-mark span {
	width: 25px;
	height: 25px;
	border: 1px solid #b89f6a;
	background: rgba(184, 159, 106, .16);
}

.seal-mark span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.seal-mark span:last-child { transform: translate(-50%, -50%) rotate(0deg) scale(.62); background: #b89f6a; opacity: .75; }

@keyframes seal-spin { to { transform: rotate(360deg); } }

.chapter-content {
	position: relative;
	z-index: 3;
	max-width: 680px;
	margin: 0 auto;
	padding: 3rem 0;
}

.chapter-numeral {
	position: absolute;
	top: -7vw;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
	font-size: 15vw;
	font-weight: 900;
	line-height: 1;
	letter-spacing: .1em;
	color: #f0e6d4;
	opacity: 0;
	pointer-events: none;
}

.annotation {
	position: absolute;
	top: 36%;
	z-index: 5;
	max-width: 190px;
	font-family: var(--secondary);
	font-size: clamp(.9rem, 1vw, 1rem);
	font-style: italic;
	line-height: 1.45;
	color: rgba(212, 200, 176, .48);
	transform: rotate(-1.5deg);
}

.annotation-left { left: 7vw; }
.annotation-right { right: 7vw; transform: rotate(1.4deg); }

.object-3d {
	position: relative;
	width: min(64vw, 520px);
	height: min(58vh, 430px);
	transform-style: preserve-3d;
	opacity: 0;
	transform: scale(.9);
	filter: drop-shadow(0 34px 55px rgba(0,0,0,.52));
}

.object-shadow {
	position: absolute;
	left: 50%;
	bottom: 5%;
	width: 54%;
	height: 34px;
	background: radial-gradient(ellipse, rgba(0,0,0,.58), transparent 70%);
	border-radius: 50%;
	filter: blur(10px);
	transform: translateX(-50%);
}

.book-base {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 330px;
	height: 205px;
	transform-style: preserve-3d;
	transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-9deg);
	animation: book-turn 90s linear infinite;
}

.cover,
.page-stack i,
.book-spine {
	position: absolute;
	backface-visibility: hidden;
}

.cover {
	top: 0;
	width: 158px;
	height: 205px;
	background:
		repeating-linear-gradient(38deg, rgba(255,255,255,.035) 0 2px, transparent 2px 6px),
		linear-gradient(135deg, #3a3025, #1e1a14 70%, #0e0c09);
	border: 1px solid rgba(184, 159, 106, .34);
	box-shadow: inset 0 0 24px rgba(184, 159, 106, .08);
}

.cover-left { left: 0; transform-origin: right center; transform: rotateY(-24deg) translateZ(5px); }
.cover-right { right: 0; transform-origin: left center; transform: rotateY(24deg) translateZ(5px); }

.page-stack i {
	top: 12px;
	width: 144px;
	height: 178px;
	background: linear-gradient(90deg, #f0e6d4, #d4c8b0 82%, #8a7e6c);
	border: 1px solid rgba(58, 48, 37, .25);
}

.left-pages i { left: 12px; transform-origin: right center; }
.right-pages i { right: 12px; transform-origin: left center; }
.left-pages i:nth-child(1){transform:rotateY(-31deg) translateZ(14px)}.left-pages i:nth-child(2){transform:rotateY(-26deg) translateZ(19px)}.left-pages i:nth-child(3){transform:rotateY(-21deg) translateZ(24px)}.left-pages i:nth-child(4){transform:rotateY(-16deg) translateZ(29px)}
.right-pages i:nth-child(1){transform:rotateY(31deg) translateZ(14px)}.right-pages i:nth-child(2){transform:rotateY(26deg) translateZ(19px)}.right-pages i:nth-child(3){transform:rotateY(21deg) translateZ(24px)}.right-pages i:nth-child(4){transform:rotateY(16deg) translateZ(29px)}

.book-spine {
	left: 155px;
	top: 0;
	width: 20px;
	height: 205px;
	background: linear-gradient(90deg, #b89f6a, #3a3025 38%, #1e1a14);
	transform: translateZ(8px);
}

@keyframes book-turn { to { transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-9deg) rotateY(360deg); } }

.urn-object {
	width: min(58vw, 430px);
	height: min(62vh, 470px);
	animation: urn-breathe 9s ease-in-out infinite;
}

.urn-cylinder {
	position: absolute;
	top: 42%;
	left: 50%;
	width: 170px;
	height: 190px;
	transform: translate(-50%, -50%);
	transform-style: preserve-3d;
	animation: urn-rotate 70s linear infinite;
}

.urn-cylinder span {
	position: absolute;
	left: 45px;
	width: 80px;
	height: 190px;
	background: linear-gradient(100deg, #b89f6a, #7a9e7e 52%, #4a6b4e);
	border: 1px solid rgba(240, 230, 212, .08);
	transform: rotateY(calc(var(--i) * 45deg)) translateZ(78px);
}
.urn-cylinder span:nth-child(1){--i:0}.urn-cylinder span:nth-child(2){--i:1}.urn-cylinder span:nth-child(3){--i:2}.urn-cylinder span:nth-child(4){--i:3}.urn-cylinder span:nth-child(5){--i:4}.urn-cylinder span:nth-child(6){--i:5}.urn-cylinder span:nth-child(7){--i:6}.urn-cylinder span:nth-child(8){--i:7}

.urn-lid,
.urn-foot,
.urn-slot {
	position: absolute;
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
}

.urn-lid {
	top: 22%;
	width: 220px;
	height: 52px;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 38%, #7a9e7e, #4a6b4e 58%, #3a3025 72%);
	border: 1px solid rgba(184, 159, 106, .5);
}

.urn-slot {
	top: 26%;
	width: 105px;
	height: 12px;
	border-radius: 50%;
	background: #0e0c09;
	box-shadow: inset 0 0 12px #000, 0 0 0 1px #b89f6a;
}

.urn-foot {
	top: 61%;
	width: 194px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(180deg, #7a9e7e, #3a3025);
	border: 1px solid rgba(184, 159, 106, .32);
}

@keyframes urn-rotate { to { transform: translate(-50%, -50%) rotateY(360deg); } }
@keyframes urn-breathe { 50% { transform: scale(1.018) rotateZ(.6deg); } }

.quill-object { animation: quill-bob 4.8s ease-in-out infinite; }
.quill-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 28px 38px rgba(0,0,0,.55)); }
@keyframes quill-bob { 50% { transform: translateY(-12px) rotateZ(.8deg); } }

.scales-object {
	width: min(66vw, 540px);
	height: min(52vh, 360px);
	animation: scale-sway 4.8s ease-in-out infinite;
}

.scale-column,
.scale-beam,
.chain,
.pan {
	position: absolute;
	left: 50%;
	background: #b89f6a;
}

.scale-column {
	top: 25%;
	width: 8px;
	height: 190px;
	transform: translateX(-50%);
	box-shadow: 0 0 20px rgba(184,159,106,.16);
}

.scale-column::before {
	content: "";
	position: absolute;
	top: -18px;
	left: 50%;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2px solid #b89f6a;
	transform: translateX(-50%);
}

.scale-beam {
	top: 27%;
	width: 330px;
	height: 5px;
	transform: translateX(-50%) rotate(-4deg);
	transform-origin: center;
}

.chain {
	top: 29%;
	width: 1px;
	height: 95px;
	background: rgba(184,159,106,.8);
}

.chain::before,
.chain::after {
	content: "";
	position: absolute;
	top: 0;
	width: 1px;
	height: 95px;
	background: rgba(184,159,106,.55);
}

.chain::before { transform: rotate(14deg); transform-origin: top; }
.chain::after { transform: rotate(-14deg); transform-origin: top; }
.chain-left { margin-left: -148px; height: 122px; }
.chain-left::before,.chain-left::after { height: 122px; }
.chain-right { margin-left: 150px; height: 72px; }
.chain-right::before,.chain-right::after { height: 72px; }

.pan {
	width: 112px;
	height: 20px;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 20%, #d4c8b0, #b89f6a 42%, #3a3025 90%);
	border: 1px solid #7a9e7e;
}

.pan-left { top: calc(29% + 122px); margin-left: -204px; transform: rotate(4deg); }
.pan-right { top: calc(29% + 72px); margin-left: 94px; transform: rotate(-3deg); }

@keyframes scale-sway { 50% { transform: rotateZ(1.2deg) translateY(-3px); } }

.closing-orbit span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 190px;
	height: 190px;
	border: 1px solid rgba(184, 159, 106, .16);
	border-radius: 50%;
	transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}

.closing-orbit span:nth-child(2) { --r: 60deg; width: 280px; height: 280px; border-color: rgba(122, 158, 126, .13); }
.closing-orbit span:nth-child(3) { --r: 120deg; width: 370px; height: 370px; border-color: rgba(240, 230, 212, .06); }

.closing-mark {
	margin-top: 3rem;
	font-size: 2rem;
	letter-spacing: .5em;
	text-align: center;
	color: #b89f6a;
	opacity: .55;
}

.chapter-content > *,
.hero-copy > * {
	opacity: 0;
	transform: translateY(30px);
}

.chapter-content.visible .chapter-numeral { animation: watermark-in .8s ease-out forwards; }
.chapter-content.visible .caption { animation: reveal-in .6s ease-out .12s forwards; }
.chapter-content.visible h3 { animation: reveal-in .6s ease-out .22s forwards; }
.chapter-content.visible p:not(.caption) { animation: reveal-in .6s ease-out .4s forwards; }
.chapter-content.visible p:nth-of-type(3) { animation-delay: .58s; }
.hero-copy.visible > * { animation: reveal-in .8s ease-out forwards; }
.hero-copy.visible h1 { animation-delay: .18s; }
.hero-copy.visible .hero-subtitle { animation-delay: .36s; }
.object-3d.visible { animation-name: object-in, var(--object-motion); animation-duration: 1s, var(--motion-duration, 90s); animation-delay: .3s, 1.3s; animation-fill-mode: forwards, none; animation-timing-function: ease-out, linear; animation-iteration-count: 1, infinite; }
.book-object.visible { --object-motion: none; }
.urn-object.visible { --object-motion: urn-breathe; --motion-duration: 9s; }
.quill-object.visible { --object-motion: quill-bob; --motion-duration: 4.8s; }
.scales-object.visible { --object-motion: scale-sway; --motion-duration: 4.8s; }

@keyframes reveal-in { to { opacity: 1; transform: translateY(0); } }
@keyframes watermark-in { to { opacity: .04; } }
@keyframes object-in { to { opacity: 1; transform: scale(1); } }

@media (max-width: 1200px) {
	.layer-fg { padding-left: 8vw; padding-right: 8vw; }
	.annotation { position: relative; top: auto; left: auto; right: auto; max-width: 680px; margin: 10vh auto -12vh; padding: 0 8vw; transform: rotate(-1deg); }
}

@media (max-width: 768px) {
	.layer-fg { padding-left: 5vw; padding-right: 5vw; }
	.object-3d { width: 88vw; transform: scale(.82); }
	.chapter-numeral { font-size: 20vw; top: -9vw; }
	.annotation { padding: 0 5vw; margin-bottom: -8vh; }
	.book-base { transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-9deg) scale(.78); }
}

@media (max-width: 480px) {
	body { scroll-snap-type: none; }
	.layer-bg,
	.layer-mid,
	.layer-fg { transform: translateZ(0) scale(1); }
	.layer-mid { min-height: 58vh; }
	.layer-fg { padding-top: 4vh; padding-bottom: 7vh; }
	.chapter-numeral { display: none; }
	.seal { width: 165px; height: 165px; }
	.object-3d { height: 310px; }
	.annotation { display: none; }
	.spine-line { opacity: .35; }
}