/*
 * The holding poster. Each calc() is a distance in points measured off the designer's artboard,
 * multiplied by --poster-unit so the poster keeps its proportions at any size. They are one-off
 * positions on that artboard, not rungs on the space scale.
 */

.is-holding main {
	display: grid;
	grid-template-rows: auto 1fr;
}

/* --------------------------------------------------------------------------
 * The band: logo, then role
 * ----------------------------------------------------------------------- */

.holding__band {
	padding: calc(154 * var(--poster-unit)) var(--gutter) calc(94.7 * var(--poster-unit));
	background-color: var(--color-bg-band);
	text-align: center;
}

.holding__logo {
	width: max(11rem, calc(527 * var(--poster-unit)));
	margin-inline: auto;
}

.holding__role {
	margin-block-start: calc(56.3 * var(--poster-unit));
	color: var(--color-poster-text);
	font-size: max(var(--font-3), calc(52.77 * var(--poster-unit)));
	font-weight: var(--weight-bold);
	line-height: var(--leading-heading);
	text-wrap: balance;
	transform: scaleX(var(--type-squeeze));
}

/* --------------------------------------------------------------------------
 * The stage: lockup, then contact, centred in whatever height is left
 * ----------------------------------------------------------------------- */

.holding__stage {
	display: grid;
	align-content: center;
	justify-items: center;
	padding: calc(83.5 * var(--poster-unit)) var(--gutter) calc(174 * var(--poster-unit));
}

/*
 * The lockup is three layers on one 976 x 635 box: the quarters behind the portrait, the
 * portrait, then the blue quarter and the lettering in front. Both SVGs share that box as their
 * viewBox, so the layers register without any positioning of their own.
 */
.thrive {
	position: relative;
	width: min(100%, calc(976 * var(--poster-unit)));
	aspect-ratio: 976 / 635;
}

.thrive__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* The portrait fills the two columns of the quarter grid, 456pt of the 976. */
.thrive__photo {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 44.93%;
	width: 46.74%;
}

.holding__contact {
	display: grid;
	justify-items: center;
	margin-block-start: calc(133 * var(--poster-unit));
	color: var(--color-poster-text);
	font-size: max(var(--font-3), calc(46.87 * var(--poster-unit)));
	font-style: normal;
	line-height: var(--leading-poster);
	transform: scaleX(var(--type-squeeze));
}

/* Padded only where the line is shorter than the minimum target, so the designed spacing holds
   at poster size and a phone still gets something to press. */
.holding__contact a {
	padding-block: max(0px, calc((var(--tap-min) - 1lh) / 2));
	color: inherit;
	text-decoration: none;
}

.holding__contact a:hover,
.holding__contact a:focus-visible {
	text-decoration: underline;
}