@layer marielco-footer {
	.marielco-footer {
		--marielco-focus-color: var(--marielco-white);
		background: var(--marielco-black);
		color: var(--marielco-white);
		padding-block: 2.375rem 1.25rem;
		font-size: var(--marielco-text-small);
	}

	.marielco-footer :where(p, h2, ul, dl, dd) {
		margin: 0;
	}

	.marielco-footer :where(ul) {
		padding: 0;
		list-style: none;
	}

	.marielco-footer :where(a, summary) {
		overflow-wrap: anywhere;
	}

	.marielco-footer__newsletter {
		display: grid;
		gap: 0;
		padding-block-end: 2.125rem;
		border-block-end: var(--marielco-border-width) solid var(--marielco-border-inverse);
	}

	.marielco-footer__eyebrow,
	.marielco-footer__heading {
		color: var(--marielco-text-inverse-muted);
		font-size: 0.625rem;
		font-weight: var(--marielco-weight-medium);
		letter-spacing: 0.075em;
		line-height: var(--marielco-line-body);
		text-transform: uppercase;
	}

	.marielco-footer__eyebrow {
		margin-block-end: 0.5625rem;
	}

	.marielco-footer__newsletter-title {
		max-inline-size: 38.125rem;
		font-size: clamp(1.75rem, 3.7vw, 3.625rem);
		font-weight: var(--marielco-weight-body);
		line-height: 1.02;
		letter-spacing: -0.035em;
	}

	.marielco-footer__main {
		display: grid;
		grid-template-areas: "social" "navigation" "contact";
	}

	.marielco-footer__social {
		grid-area: social;
		padding-block: 1.5625rem 1.4375rem;
		border-block-end: var(--marielco-border-width) solid var(--marielco-border-inverse);
		min-inline-size: 0;
	}

	.marielco-footer__social-list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem;
		margin-block-start: 0.875rem;
		margin-inline: -0.75rem;
	}

	.marielco-footer__social-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: var(--marielco-control-height);
		block-size: var(--marielco-control-height);
		color: inherit;
	}

	.marielco-footer__social-icon img {
		inline-size: 1.125rem;
		block-size: 1.125rem;
		filter: invert(1);
	}

	.marielco-footer__navigation {
		grid-area: navigation;
		min-inline-size: 0;
		border-block-end: var(--marielco-border-width) solid var(--marielco-border-inverse);
	}

	.marielco-footer__navigation summary {
		position: relative;
		display: flex;
		align-items: center;
		min-block-size: 3.625rem;
		padding-inline-end: 1.5rem;
		color: var(--marielco-white);
		cursor: pointer;
		list-style: none;
	}

	.marielco-footer__navigation summary::-webkit-details-marker {
		display: none;
	}

	.marielco-footer__navigation summary::before,
	.marielco-footer__navigation summary::after {
		content: "";
		position: absolute;
		inset-inline-end: 0;
		background: currentColor;
	}

	.marielco-footer__navigation summary::after {
		inline-size: 0.625rem;
		block-size: var(--marielco-border-width);
	}

	.marielco-footer__navigation summary::before {
		inset-inline-end: 0.28125rem;
		inline-size: var(--marielco-border-width);
		block-size: 0.625rem;
	}

	.marielco-footer__navigation[open] summary::before {
		display: none;
	}

	.marielco-footer__nav--primary {
		padding-block-end: 1.375rem;
	}

	.marielco-footer__menu {
		display: flex;
		flex-direction: column;
		gap: 0.8125rem;
	}

	.marielco-footer__menu .sub-menu {
		display: grid;
		gap: 0.8125rem;
		margin-block-start: 0.8125rem;
		padding-inline-start: 0.75rem;
	}

	.marielco-footer__contact {
		grid-area: contact;
		min-inline-size: 0;
		padding-block: 1.75rem 2.125rem;
	}

	.marielco-footer__contact-list {
		display: grid;
		gap: 1.125rem;
		margin-block-start: 1.25rem;
	}

	.marielco-footer__contact-list dt {
		color: var(--marielco-text-inverse-muted);
		margin-block-end: 0.3125rem;
	}

	.marielco-footer__market {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 1rem;
		min-block-size: 2.875rem;
		padding-block: 0.75rem;
		border-block: var(--marielco-border-width) solid var(--marielco-border-inverse);
		color: var(--marielco-text-inverse-muted);
	}

	.marielco-footer__wordmark {
		padding-block: 1.75rem 1.6875rem;
		font-family: var(--marielco-font-family);
		font-size: clamp(2.875rem, 16vw, 19rem);
		font-weight: var(--marielco-weight-body);
		line-height: 0.92;
		letter-spacing: -0.055em;
		white-space: nowrap;
	}

	.marielco-footer__bottom {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		padding-block-start: 0.9375rem;
		border-block-start: var(--marielco-border-width) solid var(--marielco-border-inverse);
		color: var(--marielco-text-inverse-muted);
	}

	.marielco-footer__nav--legal .marielco-footer__menu {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.75rem 1.5rem;
	}

	@media (min-width: 48rem) {
		.marielco-footer {
			padding-block: 4.125rem 1.625rem;
		}
		.marielco-footer__newsletter {
			padding-block-end: 4.125rem;
		}
		.marielco-footer__eyebrow {
			margin-block-end: 0.875rem;
		}
		.marielco-footer__newsletter-title {
			line-height: 0.99;
		}
		.marielco-footer__market {
			min-block-size: 3.625rem;
		}
		.marielco-footer__wordmark {
			padding-block: 2.375rem 2.625rem;
			font-size: clamp(4.375rem, 12.2vw, 14.5rem);
			line-height: 0.82;
		}
		.marielco-footer__bottom {
			flex-direction: row;
			justify-content: space-between;
			align-items: baseline;
			gap: 1.875rem;
			padding-block-start: 1.25rem;
		}
	}

	@media (min-width: 64rem) {
		.marielco-footer__newsletter {
			grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
			gap: 6.25rem;
			align-items: end;
		}
		.marielco-footer__main {
			grid-template-areas: none;
			grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
			gap: 4.375rem;
			padding-block: 3.5rem 4.375rem;
		}
		.marielco-footer__main > * {
			grid-area: auto;
			padding-block: 0;
			border-block-end: 0;
		}
		.marielco-footer__contact {
			order: 1;
		}
		.marielco-footer__navigation {
			order: 2;
		}
		.marielco-footer__social {
			order: 3;
		}
		.marielco-footer__navigation summary {
			min-block-size: 0;
			margin-block-end: 1.25rem;
			padding-inline-end: 0;
			color: var(--marielco-text-inverse-muted);
		}
		.marielco-footer__navigation summary::before,
		.marielco-footer__navigation summary::after {
			display: none;
		}
		.marielco-footer__nav--primary {
			padding-block-end: 0;
		}
	}

	@media (forced-colors: active) {
		.marielco-footer__social-icon img {
			filter: none;
		}
	}
}