/* ==========================================================================
   #folks — design tokens
   Clean white-page direction: a plain white page and card background, a
   bold purple primary accent for breaking/urgent and active states, and a
   stamped gold for section marks. Inter is used for every text role
   (display, body, and the mono-styled captions/datelines/nav) instead of
   the original Anton/Source Serif/IBM Plex Mono pairing — --font-mono
   keeps its name for compatibility with every existing var(--font-mono)
   reference, but its value is Inter like everything else now.
   ========================================================================== */

:root {
	/* Light "day edition" is the default mode: a clean white page.
	   These are also the literal fallback values — the Theme Appearance
	   Customizer panel (inc/theme-appearance.php) always emits its own
	   :root override after this stylesheet loads, so in practice its
	   defaults (kept in sync with these) are what actually renders;
	   these stay correct here too so the file is truthful on its own
	   and nothing regresses to the old parchment/crimson look if that
	   panel is ever removed or its output is unhooked. */
	--ink: #FFFFFF;
	--ink-soft: #F5F5F5;
	--paper: #FFFFFF;
	--paper-dim: #6E6555;
	--charcoal: #221F1B;
	--crimson: #800080;
	--crimson-dim: #5C005C;
	--gold: #8A6A1D;
	--line: rgba(34, 31, 27, 0.14);
	--line-on-paper: rgba(34, 31, 27, 0.14);
	--surface-tint: rgba(34, 31, 27, 0.05);

	--font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

	--container: 1280px;
	--radius: 2px;
}

/* Night mode is opt-in via the toggle in the masthead. --paper-dim and
   --gold get their own night-mode values because both are tuned as
   light-on-dark tones; reused as-is against the light page they'd fail
   contrast, so every text-role token is redefined here rather than just
   swapping the background. */
body.deadline-night {
	--ink: #121110;
	--ink-soft: #1c1a18;
	--paper: #E7E1D0;
	--paper-dim: #D5CCB4;
	--gold: #C79A2E;
	--line: rgba(231, 225, 208, 0.16);
	--surface-tint: rgba(231, 225, 208, 0.08);
}

* { box-sizing: border-box; }
/* Intentionally no global `html { scroll-behavior: smooth; }` here.
   A page-wide smooth-scroll turns any stray URL fragment (an old
   bookmark, a feed reader's tacked-on #comments, a share button's
   #more-anchor) into a slow, visible scroll animation on load instead
   of an instant jump — and if content above the fold is still
   reflowing (ads, images) while that animation runs, the page can
   stop partway down instead of reaching the top or the real target.
   Individual widgets that want smooth scrolling (the category slider
   below, the "back to top" button in theme.js) opt in locally instead. */

body {
	margin: 0;
	background: var(--ink);
	color: var(--charcoal);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

body.deadline-night { color: var(--paper); }

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }

/* Explicit, not inherited from the browser's default bold-heading
   behavior — a reset from any script (Tailwind Preflight or otherwise)
   can only ever match this, never silently override it after the fact.
   font-synthesis: none also stops the browser from faking a bolder
   weight during font loading, so the headline's weight never visibly
   shifts once type is on screen. */
h1, h2, h3, h4, h5, h6 { font-weight: 700; margin: 0; font-synthesis: none; }

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

@media (max-width: 400px) {
	.container { padding: 0 16px; }
}

/* Visually hidden but still available to screen readers/keyboard nav —
   the skip-link and several icon-button labels rely on this class but
   no rule previously defined it, so that text was rendering in full
   view instead of being hidden. Standard WordPress-core pattern. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var(--paper);
	border-radius: var(--radius);
	box-shadow: 0 0 4px rgba(0,0,0,0.4);
	clip: auto !important;
	clip-path: none;
	color: var(--charcoal);
	display: block;
	font-family: var(--font-mono);
	font-size: 13px;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 12px 16px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
}

/* Shared icon sizing: every icon button in the theme (nav tools,
   mobile tab bar, bookmark, search close) draws from inc/icons.php
   and inherits its color from the button, so hover/focus/night-mode
   states already handled by existing button rules apply automatically. */
.icon { display: block; flex: none; }

.eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
}

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

/* Headline entrance: a single fade + slight rise when a dramatic
   magazine headline first appears — not a loop, not a weight change.
   transform/opacity only (cheap to animate, no layout thrashing).
   Weight is locked by the h1–h6 rule above both before and after this
   runs, so the text never thickens or pulses at any point. */
@keyframes dn-headline-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.headline-entrance {
	animation: dn-headline-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-iteration-count: 1;
}

/* --------------------------------------------------------------------- *
 * Masthead
 * --------------------------------------------------------------------- */

.masthead {
	border-bottom: 3px solid var(--charcoal);
	padding: 18px 0 14px;
}
body.deadline-night .masthead { border-bottom-color: var(--paper); }

.masthead-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.masthead-brand {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(34px, 6vw, 64px);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: 0.9;
}

.masthead-brand a { color: var(--charcoal); }
body.deadline-night .masthead-brand a { color: var(--paper); }

.masthead-meta {
	font-family: var(--font-mono);
	font-size: 12px;
	text-align: right;
	color: var(--paper-dim);
	line-height: 1.6;
}

.masthead-meta .stamp {
	display: inline-block;
	border: 1.5px solid var(--crimson);
	color: var(--crimson);
	padding: 2px 8px;
	transform: rotate(-3deg);
	font-weight: 600;
	letter-spacing: 0.08em;
}

.primary-nav {
	margin-top: 14px;
	border-top: 1px solid var(--line);
	padding-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.primary-nav ul {
	list-style: none;
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.primary-nav a {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--paper-dim);
}

.primary-nav a:hover,
.primary-nav a:focus-visible { color: var(--crimson); }

.mobile-menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	width: 44px;
	height: 40px;
	padding: 0;
	cursor: pointer;
	position: relative;
	flex: 0 0 auto;
}

.mobile-menu-toggle-bars,
.mobile-menu-toggle-bars::before,
.mobile-menu-toggle-bars::after {
	content: '';
	position: absolute;
	left: 8px;
	right: 8px;
	height: 2px;
	background: var(--paper-dim);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-menu-toggle-bars { top: 19px; }
.mobile-menu-toggle-bars::before { top: -6px; }
.mobile-menu-toggle-bars::after { top: 6px; }

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle-bars { background: transparent; }
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle-bars::before { transform: translateY(6px) rotate(45deg); background: var(--crimson); }
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); background: var(--crimson); }

.primary-nav-collapse { flex: 1 1 auto; }

.nav-tools { display: flex; align-items: center; gap: 10px; }

.tool-btn {
	background: none;
	border: 1px solid var(--line);
	color: var(--paper-dim);
	cursor: pointer;
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
}

.tool-btn:hover,
.tool-btn:focus-visible { border-color: var(--crimson); color: var(--crimson); outline: none; }

/* Label text is kept for screen readers / tooltips only — the button
   itself is icon-only, which is what keeps the masthead compact at
   every viewport width instead of just on mobile. */
.tool-btn-label {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* Day/Night toggle: two icons ship in the button, CSS shows only the
   one that represents the action a click will perform — "moon" (go
   to night) while in day mode, "sun" (go back to day) once night
   mode is active — so the icon itself never contradicts the toggle. */
[data-theme-toggle] .icon-sun { display: none; }
body.deadline-night [data-theme-toggle] .icon-sun { display: block; }
body.deadline-night [data-theme-toggle] .icon-moon { display: none; }

/* --------------------------------------------------------------------- *
 * Breaking ticker — styled like a wire-service tape
 * --------------------------------------------------------------------- */

.wire-ticker {
	background: var(--crimson);
	color: #fff;
	overflow: hidden;
	position: relative;
	border-bottom: 1px solid var(--crimson-dim);
}

.wire-ticker-inner {
	display: flex;
	align-items: center;
	gap: 0;
}

.wire-ticker-label {
	flex: 0 0 auto;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--ink);
	color: var(--crimson);
	padding: 8px 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.wire-ticker-label .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--crimson);
}

.wire-ticker-track {
	overflow: hidden;
	flex: 1 1 auto;
	white-space: nowrap;
}

.wire-ticker-list {
	display: inline-flex;
	width: max-content;
}

.wire-ticker-group {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.wire-ticker-list a {
	font-family: var(--font-mono);
	font-size: 13px;
	padding: 8px 28px;
	display: inline-block;
	border-right: 1px solid rgba(255,255,255,0.3);
}

/* Seamless auto-scroll: .wire-ticker-list holds two identical groups
   side by side (the second is aria-hidden, purely visual) and slides
   left by exactly one group-width, so the instant it snaps back to 0%
   the two groups are pixel-identical — no visible jump, gap, or flash.
   translate3d (not translateX) plus will-change promotes this to its
   own GPU compositor layer, so the animation runs off the main thread
   and doesn't trigger layout/paint on every frame. */
@media (prefers-reduced-motion: no-preference) {
	.wire-ticker-list {
		animation: dn-ticker-scroll var(--ticker-speed, 38s) linear infinite;
		will-change: transform;
	}

	.wire-ticker:hover .wire-ticker-list,
	.wire-ticker:focus-within .wire-ticker-list {
		animation-play-state: paused;
	}
}

@keyframes dn-ticker-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* No animation for reduced-motion visitors — the ticker becomes a
   plain, manually-scrollable strip instead, and the purely-decorative
   duplicate group is dropped entirely since it serves no purpose
   without the animation. */
@media (prefers-reduced-motion: reduce) {
	.wire-ticker-track {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.wire-ticker-track::-webkit-scrollbar { display: none; }
	.wire-ticker-group[aria-hidden="true"] { display: none; }
}

/* --------------------------------------------------------------------- *
 * Hero
 * --------------------------------------------------------------------- */

.hero {
	position: relative;
	margin-top: 28px;
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 2px;
	background: var(--line);
}

.hero-lead {
	position: relative;
	min-height: 480px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
}

.hero-lead::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18,17,16,0) 35%, rgba(18,17,16,0.92) 100%);
}

.hero-lead-content {
	position: relative;
	z-index: 1;
	padding: 32px;
	color: #fff;
}

.hero-lead .eyebrow { color: var(--crimson); background: var(--ink); display: inline-block; padding: 3px 8px; margin-bottom: 12px; }

.hero-lead h1 {
	font-family: var(--font-display);
	font-size: clamp(30px, 4vw, 52px);
	text-transform: uppercase;
	line-height: 0.98;
	margin: 0 0 12px;
}

.hero-lead p {
	max-width: 60ch;
	font-size: 16px;
	color: rgba(255,255,255,0.85);
	margin: 0 0 14px;
}

.hero-lead .byline {
	font-family: var(--font-mono);
	font-size: 12px;
	color: rgba(255,255,255,0.65);
}

.hero-side {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hero-side-item {
	position: relative;
	flex: 1;
	min-height: 156px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
}

.hero-side-item::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18,17,16,0) 40%, rgba(18,17,16,0.9) 100%);
}

.hero-side-item-content { position: relative; z-index: 1; padding: 16px; color: #fff; }

.hero-side-item h3 {
	font-family: var(--font-display);
	font-size: 19px;
	text-transform: uppercase;
	line-height: 1.05;
	margin: 4px 0 0;
}

/* --------------------------------------------------------------------- *
 * Section headers with press-stamp category marks
 * --------------------------------------------------------------------- */

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 48px 0 18px;
	border-bottom: 2px solid var(--charcoal);
	padding-bottom: 10px;
}

body.deadline-night .section-head { border-bottom-color: var(--paper); }

.section-head h2 {
	font-family: var(--font-display);
	font-size: clamp(24px, 3vw, 36px);
	text-transform: uppercase;
	margin: 0;
}

/* --------------------------------------------------------------------- *
 * Category navigation slider
 * --------------------------------------------------------------------- */

.category-slider-wrap {
	position: sticky;
	top: 0;
	z-index: 40;
	/* stays flush under the WP admin bar (32px desktop, 46px on the
	   admin bar's own <783px breakpoint) instead of sliding under it
	   when logged-in editors scroll on mobile. */
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 20px 0 28px;
	padding: 10px 0;
	background: var(--ink);
	transition: box-shadow 0.2s ease, background 0.2s ease;
}

.category-slider-wrap.is-stuck {
	box-shadow: 0 6px 16px -8px rgba(0,0,0,0.35);
	padding-left: 4px;
	padding-right: 4px;
}

.category-slider-arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--ink-soft);
	color: var(--paper-dim);
	cursor: pointer;
}

.category-slider-arrow:hover,
.category-slider-arrow:focus-visible { border-color: var(--crimson); color: var(--crimson); }

.category-slider-arrow[hidden] { visibility: hidden; }

.category-slider {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	flex: 1 1 auto;
	/* Fades the edges to hint there's more to scroll, without a hard cut. */
	mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.category-slider::-webkit-scrollbar { display: none; }

.category-pill {
	flex: 0 0 auto;
	scroll-snap-align: start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var(--ink-soft);
	border: 1px solid var(--line);
	color: var(--paper-dim);
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.category-pill:hover,
.category-pill:focus-visible {
	border-color: var(--crimson);
	color: var(--crimson);
}

.category-pill.active {
	background: var(--crimson);
	border-color: var(--crimson);
	color: #fff;
}

.category-pill-count {
	font-size: 10px;
	opacity: 0.6;
}

.category-pill.active .category-pill-count { opacity: 0.85; }

.category-pill--view-all {
	color: var(--gold);
	border-color: var(--gold);
	background: none;
}

.category-pill--view-all:hover { background: var(--gold); color: var(--ink); }

/* --------------------------------------------------------------------- *
 * Story grid + cards
 * --------------------------------------------------------------------- */

.story-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
}

.story-card {
	background: var(--paper);
	color: var(--charcoal);
	display: flex;
	flex-direction: column;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--line-on-paper);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.story-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px -14px rgba(0,0,0,0.35);
}

.story-card-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--paper-dim);
}

.story-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.story-card:hover .story-card-media img { transform: scale(1.05); }

.story-card-cat {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--crimson);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 4px 8px;
}

.story-card-body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.story-card-body h3 {
	font-family: var(--font-display);
	font-size: 21px;
	line-height: 1.08;
	text-transform: uppercase;
	margin: 0;
}

.story-card-body h3 a:hover { color: var(--crimson); }

.story-card-dek {
	font-size: 14.5px;
	color: rgba(34,31,27,0.75);
	margin: 0;
	flex: 1;
}

.story-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: 11px;
	color: rgba(34,31,27,0.6);
	border-top: 1px solid var(--line-on-paper);
	padding-top: 10px;
}

.story-card-meta .source { text-transform: uppercase; letter-spacing: 0.04em; }

.bookmark-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: rgba(34,31,27,0.5);
	line-height: 1;
	padding: 8px;
	margin: -8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bookmark-btn .icon-star-filled { display: none; }
.bookmark-btn.active { color: var(--crimson); }
.bookmark-btn.active .icon-star-outline { display: none; }
.bookmark-btn.active .icon-star-filled { display: block; }

/* In-feed ad card */
.ad-card {
	background: var(--ink-soft);
	color: var(--paper-dim);
	border: 1px dashed var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 220px;
	font-family: var(--font-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------- *
 * Load more / infinite scroll
 * --------------------------------------------------------------------- */

.load-more-wrap { text-align: center; margin: 40px 0; }

.load-more-btn {
	font-family: var(--font-mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: var(--crimson);
	color: #fff;
	border: none;
	padding: 12px 28px;
	cursor: pointer;
	border-radius: var(--radius);
}

.load-more-btn:hover { background: var(--crimson-dim); }
.load-more-btn[disabled] { opacity: 0.5; cursor: default; }

/* --------------------------------------------------------------------- *
 * Live search
 * --------------------------------------------------------------------- */

.search-panel {
	position: fixed;
	inset: 0;
	background: rgba(18,17,16,0.92);
	z-index: 60;
	display: none;
	padding: 80px 20px;
}

.search-panel.open { display: block; }

.search-panel-inner { max-width: 720px; margin: 0 auto; }

.search-panel input {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 3px solid var(--crimson);
	font-family: var(--font-display);
	font-size: clamp(24px, 4vw, 40px);
	color: var(--paper);
	padding: 10px 0;
	text-transform: uppercase;
}

.search-panel input:focus { outline: none; }

.search-panel-close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none;
	border: none;
	color: var(--paper);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}

@media (min-width: 641px) {
	.search-panel-close { top: 24px; right: 24px; }
}

@media (max-height: 480px) {
	.search-panel { padding-top: 20px; }
}

.search-results-list { list-style: none; margin: 24px 0 0; padding: 0; }

.search-results-list li a {
	display: flex;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	color: var(--paper);
}

.sr-cat { font-family: var(--font-mono); font-size: 11px; color: var(--gold); text-transform: uppercase; flex: 0 0 90px; }
.search-empty { color: var(--paper-dim); font-family: var(--font-mono); font-size: 13px; }

/* --------------------------------------------------------------------- *
 * Sidebar
 * --------------------------------------------------------------------- */

.content-layout {
	display: grid;
	grid-template-columns: 2.4fr 1fr;
	gap: 40px;
	align-items: start;
}

.sidebar { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 28px; }

.widget { background: var(--ink-soft); padding: 20px; border-radius: var(--radius); }
.widget-title {
	font-family: var(--font-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--gold);
	margin: 0 0 14px;
}

.ad-slot { background: var(--ink-soft); border: 1px dashed var(--line); min-height: 250px; display: flex; align-items: center; justify-content: center; }

/* --------------------------------------------------------------------- *
 * Single article
 * --------------------------------------------------------------------- */

.article-head { max-width: 780px; margin: 40px auto 0; }
.article-head .eyebrow { margin-bottom: 10px; display: block; }
.article-head h1 {
	font-family: var(--font-display);
	font-size: clamp(32px, 5vw, 56px);
	text-transform: uppercase;
	line-height: 1.0;
	margin: 0 0 16px;
}

.article-byline {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--paper-dim);
	display: flex;
	gap: 18px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 12px 0;
	margin-bottom: 28px;
}

.article-hero-image { max-width: 980px; margin: 0 auto 32px; }
.article-hero-image img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }

.article-body { max-width: 720px; margin: 0 auto; font-size: 19px; line-height: 1.7; overflow: hidden; }
.article-body p { margin: 0 0 22px; }
.article-body h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 28px; margin: 40px 0 16px; }

/* Embedded content (tables, code blocks, iframes/embeds) can be wider
   than the reading column on any viewport; scope the scroll to the
   element itself instead of letting it push the whole page sideways. */
.article-body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
}

.article-body pre {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.article-body iframe,
.article-body embed,
.article-body video {
	max-width: 100%;
}

.article-body .wp-block-embed__wrapper {
	overflow-x: auto;
}

/* ==========================================================================
   RSS-imported content hardening
   #folks is built to display feed-imported posts (see readme.txt), and
   aggregator plugins frequently drop in unstyled tables, source-site
   "Show Comments" buttons, share-icon rows, and a trailing author-bio
   image + name + role with no wrapping element. These rules make that
   content match the theme instead of relying on ad-hoc Additional-CSS
   patches per site. Uses the theme's own tokens (--crimson, --radius,
   --line, --surface-tint) so it stays correct in night mode automatically.
   ========================================================================== */

/* Bare imported tables often carry no styling of their own. */
.article-body table {
	border: 1px solid var(--line-on-paper);
}

.article-body table th,
.article-body table td {
	padding: 10px 14px;
	border: 1px solid var(--line-on-paper);
}

/* Some source sites' interactive elements (e.g. a "Show Comments"
   toggle from the original article) get scraped in as inert markup
   with no working handler — hide them rather than show a dead button. */
.article-body > button {
	display: none;
}

/* Share/like icon rows some feeds embed inline. */
.article-body .shared-counts-wrap,
.article-body .share-wrap,
.article-body .like-share-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 20px 0;
}

.article-body .share-wrap a,
.article-body [class*="share"] a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--surface-tint);
	color: var(--charcoal);
	text-decoration: none;
}

/* Embedded contact/subscribe forms (CF7, Gravity Forms, WPForms) pick
   up the theme's own crimson instead of a plugin default color. */
.article-body form button,
.article-body form input[type="submit"],
.article-body form input[type="button"],
.article-body .wpcf7-submit,
.article-body .gform_button,
.article-body .wpforms-submit {
	background-color: var(--crimson);
	color: #fff;
	border: 2px solid transparent;
	border-radius: var(--radius);
	padding: 12px 28px;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 200ms ease, transform 200ms ease;
}

.article-body form button:hover,
.article-body form input[type="submit"]:hover,
.article-body form input[type="button"]:hover,
.article-body .wpcf7-submit:hover,
.article-body .gform_button:hover,
.article-body .wpforms-submit:hover {
	background-color: var(--crimson-dim);
	transform: scale(1.02);
}

.article-body form button:focus-visible,
.article-body form input[type="submit"]:focus-visible,
.article-body .wpcf7-submit:focus-visible,
.article-body .gform_button:focus-visible,
.article-body .wpforms-submit:focus-visible {
	outline: 2px solid var(--crimson-dim);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.article-body form button,
	.article-body form input[type="submit"],
	.article-body .wpcf7-submit,
	.article-body .gform_button,
	.article-body .wpforms-submit {
		width: 100%;
	}
}

/* Preferred markup for an imported author bio — pair this with a
   Folks Feed Importer update that wraps the scraped avatar/name/role
   in this structure instead of bare <img>/<p> tags:
     <div class="hf-author-profile">
       <img src="..." alt="">
       <div class="hf-author-info">
         <p class="hf-author-name">Name</p>
         <p class="hf-author-role">Role</p>
       </div>
     </div>
*/
.hf-author-profile {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 25px 0;
	padding: 12px 14px;
	background: var(--surface-tint);
	border: 1px solid var(--line-on-paper);
	border-radius: var(--radius);
	clear: both;
}

.hf-author-profile img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.hf-author-profile .hf-author-info {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.hf-author-profile .hf-author-name {
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 700;
	color: var(--charcoal);
	margin: 0;
}

.hf-author-profile .hf-author-role {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 400;
	color: var(--paper-dim);
	margin: 2px 0 0 0;
}

/* Fallback for feeds where the importer hasn't been updated yet and the
   bio still lands as a bare trailing image + two paragraphs: float only
   the last image (never every image — a fixed-size rule on all images
   would shrink real article photos too) and let the following two
   paragraphs wrap beside it. overflow:hidden on .article-body already
   clears the float, so nothing below is pulled out of place. */
.article-body > img:last-of-type {
	float: left;
	width: 56px;
	height: 56px;
	max-width: 56px;
	object-fit: cover;
	border-radius: 50%;
	margin: 20px 12px 4px 0;
}

.article-body > img:last-of-type + br {
	display: none;
}

.article-body > img:last-of-type + p {
	margin: 20px 0 0;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 700;
	color: var(--charcoal);
	line-height: 1.3;
}

.article-body > img:last-of-type + p + p {
	margin: 2px 0 0;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--paper-dim);
	line-height: 1.3;
}

.article-body blockquote {
	border-left: 3px solid var(--crimson);
	padding-left: 20px;
	font-style: italic;
	color: var(--paper-dim);
	margin: 28px 0;
}

.original-source-note {
	max-width: 720px;
	margin: 32px auto 0;
	padding: 16px 20px;
	background: var(--ink-soft);
	font-family: var(--font-mono);
	font-size: 13px;
	border-radius: var(--radius);
}

.original-source-note a { color: var(--gold); text-decoration: underline; }

/* --------------------------------------------------------------------- *
 * Footer
 * --------------------------------------------------------------------- */

.site-footer {
	margin-top: 72px;
	border-top: 3px solid var(--charcoal);
	padding: 40px 0 24px;
}

body.deadline-night .site-footer { border-top-color: var(--paper); }

.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; margin-bottom: 32px; }

.footer-bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--paper-dim);
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------- *
 * All Categories page
 * --------------------------------------------------------------------- */

.all-categories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin: 32px 0 60px;
}

.all-categories-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--ink-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 20px;
	color: var(--paper);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

body.deadline-night .all-categories-card { color: var(--paper); }

.all-categories-card:hover {
	border-color: var(--crimson);
	transform: translateY(-2px);
}

.all-categories-name {
	font-family: var(--font-display);
	font-size: 17px;
	text-transform: uppercase;
}

.all-categories-count {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--paper-dim);
	white-space: nowrap;
}

/* --------------------------------------------------------------------- *
 * Responsive
 * --------------------------------------------------------------------- */

/* Tablet and down: the reading column stacks over the sidebar, and the
   hero drops to a single column with the side stories becoming a
   horizontally-scrollable row underneath the lead story. */
@media (max-width: 900px) {
	.content-layout { grid-template-columns: 1fr; }
	.sidebar { position: static; }
	.hero { grid-template-columns: 1fr; }
	.hero-side { flex-direction: row; overflow-x: auto; }
	.hero-side-item { min-width: 220px; }
	.hero-lead { min-height: 380px; }
}

/* Tablet-and-below nav: a full horizontal menu (arbitrary length,
   editor-controlled via wp_nav_menu) plus the two nav-tool icons
   reliably runs out of room well before phone widths — an iPad-portrait
   or Android-tablet viewport (roughly 700–1024px) wraps to a cramped
   second row rather than fitting on one line. Collapsing to the
   hamburger here (not just under 640px) keeps the masthead a single,
   predictable row at every tablet size. theme.js's resize listener
   uses the same 1024px threshold so the two stay in sync. */
@media (max-width: 1024px) {
	.primary-nav { flex-wrap: nowrap; }
	.mobile-menu-toggle { display: block; order: 1; }
	.primary-nav-collapse { order: 3; flex-basis: 100%; }
	.nav-tools { order: 2; margin-left: auto; }

	.primary-nav-collapse {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.25s ease;
	}

	.primary-nav-collapse.is-open { max-height: 400px; }

	.primary-nav-collapse ul {
		flex-direction: column;
		gap: 0;
		padding-top: 10px;
	}

	.primary-nav-collapse li {
		border-top: 1px solid var(--line);
	}

	.primary-nav-collapse a {
		display: block;
		padding: 12px 4px;
	}
}

/* Any touch device (phone or tablet, portrait or landscape) gets
   comfortably-sized tap targets, independent of viewport width — a
   768px+ tablet is touch-first too, and a mouse/trackpad user at a
   narrow browser window shouldn't get targets sized for fingers. */
@media (hover: none) and (pointer: coarse) {
	.category-slider-arrow { width: 44px; height: 44px; }
	.category-pill { padding: 10px 16px; }
	.tool-btn { width: 44px; height: 44px; }
	.mobile-menu-toggle { width: 48px; height: 44px; }
	.bookmark-btn { padding: 12px; margin: -12px; }
	.search-panel-close { width: 48px; height: 48px; }
}

/* Story-card meta row: a long source-site name (feeds import from
   sites of every name length) shouldn't force the row wider than the
   card or crowd out the bookmark button — truncate it instead. */
.story-card-meta .source {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.story-card-meta { gap: 10px; }
.story-card-meta .bookmark-btn { flex: 0 0 auto; }

/* Article byline: same long-source-name concern, but here it sits
   next to a date and the bookmark button with no wrap — on a narrow
   phone that combination can overflow instead of reflowing. */
.article-byline { flex-wrap: wrap; row-gap: 6px; }
.article-byline > span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

@media (max-width: 640px) {
	.masthead-row { flex-direction: column; align-items: flex-start; gap: 8px; }
	.masthead-meta { text-align: left; }
	.story-grid { grid-template-columns: 1fr; }

	.wire-ticker-label { padding: 8px 10px; font-size: 11px; gap: 6px; }
	.wire-ticker-label-text { display: none; } /* keep the dot, drop "On the wire" text — the badge was crowding out the scrollable headlines on narrow screens */
	.wire-ticker-list a { padding: 8px 18px; font-size: 12px; }

	.category-slider-wrap { gap: 4px; margin: 14px 0 20px; }
	.category-pill { font-size: 11px; }
	.all-categories-grid { grid-template-columns: 1fr; }

	.hero-lead { min-height: 340px; }
	.hero-lead-content { padding: 20px; }
	.hero-side-item { min-height: 130px; min-width: 180px; }

	.article-head h1 { font-size: clamp(26px, 7vw, 40px); }
	.article-body { font-size: 17px; }
	.article-hero-image { margin: 0 auto 24px; }

	.search-panel { padding: 64px 16px 20px; }
	.search-panel-inner { max-width: 100%; }
}

/* Sticky bottom nav for mobile. Padding-bottom adds the iOS safe-area
   inset (home-indicator area on notched phones) on top of the bar's
   own padding, so icons never sit underneath the gesture bar. */
.mobile-tab-bar {
	display: none;
	position: fixed;
	bottom: 0; left: 0; right: 0;
	background: var(--ink);
	border-top: 1px solid var(--line);
	z-index: 50;
	padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 640px) {
	.mobile-tab-bar { display: flex; justify-content: space-around; }
	body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

.mobile-tab-bar button,
.mobile-tab-bar a {
	background: none;
	border: none;
	color: var(--paper-dim);
	font-family: var(--font-mono);
	font-size: 10px;
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	cursor: pointer;
	min-width: 56px;
	min-height: 44px;
	padding: 4px 8px;
}

.mobile-tab-bar button.active,
.mobile-tab-bar button:hover,
.mobile-tab-bar a:hover { color: var(--crimson); }

/* Logged-in admin bar: WordPress adds a fixed-position bar (32px tall
   on desktop, 46px on its own <783px breakpoint) that would otherwise
   sit on top of the sticky category slider once scrolled. */
body.admin-bar .category-slider-wrap { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .category-slider-wrap { top: 46px; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 2px solid var(--crimson);
	outline-offset: 2px;
}