/**
 * SNYCF — Components
 *
 * Every value traces back to a measurement in the Phase 0 audit of
 * /design-reference/. Mobile-first throughout; the two breakpoints used are
 * 48rem (768px) and 64rem (1024px), matching the chrome.
 *
 * @package snycf
 */

/* =====================================================================
 * Media slot
 * ================================================================== */

.snycf-media {
	position: relative;
	aspect-ratio: var( --snycf-ratio, 16 / 9 );
	overflow: hidden;
	background-color: var( --snycf-stock );
}

.snycf-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/**
 * No-image state.
 *
 * The export contains no photography and none has been supplied. Rather
 * than inventing an image, a story without one gets this deliberate
 * editorial placeholder — it holds the exact aspect ratio, so nothing
 * shifts when real photography lands.
 */
.snycf-no-image {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var( --snycf-space-2xs );
	aspect-ratio: var( --snycf-ratio, 16 / 9 );
	background-color: var( --snycf-stock );
	border: var( --snycf-border-width-hair ) solid var( --snycf-rule );
	padding: var( --snycf-space-sm );
	text-align: center;
}

.is-inverse .snycf-no-image {
	background-color: var( --snycf-bar );
	border-color: var( --snycf-ink-2 );
}

/*
 * Watermark, not a warning. Drawn monochrome and low-contrast so an
 * awaiting-photography slot reads as intentional restraint rather than an
 * error state.
 */
.snycf-no-image__mark {
	display: block;
	color: var( --snycf-rule-soft );
	opacity: 0.85;
}

/*
 * Scale with the slot. A fixed 40px mark disappears inside a 400px hero
 * placeholder and overwhelms a 72px avatar; sizing from the container keeps
 * the watermark proportionate at both ends.
 */
.snycf-no-image__mark svg {
	width: clamp( 1.75rem, 14cqi, 4rem );
	height: auto;
}

.snycf-no-image {
	container-type: inline-size;
}

.is-inverse .snycf-no-image__mark {
	color: var( --snycf-ink-2 );
}

.snycf-no-image__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 3.5rem;
	min-height: 3.5rem;
	padding: var( --snycf-space-2xs );
	background-color: var( --snycf-ink );
	color: var( --snycf-paper );
	font-weight: var( --snycf-weight-black );
	font-size: 1.125rem;
	letter-spacing: 0.05em;
}

.snycf-no-image__note {
	font-size: 0.625rem;
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: var( --snycf-tracking-label );
	text-transform: uppercase;
	color: var( --snycf-text-meta );
	max-width: 22ch;
	line-height: 1.4;
}

/* =====================================================================
 * Label / kicker
 * ================================================================== */

.snycf-label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --snycf-space-2xs );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: var( --snycf-tracking-kicker );
	text-transform: uppercase;
	line-height: 1.4;
}

.snycf-label--small {
	font-size: 0.65625rem;
	letter-spacing: 0.18em;
}

.snycf-label__primary {
	color: var( --snycf-accent );
}

.is-inverse .snycf-label__primary {
	color: var( --snycf-accent-on-ink );
}

.snycf-label__term {
	color: var( --snycf-text-meta );
}

.snycf-label__sep {
	color: var( --snycf-rule-soft );
}

.is-inverse .snycf-label__sep {
	color: var( --snycf-ink-2 );
}

.snycf-label--muted .snycf-label__primary {
	color: var( --snycf-text-meta );
}

/* =====================================================================
 * Section heading
 * ================================================================== */

.snycf-section-heading-block {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --snycf-space-xs ) var( --snycf-space-sm );
	border-top: var( --snycf-border-width-rule ) solid var( --snycf-border-strong );
	padding-top: var( --snycf-rule-gap );
	margin-bottom: var( --snycf-space-md );
}

.snycf-section-heading-block--accent {
	border-top-color: var( --snycf-accent );
}

/*
 * Shrinkable, not fixed. These headings are tracked uppercase, so a long
 * one — "Most discussed victim stories" — is far wider than its letters
 * suggest; flex: none held it at max-content and pushed it past a 375px
 * viewport instead of letting it wrap.
 */
.snycf-section-heading-block .snycf-section-heading {
	border-top: 0;
	padding-top: 0;
	flex: 0 1 auto;
	min-width: 0;
}

.snycf-section-heading-block__lede {
	flex: 1 1 16rem;
	margin: 0;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.84375rem;
	font-weight: var( --snycf-weight-medium );
	color: var( --snycf-text-meta );
	letter-spacing: 0;
	text-transform: none;
}

.snycf-section-heading-block__action {
	margin-inline-start: auto;
	flex: none;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-meta );
	font-weight: var( --snycf-weight-bold );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --snycf-text-meta );
	min-height: var( --snycf-target-min );
	display: inline-flex;
	align-items: center;
	gap: var( --snycf-space-3xs );
}

.snycf-section-heading-block__action:hover {
	color: var( --snycf-accent );
}

/* =====================================================================
 * Buttons
 * ================================================================== */

.snycf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --snycf-space-2xs );
	min-height: var( --snycf-target-min );
	padding: var( --snycf-space-xs ) var( --snycf-space-md );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.75rem;
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
	text-align: center;
	border: var( --snycf-border-width-button ) solid transparent;
	background: none;
	cursor: pointer;
	transition: background-color var( --snycf-transition-fast ),
		color var( --snycf-transition-fast ),
		border-color var( --snycf-transition-fast );
}

.snycf-button--small {
	font-size: 0.6875rem;
	padding: var( --snycf-space-2xs ) var( --snycf-space-sm );
	letter-spacing: 0.1em;
}

.snycf-button__arrow {
	flex: none;
}

/* Outline — the default editorial button. */
.snycf-button--outline {
	border-color: var( --snycf-border-strong );
	color: var( --snycf-text );
}

.snycf-button--outline:hover {
	background-color: var( --snycf-ink );
	border-color: var( --snycf-ink );
	color: var( --snycf-paper );
}

/* Solid ink. */
.snycf-button--solid {
	background-color: var( --snycf-ink );
	border-color: var( --snycf-ink );
	color: var( --snycf-paper );
}

.snycf-button--solid:hover {
	background-color: var( --snycf-accent );
	border-color: var( --snycf-accent );
	color: var( --snycf-paper );
}

/* Accent. */
.snycf-button--accent {
	background-color: var( --snycf-accent );
	border-color: var( --snycf-accent );
	color: var( --snycf-paper );
}

.snycf-button--accent:hover {
	background-color: var( --snycf-accent-deep );
	border-color: var( --snycf-accent-deep );
	color: var( --snycf-paper );
}

/* Inverse outline — used on dark bands. */
.snycf-button--inverse {
	border-width: var( --snycf-border-width-hair );
	border-color: var( --snycf-paper );
	color: var( --snycf-paper );
}

.snycf-button--inverse:hover {
	background-color: var( --snycf-paper );
	color: var( --snycf-ink );
}

/* Plain accent text link. */
.snycf-button--text {
	padding-inline: 0;
	border: 0;
	color: var( --snycf-accent );
	justify-content: flex-start;
}

.snycf-button--text:hover {
	color: var( --snycf-ink );
}

.is-inverse .snycf-button--text {
	color: var( --snycf-accent-on-ink );
}

.is-inverse .snycf-button--text:hover {
	color: var( --snycf-paper );
}

/* =====================================================================
 * Metadata
 * ================================================================== */

.snycf-metadata__byline {
	color: var( --snycf-text );
	font-weight: var( --snycf-weight-extrabold );
	text-transform: uppercase;
}

.is-inverse .snycf-metadata__byline {
	color: var( --snycf-paper );
}

.snycf-metadata__updated {
	font-style: italic;
}

/*
 * A standalone control, not a link inside a sentence, so it needs a real
 * target height — 17px with a 7px gap failed WCAG 2.5.8.
 */
.snycf-metadata__comments {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding-block: 3px;

	color: var( --snycf-accent );
	font-weight: var( --snycf-weight-extrabold );
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: var( --snycf-space-3xs );
}

.snycf-metadata__comments:hover {
	color: var( --snycf-text );
}

.is-inverse .snycf-metadata__comments {
	color: var( --snycf-accent-on-ink );
}

.is-inverse .snycf-metadata__comments:hover {
	color: var( --snycf-paper );
}

/* =====================================================================
 * Figure caption
 * ================================================================== */

.snycf-figcaption {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var( --snycf-space-sm );
	border-bottom: var( --snycf-divider );
	padding: var( --snycf-space-2xs ) 2px var( --snycf-space-xs );
	font-size: var( --snycf-size-meta );
	color: var( --snycf-text-meta );
}

.snycf-figcaption__text {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-style: italic;
}

.snycf-figcaption__credit {
	flex: none;
	font-weight: var( --snycf-weight-semibold );
	letter-spacing: var( --snycf-tracking-meta );
	text-transform: uppercase;
}

/* =====================================================================
 * Story card
 * ================================================================== */

.snycf-card {
	display: flex;
	flex-direction: column;
	gap: var( --snycf-space-xs );
	min-width: 0;
}

.snycf-card__media {
	display: block;
}

.snycf-card__body {
	display: flex;
	flex-direction: column;
	gap: var( --snycf-space-2xs );
	min-width: 0;
}

.snycf-card__title {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: var( --snycf-size-h4 );
	line-height: var( --snycf-leading-snug );
	margin: 0;
	text-wrap: pretty;

	/* Long headlines must break rather than push the grid wider. */
	overflow-wrap: break-word;
}

.snycf-card--lead .snycf-card__title {
	font-size: var( --snycf-size-h3 );
	line-height: 1.15;
}

.snycf-card--compact .snycf-card__title,
.snycf-card--minimal .snycf-card__title {
	font-size: 1.0625rem;
}

.snycf-card--minimal {
	border-top: var( --snycf-divider );
	padding-top: var( --snycf-space-sm );
}

.snycf-card__deck {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: 0.90625rem;
	line-height: var( --snycf-leading-deck );
	color: var( --snycf-text-prose );
	margin: 0;
	text-wrap: pretty;
}

.snycf-card--lead .snycf-card__deck {
	font-size: var( --snycf-size-prose-sm );
}

/* =====================================================================
 * Story row
 *
 * Stacks below 30rem so the headline never gets squeezed into a sliver
 * beside a fixed-width thumbnail — which is what the export would have
 * done at 375px.
 * ================================================================== */

.snycf-row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --snycf-space-xs );
	padding-block: var( --snycf-space-md );
	border-bottom: var( --snycf-divider );
	min-width: 0;
}

.snycf-row__media {
	display: block;
	min-width: 0;
}

.snycf-row__body {
	display: flex;
	flex-direction: column;
	gap: var( --snycf-space-2xs );
	min-width: 0;
}

.snycf-row__title {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: 1.125rem;
	line-height: var( --snycf-leading-snug );
	margin: 0;
	text-wrap: pretty;
	overflow-wrap: break-word;
}

.snycf-row__deck {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: 0.90625rem;
	line-height: var( --snycf-leading-deck );
	color: var( --snycf-text-prose );
	margin: 0;
	text-wrap: pretty;
}

@media ( min-width: 30rem ) {

	.snycf-row {
		grid-template-columns: var( --snycf-row-thumb, 10rem ) minmax( 0, 1fr );
		gap: var( --snycf-space-md );
		align-items: start;
	}

	.snycf-row--compact { --snycf-row-thumb: 7.5rem; }
	.snycf-row--wide { --snycf-row-thumb: 13.75rem; }
	.snycf-row--no-media { grid-template-columns: minmax( 0, 1fr ); }
}

@media ( min-width: 48rem ) {

	.snycf-row__title {
		font-size: 1.375rem;
	}
}

/* =====================================================================
 * Featured story
 * ================================================================== */

.snycf-featured {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --snycf-gap-column );
	align-items: center;
	min-width: 0;
}

.snycf-featured__media {
	min-width: 0;
}

.snycf-featured__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --snycf-space-xs );
	min-width: 0;
}

.snycf-featured__title {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: var( --snycf-size-h2 );
	line-height: 1.1;
	letter-spacing: var( --snycf-tracking-headline );
	margin: 0;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.snycf-featured__deck {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: var( --snycf-size-prose-sm );
	line-height: var( --snycf-leading-deck );
	color: var( --snycf-text-prose );
	margin: 0;
	text-wrap: pretty;
}

.snycf-featured__cta {
	margin-top: var( --snycf-space-2xs );
}

.snycf-featured--stock {
	padding: var( --snycf-space-md );
	border: var( --snycf-border-width-hair ) solid var( --snycf-rule );
}

@media ( min-width: 48rem ) {

	.snycf-featured--stock {
		padding: var( --snycf-space-xl );
	}
}

@media ( min-width: 64rem ) {

	.snycf-featured--media-right,
	.snycf-featured--media-left {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
		align-items: center;
	}

	.snycf-featured--media-left .snycf-featured__media { order: -1; }
	.snycf-featured--media-right .snycf-featured__media { order: 1; }
	.snycf-featured--no-media { grid-template-columns: minmax( 0, 1fr ); }
}

/* =====================================================================
 * Most discussed
 * ================================================================== */

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

.snycf-discussed__item {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --snycf-space-2xs ) var( --snycf-space-sm );
	padding-block: var( --snycf-space-sm );
	border-bottom: var( --snycf-divider );
	align-items: start;
}

.snycf-discussed--numbered .snycf-discussed__item {
	grid-template-columns: 2.75rem minmax( 0, 1fr );
}

.snycf-discussed__rank {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: 1.875rem;
	line-height: 1;
	color: var( --snycf-text );
	font-variant-numeric: tabular-nums;
}

.snycf-discussed__body {
	display: flex;
	flex-direction: column;
	gap: var( --snycf-space-3xs );
	min-width: 0;
}

.snycf-discussed__title {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: 1.0625rem;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.snycf-discussed__meta {
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-bold );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --snycf-text-meta );
}

.snycf-discussed__count {
	color: var( --snycf-accent );
	font-weight: var( --snycf-weight-black );
	display: inline-flex;
	align-items: center;
	gap: var( --snycf-space-3xs );
}

.is-inverse .snycf-discussed__count {
	color: var( --snycf-accent-on-ink );
}

/* =====================================================================
 * Borough navigation
 * ================================================================== */

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

/* List — name and count on a divider row. */
.snycf-boroughs--list .snycf-boroughs__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --snycf-space-sm );
	min-height: var( --snycf-target-min );
	padding-block: var( --snycf-space-xs );
	border-bottom: var( --snycf-divider );
}

.snycf-boroughs--list .snycf-boroughs__name {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: 1.0625rem;
}

.snycf-boroughs--list .snycf-boroughs__count {
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-bold );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --snycf-text-meta );
	display: inline-flex;
	align-items: center;
	gap: var( --snycf-space-3xs );
	flex: none;
}

/*
 * Grid — the homepage tile treatment.
 *
 * Explicit column counts rather than auto-fit. The approved design is five
 * across; auto-fit sizes tracks from a minimum, so on a wide container it
 * produced eight tracks for five boroughs and left the row visibly short.
 * Stepping 2 -> 3 -> 5 keeps every row full at every width.
 */
.snycf-boroughs--grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1px;
	background-color: var( --snycf-rule );
	border: var( --snycf-border-width-hair ) solid var( --snycf-rule );
}

@media ( min-width: 40rem ) {

	.snycf-boroughs--grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 64rem ) {

	.snycf-boroughs--grid {
		grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	}
}

.snycf-boroughs--grid .snycf-boroughs__item {
	background-color: var( --snycf-surface );
}

.snycf-boroughs--grid .snycf-boroughs__link {
	display: flex;
	flex-direction: column;
	gap: var( --snycf-space-2xs );
	height: 100%;
	padding: var( --snycf-space-sm );
}

.snycf-boroughs--grid .snycf-boroughs__link:hover {
	background-color: var( --snycf-hover-tint );
	color: var( --snycf-text );
}

.snycf-boroughs--grid .snycf-boroughs__media {
	display: block;
	margin-bottom: var( --snycf-space-3xs );
}

.snycf-boroughs--grid .snycf-boroughs__name {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: 1.1875rem;
	line-height: 1.2;
}

.snycf-boroughs__count--above {
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --snycf-accent );
}

.snycf-boroughs__latest {
	font-size: 0.78125rem;
	line-height: 1.45;
	color: var( --snycf-text-meta );
	text-wrap: pretty;
}

/* Inline — a compact wrapping row. */
.snycf-boroughs--inline {
	display: flex;
	flex-wrap: wrap;
	gap: var( --snycf-space-2xs ) var( --snycf-space-sm );
}

.snycf-boroughs--inline .snycf-boroughs__link {
	display: inline-flex;
	align-items: center;
	gap: var( --snycf-space-3xs );
	min-height: var( --snycf-target-min );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.snycf-boroughs__item.is-current .snycf-boroughs__name {
	color: var( --snycf-accent );
}

/* =====================================================================
 * Issue pills
 *
 * Built for the client's longest approved topic — 60 characters. The pill
 * wraps internally, caps against the container, and keeps full-size type:
 * no ellipsis, no shrinking.
 * ================================================================== */

.snycf-issues {
	display: flex;
	flex-wrap: wrap;
	gap: var( --snycf-space-2xs );
	list-style: none;
	margin: 0;
	padding: 0;
}

.snycf-issues__pill {
	display: inline-flex;
	align-items: baseline;
	gap: var( --snycf-space-2xs );
	min-height: var( --snycf-target-min );
	padding: var( --snycf-space-2xs ) var( --snycf-space-xs );
	border: var( --snycf-border-width-hair ) solid var( --snycf-border-strong );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.75rem;
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;

	/* Long labels wrap inside the pill instead of overflowing the row. */
	max-width: 100%;
	overflow-wrap: break-word;
	hyphens: auto;
	text-align: start;
	align-content: center;
	flex-wrap: wrap;
}

.snycf-issues__pill:hover,
.snycf-issues__pill.is-current {
	background-color: var( --snycf-ink );
	border-color: var( --snycf-ink );
	color: var( --snycf-paper );
}

.snycf-issues__count {
	color: var( --snycf-accent );
	font-size: 0.6875rem;
	font-weight: var( --snycf-weight-bold );
	flex: none;
	font-variant-numeric: tabular-nums;
}

.snycf-issues__pill:hover .snycf-issues__count,
.snycf-issues__pill.is-current .snycf-issues__count {
	color: var( --snycf-accent-on-ink );
}

/* =====================================================================
 * Filters
 * ================================================================== */

.snycf-filters {
	border-top: var( --snycf-border-width-rule ) solid var( --snycf-border-strong );
	padding-top: var( --snycf-rule-gap );
}

.snycf-filters__disclosure {
	border-bottom: var( --snycf-divider );
	padding-bottom: var( --snycf-space-sm );
}

.snycf-filters__summary {
	display: flex;
	align-items: center;
	gap: var( --snycf-space-2xs );
	min-height: var( --snycf-target-min );
	cursor: pointer;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-label );
	font-weight: var( --snycf-weight-black );
	letter-spacing: var( --snycf-tracking-label );
	text-transform: uppercase;
	list-style: none;
}

.snycf-filters__summary::-webkit-details-marker {
	display: none;
}

.snycf-filters__summary::after {
	content: '+';
	margin-inline-start: auto;
	font-size: 1.25rem;
	font-weight: var( --snycf-weight-medium );
	line-height: 1;
}

.snycf-filters__disclosure[ open ] .snycf-filters__summary::after {
	content: '\2212'; /* minus */
}

.snycf-filters__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.375rem;
	height: 1.375rem;
	padding-inline: 0.375rem;
	background-color: var( --snycf-accent );
	color: var( --snycf-paper );
	font-size: 0.6875rem;
	font-weight: var( --snycf-weight-black );
	font-variant-numeric: tabular-nums;
}

.snycf-filters__body {
	display: flex;
	flex-direction: column;
	gap: var( --snycf-space-xs );
	padding-top: var( --snycf-space-sm );
}

.snycf-filters__facet {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --snycf-space-2xs );
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.snycf-filters__legend {
	padding: 0;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --snycf-text-meta );
}

.snycf-filters__options {
	display: flex;
	flex-wrap: wrap;
	gap: var( --snycf-space-2xs );
	min-width: 0;
}

.snycf-filters__pill {
	display: inline-flex;
	align-items: center;
	min-height: var( --snycf-target-min );
	padding: var( --snycf-space-2xs ) var( --snycf-space-xs );
	border: var( --snycf-border-width-hair ) solid var( --snycf-border-soft );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.6875rem;
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --snycf-ink-2 );
	cursor: pointer;
	max-width: 100%;
	overflow-wrap: break-word;
	transition: border-color var( --snycf-transition-fast ),
		background-color var( --snycf-transition-fast ),
		color var( --snycf-transition-fast );
}

.snycf-filters__pill:hover {
	border-color: var( --snycf-ink );
	color: var( --snycf-ink );
}

/* The radio is visually hidden; its checked state drives the pill. */
.snycf-filters__input:checked + .snycf-filters__pill {
	background-color: var( --snycf-ink );
	border-color: var( --snycf-ink );
	color: var( --snycf-paper );
}

/* Focus must follow the hidden input to its visible label. */
.snycf-filters__input:focus-visible + .snycf-filters__pill {
	outline: 2px solid var( --snycf-focus );
	outline-offset: 2px;
}

/* Sort reads as underlined text rather than a pill, matching the design. */
.snycf-filters__pill--sort {
	border-color: transparent;
	padding-inline: 0;
	margin-inline-end: var( --snycf-space-sm );
	color: var( --snycf-text-meta );
}

.snycf-filters__input:checked + .snycf-filters__pill--sort {
	background: none;
	border-color: transparent;
	border-bottom: 2px solid var( --snycf-accent );
	color: var( --snycf-text );
	font-weight: var( --snycf-weight-black );
}

.snycf-filters__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --snycf-space-sm );
	padding-top: var( --snycf-space-2xs );
}

.snycf-filters__clear {
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-bold );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --snycf-text-meta );
	min-height: var( --snycf-target-min );
	display: inline-flex;
	align-items: center;
}

/*
 * Desktop: the disclosure becomes an always-open horizontal bar, matching
 * the approved treatment. The summary is hidden but the <details> stays
 * open so the content is always present for assistive technology.
 */
@media ( min-width: 48rem ) {

	.snycf-filters__summary {
		display: none;
	}

	.snycf-filters__disclosure {
		border-bottom: 0;
	}

	/*
	 * Hiding the summary is not enough: a closed <details> also hides its own
	 * contents, so the whole filter bar was invisible on desktop unless a
	 * script opened it. Two mechanisms have to be overridden — older engines
	 * (and current Safari and Firefox) hide the children with display:none,
	 * which the explicit display below defeats; Chrome 131 and later hides
	 * the generated ::details-content box instead, which needs its own rule.
	 */
	.snycf-filters__disclosure > .snycf-filters__body {
		display: flex;
	}

	.snycf-filters__disclosure::details-content {
		content-visibility: visible;
		block-size: auto;
		opacity: 1;
	}

	.snycf-filters__body {
		padding-top: 0;
		gap: var( --snycf-space-xs );
	}

	.snycf-filters__facet {
		grid-template-columns: 7rem minmax( 0, 1fr );
		align-items: baseline;
		gap: var( --snycf-space-xs );
	}

	.snycf-filters__legend {
		grid-column: 1;
		padding-top: var( --snycf-space-3xs );
	}

	.snycf-filters__options {
		grid-column: 2;
	}

	.snycf-filters__actions {
		border-top: var( --snycf-divider );
		padding-top: var( --snycf-space-sm );
	}
}

/*
 * With JavaScript the form submits on change, so the Apply button is
 * redundant. Without JavaScript it is the only way to filter, so it stays.
 */
.js .snycf-filters__apply {
	display: none;
}

/* =====================================================================
 * Pagination
 * ================================================================== */

.snycf-pagination {
	padding-top: var( --snycf-space-xl );
}

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

.snycf-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --snycf-space-3xs );
	min-width: var( --snycf-target-min );
	min-height: var( --snycf-target-min );
	padding-inline: var( --snycf-space-2xs );
	border: var( --snycf-border-width-hair ) solid var( --snycf-border-soft );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.75rem;
	font-weight: var( --snycf-weight-extrabold );
	font-variant-numeric: tabular-nums;
}

.snycf-pagination .page-numbers:hover {
	border-color: var( --snycf-ink );
}

.snycf-pagination .page-numbers.current {
	background-color: var( --snycf-ink );
	border-color: var( --snycf-ink );
	color: var( --snycf-paper );
}

.snycf-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: auto;
	color: var( --snycf-text-meta );
}

.snycf-pagination .prev,
.snycf-pagination .next {
	padding-inline: var( --snycf-space-sm );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.6875rem;
}

/* =====================================================================
 * Court record card
 * ================================================================== */

.snycf-record-card {
	display: flex;
	flex-direction: column;
	gap: var( --snycf-space-2xs );
	padding: var( --snycf-space-md );
	border: var( --snycf-border-width-hair ) solid var( --snycf-border );
	min-width: 0;
}

.snycf-record-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var( --snycf-space-sm );
	margin-bottom: var( --snycf-space-2xs );
}

.snycf-record-card__icon {
	color: var( --snycf-text-meta );
	flex: none;
}

.snycf-record-card__title {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: 1.1875rem;
	line-height: 1.3;
	margin: 0;
	overflow-wrap: break-word;
}

.snycf-record-card__meta,
.snycf-record-card__description,
.snycf-record-card__related {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.7;
	color: var( --snycf-text-meta );
}

.snycf-record-card__description {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: 0.875rem;
	line-height: 1.55;
}

.snycf-record-card__related a {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The CTA sits at the bottom so cards in a grid align. */
.snycf-record-card__cta {
	margin-top: auto;
	align-self: stretch;
}

.snycf-record__rows {
	margin: var( --snycf-space-2xs ) 0 0;
}

.snycf-record__row {
	display: flex;
	justify-content: space-between;
	gap: var( --snycf-space-xs );
	padding-block: var( --snycf-space-3xs ) var( --snycf-space-3xs );
	border-bottom: var( --snycf-border-width-hair ) solid var( --snycf-border );
}

.snycf-record__row dt {
	flex: none;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.625rem;
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --snycf-text-meta );
}

.snycf-record__row dd {
	margin: 0;
	font-size: 0.75rem;
	text-align: end;
	color: var( --snycf-text-prose );
	min-width: 0;
	overflow-wrap: break-word;
}

/* Below 25rem the label/value pair stacks rather than crushing. */
@media ( max-width: 24.9375rem ) {

	.snycf-record__row {
		flex-direction: column;
		gap: 2px;
	}

	.snycf-record__row dd {
		text-align: start;
	}
}

/* =====================================================================
 * Court record row
 * ================================================================== */

.snycf-record-row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --snycf-space-sm );
	padding-block: var( --snycf-space-md );
	border-bottom: var( --snycf-divider );
	align-items: center;
}

.snycf-record-row__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --snycf-space-2xs );
	min-width: 0;
}

.snycf-record-row__title {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: 1.25rem;
	line-height: var( --snycf-leading-snug );
	margin: 0;
	overflow-wrap: break-word;
}

.snycf-record-row__meta {
	margin: 0;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.75rem;
	font-weight: var( --snycf-weight-semibold );
	letter-spacing: 0.06em;
	color: var( --snycf-text-meta );
}

.snycf-record-row__related {
	margin: 0;
	font-size: 0.75rem;
	color: var( --snycf-text-meta );
}

.snycf-record-row__related a {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.snycf-record-row__action {
	min-width: 0;
}

/*
 * Below 480px the shared metadata separators are dropped, which is right for
 * a two-item story line but would run a record's provenance together into
 * "NYC Department of Finance Index No. 500003/2022 Manhattan August 25, 2026
 * 5 pages". Court, case number, borough, date and page count each take their
 * own line instead — the stacked hierarchy the narrow layout wants anyway.
 */
@media ( max-width: 479px ) {

	.snycf-record-row__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: var( --snycf-space-3xs );
	}
}

@media ( min-width: 48rem ) {

	.snycf-record-row {
		grid-template-columns: minmax( 0, 1fr ) auto;
		gap: var( --snycf-space-md );
	}
}

/* =====================================================================
 * Documents & Sources
 * ================================================================== */

.snycf-documents__title {
	margin: var( --snycf-space-2xs ) 0 0;
	color: var( --snycf-text );
}

.snycf-documents__grid {
	margin-top: var( --snycf-space-xl );
}

.snycf-documents__note {
	margin-top: var( --snycf-space-md );
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-style: italic;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var( --snycf-text-meta );
	max-width: 60ch;
}

/* =====================================================================
 * Video card
 * ================================================================== */

.snycf-video-card {
	display: flex;
	flex-direction: column;
	gap: var( --snycf-space-xs );
	min-width: 0;
}

.snycf-video-card__media {
	display: block;
	position: relative;
}

.snycf-video-card__body {
	display: flex;
	flex-direction: column;
	gap: var( --snycf-space-2xs );
	min-width: 0;
}

.snycf-video-card__title {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: var( --snycf-size-h4 );
	line-height: var( --snycf-leading-snug );
	margin: 0;
	text-wrap: pretty;
	overflow-wrap: break-word;
}

.snycf-video-card--lead .snycf-video-card__title {
	font-size: var( --snycf-size-h3 );
}

.snycf-video-card__deck {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: 0.90625rem;
	line-height: var( --snycf-leading-deck );
	color: var( --snycf-text-prose );
	margin: 0;
}

/* Play affordance — decorative; the card link is the real control. */
.snycf-video-card__play {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var( --snycf-accent );
	color: var( --snycf-paper );
	pointer-events: none;
}

.snycf-video-card__play--corner {
	left: 0.625rem;
	bottom: 0.625rem;
	width: 2.125rem;
	height: 2.125rem;
}

.snycf-video-card__play--corner svg {
	width: 0.8125rem;
	height: 0.8125rem;
}

.snycf-video-card__play--center {
	inset: 0;
	margin: auto;
	width: 4rem;
	height: 4rem;
	background-color: var( --snycf-accent );
}

.snycf-video-card__play--center svg {
	width: 1.375rem;
	height: 1.375rem;
}

.snycf-video-card__duration {
	position: absolute;
	right: 0.625rem;
	bottom: 0.625rem;
	padding: 2px 0.375rem;
	background-color: var( --snycf-ink );
	color: var( --snycf-paper );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.65625rem;
	font-weight: var( --snycf-weight-extrabold );
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

@media ( min-width: 48rem ) {

	.snycf-video-card__play--center {
		width: 4.875rem;
		height: 4.875rem;
	}

	.snycf-video-card__play--center svg {
		width: 1.625rem;
		height: 1.625rem;
	}
}

/* =====================================================================
 * Newsletter
 * ================================================================== */

.snycf-newsletter {
	display: flex;
	flex-direction: column;
	gap: var( --snycf-space-md );
	padding: var( --snycf-space-md );
	border: var( --snycf-border-width-hair ) solid var( --snycf-border-strong );
}

.snycf-newsletter__intro {
	display: flex;
	flex-direction: column;
	gap: var( --snycf-space-2xs );
	min-width: 0;
}

.snycf-newsletter__title {
	margin: 0;
}

.snycf-newsletter__text {
	margin: 0;
	font-size: 0.90625rem;
	line-height: 1.5;
	color: var( --snycf-text-prose );
	text-wrap: pretty;
}

.snycf-newsletter__form {
	min-width: 0;
}

.snycf-newsletter__field {
	display: flex;
	flex-wrap: wrap;
	min-width: 0;
}

.snycf-newsletter__field input[ type='email' ] {
	flex: 1 1 14rem;
	min-width: 0;
	border-color: var( --snycf-ink );
}

.snycf-newsletter__submit {
	flex: none;
	min-height: var( --snycf-target-min );
	padding-inline: var( --snycf-space-md );
	background-color: var( --snycf-ink );
	color: var( --snycf-paper );
	border: var( --snycf-border-width-hair ) solid var( --snycf-ink );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.75rem;
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.snycf-newsletter__submit:hover {
	background-color: var( --snycf-accent );
	border-color: var( --snycf-accent );
}

/* Honeypot — off-screen, never shown, never focusable. */
.snycf-newsletter__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.snycf-newsletter__status:empty {
	display: none;
}

.snycf-newsletter__status {
	margin: var( --snycf-space-2xs ) 0 0;
	font-size: 0.8125rem;
	color: var( --snycf-text-prose );
}

.snycf-newsletter__pending {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --snycf-space-2xs );
}

.snycf-newsletter__pending-note {
	margin: 0;
	font-size: 0.8125rem;
	color: var( --snycf-text-meta );
}

@media ( min-width: 48rem ) {

	.snycf-newsletter {
		flex-direction: row;
		align-items: center;
		gap: var( --snycf-space-2xl );
		padding: var( --snycf-space-xl ) var( --snycf-space-2xl );
	}

	.snycf-newsletter__intro {
		flex: 1 1 16rem;
	}

	.snycf-newsletter__form,
	.snycf-newsletter__pending {
		flex: none;
	}
}

/* =====================================================================
 * Search form
 * ================================================================== */

.snycf-search {
	display: flex;
	flex-wrap: nowrap;
	min-width: 0;
}

.snycf-search input[ type='search' ] {
	flex: 1 1 auto;
	min-width: 0;
	border-color: var( --snycf-ink );
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: 1rem;
}

.snycf-search__submit {
	flex: none;
	min-height: var( --snycf-target-min );
	padding-inline: var( --snycf-space-md );
	background-color: var( --snycf-ink );
	border: var( --snycf-border-width-hair ) solid var( --snycf-ink );
	color: var( --snycf-paper );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.75rem;
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.snycf-search__submit:hover {
	background-color: var( --snycf-accent );
	border-color: var( --snycf-accent );
}

.snycf-search--large input[ type='search' ] {
	min-height: 3.25rem;
	font-size: 1.0625rem;
	border-width: var( --snycf-border-width-button );
}

.snycf-search--large .snycf-search__submit {
	min-height: 3.25rem;
	border-width: var( --snycf-border-width-button );
}

/* Panel search sits on ink, so it inverts. */
.snycf-nav-mobile__search input[ type='search' ] {
	border-color: var( --snycf-paper );
	border-width: var( --snycf-border-width-button );
	border-right: 0;
	min-height: 3rem;
}

.snycf-nav-mobile__search .snycf-search__submit {
	min-height: 3rem;
	background-color: var( --snycf-accent );
	border-color: var( --snycf-accent );
	border-width: var( --snycf-border-width-button );
}

.snycf-nav-mobile__search .snycf-search__submit:hover {
	background-color: var( --snycf-accent-deep );
	border-color: var( --snycf-accent-deep );
}

/* =====================================================================
 * Table of contents
 * ================================================================== */

.snycf-toc {
	border-top: var( --snycf-border-width-rule ) solid var( --snycf-accent );
	padding-top: var( --snycf-space-xs );
}

.snycf-toc__summary {
	display: flex;
	align-items: center;
	min-height: var( --snycf-target-min );
	cursor: pointer;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-black );
	letter-spacing: var( --snycf-tracking-label );
	text-transform: uppercase;
	list-style: none;
}

.snycf-toc__summary::-webkit-details-marker {
	display: none;
}

.snycf-toc__summary::after {
	content: '+';
	margin-inline-start: auto;
	font-size: 1.25rem;
	font-weight: var( --snycf-weight-medium );
}

.snycf-toc__disclosure[ open ] .snycf-toc__summary::after {
	content: '\2212';
}

.snycf-toc__list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: var( --snycf-space-2xs ) 0 0;
	padding: 0;
	counter-reset: snycf-toc;
}

.snycf-toc__list a {
	display: block;
	padding-block: var( --snycf-space-2xs );
	min-height: var( --snycf-target-min );
	border-bottom: var( --snycf-divider );
	font-size: 0.8125rem;
	font-weight: var( --snycf-weight-semibold );
	color: var( --snycf-ink-2 );
}

.snycf-toc__list a:hover {
	color: var( --snycf-accent );
}

@media ( min-width: 64rem ) {

	.snycf-toc {
		position: sticky;
		top: 5.5rem;
	}

	/* On desktop the list is always shown; the toggle is pointless there. */
	.snycf-toc__summary {
		pointer-events: none;
	}

	.snycf-toc__summary::after {
		display: none;
	}
}

/* =====================================================================
 * Video card — row variant
 *
 * Used beside a lead video. Stacks below 30rem for the same reason the
 * story row does: a fixed thumbnail beside a headline leaves no room for
 * the headline on a phone.
 * ================================================================== */

.snycf-video-card--row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --snycf-space-xs );
	padding-block: var( --snycf-space-md );
	border-bottom: var( --snycf-divider );
}

.snycf-video-card--row .snycf-video-card__title {
	font-size: 1.0625rem;
}

@media ( min-width: 30rem ) {

	.snycf-video-card--row {
		grid-template-columns: 10.625rem minmax( 0, 1fr );
		gap: var( --snycf-space-md );
		align-items: start;
	}
}

/* =====================================================================
 * Story row — circular media and micro size
 *
 * The victim-story entries in the approved design pair a circular portrait
 * with a short headline. Shape and size are arguments on the canonical row,
 * not a second component.
 * ================================================================== */

.snycf-row--micro {
	padding-block: 0;
	border-bottom: 0;
	align-items: center;
}

.snycf-row--circle .snycf-media,
.snycf-row--circle .snycf-no-image {
	border-radius: var( --snycf-radius-circle );
}

.snycf-row--circle .snycf-no-image {
	padding: var( --snycf-space-2xs );
}

.snycf-row--micro .snycf-row__title {
	font-size: 1.0625rem;
	line-height: 1.3;
}

.snycf-row__cta {
	margin-top: var( --snycf-space-3xs );
}

@media ( min-width: 30rem ) {

	.snycf-row--micro {
		grid-template-columns: 4.5rem minmax( 0, 1fr );
		gap: var( --snycf-space-sm );
	}
}

@media ( min-width: 48rem ) {

	.snycf-row--micro .snycf-row__title {
		font-size: 1.09375rem;
	}
}

/* =====================================================================
 * Most discussed — discussion treatment
 * ================================================================== */

.snycf-discussed--discussion .snycf-discussed__item {
	grid-template-columns: minmax( 0, 1fr );
	padding-block: var( --snycf-space-md );
	border-bottom: var( --snycf-border-width-hair ) solid var( --snycf-ink-2 );
}

.snycf-discussed__headline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --snycf-space-2xs ) var( --snycf-space-xs );
}

.snycf-discussed__count-badge {
	flex: none;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.75rem;
	font-weight: var( --snycf-weight-black );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --snycf-accent-on-ink );
}

.snycf-discussed--discussion .snycf-discussed__title {
	font-size: 1.125rem;
	line-height: 1.3;
	color: var( --snycf-paper );
}

.snycf-discussed--discussion .snycf-discussed__title:hover {
	color: var( --snycf-accent-on-ink );
}

.snycf-discussed__latest {
	display: block;
	margin-top: var( --snycf-space-3xs );
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var( --snycf-text-meta );
}

.snycf-discussed__action {
	display: inline-flex;
	align-items: center;
	gap: var( --snycf-space-3xs );
	min-height: var( --snycf-target-min );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: var( --snycf-tracking-meta );
	text-transform: uppercase;
	color: var( --snycf-paper );
}

.snycf-discussed__action:hover {
	color: var( --snycf-accent-on-ink );
}

/* =====================================================================
 * Due Process
 *
 * Lives here rather than in home.css because ui/due-process is a registered
 * shared component rendered on both the homepage and About. Keeping its
 * styles in a page-specific sheet left the About page showing the markup
 * unstyled — the quotations lost their rules and the inverted position panel
 * collapsed into a strip with its text clipped.
 *
 * The constitutional quotations and the publication's own position sit in the
 * same grid but must read as different kinds of statement: quotations are
 * ruled blockquotes on the page ground, the position is an inverted panel.
 * ================================================================== */

.snycf-due-process__title {
	margin-bottom: var( --snycf-space-md );
}

.snycf-due-process__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --snycf-space-lg );
	align-items: stretch;
}

.snycf-due-process__label {
	margin: 0 0 var( --snycf-space-2xs );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-black );
	letter-spacing: var( --snycf-tracking-kicker );
	text-transform: uppercase;
	color: var( --snycf-text-meta );
}

.snycf-due-process__reference {
	margin: 0;
	min-width: 0;
}

.snycf-due-process__quote {
	margin: 0;
	padding-inline-start: var( --snycf-space-md );
	border-inline-start: var( --snycf-border-width-rule ) solid var( --snycf-ink );
}

.snycf-due-process__quote p {
	margin: 0;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: 1.03125rem;
	font-style: italic;
	line-height: 1.55;
	color: var( --snycf-bar );
	text-wrap: pretty;
}

/* The publication's own statement — inverted, never a blockquote. */
.snycf-due-process__position {
	padding: var( --snycf-space-md ) var( --snycf-space-lg );
	min-width: 0;
}

.snycf-due-process__position-heading {
	margin: var( --snycf-space-xs ) 0 0;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: 1.25rem;
	font-weight: var( --snycf-weight-bold );
	line-height: 1.3;
	color: var( --snycf-paper );
	text-wrap: pretty;
}

.snycf-due-process__position-body {
	margin: var( --snycf-space-xs ) 0 0;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.8125rem;
	font-weight: var( --snycf-weight-bold );
	letter-spacing: 0.06em;
	line-height: 1.6;
	color: var( --snycf-prose-dark );
}

@media ( min-width: 48rem ) {

	.snycf-due-process__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --snycf-space-xl );
	}
}

@media ( min-width: 64rem ) {

	.snycf-due-process__grid {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ) minmax( 0, 1.1fr );
		gap: var( --snycf-space-2xl );
	}
}