/**
 * ABOUT — Phase 7A
 *
 * The approved `design-reference/About.dc.html` layout. Loaded only on the About
 * page template, and it replaces article.css rather than adding to it — see
 * bsn_about_stylesheet() and the `bsn_template_stylesheet` filter.
 *
 * -----------------------------------------------------------------------------
 * MEASUREMENTS TAKEN FROM THE REFERENCE, NOT APPROXIMATED
 *
 *   Hero            840px measure · 64/32/56 padding · 1px bottom rule
 *   Hero eyebrow    11px · 800 · .26em
 *   Hero h1         56px · 700 · 1.04 · -.015em
 *   Hero standfirst 19px · 1.55 · 620px measure
 *   Split sections  1080px · 280px + 1fr · 56px gap
 *   Section label   14px · 800 · .24em · under a 3px near-black rule
 *   Timeline marker 110px column · italic brass · 34px (first) / 24px
 *   Timeline text   16.5px · 1.55
 *   Mission         #14120E · 900px · 64/32 · quote 32px · 1.3 · 500 · italic
 *   Coverage        1280px · 3 columns · 40px gap · 1px left rule · 24px inset
 *   Coverage title  serif 30px · 700
 *   Values band     #F4F0E6 · 1080px · 52/32 · 2 columns · 0/48 gap
 *   Values term     serif 20px · 700 · item padding 14px 0
 *   Leadership      1080px · 2 columns · 48px gap · 110px circular portrait
 *   Cards           1px rule / #14120E · 32px padding · heading 26px
 *   Closing         #F4F0E6 · 720px · 52/32 · wordmark 30px · 800
 *
 * Everything else comes from the shared tokens, so the brass, the rules, the
 * fonts and the focus ring are the same objects the rest of the site uses.
 * -----------------------------------------------------------------------------
 *
 * NO @layer. WordPress prints theme.json's `global-styles` unlayered, and an
 * unlayered rule beats any layered one. Phase 3 lost the wordmark colour to
 * exactly that. This sheet is enqueued at priority 20, after global-styles.
 *
 * SCOPED: every selector begins with an `about-` class, so nothing here can reach
 * another template even if a class name is reused later.
 */

/* =========================================================================
   SCOPED SPACING
   The reference uses 56px, 40px and 32px, which the global scale does not
   contain (it runs 24 / 36 / 48 / 64). Reusing the nearest token lost 8px here
   and 4px there — visible as a compressed rhythm against the reference.
   These three are declared on the page root and used only by this sheet, so the
   global scale is untouched and no other template can be affected.
   ====================================================================== */

.about {
	--about-space-section: 3.5rem;  /* 56px — section padding and split gap   */
	--about-space-grid: 2.5rem;     /* 40px — coverage column gap             */
	--about-space-card: 2rem;       /* 32px — card padding and card grid gap  */
	--about-space-band: 3.25rem;    /* 52px — banded sections                 */
	--about-space-row: 1.75rem;     /* 28px — timeline row padding and gap    */
	--about-space-head: 1.875rem;   /* 30px — section label to content        */
}

/* =========================================================================
   SHARED SECTION RHYTHM
   ====================================================================== */

.about-section {
	padding-block: var(--about-space-section);
}

/*
 * The reference gives adjacent sections 56px top and bottom, which collapses to a
 * single 56px gap between them rather than 112px. Matching that means suppressing
 * the doubled padding where two plain sections meet.
 */
.about-section + .about-section {
	padding-block-start: 0;
}

/* The reference gives this section no top padding and 64px below. */
.about-trust {
	padding-block: 0 var(--bsn-space-2xl);
}

/* =========================================================================
   SECTION LABELS — 14px / 800 / .24em under a 3px rule
   ====================================================================== */

.about-label {
	margin: 0;
	padding-block-start: 0.875rem;
	border-block-start: 3px solid var(--bsn-ink);
	font-family: var(--bsn-font-sans);
	font-size: 0.875rem;
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.24em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--bsn-ink);
}

.about-label__star {
	color: var(--bsn-brass);
	margin-inline-end: 0.35em;
}

.about-label--on-dark {
	border-block-start: 0;
	padding-block-start: 0;
	font-size: var(--bsn-text-2xs);
	letter-spacing: 0.26em;
	color: var(--bsn-brass-light);
	margin-block-end: 1.25rem; /* 20px */
}

/* A label with a link opposite it — coverage and leadership. */
.about-label-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bsn-space-2xs) var(--bsn-space-md);
	margin-block-end: var(--about-space-head);
}

.about-label-row .about-label {
	flex: 1 1 auto;
	min-inline-size: 0;
}

/* =========================================================================
   LINKS AND BUTTONS
   ====================================================================== */

.about-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;

	/* 44px, WCAG 2.2 target size. The reference's 11px text is a small target. */
	min-block-size: 2.75rem;

	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;

	/* --bsn-brass-text, not --bsn-brass: 5.09:1 against the page ground. */
	color: var(--bsn-brass-text);
}

.about-link:hover,
.about-link:focus-visible {
	color: var(--bsn-ink);
}

.about-link__arrow {
	transition: transform var(--bsn-duration) var(--bsn-ease);
}

.about-link:hover .about-link__arrow {
	transform: translateX(2px);
}

.about-link--block {
	display: inline-flex;
	margin-block-start: 1.125rem; /* 18px */
}

.about-link--muted {
	color: var(--bsn-ink-muted);
	flex: 0 0 auto;
}

.about-link--muted:hover,
.about-link--muted:focus-visible {
	color: var(--bsn-brass-text);
}

.about-button {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-block-size: 2.75rem;
	padding: 0.75rem 1.5rem;
	background: var(--bsn-brass);
	color: var(--bsn-ink);
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-black);
	letter-spacing: var(--bsn-tracking-label);
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--bsn-duration) var(--bsn-ease);
}

.about-button:hover,
.about-button:focus-visible {
	background: var(--bsn-brass-light);
	color: var(--bsn-ink);
}

.about-button--dark {
	padding: 0.875rem 2rem;
	background: var(--bsn-ink);
	color: var(--bsn-on-dark);
	letter-spacing: 0.16em;
}

.about-button--dark:hover,
.about-button--dark:focus-visible {
	background: var(--bsn-brass);
	color: var(--bsn-ink);
}

/* =========================================================================
   HERO
   ====================================================================== */

.about-hero {
	border-block-end: var(--bsn-hairline);
	text-align: center;
}

.about-hero__inner {
	/* The reference's 840px measure, narrower than the shared container. */
	max-inline-size: 840px;
	/* 64px top, 56px bottom, from the reference. */
	padding-block: var(--bsn-space-2xl) var(--about-space-section);
	min-inline-size: 0;
}

.about-hero__eyebrow {
	margin: 0 0 1.125rem; /* 18px */
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--bsn-brass-text);
}

.about-hero__title {
	/* 56px at desktop, fluid down. */
	margin: 0 0 1.25rem; /* 20px */
	font-size: clamp(2rem, 4.4vw + 0.5rem, 3.5rem);
	font-weight: var(--bsn-weight-bold);
	line-height: 1.04;
	letter-spacing: -0.015em;
	text-wrap: balance;

	/* A long headline must break rather than widen the page — but gently, since
	   this is display type. */
	overflow-wrap: break-word;
}

.about-hero__standfirst {
	margin: 0 auto;
	max-inline-size: 620px;
	font-size: var(--bsn-text-md);
	line-height: 1.55;
	color: var(--bsn-ink-soft);
}

/* =========================================================================
   SPLIT SECTIONS — label column beside content
   ====================================================================== */

.about-split {
	display: grid;
	gap: var(--bsn-space-md);
	min-inline-size: 0;
}

@media (min-width: 60rem) {
	.about-split {
		grid-template-columns: 280px minmax(0, 1fr);
		gap: var(--about-space-section);
	}
}

/*
 * Both children, explicitly. A grid item defaults to min-width:auto and refuses to
 * shrink below its widest unbreakable content — the bug that dragged an article
 * column to 873px inside a 390px viewport in Phase 5.
 */
.about-split__label,
.about-split > * {
	min-inline-size: 0;
}

/* =========================================================================
   OUR STORY TIMELINE
   ====================================================================== */

.about-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	min-inline-size: 0;
}

.about-timeline__item {
	display: grid;
	gap: var(--bsn-space-2xs);
	padding-block: var(--about-space-row);
	border-block-end: var(--bsn-hairline);
	margin: 0;
}

/*
 * The reference's 110px marker column, once there is room for it.
 *
 * `minmax(110px, max-content)` rather than a flat 110px: the reference fixes the
 * width, and at 110px the marker "Expansion" splits as "Expansio / n" — a
 * hyphenless mid-word break, which is a rendering fault rather than a design
 * choice. The column now starts at the reference's 110px and grows only as far as
 * the longest marker needs, which for the approved copy is about 8px.
 */
@media (min-width: 40rem) {
	.about-timeline__item {
		grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
		gap: var(--about-space-row);
		align-items: start;
	}
}

.about-timeline__item:first-child { padding-block-start: 0; }
.about-timeline__item:last-child { padding-block-end: 0; border-block-end: 0; }

.about-timeline__marker {
	margin: 0;
	font-family: var(--bsn-font-serif);
	font-style: italic;
	font-weight: var(--bsn-weight-bold);
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--bsn-brass-text);
	min-inline-size: 0;

	/* Never split a marker mid-word; the column grows instead. */
	overflow-wrap: normal;
	hyphens: none;
}

/* The founding year is larger in the reference — 34px against 24px. */
.about-timeline__item:first-child .about-timeline__marker {
	font-size: 2.125rem;
	line-height: 1;
}

.about-timeline__body { min-inline-size: 0; }

.about-timeline__label {
	margin: 0 0 var(--bsn-space-2xs);
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bsn-ink);
}

.about-timeline__text {
	margin: 0;
	font-size: 1.03125rem;
	line-height: 1.55;
	color: var(--bsn-ink-soft);
	max-inline-size: 62ch;
}

/* =========================================================================
   EDITOR PROSE — not in the reference; renders only when written
   ====================================================================== */

.about-body__prose {
	max-inline-size: 66ch;
	font-size: 1.03125rem;
	line-height: 1.6;
	color: var(--bsn-ink-soft);
}

.about-body__prose > :first-child { margin-block-start: 0; }
.about-body__prose > :last-child { margin-block-end: 0; }

.about-body__prose p,
.about-body__prose li {
	overflow-wrap: anywhere;
}

/* =========================================================================
   MISSION — full-bleed dark
   ====================================================================== */

.about-mission {
	background: var(--bsn-dark);
	color: var(--bsn-on-dark);
	text-align: center;
}

.about-mission__inner {
	max-inline-size: 900px;
	padding-block: var(--bsn-space-2xl);
	min-inline-size: 0;
}

.about-mission__quote {
	margin: 0 auto;
	max-inline-size: 760px;
	border: 0;
	padding: 0;
}

.about-mission__quote p {
	margin: 0;
	/* 32px at desktop, fluid down. */
	font-size: clamp(1.375rem, 1.6vw + 0.875rem, 2rem);
	font-weight: var(--bsn-weight-medium);
	font-style: italic;
	line-height: 1.3;
	text-wrap: pretty;
}

/* =========================================================================
   WHAT WE COVER
   ====================================================================== */

.about-coverage__grid {
	display: grid;
	gap: var(--bsn-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 48rem) {
	.about-coverage__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--about-space-grid);
	}
}

.about-coverage__item {
	min-inline-size: 0;
	margin: 0;
	padding-inline-start: var(--bsn-space-md);
	border-inline-start: var(--bsn-hairline);
}

.about-coverage__title {
	margin: 0 0 0.625rem; /* 10px */
	font-family: var(--bsn-font-serif);
	font-size: clamp(1.375rem, 1.2vw + 1rem, 1.875rem);
	font-weight: var(--bsn-weight-bold);
	line-height: 1.15;
	color: var(--bsn-ink);
	text-wrap: balance;
	overflow-wrap: break-word;
}

.about-coverage__text {
	margin: 0 0 0.875rem; /* 14px */
	font-size: 0.96875rem;
	line-height: 1.55;
	color: var(--bsn-ink-soft);
}

/* =========================================================================
   EDITORIAL VALUES — banded
   ====================================================================== */

.about-values {
	background: var(--bsn-band);
	border-block: var(--bsn-hairline);

	padding-block: var(--about-space-band);
}

.about-values__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	min-inline-size: 0;
}

/* Two columns in the reference, with a 48px gutter and no row gap. */
@media (min-width: 40rem) {
	.about-values__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--bsn-space-xl);
	}
}

/*
 * Each dt/dd pair is wrapped in a <div>, which `dl` permits precisely so a pair can
 * be styled as a unit — the grid places pairs, never splitting a term from its
 * definition.
 */
.about-values__item {
	padding-block: 0.875rem; /* 14px */
	border-block-end: 1px solid var(--bsn-rule-soft);
	min-inline-size: 0;
}

.about-values__term {
	font-family: var(--bsn-font-serif);
	font-size: 1.25rem;
	font-weight: var(--bsn-weight-bold);
	line-height: 1.2;
	color: var(--bsn-ink);
}

.about-values__text {
	margin: var(--bsn-space-3xs) 0 0;
	font-size: 0.875rem;
	line-height: 1.5;

	/* --bsn-ink-muted at 5.23:1. The reference's #6E675C is the same value. */
	color: var(--bsn-ink-muted);
}

/* =========================================================================
   EDITORIAL LEADERSHIP
   ====================================================================== */

.about-leadership__grid {
	display: grid;
	gap: var(--bsn-space-xl);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 48rem) {
	.about-leadership__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.about-leadership__item {
	display: flex;
	gap: 1.375rem; /* 22px */
	align-items: flex-start;
	margin: 0;
	min-inline-size: 0;
}

.about-leadership__portrait {
	flex: 0 0 auto;
	inline-size: clamp(4.5rem, 12vw, 110px);
	aspect-ratio: 1;
}

.about-leadership__img,
.about-leadership__portrait img {
	inline-size: 100%;
	block-size: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.about-leadership__body { min-inline-size: 0; }

.about-leadership__name {
	margin: 0;
	font-family: var(--bsn-font-serif);
	font-size: 1.5rem;
	font-weight: var(--bsn-weight-bold);
	line-height: 1.2;
	overflow-wrap: break-word;
}

.about-leadership__name a {
	color: var(--bsn-ink);
	text-decoration: none;
}

.about-leadership__name a:hover,
.about-leadership__name a:focus-visible {
	color: var(--bsn-brass-text);
}

.about-leadership__role {
	margin: 0.25rem 0 0.625rem; /* 4px / 10px */
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-bold);
	letter-spacing: var(--bsn-tracking-label);
	text-transform: uppercase;
	color: var(--bsn-brass-text);
}

.about-leadership__bio {
	font-size: 0.90625rem;
	line-height: 1.55;
	color: var(--bsn-ink-soft);
}

.about-leadership__bio p { margin: 0 0 var(--bsn-space-2xs); }
.about-leadership__bio p:last-child { margin-bottom: 0; }

.about-leadership__note {
	margin: 2.125rem 0 0; /* 34px */
	padding-block-start: 1.375rem; /* 22px */
	border-block-start: var(--bsn-hairline);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--bsn-ink-muted);
	max-inline-size: 78ch;
}

.about-leadership__note-link {
	color: var(--bsn-brass-text);
	font-weight: var(--bsn-weight-semibold);
	text-decoration: none;
	white-space: nowrap;
}

.about-leadership__note-link:hover,
.about-leadership__note-link:focus-visible {
	color: var(--bsn-ink);
	text-decoration: underline;
}

/* =========================================================================
   TRUST AND TIPS CARDS
   ====================================================================== */

.about-trust__grid {
	display: grid;
	gap: var(--about-space-card);
	min-inline-size: 0;
}

@media (min-width: 48rem) {
	.about-trust__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--about-space-card);
	}
}

.about-card {
	padding: var(--about-space-card);
	min-inline-size: 0;

	/* No border radius, no shadow. The reference uses a 1px rule and a fill. */
}

.about-card--light {
	background: var(--bsn-surface);
	border: var(--bsn-hairline);
}

.about-card--dark {
	background: var(--bsn-dark);
	color: var(--bsn-on-dark);
}

.about-card__label {
	margin: 0 0 var(--bsn-space-xs);
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-black);
	letter-spacing: var(--bsn-section-label-tracking);
	text-transform: uppercase;
	color: var(--bsn-brass-text);
}

/* On the dark card the brass has to lighten to stay readable — 8.16:1. */
.about-card--dark .about-card__label {
	color: var(--bsn-brass-light);
}

.about-card__heading {
	margin: 0 0 0.625rem; /* 10px */
	font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem);
	font-weight: var(--bsn-weight-bold);
	line-height: 1.15;
	text-wrap: balance;
}

.about-card__text {
	margin: 0 0 var(--bsn-space-sm); /* 16px */
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--bsn-ink-soft);
	max-inline-size: 52ch;
}

/* The reference gives the newsroom card 18px before its button. */
.about-card--dark .about-card__text {
	margin-block-end: 1.125rem;
}

.about-card--dark .about-card__text {
	color: var(--bsn-on-dark-muted);
}

/*
 * The heading, explicitly.
 *
 * base.css colours every h1-h6 with --bsn-ink, and that rule is more specific than
 * the `color` inherited from .about-card--dark — so the newsroom card's heading
 * rendered near-black on near-black and was invisible. Exactly the failure Phase 3
 * hit with the footer headings, found here by looking at a screenshot rather than
 * at the markup.
 */
.about-card--dark .about-card__heading {
	color: var(--bsn-on-dark);
}

/* =========================================================================
   CLOSING PANEL
   ====================================================================== */

.about-cta {
	background: var(--bsn-band);
	border-block-start: var(--bsn-hairline);
	text-align: center;
}

.about-cta__inner {
	max-inline-size: 720px;
	padding-block: var(--about-space-band);
	min-inline-size: 0;
}

/* The shared wordmark, at the reference's closing-panel size. */
.about-cta .wordmark--about-cta {
	margin: 0;
	font-family: var(--bsn-font-serif);
	font-size: clamp(1.375rem, 2vw + 0.75rem, 1.875rem);
	font-weight: var(--bsn-weight-black);
	line-height: 1.15;
	letter-spacing: var(--bsn-wordmark-tracking);
	color: var(--bsn-ink);
}

.about-cta .wordmark--about-cta .wordmark__star {
	color: var(--bsn-brass);
	font-size: 0.73em;
}

.about-cta__tagline {
	margin: 0.625rem 0 1.375rem; /* 10px / 22px */
	font-size: var(--bsn-text-base);
	font-style: italic;
	color: var(--bsn-ink-muted);
}

/* =========================================================================
   MOTION
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.about-link__arrow,
	.about-button {
		transition: none;
	}

	.about-link:hover .about-link__arrow {
		transform: none;
	}
}