/* ==========================================================================
   Chapter 07 — Contact · Closing
   Closing line and details, then the opening composition on the closing
   colour (night in the warm palette, cloud white in the sky palette).
   (Wall and type layer styles come from 01-landing.css.)
   ========================================================================== */

.contact__content {
	row-gap: var(--s-7);
	padding-block: var(--chapter-pad) var(--s-8);
}

.contact__title {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(3rem, 1rem + 8vw, 10rem);
	line-height: 0.92;
	letter-spacing: -0.03em;
}

/* The mask that the lines rise out of leaves room above and below, so tall
   italic letters (L, f, the apostrophe) and descenders are never cut. */
.contact__title .line {
	display: block;
	overflow: hidden;
	padding-block: 0.16em 0.14em;
	margin-block: -0.16em -0.14em;
}

.contact__title .line__inner {
	display: block;
}

.contact__details {
	display: grid;
	gap: var(--s-6);
}

.contact__row {
	display: grid;
	gap: var(--s-2);
	align-content: start;
}

.contact__row dd {
	font-size: var(--fs-lede);
	line-height: 1.3;
}

.contact__row a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--dur-ui) var(--ease-out);
}

.contact__row a:hover {
	background-size: 0 1px;
	background-position: 100% 100%;
}

/* Sky palette: the underline is sky blue. */
.palette-sky .contact__row a {
	background-image: linear-gradient(var(--c-signal), var(--c-signal));
}

.contact__row--email dd {
	font-size: clamp(1.5rem, 0.9rem + 2.4vw, 3.25rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}

.contact__social {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact__handle {
	font-family: var(--font-serif);
	font-style: italic;
}

.contact__row--base dd {
	font-family: var(--font-serif);
	font-style: italic;
}

@media (min-width: 64em) {
	.contact__title {
		grid-column: 1 / span 10;
	}

	/* Desktop: email, phone and Instagram side by side, all the same size;
	   the base line runs underneath. */
	.contact__details {
		grid-template-columns: repeat(3, auto);
		justify-content: start;
		column-gap: var(--s-8);
	}

	.contact__row--email dd,
	.contact__row--phone dd,
	.contact__row--social dd {
		font-size: clamp(1.5rem, 0.4rem + 1.9vw, 2.5rem);
		font-weight: 500;
		line-height: 1.15;
		letter-spacing: -0.02em;
	}

	.contact__row--base {
		grid-column: 1 / -1;
	}
}

/* The negative ------------------------------------------------------------ */

.contact__negative {
	position: relative;
	height: 100vh;
	height: max(100svh, 34rem);
	isolation: isolate;
	overflow: clip;
}

/* Prints rise out of the closing colour at the top edge instead of being cut by it. */
.contact__negative .wall {
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 14vh);
	mask-image: linear-gradient(to bottom, transparent, #000 14vh);
}