/**
 * ARCHIVE AND DISCOVERY — Phase 6
 *
 * Loaded on categories, taxonomies, tags, author archives, search and 404 only.
 * See bsn_theme_template_stylesheet(): one template sheet per request, so the
 * article page never downloads the search hero and this page never downloads
 * long-form prose styles.
 *
 * -----------------------------------------------------------------------------
 * TWO RULES THAT ARE LOAD-BEARING RATHER THAN DECORATIVE
 *
 * 1. `min-inline-size: 0` on every grid and flex child that holds text.
 *
 *    A grid item defaults to `min-width: auto`, so its track refuses to shrink
 *    below the widest unbreakable thing inside it. Phase 5 found a single long URL
 *    dragging an article column to 873px inside a 390px viewport. An archive is
 *    ten cards of arbitrary editorial text, so the same bug has ten chances per
 *    page — it is prevented at every level here, not patched where it showed up.
 *
 * 2. Media slots always declare `aspect-ratio`.
 *
 *    The space is reserved before the image decodes, so nothing below it moves.
 *    That is what keeps CLS at zero on a list of ten images.
 * -----------------------------------------------------------------------------
 *
 * NO @layer. WordPress prints theme.json's `global-styles` UNLAYERED, and an
 * unlayered rule beats any layered one regardless of specificity or order. Phase 3
 * lost the wordmark colour and the footer headings to exactly that. The stylesheet
 * is enqueued at priority 20 instead, which puts it after `global-styles` where it
 * belongs.
 */

/* =========================================================================
   ARCHIVE MASTHEAD
   The section title, description and child-section chips.
   ====================================================================== */

.archive-masthead {
	border-bottom: var(--bsn-hairline);
	padding-block: var(--bsn-space-lg) var(--bsn-space-md);
}

.archive-masthead__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--bsn-space-md) var(--bsn-space-xl);
}

.archive-masthead__identity {
	/* See rule 1 at the top of this file. */
	min-inline-size: 0;
	flex: 1 1 22rem;
}

.archive-masthead__title {
	font-size: var(--bsn-text-4xl);
	font-weight: var(--bsn-weight-black);
	line-height: 1;
	letter-spacing: var(--bsn-tracking-tight);
	margin: 0;

	/* A section name is one to four words; balancing beats a one-word last line. */
	text-wrap: balance;

	/*
	 * A term name can be a long compound ("U.S. Politics & Black America"). At 64px
	 * that must break rather than widen the page — but `anywhere` would split a word
	 * mid-syllable in display type, so headings get the gentler rule.
	 */
	overflow-wrap: break-word;
}

.archive-masthead__star {
	color: var(--bsn-brass);
	font-size: 0.52em;
	vertical-align: 0.22em;
	margin-inline-end: 0.12em;
}

.archive-masthead__description {
	max-inline-size: 36em;
	margin-block-start: var(--bsn-space-xs);
	font-size: var(--bsn-text-md);
	font-style: italic;
	line-height: var(--bsn-leading-normal);
	color: var(--bsn-ink-soft);
}

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

/* =========================================================================
   CHIPS — child sections, and "browse by section" on search
   ====================================================================== */

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bsn-space-2xs);
	min-inline-size: 0;
}

.chip {
	display: inline-flex;
	align-items: center;

	/*
	 * 2.75rem = 44px, WCAG 2.2 target size (2.5.8). The design's 7px/13px padding
	 * gives about 30px, which is below the minimum for a touch target — so the
	 * padding is kept and a min-height added rather than the type being enlarged.
	 */
	min-block-size: 2.75rem;
	padding-inline: 0.8125rem;

	border: 1px solid var(--bsn-rule-strong);
	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;
	color: var(--bsn-ink-soft);
	transition: background-color var(--bsn-duration) var(--bsn-ease),
		color var(--bsn-duration) var(--bsn-ease),
		border-color var(--bsn-duration) var(--bsn-ease);
}

.chip:hover,
.chip:focus-visible {
	background: var(--bsn-ink);
	border-color: var(--bsn-ink);
	color: var(--bsn-on-dark);
}

/* The current view. A <span>, not a link to the page already on screen. */
.chip--current {
	background: var(--bsn-ink);
	border-color: var(--bsn-ink);
	color: var(--bsn-on-dark);
}

/* =========================================================================
   FEATURED LEAD
   The first post of the main query, in the design's dominant treatment.
   ====================================================================== */

.archive-featured {
	padding-block: var(--bsn-space-lg) 0;
}

.card--archive-lead {
	display: grid;
	gap: var(--bsn-space-lg);
	align-items: center;
	padding-block-end: var(--bsn-space-lg);
	border-block-end: var(--bsn-hairline);
}

@media (min-width: 60rem) {
	.card--archive-lead {
		grid-template-columns: 1.5fr 1fr;
		gap: var(--bsn-space-2xl);
	}
}

.card--archive-lead .card__media,
.card--archive-lead .card__body { min-inline-size: 0; }

.card--archive-lead .card__media {
	/* 16:10, from the design. */
	aspect-ratio: 16 / 10;
	margin: 0;
}

.card--archive-lead .card__eyebrow {
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-black);
	letter-spacing: var(--bsn-section-label-tracking);
	margin-block-end: var(--bsn-space-xs);
}

.card--archive-lead .card__title {
	font-size: var(--bsn-text-xl);
	font-weight: var(--bsn-weight-bold);
	line-height: 1.06;
	letter-spacing: var(--bsn-tracking-tight);
	margin-block-end: var(--bsn-space-xs);
	text-wrap: balance;
	overflow-wrap: break-word;
}

.card--archive-lead .card__dek {
	font-size: var(--bsn-text-md);
	line-height: var(--bsn-leading-normal);
	color: var(--bsn-ink-soft);
	margin-block-end: var(--bsn-space-xs);
	max-inline-size: 42em;
}

/* A lead with no featured image keeps its measure rather than stretching. */
.card--archive-lead.card--no-image { grid-template-columns: 1fr; }
.card--archive-lead.card--no-image .card__body { max-inline-size: 42em; }

/* =========================================================================
   THE BODY / SIDEBAR GRID
   1180px content: a fluid main column beside a 300px rail, from the design.
   ====================================================================== */

.archive-grid {
	display: grid;
	gap: var(--bsn-space-xl);
	padding-block: var(--bsn-space-md) var(--bsn-space-2xl);
	align-items: start;
}

@media (min-width: 64rem) {
	.archive-grid {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: var(--bsn-space-2xl);
	}
}

/*
 * Both children, explicitly. `minmax(0, 1fr)` above already fixes the main column;
 * this covers the rail and any future track, so the bug cannot return by way of a
 * new grid child.
 */
.archive-main,
.archive-sidebar { min-inline-size: 0; }

/*
 * SOURCE ORDER IS MAIN THEN SIDEBAR, and it is not reordered.
 *
 * On a phone the reader reaches the stories before the newsletter prompt and the
 * advertisement, and a screen reader meets them in the same order. Putting the rail
 * first visually would require moving it in the document, which is the version of
 * this layout that reads badly without CSS.
 */

/* =========================================================================
   ARCHIVE ROWS — the list card
   ====================================================================== */

.archive-rows {
	display: flex;
	flex-direction: column;
}

.card--archive-row {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	gap: var(--bsn-space-sm);
	align-items: start;
	padding-block: var(--bsn-space-md);
	border-block-end: var(--bsn-hairline);
}

/* The design's 220px thumbnail, once there is room for it. */
@media (min-width: 48rem) {
	.card--archive-row {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: var(--bsn-space-md);
	}
}

.card--archive-row:last-child { border-block-end: 0; }

.card--archive-row .card__media,
.card--archive-row .card__body { min-inline-size: 0; }

.card--archive-row .card__media {
	/*
	 * 3:2 from the design, over a 16:9 source file. The browser crops with
	 * object-fit: cover (set in base.css).
	 *
	 * WHY NOT REGISTER A 3:2 IMAGE SIZE: WordPress only puts same-ratio
	 * derivatives in a srcset, so a 3:2 slot would need its own family of sizes —
	 * and therefore a new derivative generated for each of the reportedly ~48,590
	 * production attachments. A 23px vertical crop is not worth that migration.
	 */
	aspect-ratio: 3 / 2;
	margin: 0;
}

/*
 * A row with no featured image collapses its media track instead of leaving a
 * 220px gap where a photograph would be. 207 of the 620 scale-test posts have no
 * thumbnail, which is roughly the proportion this archive should expect.
 */
.card--archive-row.card--no-image { grid-template-columns: minmax(0, 1fr); }

.card--archive-row .card__eyebrow {
	font-size: 0.625rem;
	font-weight: var(--bsn-weight-bold);
	letter-spacing: var(--bsn-tracking-label);
	margin-block-end: var(--bsn-space-3xs);
}

.card--archive-row .card__title {
	font-size: var(--bsn-text-lg);
	font-weight: var(--bsn-weight-semibold);
	line-height: 1.15;
	margin-block-end: var(--bsn-space-2xs);
	overflow-wrap: break-word;
}

.card--archive-row .card__dek {
	font-size: var(--bsn-text-base);
	line-height: var(--bsn-leading-normal);
	color: var(--bsn-ink-soft);
	margin-block-end: var(--bsn-space-2xs);
	max-inline-size: 44em;

	/*
	 * `anywhere`, not `break-word`. A card summary can contain a bare URL, and
	 * break-word refuses to split a single token longer than the line — which is
	 * exactly that case. Body text can afford the harsher rule; display type above
	 * cannot.
	 */
	overflow-wrap: anywhere;
}

.card--archive-row .byline { font-size: var(--bsn-text-2xs); }

/* =========================================================================
   AUTHOR ARCHIVE
   ====================================================================== */

.author-profile {
	background: var(--bsn-band);
	border-block-end: var(--bsn-hairline);
	padding-block: var(--bsn-space-xl);
}

.author-profile__inner {
	display: grid;
	gap: var(--bsn-space-md);
	align-items: center;
	justify-items: center;
	text-align: center;
}

@media (min-width: 48rem) {
	.author-profile__inner {
		grid-template-columns: 170px minmax(0, 1fr);
		gap: var(--bsn-space-lg);
		justify-items: start;
		text-align: start;
	}
}

/*
 * NO PORTRAIT, NO PORTRAIT COLUMN — and the identity block centres.
 *
 * 734 of 740 production authors reportedly have no photograph, so this is the
 * normal layout rather than a fallback. Left-aligned text with an empty 170px track
 * beside it reads as a rendering fault; centred, it reads as a design.
 */
.author-profile--no-photo .author-profile__inner {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
	max-inline-size: 46rem;
}

.author-profile__portrait {
	inline-size: clamp(7rem, 22vw, 170px);
	aspect-ratio: 1;
}

.author-profile__img,
.author-profile__portrait img {
	inline-size: 100%;
	block-size: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.author-profile__identity { min-inline-size: 0; }

.author-profile__role {
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.24em;
	margin-block-end: var(--bsn-space-2xs);
}

.author-profile__name {
	font-size: var(--bsn-text-3xl);
	font-weight: var(--bsn-weight-bold);
	line-height: 1;
	letter-spacing: var(--bsn-tracking-tight);
	margin: 0 0 var(--bsn-space-xs);
	text-wrap: balance;

	/* A long transliterated or double-barrelled name must break, not overflow. */
	overflow-wrap: break-word;
}

.author-profile__bio {
	max-inline-size: 40em;
	font-size: var(--bsn-text-md);
	line-height: 1.55;
	color: var(--bsn-ink-soft);
}

.author-profile--no-photo .author-profile__bio { margin-inline: auto; }

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

.author-profile__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bsn-space-2xs) var(--bsn-space-md);
	margin-block-start: var(--bsn-space-sm);
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
}

.author-profile--no-photo .author-profile__meta { justify-content: center; }

.author-profile__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bsn-space-2xs) var(--bsn-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.author-profile__link {
	display: inline-flex;
	align-items: center;

	/* WCAG 2.2 target size again: 11px uppercase text is a small hit area. */
	min-block-size: 2.75rem;

	font-weight: var(--bsn-weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bsn-ink-soft);

	/*
	 * The underline is the only thing that says these are links — they are
	 * uppercase sans labels, not prose. --bsn-rule-strong measured 1.6:1 against
	 * the profile band, faint enough that the affordance disappears; this measures
	 * 4.8:1.
	 */
	border-block-end: 1px solid var(--bsn-ink-muted);
}

.author-profile__link:hover,
.author-profile__link:focus-visible {
	color: var(--bsn-brass-text);
	border-block-end-color: var(--bsn-brass);
}

.author-profile__count {
	margin: 0;
	color: var(--bsn-ink-muted);
	letter-spacing: var(--bsn-tracking-wide);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

/* --- Author rows ------------------------------------------------------- */

.card--author-row,
.card--author-text {
	padding-block: var(--bsn-space-sm);
	border-block-end: var(--bsn-hairline);
}

.card--author-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 6rem;
	gap: var(--bsn-space-sm);
	align-items: center;
}

@media (min-width: 48rem) {
	.card--author-row {
		grid-template-columns: minmax(0, 1fr) 190px;
		gap: var(--bsn-space-lg);
	}
}

.card--author-row .card__media,
.card--author-row .card__body,
.card--author-text .card__body { min-inline-size: 0; }

.card--author-row .card__media {
	aspect-ratio: 3 / 2;
	margin: 0;
}

/* Media is last in the DOM; the grid places it in the second column either way. */
.card--author-row.card--no-image { grid-template-columns: minmax(0, 1fr); }

.card--author-row .card__title,
.card--author-text .card__title {
	font-size: var(--bsn-text-lg);
	font-weight: var(--bsn-weight-semibold);
	line-height: 1.12;
	margin-block-end: var(--bsn-space-2xs);
	overflow-wrap: break-word;
}

.card--author-row .card__eyebrow,
.card--author-text .card__eyebrow {
	font-size: 0.625rem;
	font-weight: var(--bsn-weight-bold);
	letter-spacing: var(--bsn-tracking-label);
	margin-block-end: var(--bsn-space-3xs);
}

/* --- Editorial team --------------------------------------------------- */

.team {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-sm);
}

.team__link {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--bsn-space-2xs);
	min-block-size: 2.75rem;
	padding-block: var(--bsn-space-3xs);
	border-block-end: var(--bsn-hairline);
	text-decoration: none;
	color: var(--bsn-ink-soft);
}

.team__item:last-child .team__link { border-block-end: 0; }

.team__link:hover .team__name,
.team__link:focus-visible .team__name { color: var(--bsn-brass-text); }

.team__name { font-weight: var(--bsn-weight-bold); }

/*
 * --bsn-ink-muted, not --bsn-ink-fainter. The design's #9A9184 measured 2.91:1 on
 * this ground at 13px — a WCAG 1.4.3 failure, and the role is the only thing that
 * distinguishes one name in this list from the next. #6E675C measures 5.23:1 and
 * still reads as secondary beside the bold name.
 */
.team__role { color: var(--bsn-ink-muted); }

.team__link--current { color: var(--bsn-ink); }
.team__link--current .team__name { color: var(--bsn-brass-text); }

/* =========================================================================
   SIDEBAR BLOCKS
   ====================================================================== */

.archive-sidebar {
	font-family: var(--bsn-font-sans);
	display: flex;
	flex-direction: column;
	gap: var(--bsn-space-lg);
}

.sidebar-block { min-inline-size: 0; }

/* --- Ranked list (trending) ------------------------------------------- */

.ranked {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.ranked__item {
	display: flex;
	gap: var(--bsn-space-xs);
	align-items: start;
	padding-block: var(--bsn-space-2xs);
	border-block-end: var(--bsn-hairline);
}

.ranked__item:last-child { border-block-end: 0; }

.ranked__n {
	flex: 0 0 auto;
	font-family: var(--bsn-font-serif);
	font-style: italic;
	color: var(--bsn-brass-text);
	font-variant-numeric: tabular-nums;
}

.ranked__title {
	min-inline-size: 0;
	font-family: var(--bsn-font-serif);
	font-size: var(--bsn-text-base);
	font-weight: var(--bsn-weight-semibold);
	line-height: 1.25;
	text-decoration: none;
	color: var(--bsn-ink);
	overflow-wrap: break-word;
}

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

/* =========================================================================
   SEARCH
   ====================================================================== */

/*
 * The approved Search design composes on a 980px measure, panel and results
 * alike — narrower than the site's 1080px wide container, because a result is a
 * headline and two lines of summary with nothing beside it. Phase 6's own comment
 * on .card--result already said "980px column"; the templates were using
 * container--wide, which made it 1080.
 *
 * -----------------------------------------------------------------------------
 * `.search-results` MUST BE QUALIFIED. WordPress puts it on <body>.
 *
 * body_class() emits `class="search search-results …"` on a results page, so a
 * bare `.search-results` rule matches the DOCUMENT, not the wrapper div that also
 * carries the class. Unqualified, the max-width below sized the entire page —
 * header, hero, results and footer all 980px in a 1440px viewport, with the rest
 * of the window left blank.
 *
 * `.site-main` cannot be an ancestor of <body>, so this can only ever match the
 * div. Every rule in this file that styles the wrapper is qualified the same way.
 * -----------------------------------------------------------------------------
 */
.search-hero__inner,
.site-main .search-results {
	--search-measure: 980px;

	max-inline-size: var(--search-measure);
	min-inline-size: 0;
}

.search-hero {
	background: var(--bsn-dark);
	color: var(--bsn-on-dark);
	padding-block: 1.625rem 2.75rem; /* 26 / 44 */
}

.search-hero__eyebrow {
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.24em;
	margin-block-end: var(--bsn-space-sm);

	/*
	 * The design's #A9873E, not the global on-dark brass. It measures 5.60:1 on
	 * #14120E, so the reference's own colour passes here and there is no reason to
	 * substitute the lighter tone the class carries for paler grounds.
	 */
	color: var(--bsn-brass);
}

.search-hero__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.125rem; /* 18px */
	border-block-end: 2px solid var(--bsn-brass);
	padding-block-end: 0.875rem; /* 14px */
}

.search-hero__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--bsn-brass);
}

.search-hero__icon svg {
	inline-size: 1.625rem;
	block-size: 1.625rem;
}

.search-hero__field {
	flex: 1 1 12rem;
	min-inline-size: 0;
	background: transparent;
	border: 0;

	/* The UA gives a search input its own padding; the design's field has none. */
	padding: 0;

	outline: none;
	color: var(--bsn-on-dark);
	font-family: var(--bsn-font-serif);
	font-size: clamp(1.375rem, 4vw, 2.375rem);
	font-weight: var(--bsn-weight-semibold);

	/*
	 * 40px at the reference's 38px, which is what it renders. Inherited body
	 * leading made the field 65px tall and pushed the brass rule down with it.
	 */
	line-height: 1.05;

	/* The UA search affordance is a light-on-dark mismatch here. */
	appearance: none;
}

.search-hero__field::placeholder {
	/* 4.6:1 on --bsn-dark. A placeholder must be readable, not a hint of one. */
	color: var(--bsn-on-dark-muted);
	opacity: 1;
}

.search-hero__field::-webkit-search-cancel-button { display: none; }

/*
 * The field has no border of its own, so :focus-visible on it would be invisible.
 * The focus ring goes on the form instead — the whole control lights up, which is
 * also what a sighted keyboard user expects from a composite field.
 */
.search-hero__form:focus-within {
	outline: var(--bsn-focus-ring);
	outline-offset: var(--bsn-space-2xs);
}

.search-hero__field:focus-visible { outline: none; }

.search-hero__submit {
	flex: 0 0 auto;

	/* 44px rather than the reference's 38px — WCAG 2.2 target size. */
	min-block-size: 2.75rem;

	padding-block: 0.75rem;   /* 12px */
	padding-inline: 1.625rem; /* 26px */
	background: var(--bsn-brass);
	color: var(--bsn-ink);
	border: 0;
	cursor: pointer;
	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;
	transition: background-color var(--bsn-duration) var(--bsn-ease);
}

.search-hero__submit:hover { background: var(--bsn-brass-light); }

/* Qualified for the same reason: <body> carries this class on a results page. */
.site-main .search-results { padding-block: var(--bsn-space-lg) var(--bsn-space-2xl); }

/* --- Results head and sort ------------------------------------------- */

.results-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--bsn-space-2xs) var(--bsn-space-md);
	border-block-end: var(--bsn-hairline);
	padding-block-end: var(--bsn-space-xs);
	font-family: var(--bsn-font-sans);
}

.results-head__count {
	margin: 0;
	min-inline-size: 0;
	font-size: var(--bsn-text-xs);
	color: var(--bsn-ink-muted);
	overflow-wrap: anywhere;
}

.results-head__count strong {
	color: var(--bsn-ink);
	font-weight: var(--bsn-weight-bold);
	font-variant-numeric: tabular-nums;
}

.sortbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bsn-space-md);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sortbar__option {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	text-decoration: none;
	color: var(--bsn-ink-muted);
	border-block-end: 2px solid transparent;
}

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

/*
 * The current sort is brass AND underlined — colour alone would make the state
 * invisible to a reader who cannot distinguish it (WCAG 1.4.1).
 *
 * The underline is --bsn-brass-deep rather than --bsn-brass because it is doing
 * most of the work: the current and inactive text colours measure 5.09:1 and
 * 5.23:1, so they are close enough in lightness that the rule is what a reader
 * actually sees. --bsn-brass measured 2.97:1 against the page, just under the 3:1
 * that SC 1.4.11 asks of a state indicator; --bsn-brass-deep measures 3.9:1.
 */
.sortbar__option--current {
	color: var(--bsn-brass-text);
	border-block-end-color: var(--bsn-brass-deep);
}

/* --- Result card ------------------------------------------------------ */

.card--result {
	padding-block: 1.375rem; /* 22px */
	border-block-end: var(--bsn-hairline);
}

.card--result .card__body { min-inline-size: 0; }

.card--result .card__eyebrow {
	font-size: 0.625rem;
	font-weight: var(--bsn-weight-bold);
	letter-spacing: var(--bsn-tracking-label);
	margin-block-end: 0.375rem; /* 6px */
}

.card--result .card__title {
	/* 26px by ~1084px, which is where the 980px measure stops growing. */
	font-size: clamp(1.25rem, 2.4vw, 1.625rem);

	font-weight: var(--bsn-weight-semibold);
	line-height: 1.12;
	margin-block-end: 0.5rem; /* 8px */
	overflow-wrap: break-word;
}

.card--result .card__dek {
	font-size: 0.96875rem; /* 15.5px */
	line-height: 1.5;
	margin-block-end: 0.5rem; /* 8px */
	color: var(--bsn-ink-soft);

	/*
	 * Measured at 92 characters before this cap. Search results sit in a 980px
	 * column with no sidebar beside them, so nothing else was constraining the
	 * line; 92 characters is past the point where the eye loses the start of the
	 * next line. 38em lands it near 76.
	 */
	max-inline-size: 38em;

	overflow-wrap: anywhere;
}

/*
 * Matched search terms.
 *
 * 12.4:1 against --bsn-ink, so the highlight raises contrast rather than lowering
 * it. `mark` is also announced by some screen readers, which is correct here: the
 * marked words are why this result is in the list.
 */
.card--result .byline { font-size: 0.65625rem; } /* 10.5px */

.card--result mark {
	background: var(--bsn-highlight);
	color: var(--bsn-ink);
	padding-inline: 0.15em;
	border-radius: 1px;
}

/* --- Discovery blocks ------------------------------------------------- */

.discover {
	display: grid;
	gap: var(--bsn-space-lg);
	margin-block-start: var(--bsn-space-xl);
}

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

.discover__block { min-inline-size: 0; }

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

.linklist__item { border-block-end: var(--bsn-hairline); }
.linklist__item:last-child { border-block-end: 0; }

.linklist__link {
	display: block;
	padding-block: var(--bsn-space-2xs);
	font-size: var(--bsn-text-md);
	font-weight: var(--bsn-weight-semibold);
	line-height: 1.3;
	text-decoration: none;
	color: var(--bsn-ink);
	overflow-wrap: break-word;
}

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

/* =========================================================================
   PAGINATION
   ====================================================================== */

.pagination {
	margin-block: var(--bsn-space-xl) 0;
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-sm);
	text-align: center;
}

.pagination__status {
	margin: 0 0 var(--bsn-space-xs);
	font-size: var(--bsn-text-2xs);
	letter-spacing: var(--bsn-tracking-wide);
	text-transform: uppercase;
	color: var(--bsn-ink-muted);
	font-variant-numeric: tabular-nums;
}

.pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bsn-space-3xs);
	align-items: stretch;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Every target is at least 44 × 44px (WCAG 2.2, 2.5.8). Page numbers are the
 * smallest labels on the site and the easiest control to mis-tap on a phone.
 */
.pagination__list .page-numbers,
.pagination__link {
	display: inline-grid;
	place-items: center;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	padding-inline: var(--bsn-space-2xs);

	/*
	 * A darker border than the archive's hairline rules, deliberately.
	 *
	 * --bsn-rule-strong measured 1.66:1 against the page. On a page number that
	 * boundary is not decoration: it is the only thing showing where one tap target
	 * ends and the next begins, which SC 1.4.11 asks to reach 3:1. --bsn-ink-muted
	 * measures 5.0:1.
	 *
	 * It is also closer to the approved design than the hairline was: the Category
	 * layout's own "LOAD MORE STORIES" control is bordered in near-black.
	 */
	border: 1px solid var(--bsn-ink-muted);

	text-decoration: none;
	color: var(--bsn-ink-soft);
	font-variant-numeric: tabular-nums;
	transition: border-color var(--bsn-duration) var(--bsn-ease),
		color var(--bsn-duration) var(--bsn-ease);
}

.pagination__list a.page-numbers:hover,
.pagination__list a.page-numbers:focus-visible,
.pagination__link:hover,
.pagination__link:focus-visible {
	border-color: var(--bsn-brass);
	color: var(--bsn-brass-text);
}

/* Current page: filled, and it is a <span> so there is nothing to click. */
.pagination__list .page-numbers.current {
	background: var(--bsn-ink);
	border-color: var(--bsn-ink);
	color: var(--bsn-on-dark);
	font-weight: var(--bsn-weight-bold);
}

.pagination__item--dots .page-numbers {
	border: 0;
	min-inline-size: 1.5rem;

	/*
	 * --bsn-ink-faint measured 3.59:1 here and fails at 13px. The ellipsis is not
	 * decoration: it is the page telling a reader that numbers were skipped, and a
	 * reader who cannot see it reads "1 2 3 7" as a complete list.
	 */
	color: var(--bsn-ink-muted);
}

.pagination__link--step {
	gap: var(--bsn-space-3xs);
	grid-auto-flow: column;
	font-weight: var(--bsn-weight-bold);
	letter-spacing: var(--bsn-tracking-wide);
	text-transform: uppercase;
	font-size: var(--bsn-text-2xs);
	padding-inline: var(--bsn-space-sm);
}

/* =========================================================================
   EMPTY STATES
   ====================================================================== */

.empty { padding-block: var(--bsn-space-lg) var(--bsn-space-2xl); }

.empty__lead {
	font-size: var(--bsn-text-lg);
	line-height: var(--bsn-leading-snug);
	margin: 0 0 var(--bsn-space-2xs);
	max-inline-size: 34em;

	/* A search query is arbitrary text and can be one long token. */
	overflow-wrap: anywhere;
}

.empty__hint {
	color: var(--bsn-ink-muted);
	margin: 0 0 var(--bsn-space-md);
	max-inline-size: 40em;
}

.empty__latest { margin-block-start: var(--bsn-space-xl); }

/* =========================================================================
   SECTION HEAD — the archive's supporting count line
   ====================================================================== */

.archive-main .section-note,
.site-main .search-results .section-note {
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	letter-spacing: var(--bsn-tracking-wide);
	text-transform: uppercase;
	color: var(--bsn-ink-muted);
	font-variant-numeric: tabular-nums;
	margin: calc(var(--bsn-space-2xs) * -1) 0 var(--bsn-space-md);
}

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

@media (prefers-reduced-motion: reduce) {
	.chip,
	.pagination__list .page-numbers,
	.pagination__link,
	.search-hero__submit {
		transition: none;
	}
}