/**
 * SNYCF — Base
 *
 * Reset, fonts, element defaults, typography classes, layout primitives and
 * accessibility utilities. Mobile-first: everything here is the 375px case,
 * and larger widths are additive.
 *
 * @package snycf
 */

/* =====================================================================
 * 1. Fonts
 * ================================================================== */

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 500 900;
	font-display: swap;
	src: url( '../fonts/archivo-variable-latin.woff2' ) format( 'woff2-variations' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url( '../fonts/source-serif-4-variable-latin.woff2' ) format( 'woff2-variations' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url( '../fonts/source-serif-4-variable-italic-latin.woff2' ) format( 'woff2-variations' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks so the swap does not shift layout. Values tuned
 * against the two variable faces above. */
@font-face {
	font-family: 'Archivo Fallback';
	src: local( 'Helvetica Neue' ), local( 'Arial' );
	size-adjust: 101%;
	ascent-override: 92%;
	descent-override: 24%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Source Serif Fallback';
	src: local( 'Georgia' ), local( 'Times New Roman' );
	size-adjust: 97%;
	ascent-override: 94%;
	descent-override: 30%;
	line-gap-override: 0%;
}

/* =====================================================================
 * 2. Reset
 * ================================================================== */

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

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

body {
	margin: 0;
	background-color: var( --snycf-surface );
	color: var( --snycf-text );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-body );
	line-height: var( --snycf-leading-ui );
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* No page ever scrolls sideways. Wide content scrolls inside its own
	 * container instead — see .snycf-scroll-x. */
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

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

/* Fluid media — nothing overflows its container. */
img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

/* Reserve space from the intrinsic ratio to keep CLS near zero. */
img[ width ][ height ] {
	height: auto;
}

svg {
	fill: currentColor;
}

a {
	color: var( --snycf-link );
	text-decoration: none;
	transition: color var( --snycf-transition-fast );
}

a:hover {
	color: var( --snycf-link-hover );
}

/* Links inside running prose are underlined — colour alone is not a
 * sufficient affordance. Navigation and card links are exempt. */
.snycf-prose a:not([class]) {
	text-decoration: underline;
	text-decoration-color: var( --snycf-accent );
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

strong,
b {
	font-weight: var( --snycf-weight-bold );
}

hr {
	height: 0;
	margin: var( --snycf-space-xl ) 0;
	border: 0;
	border-top: var( --snycf-divider );
}

/* =====================================================================
 * 3. Forms
 * ================================================================== */

input,
select,
textarea,
button {
	font: inherit;
	color: inherit;
	margin: 0;
}

input,
select,
textarea {
	min-height: var( --snycf-target-min );
	padding: var( --snycf-space-xs ) var( --snycf-space-sm );
	border: var( --snycf-border-width-hair ) solid var( --snycf-border-soft );
	border-radius: var( --snycf-radius-none );
	background-color: var( --snycf-paper );
	color: var( --snycf-ink );
	max-width: 100%;
}

textarea {
	min-height: 8rem;
	resize: vertical;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	line-height: var( --snycf-leading-deck );
}

button,
input[ type='submit' ],
input[ type='button' ] {
	min-height: var( --snycf-target-min );
	border-radius: var( --snycf-radius-none );
	cursor: pointer;
}

::placeholder {
	color: var( --snycf-meta );
	opacity: 1;
}

/* Keep iOS from zooming when a control is focused. */
@media ( max-width: 767px ) {

	input,
	select,
	textarea {
		font-size: max( 1rem, var( --snycf-size-body ) );
	}
}

/* =====================================================================
 * 4. Focus
 *
 * The export defined this on 13 of 18 files; here it is global.
 * ================================================================== */

:focus-visible {
	outline: 2px solid var( --snycf-focus );
	outline-offset: 2px;
}

/* Only suppress the default ring where :focus-visible is supported, so
 * keyboard users never lose focus in older browsers. */
:focus:not( :focus-visible ) {
	outline: none;
}

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

/* =====================================================================
 * 5. Typography classes
 * ================================================================== */

.snycf-display,
.snycf-h1,
.snycf-h2,
.snycf-h3,
.snycf-h4 {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	text-wrap: balance;

	/* Stated explicitly: the tracked-caps treatment belongs to
	 * .snycf-section-heading, and must never leak onto an editorial
	 * headline from a global element rule. */
	text-transform: none;
	letter-spacing: normal;
}

.snycf-display {
	font-size: var( --snycf-size-display );
	line-height: 0.95;
	letter-spacing: var( --snycf-tracking-display );
}

.snycf-h1 {
	font-size: var( --snycf-size-h1 );
	line-height: 1.08;
	letter-spacing: var( --snycf-tracking-headline );
}

.snycf-h2 {
	font-size: var( --snycf-size-h2 );
	line-height: var( --snycf-leading-headline );
}

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

.snycf-h4 {
	font-size: var( --snycf-size-h4 );
	line-height: var( --snycf-leading-snug );
}

/* Standfirst under a headline. */
.snycf-deck {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: var( --snycf-size-deck );
	font-weight: 400;
	line-height: var( --snycf-leading-deck );
	color: var( --snycf-text-prose );
	text-wrap: pretty;
}

/* The section heading device: Archivo 900 tracked caps on a 3px rule. Used
 * for both band headings and in-article H2s — in this design an article
 * section heading is not serif. */
.snycf-section-heading {
	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;
	line-height: 1.3;
	border-top: var( --snycf-rule-top );
	border-top-color: var( --snycf-border-strong );
	padding-top: var( --snycf-rule-gap );
	margin: 0;

	/* Tracked caps get wide fast; wrap rather than overflow. */
	min-width: 0;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

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

/* Eyebrow above a band heading. */
.snycf-eyebrow {
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-nav );
	font-weight: var( --snycf-weight-black );
	letter-spacing: var( --snycf-tracking-eyebrow );
	text-transform: uppercase;
	color: var( --snycf-accent );
	line-height: 1.3;
}

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

/* Content-type / borough kicker above a headline. */
.snycf-kicker {
	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-metadata {
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-meta );
	font-weight: var( --snycf-weight-semibold );
	letter-spacing: var( --snycf-tracking-meta );
	color: var( --snycf-text-meta );
	line-height: 1.5;
}

/* Small tracked-caps badge with a hairline border. */
.snycf-badge {
	display: inline-block;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-badge );
	font-weight: var( --snycf-weight-black );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.5;
	padding: var( --snycf-space-3xs ) var( --snycf-space-2xs );
	border: var( --snycf-border-width-hair ) solid currentColor;
	color: var( --snycf-accent );
}

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

/* Running editorial prose. */
.snycf-prose {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: var( --snycf-size-prose );
	line-height: var( --snycf-leading-prose );
	color: var( --snycf-text-prose );
	text-wrap: pretty;
}

.snycf-prose > * + * {
	margin-top: var( --snycf-space-lg );
}

/* =====================================================================
 * 6. Layout primitives
 *
 * Six primitives, each doing one job. Deliberately not a utility framework.
 * ================================================================== */

/**
 * Container — centres content and applies the page gutter.
 * Width comes from a modifier; the default is the wide container.
 */
.snycf-container {
	width: 100%;
	max-width: var( --snycf-container-wide );
	margin-inline: auto;
	padding-inline: var( --snycf-gutter );
}

.snycf-container--article {
	max-width: var( --snycf-container-article );
}

.snycf-container--page {
	max-width: var( --snycf-container-page );
}

.snycf-container--narrow {
	max-width: var( --snycf-container-narrow );
}

.snycf-container--comments {
	max-width: var( --snycf-container-comments );
}

/**
 * Measure — caps a reading column at a comfortable line length.
 */
.snycf-measure {
	max-width: var( --snycf-measure );
}

.snycf-measure--prose {
	max-width: var( --snycf-measure-prose );
}

/**
 * Section — vertical rhythm between page sections.
 */
.snycf-section {
	padding-block: var( --snycf-section-gap );
}

.snycf-section--flush-top {
	padding-block-start: 0;
}

.snycf-section--flush-bottom {
	padding-block-end: 0;
}

/**
 * Band — a full-bleed coloured section. Pair with .is-inverse or .is-stock.
 */
.snycf-band {
	padding-block: var( --snycf-band-gap );
}

/**
 * Stack — vertical flow with one consistent gap. Replaces the margin
 * collapsing that inline-styled exports rely on.
 */
.snycf-stack {
	display: flex;
	flex-direction: column;
	gap: var( --snycf-stack-gap, var( --snycf-space-sm ) );
}

.snycf-stack--xs { --snycf-stack-gap: var( --snycf-space-2xs ); }
.snycf-stack--sm { --snycf-stack-gap: var( --snycf-space-xs ); }
.snycf-stack--md { --snycf-stack-gap: var( --snycf-space-md ); }
.snycf-stack--lg { --snycf-stack-gap: var( --snycf-space-xl ); }
.snycf-stack--xl { --snycf-stack-gap: var( --snycf-space-3xl ); }

/**
 * Cluster — horizontal group that wraps. Used for metadata rows, kickers,
 * filter pills and share buttons.
 */
.snycf-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --snycf-cluster-gap, var( --snycf-space-2xs ) );
}

.snycf-cluster--sm { --snycf-cluster-gap: var( --snycf-space-3xs ); }
.snycf-cluster--md { --snycf-cluster-gap: var( --snycf-space-xs ); }
.snycf-cluster--lg { --snycf-cluster-gap: var( --snycf-space-sm ); }
.snycf-cluster--baseline { align-items: baseline; }
.snycf-cluster--between { justify-content: space-between; }

/* Decorative separators between metadata items. Hidden from assistive
 * technology, and dropped when a row wraps on narrow screens. */
.snycf-cluster__sep {
	color: var( --snycf-rule-soft );
	flex: none;
}

@media ( max-width: 479px ) {

	.snycf-cluster__sep {
		display: none;
	}
}

/**
 * Grid — the editorial card grid. Auto-fit by default so it collapses
 * without a breakpoint; --snycf-grid-min tunes the collapse point.
 */
.snycf-grid {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax( min( var( --snycf-grid-min, 280px ), 100% ), 1fr )
	);
	gap: var( --snycf-gap-grid );
}

.snycf-grid--sm { --snycf-grid-min: 240px; }
.snycf-grid--lg { --snycf-grid-min: 320px; }

/**
 * Split — an asymmetric two-column editorial layout that stacks below the
 * given width. Replaces the fixed fr-ratio grids in the export that never
 * collapsed.
 */
.snycf-split {
	display: grid;
	gap: var( --snycf-gap-column );
	grid-template-columns: 1fr;
}

@media ( min-width: 64rem ) { /* 1024px */

	.snycf-split {
		grid-template-columns: var( --snycf-split-ratio, 7fr 5fr );
		align-items: start;
	}

	.snycf-split--11-9 { --snycf-split-ratio: 11fr 9fr; }
	.snycf-split--5-7 { --snycf-split-ratio: 5fr 7fr; }
	.snycf-split--2-3 { --snycf-split-ratio: 2fr 3fr; }
	.snycf-split--even { --snycf-split-ratio: 1fr 1fr; }
}

/**
 * Dividers.
 */
.snycf-rule {
	border-top: var( --snycf-rule-top );
	border-top-color: var( --snycf-border-strong );
	padding-top: var( --snycf-rule-gap );
}

.snycf-rule--accent {
	border-top-color: var( --snycf-accent );
}

.snycf-divider {
	border-bottom: var( --snycf-divider );
}

/**
 * Horizontal scroll container for wide content — tables, code, document
 * rows. The page body never scrolls sideways; these do.
 */
.snycf-scroll-x {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

/* =====================================================================
 * 7. Accessibility utilities
 * ================================================================== */

/**
 * Visually hidden but available to assistive technology.
 * Matches core's .screen-reader-text contract.
 */
.screen-reader-text,
.snycf-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/**
 * Skip link — first focusable element on every page. Hidden until focused,
 * then pinned above the sticky header.
 */
.snycf-skip-link {
	position: absolute;
	top: 0;
	left: var( --snycf-space-2xs );
	z-index: var( --snycf-z-skip-link );
	transform: translateY( -150% );
	display: inline-block;
	padding: var( --snycf-space-xs ) var( --snycf-space-sm );
	background-color: var( --snycf-accent );
	color: var( --snycf-paper );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-meta );
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: var( --snycf-tracking-meta );
	text-transform: uppercase;
	transition: transform var( --snycf-transition );
}

.snycf-skip-link:focus {
	transform: translateY( 0 );
	color: var( --snycf-paper );
}

/* Landmark target for the skip link. */
#snycf-main:focus {
	outline: none;
}

/* =====================================================================
 * 8. Reduced motion
 * ================================================================== */

@media ( prefers-reduced-motion: reduce ) {

	html {
		scroll-behavior: auto;
	}

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

/* =====================================================================
 * 9. Print
 * ================================================================== */

@media print {

	.snycf-skip-link,
	.snycf-site-header,
	.snycf-utility-bar,
	.snycf-site-footer,
	.snycf-nav-toggle {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}