@layer components {
	/* Footer: white, under a heavy rule, with one menu and a small line at the bottom. */
	.site-footer {
		margin-top: 2rem;
		border-top: 1px solid var(--color-ink);
		font-family: var(--font-sans);
		font-size: var(--text-small);
		line-height: 1.55;
	}

	.footer-grid {
		display: grid;
		gap: 2rem;
		padding-block: 2.5rem;
	}

	@media (min-width: 48rem) {
		.footer-grid {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		}

		.footer-about {
			grid-column: 1 / -1;
		}
	}

	@media (min-width: 64rem) {
		.footer-grid {
			grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.3fr);
			gap: 4rem;
		}

		.footer-about {
			grid-column: auto;
		}
	}

	.footer-logo {
		display: block;
		width: min(100%, 20rem);
	}

	.footer-logo img {
		display: block;
		width: 100%;
		height: auto;
	}

	.footer-about p {
		max-width: 28rem;
		margin-top: 1rem;
		font-family: var(--font-serif);
		font-size: var(--text-small);
	}

	/* Social media icons, each at least 24px to tap. */
	.footer-social {
		display: flex;
		gap: 1rem;
		margin-top: 1rem;
	}

	.footer-social a {
		display: inline-flex;
		align-items: center;
		min-width: 1.5rem;
		min-height: 1.5rem;
		color: var(--color-ink);
	}

	.footer-social a:hover {
		color: var(--color-muted);
	}

	.footer-social .icon {
		width: 1.25rem;
		height: 1.25rem;
	}

	.footer-links li + li {
		margin-top: 0.35rem;
	}

	.footer-links a {
		text-decoration: none;
	}

	.footer-links a:hover {
		text-decoration: underline;
	}

	.footer-contact li {
		display: flex;
		gap: 0.6rem;
		overflow-wrap: anywhere;
	}

	.footer-contact li + li {
		margin-top: 0.5rem;
	}

	.footer-contact .icon {
		width: 0.95rem;
		height: 0.95rem;
		margin-top: 0.25rem;
	}

	.footer-bar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem 2rem;
		padding-block: 1rem 1.25rem;
		color: var(--color-muted);
		font-size: var(--text-label);
	}

	.footer-grid + .container .footer-bar {
		border-top: 1px solid var(--color-rule);
	}

	.footer-bar ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 1.25rem;
	}

	.footer-bar .back-to-top {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		color: var(--color-ink);
		text-decoration: none;
	}

	.footer-bar .back-to-top:hover {
		text-decoration: underline;
	}

	.footer-bar .back-to-top .icon {
		width: 0.8rem;
		height: 0.8rem;
	}
}