.tms-flash {
	background: var(--tms-color-breaking-soft, var(--tms-color-surface, #f7f7f7));
	border-block: 1px solid var(--tms-color-breaking-border, var(--tms-color-border, #e5e7eb));
	color: var(--tms-color-text, #111);
	font-size: 0.875rem;
	font-weight: 700;
}

.tms-flash--bar {
	background: var(--tms-color-breaking, #b91c1c);
	color: #fff;
}

.tms-flash__inner {
	padding-block: var(--tms-space-xs);
}

.tms-flash a {
	color: inherit;
}

/* Flash region inner presentation. The ONT plugin's stylesheet (kept — see inc/orion-compat.php)
   styles `.orion-flash*` in its own light palette and paints the inner `.orion-flash` a dark bg with
   light text, which would show as a dark box inside the theme's red/soft flash wrapper. The theme
   owns the flash chrome: it neutralises the plugin's inner bg/colour so the .tms-flash wrapper's
   background + text win, and restyles the nested list/dismiss to the theme layout (two-class
   specificity outranks the plugin's single-class rules). The dismiss behaviour is plugin JS (kept). */
.tms-flash .orion-flash {
	background: transparent;
	box-sizing: border-box;
	color: inherit;
}

.tms-flash .orion-flash * {
	box-sizing: border-box;
}

.tms-flash .orion-flash__inner {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	/* padding lived only in ONT's navigation.css (.orion-flash__inner); absorb it so the native
	   flash (ADR-040 A4) keeps its inset when that stylesheet is absent. */
	padding: 0.6rem 1rem;
}

.tms-flash .orion-flash__list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tms-flash .orion-flash__item {
	font-size: 0.9rem;
}

.tms-flash .orion-flash__link,
.tms-flash .orion-flash__label {
	align-items: center;
	color: inherit;
	display: inline-flex;
	gap: 0.4rem;
	text-decoration: none;
}

.tms-flash .orion-flash__link:hover,
.tms-flash .orion-flash__link:focus {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.tms-flash .orion-flash__item--emphasis-strong {
	font-weight: 700;
}

/* Alert emphasis: the plugin's `.orion-flash__item--emphasis-alert` paints red text. On the light
   strip that reads correctly (theme keeps the breaking red); on the breaking BAR the background is
   already `--tms-color-breaking`, so red-on-red is unreadable — override the colour back to inherit
   (white on the bar) and lean on an underline for the emphasis instead (Codex). */
.tms-flash:not(.tms-flash--bar) .orion-flash__item--emphasis-alert {
	color: var(--tms-color-breaking, #b91c1c);
}

.tms-flash--bar .orion-flash__item--emphasis-alert {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.2em;
}

.tms-flash .orion-flash__dismiss {
	appearance: none;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0.25rem;
}

.tms-flash .orion-flash a:focus-visible,
.tms-flash .orion-flash button:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 3px;
}

@media (max-width: 800px) {
	.tms-flash .orion-flash__inner {
		align-items: flex-start;
	}

	.tms-flash .orion-flash__list {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* -- ADR-035 S2: dark-only, class-tiered header chrome ------------------------
   The header is ALWAYS dark (it never flips with prefers-color-scheme) and takes
   its palette from the site's class tier. The chrome tokens are scoped to the
   header element and REMAP the theme color tokens the existing chrome rules
   already consume, so the whole header goes dark-only + tiered without editing
   every rule below. The page body keeps its light/dark `--tms-color-*` palette;
   only the header (and its descendants) are remapped.

   The tier is set by the site-design producer (ADR-035 S3) via `data-tms-tier`
   on the header element; when the attribute is absent the National / Global tier
   (institutional black) is the default. Tiers map the scope-anchor
   coverage_area_type: world/country -> national, state -> state, region ->
   regional, city -> city (ADR-035 Decision 2). */
[data-tms-site-header] {
	/* National / Global — institutional black + red (default when no tier attr).
	   Each colour is `var(--tms-chrome-*, <tier default>)`: the ADR-051 per-site
	   chrome (inc/header-chrome.php) sets the `--tms-chrome-*` seam vars from the
	   manifest `style.chrome` presets, overriding the tier default for exactly the
	   channels a producer picked; with none set the fallback is used, so the fleet's
	   header is byte-for-byte identical to before chrome shipped. */
	--tms-header-bg: var(--tms-chrome-bg, #0b0d10);
	--tms-header-raised: var(--tms-chrome-raised, #14161c);
	--tms-header-ink: var(--tms-chrome-ink, #f2f2f2);
	--tms-header-muted: var(--tms-chrome-muted, #9aa0aa);
	--tms-header-hairline: rgba(255, 255, 255, 0.12);
	--tms-header-accent: var(--tms-chrome-accent, #e5484d);

	/* Remap the tokens the chrome rules read — scoped to the header only. Text on
	   an accent fill (e.g. the CTA) reads `--tms-color-background`, which now
	   resolves to the dark chrome bg, giving dark ink on the bright accent. */
	--tms-color-background: var(--tms-header-bg);
	--tms-color-surface: var(--tms-header-raised);
	--tms-color-text: var(--tms-header-ink);
	--tms-color-muted: var(--tms-header-muted);
	--tms-color-border: var(--tms-header-hairline);
	--tms-color-accent: var(--tms-header-accent);
	--tms-color-primary: var(--tms-header-ink);
	--tms-color-accent-soft: color-mix(in srgb, var(--tms-header-accent) 16%, transparent);
	--tms-color-accent-border: color-mix(in srgb, var(--tms-header-accent) 45%, transparent);
}

[data-tms-site-header][data-tms-tier="state"] {
	/* State — Pacific navy + golden-poppy (tier default; ADR-051 chrome overrides
	   per channel via the same --tms-chrome-* seam). */
	--tms-header-bg: var(--tms-chrome-bg, #0a1a2f);
	--tms-header-raised: var(--tms-chrome-raised, #122a41);
	--tms-header-ink: var(--tms-chrome-ink, #eef2f8);
	--tms-header-muted: var(--tms-chrome-muted, #9fb2c9);
	--tms-header-accent: var(--tms-chrome-accent, #f4b740);
}

[data-tms-site-header][data-tms-tier="regional"] {
	/* Regional — desert umber + amber (tier default; ADR-051 chrome lets the producer
	   override the exact palette per site via the --tms-chrome-* seam). */
	--tms-header-bg: var(--tms-chrome-bg, #170f08);
	--tms-header-raised: var(--tms-chrome-raised, #241812);
	--tms-header-ink: var(--tms-chrome-ink, #f6efe3);
	--tms-header-muted: var(--tms-chrome-muted, #c6b295);
	--tms-header-accent: var(--tms-chrome-accent, #e0873b);
}

[data-tms-site-header][data-tms-tier="city"] {
	/* City — deep blue + gold (tier default; ADR-051 chrome overrides per channel). */
	--tms-header-bg: var(--tms-chrome-bg, #0a1220);
	--tms-header-raised: var(--tms-chrome-raised, #152238);
	--tms-header-ink: var(--tms-chrome-ink, #eaf0f7);
	--tms-header-muted: var(--tms-chrome-muted, #9fb0c6);
	--tms-header-accent: var(--tms-chrome-accent, #e8b23a);
}

/* Retint the ONT nav to the chrome palette. ONT defines its own `--orion-nav-*`
   defaults on `.orion-nav` (a light-header palette) and sets `color:
   var(--orion-nav-text)`, so those override anything inherited from the header —
   we override them back via ONT's documented theming hook at higher specificity
   (`.tms-site-header__nav .orion-nav` = two classes) so the nav goes light-on-dark
   and picks up the tier accent on hover/current. */
.tms-site-header__nav .orion-nav {
	/* `--orion-nav-bg` is ONT's panel background (#fff at :root) AND its
	   on-fill/inverse text colour, so it must move to the dark raised chrome
	   alongside the light text — otherwise an opened dropdown/mega panel renders
	   light ink on a white panel. Panels get the raised surface so they lift off
	   the bar; ONT's panel-shadow still reads on dark. */
	--orion-nav-bg: var(--tms-header-raised);
	--orion-nav-text: var(--tms-header-ink);
	--orion-nav-muted: var(--tms-header-muted);
	--orion-nav-border: var(--tms-header-hairline);
	--orion-nav-accent: var(--tms-header-accent);
}

/* Current-item underline for the header nav. ONT's navigation.css styled this
   (`.orion-nav__item.is-current … .orion-nav__link`, navigation.css:75), but ONT
   only enqueues that stylesheet when its own renderer runs, so under native
   rendering (ADR-040 A2/A6) it's absent. site-nav.js marks the current item's
   `.is-current` / `aria-current="page"` client-side; absorb the paint here. */
.tms-site-header__nav .orion-nav__item.is-current > .orion-nav__item-row > .orion-nav__link,
.tms-site-header__nav .orion-nav__link[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 0.14em;
	text-underline-offset: 0.24em;
}

.tms-site-header {
	background: var(--tms-color-background, #fff);
	/* Apply the (remapped) chrome ink so `color: inherit` descendants — the wordmark
	   and the nav links — read light-on-dark instead of inheriting the page body's dark text. */
	color: var(--tms-color-text, #111);
	border-bottom: 1px solid var(--tms-color-border, #e5e7eb);
	position: relative;
	z-index: 20;
}

/* -- Header v2 (TMS-1056) ------------------------------------------------------
   Row 1 (60 px): the wordmark, the Today slot, the date and weather, Search, Send a tip and the
   menu. Row 2 (44 px): the sections (.tms-site-header__nav). Once the header scrolls out of view,
   navigation.js marks it --compact and it is a 52 px bar fixed to the top; the shell keeps the
   header's height meanwhile, so the page never moves. Phones (max-width: 800px, below): menu, name
   and Search in a 52 px bar, then a sections row to swipe. */
.tms-site-header-shell {
	position: relative;
}

.tms-site-header-shell__sentinel {
	bottom: 0;
	height: 1px;
	left: 0;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

/* A link to a place on the page stops below the bar, not under it. */
html.tms-js {
	scroll-padding-top: 4.5rem;
}

.tms-site-header__bar {
	align-items: center;
	display: flex;
	gap: 16px;
	height: 60px;
}

/* The name as a wordmark: the place heavy, the network's generic words light italic
   (inc/header-bar.php splits them). */
.tms-wordmark {
	color: inherit;
	flex: none;
	font-family: var(--tms-font-headline);
	font-size: 1.875rem;
	letter-spacing: -0.02em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.tms-wordmark__place {
	font-weight: 700;
}

.tms-wordmark__word {
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* A name of generic words only ("The Daily News") is one weight. */
.tms-wordmark--plain .tms-wordmark__word {
	font-style: normal;
	font-weight: 650;
	letter-spacing: -0.02em;
}

.tms-wordmark:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 4px;
}

/* The Today slot: Breaking, else Latest. Empty, it still holds row 1's free space. */
.tms-site-header__today-slot {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

.tms-site-header__today {
	align-items: center;
	border-left: 1px solid var(--tms-header-hairline, rgba(255, 255, 255, 0.12));
	color: inherit;
	display: flex;
	font-size: 0.875rem;
	gap: 10px;
	margin-left: 4px;
	max-width: 100%;
	min-width: 0;
	padding-left: 18px;
	text-decoration: none;
}

.tms-site-header__today-flag {
	background: #dc2626;
	border-radius: 3px;
	color: #fff;
	flex: none;
	font-size: 0.65625rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 4px 7px 3px;
	text-transform: uppercase;
}

.tms-site-header__today-dot {
	background: var(--tms-header-accent, #e5484d);
	flex: none;
	height: 8px;
	width: 8px;
}

/* ADR-136 §7: "Live · Election results →" — the accent dot, round. */
.tms-site-header__today-dot--election {
	border-radius: 50%;
}

.tms-site-header__today-label {
	color: var(--tms-header-muted, #9aa0aa);
	flex: none;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tms-site-header__today-title {
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tms-site-header__today-arrow {
	color: var(--tms-header-muted, #9aa0aa);
	flex: none;
	font-weight: 600;
}

.tms-site-header__today:is(:hover, :focus-visible) .tms-site-header__today-title {
	text-decoration: underline;
	text-decoration-color: var(--tms-header-accent, #e5484d);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Search and the menu: icon buttons. */
.tms-site-header .tms-site-header__icon {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	flex: none;
	height: 40px;
	justify-content: center;
	padding: 0;
	width: 40px;
}

.tms-site-header .tms-site-header__icon:is(:hover, :focus-visible) {
	background: var(--tms-header-raised, #14161c);
}

.tms-site-header__icon svg {
	height: 20px;
	width: 20px;
}

.tms-site-header .tms-site-header__icon--menu {
	margin-right: -10px;
}

/* Send a tip: the header's one button in the site's accent. */
.tms-site-header__tip {
	align-items: center;
	background: var(--tms-header-accent, #e5484d);
	border-radius: 6px;
	color: var(--tms-chrome-accent-ink, #0b1018);
	display: inline-flex;
	flex: none;
	font-size: 0.8125rem;
	font-weight: 800;
	height: 34px;
	letter-spacing: 0.01em;
	padding: 0 14px;
	text-decoration: none;
	white-space: nowrap;
}

.tms-site-header__tip:is(:hover, :focus-visible) {
	filter: brightness(0.94);
}

.tms-site-header__tip:focus-visible {
	outline: 2px solid var(--tms-header-ink, #f2f2f2);
	outline-offset: 2px;
}

/* The phone's sections row; wider screens have row 2. */
.tms-site-header__sections {
	display: none;
}

/* The phone's Breaking row (ADR-118); wider screens carry the story in the Today slot. */
.tms-site-header__breaking {
	display: none;
}

/* The bar that sticks: the name, the slot, Search, Send a tip and the menu. */
.tms-site-header--compact {
	animation: tms-site-header-in 0.18s ease-out;
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.55);
	left: 0;
	position: fixed;
	right: 0;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.tms-site-header--compact .tms-site-header__bar {
	height: 52px;
}

.tms-site-header--compact .tms-site-header__when {
	display: none;
}

@keyframes tms-site-header-in {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tms-site-header--compact {
		animation: none;
	}
}

/* WordPress's toolbar scrolls away on narrow screens, so the bar goes to the very top there. */
@media (max-width: 600px) {
	.admin-bar .tms-site-header--compact {
		top: 0;
	}
}

@media (min-width: 801px) {
	.tms-site-header--compact .tms-wordmark {
		font-size: 1.375rem;
	}

	/* At the top every section is on row 2, so the menu button waits for the bar. In the bar it shows
	   row 2 again, under the bar. */
	.tms-site-header:not(.tms-site-header--compact) .tms-site-header__icon--menu {
		display: none;
	}

	.tms-site-header--compact .tms-site-header__nav:not([data-tms-menu-open]) {
		display: none;
	}
}

.tms-brand {
	align-items: center;
	color: inherit;
	display: inline-flex;
	font-family: var(--tms-font-headline);
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	text-decoration: none;
}

.tms-brand__logo {
	max-height: 76px;
	width: auto;
}

/* ADR-035 S3: the brand lockup — [mark · site name], left-aligned to the hamburger
   spine (the masthead is flex-start from S2). The mark is a slot (a per-site logo
   image, else a monogram placeholder until the TMS network glyph is finalised); the
   site name is always shown as text beside it and inherits the chrome ink. */
.tms-brand--lockup {
	font-size: 1.6rem;
	gap: var(--tms-space-sm);
}

.tms-brand__mark {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
}

.tms-brand--lockup .tms-brand__logo {
	max-height: 44px;
}

.tms-brand__monogram {
	align-items: center;
	background: var(--tms-color-accent, #b91c1c);
	border-radius: 9px;
	/* Text on the accent fill: a near-black ink that reads on the accent (ADR-051), falling back to
	   the filled-button idiom (page/header background) for non-chrome sites. The anchor is the header
	   GROUND, not a legible on-accent ink once it lightens, so chrome decouples this. */
	color: var(--tms-chrome-accent-ink, var(--tms-color-background, #fff));
	display: inline-flex;
	font-family: var(--tms-font-body, sans-serif);
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1;
	padding: 0.5rem 0.55rem;
}

.tms-brand__name {
	font-family: var(--tms-font-headline);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.tms-site-header__search-panel {
	background: var(--tms-color-surface, #f7f7f7);
	border-top: 1px solid var(--tms-color-border, #e5e7eb);
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.tms-search-js .tms-site-header__search-panel[hidden] {
	display: none;
}

/* With JavaScript, search opens over the page under the header, so nothing below it moves (TMS-1056). */
.tms-search-js .tms-site-header__search-panel {
	left: 0;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 45;
}

html:not(.tms-search-js) .tms-site-header__search-panel[hidden] {
	display: block;
}

.tms-site-header__search-inner {
	align-items: center;
	display: grid;
	gap: var(--tms-space-md);
	grid-template-columns: minmax(0, 1fr) auto;
	padding-block: var(--tms-space-md);
}

.tms-site-header__search-form :where(form) {
	display: flex;
	gap: var(--tms-space-sm);
}

.tms-site-header__search-form :where(input[type="search"], input[type="text"]) {
	border: 1px solid var(--tms-color-border, #e5e7eb);
	font: inherit;
	padding: 0.65rem 0.75rem;
	width: 100%;
}

.tms-site-header__search-form :where(input[type="submit"], button[type="submit"]) {
	background: var(--tms-color-primary, #111827);
	border: 1px solid var(--tms-color-primary, #111827);
	color: var(--tms-color-background, #fff);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	padding: 0.65rem 1rem;
}

.tms-site-header__nav {
	border-top: 1px solid var(--tms-color-border, #e5e7eb);
}

.tms-site-header__nav-inner {
	align-items: center;
	display: flex;
	justify-content: center;
}

.tms-site-header__nav :where(nav, .tms-nav, .orion-nav) {
	width: 100%;
}

.tms-site-header__nav :where(nav, .tms-nav, .orion-nav) > :where(ul, .menu, .orion-nav__list),
.tms-site-header__nav :where(nav, .tms-nav, .orion-nav) > div > :where(ul, .menu, .orion-nav__list),
.tms-site-header__nav :where(.orion-nav__list--root) {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--tms-space-lg);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tms-site-header__nav :where(li) {
	position: relative;
}

.tms-site-header__nav :where(a) {
	color: inherit;
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	padding-block: var(--tms-space-sm);
	text-decoration: none;
	text-transform: uppercase;
}

.tms-site-header__nav :where(a:hover, a:focus-visible) {
	/* ADR-051: on a chrome site keep the link INK on hover (a light-anchor accent as small text can
	   dip below AA 4.5:1) and show the accent as the underline instead. Non-chrome sites keep the
	   accent-text hover via the fallback. --tms-chrome-ink is only set when chrome is active. */
	color: var(--tms-chrome-ink, var(--tms-color-accent, #b91c1c));
	text-decoration: underline;
	text-decoration-color: var(--tms-color-accent, #b91c1c);
}

/* Classic-menu submenus ONLY — the wp_nav_menu fallback (`tms-nav--fallback`) used when the ONT
   plugin is inactive. No JS toggle, so hide + reveal on hover/focus. The live ONT nav's own
   `.orion-nav__panel` dropdowns are fully theme-owned (see "ONT nav — theme-owned" below). ONT's
   generic navigation.css is NOT dequeued — it is kept (inc/orion-compat.php) and the theme wins by
   specificity; the ONT-owned rules below are also self-sufficient, so the theme renders the header
   nav natively (ADR-040 A2) even with navigation.css absent. */
.tms-site-header__nav :where(.sub-menu, .children, [data-orion-mega], .orion-mega) {
	background: var(--tms-color-background, #fff);
	border: 1px solid var(--tms-color-border, #e5e7eb);
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
	display: none;
	left: 0;
	min-width: 240px;
	padding: var(--tms-space-md);
	position: absolute;
	top: 100%;
	z-index: 30;
}

.tms-site-header__nav :where(li:hover > .sub-menu, li:focus-within > .sub-menu, li:hover > .children, li:focus-within > .children, li:hover > [data-orion-mega], li:focus-within > [data-orion-mega], li:hover > .orion-mega, li:focus-within > .orion-mega) {
	display: grid;
	gap: var(--tms-space-sm);
}

.tms-site-header__nav :where(.sub-menu, .children, [data-orion-mega], .orion-mega) :where(ul, .orion-nav__list--submenu) {
	align-items: stretch;
	display: grid;
	gap: var(--tms-space-xs);
	justify-content: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ONT nav — theme-owned. The theme styles the header dropdown/mega panels in the dark tiered
   chrome and is self-sufficient: whether the markup comes from ONT's `[orion_nav]` shortcode
   (navigation.css kept, theme wins by specificity) or from the theme's own native renderer
   (ADR-040 A2, inc/orion-nav-render.php, navigation.css absent), these rules fully lay it out.
   Panels are click-toggled via the [hidden] attribute by ONT's navigation.js OR site-nav.js. */
.tms-site-header__nav .orion-nav__item-row {
	align-items: center;
	display: inline-flex;
	min-height: 2.75rem;
}

/* Nested rows (submenu / mega columns) drop the bar's row min-height so dropdown links stay compact
   and large panels do not overflow — ONT's navigation.css reset (navigation.css:139), theme-owned
   here for the native path (ADR-040 A2) where that stylesheet is absent. */
.tms-site-header__nav .orion-nav__list--submenu .orion-nav__item-row,
.tms-site-header__nav .orion-nav__list--mega-column .orion-nav__item-row {
	min-height: 0;
}

.tms-site-header__nav .orion-nav__label {
	align-items: center;
	display: inline-flex;
	gap: 0.4rem;
}

/* A section's name opens its menu too (site-nav.js, TMS-955), so it reads as clickable. The menus
   still open by script, never by a CSS :hover rule (GAP-13: hover-only menus were unreachable on
   touch). */
.tms-site-header__nav .orion-nav__item--has-children > .orion-nav__item-row > .orion-nav__label {
	cursor: pointer;
}

.tms-site-header__nav .orion-nav__toggle {
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	margin-left: 0.1rem;
	padding: var(--tms-space-sm) 0.4rem;
}

.tms-site-header__nav .orion-nav__toggle-icon {
	border-bottom: 2px solid currentcolor;
	border-right: 2px solid currentcolor;
	display: block;
	height: 0.42rem;
	transform: rotate(45deg) translateY(-0.1rem);
	transition: transform 0.15s ease;
	width: 0.42rem;
}

.tms-site-header__nav .orion-nav__toggle[aria-expanded="true"] .orion-nav__toggle-icon {
	transform: rotate(225deg);
}

.tms-site-header__nav .orion-nav__panel {
	background: var(--tms-header-raised, #152238);
	border: 1px solid var(--tms-header-hairline, rgba(255, 255, 255, 0.14));
	border-radius: 12px;
	box-shadow: 0 24px 54px -26px rgba(0, 0, 0, 0.8);
	left: 0;
	margin-top: 0.45rem;
	min-width: 15rem;
	padding: 0.9rem;
	position: absolute;
	top: 100%;
	z-index: 40;
}

.tms-site-header__nav .orion-nav__panel[hidden] {
	display: none;
}

.tms-site-header__nav .orion-nav__panel--mega {
	left: 50%;
	max-width: min(64rem, calc(100vw - 2rem));
	min-width: min(52rem, calc(100vw - 2rem));
	padding: 1.35rem;
	transform: translateX(-50%);
}

.tms-site-header__nav .orion-nav__mega-grid {
	display: grid;
	gap: 1.25rem 1.75rem;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.tms-site-header__nav .orion-nav__mega-heading {
	/* On a chrome site this small heading uses the light ink — the accent as SMALL TEXT can dip below
	   AA 4.5:1 on the raised panel for darker accents. Non-chrome sites keep the accent heading via the
	   fallback (weight + letter-spacing still set it apart). ADR-051 / Codex. */
	color: var(--tms-chrome-ink, var(--tms-header-accent));
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	margin: 0 0 0.55rem;
	text-transform: uppercase;
}

.tms-site-header__nav :where(.orion-nav__list--submenu, .orion-nav__list--mega-column) {
	display: grid;
	gap: 0.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tms-site-header__nav :where(.orion-nav__list--submenu, .orion-nav__list--mega-column) .orion-nav__link {
	border-radius: 7px;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0;
	padding: 0.4rem 0.55rem;
	text-transform: none;
	width: 100%;
}

.tms-site-header__nav :where(.orion-nav__list--submenu, .orion-nav__list--mega-column) .orion-nav__link:hover,
.tms-site-header__nav :where(.orion-nav__list--submenu, .orion-nav__list--mega-column) .orion-nav__link:focus-visible {
	background: color-mix(in srgb, var(--tms-header-accent) 16%, transparent);
	color: #fff;
	text-decoration: none;
}

.tms-site-header__nav .orion-nav__badge {
	background: var(--tms-header-accent);
	border-radius: 999px;
	color: #12100c;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	margin-left: 0.35rem;
	padding: 0.14rem 0.36rem;
}

/* Header mega menu (ADR-083, TMS-956), after AP News: a top-level item with children (the site's area
   item, every desk, a state or country site's Communities) opens one band the full width of the window
   under the bar, in the page's own colours (base.css --tms-page-*: white in light mode, navy in dark).
   Its blocks (inc/nav-mega.php) sit on the page's 1180 px grid, so no menu can run off the screen, and
   the open item turns into a tab in the band's colour. The panel stays inside its item, as site-nav.js's
   hover, keyboard and Escape handling needs; on the desktop bar the item and the lists around it are
   static, so the band positions from the nav row itself, which spans the header. */
.tms-site-header__nav .orion-nav__panel.tms-nav-mega {
	background: var(--tms-page-background, #fff);
	color: var(--tms-page-text, #111);
}

.tms-site-header__nav .tms-nav-mega__inner {
	display: grid;
	gap: 1.75rem;
}

.tms-site-header__nav .tms-nav-mega .orion-nav__mega-heading {
	color: var(--tms-page-muted, #6b7280);
	font-size: 0.75rem;
	margin: 0 0 1rem;
}

.tms-site-header__nav .tms-nav-mega a {
	color: var(--tms-page-text, #111);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
	padding: 0;
	text-transform: none;
}

.tms-site-header__nav .tms-nav-mega a:is(:hover, :focus-visible) {
	background: none;
	color: var(--tms-page-text, #111);
	text-decoration: underline;
	text-decoration-color: var(--tms-header-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* "Beats in Hesperia | All news →" (ADR-085 Decision 4, TMS-959): the area's page sits in the heading row,
   after a hairline, set as the heading and underlined. The row never wraps: a long heading wraps its own
   words beside the link, so the hairline always sits between the two. The link is a block, not the bar's
   inline-flex, so one underline runs under its words and arrow and the space between them stays. */
.tms-site-header__nav .tms-nav-mega__heading-row {
	align-items: baseline;
	display: flex;
	gap: 0.75rem;
	margin: 0 0 1rem;
}

.tms-site-header__nav .tms-nav-mega__heading-row > .orion-nav__mega-heading {
	margin: 0;
}

.tms-site-header__nav .tms-nav-mega a.tms-nav-mega__all {
	border-inline-start: 1px solid var(--tms-page-border, #e5e7eb);
	display: block;
	flex: none;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding-inline-start: 0.75rem;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-transform: uppercase;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.tms-site-header__nav .tms-nav-mega a.tms-nav-mega__all:is(:hover, :focus-visible) {
	text-decoration-color: var(--tms-header-accent);
	text-decoration-thickness: 2px;
}

/* The links run down one column, then the next: ranked beats read in rank order. */
.tms-site-header__nav .tms-nav-mega__links {
	column-gap: 1.75rem;
	columns: 2;
	display: block;
}

.tms-site-header__nav .tms-nav-mega__links > li {
	break-inside: avoid;
	padding-bottom: 0.7rem;
}

/* The item's own links under the beats (High Desert →, California →); none sent, no row. */
.tms-site-header__nav .tms-nav-mega__more {
	border-top: 1px solid var(--tms-page-border, #e5e7eb);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 1rem 0 0;
}

/* The link is inline-flex (the bar's link rule), which drops the space before the arrow: gap puts it back. */
.tms-site-header__nav .tms-nav-mega__more a {
	font-size: 0.875rem;
	font-weight: 700;
	gap: 0.3em;
}

/* The site's own band lists its mapped neighbours (ADR-088, TMS-960): "NEARBY  Victorville →", a row of its own
   ahead of the item's links, labelled as the band's headings are. It takes the hairline, and the item's links
   sit under it without a second one. The row wraps, in the phone drawer as on the desktop band. */
.tms-site-header__nav .tms-nav-mega__nearby {
	align-items: baseline;
	border-top: 1px solid var(--tms-page-border, #e5e7eb);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
	margin: 0.6rem 0 0;
	padding: 1rem 0 0;
}

.tms-site-header__nav .tms-nav-mega__nearby-label {
	color: var(--tms-page-muted, #6b7280);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tms-site-header__nav .tms-nav-mega__nearby > .tms-nav-mega__more {
	border-top: 0;
	margin: 0;
	padding: 0;
}

.tms-site-header__nav .tms-nav-mega__nearby + .tms-nav-mega__more {
	border-top: 0;
	margin-top: 0;
	padding-top: 0.75rem;
}

.tms-site-header__nav .tms-nav-mega__stories {
	display: grid;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tms-site-header__nav .tms-nav-mega__story {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 0.5rem minmax(0, 1fr);
}

.tms-site-header__nav .tms-nav-mega__story::before {
	background: var(--tms-header-accent);
	content: "";
	height: 0.5rem;
	margin-top: 0.5rem;
	width: 0.5rem;
}

.tms-site-header__nav .tms-nav-mega__story a {
	display: inline;
	line-height: 1.38;
}

.tms-site-header__nav .tms-nav-mega a.tms-nav-mega__brief-title {
	display: block;
	font-family: var(--tms-font-headline);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 0.5rem;
}

.tms-site-header__nav .tms-nav-mega__brief-pitch {
	color: var(--tms-page-muted, #6b7280);
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0 0 1.1rem;
}

.tms-site-header__nav .tms-nav-mega__brief-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.1rem;
	margin: 0;
}

.tms-site-header__nav .tms-nav-mega a.tms-nav-mega__brief-button {
	background: var(--tms-header-accent);
	border-radius: 6px;
	color: var(--tms-chrome-accent-ink, var(--tms-header-bg));
	font-size: 0.875rem;
	font-weight: 800;
	padding: 0.6rem 1rem;
}

.tms-site-header__nav .tms-nav-mega a.tms-nav-mega__brief-button:is(:hover, :focus-visible) {
	color: var(--tms-chrome-accent-ink, var(--tms-header-bg));
	filter: brightness(1.08);
	text-decoration: none;
}

.tms-site-header__nav .tms-nav-mega a.tms-nav-mega__brief-all {
	font-size: 0.875rem;
	font-weight: 700;
}

@media (min-width: 801px) {
	.tms-site-header__nav {
		position: relative;
	}

	/* Row 2 (TMS-1056): the sections in one line from the left, every item in one style — the desks
	   are labels, which missed the links' style before. */
	.tms-site-header__nav .tms-site-header__nav-inner {
		justify-content: flex-start;
	}

	/* When the site's sections are wider than the window (801–1180 px: High Desert's ten at 1024 px),
	   row 2 scrolls sideways on its own instead of the whole page. The bands still open full width: they
	   hang from .tms-site-header__nav, and nothing between is positioned, so this scroller doesn't clip
	   them. The list starts 11 px into the gutter so the first item's open tab has room on its left. */
	.tms-site-header__nav .orion-nav {
		min-width: 0;
	}

	.tms-site-header__nav .orion-nav__list--root {
		flex-wrap: nowrap;
		gap: 0;
		justify-content: flex-start;
		margin-left: -11px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding-left: 11px;
		scrollbar-width: none;
	}

	.tms-site-header__nav .orion-nav__list--root::-webkit-scrollbar {
		display: none;
	}

	/* Inside the scroller a ring drawn outside the 44 px row would be cut; draw it inside. */
	.tms-site-header__nav .orion-nav__list--root > .orion-nav__item > .orion-nav__item-row > :is(.orion-nav__link, .orion-nav__label, .orion-nav__toggle):focus-visible {
		outline-offset: -3px;
	}

	.tms-site-header__nav .orion-nav__list--root > .orion-nav__item {
		align-items: center;
		display: flex;
	}

	/* Each row is the box for its toggle's screen-reader label. With nothing positioned between that label
	   and the nav row, the 1 px label sat at the far end of a scrolled row 2 and widened the page by the
	   row's overflow (87 px for High Desert at 1024 px). The band is the row's sibling, so it still hangs
	   from the nav row. */
	.tms-site-header__nav .orion-nav__list--root > .orion-nav__item > .orion-nav__item-row {
		min-height: 44px;
		position: relative;
	}

	.tms-site-header__nav .orion-nav__list--root > .orion-nav__item > .orion-nav__item-row > :is(.orion-nav__link, .orion-nav__label) {
		align-items: center;
		color: inherit;
		display: inline-flex;
		font-size: 0.78125rem;
		font-weight: 700;
		gap: 6px;
		height: 44px;
		letter-spacing: 0.06em;
		padding: 0 11px;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.tms-site-header__nav .orion-nav__list--root > .orion-nav__item > .orion-nav__item-row > :is(.orion-nav__link, .orion-nav__label):not(:last-child) {
		padding-right: 2px;
	}

	.tms-site-header__nav .orion-nav__list--root > .orion-nav__item:first-child > .orion-nav__item-row > :is(.orion-nav__link, .orion-nav__label) {
		padding-left: 0;
	}

	.tms-site-header__nav .orion-nav__list--root > .orion-nav__item > .orion-nav__item-row > .orion-nav__toggle {
		height: 44px;
		margin-left: 0;
		padding: 0 11px 0 4px;
	}

	.tms-site-header__nav .orion-nav__list--root > .orion-nav__item > .orion-nav__item-row > .orion-nav__label:hover {
		text-decoration: underline;
		text-decoration-color: var(--tms-header-accent, #e5484d);
	}

	/* The site's own area wears a pin in the accent. */
	.tms-site-header__nav .orion-nav__list--root > [data-tms-nav-anchor] > .orion-nav__item-row > .orion-nav__link::before {
		background-color: var(--tms-header-accent, #e5484d);
		content: "";
		flex: none;
		height: 12px;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2.5a7 7 0 0 0-7 7c0 5.2 7 12 7 12s7-6.8 7-12a7 7 0 0 0-7-7zm0 9.6a2.6 2.6 0 1 1 0-5.2 2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2.5a7 7 0 0 0-7 7c0 5.2 7 12 7 12s7-6.8 7-12a7 7 0 0 0-7-7zm0 9.6a2.6 2.6 0 1 1 0-5.2 2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
		width: 12px;
	}

	/* A hairline between the site's areas (or Communities) and the desks. */
	.tms-site-header__nav .orion-nav__list--root > :is(.orion-nav__item--coverage_area, .orion-nav__item--mega) + .orion-nav__item:not(.orion-nav__item--coverage_area, .orion-nav__item--mega)::before {
		background: var(--tms-header-hairline, rgba(255, 255, 255, 0.12));
		content: "";
		height: 16px;
		margin-right: 6px;
		width: 1px;
	}

	.tms-site-header__nav .orion-nav,
	.tms-site-header__nav .orion-nav__list--root,
	.tms-site-header__nav .orion-nav__item--band {
		position: static;
	}

	.tms-site-header__nav .orion-nav__panel.tms-nav-mega {
		border: 0;
		border-bottom: 1px solid var(--tms-page-border, #e5e7eb);
		border-radius: 0;
		box-shadow: 0 32px 48px -32px rgba(0, 0, 0, 0.55);
		left: 0;
		margin-top: 0;
		max-width: none;
		min-width: 0;
		padding: 0;
		right: 0;
		transform: none;
	}

	.tms-site-header__nav .tms-nav-mega__inner {
		gap: 1.75rem 3.5rem;
		grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 4fr);
		margin-inline: auto;
		max-width: var(--tms-layout-container);
		padding-block: 1.9rem 2.1rem;
	}

	/* No brief on this site today (or no story yet): Latest takes its width. */
	.tms-site-header__nav :is(.tms-nav-mega--no-latest, .tms-nav-mega--no-brief) .tms-nav-mega__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 9fr);
	}

	.tms-site-header__nav .tms-nav-mega--no-latest.tms-nav-mega--no-brief .tms-nav-mega__inner,
	.tms-site-header__nav .tms-nav-mega--columns .tms-nav-mega__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The open item: a tab in the band's colour, joined to it. The tab is the item's own box: row 2's
	   items sit edge to edge (TMS-1056), each with 11 px either side of its words, so a tab reaching
	   0.75rem past that covered the chevron before it and the next item's first letter. The first item
	   has no space on its left, so its tab reaches into the gutter on that side only. */
	.tms-site-header__nav .orion-nav__item--band > .orion-nav__item-row:has(> .orion-nav__toggle[aria-expanded="true"]) {
		background: var(--tms-page-background, #fff);
		border-radius: 8px 8px 0 0;
		color: var(--tms-page-text, #111);
	}

	.tms-site-header__nav .orion-nav__list--root > .orion-nav__item--band:first-child > .orion-nav__item-row:has(> .orion-nav__toggle[aria-expanded="true"]) {
		margin-left: -11px;
		padding-left: 11px;
	}

	.tms-site-header__nav .orion-nav__item--band > .orion-nav__item-row:has(> .orion-nav__toggle[aria-expanded="true"]) a:is(:hover, :focus-visible) {
		color: var(--tms-page-text, #111);
	}
}

/* The phone drawer, as AP's phone menu: each top-level row spans the drawer with a hairline under it, the
   open row is raised, and its band opens inline beneath it, in the page colour edge to edge, its blocks
   stacked. The rows pad themselves, so the drawer drops the container's gutter (for the Orion nav only;
   the classic-menu fallback keeps it). */
@media (max-width: 800px) {
	.tms-site-header__nav .tms-site-header__nav-inner:has(> .orion-nav) {
		max-width: none;
	}

	.tms-site-header__nav .orion-nav__list--root > .orion-nav__item {
		border-bottom: 1px solid var(--tms-color-border, #e5e7eb);
	}

	.tms-site-header__nav .orion-nav__list--root > .orion-nav__item > .orion-nav__item-row {
		display: flex;
		min-height: 3.4rem;
		padding-inline: 1rem 0.35rem;
	}

	.tms-site-header__nav .orion-nav__list--root > .orion-nav__item > .orion-nav__item-row > :is(.orion-nav__link, .orion-nav__label) {
		border-bottom: 0;
		flex: 1 1 auto;
	}

	.tms-site-header__nav .orion-nav__panel.tms-nav-mega {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		margin: 0;
		padding: 1.35rem 1rem 1.6rem;
		position: static;
	}

	.tms-site-header__nav .tms-nav-mega a {
		border-bottom: 0;
		justify-content: flex-start;
	}

	.tms-site-header__nav .orion-nav__item--band > .orion-nav__item-row:has(> .orion-nav__toggle[aria-expanded="true"]) {
		background: var(--tms-header-raised);
	}
}

/* top_stories at the ROOT of the bar: the renderer emits a recent-posts widget inline as a
   top-level nav item, which breaks the horizontal bar. Hide the root-level widget only (a direct
   child of the root list) — a deliberately-nested top_stories inside a mega panel is a documented
   use and is styled by the theme below, so it must survive (Codex). */
.tms-site-header__nav .orion-nav__list--root > .orion-nav__item--top-stories {
	display: none;
}

/* Nested top_stories widget (inside a mega panel) — theme-owned so it lays out whether ONT's
   navigation.css is present (shortcode path) or absent (native render, ADR-040 A2): the recent-
   stories list plus thumbnail/title/date rows, and a reset of the uppercase bar-link styling the
   theme's generic `:where(a)` rule would otherwise leak into the story links. */
.tms-site-header__nav .orion-nav__top-stories-heading {
	/* Chrome sites use the light ink (accent-as-small-text can fail AA on the raised panel); non-chrome
	   keeps the accent heading via the fallback. ADR-051 / Codex. */
	color: var(--tms-chrome-ink, var(--tms-header-accent));
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	margin: 0 0 0.55rem;
	text-transform: uppercase;
}

.tms-site-header__nav .orion-nav__top-stories-list {
	display: grid;
	gap: 0.65rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tms-site-header__nav .orion-nav__top-story a {
	color: inherit;
	display: grid;
	font-weight: 400;
	gap: 0.5rem;
	grid-template-columns: 4rem 1fr;
	letter-spacing: 0;
	padding: 0;
	text-decoration: none;
	text-transform: none;
}

.tms-site-header__nav .orion-nav__top-story-image {
	height: 3rem;
	object-fit: cover;
	width: 4rem;
}

.tms-site-header__nav .orion-nav__top-story-title {
	font-weight: 650;
}

.tms-site-header__nav .orion-nav__top-story-date {
	color: var(--tms-header-muted);
	font-size: 0.75rem;
	grid-column: 2;
}

.tms-menu-toggle,
.tms-header-action {
	background: transparent;
	border: 1px solid var(--tms-color-border, #e5e7eb);
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.55rem 0.8rem;
	text-decoration: none;
}

.tms-menu-toggle:hover,
.tms-menu-toggle:focus-visible,
.tms-header-action:hover,
.tms-header-action:focus-visible {
	background: var(--tms-color-accent-soft, transparent);
	border-color: var(--tms-color-accent-border, var(--tms-color-border, #e5e7eb));
}

.tms-menu-toggle__icon,
.tms-menu-toggle__icon::before,
.tms-menu-toggle__icon::after {
	background: currentcolor;
	display: block;
	height: 2px;
	width: 18px;
}

.tms-menu-toggle__icon {
	position: relative;
}

.tms-menu-toggle__icon::before,
.tms-menu-toggle__icon::after {
	content: "";
	left: 0;
	position: absolute;
}

.tms-menu-toggle__icon::before {
	top: -6px;
}

.tms-menu-toggle__icon::after {
	top: 6px;
}

/* The date and the weather (ADR-034; TMS-1056): "Friday, October 2 | 60° Colusa", the weather drawn as a
   glyph (inc/weather.php picks the key from OpenWeather's icon). */
.tms-site-header__when {
	align-items: center;
	color: var(--tms-header-muted, #9aa0aa);
	display: flex;
	flex: none;
	font-size: 0.8125rem;
	gap: 12px;
	white-space: nowrap;
}

.tms-site-header__date {
	color: inherit;
	white-space: nowrap;
}

.tms-site-header__date + .tms-site-header__weather {
	border-left: 1px solid var(--tms-header-hairline, rgba(255, 255, 255, 0.12));
	padding-left: 12px;
}

/* Narrow desktops (801–1100 px): the date gives way, so row 1 keeps a long name, the slot, the weather and
   the buttons on one line ("San Francisco Bay Area Online" ran 31 px past the bar at 801 px). */
@media (min-width: 801px) and (max-width: 1100px) {
	.tms-site-header__date {
		display: none;
	}

	.tms-site-header__date + .tms-site-header__weather {
		border-left: 0;
		padding-left: 0;
	}
}

.tms-site-header__weather {
	align-items: center;
	color: var(--tms-header-ink, #f2f2f2);
	display: inline-flex;
	font-weight: 700;
	gap: 5px;
	white-space: nowrap;
}

.tms-site-header__weather-place {
	color: var(--tms-header-muted, #9aa0aa);
	font-weight: 500;
}

.tms-weather-glyph {
	background-color: currentcolor;
	flex: none;
	height: 18px;
	-webkit-mask: var(--tms-weather-glyph) center / contain no-repeat;
	mask: var(--tms-weather-glyph) center / contain no-repeat;
	width: 18px;
}

.tms-weather-glyph:not([data-glyph]) {
	display: none;
}

.tms-weather-glyph[data-glyph="clear-day"] {
	--tms-weather-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/svg%3E");
}

.tms-weather-glyph[data-glyph="clear-night"] {
	--tms-weather-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 14.6A7.8 7.8 0 1 1 9.4 4.5a6.2 6.2 0 0 0 10.1 10.1z'/%3E%3C/svg%3E");
}

.tms-weather-glyph[data-glyph="partly-day"] {
	--tms-weather-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.8v1.6M2.8 8h1.6M4.3 4.3l1.1 1.1M11.7 4.3l-1.1 1.1M5.4 11.2a3.4 3.4 0 0 1 6-4.3'/%3E%3Cpath d='M9.6 19.5h7.6a3.2 3.2 0 0 0 .4-6.4 4.4 4.4 0 0 0-8.5 1.1 2.7 2.7 0 0 0 .5 5.3z'/%3E%3C/svg%3E");
}

.tms-weather-glyph[data-glyph="partly-night"] {
	--tms-weather-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.6 7.4A4.6 4.6 0 0 1 5 12.6 5 5 0 0 0 11.6 7.4z'/%3E%3Cpath d='M9.6 19.5h7.6a3.2 3.2 0 0 0 .4-6.4 4.4 4.4 0 0 0-8.5 1.1 2.7 2.7 0 0 0 .5 5.3z'/%3E%3C/svg%3E");
}

.tms-weather-glyph[data-glyph="cloud"] {
	--tms-weather-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 18.5h9.2a3.8 3.8 0 0 0 .5-7.6 5.3 5.3 0 0 0-10.2 1.3A3.2 3.2 0 0 0 7.5 18.5z'/%3E%3C/svg%3E");
}

.tms-weather-glyph[data-glyph="rain"] {
	--tms-weather-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 14.5h9.2a3.8 3.8 0 0 0 .5-7.6 5.3 5.3 0 0 0-10.2 1.3A3.2 3.2 0 0 0 7.5 14.5z'/%3E%3Cpath d='M8.5 17.5l-1 2.6M12.5 17.5l-1 2.6M16.5 17.5l-1 2.6'/%3E%3C/svg%3E");
}

.tms-weather-glyph[data-glyph="thunder"] {
	--tms-weather-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 14.5h9.2a3.8 3.8 0 0 0 .5-7.6 5.3 5.3 0 0 0-10.2 1.3A3.2 3.2 0 0 0 7.5 14.5z'/%3E%3Cpath d='M12.8 16l-2.2 3.4h3l-2 3.1'/%3E%3C/svg%3E");
}

.tms-weather-glyph[data-glyph="snow"] {
	--tms-weather-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 14.5h9.2a3.8 3.8 0 0 0 .5-7.6 5.3 5.3 0 0 0-10.2 1.3A3.2 3.2 0 0 0 7.5 14.5z'/%3E%3Cpath d='M8.5 18h.01M12 19.5h.01M15.5 18h.01M10.2 21.5h.01M13.8 21.5h.01'/%3E%3C/svg%3E");
}

.tms-weather-glyph[data-glyph="fog"] {
	--tms-weather-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8.5h14M3.5 12.5h17M6 16.5h12'/%3E%3C/svg%3E");
}

.tms-card {
	border-top: 1px solid var(--tms-color-border, #e5e7eb);
	padding-top: var(--tms-space-md);
}

.tms-card--type-breaking-news {
	border-top-color: var(--tms-color-breaking-border, var(--tms-color-breaking, #b91c1c));
}

.tms-card--type-investigation {
	border-top-color: var(--tms-color-investigation-border, var(--tms-color-investigation, #374151));
}

.tms-card--type-explainer {
	border-top-color: var(--tms-color-explainer-border, var(--tms-color-explainer, #2563eb));
}

.tms-card--type-analysis {
	border-top-color: var(--tms-color-analysis-border, var(--tms-color-analysis, #7c3aed));
}

.tms-card__media {
	display: block;
	margin-bottom: var(--tms-space-sm);
}

.tms-card__media--placeholder {
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--tms-color-surface, #f7f7f7), var(--tms-color-surface-alt, #f1f5f9));
	border: 1px solid var(--tms-color-border, #e5e7eb);
}

.tms-card__image {
	aspect-ratio: 16 / 9;
	display: block;
	object-fit: cover;
	width: 100%;
}

.tms-card__kicker,
.tms-kicker {
	color: var(--tms-color-accent, #b91c1c);
	font-size: 0.75rem;
	font-weight: var(--tms-weight-label, 600);
	letter-spacing: 0.08em;
	margin: 0 0 0.35rem;
	text-transform: uppercase;
}

.tms-kicker--breaking-news,
.tms-card--type-breaking-news .tms-card__kicker {
	color: var(--tms-color-breaking, #b91c1c);
}

.tms-kicker--investigation,
.tms-card--type-investigation .tms-card__kicker {
	color: var(--tms-color-investigation, #374151);
}

.tms-kicker--explainer,
.tms-card--type-explainer .tms-card__kicker {
	color: var(--tms-color-explainer, #2563eb);
}

.tms-kicker--analysis,
.tms-card--type-analysis .tms-card__kicker {
	color: var(--tms-color-analysis, #7c3aed);
}

/* Honest-location chip: a locality tag under the category kicker, fed by the true location.
   Omitted entirely when the post has no true-location meta (rendered only by the template). */
.tms-card__location {
	color: var(--tms-color-muted, #6b7280);
	font-size: 0.75rem;
	font-weight: var(--tms-weight-label, 600);
	letter-spacing: 0.01em;
	margin: 0 0 0.4rem;
}

.tms-card__title {
	font-family: var(--tms-font-headline);
	font-size: 1.25rem;
	font-weight: var(--tms-weight-title, 600);
	line-height: 1.15;
	margin: 0;
}

.tms-card--lead .tms-card__title {
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: var(--tms-weight-headline, 700);
}

/* The red Breaking flag (ADR-118): a story still breaking carries it before its headline, as the header's
   Today slot does (.tms-site-header__today-flag). */
.tms-flag {
	display: inline-block;
	font-family: var(--tms-font-body);
	font-size: 0.65625rem;
	font-style: normal;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 4px 7px 3px;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

.tms-flag--breaking {
	background: #dc2626;
	border-radius: 3px;
	color: #fff;
}

.tms-card__title .tms-flag {
	margin-right: 0.4em;
	position: relative;
	top: -0.1em;
}

.tms-card--compact .tms-card__title,
.tms-card--headline .tms-card__title {
	font-family: var(--tms-font-list, var(--tms-font-body));
	font-size: 1rem;
	font-weight: var(--tms-weight-list, 600);
	letter-spacing: 0;
	line-height: 1.3;
}

.tms-card--river {
	display: grid;
	gap: var(--tms-space-md);
	grid-template-columns: minmax(120px, 0.35fr) minmax(0, 1fr);
}

.tms-card--river .tms-card__media {
	margin-bottom: 0;
}

.tms-card--photo {
	background: var(--tms-color-primary, #111827);
	color: var(--tms-color-background, #fff);
	padding: var(--tms-space-md);
}

.tms-card--photo .tms-card__kicker,
.tms-card--photo .tms-card__location,
.tms-card--photo .tms-card__meta,
.tms-card--photo .tms-card__excerpt {
	color: inherit;
}

.tms-card__title a {
	color: inherit;
	text-decoration: none;
}

.tms-card__title a:hover,
.tms-card__title a:focus {
	color: var(--tms-color-accent-hover, inherit);
	text-decoration: underline;
}

.tms-card__excerpt,
.tms-card__meta {
	color: var(--tms-color-muted, #6b7280);
	margin-bottom: 0;
}

.tms-card__meta {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.8125rem;
	gap: 0.35rem 0.75rem;
}

/* -- Footer v2 (TMS-1057) ------------------------------------------------------
   The name block (300 px), then the columns: Places, each desk, The newsroom, Our standards; then
   one legal line. The footer takes the header's per-tier chrome, ground AND ink: each value is
   `var(--tms-chrome-*, <tier default>)`, the seam inc/header-chrome.php sets on both bands (ADR-051),
   so a site's chrome preset repaints the footer to match its header. Links rest without an underline
   and take one in the site's accent on hover. On phones each column folds under its heading
   (navigation.js closes the <details>; without JavaScript they stay open). */
.tms-site-footer {
	--tms-color-footer-bg: var(--tms-chrome-bg, #0b0d10);
	--tms-color-footer-text: var(--tms-chrome-ink, #f2f2f2);
	--tms-footer-muted: var(--tms-chrome-muted, #9aa0aa);
	--tms-footer-accent: var(--tms-chrome-accent, #e5484d);
	--tms-footer-rule: color-mix(in srgb, var(--tms-color-footer-text) 14%, transparent);
	--tms-footer-hairline: color-mix(in srgb, var(--tms-color-footer-text) 24%, transparent);
	/* The focus ring (base.css) reads the accent: the site's, on the dark band. */
	--tms-color-accent: var(--tms-footer-accent);
	background: var(--tms-color-footer-bg);
	color: var(--tms-color-footer-text);
	margin-top: var(--tms-space-2xl);
}

.tms-site-footer[data-tms-tier="state"] {
	--tms-color-footer-bg: var(--tms-chrome-bg, #0a1a2f);
	--tms-color-footer-text: var(--tms-chrome-ink, #eef2f8);
	--tms-footer-muted: var(--tms-chrome-muted, #9fb2c9);
	--tms-footer-accent: var(--tms-chrome-accent, #f4b740);
}

.tms-site-footer[data-tms-tier="regional"] {
	--tms-color-footer-bg: var(--tms-chrome-bg, #170f08);
	--tms-color-footer-text: var(--tms-chrome-ink, #f6efe3);
	--tms-footer-muted: var(--tms-chrome-muted, #c6b295);
	--tms-footer-accent: var(--tms-chrome-accent, #e0873b);
}

.tms-site-footer[data-tms-tier="city"] {
	--tms-color-footer-bg: var(--tms-chrome-bg, #0a1220);
	--tms-color-footer-text: var(--tms-chrome-ink, #eaf0f7);
	--tms-footer-muted: var(--tms-chrome-muted, #9fb0c6);
	--tms-footer-accent: var(--tms-chrome-accent, #e8b23a);
}

.tms-site-footer a {
	color: inherit;
	text-decoration: none;
}

.tms-site-footer a:hover,
.tms-site-footer a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--tms-footer-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.tms-site-footer__inner {
	padding-top: 52px;
}

.tms-site-footer__top {
	display: grid;
	gap: 48px;
	grid-template-columns: 300px minmax(0, 1fr);
}

/* The name breaks only between its runs: each run is a flex item (TMS-1056's split of the place and
   the generic words). A place of 16+ characters sets at 30 px, 21+ at 27 px (inc/footer.php). */
.tms-site-footer__name {
	align-items: baseline;
	column-gap: 0.24em;
	display: flex;
	flex-wrap: wrap;
	font-family: var(--tms-font-headline);
	font-size: 2.125rem;
	letter-spacing: -0.02em;
	line-height: 1.06;
}

.tms-site-footer__name--s30 {
	font-size: 1.875rem;
}

.tms-site-footer__name--s27 {
	font-size: 1.6875rem;
}

.tms-site-footer__place {
	font-weight: 700;
	max-width: 100%;
	min-width: 0;
}

.tms-site-footer__word {
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
	max-width: 100%;
	min-width: 0;
}

.tms-site-footer__name--plain .tms-site-footer__word {
	font-style: normal;
	font-weight: 650;
}

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

.tms-site-footer__logo {
	display: block;
	height: 52px;
	max-width: 100%;
	width: auto;
}

.tms-site-footer .tms-site-footer__network {
	color: var(--tms-footer-muted);
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	margin-top: 16px;
	text-transform: uppercase;
}

.tms-site-footer__call {
	display: block;
	margin: 30px 0 0;
}

.tms-site-footer__call-label {
	color: var(--tms-footer-muted);
	display: block;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.tms-site-footer__call-number {
	display: block;
	font-family: var(--tms-font-headline);
	font-size: 1.875rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.tms-site-footer__follow {
	align-items: center;
	color: var(--tms-footer-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.8125rem;
	gap: 10px;
	margin-top: 28px;
}

.tms-site-footer .tms-site-footer__social {
	align-items: center;
	border: 1px solid var(--tms-footer-hairline);
	border-radius: 999px;
	color: var(--tms-color-footer-text);
	display: inline-flex;
	height: 36px;
	justify-content: center;
	min-width: 36px;
}

.tms-site-footer .tms-site-footer__social:hover,
.tms-site-footer .tms-site-footer__social:focus-visible {
	border-color: var(--tms-footer-accent);
	text-decoration: none;
}

.tms-site-footer__social svg {
	height: 17px;
	width: 17px;
}

.tms-site-footer .tms-site-footer__social--text {
	font-size: 0.8125rem;
	font-weight: 700;
	padding: 0 12px;
}

.tms-site-footer__columns {
	align-content: start;
	display: grid;
	gap: 40px 32px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tms-site-footer__column {
	min-width: 0;
}

/* Desktop: the summary is the column's heading, not a control (navigation.js keeps the column open). */
.tms-site-footer__summary {
	cursor: default;
	display: block;
	list-style: none;
}

.tms-site-footer__summary::-webkit-details-marker {
	display: none;
}

.tms-site-footer__heading {
	color: var(--tms-footer-muted);
	font-family: inherit;
	font-size: 0.71875rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.3;
	margin: 0 0 16px;
	text-transform: uppercase;
}

.tms-site-footer__heading::before {
	background: var(--tms-footer-accent);
	content: "";
	display: block;
	height: 2px;
	margin-bottom: 12px;
	width: 24px;
}

/* The list sets the links' size and line, so each row is 15 px type on a 19.5 px line, 11 px apart; set on the
   links alone, each row would keep the body's 1.6 line. */
.tms-site-footer__list {
	display: grid;
	font-size: 0.9375rem;
	gap: 11px;
	line-height: 1.3;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Places: each place bold, its children (the busiest places under it, ADR-115) muted and indented
   behind a hairline. */
.tms-site-footer__list--places {
	gap: 0;
	margin-top: -5px;
}

.tms-site-footer__place-item {
	padding: 5px 0;
}

.tms-site-footer__place-item > a {
	font-weight: 700;
}

.tms-site-footer__place-item--child {
	border-left: 1px solid var(--tms-footer-hairline);
	margin-left: 1px;
	padding-left: 14px;
}

.tms-site-footer .tms-site-footer__place-item--child > a {
	color: var(--tms-footer-muted);
	font-weight: 400;
}

.tms-site-footer__legal {
	align-items: baseline;
	border-top: 1px solid var(--tms-footer-rule);
	color: var(--tms-footer-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.8125rem;
	gap: 10px 32px;
	justify-content: space-between;
	margin-top: 48px;
	padding: 20px 0 30px;
}

.tms-site-footer__copyright {
	margin: 0;
}

.tms-site-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tms-site-footer .tms-site-footer__legal-links a {
	color: var(--tms-footer-muted);
}

.tms-site-footer .tms-site-footer__legal-links a:hover,
.tms-site-footer .tms-site-footer__legal-links a:focus-visible {
	color: var(--tms-color-footer-text);
}

/* Narrower desktops: three columns a row, then the name block above them. */
@media (max-width: 1100px) {
	.tms-site-footer__columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 960px) {
	.tms-site-footer__top {
		gap: 36px;
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Phones: the name block, then one row per column that folds under its heading, then the legal line. */
@media (max-width: 800px) {
	.tms-site-footer__inner {
		padding-top: 36px;
	}

	.tms-site-footer__top {
		gap: 28px;
	}

	.tms-site-footer__brand {
		align-items: end;
		column-gap: 16px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.tms-site-footer__brand > .tms-site-footer__name,
	.tms-site-footer__brand > .tms-site-footer__network {
		grid-column: 1 / -1;
		justify-self: start;
	}

	.tms-site-footer__name {
		font-size: 1.875rem;
	}

	.tms-site-footer__name--s27 {
		font-size: 1.6875rem;
	}

	.tms-site-footer__logo {
		height: 44px;
	}

	.tms-site-footer .tms-site-footer__network {
		margin-top: 12px;
	}

	.tms-site-footer__call {
		margin-top: 22px;
	}

	.tms-site-footer__call-number {
		font-size: 1.625rem;
	}

	.tms-site-footer__follow {
		margin-top: 0;
	}

	.tms-site-footer__follow-label {
		display: none;
	}

	.tms-site-footer__brand--no-call .tms-site-footer__follow {
		justify-self: start;
		margin-top: 20px;
	}

	.tms-site-footer__columns {
		border-top: 1px solid var(--tms-footer-rule);
		display: block;
	}

	.tms-site-footer__column {
		border-bottom: 1px solid var(--tms-footer-rule);
	}

	.tms-site-footer__summary {
		align-items: center;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		min-height: 52px;
	}

	.tms-site-footer__summary::after {
		border-bottom: 2px solid var(--tms-footer-muted);
		border-right: 2px solid var(--tms-footer-muted);
		content: "";
		height: 8px;
		margin-right: 4px;
		transform: rotate(45deg) translateY(-3px);
		width: 8px;
	}

	.tms-site-footer__column[open] > .tms-site-footer__summary::after {
		transform: rotate(-135deg) translateY(-1px);
	}

	.tms-site-footer__summary .tms-site-footer__heading {
		color: var(--tms-color-footer-text);
		font-size: 0.8125rem;
		letter-spacing: 0.08em;
		margin: 0;
	}

	.tms-site-footer__summary .tms-site-footer__heading::before {
		display: none;
	}

	.tms-site-footer__column > .tms-site-footer__list {
		padding-bottom: 18px;
	}

	.tms-site-footer__legal {
		align-items: flex-start;
		border-top: 0;
		flex-direction: column;
		margin-top: 0;
		padding: 18px 0 28px;
	}
}

@media (max-width: 800px) {
	.tms-js .tms-site-header__nav:not([data-tms-menu-open]) {
		display: none;
	}

	/* The phone bar (TMS-1056): menu, the name centred, Search. Row 1's other pieces stay on wider
	   screens. */
	.tms-site-header__bar {
		display: grid;
		gap: 0;
		grid-template-areas: "menu name search";
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		height: 52px;
		max-width: none;
		padding-inline: 6px;
	}

	.tms-site-header .tms-site-header__icon {
		height: 44px;
		width: 44px;
	}

	.tms-site-header__icon svg {
		height: 22px;
		width: 22px;
	}

	.tms-site-header .tms-site-header__icon--menu {
		grid-area: menu;
		margin-right: 0;
	}

	.tms-site-header__icon--search {
		grid-area: search;
	}

	.tms-wordmark {
		font-size: 1.4375rem;
		grid-area: name;
		overflow: hidden;
		text-align: center;
		text-overflow: ellipsis;
	}

	/* A place of 21+ characters steps down: "San Francisco Bay Area Online" fits the 290 px between the
	   buttons at 21 px. */
	.tms-wordmark--long {
		font-size: 1.3125rem;
	}

	.tms-site-header__today-slot,
	.tms-site-header__when,
	.tms-site-header__tip,
	.tms-site-header__bar .tms-header-action--account {
		display: none;
	}

	/* The sections row: swipe it sideways; it fades out at the right edge. Without JavaScript the
	   open menu below lists the same sections. */
	.tms-site-header__sections {
		border-top: 1px solid var(--tms-header-hairline, rgba(255, 255, 255, 0.12));
		display: block;
		height: 40px;
		overflow: hidden;
		position: relative;
	}

	html:not(.tms-js) .tms-site-header__sections,
	.tms-site-header--compact .tms-site-header__sections {
		display: none;
	}

	.tms-site-header__sections::after {
		background: linear-gradient(to right, transparent, var(--tms-header-bg, #0b0d10));
		bottom: 0;
		content: "";
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 0;
		width: 36px;
	}

	.tms-site-header__sections-list {
		align-items: center;
		display: flex;
		height: 40px;
		list-style: none;
		margin: 0;
		overflow-x: auto;
		padding: 0 16px;
		scrollbar-width: none;
	}

	.tms-site-header__sections-list::-webkit-scrollbar {
		display: none;
	}

	.tms-site-header__sections-item {
		align-items: center;
		display: flex;
		flex: none;
	}

	.tms-site-header__sections-item--after-places::before {
		background: var(--tms-header-hairline, rgba(255, 255, 255, 0.12));
		content: "";
		height: 16px;
		margin: 0 4px;
		width: 1px;
	}

	.tms-site-header__section {
		align-items: center;
		background: transparent;
		border: 0;
		color: inherit;
		cursor: pointer;
		display: inline-flex;
		font: inherit;
		font-size: 0.75rem;
		font-weight: 700;
		gap: 6px;
		height: 40px;
		letter-spacing: 0.06em;
		padding: 0 10px;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.tms-site-header__sections-item:first-child .tms-site-header__section {
		padding-left: 0;
	}

	/* The Breaking row (ADR-118): the slot's story while it is breaking, on every page. Empty, it takes no
	   space. The bar that sticks leaves it out, as it leaves out the sections. */
	.tms-site-header__breaking {
		display: block;
	}

	.tms-site-header--compact .tms-site-header__breaking {
		display: none;
	}

	.tms-site-header__breaking-link {
		align-items: baseline;
		border-top: 1px solid var(--tms-header-hairline, rgba(255, 255, 255, 0.12));
		color: inherit;
		display: flex;
		font-size: 0.9375rem;
		font-weight: 600;
		gap: 10px;
		line-height: 1.35;
		padding: 11px 16px 12px;
		text-decoration: none;
	}

	.tms-site-header__breaking-link .tms-site-header__today-flag {
		position: relative;
		top: -2px;
	}

	/* A long headline wraps to three lines at most: on Engine Primary (site 7), "Tennessee halts Christa
	   Pike execution after two injections, attorneys say" takes three at 390 px, an 85 px row. */
	.tms-site-header__breaking-title {
		-webkit-box-orient: vertical;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		min-width: 0;
		overflow: hidden;
	}

	.tms-site-header__breaking-link:is(:hover, :focus-visible) .tms-site-header__breaking-title {
		text-decoration: underline;
		text-decoration-color: var(--tms-header-accent, #e5484d);
		text-decoration-thickness: 2px;
		text-underline-offset: 3px;
	}

	.tms-site-header__section--anchor::before {
		background-color: var(--tms-header-accent, #e5484d);
		content: "";
		flex: none;
		height: 12px;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2.5a7 7 0 0 0-7 7c0 5.2 7 12 7 12s7-6.8 7-12a7 7 0 0 0-7-7zm0 9.6a2.6 2.6 0 1 1 0-5.2 2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2.5a7 7 0 0 0-7 7c0 5.2 7 12 7 12s7-6.8 7-12a7 7 0 0 0-7-7zm0 9.6a2.6 2.6 0 1 1 0-5.2 2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
		width: 12px;
	}

	/* The menu opens over the page, under the bar, and scrolls on its own; the page under it doesn't
	   move (without JavaScript it stays in the flow, open). It ends at the screen's bottom edge:
	   navigation.js measures where the header ends when the menu opens (--tms-menu-top), since the
	   Breaking row makes the header taller while a story is breaking (ADR-118). */
	.tms-js .tms-site-header__nav[data-tms-menu-open] {
		background: var(--tms-header-bg, #0b0d10);
		border-bottom: 1px solid var(--tms-header-hairline, rgba(255, 255, 255, 0.12));
		box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.6);
		left: 0;
		max-height: calc(100vh - var(--tms-menu-top, 96px));
		max-height: calc(100dvh - var(--tms-menu-top, 96px));
		overflow-y: auto;
		overscroll-behavior: contain;
		position: absolute;
		right: 0;
		top: 100%;
		z-index: 40;
	}

	.tms-js .tms-site-header--compact .tms-site-header__nav[data-tms-menu-open] {
		max-height: calc(100vh - var(--tms-menu-top, 52px));
		max-height: calc(100dvh - var(--tms-menu-top, 52px));
	}

	.tms-site-header__nav-inner,
	.tms-site-header__nav :where(nav, .tms-nav, .orion-nav) > :where(ul, .menu, .orion-nav__list),
	.tms-site-header__nav :where(nav, .tms-nav, .orion-nav) > div > :where(ul, .menu, .orion-nav__list),
	.tms-site-header__nav :where(.orion-nav__list--root) {
		align-items: stretch;
		display: grid;
		justify-content: stretch;
	}

	.tms-site-header__nav :where(a) {
		border-bottom: 1px solid var(--tms-color-border, #e5e7eb);
		justify-content: space-between;
		padding-block: var(--tms-space-md);
	}

	.tms-site-header__nav :where(.sub-menu, .children, [data-orion-mega], .orion-mega) {
		border: 0;
		box-shadow: none;
		display: grid;
		min-width: 0;
		padding: 0 0 0 var(--tms-space-md);
		position: static;
	}

	/* ONT dropdown/mega panels drop to inline blocks in the mobile drawer (no absolute cards). Two classes,
	   as the panel rules above: in a :where() this rule lost to them, and every drawer panel floated as a
	   card over the rows beneath it (ADR-083). */
	.tms-site-header__nav .orion-nav__panel {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		margin-top: 0;
		max-width: none;
		min-width: 0;
		padding: 0 0 var(--tms-space-sm) var(--tms-space-md);
		position: static;
		transform: none;
	}

	.tms-site-header__nav .orion-nav__mega-grid {
		grid-template-columns: 1fr;
	}

	.tms-site-header__search-inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.tms-card--river {
		grid-template-columns: 1fr;
	}
}

/* -- ADR-035 S8c: section masthead sub-nav -----------------------------------
   The AP-style one-line adjacency row under a coverage/beat archive title
   (tms_news_render_section_header). Its accent rule is keyed off the class tier
   via `data-tms-tier`, mirroring the S2 header chrome accents so the masthead
   reads as part of the same tiered identity. One line, clipped, never wraps
   (Decision 11); the "More →" / "Nearby →" / "Browse all →" link carries the rest.
   ------------------------------------------------------------------------- */
.tms-section-subnav {
	--tms-subnav-accent: #e5484d; /* National / Global default — matches the S2 header accent. */
	display: flex;
	align-items: baseline;
	gap: 1.5rem;
	margin: 0.5rem 0 2rem;
	padding-top: 0.85rem;
	border-top: 3px solid var(--tms-subnav-accent);
}

.tms-section-subnav[data-tms-tier="state"] {
	--tms-subnav-accent: #f4b740;
}

.tms-section-subnav[data-tms-tier="regional"] {
	--tms-subnav-accent: #e0873b;
}

.tms-section-subnav[data-tms-tier="city"] {
	--tms-subnav-accent: #e8b23a;
}

.tms-section-subnav__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 1.35rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto; /* one line, but scrollable + keyboard-reachable — never clip focusable links. */
	white-space: nowrap;
}

.tms-section-subnav__item {
	flex: 0 0 auto;
}

.tms-section-subnav__list a {
	display: inline-block;
	font-family: var(--tms-font-body);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tms-color-text, #1a1a1a);
	border-bottom: 2px solid transparent;
	padding-bottom: 0.15rem;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.tms-section-subnav__list a:hover,
.tms-section-subnav__list a:focus-visible {
	border-bottom-color: var(--tms-subnav-accent);
}

.tms-section-subnav__lead a {
	color: var(--tms-color-muted, #6b7280);
	font-weight: 600;
}

.tms-section-subnav__lead a::before {
	content: "\2039\00a0"; /* ‹ + nbsp — a subtle "up to parent" cue. */
}

.tms-section-subnav__more {
	flex: 0 0 auto;
	margin-left: auto; /* pin the overflow to the trailing edge. */
	padding-left: 1rem;
	font-family: var(--tms-font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--tms-subnav-accent);
}

.tms-section-subnav__more:hover,
.tms-section-subnav__more:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (max-width: 640px) {
	.tms-section-subnav,
	.tms-section-subnav__list {
		gap: 1rem;
	}
}

/* ── ADR-035 S5b — the /communities/ coverage-index directory ─────────────────────── */
.tms-communities-index {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 1.75rem 2rem;
	margin-top: 2rem;
}
.tms-communities-index__group {
	min-width: 0;
}
.tms-communities-index__heading {
	margin: 0 0 0.65rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--tms-color-border, #e5e7eb);
	font-size: 1.05rem;
	line-height: 1.2;
}
.tms-communities-index__heading a {
	color: inherit;
	text-decoration: none;
}
.tms-communities-index__heading a:hover {
	color: var(--tms-color-accent, #b91c1c);
	text-decoration: underline;
}
.tms-communities-index__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tms-communities-index__item {
	margin: 0 0 0.4rem;
	line-height: 1.35;
}
.tms-communities-index__item a {
	text-decoration: none;
}
.tms-communities-index__item a:hover {
	text-decoration: underline;
}

/* ---- Pager (ADR-079, TMS-937): inc/pagination.php ----
 * "← Newer stories · 1 [2] 3 … 11 · Older stories →" over "Page 2 of 11", in the theme's square button
 * look: a primary outline, filled when current or hovered, every target at least 44px. Phones drop the
 * numbers: "Page 2 of 11" over two half-width buttons, or one full-width on the first and last page.
 */
.tms-pagination {
	align-items: center;
	border-top: 1px solid var(--tms-color-border, #e5e7eb);
	column-gap: var(--tms-space-md);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	margin-top: var(--tms-space-xl);
	padding-top: var(--tms-space-lg);
	row-gap: var(--tms-space-sm);
}

.tms-pagination__step {
	align-items: center;
	border: 1px solid var(--tms-color-primary, #111827);
	color: var(--tms-color-primary, #111827);
	display: inline-flex;
	font-family: var(--tms-font-body);
	font-size: 0.95rem;
	font-weight: 700;
	gap: 0.5rem;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.25rem;
	text-decoration: none;
}

.tms-pagination__step:hover,
.tms-pagination__step:focus-visible {
	background: var(--tms-color-primary, #111827);
	color: var(--tms-color-background, #fff);
}

.tms-pagination__step--newer {
	grid-column: 1;
	justify-self: start;
}

.tms-pagination__step--older {
	grid-column: 3;
	justify-self: end;
}

.tms-pagination__pages {
	display: flex;
	gap: 0.25rem;
	grid-column: 2;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tms-pagination__page,
.tms-pagination__gap {
	align-items: center;
	display: inline-flex;
	font-family: var(--tms-font-body);
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

.tms-pagination__page {
	border: 1px solid transparent;
	color: var(--tms-color-text, #111);
	font-weight: 600;
	text-decoration: none;
}

a.tms-pagination__page:hover,
a.tms-pagination__page:focus-visible {
	border-color: var(--tms-color-primary, #111827);
}

.tms-pagination__page[aria-current="page"] {
	background: var(--tms-color-primary, #111827);
	border-color: var(--tms-color-primary, #111827);
	color: var(--tms-color-background, #fff);
}

.tms-pagination__gap {
	color: var(--tms-color-muted, #6b7280);
	min-width: 1.5rem;
}

.tms-pagination__status {
	color: var(--tms-color-muted, #6b7280);
	font-family: var(--tms-font-body);
	font-size: 0.875rem;
	grid-column: 1 / -1;
	margin: 0;
	text-align: center;
}

@media (max-width: 640px) {
	.tms-pagination {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tms-pagination__pages {
		display: none;
	}

	.tms-pagination__status {
		font-size: 0.95rem;
		grid-row: 1;
	}

	.tms-pagination__step {
		justify-self: stretch;
		padding: 0 0.75rem;
	}

	.tms-pagination__step--older {
		grid-column: 2;
	}

	.tms-pagination--first .tms-pagination__step--older,
	.tms-pagination--last .tms-pagination__step--newer {
		grid-column: 1 / -1;
	}
}

/* ---- Live hubs in the chrome (ADR-158, inc/live-hub-home.php) ----
 * While nationwidetimes carried the Omar and Guilfoyle hubs (Oct. 13): "● Live 2" first in the sections, the
 * header's slot "● Live · White House says it has asked Kimberly Guilfoyle …: live updates →", and the pill and
 * "Updated 1:54 PM" on a hub's card wherever it is listed. Nothing here prints while no hub is live. */
@keyframes tms-live-dot-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.25;
	}
}

.tms-live-tab {
	align-items: center;
	color: inherit;
	display: inline-flex;
	font-weight: 800;
	gap: 6px;
	text-decoration: none;
}

.tms-live-tab__dot,
.tms-live-flag__dot,
.tms-site-header__today-dot--live {
	animation: tms-live-dot-pulse 1.6s ease-in-out infinite;
	background: #dc2626;
	border-radius: 50%;
	display: inline-block;
	flex: none;
	height: 8px;
	width: 8px;
}

.tms-live-tab__label {
	color: #ef4444;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tms-live-tab__count {
	background: #dc2626;
	border-radius: 9px;
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 1;
	min-width: 18px;
	padding: 3px 5px;
	text-align: center;
}

/* A hairline after the tab, so it reads apart from the manifest's sections. */
.orion-nav__item--live,
.tms-site-header__sections-item--live {
	position: relative;
}

.orion-nav__item--live::after,
.tms-site-header__sections-item--live::after {
	background: var(--tms-header-hairline, rgba(255, 255, 255, 0.12));
	content: "";
	height: 16px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
}

.tms-site-header__sections-item--live .tms-site-header__section {
	padding-right: 14px;
}

.tms-site-header__today-flag--live {
	align-items: center;
	display: inline-flex;
	gap: 5px;
}

.tms-site-header__today-flag--live .tms-live-flag__dot {
	background: #fff;
	height: 6px;
	width: 6px;
}

/* On a card: the red pill, then "Updated 1:54 PM" in the card's muted ink. */
.tms-live-flag {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	font-family: var(--tms-font-body);
	font-size: 0.6875rem;
	font-style: normal;
	font-weight: 700;
	gap: 0.3rem 0.5rem;
	vertical-align: middle;
}

.tms-live-flag__pill {
	align-items: center;
	background: #dc2626;
	border-radius: 3px;
	color: #fff;
	display: inline-flex;
	font-weight: 800;
	gap: 5px;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 4px 7px 3px;
	text-transform: uppercase;
}

.tms-live-flag__pill .tms-live-flag__dot {
	background: currentColor;
	height: 6px;
	width: 6px;
}

.tms-live-flag__updated,
.tms-live-flag--ended {
	color: var(--tms-color-muted, #6b7280);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Inside a card's headline only the pill shows; the time would crowd it. */
.tms-card__title .tms-live-flag {
	margin-right: 0.4em;
	position: relative;
	top: -0.1em;
}

.tms-card__title .tms-live-flag__updated {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.tms-live-tab__dot,
	.tms-live-flag__dot,
	.tms-site-header__today-dot--live {
		animation: none;
	}
}