/* Manifesto — scroll-driven text pages with image plates */

/* Title page — title sits high in the cloud band, gradient picks up cloud color */
.title-page {
	min-height: 100svh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg);
	position: relative;
	padding: var(--space-4xl) var(--space-xl);
}

/* Decorative page border */
.title-page__border {
	position: absolute;
	inset: 32px;
	pointer-events: none;
}

.title-page__border-top,
.title-page__border-bottom {
	position: absolute;
	left: 24px;
	right: 24px;
	height: 0;
	border-top: 1.5px solid var(--ink);
	opacity: 0.18;
}

.title-page__border-top::after,
.title-page__border-bottom::after {
	content: '';
	position: absolute;
	left: 4px;
	right: 4px;
	height: 0;
	border-top: 0.5px solid var(--ink);
	opacity: 0.5;
}

.title-page__border-top { top: 0; }
.title-page__border-top::after { top: 4px; }
.title-page__border-bottom { bottom: 0; }
.title-page__border-bottom::after { bottom: 4px; top: auto; border-top: none; border-bottom: 0.5px solid var(--ink); }

.title-page__border-left,
.title-page__border-right {
	position: absolute;
	top: 24px;
	bottom: 24px;
	width: 0;
	border-left: 1.5px solid var(--ink);
	opacity: 0.18;
}

.title-page__border-left::after,
.title-page__border-right::after {
	content: '';
	position: absolute;
	top: 4px;
	bottom: 4px;
	width: 0;
	border-left: 0.5px solid var(--ink);
	opacity: 0.5;
}

.title-page__border-left { left: 0; }
.title-page__border-left::after { left: 4px; }
.title-page__border-right { right: 0; }
.title-page__border-right::after { right: 4px; left: auto; border-left: none; border-right: 0.5px solid var(--ink); }

/* Corner ornaments */
.title-page__corner {
	position: absolute;
	width: 28px;
	height: 28px;
	color: var(--ink);
	opacity: 0.35;
}

.title-page__corner--tl { top: -2px; left: -2px; }
.title-page__corner--tr { top: -2px; right: -2px; }
.title-page__corner--bl { bottom: -2px; left: -2px; }
.title-page__corner--br { bottom: -2px; right: -2px; }

/* Center top teardrop ornament */
.title-page__border-center {
	position: absolute;
	top: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 10px;
	height: 10px;
	color: var(--ink);
	opacity: 0.25;
}

/* Inner content */
.title-page__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	padding: 0 var(--space-xl);
	position: relative;
	z-index: 2;
}

.title-page__flourish {
	width: 320px;
	opacity: 0.7;
	pointer-events: none;
	user-select: none;
}

.title-page__flourish--flip {
	transform: scaleY(-1);
}

.title-page__flourish--sm {
	width: 160px;
	opacity: 0.1;
}

.title-page__title {
	font-family: var(--serif);
	font-size: 5.5rem;
	font-weight: 300;
	font-style: italic;
	color: var(--ink);
	letter-spacing: -0.02em;
	line-height: 1;
}

.title-page__subtitle {
	font-family: var(--serif-sc);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--secondary);
	opacity: 0.8;
	text-align: center;
	margin-top: var(--space-md);
}


/* Image break */
.image-page {
	height: var(--vh-stable, 100svh);
	overflow: hidden;
	padding: 0;
	background: var(--ink);
}

/* Text pages — full viewport, centered */
.text-page {
	min-height: 100svh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4xl) var(--space-xl);
	background: var(--bg);
	position: relative;
}

.text-page__header-ornament {
	display: block;
	margin: 0 auto var(--space-lg);
	width: 180px;
	opacity: 0.1 !important;
	pointer-events: none;
	user-select: none;

}

.text-page__page-num {
	position: absolute;
	bottom: var(--space-lg);
	right: var(--space-xl);
	font-family: var(--serif);
	font-size: 0.7rem;
	font-style: italic;
	color: var(--ink);
	opacity: 0.15;
	letter-spacing: 0.05em;
}

.text-page__footer-ornament {
	position: absolute;
	bottom: var(--space-xl);
	left: 50%;
	transform: translateX(-50%);
	width: 160px;
	opacity: 0.05;
	pointer-events: none;
	user-select: none;

}

.text-page__inner {
	max-width: 580px;
	text-align: center;
}

.text-page__label {
	font-family: var(--serif-sc);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--amber);
	margin-bottom: var(--space-lg);
}

.text-page__headline {
	font-size: 3.2rem;
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin-bottom: var(--space-xl);
	color: var(--ink);
}

.text-page__line {
	width: 32px;
	height: 1px;
	background: var(--divider);
	margin: 0 auto var(--space-xl);
}

.text-page__body {
	font-size: 1.1rem;
	line-height: 2;
	color: var(--ink);
	opacity: 0.48;
}

/* Small ornament between label and headline */
.text-page__label-ornament {
	display: block;
	margin: 0 auto var(--space-lg);
	width: 48px;
	opacity: 0.7 !important;
	pointer-events: none;
	user-select: none;
}

.text-page__label-ornament--flip {
	transform: scaleX(-1);
}

/* Ornament images shared styles */
.text-page__accent {
	display: block;
	margin: 0 auto var(--space-md);
	width: 36px;
	opacity: 0.15;
	pointer-events: none;
	user-select: none;

}

.text-page__accent--flip {
	transform: scaleX(-1);
}

.text-page__ornament {
	display: block;
	margin: 0 auto;
	pointer-events: none;
	user-select: none;

	opacity: 0.12;
}

.text-page__ornament--sm {
	width: 140px;
	margin-bottom: var(--space-lg);
}

.text-page__ornament--footer {
	width: 200px;
	margin-top: var(--space-2xl);
	opacity: 0.1;
}

.text-page__divider {
	display: block;
	width: auto;
	height: 46px;
	opacity: 0.7 !important;
	pointer-events: none;
	user-select: none;
	margin: 0 auto var(--space-xl);
}

/* Divider pages between sections */
.divider-page {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg) var(--space-xl);
	background: var(--bg);
}

.divider-page--alt {
	background: var(--white);
}

.divider-page__ornament {
	display: block;
	margin: 0 auto;
	width: 280px;
	opacity: 0.1;
	pointer-events: none;
	user-select: none;

}

/* Alternating background for page breaks */
.text-page--alt {
	background: var(--white);
}

/* Colophon */
.text-page__colophon {
	position: absolute;
	bottom: var(--space-xl);
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--serif);
	font-size: 0.8rem;
	font-style: italic;
	color: var(--ink);
	text-decoration: none;
	opacity: 0.25;
	white-space: nowrap;
	transition: opacity 0.3s;
}

.text-page__colophon:hover {
	opacity: 0.5;
}

@media (max-width: 768px) {
	.title-page {
		padding: 24px;
	}

	.title-page__border {
		inset: 16px;
	}

	.title-page__title {
		font-size: 3.2rem;
	}

	.title-page__flourish {
		width: 220px;
	}

	.text-page__ornament--sm {
		width: 100px;
	}

	.text-page__ornament--footer {
		width: 140px;
	}

	.text-page__divider {
		width: auto;
		height: 33px;
	}

	.divider-page__ornament {
		width: 180px;
	}

	.text-page__accent {
		width: 28px;
	}

	.title-page__corner {
		width: 20px;
		height: 20px;
	}

	.text-page {
		padding: var(--space-3xl) var(--space-lg);
	}

	.text-page__headline {
		font-size: 2.2rem;
	}

	.text-page__body {
		font-size: 1rem;
	}
}