/* layout.css — Page section layouts: asymmetric, editorial */

.page-frame {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 var(--rv-space-24);
	overflow-x: hidden;
}

@media (min-width: 768px) {
	.page-frame {
		padding: 0 var(--rv-space-48);
	}
}

/* ---------- Nav ---------- */

.site-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--rv-space-16) 0;
	border-bottom: 1px solid var(--rv-border-muted);
}

.site-nav__wordmark {
	font-weight: var(--rv-weight-bold);
	font-size: 18px;
	color: var(--rv-text-primary);
	letter-spacing: -0.02em;
}

.site-nav__links {
	display: flex;
	gap: var(--rv-space-24);
	list-style: none;
	flex-wrap: wrap;
}

@media (max-width: 480px) {
	.site-nav__links {
		gap: var(--rv-space-12) var(--rv-space-16);
	}
}

.site-nav__links a {
	font-size: var(--rv-size-caption);
	font-weight: var(--rv-weight-medium);
	color: var(--rv-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.site-nav__links a:hover {
	color: var(--rv-text-primary);
}

/* ---------- Hero ---------- */

.hero {
	padding: var(--rv-space-80) 0 var(--rv-space-64);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rv-space-48);
	min-width: 0;
}

.hero > * {
	min-width: 0;
}

@media (min-width: 768px) {
	.hero {
		grid-template-columns: 7fr 5fr;
		align-items: start;
		padding: 96px 0 var(--rv-space-80);
	}
}

.hero__copy {
	max-width: 540px;
}

.hero__headline {
	font-size: var(--rv-size-display);
	font-weight: var(--rv-weight-bold);
	line-height: var(--rv-leading-display);
	letter-spacing: -0.025em;
	color: var(--rv-text-primary);
	margin-bottom: var(--rv-space-16);
}

@media (min-width: 768px) {
	.hero__headline {
		font-size: var(--rv-font-size-3xl);
	}
}

.hero__subtitle {
	font-size: 18px;
	line-height: 1.55;
	color: var(--rv-text-secondary);
	max-width: 460px;
	margin-bottom: var(--rv-space-32);
}

.hero__actions {
	display: flex;
	gap: var(--rv-space-12);
	flex-wrap: wrap;
}

.hero__aside {
	margin-top: var(--rv-space-16);
	font-size: var(--rv-size-caption);
	color: var(--rv-text-muted);
}

.hero__aside-link {
	color: var(--rv-color-accent);
	font-weight: var(--rv-weight-medium);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Agent Flow (3-step staggered timeline) ---------- */

.agent-flow {
	padding: var(--rv-space-80) 0;
	border-top: 1px solid var(--rv-border-muted);
}

.section-label {
	display: block;
	font-size: var(--rv-size-caption);
	font-weight: var(--rv-weight-semibold);
	color: var(--rv-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--rv-space-8);
}

.section-heading {
	font-size: var(--rv-size-title);
	font-weight: var(--rv-weight-bold);
	line-height: var(--rv-leading-title);
	letter-spacing: -0.02em;
	color: var(--rv-text-primary);
	margin-bottom: var(--rv-space-48);
	max-width: 520px;
}

.timeline {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rv-space-32);
}

@media (min-width: 768px) {
	.timeline {
		grid-template-columns: 1fr 1fr 1fr;
		gap: var(--rv-space-24);
	}

	/* Stagger: offset each step vertically */
	.timeline__step:nth-child(2) {
		margin-top: var(--rv-space-40);
	}

	.timeline__step:nth-child(3) {
		margin-top: var(--rv-space-80);
	}
}

.timeline__step {
	position: relative;
	padding-left: var(--rv-space-24);
}

.timeline__step::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 0;
	width: 2px;
	background: var(--rv-border);
}

.timeline__number {
	font-family: var(--rv-font-code);
	font-size: var(--rv-size-caption);
	font-weight: var(--rv-weight-medium);
	color: var(--rv-color-accent);
	margin-bottom: var(--rv-space-8);
}

.timeline__title {
	font-size: 18px;
	font-weight: var(--rv-weight-semibold);
	color: var(--rv-text-primary);
	margin-bottom: var(--rv-space-8);
}

.timeline__desc {
	font-size: var(--rv-size-body);
	color: var(--rv-text-secondary);
	line-height: var(--rv-leading-body);
}

/* ---------- Curate (2/3 + 1/3 split) ---------- */

.curate {
	padding: var(--rv-space-80) 0;
	border-top: 1px solid var(--rv-border-muted);
}

.curate__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rv-space-40);
}

@media (min-width: 768px) {
	.curate__grid {
		grid-template-columns: 2fr 1fr;
		gap: var(--rv-space-48);
	}
}

.curate__prose {
	max-width: 580px;
}

.curate__prose p {
	color: var(--rv-text-secondary);
	margin-bottom: var(--rv-space-16);
}

.curate__prose p:last-child {
	margin-bottom: 0;
}

.curate__aside {
	display: flex;
	flex-direction: column;
	gap: var(--rv-space-16);
}

.curate__fact {
	padding: var(--rv-space-16) var(--rv-space-20);
	background: var(--rv-surface-secondary);
	border-radius: var(--rv-radius-medium);
	border-left: 3px solid var(--rv-color-accent);
}

.curate__fact-label {
	font-size: var(--rv-size-caption);
	font-weight: var(--rv-weight-medium);
	color: var(--rv-text-muted);
	margin-bottom: var(--rv-space-4);
}

.curate__fact-value {
	font-size: 18px;
	font-weight: var(--rv-weight-semibold);
	color: var(--rv-text-primary);
}

/* ---------- Features (editorial: varying sizes) ---------- */

.features {
	padding: var(--rv-space-80) 0;
	border-top: 1px solid var(--rv-border-muted);
}

.features__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rv-space-24);
}

@media (min-width: 768px) {
	.features__grid {
		grid-template-columns: 7fr 5fr;
	}

	/* Large feature spans the left column, two rows tall */
	.feature--large {
		grid-row: 1 / 3;
	}
}

/* ---------- Open Source ---------- */

.open-source {
	padding: var(--rv-space-96) 0 var(--rv-space-80);
	border-top: 1px solid var(--rv-border-muted);
	text-align: left;
}

@media (min-width: 768px) {
	.open-source {
		max-width: 640px;
	}
}

.open-source__headline {
	font-size: var(--rv-size-title);
	font-weight: var(--rv-weight-bold);
	line-height: var(--rv-leading-title);
	letter-spacing: -0.02em;
	color: var(--rv-text-primary);
	margin-bottom: var(--rv-space-16);
}

.open-source__body {
	color: var(--rv-text-secondary);
	margin-bottom: var(--rv-space-24);
	max-width: 480px;
}

.open-source__badges {
	display: flex;
	gap: var(--rv-space-12);
	align-items: center;
	flex-wrap: wrap;
}

/* ---------- Footer ---------- */

.site-footer {
	padding: var(--rv-space-32) 0;
	border-top: 1px solid var(--rv-border-muted);
	display: flex;
	flex-direction: column;
	gap: var(--rv-space-16);
}

@media (min-width: 768px) {
	.site-footer {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

.site-footer__links {
	display: flex;
	gap: var(--rv-space-12) var(--rv-space-24);
	list-style: none;
	flex-wrap: wrap;
}

.site-footer__links a {
	font-size: var(--rv-size-caption);
	color: var(--rv-text-secondary);
}

.site-footer__links a:hover {
	color: var(--rv-text-primary);
}

.site-footer__attribution {
	font-size: var(--rv-size-caption);
	color: var(--rv-text-muted);
}

/* ---------- Legal pages (Impressum, Privacy) ---------- */

.legal-page {
	padding: var(--rv-space-80) 0 var(--rv-space-64);
	max-width: 640px;
}

.legal-page__title {
	font-size: var(--rv-size-title);
	font-weight: var(--rv-weight-bold);
	line-height: var(--rv-leading-title);
	letter-spacing: -0.02em;
	color: var(--rv-text-primary);
	margin-bottom: var(--rv-space-8);
}

.legal-page__updated {
	font-size: var(--rv-size-caption);
	color: var(--rv-text-muted);
	margin-bottom: var(--rv-space-48);
}

.legal-page__section {
	margin-bottom: var(--rv-space-32);
}

.legal-page__section:last-child {
	margin-bottom: 0;
}

.legal-page__heading {
	font-size: 18px;
	font-weight: var(--rv-weight-semibold);
	color: var(--rv-text-primary);
	margin-bottom: var(--rv-space-8);
}

.legal-page__section p {
	color: var(--rv-text-secondary);
	line-height: var(--rv-leading-body);
	margin-bottom: var(--rv-space-8);
}

.legal-page__section p:last-child {
	margin-bottom: 0;
}

.legal-page__list {
	color: var(--rv-text-secondary);
	line-height: var(--rv-leading-body);
	padding-left: var(--rv-space-20);
	margin-bottom: var(--rv-space-8);
}

.legal-page__list li {
	margin-bottom: var(--rv-space-8);
}

.legal-page__list li:last-child {
	margin-bottom: 0;
}

.legal-page__list .legal-page__list {
	margin-top: var(--rv-space-8);
	margin-bottom: 0;
}

/* ---------- Scroll reveal ---------- */
/* Hidden state only activates after JS sets .js on <html> — no-JS = fully visible */

.js .reveal {
	opacity: 0;
	transform: translateY(12px);
}

.js .reveal--visible {
	opacity: 1;
	transform: translateY(0);
	transition: opacity var(--rv-duration-normal) var(--rv-easing-default), transform
		var(--rv-duration-normal) var(--rv-easing-default);
}