/* =============================================================================
   Black Star News — base
   =============================================================================
   Global UI loaded on every page: reset, typography, layout containers, header,
   footer, story-card base, accessibility affordances and ad slots.

   Per-template rules live in home.css / article.css / archive.css and load only
   where needed.

   Cascade layers keep specificity predictable — a component rule never has to
   out-specify a reset. !important appears in exactly two places, both where it is
   the correct tool: the prefers-reduced-motion block, which must beat any
   animation declaration including inline ones, and the .is-hidden utility, whose
   entire purpose is to win.
   ========================================================================== */


/* =============================================================================
   RESET
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Margins come from layout gap, not from element defaults. */
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
	margin: 0;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/*
 * Scroll padding, not scroll-margin on every target: the sticky section nav
 * would otherwise cover the heading an in-page link jumps to.
 *
 * It lives on `html` unconditionally. It used to sit inside the
 * `html:focus-within` rule below, which meant it only applied once something in
 * the document had focus — so following /#latest from a cold page load landed the
 * heading at the very top of the viewport, underneath the sticky nav. Scroll
 * padding has to be true before the first interaction, because that is exactly
 * when a shared fragment link is used.
 *
 * 5rem clears the 76px desktop bar and the 58px mobile one.
 */
html { scroll-padding-top: 5rem; }

/*
 * Logged-in staff also have the admin bar above the nav, so the safe distance is
 * the bar plus the nav. Below 601px WordPress stops fixing the admin bar and it
 * scrolls away, so the base value is correct again there.
 */
html:has(body.admin-bar) { scroll-padding-top: 7.5rem; }

@media screen and (max-width: 600px) {
	html:has(body.admin-bar) { scroll-padding-top: 5rem; }
}

/* Smooth scrolling only once the reader has interacted — unchanged. */
html:focus-within {
	scroll-behavior: smooth;
}

img,
picture,
video,
iframe,
svg {
	display: block;
	max-width: 100%;
}

/*
 * height:auto only where width/height attributes are present, so an image
 * keeps its intrinsic aspect ratio and reserves space before it loads. This
 * is the CLS-prevention rule; every <img> the theme renders carries both
 * attributes.
 */
img[width][height] {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
	/*
	 * Form controls size themselves from `cols`/`size` attributes, not from
	 * their container. WordPress's comment form ships cols="45", which is
	 * about 427px and overflows a 390px viewport — the page then scrolls
	 * sideways on a phone. Capping the inline size makes every control
	 * fluid regardless of the attributes a plugin or core sets.
	 */
	max-inline-size: 100%;
}

textarea {
	/* Vertical only; horizontal resize would reintroduce the overflow. */
	resize: vertical;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =============================================================================
   BASE TYPOGRAPHY
   ========================================================================== */
body {
	background: var(--bsn-page);
	color: var(--bsn-ink);
	font-family: var(--bsn-font-serif);
	font-size: var(--bsn-text-body);
	line-height: var(--bsn-leading-body);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	/* No horizontal overflow, ever. */
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bsn-font-serif);
	font-weight: var(--bsn-weight-bold);
	line-height: var(--bsn-leading-tight);
	letter-spacing: var(--bsn-tracking-tight);
	/* Avoids a single orphaned word on a two-line headline. */
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/*
 * The design's link reset: chrome links carry no underline, and colour is
 * inherited so a headline link is headline-coloured. Underlines are added back
 * deliberately where they aid comprehension — inside article prose, and on
 * headline hover.
 */
a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--bsn-brass);
}

/* Body copy is the one place a link must be identifiable without relying on
 * colour alone — WCAG 1.4.1. */
.entry-content a,
.archive-header__description a {
	text-decoration: underline;
	text-decoration-color: var(--bsn-brass);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

/*
 * Focus: visible, high contrast, never removed. :focus-visible so a mouse
 * click does not leave a ring behind while keyboard navigation always shows
 * one.
 *
 * WHY INK AND NOT BRASS. Brass (#A9873E) on the cream page ground measures
 * 3.12:1 — it passes WCAG 2.2 SC 1.4.11 (3:1 for non-text contrast) with
 * almost no margin, and any future tweak to either colour could push it
 * under. Ink on cream is roughly 18:1, so the indicator stays unambiguous.
 *
 * The approved design files are static exports and specify no focus state at
 * all, so this supplies what is missing rather than overriding a decision.
 */
:focus-visible {
	outline: 2px solid var(--bsn-ink);
	outline-offset: var(--bsn-focus-offset);
	border-radius: 1px;
}

/* On the dark bands and footer, ink would be invisible. */
.band--dark :focus-visible,
.site-footer :focus-visible,
.breaking :focus-visible,
.newsletter--band :focus-visible {
	outline-color: var(--bsn-brass-light);
}

/* Windows High Contrast Mode discards author colours entirely. */
@media (forced-colors: active) {
	:focus-visible {
		outline: 3px solid CanvasText;
	}
}

strong, b { font-weight: var(--bsn-weight-bold); }
em, i { font-style: italic; }

small {
	font-size: var(--bsn-text-xs);
}

hr {
	border: 0;
	border-top: var(--bsn-hairline);
	margin-block: var(--bsn-space-lg);
}

::selection {
	background: var(--bsn-brass-light);
	color: var(--bsn-ink);
}

/* =============================================================================
   LAYOUT
   ========================================================================== */
.container {
	width: 100%;
	max-width: var(--bsn-width-page);
	margin-inline: auto;
	padding-inline: var(--bsn-gutter);
}

.container--wide { max-width: var(--bsn-width-wide); }
.container--text { max-width: var(--bsn-width-text); }
.container--narrow { max-width: var(--bsn-width-narrow); }

/* Full-bleed band that keeps its inner content aligned to the container. */
.band {
	background: var(--bsn-band);
	border-block: var(--bsn-hairline);
	padding-block: var(--bsn-space-xl);
}

.band--dark {
	background: var(--bsn-dark);
	border-block-color: var(--bsn-rule-dark);
	color: var(--bsn-on-dark);
}

.stack {
	display: flex;
	flex-direction: column;
	gap: var(--stack-gap, var(--bsn-space-md));
}

.grid {
	display: grid;
	gap: var(--grid-gap, var(--bsn-space-md));
}

/*
 * Mobile-first: one column by default, and columns are added upward. The
 * design's card grids all follow this shape, so it is defined once.
 */
@media (min-width: 40rem) {
	.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
	.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* Lead story plus a supporting rail, from the pillar sections. */
	.grid--lead-rail { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
	/* Article body plus sidebar. */
	.grid--article { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
}

main:focus {
	outline: none;
}

/* =============================================================================
   COMPONENTS
   ========================================================================== */

/* --- Skip link ------------------------------------------------------- */
/*
 * Off-screen rather than display:none — a hidden element is not focusable,
 * which would defeat the purpose.
 */
/*
 * Off-screen rather than display:none — a hidden element is not focusable,
 * which would defeat the purpose. WCAG 2.4.1.
 *
 * `top` is animated rather than `transform`, and the focused state sets a
 * position that is correct with or without the transition completing: a
 * reduced-motion user, or anyone whose first Tab is faster than 180ms, still
 * sees the link immediately rather than mid-slide.
 */
.skip-link {
	position: absolute;
	top: -3rem;
	left: var(--bsn-space-sm);
	z-index: var(--bsn-z-skip-link);
	background: var(--bsn-ink);
	color: var(--bsn-on-dark);
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-sm);
	font-weight: var(--bsn-weight-semibold);
	padding: var(--bsn-space-2xs) var(--bsn-space-sm);
	text-decoration: none;
	transition: top var(--bsn-duration) var(--bsn-ease);
}

.skip-link:focus {
	top: 0;
}

.skip-link:focus-visible {
	outline-color: var(--bsn-brass-light);
}

/* --- Screen-reader text ---------------------------------------------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

/* --- Wordmark --------------------------------------------------------
 * Visually the masthead. Semantically NOT a heading — see
 * template-parts/components/wordmark.php. Sizes come from tokens measured
 * off the approved design (62px desktop, fluid down to 32px).
 */
.wordmark {
	font-family: var(--bsn-font-serif);
	font-weight: var(--bsn-weight-black);
	font-size: var(--bsn-wordmark-size);
	line-height: 1;
	letter-spacing: var(--bsn-wordmark-tracking);
	text-transform: uppercase;
	text-align: center;
	margin: 0;
}

.wordmark__link {
	color: var(--bsn-ink);
	text-decoration: none;
	display: inline-block;
}

.wordmark__link:hover {
	color: var(--bsn-ink);
}

.wordmark__star {
	color: var(--bsn-brass);
	font-size: var(--bsn-wordmark-star);
	/* Optically the star rides high beside uppercase letterforms. */
	vertical-align: 0.1em;
	padding-inline: 0.08em;
}

.wordmark__image {
	margin-inline: auto;
	height: auto;
}

/* --- Eyebrow / kicker / label ---------------------------------------- */
.eyebrow {
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-bold);
	letter-spacing: var(--bsn-section-label-tracking);
	text-transform: uppercase;
	color: var(--bsn-brass-text);
	margin: 0;
}

.eyebrow a {
	text-decoration: none;
}

.eyebrow a:hover {
	color: var(--bsn-ink);
}

.eyebrow__star {
	color: var(--bsn-brass-text);
}

.eyebrow--muted { color: var(--bsn-ink-faint); }
.eyebrow--on-dark { color: var(--bsn-brass-light); }

/* --- Provenance labels ----------------------------------------------
 * Sponsored content must be identifiable as sponsored BEFORE a reader
 * begins reading. This is a disclosure, so it gets a border and its own
 * ground rather than a grey caption that skims past.
 */
.label {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;

	/*
	 * A badge is the width of its words. `inline-flex` says so, but a card body is
	 * a grid or a column flex container in most variants, and a block-level child
	 * of one stretches to the track — which turned a bordered label into a 714px
	 * outlined bar running the width of an archive row. These three lines make the
	 * box shrink-wrap whatever the parent's layout is, and stop a long sponsor
	 * name overflowing it.
	 */
	align-self: start;
	justify-self: start;
	inline-size: fit-content;
	max-inline-size: 100%;
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-bold);
	letter-spacing: var(--bsn-section-label-tracking);
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}

.label--original { color: var(--bsn-brass-text); }

/*
 * Partner content gets a rule too. Muted uppercase text alone is exactly what an
 * ordinary section kicker looks like, so a reader scanning a row of cards had no
 * way to tell a disclosure from a category without stopping to read it. Outlined
 * rather than tinted: partner material is not paid placement, and the two must not
 * look like the same thing.
 *
 * These are the treatments the Advertise page shows advertisers as PARTNER and
 * SPONSORED. The label a reader meets in a listing and the one promised on that
 * page are deliberately the same object.
 */
.label--partner {
	color: var(--bsn-ink-muted);
	border: 1px solid var(--bsn-rule-strong);
	padding: 0.34em 0.5em;
}

.label--sponsored {
	color: var(--bsn-ink);
	background: var(--bsn-sponsored-bg);
	border: 1px solid var(--bsn-sponsored-rule);
	padding: 0.34em 0.5em;
}

/* --- Section heading ------------------------------------------------- */
.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bsn-space-2xs) var(--bsn-space-sm);
	border-top: 3px solid var(--bsn-ink);
	padding-top: var(--bsn-space-2xs);
	margin-bottom: var(--bsn-space-md);
}

.section-head__title {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	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;
	line-height: 1;
	margin: 0;
}

.section-head__star { color: var(--bsn-brass-text); }

.section-head__more {
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-semibold);
	letter-spacing: var(--bsn-tracking-wide);
	text-transform: uppercase;
	color: var(--bsn-brass-text);
	text-decoration: none;
}

.band--dark .section-head { border-top-color: var(--bsn-rule-dark); }
.band--dark .section-head__title { color: var(--bsn-on-dark); }

/* =========================================================================
   UTILITY BAR
   ====================================================================== */
.utility-bar {
	background: var(--bsn-page);
	border-bottom: var(--bsn-hairline);
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-utility-size);
	letter-spacing: var(--bsn-utility-tracking);
	color: var(--bsn-ink-muted);
}

.utility-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bsn-space-sm);
	min-height: var(--bsn-utility-min-h);
	padding-block: var(--bsn-utility-pad-y);
}

.utility-bar__meta {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-width: 0;
}

.utility-bar__date {
	font-weight: var(--bsn-weight-semibold);
	color: var(--bsn-ink);
	white-space: nowrap;
}



/*
 * The publication strapline, which replaced the newsroom location here. It is a
 * whole sentence rather than a city, so it must be allowed to shrink: `nowrap`
 * plus a flex sibling would push the utility actions off the right edge at the
 * widths between the menu collapsing and the bar having room for both.
 *
 * It truncates rather than wrapping, because a two-line utility bar changes the
 * height of every page's header. The full text is in the markup either way.
 */
.utility-bar__strapline {
	min-inline-size: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	/* The divider, as a border rather than a "|" character. */
	border-inline-start: 1px solid var(--bsn-rule-strong);
	padding-inline-start: 0.875rem;
}

.utility-bar__actions {
	display: flex;
	align-items: center;
	gap: var(--bsn-space-sm);
}

.utility-bar__search-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font: inherit;
	font-weight: var(--bsn-weight-semibold);
	letter-spacing: inherit;
	color: var(--bsn-ink);
	/* 44px target without changing the bar's visual height. */
	min-height: 2.75rem;
	padding-inline: 0.125rem;
}

.utility-bar__search-toggle:hover { color: var(--bsn-brass); }

.utility-bar__cta {
	background: var(--bsn-ink);
	color: var(--bsn-page);
	font-size: 0.625rem;
	font-weight: var(--bsn-weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.375rem 0.875rem;
	white-space: nowrap;
}

.utility-bar__cta:hover {
	background: var(--bsn-brass);
	color: var(--bsn-ink);
}

/* Search panel. Closed only when `.js` is present — that class is set during
 * head parsing, so the closed state applies at first paint and never shifts.
 * Without JavaScript the panel stays open and the form works. */
.utility-bar__search-panel {
	border-top: var(--bsn-hairline);
	padding-block: var(--bsn-space-2xs);
	background: var(--bsn-band);
}

.js .utility-bar__search-panel[data-open="false"] { display: none; }

/* Below the desktop breakpoint the utility bar keeps only the date: the
 * links live in the drawer and the search control moves to the nav. */
@media (max-width: 59.999rem) {
	.utility-bar__nav,
	.utility-bar__search-toggle { display: none; }

	.utility-bar__inner { justify-content: space-between; }
}

/*
 * Below 640px the utility bar keeps the date alone.
 *
 * Raised from 480px with the strapline: it is a sentence, not a city, and the
 * room left beside the date on a phone truncates it to an ellipsis and two
 * letters. A line nobody can read is worse than an absent one, and the same words
 * are the first thing in the footer.
 */
@media (max-width: 39.999rem) {
	.utility-bar__strapline { display: none; }
}

/* =========================================================================
   MASTHEAD
   ====================================================================== */
.masthead {
	background: var(--bsn-page);
	padding-block: var(--bsn-masthead-pad-top) var(--bsn-masthead-pad-bottom);
	text-align: center;
}

.masthead__tagline {
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-tagline-size);
	letter-spacing: var(--bsn-tagline-tracking);
	text-transform: uppercase;
	color: var(--bsn-ink-muted);
	margin-top: 0.75rem;
}

/* The masthead collapses on mobile: the compact wordmark in the sticky nav
 * takes over, matching Mobile.dc.html. */
@media (max-width: 47.999rem) {
	.masthead { display: none; }
}

/* =========================================================================
   SECTION NAVIGATION
   ====================================================================== */
/*
 * Sticky, and it now actually sticks.
 *
 * The declaration was here before but the element was a child of .site-header,
 * and `position: sticky` is bounded by its containing block rather than by the
 * viewport — so it could only stay put for the ~76px that header occupied, then
 * scrolled away with it. The nav is now a sibling of the header (see header.php),
 * which makes .site its containing block and the whole page its range.
 *
 * No JavaScript, no scroll listener, no cloned second navigation.
 */
.section-nav {
	position: sticky;
	top: 0;
	z-index: var(--bsn-z-sticky-nav);

	/*
	 * Fully opaque, not the 97% the design file used. Once this bar genuinely
	 * stays over the article, 3% of the body text underneath shows through every
	 * headline in it. The backdrop blur that accompanied the translucency went
	 * with it: there is nothing left to blur behind an opaque surface, and it cost
	 * a compositing layer on every scroll frame.
	 */
	background: var(--bsn-page);

	border-block: 1px solid var(--bsn-ink);
}

/*
 * The admin bar is fixed above everything for logged-in users, so the sticky nav
 * has to start below it rather than under it. WordPress's own breakpoints: 32px
 * tall above 782px, 46px between 601 and 782, and below 601 it stops being fixed
 * and scrolls away — where the nav goes back to the top of the viewport.
 */
.admin-bar .section-nav { top: var(--wp-admin--admin-bar--height, 32px); }

@media screen and (max-width: 782px) {
	.admin-bar .section-nav { top: 46px; }
}

@media screen and (max-width: 600px) {
	.admin-bar .section-nav { top: 0; }
}

.section-nav__inner {
	display: flex;
	align-items: center;
	gap: var(--bsn-space-2xs);
	min-height: var(--bsn-nav-min-h);
	padding-block: var(--bsn-nav-pad-y);
}

/* Compact wordmark: mobile only.
 *
 * It sits between two 44px controls, so at 320px a fixed 19px nowrap
 * wordmark cannot fit and the row overflows. min-inline-size:0 lets a flex
 * item actually shrink (nowrap otherwise pins it to its content width), and
 * the size scales with the viewport so it stays on one line without
 * pushing the search button off-screen.
 */
.section-nav__wordmark {
	flex: 1 1 auto;
	min-inline-size: 0;
	margin: 0;
	text-align: center;
	font-family: var(--bsn-font-serif);
	font-size: clamp(0.875rem, 4.2vw, 1.1875rem);
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.section-nav__empty {
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-xs);
	color: var(--bsn-ink-faint);
	margin: 0;
}

.nav-toggle,
.nav-search {
	display: inline-grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	flex: 0 0 auto;
	color: var(--bsn-ink);
}

.nav-toggle:hover,
.nav-search:hover { color: var(--bsn-brass); }

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	inline-size: 1.25rem;
	block-size: 2px;
	background: currentColor;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: relative;
}

.nav-toggle__bars::before { top: -0.375rem; }
.nav-toggle__bars::after { top: 0.3125rem; }

/* --- The navigation logo ---------------------------------------------
 * Desktop only. The stacked masthead it replaced is no longer rendered, so this
 * is the logo at every width above the breakpoint; below it, the compact text
 * wordmark above carries the name.
 */
.wordmark--nav { display: none; }

/*
 * Sized from the WIDTH, not the height.
 *
 * The artwork carries a viewBox and no width/height attributes, so it has an
 * intrinsic ratio but no intrinsic size. `height: 44px; width: auto` therefore
 * resolved to nothing — the image rendered 0x0. Giving the width a real value and
 * letting the height follow is what the masthead did, and it works for the same
 * reason.
 *
 * `aspect-ratio` states the 302:81 proportions explicitly rather than relying on
 * the width/height attributes, so the box is the right shape before the file
 * arrives and nothing shifts when it does.
 */
.wordmark--nav .wordmark__image {
	display: block;
	inline-size: 10.25rem;   /* 164px */
	block-size: auto;        /* 44px, from the ratio below */
	aspect-ratio: 302 / 81;
	max-inline-size: none;
	margin-inline: 0;
}

/* Desktop: the design centres the section links and hides the mobile chrome. */
@media (min-width: 48rem) {
	.section-nav__wordmark { display: none; }
}

@media (min-width: 60rem) {
	.nav-toggle,
	.nav-search { display: none; }

	/*
	 * Logo left, sections beside it, one row. The menu takes the remaining space
	 * and is allowed to shrink — `min-inline-size: 0` is what lets a flex item
	 * narrower than its content wrap instead of pushing the row wider than the
	 * container.
	 *
	 * Eleven section links need 966px on a single line, so between roughly 960px
	 * and 1200px the links wrap to a second line beside the logo. That is the
	 * deliberate behaviour: the alternative at those widths is either a logo too
	 * small to read or a navigation bar that overflows.
	 */
	.section-nav__inner {
		justify-content: flex-start;
		gap: var(--bsn-space-md);
	}

	.wordmark--nav {
		display: block;
		flex: 0 0 auto;
		margin: 0;
	}

	.section-nav__menu {
		flex: 1 1 auto;
		min-inline-size: 0;
	}

	/*
	 * Qualified with .section-nav so it outranks the `.menu--primary` base rule,
	 * which sets `center` and is declared later in this file. Without it the
	 * wrapped second line floated to the middle of the row instead of sitting
	 * under the first link.
	 */
	.section-nav .menu--primary { justify-content: flex-start; }

	.section-nav__utility { display: none; }
}

/* --- Menus ----------------------------------------------------------- */
.menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bsn-space-2xs) 1.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--bsn-font-sans);
}

.menu li { position: relative; }

.menu--primary {
	justify-content: center;
	font-size: var(--bsn-nav-size);
	font-weight: var(--bsn-weight-bold);
	letter-spacing: var(--bsn-nav-tracking);
	text-transform: uppercase;
}

.menu--primary .menu-item__link {
	display: inline-block;
	text-decoration: none;
	padding-block: 0.25rem;
	/* Reserve the hover underline so it cannot shift the row. */
	border-bottom: 2px solid transparent;
}

.menu--primary .menu-item__link:hover {
	color: var(--bsn-brass);
	border-bottom-color: var(--bsn-brass);
}

.menu--primary .current-menu-item > .menu-item__link,
.menu--primary [aria-current="page"] {
	color: var(--bsn-brass);
}

.menu--utility,
.menu--drawer-utility {
	font-size: var(--bsn-utility-size);
	letter-spacing: var(--bsn-utility-tracking);
	gap: var(--bsn-space-xs) 1.25rem;
}

.menu--utility a,
.menu--drawer-utility a {
	text-decoration: none;
	color: var(--bsn-ink-muted);
}

.menu--utility a:hover,
.menu--drawer-utility a:hover { color: var(--bsn-brass); }

/* Submenu: hidden by CSS, revealed on hover, focus-within, or when the
 * disclosure button sets aria-expanded. The focus-within rule is what makes
 * it keyboard-operable with JavaScript disabled. */
.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--bsn-z-sticky-nav);
	min-inline-size: 12rem;
	flex-direction: column;
	gap: 0;
	background: var(--bsn-page);
	border: 1px solid var(--bsn-ink);
	padding: var(--bsn-space-2xs) 0;
}

.menu-item--has-submenu:hover > .sub-menu,
.menu-item--has-submenu:focus-within > .sub-menu,
.menu-item__toggle[aria-expanded="true"] ~ .sub-menu {
	display: flex;
}

.sub-menu .menu-item__link {
	display: block;
	padding: 0.25rem var(--bsn-space-sm);
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--bsn-text-sm);
	border-bottom: 0;
}

/* The disclosure button. 44px hit area (WCAG 2.5.8) even though the chevron
 * is small. The parent link stays navigable — one control, one action. */
.menu-item__toggle {
	display: inline-grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin-inline-start: -0.25rem;
	color: var(--bsn-ink-muted);
}

.menu-item__toggle::after {
	content: "";
	inline-size: 0.4rem;
	block-size: 0.4rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-0.1em);
	transition: transform var(--bsn-duration-fast) var(--bsn-ease);
}

.menu-item__toggle[aria-expanded="true"]::after {
	transform: rotate(-135deg) translateY(-0.1em);
}

/* --- Mobile drawer --------------------------------------------------- */
@media (max-width: 59.999rem) {
	/* Enhanced state only: `.js` is set before first paint, so the drawer
	 * never paints expanded and then shrinks. Without JavaScript the menu is
	 * a plain visible link list. */
	.js .section-nav__menu { display: none; }

	.js .section-nav__menu[data-open="true"] {
		display: flex;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		z-index: var(--bsn-z-drawer);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--bsn-page);
		border-bottom: 1px solid var(--bsn-ink);
		padding: var(--bsn-space-2xs) var(--bsn-gutter) var(--bsn-space-sm);
		max-height: calc(100dvh - 100%);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.section-nav__menu[data-open="true"] .menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.section-nav__menu[data-open="true"] .menu-item__link {
		display: block;
		padding-block: 0.625rem;
		border-bottom: var(--bsn-hairline);
	}

	.section-nav__menu[data-open="true"] .sub-menu {
		position: static;
		border: 0;
		padding: 0 0 0 var(--bsn-space-sm);
	}

	.section-nav__utility {
		margin-top: var(--bsn-space-sm);
		padding-top: var(--bsn-space-2xs);
		border-top: var(--bsn-hairline);
	}
}

/* =========================================================================
   BREAKING
   ====================================================================== */
.breaking {
	background: var(--bsn-ink);
	color: var(--bsn-on-dark);
}

.breaking__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.breaking__inner {
	display: flex;
	align-items: center;
	gap: var(--bsn-space-sm);
	padding-block: 0.625rem;
	font-family: var(--bsn-font-sans);
	font-size: 0.78125rem;
}

.breaking__label {
	flex: 0 0 auto;
	background: var(--bsn-brass);
	color: var(--bsn-ink);
	font-size: 0.625rem;
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.25rem 0.5625rem;
}

.breaking__headline {
	font-weight: var(--bsn-weight-medium);
	letter-spacing: 0.01em;
	min-width: 0;
}

.breaking__more {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-inline-start: auto;
	flex: 0 0 auto;
	color: var(--bsn-brass);
	font-weight: var(--bsn-weight-bold);
	white-space: nowrap;
}

.breaking__link:hover .breaking__more { color: var(--bsn-brass-light); }

@media (max-width: 47.999rem) {
	/* Matches Mobile.dc.html: one line, truncated, no "Follow live". */
	.breaking__more { display: none; }

	.breaking__headline {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* =========================================================================
   SEARCH FORM
   ====================================================================== */
.search-form {
	display: flex;
	gap: 0;
	align-items: stretch;
}

.search-form__field {
	flex: 1 1 auto;
	min-inline-size: 0;
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-sm);
	padding: 0.625rem 0.75rem;
	background: var(--bsn-surface);
	border: 1px solid var(--bsn-rule-strong);
	color: var(--bsn-ink);
}

.search-form__field::placeholder { color: var(--bsn-ink-faint); }

.search-form__submit {
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding-inline: var(--bsn-space-md);
	background: var(--bsn-ink);
	color: var(--bsn-on-dark);
	border: 1px solid var(--bsn-ink);
}

.search-form__submit:hover {
	background: var(--bsn-brass);
	border-color: var(--bsn-brass);
	color: var(--bsn-ink);
}

/* =========================================================================
   BUTTONS
   ====================================================================== */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-block-size: 2.75rem;
	padding: 0.625rem var(--bsn-space-md);
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-xs);
	font-weight: var(--bsn-weight-bold);
	letter-spacing: var(--bsn-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	background: var(--bsn-ink);
	color: var(--bsn-on-dark);
	border: 1px solid var(--bsn-ink);
	transition: background var(--bsn-duration-fast) var(--bsn-ease);
}

.button:hover {
	background: var(--bsn-brass);
	border-color: var(--bsn-brass);
	color: var(--bsn-ink);
}

.button--ghost { background: transparent; color: var(--bsn-ink); }

/* =========================================================================
   STORY CARDS — one component, seven variants
   ====================================================================== */
.card {
	display: flex;
	flex-direction: column;
	gap: var(--bsn-space-2xs);
	min-width: 0;
}

.card__media {
	position: relative;
	margin: 0;
	background: var(--bsn-band-soft);
	/* Reserves space before the image decodes — the CLS rule. */
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.card__media--square { aspect-ratio: 1 / 1; }

.card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4375rem;
	min-width: 0;
}

.card__title {
	font-size: var(--bsn-text-md);
	font-weight: var(--bsn-weight-bold);
	line-height: var(--bsn-leading-snug);
	letter-spacing: var(--bsn-tracking-tight);
	margin: 0;
}

.card__title a { text-decoration: none; }

.card__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.14em;
	text-decoration-color: var(--bsn-brass);
}

.card__dek {
	font-size: var(--bsn-text-base);
	line-height: var(--bsn-leading-normal);
	color: var(--bsn-ink-soft);
	margin: 0;
}

.card__rank {
	font-family: var(--bsn-font-serif);
	font-style: italic;
	font-size: 1.375rem;
	color: var(--bsn-brass-text);
	flex: 0 0 auto;
	line-height: 1;
}

/* --- Variants -------------------------------------------------------- */
.card--feature .card__title { font-size: var(--bsn-text-2xl); }
.card--feature .card__dek { font-size: var(--bsn-text-md); }

.card--standard .card__title { font-size: var(--bsn-text-lg); }

.card--compact .card__title { font-size: var(--bsn-text-base); }

.card--horizontal {
	flex-direction: row;
	gap: var(--bsn-space-sm);
	align-items: flex-start;
}

.card--horizontal .card__media {
	flex: 0 0 5rem;
	aspect-ratio: 16 / 9;
}

.card--horizontal .card__title { font-size: var(--bsn-text-base); }

.card--text .card__title { font-size: var(--bsn-text-lg); }

.card--opinion {
	flex-direction: row;
	gap: var(--bsn-space-sm);
	align-items: flex-start;
}

.card--opinion .card__media {
	flex: 0 0 4rem;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}

.card--opinion .card__title { font-size: var(--bsn-text-md); }

/* Latest: a numbered or timestamped one-line list row. */
.card--latest {
	flex-direction: row;
	gap: var(--bsn-space-md);
	align-items: baseline;
	padding-block: 0.75rem;
	border-bottom: var(--bsn-hairline);
}

.card--latest .card__title {
	font-size: var(--bsn-text-base);
	font-weight: var(--bsn-weight-semibold);
}

.card--latest .byline { margin-inline-start: auto; flex: 0 0 auto; }

/* A card with no featured image closes the gap rather than showing a
 * placeholder. The site logo is never substituted — it would claim every
 * unillustrated story is about the publication. */
.card--no-image .card__media { display: none; }

.card--sponsored {
	background: var(--bsn-sponsored-bg);
	border: 1px solid var(--bsn-sponsored-rule);
	padding: var(--bsn-space-sm);
}

/* =========================================================================
   BYLINE
   ====================================================================== */
.byline {
	display: flex;
	align-items: center;
	gap: var(--bsn-space-2xs);
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-xs);
	color: var(--bsn-ink-muted);
	min-width: 0;
}

.byline__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.5rem;
	min-width: 0;
}

.byline__avatar { flex: 0 0 auto; }

.byline__avatar-img {
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.byline__name {
	font-weight: var(--bsn-weight-semibold);
	color: var(--bsn-ink);
	text-decoration: none;
}

.byline__name:hover { color: var(--bsn-brass); }

.byline__role {
	font-size: var(--bsn-text-2xs);
	letter-spacing: var(--bsn-tracking-wide);
	text-transform: uppercase;
	color: var(--bsn-brass-text);
}

/*
 * The "·" between byline items. Decorative typographic punctuation, carrying no
 * information and hidden from assistive technology, so WCAG 1.4.3's exemption
 * for pure decoration applies. Darkened from the rule colour regardless, so it
 * is not visually anaemic.
 */
/*
 * Breathing room on both sides. Without it the markup renders "·Updated", since
 * the separator sits inline with no whitespace between the elements.
 */
.byline__sep {
	color: var(--bsn-ink-faint);
	margin-inline: 0.3em;
}

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

/* =========================================================================
   NEWSLETTER
   ====================================================================== */
.newsletter--band {
	background: var(--bsn-ink);
	color: var(--bsn-on-dark);
	padding-block: var(--bsn-space-xl);
	text-align: center;
}

.newsletter--band .newsletter__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.newsletter__star {
	color: var(--bsn-brass);
	font-size: 1.125rem;
	letter-spacing: 0.4em;
	margin: 0;
}

.newsletter--band .newsletter__heading {
	font-size: var(--bsn-text-3xl);
	font-weight: var(--bsn-weight-bold);
	letter-spacing: var(--bsn-tracking-tight);
	margin: 0;
	/*
	 * Explicit, and not optional. Without it theme.json's heading colour applies
	 * — near-black on the near-black newsletter band, measured at 1:1. Invisible.
	 * Every heading on a dark ground needs its colour stated here.
	 */
	color: var(--bsn-on-dark);
}

/* Brass on dark: the lighter tone, which measures 8.16:1 against the ink ground. */
.band--dark .eyebrow,
.band--dark .eyebrow__star,
.band--dark .section-head__star,
.band--dark .section-head__more,
.band--dark .byline__role,
.band--dark .card__rank,
.investigations .eyebrow__star,
.newsletter--band .newsletter__star {
	color: var(--bsn-brass-light);
}

.newsletter--band .newsletter__body {
	max-inline-size: 30rem;
	font-size: var(--bsn-text-md);
	line-height: var(--bsn-leading-normal);
	color: var(--bsn-on-dark-muted);
	margin: 0;
}

.newsletter__form {
	display: flex;
	inline-size: 100%;
	max-inline-size: 28.75rem;
	margin-top: 0.5rem;
}

.newsletter__field {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding: 0.875rem 1rem;
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-sm);
	border: 1px solid var(--bsn-rule-dark);
	background: var(--bsn-on-dark);
	color: var(--bsn-ink);
}

.newsletter__submit {
	padding: 0.875rem 1.625rem;
	background: var(--bsn-brass);
	color: var(--bsn-ink);
	border: 1px solid var(--bsn-brass);
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-xs);
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

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

.newsletter__note,
.newsletter__pending {
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	color: var(--bsn-ink-faint);
	margin: 0;
}

.newsletter__pending {
	border: 1px dashed var(--bsn-rule-dark);
	padding: var(--bsn-space-2xs) var(--bsn-space-xs);
	max-inline-size: 34rem;
}

/* Compact: the footer column variant. */
.newsletter--compact { background: none; padding: 0; text-align: start; }

.newsletter--compact .newsletter__heading {
	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-light);
	margin: 0 0 0.75rem;
}

.newsletter--compact .newsletter__body {
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-xs);
	line-height: 1.55;
	color: var(--bsn-ink-faint);
	margin: 0 0 0.875rem;
}

.newsletter--compact .newsletter__form { max-inline-size: none; margin: 0; }

.newsletter--compact .newsletter__field {
	padding: 0.625rem 0.75rem;
	font-size: var(--bsn-text-xs);
	background: var(--bsn-dark-raised);
	color: var(--bsn-on-dark);
}

.newsletter--compact .newsletter__submit {
	padding: 0.625rem 1rem;
	font-size: 0.65625rem;
	letter-spacing: 0.12em;
}

/* =========================================================================
   ADVERTISEMENT SLOTS
   Space is reserved in CSS before any script runs — an ad that fills after
   load and pushes the article down is the largest CLS source on a news page.
   ====================================================================== */
.ad-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	margin-block: var(--bsn-space-lg);
}

.ad-slot__label {
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-semibold);
	letter-spacing: var(--bsn-section-label-tracking);
	text-transform: uppercase;
	color: var(--bsn-ink-fainter);
	margin: 0;
}

.ad-slot__frame {
	display: grid;
	place-items: center;
	inline-size: 100%;
	background: var(--bsn-band-soft);
	border: 1px dashed var(--bsn-rule-soft);
	overflow: hidden;
}

.ad-slot__placeholder {
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-xs);
	color: var(--bsn-ink-fainter);
	text-align: center;
	padding: var(--bsn-space-2xs);
}

.ad-slot--leaderboard .ad-slot__frame { min-block-size: var(--bsn-ad-leaderboard-h); }

@media (min-width: 60rem) {
	.ad-slot--leaderboard .ad-slot__frame { min-block-size: var(--bsn-ad-leaderboard-h-lg); }
}

.ad-slot--mrec .ad-slot__frame {
	min-block-size: var(--bsn-ad-mrec-h);
	max-inline-size: 300px;
}

.ad-slot--in-article .ad-slot__frame { min-block-size: var(--bsn-ad-in-article-h); }

/*
 * A SLOT WITH A REAL ADVERTISEMENT IN IT.
 *
 * The dashed border and tinted panel above exist to make an EMPTY reserved
 * space legible to an editor. Around a paid advertisement they would be chrome
 * the newsroom never sold, and they would frame the advertiser's creative as if
 * it were part of the page furniture.
 *
 * `overflow: visible` is the load-bearing line, not the cosmetics.
 * .ad-slot__frame clips its overflow so a placeholder cannot escape its
 * reserved box. A responsive AdSense unit decides its own final height, so the
 * same clipping would crop a live advertisement — which is both a bad page and
 * a breach of the AdSense policy on obscuring ads. The reserved min-height is
 * kept: it is what the space is held open with before the ad arrives, and the
 * ad is free to grow past it.
 */
.ad-slot--live .ad-slot__frame {
	background: none;
	border: 0;
	overflow: visible;
	display: block;
}

/* A responsive unit measures itself against this box, so it must be full width. */
.ad-slot__unit {
	display: block;
	inline-size: 100%;
}

/*
 * The 300px cap on the sidebar frame is for the placeholder. A live unit keeps
 * the cap too — a 300×250 position that silently serves a 300×600 would push
 * the article's own sidebar furniture off the screen.
 */
.ad-slot--mrec.ad-slot--live .ad-slot__frame { max-inline-size: 300px; }

/* =========================================================================
   BREADCRUMBS
   Styles both the theme fallback and Rank Math's own wrapper, so the trail
   looks identical whichever is rendering it.
   ====================================================================== */
.breadcrumbs,
.rank-math-breadcrumb {
	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-faint);
	padding-block: var(--bsn-space-sm) 0;
}

.rank-math-breadcrumb p { margin: 0; }

.rank-math-breadcrumb .separator { color: var(--bsn-rule-strong); }

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bsn-space-3xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "/";
	margin-inline-end: var(--bsn-space-3xs);
	color: var(--bsn-rule-strong);
}

.breadcrumbs a,
.rank-math-breadcrumb a { text-decoration: none; }

.breadcrumbs a:hover,
.rank-math-breadcrumb a:hover { color: var(--bsn-brass); }

/* =========================================================================
   SOCIAL LINKS
   ====================================================================== */
.social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bsn-space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--bsn-font-sans);
}

.social--text {
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.social__link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.social--icon .social__link {
	inline-size: 2.75rem;
	block-size: 2.75rem;
	justify-content: center;
}

/* =========================================================================
   SITE FOOTER
   ====================================================================== */
.site-footer {
	background: var(--bsn-ink);
	color: var(--bsn-on-dark-muted);
	border-top: var(--bsn-hairline-dark);
	padding-block: var(--bsn-space-xl) var(--bsn-space-lg);
	margin-top: var(--bsn-space-2xl);
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-sm);
}

.site-footer a {
	color: var(--bsn-on-dark-muted);
	text-decoration: none;
}

.site-footer a:hover { color: var(--bsn-brass-light); }

.site-footer__grid {
	display: grid;
	gap: var(--bsn-space-lg) var(--bsn-space-md);
	padding-bottom: var(--bsn-space-lg);
	border-bottom: var(--bsn-hairline-dark);
}

@media (min-width: 40rem) {
	.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
	/*
	 * The design's five columns: identity, sections, company, legal, signup.
	 *
	 * Declared per column count rather than as one fixed five-track template.
	 * Optional menus are optional: with no Legal menu the old template left the
	 * newsletter in a 1fr track and an empty 1.4fr track after it, collapsing the
	 * sign-up field. The identity column keeps its 2fr and the sign-up its 1.4fr
	 * at every count, so the proportions the design specifies survive a column
	 * being absent.
	 */
	.site-footer__grid--5 {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
	}

	.site-footer__grid--4 {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
	}

	.site-footer__grid--3 {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr);
	}

	.site-footer__grid--2 {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
	}

	/* Anything unexpected still lays out rather than collapsing. */
	.site-footer__grid--1 { grid-template-columns: minmax(0, 1fr); }
}

.site-footer .wordmark {
	font-size: 1.625rem;
	text-align: start;
	line-height: 1.15;
}

.site-footer .wordmark__link { color: var(--bsn-on-dark); }

.site-footer .wordmark__star { font-size: 0.73em; }

.site-footer__since {
	font-family: var(--bsn-font-serif);
	font-size: var(--bsn-text-base);
	font-style: italic;
	line-height: 1.5;
	margin: 0.875rem 0 0;
}

.site-footer__blurb {
	font-size: 0.71875rem;
	line-height: 1.6;
	color: var(--bsn-ink-faint);
	margin: 0.625rem 0 0;
}

.site-footer__address {
	font-size: 0.71875rem;
	line-height: 1.6;
	color: var(--bsn-ink-faint);
	font-style: normal;
	margin: 0.625rem 0 0;
}

.site-footer__social { margin-top: 1.125rem; }

.site-footer__heading {
	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-light);
	margin: 0 0 0.625rem;
}

.site-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.78125rem;
	line-height: 2.1;
}

.site-footer__menu .menu-item__link { display: block; }

.site-footer__empty {
	font-size: var(--bsn-text-2xs);
	color: var(--bsn-ink-faint);
	margin: 0;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bsn-space-2xs) var(--bsn-space-md);
	align-items: baseline;
	justify-content: space-between;
	padding-top: var(--bsn-space-md);
	font-size: 0.65625rem;
	color: var(--bsn-ink-faint);
}

.site-footer__legal p { margin: 0; }

.site-footer__star {
	letter-spacing: 0.3em;
	color: var(--bsn-brass);
}

/* =========================================================================
   COMMENTS
   Minimal, because the approved design has no comment thread. Present so
   that enabling discussion does not produce an unstyled, overflowing form.
   ====================================================================== */
.comments {
	padding-block: var(--bsn-space-lg);
	border-top: var(--bsn-hairline);
	margin-top: var(--bsn-space-lg);
}

.comments__title {
	font-size: var(--bsn-text-lg);
	margin: 0 0 var(--bsn-space-md);
}

.comments__list {
	list-style: none;
	margin: 0 0 var(--bsn-space-lg);
	padding: 0;
}

.comments__list .comment-body {
	padding-block: var(--bsn-space-sm);
	border-bottom: var(--bsn-hairline);
}

.comment-respond label {
	display: block;
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-xs);
	letter-spacing: var(--bsn-tracking-wide);
	text-transform: uppercase;
	color: var(--bsn-ink-muted);
	margin-bottom: var(--bsn-space-3xs);
}

.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
	inline-size: 100%;
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-sm);
	padding: 0.5rem 0.75rem;
	background: var(--bsn-surface);
	border: 1px solid var(--bsn-rule-strong);
	color: var(--bsn-ink);
	margin-bottom: var(--bsn-space-sm);
}

.comment-respond .submit {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	padding: 0.625rem var(--bsn-space-md);
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-xs);
	font-weight: var(--bsn-weight-bold);
	letter-spacing: var(--bsn-tracking-wide);
	text-transform: uppercase;
	background: var(--bsn-ink);
	color: var(--bsn-on-dark);
	border: 1px solid var(--bsn-ink);
}

.comment-respond .submit:hover {
	background: var(--bsn-brass);
	border-color: var(--bsn-brass);
	color: var(--bsn-ink);
}

/* =========================================================================
   ARCHIVE HEADER, EMPTY STATES, PAGINATION
   ====================================================================== */
.archive-header {
	padding-block: var(--bsn-space-md);
	border-bottom: 3px solid var(--bsn-ink);
	margin-bottom: var(--bsn-space-lg);
}

.archive-header__title {
	font-size: var(--bsn-text-2xl);
	margin: 0;
}

.archive-header__description {
	max-inline-size: 60ch;
	margin-top: var(--bsn-space-2xs);
	color: var(--bsn-ink-muted);
}

.archive-header__count {
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-xs);
	letter-spacing: var(--bsn-tracking-wide);
	text-transform: uppercase;
	color: var(--bsn-ink-faint);
	margin: var(--bsn-space-3xs) 0 0;
}

.no-results {
	padding-block: var(--bsn-space-lg);
	max-inline-size: 60ch;
}

.empty-state {
	border: 1px dashed var(--bsn-rule-strong);
	background: var(--bsn-band);
	padding: var(--bsn-space-md);
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-sm);
	color: var(--bsn-ink-muted);
}

.empty-state__title {
	font-weight: var(--bsn-weight-bold);
	color: var(--bsn-ink);
	margin-bottom: var(--bsn-space-3xs);
}

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

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bsn-space-3xs);
	align-items: center;
	justify-content: center;
}

.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-inline-size: 2.5rem;
	min-block-size: 2.5rem;
	padding-inline: var(--bsn-space-2xs);
	border: var(--bsn-hairline);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.pagination .page-numbers:hover {
	border-color: var(--bsn-brass);
	color: var(--bsn-brass);
}

.pagination .page-numbers.current {
	background: var(--bsn-ink);
	border-color: var(--bsn-ink);
	color: var(--bsn-on-dark);
}

.pagination .dots { border: 0; }

/* =========================================================================
   ARTICLE (foundation; the full treatment is Phase 5)
   ====================================================================== */
.entry-header { padding-block: var(--bsn-space-md) var(--bsn-space-2xs); text-align: center; }

.entry-header .eyebrow,
.entry-header .label { justify-content: center; margin-bottom: var(--bsn-space-2xs); }

.entry-title {
	font-size: var(--bsn-text-3xl);
	margin: 0 0 var(--bsn-space-2xs);
}

.entry-dek {
	font-size: var(--bsn-text-lg);
	line-height: var(--bsn-leading-normal);
	color: var(--bsn-ink-muted);
	margin: 0 0 var(--bsn-space-sm);
}

.entry-meta { display: flex; flex-direction: column; align-items: center; gap: var(--bsn-space-3xs); }

.entry-meta .byline { justify-content: center; }

.entry-figure { margin: var(--bsn-space-md) auto 0; }

.entry-figure__caption {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--bsn-space-2xs);
	margin-top: 0.625rem;
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	color: var(--bsn-ink-fainter);
}

.entry-content {
	font-size: var(--bsn-text-body);
	line-height: var(--bsn-leading-body);
	padding-block: var(--bsn-space-md);
}

.entry-content > * + * { margin-top: var(--bsn-space-sm); }

.entry-content h2 { font-size: var(--bsn-text-xl); margin-top: var(--bsn-space-lg); }
.entry-content h3 { font-size: var(--bsn-text-lg); margin-top: var(--bsn-space-md); }

.entry-content figure { margin-block: var(--bsn-space-md); }

.entry-content figcaption {
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	color: var(--bsn-ink-fainter);
	margin-top: 0.5rem;
}

/* Wide content scrolls inside itself; the page body never scrolls sideways. */
.entry-content table { display: block; overflow-x: auto; }

.entry-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bsn-space-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-xs);
}

.entry-tags__list a {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	border: var(--bsn-hairline);
	text-decoration: none;
}

.entry-tags__list a:hover { border-color: var(--bsn-brass); color: var(--bsn-brass); }

/* =============================================================================
   UTILITIES
   ========================================================================== */
.is-hidden { display: none !important; }
.text-center { text-align: center; }
.text-muted { color: var(--bsn-ink-muted); }
.font-sans { font-family: var(--bsn-font-sans); }
.tabular { font-variant-numeric: tabular-nums; }

/* Wide content must scroll inside itself, never scroll the page sideways. */
.overflow-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}