@layer layout {
	.site {
		display: flex;
		flex-direction: column;
		min-height: 100dvh;
	}

	.site-main {
		flex: 1;
		padding-block: var(--space-xl);
	}

	.home .site-main {
		padding-block: 0;
	}

	.wrap {
		width: min(100% - (var(--gutter) * 2), var(--wide));
		margin-inline: auto;
	}

	.entry,
	.archive-header,
	.search-header,
	.content-none {
		width: min(100%, var(--content));
	}

	.entry-list {
		display: grid;
		gap: var(--space-l);
	}

	.archive-header,
	.search-header {
		margin-block-end: var(--space-l);
	}

	.archive-description {
		margin-block-start: var(--space-s);
		color: var(--color-muted);
	}

	.search-form {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-xs);
		margin-block-start: var(--space-m);
	}

	.search-form .search-field {
		flex: 1 1 12rem;
		min-width: 0;
		padding: var(--space-xs) var(--space-s);
		border: 1px solid var(--color-line);
		border-radius: var(--radius);
		background: var(--color-surface);
		color: inherit;
	}

	.search-form .search-submit {
		padding: var(--space-xs) var(--space-s);
		border: 1px solid var(--color-ink);
		border-radius: var(--radius);
		background: var(--color-ink);
		color: var(--color-base);
		cursor: pointer;
	}

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

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

	.skip-link {
		position: absolute;
		inset-block-start: var(--space-s);
		inset-inline-start: var(--space-s);
		z-index: 10;
		transform: translateY(-200%);
		padding: var(--space-xs) var(--space-s);
		background: var(--color-ink);
		color: var(--color-base);
	}

	.skip-link:focus {
		transform: none;
	}

	.comments {
		margin-block-start: var(--space-l);
	}

	.comment-list {
		margin-block-start: var(--space-s);
		padding-inline-start: 1.25rem;
	}
}