/*
Theme Name: Apoliticalbeing
Theme URI: https://apoliticalbeing.com/
Author: Apoliticalbeing
Description: Geo-intelligence editorial theme — news, magazine & analysis. Raw facts, filtered noise.
Version: 1.17.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: apoliticalbeing
*/

/* ============================================================
   Design tokens — rebrand here
   ============================================================ */
:root {
	--paper: #f2f3f1;          /* cool paper */
	--paper-2: #e8eae6;        /* deeper cool */
	--ink: #0f1317;            /* near-black charcoal */
	--ink-2: #0a0d10;          /* deepest */
	--muted: #5c6469;          /* steel gray */
	--muted-2: #8b9297;
	--accent: #0f8a52;         /* signal green — on light */
	--accent-bright: #37d67c;  /* signal green — on dark */
	--accent-glow: rgba(15, 138, 82, 0.16);
	--band: #141c24;           /* dark slate band */
	--line: #d8dcd6;
	--line-dark: rgba(255, 255, 255, 0.14);
	--card: #fbfcfb;
	/* Every script the language switcher can reach. Latin families come first so
	   English is unchanged; an Indic codepoint falls through to its Noto face. */
	--font-indic: 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Gujarati', 'Noto Sans Gurmukhi', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Arabic';
	--font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif, var(--font-indic);
	--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace, var(--font-indic);
	--font-body: 'Newsreader', Georgia, 'Times New Roman', serif, var(--font-indic);
	--radius: 3px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--maxw: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17.5px;
	line-height: 1.7;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--accent); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

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

/* ============================================================
   Reading progress + topbar
   ============================================================ */
.progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--accent-bright);
	transform-origin: left;
	transform: scaleX(0);
	z-index: 200;
	pointer-events: none;
}

.topbar { background: var(--ink); color: rgba(255, 255, 255, 0.7); }
.topbar-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-top: 11px;
	padding-bottom: 11px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
}
.topbar-date { text-transform: uppercase; font-weight: 500; color: rgba(255, 255, 255, 0.55); }
.topbar-signal { display: inline-flex; align-items: center; font-weight: 500; }

.topbar-left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.topbar-right { display: flex; align-items: center; }
.topbar-lang {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
	padding-left: 16px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: default;
}
.lang-code { color: var(--accent-bright); font-weight: 600; }
.lang-note { color: rgba(255, 255, 255, 0.45); font-size: 10px; letter-spacing: 0.1em; }

/* Regional-language switcher. The panel reuses the dark dropdown language of
   the nav door submenus (.submenu) so the two read as one control family. */
.lang-switch {
	position: relative;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
	padding-left: 16px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.lang-toggle {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	padding: 2px 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}
.lang-toggle:hover .lang-code { color: #fff; }
.lang-caret {
	font-size: 9px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.45);
	transition: transform 0.2s var(--ease);
}
.lang-switch.is-open .lang-caret { transform: rotate(180deg); }

.lang-menu {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	width: 260px;
	max-height: 70vh;
	overflow-y: auto;
	padding: 12px 0 14px;
	background: var(--ink-2);
	border-top: 2px solid var(--accent-bright);
	box-shadow: 0 18px 44px rgba(10, 13, 16, 0.22);
	z-index: 106;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
	text-transform: none;
	letter-spacing: normal;
}
.lang-switch.is-open .lang-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.lang-menu-head {
	margin: 0;
	padding: 6px 18px 10px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent-bright);
}
.lang-menu-head--pending {
	margin-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 14px;
	color: rgba(255, 255, 255, 0.4);
}
.lang-list { margin: 0; padding: 0; list-style: none; }
.lang-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 18px;
}
.lang-item a,
.lang-item .lang-original {
	font-family: var(--font-body);
	font-size: 16px;
	color: rgba(255, 255, 255, 0.88);
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
/* The English row is a button, not a link: it restores the page as published
   rather than asking the engine for a translation. The control box is reset so
   it reads exactly like the anchors beside it. */
.lang-item .lang-original {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	cursor: pointer;
	text-align: left;
}
.lang-item a:hover,
.lang-item .lang-original:hover { color: var(--accent-bright); border-bottom-color: var(--accent-bright); }
.lang-item a.gt-current-lang,
.lang-item .lang-original.is-current { color: var(--accent-bright); font-weight: 600; }
.lang-en {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.35);
}
/* Languages the engine cannot serve yet. Listed, not hidden — the gap should
   be visible rather than silently absent. */
.lang-item--pending { cursor: not-allowed; }
.lang-pending {
	font-family: var(--font-body);
	font-size: 16px;
	color: rgba(255, 255, 255, 0.3);
	text-decoration: line-through;
	text-decoration-color: rgba(255, 255, 255, 0.2);
}

.signal-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent-bright);
	margin-right: 10px;
	box-shadow: 0 0 0 0 rgba(55, 214, 124, 0.5);
	animation: pulse 2.4s infinite;
}
@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(55, 214, 124, 0.45); }
	70% { box-shadow: 0 0 0 9px rgba(55, 214, 124, 0); }
	100% { box-shadow: 0 0 0 0 rgba(55, 214, 124, 0); }
}

/* ============================================================
   Masthead
   ============================================================ */
.site-header { background: var(--paper); }

.masthead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: 42px 0 28px;
	border-bottom: 1px solid var(--line);
}

.site-title {
	font-family: var(--font-display);
	font-size: clamp(38px, 6vw, 60px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 0.95;
	color: var(--ink);
}
.site-title:hover { color: var(--accent); }

.site-logo { display: inline-block; }

.site-tagline {
	margin: 14px 0 0;
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--muted);
}

.masthead-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	padding-bottom: 6px;
}
.vol {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
}
.vol-label {
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted-2);
}

/* ============================================================
   Topic ticker (marquee)
   ============================================================ */
.ticker {
	overflow: hidden;
	border-bottom: 1px solid var(--line);
	background: var(--paper-2);
}
.ticker-track {
	display: flex;
	align-items: center;
	width: max-content;
	padding: 12px 0;
	animation: ticker 38s linear infinite;
}
.ticker-item {
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}
.ticker-sep { color: var(--accent); font-size: 10px; margin: 0 22px; }

@keyframes ticker {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ============================================================
   Main navigation (sticky)
   ============================================================ */
.main-navigation {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(242, 243, 241, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	transition: box-shadow 0.3s ease;
}
.main-navigation.is-scrolled { box-shadow: 0 6px 24px rgba(10, 13, 16, 0.1); }

.nav-inner {
	display: flex;
	align-items: center;
}
.main-navigation .menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

/* Top-level text controls: beats, door buttons, About. */
.main-navigation .nav-link,
.main-navigation .door-toggle {
	position: relative;
	display: inline-block;
	padding: 17px 14px;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
	background: none;
	border: 0;
	cursor: pointer;
	line-height: 1.1;
}

/* Active underline — top-level text controls only. */
.main-navigation .nav-link::after,
.main-navigation .door-toggle::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 10px;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.28s var(--ease);
}
.main-navigation .nav-link:hover,
.main-navigation .nav-link.is-current,
.main-navigation .nav-link[aria-current="page"],
.main-navigation .door-toggle:hover,
.main-navigation .menu-item--door.is-current > .door-toggle { color: var(--accent); }
.main-navigation .nav-link:hover::after,
.main-navigation .nav-link.is-current::after,
.main-navigation .nav-link[aria-current="page"]::after,
.main-navigation .door-toggle:hover::after,
.main-navigation .menu-item--door.is-current > .door-toggle::after,
.main-navigation .menu-item--door.is-open > .door-toggle::after { transform: scaleX(1); }

/* Doors (Dossier / Archive) */
.menu-item--door { position: relative; }
.door-caret {
	display: inline-block;
	margin-left: 7px;
	font-size: 10px;
	transition: transform 0.2s var(--ease);
}
.menu-item--door.is-open .door-caret { transform: rotate(180deg); }

.submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 290px;
	margin: 0;
	padding: 4px 0 12px;
	list-style: none;
	background: var(--ink-2);
	border-top: 2px solid var(--accent-bright);
	box-shadow: 0 18px 44px rgba(10, 13, 16, 0.22);
	z-index: 105;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.menu-item--door.is-open > .submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}
/* Hover / keyboard focus open the door on fine-pointer devices only —
   touch relies on click state (`.is-open`) so taps can close reliably. */
@media (hover: hover) {
	.menu-item--door:hover > .submenu,
	.menu-item--door:focus-within > .submenu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.menu-item--door:hover > .door-toggle .door-caret { transform: rotate(180deg); }
}
.submenu-head {
	padding: 12px 22px 6px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--accent-bright);
}
.submenu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 22px;
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-left: 2px solid transparent;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.submenu a:hover,
.submenu a[aria-current="page"] {
	color: #fff;
	background: rgba(255, 255, 255, 0.04);
	border-left-color: var(--accent-bright);
}
.sub-arrow {
	color: var(--accent-bright);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.submenu a:hover .sub-arrow { opacity: 1; transform: none; }

/* Right-hand actions: search, About, Subscribe */
.nav-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 2px;
	padding-left: 8px;
}
.nav-actions .nav-link { padding: 17px 12px; }
.nav-actions .nav-link::after { left: 12px; right: 12px; }
.nav-search-toggle {
	display: inline-flex;
	align-items: center;
	padding: 17px 12px;
	background: none;
	border: 0;
	color: var(--ink);
	cursor: pointer;
	transition: color 0.2s ease;
}
.nav-search-toggle:hover { color: var(--accent); }
.nav-search-icon { display: block; }

.btn-subscribe {
	margin-left: 8px;
	padding: 10px 18px;
	background: var(--ink);
	color: var(--paper);
	font: 600 11px/1 var(--font-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: var(--radius);
	transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn-subscribe:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }

/* Search strip (opens under the bar) */
.nav-search {
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	background: var(--paper-2);
	border-bottom: 1px solid var(--line);
	transition: opacity 0.2s var(--ease), max-height 0.3s var(--ease), visibility 0.3s;
}
.nav-search.is-open { max-height: 160px; opacity: 1; visibility: visible; }
.nav-search .container { display: flex; justify-content: flex-end; padding-top: 12px; padding-bottom: 12px; }
.nav-search .search-form { margin: 0; display: flex; width: 100%; max-width: 560px; align-items: stretch; }
.nav-search .search-field {
	flex: 1;
	min-width: 0;
	padding: 8px 4px;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	font: 14px var(--font-mono);
	color: var(--ink);
	outline: none;
}
.nav-search .search-field:focus { border-bottom-color: var(--accent); }
.nav-search .search-submit {
	padding: 0 2px 0 18px;
	border: 0;
	background: transparent;
	color: var(--accent);
	font: 600 11px var(--font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}
.nav-search .search-submit:hover { color: var(--ink); }

/* Mobile drawer trigger — hidden on desktop */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 17px 6px 17px 0; }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--ink);
	transition: background 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

/* Drawer is desktop-hidden; layout rules live in the ≤760 block below. */
.nav-drawer { display: none; }
html.nav-open,
html.nav-open body { overflow: hidden; }

/* Screen-reader-only text (for menu buttons etc.) */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   Kickers, meta, arrows
   ============================================================ */
.card-kicker {
	display: block;
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 10px;
}
.card-kicker a { color: var(--accent); }

.card-meta {
	display: block;
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.arrow { display: inline-block; transition: transform 0.28s var(--ease); }
a:hover > .arrow { transform: translateX(5px); }

/* ============================================================
   Hero (magazine cover)
   ============================================================ */
.hero {
	position: relative;
	padding: 68px 0 76px;
	background-image: radial-gradient(rgba(15, 138, 82, 0.08) 1px, transparent 1.4px);
	background-size: 26px 26px;
}
.hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 30%, var(--ink) 30%, var(--ink) 100%);
}

.hero-grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 64px;
	align-items: center;
}

.hero-copy > * { opacity: 0; animation: rise 0.85s var(--ease) forwards; }
.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.14s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.22s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.3s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.38s; }

.hero-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
}
.kicker-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	flex-shrink: 0;
	box-shadow: 0 0 0 4px var(--accent-glow);
}
.kicker-line { flex: 1; height: 1px; background: var(--line); max-width: 90px; }

.hero-title {
	font-family: var(--font-display);
	font-size: clamp(40px, 6vw, 74px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.03;
	margin: 26px 0 20px;
}
.hero-title a { color: var(--ink); }
.hero-title a:hover { color: var(--accent); }

.hero-lede {
	font-size: 20px;
	line-height: 1.6;
	color: var(--muted);
	max-width: 560px;
	margin: 0 0 26px;
}

.hero-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}
.hero-dot { color: var(--accent); font-weight: 600; }

.hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 36px;
	padding: 14px 28px;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background 0.28s var(--ease), transform 0.28s var(--ease);
}
.hero-cta:hover {
	background: var(--accent);
	color: #fff;
	transform: translateY(-2px);
}
.cta-arrow { font-size: 14px; transition: transform 0.28s var(--ease); }
.hero-cta:hover .cta-arrow { transform: translateX(4px); }

.hero-media { opacity: 0; animation: rise 1s 0.4s var(--ease) forwards; }

.hero-figure {
	position: relative;
	margin: 0;
	border: 1px solid var(--line);
	background: var(--card);
	box-shadow: 0 24px 60px rgba(10, 13, 16, 0.16);
}
.hero-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Corner-bracket "targeting frame". Geometry lives in --brk / --brk-off so the
   large hero figure and the small About-page portraits share one definition —
   a fixed 24px bracket is 4% of the hero but 10% of a 260px portrait. */
.hero-figure,
.portrait { --brk: 24px; --brk-off: -9px; }

.hero-figure::before,
.hero-figure::after,
.portrait::before,
.portrait::after {
	content: '';
	position: absolute;
	width: var(--brk);
	height: var(--brk);
	border: 2px solid var(--accent);
	z-index: 1;
}
.hero-figure::before, .portrait::before { top: var(--brk-off); left: var(--brk-off); border-right: none; border-bottom: none; }
.hero-figure::after, .portrait::after { bottom: var(--brk-off); right: var(--brk-off); border-left: none; border-top: none; }

.hero-figure figcaption {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	border-top: 1px solid var(--line);
}
.hero-figure figcaption a { color: var(--accent); }
.hero-figure .fig-date { color: var(--muted-2); }

.hero-figure--empty {
	aspect-ratio: 4 / 5;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	font-family: var(--font-mono);
	font-style: normal;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	background: linear-gradient(135deg, var(--paper-2), var(--paper));
}

@keyframes rise {
	from { opacity: 0; transform: translateY(26px); }
	to { opacity: 1; transform: none; }
}

/* ============================================================
   Section headers
   ============================================================ */
.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	border-top: 1px solid var(--line);
	padding-top: 22px;
	margin: 72px 0 30px;
}

.section-title {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}
.section-num {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--accent);
	margin-right: 16px;
	vertical-align: 0.14em;
}
.section-num::before {
	content: '//';
	margin-right: 10px;
	color: var(--muted-2);
}
.section-more {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.section-more:hover { color: var(--accent); }

/* ============================================================
   Cards
   ============================================================ */
.card-media { display: block; overflow: hidden; }
.card-media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.7s var(--ease);
}
a:hover > .card-media img { transform: scale(1.05); }

.card-body { padding: 20px 24px 24px; }
.card-title {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 10px;
}
.card-title a:hover { color: var(--accent); }
.card-excerpt { color: var(--muted); font-size: 15.5px; margin: 0 0 14px; }

/* ============================================================
   Latest (asymmetric)
   ============================================================ */
.latest-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	align-items: stretch;
}

.latest-card {
	position: relative;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.latest-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--ease);
	z-index: 1;
}
.latest-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 44px rgba(10, 13, 16, 0.14);
	border-color: var(--accent);
}
.latest-card:hover::before { transform: scaleX(1); }

.latest-card--main {
	grid-column: span 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.latest-card--main .card-media img { aspect-ratio: 3 / 2; height: 100%; }
.latest-card--main .card-body { display: flex; flex-direction: column; justify-content: center; padding: 32px; }
.latest-card--main .card-title { font-size: 25px; line-height: 1.2; }

/* ============================================================
   Globe / India split
   ============================================================ */
.split-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 72px;
	margin-top: 72px;
}
.split-grid > .split-col + .split-col {
	border-left: 1px solid var(--line);
	padding-left: 72px;
}
.split-col .section-head { margin-top: 0; }
.split-col .section-title { font-size: 26px; }

.split-lead { margin-bottom: 28px; }
.split-lead-title {
	font-family: var(--font-display);
	font-size: 23px;
	font-weight: 600;
	line-height: 1.24;
	margin: 16px 0 8px;
}
.split-lead-title a:hover { color: var(--accent); }

.headline {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding: 16px 0;
	border-top: 1px solid var(--line);
}
.headline-index {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--accent);
	min-width: 26px;
}
.headline-title { font-size: 16.5px; font-weight: 600; line-height: 1.45; transition: color 0.2s ease; }
.headline:hover .headline-title { color: var(--accent); }

/* ============================================================
   Manifesto quote
   ============================================================ */
.quote-band {
	background: var(--paper-2);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	margin-top: 84px;
	padding: 84px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.quote-band::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 120px;
	height: 3px;
	background: var(--accent);
}
.quote-label {
	margin: 0 0 14px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--accent);
}
.quote-mark {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 110px;
	line-height: 0.4;
	color: var(--accent);
	opacity: 0.45;
	display: block;
	margin-bottom: 22px;
}
.quote-text {
	font-family: var(--font-display);
	font-size: clamp(26px, 3.6vw, 40px);
	font-weight: 500;
	line-height: 1.28;
	margin: 0 auto;
	max-width: 820px;
}
.quote-text em { color: var(--accent); font-style: italic; }
.quote-src {
	margin: 26px 0 0;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ============================================================
   Deep Dives band
   ============================================================ */
.deep-band {
	background:
		radial-gradient(rgba(55, 214, 124, 0.05) 1px, transparent 1.4px),
		linear-gradient(180deg, var(--band) 0%, var(--ink-2) 100%);
	background-size: 24px 24px, cover;
	color: var(--paper);
	margin-top: 84px;
	padding: 76px 0 84px;
}
.deep-band .section-head { border-top-color: var(--line-dark); margin-top: 0; }
.deep-band .section-title { color: var(--paper); }
.deep-band .section-num { color: var(--accent-bright); }
.deep-band .section-num::before { color: rgba(255, 255, 255, 0.35); }
.deep-band .section-more { color: rgba(255, 255, 255, 0.6); }
.deep-band .section-more:hover { color: var(--accent-bright); }

.deep-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 34px;
}
.deep-card {
	border-top: 1px solid var(--line-dark);
	padding-top: 24px;
	transition: transform 0.35s var(--ease);
}
.deep-card:hover { transform: translateY(-5px); }
.deep-num {
	display: block;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--accent-bright);
	margin-bottom: 18px;
}
.deep-title {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.28;
	margin: 0 0 12px;
}
.deep-title a { color: var(--paper); }
.deep-title a:hover { color: var(--accent-bright); }
.deep-excerpt { color: rgba(255, 255, 255, 0.7); font-size: 15.5px; margin: 0 0 18px; }
.deep-meta {
	display: flex;
	gap: 16px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   About page
   ============================================================ */
/* Shared page hero — also used by /subscribe/ (page-subscribe.php).
   On About it is one column of .about-hero-grid, which supplies its own
   padding, so the two overrides below neutralise it there. */
.about-hero { max-width: 880px; padding: 80px 0 24px; }
.about-sections { margin-bottom: 96px; }

/* Hero + the publication's own record, side by side. */
.about-hero-band { padding: 80px 0 0; }
.about-hero-grid .about-hero { max-width: none; padding: 0; }
.about-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 290px;
	gap: 56px;
	align-items: start;
}
.about-tag {
	margin: 0 0 18px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
}
.about-title {
	font-family: var(--font-display);
	font-size: clamp(40px, 6vw, 68px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.02;
	margin: 0;
}
.about-mission {
	margin-top: 34px;
	max-width: 720px;
	font-size: 19.5px;
	line-height: 1.75;
	color: var(--muted);
}
.about-mission p:first-child { margin-top: 0; }
.about-mission a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* Guard: the mission is raw editor content. Headings typed into it would land
   under the <h1> and silently corrupt the page outline — hold them at lede size. */
.about-mission h2,
.about-mission h3 {
	font-family: var(--font-display);
	font-size: 19.5px;
	font-weight: 600;
	color: var(--ink);
	margin: 28px 0 8px;
}

/* Publication record — a cover sheet. Every value is derived from the site
   itself, so the panel cannot drift from what the site actually contains. */
.record {
	border: 1px solid var(--line);
	border-top: 2px solid var(--accent);
	background: var(--card);
	padding: 22px 22px 18px;
}
.record-head {
	margin: 0 0 14px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
}
.record-list { margin: 0; }
.record-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	border-top: 1px solid var(--line);
}
.record-row:first-child { border-top: 0; }
.record-row dt {
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.record-row dd {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ink);
	text-align: right;
}
.record-row--sub { padding: 5px 0 5px 14px; border-top: 0; }
.record-row--sub dt { color: var(--muted-2); }
.record-row dd a { color: var(--accent); }
.record-row dd a:hover { text-decoration: underline; }

/* Page sections are plain top-level blocks — the page is a flat sequence so the
   full-bleed method band can sit between them. */
.about-block { padding-bottom: 24px; }

/* 01 — the Standard, as clauses rather than cards */
.ledger { list-style: none; margin: 0; padding: 0; }
.clause {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 0 34px;
	align-items: baseline;
	border-top: 1px solid var(--line);
	padding: 22px 0;
}
.clause:last-child { border-bottom: 1px solid var(--line); }
.clause-num {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--accent);
}
.clause-title {
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 600;
	margin: 0;
}
.clause-body { color: var(--muted); font-size: 15.5px; margin: 0; }

/* 02 — the method, inside the dark band. Each step names a field the site
   actually stores, so a reader can check any published brief against it. */
.method {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 46px;
}
.step {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 6px 16px;
	align-items: baseline;
	border-top: 1px solid var(--line-dark);
	padding: 20px 0 22px;
}
.step-num {
	grid-row: span 2;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--accent-bright);
}
.step-title {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 600;
	color: var(--paper);
	margin: 0;
}
.step-body {
	grid-column: 2;
	color: rgba(255, 255, 255, 0.68);
	font-size: 15px;
	margin: 0;
}

/* The specimen — a <figure> inside the method band, not a numbered section of
   its own: a gap in the sequence would read as an accident. */
.specimen {
	margin: 46px 0 0;
	padding: 26px 28px 24px;
	border: 1px solid var(--line-dark);
	border-top: 2px solid var(--accent-bright);
	background: rgba(255, 255, 255, 0.03);
}
.specimen-cap { display: block; margin-bottom: 22px; }
.specimen-kicker {
	display: block;
	margin-bottom: 6px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent-bright);
}
.specimen-note { color: rgba(255, 255, 255, 0.62); font-size: 14.5px; }
.specimen-item { border-left: 2px solid var(--line-dark); padding-left: 18px; }
.specimen-title {
	display: block;
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--paper);
}
.specimen-title:hover { color: var(--accent-bright); }

/* Band-scoped brief-strip corrections. The shared chip styles are built for
   light surfaces — .brief-chip-val is --ink and .brief-strip uses a --line
   hairline — which are effectively invisible on the band. The theme already
   solves this contrast elsewhere by switching to --accent-bright inside bands. */
.about-method .brief-strip { border-top-color: var(--line-dark); margin-top: 10px; }
.about-method .brief-chip { color: rgba(255, 255, 255, 0.6); }
.about-method .brief-chip-key { color: var(--accent-bright); }
.about-method .brief-chip-val { color: var(--paper); }
.about-method a.brief-chip-val:hover { color: var(--accent-bright); }
.about-method .brief-chip--concept { color: rgba(255, 255, 255, 0.55); }
.about-method .brief-chip--concept::before { color: var(--accent-bright); }

/* The legend uses the real chip markup, so the field set is shown as it
   actually renders rather than described in the abstract. */
.spec-legend {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 40px;
	margin: 30px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--line-dark);
}
.spec-pair { margin: 0; }
.spec-pair dt { margin-bottom: 6px; }
.spec-pair dd { margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 14.5px; }

.beats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 8px;
}
.beat-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px;
	transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.beat-card:hover {
	transform: translateY(-5px);
	border-color: var(--accent);
	box-shadow: 0 20px 44px rgba(10, 13, 16, 0.12);
}
.beat-num {
	display: block;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--accent);
	margin-bottom: 14px;
}
.beat-title {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 8px;
}
.beat-title a:hover { color: var(--accent); }
.beat-desc { color: var(--muted); font-size: 14.5px; margin: 0 0 16px; }
.beat-link {
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
}
.beat-link:hover { color: var(--ink); }

/* "What we cover" family doors (Dossier / Archive) */
.family-block { margin-top: 52px; }
.family-intro { color: var(--muted); font-size: 15.5px; line-height: 1.7; max-width: 620px; margin: 0 0 20px; }
.family-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.family-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 10px; }
.family-kicker {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 4px;
}
.family-links { list-style: none; margin: 8px 0 0; padding: 0; }
.family-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink);
}
.family-links a .arrow { color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.family-links a:hover { color: var(--accent); }
.family-links a:hover .arrow { opacity: 1; transform: none; }

/* 04 — the masthead. Both entries render through one code path with identical
   structure and weight; that symmetry is what makes this a masthead rather than
   a CV, so nothing here may style one person differently from the other. */
.masthead {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 34px;
	margin: 0;
	padding: 0;
}
/* Horizontal entry: small portrait, text beside it. Deliberately NOT two large
   stacked portraits — at full width they dominate the page and the credits read
   as a photo gallery, which is the CV failure mode this section avoids. */
.staff {
	display: grid;
	grid-template-columns: 168px minmax(0, 1fr);
	gap: 0 22px;
	align-items: start;
	margin: 0;
}
.staff .portrait { grid-row: span 3; margin-bottom: 0; }

.portrait {
	--brk: 12px;
	--brk-off: -5px;
	position: relative;
	margin: 0 0 22px;
	border: 1px solid var(--line);
	background: var(--card);
}
/* Own aspect-ratio, deliberately not the hero's — the 1020px breakpoint
   flattens .hero-figure to 16/10, which would letterbox a face. */
.portrait img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 28%;
}
/* Profile-photo placeholder, shown until a portrait file exists. This is the
   default-avatar treatment social platforms use for a member with no picture:
   a centred silhouette inside a circle. It replaces an earlier "archival
   plate" (PORTRAIT / NOT ON FILE / APB/STF-NN), which the client read as a
   broken record rather than a person. */
.portrait--placeholder {
	aspect-ratio: 4 / 5;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--paper-2), var(--paper));
}
.portrait--placeholder .avatar {
	display: block;
	width: 72%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--line);
	color: var(--muted-2);
	overflow: hidden;
}
.portrait--placeholder .avatar-glyph {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.staff-role {
	margin: 0 0 5px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
}
.staff-name {
	font-family: var(--font-display);
	font-size: 23px;
	font-weight: 600;
	margin: 0 0 8px;
}
.staff-note { color: var(--muted); font-size: 15.5px; margin: 0; }

/* The desk — a compact contact plate closing the page. Carries contact only:
   no newsletter signup, and no Subscribe row framed as one — the newsletter
   was removed, and Deep Dives (the paid tier) is reached from the nav. */
.about-desk {
	margin-top: 76px;
	padding: 46px 0 76px;
	border-top: 1px solid var(--line);
	background: var(--paper-2);
}
.desk-title {
	font-family: var(--font-display);
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 26px;
}
.desk-rows {
	list-style: none;
	max-width: 720px;
	margin: 0;
	padding: 0;
}
.desk-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 0;
	border-top: 1px solid var(--line);
}
.desk-row:last-child { border-bottom: 1px solid var(--line); }
.desk-key {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}
.desk-val {
	font-family: var(--font-mono);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ink);
	transition: color 0.25s var(--ease);
}
.desk-val:hover { color: var(--accent); }
.desk-val .arrow {
	color: var(--accent);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.desk-val:hover .arrow { opacity: 1; transform: none; }

/* ============================================================
   Privacy policy
   ------------------------------------------------------------
   The page reuses the About components wholesale — hero grid, .record
   panel, .ledger/.step, .deep-band, .about-desk. Only what is genuinely
   new lives here: the data tables (the site had none), the clause index,
   and the clause body, which is editor content and must not inherit the
   article drop cap.
   ============================================================ */

/* Hero strip is left-aligned here, like the Subscribe page's. Needs both
   classes: .data-strip sets justify-content:center and is declared later in
   the file, so a bare .policy-data would lose the source-order tie. */
.data-strip.policy-data { justify-content: flex-start; }

/* This page's sections are not numbered. Clause numbers are the only numbers
   a reader should be counting here, and a "02" that means "second section"
   sitting above a clause numbered "02" is a collision, not a flourish. The
   mono kicker names the section instead. */
.section-head--stack {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.section-head--stack .about-tag { margin: 0; }
.section-head--stack .section-title { max-width: 780px; }

/* Sub-headings inside a numbered section. The section head is mono and
   numbered; these are the second level down and read as speech, not data. */
.sub-note { color: var(--muted); font-size: 16.5px; line-height: 1.7; max-width: 760px; margin: 0 0 22px; }
.sub-note--after { margin: 20px 0 0; }
.sub-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Tables. The site is otherwise all cards and strips, so these are built to
   read as a record sheet: mono headers, hairline rules, no zebra striping,
   and the first column carrying the weight. */
.table-scroll { overflow-x: auto; margin: 0 0 26px; }
.data-table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: 15.5px;
	line-height: 1.6;
}
.data-table th {
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: left;
	padding: 0 20px 10px 0;
	border-bottom: 1px solid var(--ink);
	white-space: nowrap;
}
.data-table td {
	padding: 14px 20px 14px 0;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	color: var(--muted);
}
.data-table td:first-child { color: var(--ink); font-weight: 500; }
.data-table td:last-child,
.data-table th:last-child { padding-right: 0; }
.data-table code {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--accent);
	background: none;
	padding: 0;
}

/* The counterweight to the tables: what the site does not do. */
.never { margin: 34px 0 8px; border-top: 1px solid var(--line); padding-top: 22px; }
.never-head {
	margin: 0 0 16px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
}
.never-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 48px; }
.never-list li {
	position: relative;
	padding: 0 0 10px 20px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--muted);
	break-inside: avoid;
}
.never-list li::before {
	content: '—';
	position: absolute;
	left: 0;
	color: var(--muted-2);
}

/* Prose inside the dark band. */
.band-note { color: rgba(255, 255, 255, 0.62); font-size: 16.5px; line-height: 1.7; max-width: 760px; margin: 0 0 30px; }
.band-note--after { margin: 26px 0 0; }

/* 03 — the clause index. Derived from the clauses' own headings at render
   time, so it can never list a clause that is not there. */
.policy-block { padding-bottom: 0; }
.clause-index {
	border: 1px solid var(--line);
	border-top: 2px solid var(--accent);
	background: var(--card);
	padding: 22px 24px 14px;
	margin: 0 0 46px;
}
.clause-index-head {
	margin: 0 0 12px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
}
.clause-index-list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 40px;
}
.clause-index-list li { break-inside: avoid; }
.clause-index-list a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 8px 0;
	border-top: 1px solid var(--line);
	transition: color 0.2s var(--ease);
}
.clause-index-list li:first-child a { border-top: 0; }
.clause-index-num {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--accent);
}
.clause-index-label {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	color: var(--muted);
}
.clause-index-list a:hover .clause-index-label { color: var(--accent); }

/* The clause body — editor content, so it inherits .entry-content rules for
   headings, links and lists. Two overrides matter: the drop cap must not
   fire on a legal document, and the clauses number themselves. */
.policy-body {
	max-width: 800px;
	font-size: 17.5px;
	line-height: 1.8;
	color: var(--muted);
	counter-reset: clause;
}
.policy-body > p:first-of-type::first-letter {
	float: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	padding: 0;
	color: inherit;
}
.policy-body h2 {
	position: relative;
	counter-increment: clause;
	margin: 54px 0 14px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: 27px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--ink);
	scroll-margin-top: 120px;
}
.policy-body h2::before {
	content: counter(clause, decimal-leading-zero);
	display: block;
	margin-bottom: 10px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--accent);
}
.policy-body h3 {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 600;
	margin: 30px 0 10px;
	color: var(--ink);
}
.policy-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.policy-body ul,
.policy-body ol { padding-left: 22px; }
.policy-body li { margin-bottom: 8px; }
.policy-body strong { color: var(--ink); font-weight: 600; }
/* The lawful-basis table is authored in the editor, so it arrives without the
   wrapper the template's tables carry — apoliticalbeing_policy_body() adds one
   at render time. These rules style it once it is inside .table-scroll, which
   supplies the margin. */
.policy-body .table-scroll { margin: 8px 0 26px; }
.policy-body table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15.5px; line-height: 1.6; }
.policy-body th {
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: left;
	padding: 0 20px 10px 0;
	border-bottom: 1px solid var(--ink);
}
.policy-body td { padding: 14px 20px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.policy-body td:last-child,
.policy-body th:last-child { padding-right: 0; }

/* ============================================================
   Archive / index
   ============================================================ */
.page-header { padding: 60px 0 8px; }
.page-title {
	font-family: var(--font-display);
	font-size: clamp(34px, 5vw, 48px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0 0 14px;
}
.archive-description { color: var(--muted); max-width: 640px; }

.post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	padding: 32px 0 0;
}
.grid-card {
	position: relative;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.grid-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--ease);
	z-index: 1;
}
.grid-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 44px rgba(10, 13, 16, 0.14);
	border-color: var(--accent);
}
.grid-card:hover::before { transform: scaleX(1); }

/* Section-landing header for mapped v4 categories (dossier/archive/wire) */
.cat-header { padding-top: 60px; }
.archive-kicker {
	margin: 0 0 14px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
}
.cat-header .page-title { margin-bottom: 16px; }
.cat-header .archive-description { font-size: 16.5px; line-height: 1.7; }

/* Empty state — every section opens even when empty */
.empty-panel {
	position: relative;
	margin: 44px 0 96px;
	padding: 76px 28px 46px;
	text-align: center;
	border: 1px solid var(--line);
	background:
		radial-gradient(rgba(15, 138, 82, 0.07) 1px, transparent 1.4px),
		var(--card);
	background-size: 24px 24px, auto;
	overflow: hidden;
}
.empty-radar {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(circle, transparent 58%, var(--line) 59%, transparent 60%),
		radial-gradient(circle, transparent 38%, var(--line) 39%, transparent 40%),
		radial-gradient(circle, transparent 18%, var(--line) 19%, transparent 20%);
	opacity: 0.5;
	pointer-events: none;
}
.empty-kicker,
.empty-title,
.empty-text,
.empty-panel .data-strip { position: relative; z-index: 1; }
.empty-kicker {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--accent);
}
.empty-title {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 18px 0 10px;
}
.empty-text { color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 520px; margin: 0 auto 30px; }
.data-strip {
	display: flex;
	justify-content: center;
	gap: 8px 28px;
	flex-wrap: wrap;
	border-top: 1px solid var(--line);
	padding-top: 20px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.data-strip span::before {
	content: '//';
	color: var(--accent);
	margin-right: 8px;
}
/* Subscribe page hero strip aligns to the left-aligned hero copy. */
.subscribe-data { justify-content: flex-start; }
.about-page-content { max-width: 720px; }

/* ============================================================
   Single post / page
   ============================================================ */
.single-layout { max-width: 780px; margin: 0 auto; padding: 64px 28px 0; }

.entry-header { margin-bottom: 32px; }
.entry-title {
	font-family: var(--font-display);
	font-size: clamp(36px, 6vw, 52px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.06;
	margin: 16px 0 20px;
}
.entry-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.entry-thumbnail img { border-radius: var(--radius); box-shadow: 0 20px 50px rgba(10, 13, 16, 0.14); margin: 8px 0 40px; }

.entry-content { font-size: 18.5px; line-height: 1.85; }
.entry-content > p:first-of-type::first-letter {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 3.4em;
	line-height: 0.8;
	float: left;
	padding: 8px 12px 0 0;
	color: var(--accent);
}
.entry-content h2,
.entry-content h3,
.entry-content h4 { font-family: var(--font-display); line-height: 1.2; letter-spacing: -0.01em; }
.entry-content h2 { font-size: 30px; margin: 52px 0 16px; }
.entry-content h3 { font-size: 24px; margin: 40px 0 12px; }
.entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content blockquote {
	margin: 44px 0;
	padding: 10px 0 10px 30px;
	border-left: 3px solid var(--accent);
	font-family: var(--font-body);
	font-style: italic;
	font-size: 25px;
	line-height: 1.45;
	color: var(--ink);
}
.entry-content blockquote cite { display: block; margin-top: 12px; font-style: normal; font-size: 13px; font-family: var(--font-mono); color: var(--muted); }
.entry-content ul,
.entry-content ol { padding-left: 26px; }
.entry-content img { border-radius: var(--radius); }
.entry-content .wp-caption-text,
.entry-content figcaption { font-size: 13px; color: var(--muted); padding-top: 8px; font-family: var(--font-mono); }

.entry-footer { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 20px; }
.post-tags { color: var(--muted); font-size: 14px; }
.post-tags span { font-weight: 600; color: var(--ink); }
.post-tags a { color: var(--accent); }

.post-navigation { margin-top: 40px; display: flex; justify-content: space-between; gap: 32px; }
.post-navigation a { border-top: 1px solid var(--line); padding-top: 14px; font-weight: 600; }
.post-navigation a:hover { color: var(--accent); }

.related { margin: 84px 0; }

/* ============================================================
   Pagination
   ============================================================ */
.pagination { margin: 56px 0; }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
	padding: 10px 16px;
	border: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	background: var(--card);
	transition: all 0.2s ease;
}
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pagination .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ============================================================
   No results / search form
   ============================================================ */
.no-results { padding: 88px 0; text-align: center; }
.no-results h1 { font-family: var(--font-display); font-size: 40px; font-weight: 700; margin: 0 0 12px; }
.no-results p { color: var(--muted); }
.search-form { display: inline-flex; gap: 8px; margin-top: 20px; }
.search-form input[type="search"] {
	padding: 12px 16px;
	border: 1px solid var(--line);
	background: var(--card);
	font: 14px var(--font-mono);
}
.search-form button {
	padding: 12px 20px;
	border: none;
	background: var(--ink);
	color: var(--paper);
	font: 600 12px var(--font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease;
}
.search-form button:hover { background: var(--accent); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--ink-2); color: rgba(255, 255, 255, 0.75); }

.footer-top {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 64px;
	padding: 76px 0 48px;
}
.footer-title {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--paper);
}
.footer-title:hover { color: var(--accent-bright); }
.footer-tagline {
	margin: 12px 0 0;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}
.footer-about { color: rgba(255, 255, 255, 0.65); font-size: 15.5px; max-width: 420px; margin: 20px 0 0; }

.footer-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-content: start; }
.footer-widgets .widget-title { color: var(--paper); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 16px; }
.footer-widgets ul { list-style: none; margin: 0; padding: 0; }
.footer-widgets li { padding: 7px 0; }
.footer-widgets a { color: rgba(255, 255, 255, 0.7); transition: color 0.2s ease; }
.footer-widgets a:hover { color: var(--accent-bright); }

.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 22px 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.45);
}
.footer-bottom p { margin: 0; }
.footer-made { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ============================================================
   Brief metadata strip (date · location · source · concept)
   ============================================================ */
.brief-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 24px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-family: var(--font-mono);
}
.brief-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}
.brief-chip-key {
	color: var(--accent);
	font-weight: 600;
	letter-spacing: 0.14em;
}
.brief-chip-val { font-weight: 500; letter-spacing: 0.03em; color: var(--ink); }
a.brief-chip-val:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.brief-chip--concept {
	color: var(--muted-2);
	letter-spacing: 0.18em;
}
.brief-chip--concept::before {
	content: '//';
	color: var(--accent);
	margin-right: 9px;
	font-weight: 600;
}
.entry-header .brief-strip { margin-top: 22px; }

/* ============================================================
   Meta chips on cards (compact) + The Globe wire feed
   ============================================================ */
.meta-chips {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
	font-family: var(--font-mono);
}
.meta-chips .brief-chip { font-size: 10px; }
.meta-chips .brief-chip-val { color: var(--muted); }
.meta-chips .brief-chip-key { letter-spacing: 0.12em; }

.wire-status {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 34px 0 0;
	padding: 13px 20px;
	background: var(--ink);
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.wire-status .signal-dot { width: 7px; height: 7px; margin-right: 0; }
.wire-status-text { color: var(--accent-bright); font-weight: 600; letter-spacing: 0.18em; }
.wire-status-count { margin-left: auto; color: rgba(255, 255, 255, 0.5); }

.wire-feed { margin-top: 30px; }

.index-line {
	justify-content: flex-start;
	margin: 30px 0 0;
	padding-top: 0;
	border-top: 0;
	color: var(--muted-2);
}

/* Lead — the newest brief, given visual priority. */
.wire-lead {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 52px;
	align-items: center;
	padding: 6px 0 34px;
	border-bottom: 1px solid var(--line);
}
.wire-lead-title {
	font-family: var(--font-display);
	font-size: clamp(32px, 4.6vw, 54px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 20px 0 16px;
}
.wire-lead-title a { color: var(--ink); }
.wire-lead-title a:hover { color: var(--accent); }
.wire-lead-excerpt {
	font-size: 18px;
	line-height: 1.7;
	color: var(--muted);
	max-width: 560px;
	margin: 0 0 18px;
}
.wire-lead .meta-chips { margin: 4px 0 14px; }
.wire-lead-meta { margin-top: 2px; }
.wire-lead .hero-cta { margin-top: 26px; }
.wire-lead-media .hero-figure img { aspect-ratio: 4 / 3; }

/* Dispatch log rows. */
.dispatch {
	display: grid;
	grid-template-columns: 46px 1fr auto;
	align-items: baseline;
	gap: 8px 24px;
	padding: 24px 10px;
	border-bottom: 1px solid var(--line);
}
.dispatch-index {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--accent);
}
.dispatch-main { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.dispatch-title {
	display: block;
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--ink);
	transition: color 0.2s ease;
}
.dispatch:hover .dispatch-title { color: var(--accent); }
.dispatch .meta-chips .brief-chip-val { color: var(--muted-2); }
.dispatch-go {
	color: var(--accent);
	font-size: 18px;
	line-height: 1;
	transition: transform 0.28s var(--ease);
}
.dispatch:hover .dispatch-go { transform: translateX(5px); }

/* ============================================================
   Deep Dives — the dossier library
   ============================================================ */
.deep-cover {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px 24px;
	flex-wrap: wrap;
	margin-top: 36px;
	padding: 15px 20px;
	background: linear-gradient(180deg, var(--band), var(--ink-2));
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.deep-cover-note { color: var(--accent-bright); font-weight: 600; letter-spacing: 0.2em; }
.deep-cover-count { color: rgba(255, 255, 255, 0.45); }

.dossier-list { margin-top: 10px; }
.deep-dossier {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) 320px;
	gap: 0 38px;
	align-items: start;
	padding: 48px 0;
	border-bottom: 1px solid var(--line);
}
.deep-dossier-num {
	font-family: var(--font-mono);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--accent);
	padding-top: 5px;
}
.deep-dossier-main { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.deep-dossier-kicker {
	display: flex;
	align-items: center;
	gap: 4px 18px;
	flex-wrap: wrap;
}
.dd-tag {
	color: var(--accent);
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.deep-dossier-title {
	font-family: var(--font-display);
	font-size: clamp(26px, 3.4vw, 40px);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.12;
	margin: 0;
}
.deep-dossier-title a { color: var(--ink); }
.deep-dossier-title a:hover { color: var(--accent); }
.deep-dossier-excerpt {
	color: var(--muted);
	font-size: 16.5px;
	line-height: 1.75;
	margin: 0;
	max-width: 720px;
}
.deep-dossier-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}
.dd-on-timeline { color: var(--accent); }
.deep-dossier-media a { display: block; overflow: hidden; }
.deep-dossier-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--line);
	transition: transform 0.7s var(--ease);
}
.deep-dossier:hover .deep-dossier-media img { transform: scale(1.04); }

/* ============================================================
   Timeline + History — chronological spine
   ============================================================ */
.tl { position: relative; margin: 34px 0 46px; }
.tl::before {
	content: '';
	position: absolute;
	left: 164px;
	top: 6px;
	bottom: 6px;
	width: 1px;
	background: var(--line);
}
.tl-row {
	position: relative;
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	column-gap: 40px;
	padding: 26px 0;
	border-top: 1px solid var(--line);
}
.tl-row::before {
	content: '';
	position: absolute;
	left: 160px;
	top: 34px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 4px var(--accent-glow);
}
.tl-date { text-align: right; padding-top: 2px; }
.tl-year {
	display: block;
	font-family: var(--font-display);
	font-size: 42px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.tl-date-full {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
}
.tl-entry { min-width: 0; }
.tl-title {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.005em;
	margin: 0 0 8px;
}
.tl-title a { color: var(--ink); }
.tl-title a:hover { color: var(--accent); }
.tl-context {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 10px;
	max-width: 720px;
}
.tl-meta,
.tl-meta-line {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.tl-meta-line {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin-top: 2px;
}
.tl-cat {
	color: var(--accent);
	font-weight: 600;
	letter-spacing: 0.16em;
}
.tl-era {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 64px 0 4px;
}
.tl-era:first-child { margin-top: 8px; }
.tl-era-kicker {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
	background: var(--paper);
	padding-right: 16px;
	white-space: nowrap;
}
.tl-era-rule { flex: 1; height: 1px; background: var(--line); }

/* ============================================================
   Geography — India map, state dossiers, field cards
   ============================================================ */
.geo-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
	gap: 56px;
	align-items: start;
	margin-top: 4px;
}
.geo-map-panel {
	border: 1px solid var(--line);
	background: var(--card);
	margin-top: 30px;
}
.geo-map-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--line);
	font-family: var(--font-mono);
}
.geo-map-title {
	color: var(--accent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.geo-map-hint {
	color: var(--muted-2);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.geo-map-stage {
	position: relative;
	padding: 26px;
	background:
		radial-gradient(rgba(15, 138, 82, 0.06) 1px, transparent 1.4px),
		#f7f8f5;
	background-size: 22px 22px, auto;
}
.geo-map-stage.is-on .geo-svg {
	opacity: 1;
	transform: none;
}
.geo-svg {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.8s ease, transform 0.8s var(--ease);
}
.geo-svg--focus { opacity: 1; transform: none; }
.geo-region {
	transition: fill 0.22s ease, stroke 0.22s ease;
	vector-effect: non-scaling-stroke;
}
.geo-region--state { fill: #e3e8e0; stroke: var(--muted-2); stroke-width: 0.7; }
.geo-region--ut { fill: rgba(15, 138, 82, 0.1); stroke: var(--accent); stroke-width: 1.1; }
.geo-map-stage a:hover > .geo-region,
.geo-map-stage a:focus-visible .geo-region {
	fill: var(--accent);
	stroke: var(--ink);
}
.geo-readout {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	margin: 0;
	padding: 11px 18px;
	border-top: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--muted);
}
.geo-readout-id {
	color: var(--accent);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.geo-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 14px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.geo-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 9px;
	border-radius: 2px;
	vertical-align: -2px;
}
.geo-swatch--state { background: #e3e8e0; border: 1px solid var(--muted-2); }
.geo-swatch--ut { background: rgba(15, 138, 82, 0.12); border: 1px solid var(--accent); }
.geo-swatch--focus { background: var(--accent); border: 1px solid var(--accent); }
.geo-index-col { min-width: 0; }
.geo-index-intro {
	color: var(--muted);
	font-size: 15.5px;
	line-height: 1.75;
	margin: 30px 0 0;
}
.geo-index-kicker {
	margin: 30px 0 0;
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted-2);
}
.geo-index {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	columns: 2;
	column-gap: 40px;
}
.geo-index li { break-inside: avoid; }
.geo-index a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
	transition: color 0.2s ease;
}
.geo-index a:hover { color: var(--accent); }
.geo-index-tag {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--accent);
}
.geo-index a:hover .geo-index-tag { color: var(--ink); }

/* State dossier */
.geo-back { padding-top: 44px; }
.geo-back a {
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.geo-back a:hover { color: var(--accent); }
.geo-back-arrow { color: var(--accent); }
.geo-state {
	display: grid;
	grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.35fr);
	gap: 56px;
	align-items: start;
	margin-top: 30px;
	padding-bottom: 30px;
}
.geo-state-map {
	position: sticky;
	top: 96px;
	border: 1px solid var(--line);
	background: var(--card);
}
.geo-map-stage--focus { padding: 14px; background-color: #f7f8f5; }
.geo-state-main { min-width: 0; }
.geo-state-title { margin-top: 10px; }
.geo-state-intro {
	color: var(--muted);
	font-size: 17px;
	line-height: 1.75;
	margin-top: 22px;
	max-width: 680px;
}
.geo-state-intro p { margin: 0 0 1em; }
/* The dossier body is editor content, so it needs the same prose scale the
   article body gets (.entry-content). Without these, a heading or list typed
   into a state dossier falls back to bare browser defaults and reads as an
   unstyled fragment rather than part of the page. */
.geo-state-intro h2,
.geo-state-intro h3 {
	font-family: var(--font-display);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.geo-state-intro h2 { font-size: 22px; margin: 34px 0 10px; }
.geo-state-intro h3 { font-size: 18px; margin: 26px 0 8px; }
.geo-state-intro ul,
.geo-state-intro ol { margin: 0 0 1.2em; padding-left: 22px; }
.geo-state-intro li { margin-bottom: 0.4em; }
.geo-state-intro a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.geo-state-intro strong { color: var(--ink); font-weight: 600; }
.geo-state-intro blockquote {
	margin: 26px 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--accent);
	color: var(--ink);
	font-style: italic;
}
.data-strip.geo-data-strip {
	justify-content: flex-start;
	border: 0;
	border-top: 1px solid var(--line);
	border-radius: 0;
	padding: 12px 18px;
}
.geo-fields { margin-top: 48px; }
.geo-fields .section-title { margin-bottom: 26px; }
.field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
}
.field-card {
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.field-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(10, 13, 16, 0.12);
	border-color: var(--accent);
}
.field-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.field-media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background:
		radial-gradient(rgba(15, 138, 82, 0.07) 1px, transparent 1.4px),
		var(--paper-2);
	background-size: 18px 18px, auto;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted-2);
}
.field-body { padding: 18px 20px 20px; }
.field-tag {
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
}
.field-title {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	margin: 9px 0 7px;
}
.field-desc {
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.7;
	margin: 0;
}
.field-data {
	list-style: none;
	margin: 14px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--line);
}
.field-data li {
	padding: 4px 0;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.02em;
	color: var(--ink);
}
.field-data li::before {
	content: '//';
	color: var(--accent);
	margin-right: 9px;
	font-weight: 600;
}
.geo-fields-empty {
	color: var(--muted);
	font-size: 15.5px;
	padding: 18px 0 40px;
	border-top: 1px solid var(--line);
}

/* ============================================================
   Sociology — people atlas
   ============================================================ */
.concern-tag {
	display: inline-block;
	margin: 0 0 10px;
	padding: 5px 10px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #b3412f;
	border: 1px solid rgba(179, 65, 47, 0.4);
	background: rgba(179, 65, 47, 0.06);
}
.soc-state-head { padding: 6px 0 8px; }
.soc-counts {
	justify-content: flex-start;
	border: 0;
	padding-top: 0;
	margin-top: 6px;
}
.atlas { margin-top: 6px; }
.atlas .geo-index-kicker { margin-top: 0; }
.atlas-grid {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
	column-gap: 32px;
}
.atlas-cell {
	padding: 16px 2px 14px;
	border-top: 1px solid var(--line);
}
.atlas-cell.is-empty { opacity: 0.55; }
.atlas-name {
	display: block;
	font-family: var(--font-display);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.3;
}
.atlas-cell a:hover .atlas-name { color: var(--accent); }
.atlas-cell.is-empty .atlas-name { color: var(--muted-2); }
.atlas-meta {
	display: block;
	margin-top: 4px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted-2);
}
.atlas-cell a:hover .atlas-meta { color: var(--accent); }

/* Concern banner on a sociology single */
.concern-note {
	border-left: 3px solid #b3412f;
	background: rgba(179, 65, 47, 0.06);
	padding: 14px 18px;
	font-size: 15.5px;
	color: var(--ink);
	margin: 0 0 36px;
}
.concern-note::first-letter {
	font: inherit;
	color: inherit;
	float: none;
	padding: 0;
}
.concern-note-tag {
	display: block;
	margin-bottom: 6px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #b3412f;
}

/* ============================================================
   Welfare schemes — registry
   ============================================================ */
.reg-filter {
	margin-top: 30px;
	padding: 22px 24px 24px;
	border: 1px solid var(--line);
	background: var(--card);
}
.reg-filter-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px 18px;
	align-items: end;
}
.reg-filter-field--wide { grid-column: span 2; }
.reg-filter-label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.reg-filter input,
.reg-filter select {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	font: 13px var(--font-mono);
	color: var(--ink);
}
.reg-filter input:focus,
.reg-filter select:focus { border-color: var(--accent); outline: none; }
.reg-filter-actions {
	grid-column: span 2;
	display: flex;
	align-items: center;
	gap: 16px;
	justify-self: end;
}
.reg-filter-go {
	padding: 10px 18px;
	border: 0;
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--paper);
	font: 600 11px/1 var(--font-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}
.reg-filter-go:hover { background: var(--accent); color: #fff; }
.reg-filter-clear {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.reg-filter-clear:hover { color: var(--accent); }
.reg-filter-clear--block { display: inline-block; margin-top: 18px; }

.reg-list { margin-top: 36px; }
.reg-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 6px 24px;
	align-items: baseline;
	padding: 20px 4px;
	border-bottom: 1px solid var(--line);
}
.reg-name {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	transition: color 0.2s ease;
}
.reg-row:hover .reg-name { color: var(--accent); }
.reg-facts {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}
.reg-chip {
	padding: 4px 9px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}
.reg-chip--accent { color: var(--accent); border-color: rgba(15, 138, 82, 0.4); }
.reg-chip--muted { color: var(--muted-2); }
.reg-verified {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted-2);
	white-space: nowrap;
}
.reg-row:hover .reg-verified { color: var(--accent); }

/* Scheme sheet on a welfare single */
.scheme-sheet {
	margin: 0 0 48px;
	border: 1px solid var(--line);
	background: var(--card);
}
.scheme-sheet-kicker {
	margin: 0;
	padding: 14px 22px;
	border-bottom: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
}
.scheme-sheet dl { margin: 0; }
.scheme-row {
	display: grid;
	grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
	gap: 8px 26px;
	padding: 13px 22px;
	border-bottom: 1px solid var(--line);
}
.scheme-row:last-child { border-bottom: 0; }
.scheme-row dt {
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	padding-top: 4px;
}
.scheme-row dd {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ink);
	white-space: pre-line;
}
.scheme-row--verified dd {
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: var(--accent);
}

/* ============================================================
   Economy — document header
   ============================================================ */
.doc-head {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	align-items: center;
	margin: 0 0 42px;
	padding: 18px 22px;
	border: 1px solid var(--line);
	background: var(--card);
	font-family: var(--font-mono);
}
.doc-cell {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}
.doc-cell-key {
	color: var(--accent);
	font-weight: 600;
	letter-spacing: 0.14em;
	font-size: 9.5px;
}
.doc-cell--concept { color: var(--muted-2); }
.doc-primary {
	margin-left: auto;
	color: var(--accent);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.doc-primary:hover { color: var(--ink); }
.doc-head-specs {
	flex-basis: 100%;
	display: block;
	padding-top: 10px;
	margin-top: 4px;
	border-top: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 11.5px;
	line-height: 1.6;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--muted);
	white-space: pre-line;
}

/* ============================================================
   Photos — archival record grid
   ============================================================ */
.photo-grid {
	margin-top: 38px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 26px;
}
.photo-tile {
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.photo-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(10, 13, 16, 0.12);
	border-color: var(--accent);
}
.photo-frame { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease);
}
.photo-tile:hover .photo-frame img { transform: scale(1.05); }
.photo-meta { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 9px; }
.photo-file {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.02em;
	color: var(--muted);
	word-break: break-all;
	line-height: 1.5;
}
.photo-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Archival record view */
.photo-record {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 48px;
	align-items: start;
	margin-top: 30px;
	padding-bottom: 90px;
}
.photo-record-img {
	border: 1px solid var(--line);
	background: var(--card);
}
.photo-record-img img { width: 100%; height: auto; display: block; }
.photo-nonimage { margin: 0; padding: 40px; font-family: var(--font-mono); color: var(--muted); }
.photo-record-aside { min-width: 0; }
.photo-record-aside .photo-file {
	font-size: 12px;
	color: var(--muted-2);
	margin: 0 0 16px;
}
.photo-caption {
	margin-top: 22px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink);
}
.photo-desc { margin-top: 22px; font-size: 16.5px; }
.photo-strip { justify-content: flex-start; border: 0; padding: 12px 0 0; }
.photo-record .entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.search-context { margin-bottom: 2px; }
.search-row-meta {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 16px;
}
.dispatch .search-row-meta .brief-chip-val { color: var(--muted-2); }

/* ============================================================
   Request & Feedback + footer utility
   ============================================================ */
.footer-util {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	padding: 16px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-util a {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	transition: color 0.2s ease;
}
.footer-util a:hover { color: var(--accent-bright); }

.rf-wrap { max-width: 780px; margin: 0 0 110px; }
.rf-success,
.rf-error {
	margin-bottom: 30px;
	padding: 15px 20px;
	border: 1px solid var(--line);
	border-left-width: 3px;
	background: var(--card);
}
.rf-success { border-left-color: var(--accent); }
.rf-error { border-left-color: #b3412f; color: var(--ink); }
.rf-form {
	padding: 28px;
	border: 1px solid var(--line);
	background: var(--card);
}
.rf-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 22px;
	margin-bottom: 20px;
}
.rf-form input[type="text"],
.rf-form input[type="email"],
.rf-form input[type="url"],
.rf-form select,
.rf-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 13.5px;
}
.rf-form textarea { min-height: 130px; resize: vertical; }
.rf-form input:focus,
.rf-form select:focus,
.rf-form textarea:focus { border-color: var(--accent); outline: none; }
.rf-opt { color: var(--muted-2); text-transform: none; letter-spacing: 0.02em; }
/* Required fields are marked in the accent rather than the muted grey, so the
   distinction from `.rf-opt` reads at a glance instead of needing both words. */
.rf-req { color: var(--accent); text-transform: none; letter-spacing: 0.02em; }
.rf-message { display: block; }
.rf-note {
	color: var(--muted-2);
	font-size: 13px;
	line-height: 1.6;
	margin: 16px 0 22px;
}
.rf-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.rf-submit { border: 0; }

/* ============================================================
   Scroll reveal
   ============================================================ */
[data-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.75s ease, transform 0.75s var(--ease);
	transition-delay: var(--d, 0s);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1020px) {
	.hero-grid { grid-template-columns: 1fr; gap: 44px; }
	.hero { padding: 48px 0 56px; }
	.hero-title { font-size: 48px; }
	.hero-figure img, .hero-figure--empty { aspect-ratio: 16 / 10; }
	.latest-card--main { grid-column: span 3; grid-template-columns: 1fr 1fr; }
	.split-grid { grid-template-columns: 1fr; gap: 0; }
	.split-grid > .split-col + .split-col {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid var(--line);
		padding-top: 40px;
		margin-top: 40px;
	}
	.footer-top { grid-template-columns: 1fr; gap: 40px; }
	.beats-grid { grid-template-columns: repeat(2, 1fr); }

	/* About on tablet — the record panel drops below the mission */
	.about-hero-grid { grid-template-columns: 1fr; gap: 40px; }
	.record { max-width: 460px; }
	.clause { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.1fr); gap: 0 24px; }
	/* Tighten the nav so ~12 controls fit a tablet without wrapping (drawer kicks in at 760). */
	.main-navigation .nav-link,
	.main-navigation .door-toggle { padding: 17px 9px; font-size: 11px; letter-spacing: 0.12em; }
	.main-navigation .nav-link::after,
	.main-navigation .door-toggle::after { left: 9px; right: 9px; }
	.nav-actions { padding-left: 0; }
	.nav-actions .nav-link { padding: 17px 9px; }
	.nav-search-toggle { padding: 17px 9px; }
	.btn-subscribe { margin-left: 6px; padding: 10px 14px; }
	.submenu { min-width: 260px; }

	/* Deep Dives dossier rows on tablet */
	.deep-dossier { grid-template-columns: 64px minmax(0, 1fr) 260px; gap: 0 26px; }

	/* Geography on tablet — map above the index, state dossier stacks */
	.geo-layout { grid-template-columns: 1fr; gap: 34px; }
	.geo-map-col { max-width: 660px; }
	.geo-state { grid-template-columns: 1fr; gap: 30px; }
	.geo-state-map { position: static; max-width: 560px; }

	/* Welfare registry filter on tablet */
	.reg-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.container { padding: 0 20px; }
	.masthead { flex-direction: column; align-items: flex-start; gap: 12px; padding: 30px 0 22px; }
	.masthead-right { display: none; }
	.topbar-inner { flex-direction: column; gap: 4px; text-align: center; }
	.topbar-left, .topbar-right { justify-content: center; }
	.topbar-lang .lang-note,
	.lang-switch .lang-note { display: none; }
	/* The switcher sits mid-row once the topbar centres, so an edge-aligned
	   panel would hang off-screen. Centre it on the viewport instead. */
	.lang-menu {
		right: auto;
		left: 50%;
		transform: translate(-50%, -6px);
		width: min(280px, calc(100vw - 32px));
	}
	.lang-switch.is-open .lang-menu { transform: translate(-50%, 0); }

	/* Mobile nav: the row collapses to a hamburger drawer. */
	.main-navigation .menu,
	.main-navigation .nav-about { display: none; }
	.nav-actions { margin-left: auto; gap: 0; }
	.nav-toggle { display: inline-flex; }
	.nav-search-toggle { padding: 17px 10px; }
	.nav-actions .btn-subscribe { margin-left: 6px; padding: 9px 12px; }

	.nav-drawer {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--paper);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 24px 50px rgba(10, 13, 16, 0.16);
		max-height: calc(100vh - 70px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 90;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
	}
	.nav-drawer.is-open { opacity: 1; visibility: visible; transform: none; }
	.nav-drawer-kicker {
		margin: 0;
		padding: 22px 0 10px;
		font-family: var(--font-mono);
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: 0.26em;
		text-transform: uppercase;
		color: var(--muted-2);
	}
	.nav-drawer-list { display: block; padding-bottom: 20px; }
	.nav-drawer .nav-link::after { display: none; }
	.nav-drawer-item > .nav-link,
	.nav-drawer-item--cta .btn-subscribe {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 16px 0;
		font-family: var(--font-mono);
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--ink);
		border-bottom: 1px solid var(--line);
	}
	.nav-drawer-item > .nav-link.is-current,
	.nav-drawer-item > .nav-link[aria-current="page"] { color: var(--accent); }
	.nav-drawer-group { border-bottom: 1px solid var(--line); }
	.drawer-door-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 16px 0;
		background: none;
		border: 0;
		font-family: var(--font-mono);
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--ink);
		cursor: pointer;
	}
	.drawer-door-toggle .door-caret { color: var(--accent); }
	.drawer-submenu {
		list-style: none;
		margin: 0;
		padding: 0 0 4px;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s var(--ease);
	}
	.nav-drawer-group.is-open .drawer-submenu { max-height: 400px; }
	.nav-drawer-group.is-open .door-caret { transform: rotate(180deg); }
	.drawer-submenu a {
		display: block;
		padding: 11px 0 11px 14px;
		border-left: 2px solid var(--line);
		font-family: var(--font-mono);
		font-size: 12px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--muted);
	}
	.drawer-submenu a[aria-current="page"] { color: var(--accent); border-left-color: var(--accent); }
	.nav-drawer-item--cta { padding-top: 16px; border-bottom: 0; }
	.nav-drawer-item--cta .btn-subscribe { display: inline-flex; border: 0; border-radius: var(--radius); }

	.hero-title { font-size: 38px; }
	.hero-lede { font-size: 17.5px; }
	.latest-grid { grid-template-columns: 1fr; }
	.latest-card--main { grid-template-columns: 1fr; }
	.latest-card--main .card-body { padding: 24px; }
	.latest-card--main .card-title { font-size: 24px; }
	.deep-grid { grid-template-columns: 1fr; }
	.post-grid { grid-template-columns: 1fr; }
	.section-title { font-size: 26px; }
	.section-head { margin-top: 56px; }
	.quote-band { padding: 64px 0; }
	.beats-grid { grid-template-columns: 1fr; }
	.footer-bottom { justify-content: center; text-align: center; }
	.footer-widgets { grid-template-columns: 1fr; }
	.family-grid { grid-template-columns: 1fr; }

	/* About on mobile */
	.about-hero-band { padding-top: 56px; }
	.record { max-width: none; }
	.clause { grid-template-columns: 1fr; gap: 6px 0; }
	.method { grid-template-columns: 1fr; gap: 0; }
	.specimen { padding: 22px 20px 20px; }
	.spec-legend { grid-template-columns: 1fr; gap: 16px; }
	/* Credits go horizontal. Two full-width portraits stacked would push the
	   actual credit text a screen down and read as a photo gallery — which is
	   the CV failure mode this section exists to avoid. */
	.masthead { grid-template-columns: 1fr; gap: 26px; }
	.staff { grid-template-columns: 104px minmax(0, 1fr); gap: 0 18px; }
	.staff .portrait { --brk: 10px; --brk-off: -4px; }
	.staff .portrait--placeholder .avatar { width: 82%; }

	/* Privacy policy on mobile. Both multi-column lists go single-file, and the
	   tables keep their semantics and scroll rather than being stacked — the
	   stacking trick requires display:block, which throws away the row and
	   column headers a screen reader reads. */
	.clause-index-list { columns: 1; }
	.never-list { columns: 1; }
	.data-table { min-width: 460px; }
	.desk-row { flex-direction: column; align-items: flex-start; gap: 4px; }
	.empty-panel { padding: 56px 20px 38px; margin-bottom: 72px; }
	.nav-search .search-form { max-width: none; }

	/* Wire feed (The Globe landing) */
	.wire-status { letter-spacing: 0.1em; gap: 8px 16px; }
	.wire-status-count { margin-left: 0; }
	.wire-lead { grid-template-columns: 1fr; gap: 28px; padding-bottom: 24px; }
	.wire-lead .hero-cta { margin-top: 20px; }
	.wire-lead-title { font-size: 34px; }
	.dispatch { grid-template-columns: 34px 1fr auto; gap: 6px 14px; padding: 18px 2px; }
	.dispatch-title { font-size: 18px; }
	.dispatch-go { display: none; }

	/* Deep Dives dossier rows on mobile */
	.deep-dossier { grid-template-columns: 1fr; gap: 16px; padding: 36px 0; }
	.deep-dossier-num { font-size: 20px; padding-top: 0; }
	.deep-dossier-title { font-size: 28px; }
	.deep-dossier-media img { aspect-ratio: 16 / 10; }
	.deep-cover { letter-spacing: 0.1em; }

	/* Timeline / History on mobile — date stacks above the entry */
	.tl-row { grid-template-columns: 1fr; padding: 20px 0 20px 20px; }
	.tl::before { left: 6px; }
	.tl-row::before { left: 2px; top: 30px; }
	.tl-date { text-align: left; margin-bottom: 6px; }
	.tl-year { font-size: 30px; }
	.tl-title { font-size: 19px; }
	.tl-era { margin-top: 48px; }

	/* Geography on mobile */
	.geo-map-head { flex-direction: column; gap: 4px; }
	.geo-map-stage { padding: 12px; }
	.geo-index { columns: 1; }
	.field-grid { grid-template-columns: 1fr; }
	.geo-state { margin-top: 22px; }
	.geo-readout { flex-direction: column; gap: 4px; }

	/* Welfare registry filter + rows + sheet on mobile */
	.reg-filter-grid { grid-template-columns: 1fr; }
	.reg-filter-field--wide { grid-column: auto; }
	.reg-filter-actions { grid-column: auto; justify-self: start; }
	.reg-row { grid-template-columns: 1fr; }
	.reg-verified { white-space: normal; }
	.scheme-row { grid-template-columns: 1fr; gap: 4px; }
	.scheme-row dt { padding-top: 0; }

	/* Photos on mobile */
	.photo-record { grid-template-columns: 1fr; gap: 24px; }

	/* Feedback form + footer utility */
	.rf-grid { grid-template-columns: 1fr; }
	.rf-form { padding: 20px; }
	.footer-util { gap: 10px 20px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ticker-track { animation: none; }
	.signal-dot { animation: none; }
	[data-reveal] { opacity: 1; transform: none; transition: none; }
	.hero-copy > *, .hero-media { opacity: 1; animation: none; }
	* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   Print
   ============================================================ */
/* The About page is a masthead/colophon — the one page people actually print,
   and the only place the dark bands carry text worth keeping on paper. */
@media print {
	.topbar,
	.main-navigation,
	.ticker,
	.progress-bar,
	.nav-drawer,
	.footer-widgets { display: none !important; }

	/* About's closing plate is a colophon, and dropping it on paper is fine.
	   The privacy page's plate is the notice's only contact route — a printed
	   legal notice with no way to reach the publisher is defective, so it
	   stays. Same component, opposite call. */
	.about-desk { display: none !important; }
	.about-desk.policy-desk { display: block !important; background: none; }
	.about-desk.policy-desk .desk-val { color: #000; }

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

	/* Reveal animations must not hide content on paper. */
	[data-reveal] { opacity: 1 !important; transform: none !important; }

	/* Bands invert to plain paper so the method, specimen and masthead print. */
	.deep-band {
		background: none !important;
		padding: 0;
		margin-top: 30px;
	}
	.deep-band .section-title,
	.deep-band .step-title,
	.deep-band .specimen-title,
	.deep-band .brief-chip-val { color: #000; }
	.deep-band .section-num,
	.deep-band .section-num::before,
	.deep-band .step-num,
	.deep-band .specimen-kicker,
	.deep-band .brief-chip-key,
	.deep-band .brief-chip--concept::before { color: #000; }
	.deep-band .step-body,
	.deep-band .specimen-note,
	.deep-band .spec-pair dd,
	.deep-band .brief-chip,
	.deep-band .brief-chip--concept { color: #333; }
	/* The privacy band's own classes. Without this the kicker prints in green
	   and the notes print white-on-white. */
	.deep-band .about-tag { color: #000; }
	.deep-band .band-note { color: #333; }
	/* Tables must not be split across a page break mid-row. */
	.table-scroll { overflow: visible; }
	.data-table { min-width: 0; }
	.data-table tr,
	.policy-body table tr { break-inside: avoid; }
	.policy-body h2 { break-after: avoid; }
	.deep-band .section-head,
	.deep-band .step,
	.deep-band .specimen,
	.deep-band .spec-legend,
	.deep-band .brief-strip { border-color: #bbb; }

	.specimen { background: none; }
	.portrait--placeholder { background: none; border-color: #bbb; }
	.portrait--placeholder .avatar { background: #eee; color: #999; }
	.lead, a { color: #000; }
}