@layer base {
	/* ---- Fonts (self-hosted, OFL) ---- */
	@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/BarlowCondensed-Medium.woff2") format("woff2"); }
	@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/BarlowCondensed-SemiBold.woff2") format("woff2"); }
	@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/BarlowCondensed-Bold.woff2") format("woff2"); }
	@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/BarlowCondensed-ExtraBold.woff2") format("woff2"); }
	@font-face { font-family: "Barlow Condensed"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/BarlowCondensed-Black.woff2") format("woff2"); }
	@font-face { font-family: "Lora"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("../fonts/Lora-Variable.woff2") format("woff2"); }
	@font-face { font-family: "Lora"; font-weight: 400 700; font-style: italic; font-display: swap; src: url("../fonts/Lora-Italic-Variable.woff2") format("woff2"); }

	/* ---- Reset ---- */
	*, *::before, *::after { box-sizing: border-box; border-radius: var(--radius); }
	html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
	body {
		margin: 0;
		background: var(--gray-section);
		color: var(--gray-ink);
		font-family: var(--font-display);
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}
	h1, h2, h3, h4, p, ul, ol, blockquote, figure { margin: 0; }
	ul, ol { padding: 0; list-style: none; }
	img, picture, svg, video { display: block; max-width: 100%; }
	img { height: auto; }
	a { color: inherit; text-decoration: none; }
	button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
	em { font-style: normal; }

	:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
	.section--dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--white-text); }

	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
	}

	/* ---- Type primitives ---- */
	.display {
		font-family: var(--font-display);
		font-weight: var(--fw-black);
		line-height: var(--lh-display);
		letter-spacing: var(--ls-tight);
		text-transform: uppercase;
	}
	.kicker {
		display: inline-block;
		font-size: var(--fs-label);
		font-weight: var(--fw-bold);
		letter-spacing: var(--ls-ui);
		line-height: var(--lh-ui);
		text-transform: uppercase;
		color: var(--red);
	}
	.kicker--tag {
		background: var(--red);
		color: var(--white-text);
		padding: 5px 12px 4px;
	}
	.label {
		font-size: var(--fs-micro);
		font-weight: var(--fw-semi);
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
	}
	.serif {
		font-family: var(--font-serif);
		line-height: var(--lh-serif);
		text-transform: none;
		letter-spacing: 0;
	}
	.icon { width: 1em; height: 1em; flex: none; }

	/* Short red accent rules (hero headline, tagline) */
	.rule { display: block; height: var(--bw-rule); background: var(--red); }
	.rule--red { width: 84px; }

	.visually-hidden, .skip-link:not(:focus) {
		position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
	}
	.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; background: var(--red); color: #fff; padding: 8px 12px; }

	/* ---- Section alternation (design DNA) ---- */
	.section { padding-block: var(--section-gap); }
	.section--light { background: var(--gray-section); color: var(--gray-ink); }
	.section--dark { background: var(--black); color: var(--white-text); }
	.section + .section--light { padding-top: 0; }
}

@layer components {
	/* Branded empty state: never a bare "nothing here". */
	.empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: var(--sp-6) var(--sp-5); background: var(--black); color: var(--white-text); }
	.empty__mark { display: grid; place-items: center; width: 44px; height: 44px; background: var(--red); color: #fff; font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.5rem; padding-top: 2px; margin-bottom: 6px; }
	.empty__title { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--fs-h3); line-height: 1.05; text-transform: uppercase; letter-spacing: var(--ls-tight); }
	.empty__text { font-family: var(--font-serif); font-size: var(--fs-body); color: var(--on-dark-muted); max-width: 40rem; }
	.empty .textlink { margin-top: 6px; }
	.story-lead__img--empty, .story-row__img--empty { background: linear-gradient(180deg, #1b1c1c, var(--black-deep)); }
}