/* ==== Site footer — the colophon =======================================
   Shared by every page, linked after clone.css. Built in The Garden Suite's
   vocabulary: the brand book's paper ground and ink, one page rule inset to
   the 1360px measure, tracked small-caps labels over hairline link lists,
   the studio's line in the italic face, and the deep-chocolate band that
   closes the page the way the About band opens it. It replaces the theme's
   floated percentage columns (logo 10% / nav 30% / social 25%), which left
   the copyright floating in dead space and never lined up with the bands
   above. Everything here is scoped to .footer, so no other rule is touched.
   ====================================================================== */
.footer {
	position: relative;
	z-index: 1;
	padding: 0;
	background-color: #f8f3eb;
	color: #4d3b2c;
	font-family: "Wix Madefor Display", sans-serif;
}
.footer ::selection { background-color: #2A1202; color: #f8f3eb; }
.footer a { text-decoration: none; }
.footer a:focus-visible { outline: 1px solid #2A1202; outline-offset: 4px; }

.footer__inner {
	width: min(100% - 2 * clamp(1.25rem, 3.5vw, 3.75rem), 1360px);
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(3rem, 5.5vw, 4.5rem);
	border-top: 1px solid rgba(122, 90, 60, .32);
	display: grid;
	/* brand, then Navigate / Enquiries / Follow — Enquiries is given
	   the extra width so the email sits on one line */
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 3.5vw, 3.25rem);
	align-items: start;
}

/* the brand block: the lockup, and the studio's line in the italic face */
.footer__mark { display: block; width: clamp(5.75rem, 4.5rem + 3.5vw, 7rem); height: auto; }
.footer__sign {
	max-width: 17em;
	margin: clamp(1.4rem, 2.6vw, 2rem) 0 0;
	font-family: "Times Now", serif;
	font-weight: 200;
	font-style: italic;
	font-size: clamp(1rem, .92rem + .35vw, 1.1875rem);
	line-height: 1.35;
	color: #7a5a3c;
	text-wrap: pretty;
}

/* every column: the brand book's small-caps label over a hairline list */
.footer__label {
	margin: 0 0 .9rem;
	font-family: "Wix Madefor Display", sans-serif;
	font-size: .6875rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #6e5644;
}
.footer__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(122, 90, 60, .32); }
.footer__list li { border-bottom: 1px solid rgba(122, 90, 60, .32); transition: border-color .3s ease; }
.footer__list li:hover,
.footer__list li:focus-within { border-bottom-color: rgba(42, 18, 2, .55); }

/* the link: upper-case and tracked, with the drawn arrow held to the
   right; it slides in on hover and focus. The colour never lightens, so
   the row's contrast only ever rises when it is engaged. */
.footer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .8rem 0;
	font-family: "Wix Madefor Display", sans-serif;
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #2A1202;
}
/* the label may wrap to a second line on a narrow column, but it can
   never push the drawn arrow past the column edge */
.footer__link span { min-width: 0; overflow-wrap: anywhere; }
.footer__link::after {
	content: "";
	flex: none;
	width: 1.15em;
	height: .7em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 5h17M12.5.5 17 5l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 5h17M12.5.5 17 5l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: translateX(-6px);
	opacity: 0;
	transition: transform .35s cubic-bezier(.16, .84, .28, 1), opacity .35s ease;
}
.footer__link:hover,
.footer__link:focus-visible,
.footer__link:active { color: #2A1202; }
.footer__link:hover::after,
.footer__link:focus-visible::after { opacity: 1; transform: none; }

/* the chocolate band that closes the page, as the About band opens it */
.footer__legal { background-color: #2A1202; color: rgba(248, 243, 235, .78); }
.footer__legal-inner {
	width: min(100% - 2 * clamp(1.25rem, 3.5vw, 3.75rem), 1360px);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	padding: clamp(1.05rem, 1.7vw, 1.35rem) 0;
	font-size: .6875rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.footer__legal-inner p { margin: 0; }
.footer__legal-link {
	color: rgba(248, 243, 235, .78);
	padding-bottom: .15em;
	border-bottom: 1px solid transparent;
	transition: color .3s ease, border-color .3s ease;
}
.footer__legal-link:hover,
.footer__legal-link:focus-visible { color: #f8f3eb; border-bottom-color: rgba(248, 243, 235, .8); }
.footer__legal .footer__legal-link:focus-visible { outline-color: #f8f3eb; }

/* Below 1024px the brand takes the full width and the three columns
   share the row beneath it; below 680px everything stacks. */
@media screen and (max-width: 1024px) {
	.footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); }
	.footer__brand { grid-column: 1 / -1; }
	.footer__sign { max-width: 24em; }
}
@media screen and (max-width: 680px) {
	.footer__inner { grid-template-columns: minmax(0, 1fr); }
	.footer__brand { grid-column: 1; }
}