/*
Theme Name: Business News South Africa
Theme URI: https://businessnewssouthafrica.co.za
Author: Business News South Africa
Description: Fast, editorial news theme for a South African business news desk. Hand-written CSS, no build step, no framework — the news listing pages are the product, so they load first and load fast. Designed around an AI drafting pipeline with a human review gate.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sabiznews
Tags: news, magazine, blog, editorial, custom-colors, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. BRAND CI — DESIGN TOKENS
   --------------------------------------------------------------------------
   Everything visual resolves to a value in this block. Change a token here
   and it propagates site-wide; there are no hard-coded colours or fonts
   anywhere below this section.

   COLOUR RATIONALE
   The palette is deliberately two-tone plus one accent. Competing SA
   business titles are almost all blue (Moneyweb, Fin24) or red
   (BusinessTech), so neither was available for a distinctive identity.

   The accent is gold — Johannesburg is eGoli, the city of gold, and gold
   mining capital is what built the JSE. It reads as premium and financial
   without being a flag pastiche, and nobody in the category owns it.

   Gold is an ACCENT, never body text: at the weight needed for legibility
   it goes muddy, and it fails contrast on white at small sizes. Body copy
   is ink on paper. Links are ink with a gold underline — the editorial
   convention (FT, Economist) and the most legible option.

   Green/red appear ONLY for market movement. They are functional signals,
   not brand colours, so they never leak into navigation or headings.
   ========================================================================== */

:root {
	/* --- Ink scale: text, dark surfaces, borders ------------------------- */
	--ink:        #0E1116; /* headlines, masthead, footer                   */
	--ink-800:    #1C2128; /* alternate dark surface                        */
	--ink-600:    #4A5158; /* secondary text, standfirsts                   */
	--ink-400:    #767E86; /* meta: timestamps, bylines, captions           */
	--ink-200:    #D8DCE0; /* hairline rules — the main structural device   */
	--ink-100:    #EDEFF2; /* subtle fills                                  */

	/* --- Paper ---------------------------------------------------------- */
	--paper:      #FFFFFF;
	--paper-warm: #FAF8F4; /* section bands, pull quotes                    */

	/* --- Brand accent --------------------------------------------------- */
	--gold:       #B8912F; /* rules, eyebrows, hovers, active states        */
	--gold-lift:  #D9B45C; /* the same accent on dark surfaces              */
	--gold-wash:  #FBF6E9; /* tinted fills                                  */

	/* --- Functional: market movement only ------------------------------- */
	--up:         #0B7A4B;
	--down:       #C0392B;

	/* --- Semantic aliases ----------------------------------------------- */
	--bg:            var(--paper);
	--bg-band:       var(--paper-warm);
	--text:          var(--ink);
	--text-muted:    var(--ink-600);
	--text-meta:     var(--ink-400);
	--rule:          var(--ink-200);
	--rule-strong:   var(--ink);
	--surface-dark:  var(--ink);
	--accent:        var(--gold);
	--accent-on-dark: var(--gold-lift);

	/* --- Type ----------------------------------------------------------- */
	/* Newsreader is drawn for editorial screen reading and carries optical
	   sizing, so large headlines tighten up on their own. Inter handles UI
	   and body copy, and its tabular figures matter for financial data. */
	--font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* Fluid scale, ~1.25 ratio. clamp() means no breakpoint juggling. */
	--fs-xs:   0.75rem;                              /* 12px  eyebrows     */
	--fs-sm:   0.8125rem;                            /* 13px  meta         */
	--fs-base: 0.9375rem;                            /* 15px  UI           */
	--fs-body: 1.0625rem;                            /* 17px  article body */
	--fs-md:   clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
	--fs-lg:   clamp(1.25rem,  0.8vw + 1.05rem, 1.5rem);
	--fs-xl:   clamp(1.5rem,   1.4vw + 1.15rem, 2rem);
	--fs-2xl:  clamp(1.875rem, 2.4vw + 1.25rem, 2.75rem);
	--fs-3xl:  clamp(2.25rem,  4vw + 1.15rem,  3.75rem);

	--lh-tight:  1.08; /* display headlines */
	--lh-snug:   1.22; /* card headlines    */
	--lh-normal: 1.45;
	--lh-body:   1.65; /* article copy      */

	--tracking-tight: -0.022em; /* large serif needs negative tracking */
	--tracking-wide:   0.08em;  /* uppercase eyebrows need positive    */

	/* --- Space: 4px base ------------------------------------------------ */
	--s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
	--s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
	--s-9: 4rem;     --s-10: 5rem;    --s-11: 6rem;

	/* --- Layout --------------------------------------------------------- */
	--container: 1280px;
	--measure:   68ch;   /* article line length — the readability constraint */
	--gutter:    clamp(1rem, 3vw, 2.5rem);

	/* --- Other ---------------------------------------------------------- */
	--radius: 2px;       /* print-inspired: almost square, never pill       */
	--transition: 140ms ease;
}

/* Dark mode is token-only — no component overrides. The ink/paper roles
   swap and gold lifts to its brighter variant for contrast on dark. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg:            #0B0E12;
		--bg-band:       #12161C;
		--text:          #F2F4F6;
		--text-muted:    #AEB6BE;
		--text-meta:     #838C95;
		--rule:          #262C34;
		--rule-strong:   #F2F4F6;
		--surface-dark:  #12161C;
		--accent:        var(--gold-lift);
		--gold-wash:     #1B1710;
		--up:            #3FBE85;
		--down:          #F0776A;
	}
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

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

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	font-feature-settings: "kern" 1, "liga" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	line-height: var(--lh-snug);
	letter-spacing: var(--tracking-tight);
	color: var(--text);
	text-wrap: balance; /* stops orphaned words in headlines */
}

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a {
	color: inherit;
	text-decoration: none;
}

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

figure { margin: 0; }

ul, ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); }

blockquote { margin: 0; }

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

/* Visible focus for keyboard users, suppressed for mouse clicks. */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

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

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--s-4);
	z-index: 999;
	padding: var(--s-3) var(--s-4);
	background: var(--ink);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 600;
}
.skip-link:focus { top: var(--s-2); }

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow { max-width: 820px; }

.band {
	background: var(--bg-band);
	border-block: 1px solid var(--rule);
}

.stack > * + * { margin-top: var(--s-4); }

/* ==========================================================================
   4. TYPOGRAPHY COMPONENTS
   ========================================================================== */

/* Category eyebrow — the small uppercase label above headlines. Gold,
   letterspaced, tiny. Appears on cards, articles and section heads. */
.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--accent);
	line-height: 1.2;
}
a.eyebrow:hover { color: var(--text); }

/* Meta line — byline, timestamp, reading time. */
.meta {
	font-size: var(--fs-sm);
	color: var(--text-meta);
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}
.meta a { color: var(--text-muted); text-decoration: none; }
.meta a:hover { color: var(--accent); }
.meta__sep { margin-inline: 0.45em; opacity: 0.55; }

/* Standfirst — the deck/summary under a headline. */
.standfirst {
	font-size: var(--fs-md);
	line-height: var(--lh-normal);
	color: var(--text-muted);
	font-weight: 400;
}

/* Section heading: serif title with a gold rule running to the "more" link. */
.section-head {
	display: flex;
	align-items: baseline;
	gap: var(--s-4);
	margin-bottom: var(--s-5);
	border-top: 2px solid var(--rule-strong);
	padding-top: var(--s-3);
}
.section-head__title {
	font-size: var(--fs-lg);
	font-weight: 600;
	white-space: nowrap;
}
.section-head__rule {
	flex: 1;
	height: 1px;
	background: var(--rule);
}
.section-head__more {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--accent);
	white-space: nowrap;
}
.section-head__more:hover { color: var(--text); text-decoration: underline; }

/* ==========================================================================
   5. MASTHEAD
   ========================================================================== */

.masthead {
	background: var(--bg);
	border-bottom: 1px solid var(--rule);
}

.masthead__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding-block: var(--s-4);
}

/* Logo: name-agnostic SVG mark + wordmark rendered from the WP site title,
   so renaming the publication is a Settings change, not a code change. */
.logo {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	flex-shrink: 0;
}
.logo__mark { width: 34px; height: 34px; flex-shrink: 0; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--text);
	white-space: nowrap;
}
.logo__tagline {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-meta);
	margin-top: 3px;
}

.masthead__utility {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	font-size: var(--fs-sm);
	color: var(--text-meta);
}
.masthead__date {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Navigation — the eight verticals. */
.nav {
	border-top: 1px solid var(--rule);
}
.nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav__list li { position: relative; }
.nav__list a {
	display: block;
	padding: var(--s-3) var(--s-4);
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--text);
	white-space: nowrap;
	transition: color var(--transition);
}
.nav__list li:first-child a { padding-inline-start: 0; }
.nav__list a:hover { color: var(--accent); }
/* Active vertical gets a gold underline rather than a fill — quieter. */
.nav__list .current-menu-item > a,
.nav__list .current-cat > a {
	color: var(--accent);
	box-shadow: inset 0 -3px 0 var(--accent);
}

/* Mobile nav toggle */
.nav-toggle {
	display: none;
	align-items: center;
	gap: var(--s-2);
	background: none;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: var(--s-2) var(--s-3);
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
}

.search-toggle {
	background: none;
	border: 0;
	padding: var(--s-2);
	cursor: pointer;
	color: var(--text-muted);
	display: inline-flex;
}
.search-toggle:hover { color: var(--accent); }

/* ==========================================================================
   6. SEARCH FORM
   ========================================================================== */

.search-panel {
	display: none;
	border-top: 1px solid var(--rule);
	padding-block: var(--s-4);
}
.search-panel[data-open="true"] { display: block; }

.search-form { display: flex; gap: var(--s-2); }
.search-form__field {
	flex: 1;
	padding: var(--s-3) var(--s-4);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--bg);
	font-size: var(--fs-base);
}
.search-form__field:focus {
	outline: none;
	border-color: var(--accent);
}
.search-form__submit {
	padding: var(--s-3) var(--s-5);
	border: 0;
	border-radius: var(--radius);
	background: var(--ink);
	color: #fff;
	font-size: var(--fs-base);
	font-weight: 600;
	cursor: pointer;
}
.search-form__submit:hover { background: var(--gold); }

/* ==========================================================================
   7. MARKET STRIP
   --------------------------------------------------------------------------
   Renders only when real data is supplied via the sabiznews_market_data
   filter. No placeholder numbers: a financial site showing invented
   figures is worse than one showing none.
   ========================================================================== */

.markets {
	display: flex;
	gap: var(--s-6);
	overflow-x: auto;
	padding-block: var(--s-3);
	scrollbar-width: none;
	font-variant-numeric: tabular-nums;
}
.markets::-webkit-scrollbar { display: none; }

.market {
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
	white-space: nowrap;
	font-size: var(--fs-sm);
}
.market__name { font-weight: 600; color: var(--text-muted); }
.market__value { font-weight: 600; }
.market__change--up   { color: var(--up); }
.market__change--down { color: var(--down); }

/* ==========================================================================
   8. STORY CARDS
   --------------------------------------------------------------------------
   Flat, hairline-separated, no shadows. Print-inspired: the rules do the
   structural work so the page stays quiet at high story density.
   ========================================================================== */

.card { display: flex; flex-direction: column; gap: var(--s-3); }

.card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--ink-100);
	aspect-ratio: 3 / 2;
	border-radius: var(--radius);
}
.card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}
.card:hover .card__media img { transform: scale(1.03); }

/* Placeholder for stories with no featured image — the wire reality for a
   fast-moving desk. A tinted panel with the mark beats a broken frame. */
.card__media--empty {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--gold-wash), var(--bg-band));
}
.card__media--empty svg { width: 34px; height: 34px; opacity: 0.3; }

.card__body { display: flex; flex-direction: column; gap: var(--s-2); }

.card__title {
	font-size: var(--fs-md);
	font-weight: 600;
	line-height: var(--lh-snug);
}
.card__title a:hover { color: var(--accent); }

.card__excerpt {
	font-size: var(--fs-base);
	color: var(--text-muted);
	line-height: var(--lh-normal);
}

/* --- Lead story: the top-left anchor of the homepage ------------------- */
.card--lead .card__title { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
.card--lead .card__excerpt { font-size: var(--fs-md); }
.card--lead .card__media { aspect-ratio: 16 / 9; }

/* --- Compact list item: the "latest" rail ----------------------------- */
.list-item {
	display: flex;
	gap: var(--s-4);
	padding-block: var(--s-4);
	border-top: 1px solid var(--rule);
}
.list-item:first-child { border-top: 0; padding-top: 0; }
.list-item__body { flex: 1; min-width: 0; }
.list-item__title {
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: var(--lh-snug);
	font-family: var(--font-display);
	letter-spacing: -0.01em;
}
.list-item__title a:hover { color: var(--accent); }
.list-item__thumb {
	width: 76px; height: 76px;
	flex-shrink: 0;
	object-fit: cover;
	border-radius: var(--radius);
	background: var(--ink-100);
}
/* Numbered variant for "most read" style rails. */
.list-item__rank {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--rule);
	line-height: 1;
	width: 1.5em;
	flex-shrink: 0;
}

/* ==========================================================================
   9. GRIDS
   ========================================================================== */

.grid { display: grid; gap: var(--s-6); }

/* Homepage hero: lead story + latest rail, divided by a vertical rule. */
.grid--hero {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--s-8);
	align-items: start;
}
.grid--hero > .rail {
	border-left: 1px solid var(--rule);
	padding-left: var(--s-6);
}

/* Column counts are chosen by the template to match how many stories it
   actually has, so a short row never leaves a visible gap. */
.grid--1 { grid-template-columns: minmax(0, 1fr); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Cards in a row get dividing rules, like columns in print. */
.grid--ruled > * + * {
	border-left: 1px solid var(--rule);
	padding-left: var(--s-6);
}

.rail__title {
	font-size: var(--fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	padding-bottom: var(--s-3);
	margin-bottom: var(--s-4);
	border-bottom: 2px solid var(--rule-strong);
}

/* ==========================================================================
   10. SECTIONS
   ========================================================================== */

.section { padding-block: var(--s-8); }
.section + .section { border-top: 1px solid var(--rule); }
.section--tight { padding-block: var(--s-6); }

/* ==========================================================================
   11. ARTICLE (single post)
   ========================================================================== */

.article { padding-block: var(--s-7) var(--s-9); }

.article__header {
	max-width: var(--measure);
	margin-inline: auto;
	margin-bottom: var(--s-6);
}
.article__title {
	font-size: var(--fs-2xl);
	line-height: var(--lh-tight);
	margin-block: var(--s-3);
}
.article__standfirst {
	font-size: var(--fs-lg);
	line-height: var(--lh-normal);
	color: var(--text-muted);
	font-family: var(--font-display);
	font-weight: 400;
	margin-bottom: var(--s-5);
}
.article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-4);
	padding-block: var(--s-4);
	border-block: 1px solid var(--rule);
}
.article__byline { font-size: var(--fs-base); font-weight: 600; }

.article__figure {
	margin-block: var(--s-6);
}
.article__figure img { width: 100%; border-radius: var(--radius); }
.article__caption {
	max-width: var(--measure);
	margin-inline: auto;
	margin-top: var(--s-3);
	font-size: var(--fs-sm);
	color: var(--text-meta);
	line-height: var(--lh-normal);
}

/* Article body — the readability core of the whole site. */
.article__body {
	max-width: var(--measure);
	margin-inline: auto;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}
.article__body > * + * { margin-top: var(--s-5); }
.article__body p { margin: 0; }

.article__body h2 {
	font-size: var(--fs-xl);
	margin-top: var(--s-7) !important;
}
.article__body h3 {
	font-size: var(--fs-lg);
	margin-top: var(--s-6) !important;
}

/* Body links: ink with a gold underline. Legible, unmistakably a link,
   and it keeps gold out of the text colour where it would go muddy. */
.article__body a {
	color: var(--text);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.article__body a:hover {
	color: var(--accent);
}

.article__body blockquote {
	padding-left: var(--s-5);
	border-left: 3px solid var(--accent);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	line-height: var(--lh-normal);
	color: var(--text);
}

.article__body figure { margin-block: var(--s-6); }
.article__body figcaption {
	margin-top: var(--s-2);
	font-size: var(--fs-sm);
	color: var(--text-meta);
}

.article__body ul, .article__body ol { padding-left: var(--s-5); }
.article__body li + li { margin-top: var(--s-2); }

.article__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-base);
	font-variant-numeric: tabular-nums;
}
.article__body th, .article__body td {
	padding: var(--s-3);
	border-bottom: 1px solid var(--rule);
	text-align: left;
}
.article__body th { font-weight: 700; border-bottom-color: var(--rule-strong); }

/* Wide media can break the measure — standard block-editor alignments. */
.article__body .alignwide {
	max-width: min(1080px, 100%);
	margin-inline: calc(50% - min(540px, 50vw));
	width: min(1080px, 100vw);
}
.article__body .alignfull {
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	width: 100vw;
}

/* Anything wide scrolls inside itself rather than the page. */
.article__body pre,
.article__body .wp-block-table {
	overflow-x: auto;
}
.article__body pre {
	padding: var(--s-4);
	background: var(--bg-band);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
}

/* --- Key points --------------------------------------------------------
   Business readers scan before committing. A trading-statement story is
   often consumed as three facts, so give them the three facts. Written by
   the model, capped at four, dash-stripped by the validator. */
.key-points {
	max-width: var(--measure);
	margin: 0 auto var(--s-6);
	padding: var(--s-5);
	background: var(--bg-band);
	border-top: 2px solid var(--rule-strong);
}
.key-points__label {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--text-meta);
	margin-bottom: var(--s-3);
}
.key-points__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--s-3);
}
.key-points__list li {
	position: relative;
	padding-left: var(--s-5);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
}
/* A gold rule rather than a bullet — same structural language as the rest
   of the page, and it doesn't read as a list of features. */
.key-points__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 12px;
	height: 2px;
	background: var(--accent);
}

/* --- Byline role: "Thabo Nkosi, Markets editor" ----------------------- */
.byline__role {
	font-weight: 400;
	color: var(--text-muted);
}

/* --- Author bio --------------------------------------------------------
   Renders only for a real named author with a filled-in biography. An
   empty bio box is worse than none: it advertises that nobody stands
   behind the reporting. */
.author-bio {
	display: flex;
	gap: var(--s-4);
	max-width: var(--measure);
	margin: var(--s-7) auto 0;
	padding-top: var(--s-5);
	border-top: 1px solid var(--rule);
}
.author-bio__avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	flex-shrink: 0;
}
.author-bio__label {
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--text-meta);
	margin-bottom: var(--s-1);
}
.author-bio__name {
	font-size: var(--fs-md);
	font-weight: 600;
	margin-bottom: var(--s-1);
}
.author-bio__name a:hover { color: var(--accent); }
.author-bio__role {
	font-size: var(--fs-sm);
	color: var(--accent);
	font-weight: 600;
	margin-bottom: var(--s-2);
}
.author-bio__text {
	font-size: var(--fs-base);
	color: var(--text-muted);
	line-height: var(--lh-normal);
	margin: 0;
}

/* --- Source attribution ------------------------------------------------
   Every AI-drafted story carries its source. The editorial rules in the
   pipeline demand attribution in the copy; this surfaces the link itself
   so a reader can always reach the primary document. */
.source-box {
	max-width: var(--measure);
	margin: var(--s-7) auto 0;
	padding: var(--s-4) var(--s-5);
	background: var(--bg-band);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
}
.source-box__label {
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--text-meta);
	margin-bottom: var(--s-2);
}
.source-box__link {
	font-size: var(--fs-base);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}
.source-box__link:hover { color: var(--accent); }

/* Tags */
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	max-width: var(--measure);
	margin: var(--s-6) auto 0;
}
.tag {
	padding: var(--s-1) var(--s-3);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	font-size: var(--fs-sm);
	color: var(--text-muted);
	transition: all var(--transition);
}
.tag:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* ==========================================================================
   12. NEWSLETTER
   ========================================================================== */

.newsletter {
	padding-block: var(--s-8);
	background: var(--surface-dark);
	color: #fff;
}
.newsletter__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--s-7);
	align-items: center;
}
.newsletter__title {
	font-size: var(--fs-xl);
	color: #fff;
	margin-bottom: var(--s-2);
}
.newsletter__copy {
	color: rgba(255,255,255,0.7);
	font-size: var(--fs-base);
	max-width: 46ch;
}
.newsletter__form { display: flex; gap: var(--s-2); }
.newsletter__field {
	min-width: 260px;
	padding: var(--s-3) var(--s-4);
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: var(--radius);
	background: rgba(255,255,255,0.06);
	color: #fff;
	font-size: var(--fs-base);
}
.newsletter__field::placeholder { color: rgba(255,255,255,0.45); }
.newsletter__field:focus {
	outline: none;
	border-color: var(--gold-lift);
	background: rgba(255,255,255,0.1);
}
.newsletter__submit {
	padding: var(--s-3) var(--s-5);
	border: 0;
	border-radius: var(--radius);
	background: var(--gold-lift);
	color: var(--ink);
	font-weight: 700;
	font-size: var(--fs-base);
	cursor: pointer;
	white-space: nowrap;
}
.newsletter__submit:hover { background: #fff; }
.newsletter__note {
	margin-top: var(--s-3);
	font-size: var(--fs-xs);
	color: rgba(255,255,255,0.45);
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.footer {
	background: var(--surface-dark);
	color: rgba(255,255,255,0.7);
	padding-block: var(--s-8) var(--s-6);
	font-size: var(--fs-base);
}
/* In dark mode the footer would vanish into the page without this. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .footer { border-top: 1px solid var(--rule); }
}

.footer a { color: rgba(255,255,255,0.7); }
.footer a:hover { color: var(--gold-lift); }

.footer__grid {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr);
	gap: var(--s-7);
	padding-bottom: var(--s-7);
	border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer .logo__name { color: #fff; }
.footer .logo__tagline { color: rgba(255,255,255,0.5); }

.footer__about {
	margin-top: var(--s-4);
	max-width: 40ch;
	color: rgba(255,255,255,0.55);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
}

.footer__heading {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--gold-lift);
	margin-bottom: var(--s-4);
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li + li { margin-top: var(--s-3); }

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-3);
	padding-top: var(--s-5);
	font-size: var(--fs-sm);
	color: rgba(255,255,255,0.45);
}

/* ==========================================================================
   14. ARCHIVE / SEARCH / 404
   ========================================================================== */

.page-header {
	padding-block: var(--s-7) var(--s-6);
	border-bottom: 2px solid var(--rule-strong);
	margin-bottom: var(--s-7);
}
.page-header__title { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
.page-header__desc {
	margin-top: var(--s-3);
	max-width: 60ch;
	color: var(--text-muted);
	font-size: var(--fs-md);
}
.page-header__count {
	margin-top: var(--s-3);
	font-size: var(--fs-sm);
	color: var(--text-meta);
	font-variant-numeric: tabular-nums;
}

.pagination {
	display: flex;
	justify-content: center;
	gap: var(--s-2);
	margin-top: var(--s-8);
	padding-top: var(--s-6);
	border-top: 1px solid var(--rule);
}
.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px; height: 40px;
	padding-inline: var(--s-2);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	font-size: var(--fs-base);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pagination .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .pagination .page-numbers.current {
		background: var(--gold-lift); border-color: var(--gold-lift); color: var(--ink);
	}
}

.empty-state {
	padding-block: var(--s-9);
	text-align: center;
}
.empty-state__title { font-size: var(--fs-xl); margin-bottom: var(--s-3); }
.empty-state__copy {
	color: var(--text-muted);
	max-width: 48ch;
	margin: 0 auto var(--s-5);
}

/* Big numeral for the 404 */
.error-code {
	font-family: var(--font-display);
	font-size: clamp(5rem, 18vw, 11rem);
	font-weight: 700;
	line-height: 0.85;
	color: var(--rule);
	letter-spacing: -0.04em;
}

/* ==========================================================================
   15. BUTTONS
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-5);
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: var(--ink);
	color: #fff;
	font-size: var(--fs-base);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition);
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.btn--ghost { background: none; color: var(--text); }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ==========================================================================
   16. RESPONSIVE
   --------------------------------------------------------------------------
   Mobile-last: the desktop grid above degrades here. Breakpoints sit where
   the layout actually breaks, not at device widths.
   ========================================================================== */

@media (max-width: 1080px) {
	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
	/* Hero collapses: rail moves below the lead and loses its divider. */
	.grid--hero { grid-template-columns: 1fr; gap: var(--s-7); }
	.grid--hero > .rail {
		border-left: 0;
		padding-left: 0;
		border-top: 2px solid var(--rule-strong);
		padding-top: var(--s-5);
	}
	.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid--ruled > * + * { border-left: 0; padding-left: 0; }
	.grid--ruled > * + * {
		border-top: 1px solid var(--rule);
		padding-top: var(--s-5);
	}
	.newsletter__inner { grid-template-columns: 1fr; gap: var(--s-5); }
}

@media (max-width: 720px) {
	:root { --fs-body: 1rem; }

	.nav-toggle { display: inline-flex; }
	.nav__list {
		display: none;
		flex-direction: column;
		align-items: stretch;
		padding-block: var(--s-2);
	}
	.nav__list[data-open="true"] { display: flex; }
	.nav__list a { padding-inline: 0; }
	.nav__list li:not(:first-child) { border-top: 1px solid var(--rule); }
	.nav__list .current-menu-item > a,
	.nav__list .current-cat > a { box-shadow: none; }

	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
	.grid { gap: var(--s-5); }
	.grid--ruled > * + * { padding-top: var(--s-5); }

	.card--lead .card__title { font-size: var(--fs-xl); }
	.article__title { font-size: var(--fs-xl); }

	.footer__grid { grid-template-columns: 1fr; gap: var(--s-6); }
	.newsletter__form { flex-direction: column; }
	.newsletter__field { min-width: 0; width: 100%; }

	.masthead__utility .masthead__date { display: none; }
	.list-item__thumb { width: 60px; height: 60px; }
}

/* ==========================================================================
   17. PRINT
   ========================================================================== */

@media print {
	.masthead, .nav, .footer, .newsletter, .pagination,
	.search-panel, .related, .markets { display: none !important; }
	body { font-size: 11pt; color: #000; background: #fff; }
	.article__body { max-width: none; }
	.article__body a { text-decoration: underline; }
	/* A printed article should still show where the claim came from. */
	.article__body a::after { content: " (" attr(href) ")"; font-size: 9pt; }
	.source-box { border: 1px solid #000; }
}