/* ===================================================================
	 Footer
	 =================================================================== */

footer#footer {
	position: relative;
	border-block-start: 1px solid var(--color-line);
	padding-block: var(--space-xl) var(--space-lg);
	background: var(--color-bg-sunken);
}
.footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: var(--space-xl);
}
.footer__brand { display: grid; gap: var(--space-sm); align-content: start; }
.footer__brand .logo { font-family: var(--font-mono); font-size: var(--step-sm); letter-spacing: 0.02em; }
.footer__brand p { color: var(--color-fg-muted); font-size: var(--step-xs); max-width: 38ch; }
.footer__col h5 { font-family: var(--font-mono); font-size: var(--step-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-fg-dim); margin-block-end: var(--space-sm); }
.footer__col ul { display: grid; gap: var(--space-xs); }
.footer__col a { color: var(--color-fg-muted); font-size: var(--step-xs); transition: color var(--dur); }
.footer__col a:hover { color: var(--color-accent); }
.footer__bottom {
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm);
	margin-block-start: var(--space-xl);
	padding-block-start: var(--space-lg);
	border-block-start: 1px solid var(--color-line);
	font-family: var(--font-mono);
	font-size: var(--step-2xs);
	color: var(--color-fg-dim);
	letter-spacing: 0.06em;
}

img.logo-footer {
	height: 90px;
	margin: 0 0 -30px -20px;
}

@media (max-width: 880px) {
	.footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
}
@media (max-width: 560px) {
	.footer__grid { grid-template-columns: 1fr; }
}