@layer layout {
	.site {
		display: flex;
		min-block-size: 100vh;
		flex-direction: column;
	}

	.site-main {
		inline-size: 100%;
		flex: 1;
	}

	.fg-container {
		inline-size: min(
			calc(100% - (var(--fg-container-gutter) * 2)),
			var(--fg-container-main)
		);
		margin-inline: auto;
	}

	.fg-container--visual {
		max-inline-size: var(--fg-container-visual);
	}

	.fg-container--reading {
		max-inline-size: var(--fg-container-reading);
	}

	.fg-grid {
		display: grid;
		grid-template-columns: repeat(var(--fg-grid-columns), minmax(0, 1fr));
		gap: var(--fg-grid-gap);
	}

	.site-header {
		position: sticky;
		inset-block-start: 0;
		z-index: var(--fg-z-header);
		isolation: isolate;
		border-block-end: var(--fg-border-width) solid transparent;
		background: transparent;
		transition: border-color var(--fg-duration-standard) var(--fg-easing-standard);
	}

	.site-header::before {
		position: absolute;
		inset: 0;
		z-index: -1;
		background: transparent;
		content: "";
		pointer-events: none;
		transition: background-color var(--fg-duration-standard) var(--fg-easing-standard);
	}

	.site-header.is-scrolled,
	.site-header[data-scrolled="true"] {
		border-block-end-color: var(--fg-color-border);
	}

	.site-header.is-scrolled::before,
	.site-header[data-scrolled="true"]::before {
		background: var(--fg-color-header-scrolled);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	.site-header__inner {
		display: flex;
		min-block-size: var(--fg-header-height);
		align-items: center;
		justify-content: space-between;
		gap: var(--fg-space-5);
		transition: min-block-size var(--fg-duration-standard) var(--fg-easing-standard);
	}

	.site-header.is-scrolled .site-header__inner,
	.site-header[data-scrolled="true"] .site-header__inner {
		min-block-size: var(--fg-header-height-scrolled);
	}

	.admin-bar .site-header {
		inset-block-start: 2.875rem;
	}

	.site-branding {
		position: relative;
		z-index: calc(var(--fg-z-header) + 1);
		flex: 0 0 auto;
	}

	.site-branding__logo-link,
	.custom-logo-link {
		display: inline-flex;
		min-block-size: 2.75rem;
		align-items: center;
		max-inline-size: 100%;
		text-decoration: none;
	}

	.site-branding__logo-viewport {
		display: block;
		inline-size: clamp(8.75rem, 34vw, 10.25rem);
		aspect-ratio: 15 / 2;
		overflow: hidden;
	}

	.site-branding__logo {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		max-inline-size: none;
		object-fit: cover;
		object-position: center;
	}

	.custom-logo {
		display: block;
		inline-size: auto;
		block-size: auto;
		max-inline-size: 10.25rem;
		max-block-size: 2.75rem;
	}

	.content-area,
	.error-404,
	.no-results,
	.entry {
		padding-block: var(--fg-section-space-compact);
	}

	.entry-header + .entry-content,
	.entry-header + .entry-summary,
	.page-header + .entry,
	.entry + .entry,
	.entry-content > * + *,
	.comments-area > * + * {
		margin-block-start: var(--fg-space-5);
	}

	.entry-meta,
	.entry-footer {
		display: flex;
		gap: var(--fg-space-2) var(--fg-space-4);
		color: var(--fg-color-text-muted);
		font-size: var(--fg-font-size-sm);
		flex-wrap: wrap;
	}

	.entry-header > * + *,
	.entry-content + .entry-footer {
		margin-block-start: var(--fg-space-3);
	}

	.site-footer {
		border-block-start: var(--fg-border);
		background: var(--fg-color-surface-elevated);
	}

	@media (min-width: 48rem) {
		.site-branding__logo-viewport {
			inline-size: 10.75rem;
		}

		.custom-logo {
			max-inline-size: 10.75rem;
		}
	}

	@media (min-width: 48.9375rem) {
		.admin-bar .site-header {
			inset-block-start: 2rem;
		}
	}

	@media (min-width: 64rem) {
		.site-branding__logo-viewport {
			inline-size: clamp(10.75rem, 13vw, 11.75rem);
		}

		.custom-logo {
			max-inline-size: 11.75rem;
		}
	}
}