/* ===========================================================================
   footer-statement-mark — the wordmark IS the bottom of the page
   ---------------------------------------------------------------------------
   Scope: .vbs-footer-statement-mark
   Depends on: css/tokens.css, css/base.css
   Contains no literal colour, font, size, radius, shadow or duration.

   Structure: an inverted band. Contact detail sits large on the left, three
   numbered link columns step down to the right on a diagonal, a hairline
   micro-bar carries the legal line, and an enormous wordmark closes the page
   flush against its bottom edge.

   The mark is SVG <text> with textLength = the viewBox width and
   lengthAdjust="spacing": the word is forced to span the column exactly, and
   the difference between its natural width and that span is absorbed as
   tracking. That is the only technique that survives every preset — a heavy
   uppercase grotesque lands nearly tight, a 300-weight face spreads airily,
   and neither can ever overflow or clip. Its size is a multiple of a FIXED
   type token (h3), never the fluid display step: inside a scaled viewBox a
   vw-based clamp would shrink the glyphs while the span stayed put, and the
   word would fall apart into spaced letters on a phone.
   ========================================================================= */

.vbs-footer-statement-mark__top {
	display: grid;
	gap: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 64rem) {
	.vbs-footer-statement-mark__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
		gap: clamp(3rem, 6vw, 5.5rem);
	}
}

/* --- contact -------------------------------------------------------------- */
.vbs-footer-statement-mark__address {
	font-style: normal;
	margin-block-start: 1.25rem;
	color: var(--vb-color-ink);
	max-width: 24ch;
}

.vbs-footer-statement-mark__hours {
	margin-block-start: clamp(1.75rem, 3vw, 2.25rem);
	max-width: 26rem;
}

.vbs-footer-statement-mark__hours-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1.5rem;
	padding-block: 0.55rem;
	border-block-start: var(--vb-border-hair) solid var(--vb-color-rule);
}
.vbs-footer-statement-mark__hours-row dt {
	font-size: var(--vb-fs-small);
	line-height: var(--vb-lh-small);
	color: var(--vb-color-mute);
}
.vbs-footer-statement-mark__hours-row dd {
	font-size: var(--vb-fs-small);
	line-height: var(--vb-lh-small);
	color: var(--vb-color-ink);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.vbs-footer-statement-mark__reach {
	margin-block-start: clamp(1.75rem, 3vw, 2.25rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.vbs-footer-statement-mark__reach-link {
	font-family: var(--vb-font-display);
	font-size: var(--vb-fs-h3);
	line-height: var(--vb-lh-h3);
	letter-spacing: var(--vb-ls-h3);
	font-weight: var(--vb-weight-heading);
	color: var(--vb-color-ink);
	max-width: 100%;
	overflow-wrap: anywhere;
	padding-block-end: 0.1em;
	border-block-end: var(--vb-border-hair) solid var(--vb-color-rule);
	transition: color var(--vb-dur-base) var(--vb-ease-out-soft),
	            border-color var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-footer-statement-mark__reach-link:hover {
	color: var(--vb-color-accent);
	border-block-end-color: var(--vb-color-accent);
}

/* --- link columns, stepped ------------------------------------------------
   The stagger is the whole gesture: at desk width each column drops one step
   further than the last, so the cluster reads as a diagonal running into the
   mark below. It collapses to a flat row the moment the columns get narrow,
   because a stepped column on a phone is just misaligned. */
.vbs-footer-statement-mark__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem clamp(1.25rem, 2.5vw, 2rem);
}

@media (min-width: 40rem) {
	.vbs-footer-statement-mark__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
	.vbs-footer-statement-mark__col:nth-child(2) { padding-block-start: 2.25rem; }
	.vbs-footer-statement-mark__col:nth-child(3) { padding-block-start: 4.5rem; }

	/* At desk width the hours run the full column: capped at 26rem they left a
	   dead band between the detail block and the first link column. */
	.vbs-footer-statement-mark__hours { max-width: none; }
}

.vbs-footer-statement-mark__heading {
	display: flex;
	align-items: baseline;
	gap: 0.75em;
	color: var(--vb-color-ink);
	padding-block-end: 0.9rem;
	border-block-end: var(--vb-border-hair) solid var(--vb-color-rule);
}
.vbs-footer-statement-mark__num { color: var(--vb-chroma-ink); }

.vbs-footer-statement-mark__list {
	margin-block-start: 1.1rem;
	display: grid;
	gap: 0.65rem;
	justify-items: start;
}

.vbs-footer-statement-mark__link {
	font-size: var(--vb-fs-small);
	line-height: var(--vb-lh-small);
	color: var(--vb-color-ink-soft);
	border-block-end: var(--vb-border-hair) solid transparent;
	transition: color var(--vb-dur-base) var(--vb-ease-out-soft),
	            border-color var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-footer-statement-mark__link:hover {
	color: var(--vb-color-ink);
	border-block-end-color: currentColor;
}

/* --- micro bar ------------------------------------------------------------ */
.vbs-footer-statement-mark__base {
	margin-block-start: clamp(3rem, 6vw, 4.5rem);
	padding-block-start: clamp(1.25rem, 2.5vw, 1.5rem);
	border-block-start: var(--vb-border-hair) solid var(--vb-color-rule);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
}
.vbs-footer-statement-mark__copy { margin: 0; }

.vbs-footer-statement-mark__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}
.vbs-footer-statement-mark__legal-link {
	font-size: var(--vb-fs-small);
	line-height: var(--vb-lh-small);
	color: var(--vb-color-mute);
	transition: color var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-footer-statement-mark__legal-link:hover { color: var(--vb-color-ink); }

.vbs-footer-statement-mark__top-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--vb-fs-small);
	line-height: var(--vb-lh-small);
	font-weight: var(--vb-weight-strong);
	color: var(--vb-color-ink);
	transition: color var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-footer-statement-mark__top-link svg {
	inline-size: 1rem;
	block-size: 1rem;
	transition: transform var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-footer-statement-mark__top-link:hover { color: var(--vb-color-accent); }
.vbs-footer-statement-mark__top-link:hover svg { transform: translateY(-0.2em); }

/* --- the mark ------------------------------------------------------------- */
.vbs-footer-statement-mark__markwrap {
	margin-block-start: clamp(3rem, 6vw, 4.5rem);
}

.vbs-footer-statement-mark__mark {
	display: block;
	inline-size: 100%;
	block-size: auto;
	overflow: visible;
}

.vbs-footer-statement-mark__mark-text {
	font-family: var(--vb-font-display);
	font-size: calc(var(--vb-fs-h3) * 8);
	font-weight: var(--vb-weight-display);
	text-transform: var(--vb-case-display);
	/* Tone-on-tone, mixed from the two roles that always exist rather than
	   pinned to a surface token: 18% of ink over paper stays legible whether
	   the preset draws the word at 800 or at 300, on a dark band or a light
	   one. */
	fill: color-mix(in srgb, var(--vb-color-ink) 18%, var(--vb-color-paper));
}