/*
Page intro: the opening block of the About, Architecture and Products pages. A heading and a few sentences on one
solid Porcelain panel beside an orange rule, optionally closed by an invitation and a contact row of black label
chips. The panel has no gaps for the shape field to show through, so the lines sit closer together than the home
page hello's per-line bands. The text keeps the .highlight inset (layout.css), so every line starts at the same
left edge.
*/
.intro {
	max-width: 39.75rem; /* The reading width scaled down with the text (44rem × 1.4 / 1.6 = 38.5rem), plus the panel's right padding. */
	margin-bottom: 4rem;
	padding: 1.25rem 1.25rem 1.5rem;
	border-left: 0.3rem solid var(--color-spicy-orange);
	background-color: var(--color-porcelain);
	font-size: clamp(var(--font-size-base), 5vw, 1.4rem);

	p {
		margin: 0 0 0.6em;
		line-height: 1.5;
	}

	/* The panel is the background now. Each line's own band would overlap the line above at this spacing and
	clip its descenders, so the highlights go clear and keep only their side inset for the shared left edge. */
	.highlight {
		background-color: transparent;
	}
}

/* A little wider, so a long heading ("Financial institution branch design") stays on one line on desktop. */
.intro--wide {
	max-width: 41rem;
}

.intro__title {
	margin: 0 0 0.4em;
	font-size: clamp(1.9rem, 5vw, 2.6rem);
	line-height: 1.2;
	text-transform: none; /* Sentence case, as written, rather than the site's all-caps headings. */
}

.intro__invite {
	margin-top: 1.4em !important;

	/* "Let's talk." wraps as one piece rather than splitting across lines. */
	strong {
		white-space: nowrap;
	}
}

.intro__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 2.25rem;
	margin: 0.8rem 0 0 var(--highlight-inset); /* Indented by the highlight's side padding, so the first chip lines up with the letters above. */
	font-size: clamp(1.1rem, 4vw, 1.4rem);

	div {
		display: flex;
		align-items: baseline;
		gap: 0.75rem;
	}

	dd {
		margin: 0;
	}
}

/* A black label chip, like the ones on the footer and the process steps. */
.intro__chip {
	padding: 0.25rem 0.6rem;
	background-color: var(--color-spicy-black);
	color: var(--color-porcelain);
	font-family: "Oswald", "Oswald Fallback", sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}