@layer components {
	.site-foot {
		background-color: var(--color-bg-dark);
		border-block-start: 1px solid oklch(from white l c h / 8%);
	}

	.site-foot__body {
		display: flex;
		justify-content: space-between;
		padding-block-start: calc(var(--stack) * 4);
		padding-block-end: calc(var(--stack) * 3);
	}

	@media (max-width: 49.999em) {
		.site-foot__body {
			flex-direction: column;
			gap: calc(var(--stack) * 3);
		}
	}

	.site-foot__brand {
		display: flex;
		flex-direction: column;
		gap: var(--stack);
	}

	.site-foot__brand > a:first-child {
		display: inline-block;
		inline-size: 28px;
		block-size: 33px;
		color: var(--color-text-invert);
	}

	.site-foot__brand > p {
		font-size: 13px;
		line-height: 16px;
		color: var(--color-text-faint-invert);
	}

	.site-foot__social {
		display: flex;
		gap: var(--gutter);
	}

	.site-foot__social a {
		display: block;
		inline-size: 20px;
		block-size: 20px;
		color: var(--color-text-faint-invert);
		transition: color 0.3s ease;
	}

	.site-foot__social a:hover {
		color: var(--color-text-invert);
	}

	.site-foot__nav {
		display: flex;
		gap: calc(var(--gutter) * 3);
	}

	@media (max-width: 49.999em) {
		.site-foot__nav {
			flex-wrap: wrap;
			gap: calc(var(--gutter) * 2);
		}
	}

	.site-foot__nav > div {
		display: flex;
		flex-direction: column;
		gap: var(--stack);
	}

	.site-foot__nav h2 {
		font-size: 11px;
		font-weight: var(--font-weight-medium);
		letter-spacing: 0.1em;
		line-height: 14px;
		text-transform: uppercase;
		color: var(--color-text-faint-invert);
	}

	.site-foot__nav ul {
		display: flex;
		flex-direction: column;
		gap: var(--stack);
	}

	.site-foot__nav a {
		font-size: 13px;
		line-height: 16px;
		color: var(--color-text-muted-invert);
		text-decoration: none;
	}

	@media (hover) and (prefers-reduced-motion: no-preference) {
		.site-foot__nav ul > li {
			transition: opacity 0.3s ease;
		}

		.site-foot__nav ul:has(li:hover) > li:not(:hover) {
			opacity: 0.25;
		}
	}

	.site-foot__bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-block: calc(var(--stack) * 1.5);
		border-block-start: 1px solid oklch(from white l c h / 8%);
		font-size: 13px;
		line-height: 16px;
		color: var(--color-text-faint-invert);
	}

	.site-foot__legal {
		display: flex;
		gap: calc(var(--gutter) * 2);
	}

	.site-foot__legal a {
		font-size: 13px;
		line-height: 16px;
		color: var(--color-text-faint-invert);
		text-decoration: none;
	}
}