/* ==========================================================================
   About page (UI-16)
   No Figma frame exists for this page -- typography and spacing below
   reuse the site's established scale (see the About block in
   tokens.css) rather than a design pull, the same approach taken for
   the legal pages. Enqueued only on the /about/ page, not site-wide.

   Mobile strategy: every section is a single column already, so the
   1024px breakpoint only rescales type and padding. The one real
   reflow is the team table, which becomes stacked cards at 768px via
   the data-label attributes in page-about.php. That is what keeps
   acceptance criterion #6 (single readable column, no horizontal
   overflow) true -- a 3-column table is the only element on this page
   that could have overflowed.

   v0.17.0: editorial pass. The team photo floats right inside the
   story at 45% of the reading measure with the text wrapping around
   it, and drops to a full-width block above the text under 600px,
   where a wrapped column would get too narrow to read. The council
   photo is a full-measure figure. Tiers are gone and the quotes are a
   single centered rotator (mechanics in rotator.css).
   ========================================================================== */

.loa-about {
	background: var(--loa-about-bg);
}

.loa-about__inner {
	max-width: var(--loa-about-max);
	margin: 0 auto;
	padding-inline: var(--loa-about-pad-x);
}

/* Prose sections use a reading measure instead of the full 1440px.
   The cap goes on the CONTENT, not on a narrower centered container:
   centering the container would visually indent every prose section
   relative to the team table and quotes that sit below
   them, so no two left edges on the page would line up. This keeps
   one shared left edge down the whole page and still holds the
   paragraphs to a comfortable measure. The mission callout overrides
   this back to centered on its own. */
.loa-about__inner--narrow > * {
	max-width: var(--loa-about-narrow-max);
}

.loa-about__section {
	padding-block: var(--loa-about-section-pad-y);
	border-top: 1px solid var(--loa-about-rule);
}

/* ---- Masthead ---- */

.loa-about__masthead {
	padding-top: var(--loa-about-masthead-pad-top);
	padding-bottom: var(--loa-about-masthead-pad-bottom);
}

.loa-about__eyebrow {
	margin: 0 0 var(--loa-about-eyebrow-gap);
	font-family: var(--loa-font-body);
	font-weight: 500;
	font-size: var(--loa-about-eyebrow-size);
	letter-spacing: var(--loa-about-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--loa-about-eyebrow-color);
}

.loa-about__title {
	margin: 0;
	font-family: var(--loa-font-display);
	font-weight: 500;
	font-size: var(--loa-about-title-size);
	line-height: var(--loa-about-title-line);
	color: var(--loa-about-title-color);
}

.loa-about__lede {
	max-width: var(--loa-about-narrow-max);
	margin: var(--loa-about-lede-gap) 0 0;
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-about-lede-size);
	line-height: var(--loa-about-lede-line);
	color: var(--loa-about-lede-color);
}

/* The story section sits directly under the masthead, so it does not
   need the divider rule that separates every later section. */
.loa-about__section--story {
	border-top: 0;
	padding-top: var(--loa-about-section-pad-y);
}

/* ---- Editorial figures ---- */

/* flow-root contains the float, so the section's bottom rule and
   padding always sit below the photo even when the text is shorter. */
.loa-about__story {
	display: flow-root;
}

.loa-about__figure {
	margin: 0;
}

.loa-about__figure-img {
	display: block;
	width: 100%;
	height: auto;
}

.loa-about__figure--float {
	float: right;
	width: var(--loa-about-figure-float-w);
	margin: 0 0 var(--loa-about-figure-float-below) var(--loa-about-figure-float-gap);
}

.loa-about__figure--wide {
	margin-block: var(--loa-about-figure-wide-gap);
}

/* A wide figure that opens a section (the team photo, v0.19.1) already
   has the section's top padding above it; no extra gap on top. */
.loa-about__figure--wide:first-child {
	margin-top: 0;
}

.loa-about__figcaption {
	margin-top: var(--loa-about-figcaption-gap);
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-about-figcaption-size);
	line-height: var(--loa-about-figcaption-line);
	color: var(--loa-about-figcaption-color);
}

/* ---- Shared prose ---- */

.loa-about__h2 {
	margin: 0 0 var(--loa-about-h2-gap);
	font-family: var(--loa-font-display);
	font-weight: 500;
	font-size: var(--loa-about-h2-size);
	color: var(--loa-about-h2-color);
}

.loa-about__p,
.loa-about__intro {
	margin: 0 0 var(--loa-about-p-gap);
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-about-p-size);
	line-height: var(--loa-about-p-line);
	color: var(--loa-about-p-color);
}

/* Inline links in prose (the Industry Leadership link to the Advisory
   Council page, 2026-09-27). Same gold treatment as legal-page links. */
.loa-about__p a {
	color: var(--loa-about-link-color);
	text-decoration: underline;
	text-decoration-color: var(--loa-about-link-underline);
	text-underline-offset: var(--loa-about-link-offset);
}

.loa-about__p:last-child,
.loa-about__intro:last-child {
	margin-bottom: 0;
}

.loa-about__intro {
	max-width: var(--loa-about-narrow-max);
	margin-bottom: 48px;
}

.loa-about__list-label {
	margin: 32px 0 12px;
	font-family: var(--loa-font-body);
	font-weight: 500;
	font-size: var(--loa-about-eyebrow-size);
	letter-spacing: var(--loa-about-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--loa-about-eyebrow-color);
}

.loa-about__list {
	margin: 0;
	padding-left: 20px;
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-about-p-size);
	line-height: var(--loa-about-p-line);
	color: var(--loa-about-p-color);
}

.loa-about__list li {
	margin-bottom: 6px;
}

/* ---- Mission callout (acceptance criterion #4) ---- */

.loa-about__mission {
	padding-block: var(--loa-about-mission-pad-y);
	background: var(--loa-about-mission-bg);
	border-block: 1px solid var(--loa-about-mission-border);
	text-align: center;
}

.loa-about__mission-heading {
	/* auto inline margins: the narrow-inner rule caps this at the
	   reading measure, and without them the heading centered inside a
	   left-aligned 768px box, sitting left of the centered text. */
	margin: 0 auto 24px;
	font-family: var(--loa-font-body);
	font-weight: 500;
	font-size: var(--loa-about-mission-heading-size);
	letter-spacing: var(--loa-about-mission-heading-tracking);
	text-transform: uppercase;
	color: var(--loa-about-eyebrow-color);
}

.loa-about__mission-text {
	max-width: var(--loa-about-narrow-max);
	margin: 0 auto;
	font-family: var(--loa-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: var(--loa-about-mission-size);
	line-height: var(--loa-about-mission-line);
	color: var(--loa-about-mission-color);
}

/* ---- Recognition ---- */

.loa-about__awards {
	margin: 0;
	padding: 0;
	list-style: none;
}

.loa-about__award + .loa-about__award {
	margin-top: var(--loa-about-award-gap);
}

.loa-about__award-name {
	display: block;
	margin-bottom: 6px;
	font-family: var(--loa-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: var(--loa-about-award-name-tracking);
	text-transform: uppercase;
	color: var(--loa-about-award-name-color);
}

.loa-about__award-text {
	display: block;
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-about-p-size);
	line-height: var(--loa-about-p-line);
	color: var(--loa-about-p-color);
}

/* ---- Pull-quotes (rotator) ---- */

.loa-about__quotes {
	padding-block: var(--loa-about-section-pad-y);
	border-top: 1px solid var(--loa-about-rule);
}

.loa-about__quotes .loa-rotator {
	max-width: var(--loa-about-quote-max);
	margin-inline: auto;
}

.loa-about__quote {
	text-align: center;
}

.loa-about__quote-mark {
	margin: 0 0 var(--loa-about-quote-mark-gap);
	font-family: var(--loa-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: var(--loa-about-quote-mark-size);
	line-height: 1;
	height: 0.5em;
	color: var(--loa-about-quote-mark-color);
	user-select: none;
}

.loa-about__quote-text {
	margin: 0;
}

.loa-about__quote-text p {
	margin: 0;
	font-family: var(--loa-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: var(--loa-about-quote-size);
	line-height: var(--loa-about-quote-line);
	color: var(--loa-about-quote-color);
}

.loa-about__quote-cite {
	margin: var(--loa-about-quote-cite-gap) 0 0;
	font-family: var(--loa-font-body);
	font-weight: 500;
	font-size: var(--loa-about-quote-cite-size);
	letter-spacing: var(--loa-about-quote-cite-tracking);
	text-transform: uppercase;
	color: var(--loa-about-quote-cite-color);
}

/* ---- Team profiles (v0.33.0; replaced the v0.16 team table) ---- */

.loa-about__profiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--loa-about-profile-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
	font-family: var(--loa-font-body);
}

.loa-about__profile-photo,
.loa-about__profile-initials {
	display: block;
	width: var(--loa-about-profile-photo);
	height: var(--loa-about-profile-photo);
	margin: 0 auto;
	border: 2px solid var(--loa-about-profile-ring);
	border-radius: 50%;
	box-sizing: border-box;
}

.loa-about__profile-photo {
	object-fit: cover;
	object-position: center top;
}

.loa-about__profile-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--loa-font-display);
	font-size: var(--loa-about-profile-initials-size);
	color: var(--loa-about-profile-ring);
}

.loa-about__profile-name {
	margin: var(--loa-about-profile-name-gap) 0 0;
	font-weight: 500;
	font-size: var(--loa-about-p-size);
	line-height: 1.4;
	color: var(--loa-about-team-name-color);
}

.loa-about__profile-role {
	margin: 4px 0 0;
	font-weight: 500;
	font-size: var(--loa-about-team-head-size);
	letter-spacing: var(--loa-about-team-head-tracking);
	text-transform: uppercase;
	color: var(--loa-about-team-head-color);
}

/* v0.35.0: email under each title, in the legal-link gold */
.loa-about__profile-email {
	margin: var(--loa-about-profile-email-gap) 0 0;
	font-weight: 300;
	font-size: var(--loa-about-profile-email-size);
}

.loa-about__profile-email a {
	color: var(--loa-legal-link-color);
	text-decoration: underline;
	text-decoration-color: var(--loa-legal-link-underline);
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.loa-about__profile-email a:hover,
.loa-about__profile-email a:focus-visible {
	text-decoration-color: var(--loa-legal-link-color);
}

@media (max-width: 768px) {
	.loa-about__profiles {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 1024px) {
	.loa-about__inner {
		padding-inline: var(--loa-about-m-pad-x);
	}

	.loa-about__section,
	.loa-about__quotes {
		padding-block: var(--loa-about-m-section-pad-y);
	}

	.loa-about__masthead {
		padding-top: var(--loa-about-m-masthead-pad-top);
	}

	.loa-about__title {
		font-size: var(--loa-about-m-title-size);
		line-height: var(--loa-about-m-title-line);
	}

	.loa-about__lede {
		font-size: var(--loa-about-m-lede-size);
		line-height: var(--loa-about-m-lede-line);
	}

	.loa-about__h2 {
		font-size: var(--loa-about-m-h2-size);
	}

	.loa-about__mission {
		padding-block: var(--loa-about-m-section-pad-y);
	}

	.loa-about__mission-text {
		font-size: var(--loa-about-m-mission-size);
		line-height: var(--loa-about-m-mission-line);
	}

	.loa-about__quote-text p {
		font-size: var(--loa-about-m-quote-size);
		line-height: var(--loa-about-m-quote-line);
	}

	.loa-about__quote-mark {
		font-size: var(--loa-about-m-quote-mark-size);
	}
}

/* Under 600px a wrapped column beside a 45% photo drops below ~140px
   of text, so the photo stops floating and leads the story full width. */
@media (max-width: 600px) {
	.loa-about__figure--float {
		float: none;
		width: auto;
		margin: 0 0 var(--loa-about-m-figure-float-below);
	}
}