/**
 * The About page.
 *
 * Built to read like gcn.live/about/: one narrow column, a question, a bold
 * answer, then the four focal points — each a heading, a photograph and its
 * paragraphs — closing on a quotation and an invitation.
 *
 * The measure is what does the work here. The live page runs its text at about
 * 70 characters a line, which is why it reads as an article rather than as a
 * page of a website; everything below is in service of that.
 */

.gcn-about {
	padding-block: var(--gcn-space-12) var(--gcn-space-20);
}

/*
 * The full content width, as the page had before.
 *
 * The live site runs this page as a narrow column, and it was built that way
 * first — but the rest of this site is laid out to the theme's content width
 * and the page looked pinched beside it, so the column matches its neighbours.
 * Nothing here sets max-width: Bricks already gives every container the
 * theme's width, and leaving it alone is what keeps this page in step if that
 * setting is ever changed.
 */
#brx-content .gcn-about .gcn-about__column {
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--gcn-space-5);
}

/* ==========================================================================
   Headings
   ========================================================================== */

.gcn-about__title {
	margin: 0 0 var(--gcn-space-4);
	font-size: var(--gcn-text-3xl);
	font-weight: var(--gcn-weight-bold);
	line-height: var(--gcn-leading-tight);
	letter-spacing: var(--gcn-tracking-tight);
	color: var(--gcn-text);
}

/* The two section questions, in the live page's small caps. */
.gcn-about__q {
	margin: var(--gcn-space-6) 0 0;
	font-size: var(--gcn-text-lg);
	font-weight: var(--gcn-weight-bold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--gcn-text);
}

.gcn-about__q--focal {
	position: relative;
	margin-top: var(--gcn-space-12);
	padding-bottom: var(--gcn-space-4);
	font-size: var(--gcn-text-2xl);
	line-height: var(--gcn-leading-snug);
	text-transform: none;
}

.gcn-about__q--focal::after {
	content: "";
	position: absolute;
	inset: auto auto 0 0;
	width: 4rem;
	height: 3px;
	background: var(--gcn-brand-rule);
	border-radius: 2px;
}

/* Each numbered focal point. Black, as on the live page. */
.gcn-about__point {
	margin: var(--gcn-space-10) 0 0;
	font-size: var(--gcn-text-lg);
	font-weight: var(--gcn-weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gcn-text);
}

/* ==========================================================================
   Text
   ========================================================================== */

.gcn-about__lead,
.gcn-about__lead p {
	margin: 0;
	font-size: var(--gcn-text-lg);
	font-weight: var(--gcn-weight-semibold);
	line-height: var(--gcn-leading-snug);
	color: var(--gcn-text);
}

.gcn-about__body,
.gcn-about__body p {
	font-size: var(--gcn-text-md);
	line-height: var(--gcn-leading-relaxed);
	color: var(--gcn-text-soft);
}

.gcn-about__body p {
	margin: 0 0 var(--gcn-space-4);
}

.gcn-about__body p:last-child {
	margin-bottom: 0;
}

.gcn-about__body strong {
	color: var(--gcn-text);
}

/* ==========================================================================
   Photographs
   ========================================================================== */

/*
 * Two shapes, one rule.
 *
 * Bricks renders an image element either as a <figure> wrapping the <img> or as
 * the <img> itself, depending on the element's caption setting — so the class
 * lands on the figure in some cases and on the image in others. Styling only
 * `.gcn-about__image img` left half the photographs unstyled.
 */
.gcn-about__image {
	margin-block: var(--gcn-space-2);
}

.gcn-about__image img,
img.gcn-about__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--gcn-radius-lg);
	box-shadow: var(--gcn-shadow-md);
}

/* ==========================================================================
   The closing quotation and invitation
   ========================================================================== */

.gcn-about__quote {
	margin-top: var(--gcn-space-12);
	padding: var(--gcn-space-6) var(--gcn-space-8);
	background: var(--gcn-brand-soft);
	border-left: 3px solid var(--gcn-brand);
	border-radius: 0 var(--gcn-radius-lg) var(--gcn-radius-lg) 0;
}

.gcn-about__quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.gcn-about__quote p,
.gcn-about__quote em {
	margin: 0;
	font-size: var(--gcn-text-lg);
	font-style: italic;
	line-height: var(--gcn-leading-relaxed);
	color: var(--gcn-brand-strong);
}

.gcn-about__cta {
	/* Centred under the quotation, as the live page ends. */
	align-self: center;
	margin-top: var(--gcn-space-6);
	padding: 0.85em 1.8em !important;
	font-size: var(--gcn-text-md);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-brand-contrast) !important;
	text-decoration: none;
	background: var(--gcn-brand) !important;
	border: 0 !important;
	border-radius: var(--gcn-radius-md) !important;
	box-shadow: var(--gcn-shadow-sm);
	transition:
		background var(--gcn-duration) var(--gcn-ease),
		box-shadow var(--gcn-duration) var(--gcn-ease);
}

.gcn-about__cta:hover,
.gcn-about__cta:focus-visible {
	background: var(--gcn-brand-strong) !important;
	box-shadow: var(--gcn-shadow-md);
}

@media (max-width: 640px) {

	.gcn-about {
		padding-block: var(--gcn-space-8) var(--gcn-space-12);
	}

	.gcn-about__quote {
		padding: var(--gcn-space-5);
	}

	.gcn-about__cta {
		align-self: stretch;
		text-align: center;
	}
}