/* ============================================
   Footer — where sand meets night
   ============================================ */

.site-footer {
	padding-block: 3rem 2rem;
	background: linear-gradient(
		var(--bg-black),
		rgba(140, 89, 51, 0.15)
	);
	/* No border-top: the sand-glow gradient above already separates the
	   footer from the content, so a hairline rule on top of it is redundant.
	   The page dissolves into the glow instead of hitting a hard line. */
}

.site-footer__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
}

.site-footer__wordmark {
	display: block;
	text-decoration: none;
}

.site-footer__wordmark img {
	height: 1.4rem; /* width auto-derives from the 485:126 viewBox */
	width: auto;
	display: block;
	transition: opacity 0.3s ease;
}

.site-footer__wordmark:hover img {
	opacity: 0.8;
}

.site-footer__links {
	display: flex;
	gap: 1.5rem;
	list-style: none;
}

.site-footer__links a {
	font-size: 0.85rem;
	color: var(--text-muted);
}

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

.site-footer__legal {
	width: 100%;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--divider);
	font-size: 0.8rem;
	color: var(--text-muted);
}

@media (max-width: 48rem) {
	.site-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}