/* Layout primitives: container, sections, photos, plain page heads, post lists. */
.wrap {
	width: var(--wrap);
	margin-inline: auto;
}

.section {
	padding-block: var(--space-section);
}

.section--tight {
	padding-block: clamp(48px, 6vw, 96px);
}

.site-main {
	display: block;
	outline: none;
}

/* Photo: explicit ratio set by the component, cover fit, optional parallax travel. */
.photo {
	position: relative;
	overflow: hidden;
	background: var(--surface);
}

.photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photo--parallax img {
	position: absolute;
	inset-inline: 0;
	inset-block-start: -8%;
	height: 116%;
}

.prose-photo {
	aspect-ratio: 16 / 9;
	border-radius: var(--r-card);
	margin-block-end: var(--space-lg);
}

/* Plain page head for the fallback templates */
.page-head {
	padding-block: calc(var(--header-h) / 2 + clamp(40px, 6vw, 88px)) clamp(24px, 3vw, 48px);
	background: var(--surface);
}

.page-head__title {
	font-size: var(--fs-page-h1);
	line-height: 1.04;
	max-inline-size: 18ch;
}

.page-head__lede {
	margin-block-start: var(--space-md);
	color: var(--muted);
}

/* Divided post list */
.post-list {
	max-inline-size: 860px;
}

.post-list__item {
	padding-block: var(--space-md);
	border-block-start: 1px solid var(--line);
}

.post-list__item:last-child {
	border-block-end: 1px solid var(--line);
}

.post-list__title {
	font-size: clamp(1.375rem, 2.2vw, 1.875rem);
	line-height: 1.15;
}

.post-list__title a {
	text-decoration: none;
}

.post-list__title a:hover {
	color: var(--accent);
	text-decoration: underline;
}

.post-list__excerpt {
	margin-block-start: var(--space-xs);
	color: var(--muted);
	max-inline-size: 65ch;
}

.pagination {
	margin-block-start: var(--space-lg);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: 14px;
	border-radius: var(--r-pill);
	text-decoration: none;
	font-weight: 600;
}

.pagination .page-numbers.current {
	background: var(--accent);
	color: var(--white);
}

.pagination a.page-numbers:hover {
	background: var(--accent-wash);
}