.site {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site-main {
	flex: 1 0 auto;
	width: min(calc(100% - (var(--hut-container-padding) * 2)), var(--hut-container-lg));
	margin-inline: auto;
	padding-block: var(--hut-space-2xl);
}

.site-main--home {
	width: min(calc(100% - (var(--hut-container-padding) * 2)), var(--hut-container-xl));
}

.site-header,
.site-footer {
	padding-block: var(--hut-space-md);
	background: rgb(255 253 248 / 92%);
	border-color: var(--hut-color-border);
}

.site-header__inner,
.site-footer__inner {
	width: min(calc(100% - (var(--hut-container-padding) * 2)), var(--hut-container-lg));
	margin-inline: auto;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	border-bottom: 1px solid var(--hut-color-border);
	backdrop-filter: blur(12px);
}

.site-footer {
	margin-top: auto;
	border-top: 1px solid var(--hut-color-border);
	background:
		linear-gradient(180deg, rgb(13 27 42 / 96%), var(--hut-color-ink-900));
	color: rgb(255 253 248 / 78%);
	font-size: var(--hut-font-size-sm);
}

.site-footer__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hut-space-sm) var(--hut-space-lg);
	align-items: center;
	justify-content: space-between;
}

.site-footer__meta p {
	margin-block: 0;
}

.site-footer__credit {
	color: rgb(255 253 248 / 58%);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hut-space-md) var(--hut-space-lg);
}

.site-branding {
	min-width: 12rem;
}

.site-title {
	margin: 0;
	font-family: var(--hut-font-heading);
	font-size: var(--hut-font-size-lg);
	font-weight: 700;
	line-height: var(--hut-line-height-tight);
}

.site-title a {
	color: var(--hut-color-text);
	text-decoration: none;
	transition: color var(--hut-transition-duration) var(--hut-transition-timing);
}

.site-title a:hover {
	color: var(--hut-color-link-hover);
}

.container {
	width: min(calc(100% - (var(--hut-container-padding) * 2)), var(--hut-container-lg));
	margin-inline: auto;
}

.container--narrow {
	max-width: var(--hut-container-sm);
}

.container--wide {
	max-width: var(--hut-container-xl);
}

.entry-header,
.page-header {
	margin-block-end: var(--hut-space-lg);
}

.entry-content > * + * {
	margin-block-start: var(--hut-space-md);
}

@media (min-width: 48rem) {
	:root {
		--hut-container-padding: 1.5rem;
	}
}

@media (min-width: 64rem) {
	.site-main {
		padding-block: var(--hut-space-3xl);
	}

	.site-footer {
		padding-block: var(--hut-space-xl);
	}
}