/*!
 * US Now theme: main stylesheet (mobile first).
 *
 * Fonts (self-hosted, OFL, see ../fonts/OFL.txt):
 * - Inter Tight: a tight, sturdy grotesque for headlines, labels and UI. Its
 *   narrow spacing packs long headlines into few lines, the dense
 *   network-news look.
 * - Source Serif 4: an Adobe text face drawn for long-form reading on screens
 *   (large x-height, open counters, sturdy serifs). A serif body against sans
 *   headlines signals editorial authority and stays comfortable at 18-19px
 *   for 800-word stories on phones.
 *
 * Colors are CSS custom properties. Customizer values are printed inline
 * after this file; dark mode overrides surfaces under [data-theme="dark"].
 */

/* ==========================================================================
   1. Fonts
   ========================================================================== */

@font-face {
	font-family: "Inter Tight";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Serif 4";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Size-matched fallbacks. On a first visit text shows in Arial or Georgia
 * until the web fonts arrive. These faces scale them to the web fonts' width
 * and line metrics, so lines break in the same places and nothing on the
 * page moves when the web fonts swap in. Values were measured from the font
 * files (average width of English text, ascent and descent); the bold faces
 * match Inter Tight at 700 and 800 and Source Serif 4 at 700.
 * Liberation Sans and Arimo have the same metrics as Arial (Linux, ChromeOS).
 */
@font-face {
	font-family: "Inter Tight Fallback";
	font-style: normal;
	font-weight: 100 500;
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
	size-adjust: 96.67%;
	ascent-override: 100.21%;
	descent-override: 24.95%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Inter Tight Fallback";
	font-style: normal;
	font-weight: 600 700;
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
	size-adjust: 95.35%;
	ascent-override: 101.6%;
	descent-override: 25.3%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Inter Tight Fallback";
	font-style: normal;
	font-weight: 800 900;
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
	size-adjust: 97.32%;
	ascent-override: 99.55%;
	descent-override: 24.79%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Source Serif 4 Fallback";
	font-style: normal;
	font-weight: 200 500;
	src: local("Georgia");
	size-adjust: 108.39%;
	ascent-override: 95.58%;
	descent-override: 30.91%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Source Serif 4 Fallback";
	font-style: normal;
	font-weight: 600 900;
	src: local("Georgia Bold"), local("Georgia-Bold");
	size-adjust: 95.91%;
	ascent-override: 108.02%;
	descent-override: 34.93%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Source Serif 4 Fallback";
	font-style: italic;
	font-weight: 200 900;
	src: local("Georgia Italic"), local("Georgia-Italic");
	size-adjust: 97.05%;
	ascent-override: 106.75%;
	descent-override: 34.52%;
	line-gap-override: 0%;
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */

:root {
	color-scheme: light;

	/* Brand (editable in the Customizer). */
	--c-brand: #0a1a33;
	--c-accent: #d2232a;
	--c-ink: #111418;
	--c-link: #0a1a33;
	--c-band: #f4f5f7;
	--c-header-bg: #fff;
	--c-header-ink: #111418;
	--c-logo-now: #0a1a33;
	--c-nav-bg: #0a1a33;
	--c-nav-ink: #fff;
	--c-footer-bg: #0a1a33;
	--c-footer-ink: #fff;

	/*
	 * Accent variants. inc/assets.php recomputes them from the Customizer
	 * accent: a text shade readable on light (and dark) surfaces, a shade
	 * readable on the brand color, a hover shade, a focus glow and the text
	 * color for accent backgrounds.
	 */
	--c-accent-text: #d2232a;
	--c-accent-text-dark: #dd5a5f;
	--c-accent-on-brand: #dd5a5f;
	--c-accent-dark: #a81c22;
	--c-accent-soft: rgba(210, 35, 42, 0.22);
	--c-on-accent: #fff;

	/* Surfaces and text. */
	--c-bg: #fff;
	--c-text: var(--c-ink);
	--c-text-2: #3a414d;
	--c-muted: #5b6370;
	--c-rule: #e0e3e8;
	--c-kicker: var(--c-accent-text);
	--c-focus: #1a5fd0;
	--c-success: #1a7f37;
	--c-overlay: rgba(8, 14, 26, 0.58);

	/* Type. */
	--font-head: "Inter Tight", "Inter Tight Fallback", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	--font-body: "Source Serif 4", "Source Serif 4 Fallback", Georgia, Cambria, "Times New Roman", serif;

	/* Layout. */
	--container: 1280px;
	--gutter: 16px;
	--radius: 4px;
	--nav-h: 46px;
	--admin-offset: 0px;
	--shadow: 0 1px 2px rgba(10, 26, 51, 0.06), 0 10px 28px rgba(10, 26, 51, 0.12);

	/* Spacing rhythm: between cards, between page sections, beside the sidebar. */
	--gap: 24px;
	--gap-y: 28px;
	--section-space: 40px;
	--sidebar-w: 300px;
	--sidebar-gap: 40px;
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--c-ink: #eceef1;
	--c-link: #9cc2ff;
	--c-band: #151b24;
	--c-header-bg: #0d1117;
	--c-header-ink: #eceef1;
	--c-logo-now: #fff;
	--c-nav-bg: #0b1730;
	--c-nav-ink: #fff;
	--c-footer-bg: #070c14;
	--c-footer-ink: #e6e9ee;
	--c-bg: #0d1117;
	--c-text-2: #c5cad3;
	--c-muted: #9aa3b0;
	--c-rule: #283140;
	--c-accent-text: var(--c-accent-text-dark);
	--c-kicker: var(--c-accent-text-dark);
	--c-focus: #8ab4f8;
	--c-success: #3fb950;
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.5);
}

/* The ads module's sticky bar and labels follow dark mode. */
:root[data-theme="dark"] .usnow-ads {
	--usnow-ad-sticky-bg: #151b24;
	--usnow-ad-label-color: #9aa3b0;
}

:root[data-theme="dark"] .usnow-ad-sticky__close {
	color: var(--c-ink);
}

/* So do the PWA module's install banner and iPhone "Add to Home Screen" steps. */
:root[data-theme="dark"] .usnow-pwa-chip,
:root[data-theme="dark"] .usnow-pwa-sheet {
	background: var(--c-band);
	color: var(--c-text);
}

:root[data-theme="dark"] .usnow-pwa-chip {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--c-rule);
}

:root[data-theme="dark"] .usnow-pwa-sheet {
	box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--c-rule);
}

:root[data-theme="dark"] .usnow-pwa-chip__text strong,
:root[data-theme="dark"] .usnow-pwa-sheet__title,
:root[data-theme="dark"] .usnow-pwa-steps__body strong {
	color: var(--c-text);
}

:root[data-theme="dark"] .usnow-pwa-chip__text span,
:root[data-theme="dark"] .usnow-pwa-sheet__intro,
:root[data-theme="dark"] .usnow-pwa-steps__body span {
	color: var(--c-text-2);
}

:root[data-theme="dark"] .usnow-pwa-chip__x,
:root[data-theme="dark"] .usnow-pwa-sheet__x {
	color: var(--c-muted);
}

:root[data-theme="dark"] .usnow-pwa-chip button:focus-visible,
:root[data-theme="dark"] .usnow-pwa-sheet button:focus-visible {
	outline-color: var(--c-focus);
}

:root[data-theme="dark"] .usnow-pwa-steps__item {
	border-top-color: var(--c-rule);
}

:root[data-theme="dark"] .usnow-pwa-steps__icon {
	background: rgba(255, 255, 255, 0.07);
	color: #0a84ff; /* iOS system blue in dark mode, as on the real buttons. */
}

:root[data-theme="dark"] .usnow-pwa-steps__icon::before,
:root[data-theme="dark"] .usnow-pwa-sheet__ok {
	background: var(--c-ink);
	color: var(--c-bg);
}

:root[data-theme="dark"] .usnow-pwa-sheet__done {
	background: rgba(255, 255, 255, 0.08);
	color: var(--c-text);
}

@media (min-width: 768px) {
	:root {
		--gutter: 24px;
	}
}

@media (max-width: 767px) {
	:root {
		--gap: 20px;
		--gap-y: 24px;
		--section-space: 32px;
	}
}

body.admin-bar {
	--admin-offset: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--admin-offset: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar {
		--admin-offset: 0px;
	}
}

/*
 * Where sticky things (sidebars, the sidebar_bottom ad) stop below the top of
 * the screen: under the WordPress toolbar and, when on, the sticky section bar.
 */
body {
	--sticky-top: calc(var(--admin-offset) + 16px);
	--usnow-sticky-top: var(--sticky-top);
}

body.has-sticky-nav {
	--sticky-top: calc(var(--admin-offset) + var(--nav-h) + 16px);
}

/* ==========================================================================
   3. Base
   ========================================================================== */

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

/*
 * scrollbar-gutter keeps room for the scrollbar while the menu or search is
 * open (body.is-locked hides it), so the page never jumps sideways.
 */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--nav-h) + var(--admin-offset) + 16px);
	scrollbar-gutter: stable;
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-head);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body.is-locked {
	overflow: hidden;
}

img,
video {
	max-width: 100%;
	height: auto;
}

svg {
	max-width: 100%;
}

.icon {
	display: block;
	flex: none;
}

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

a:hover {
	color: var(--c-accent-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--font-head);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

p {
	margin: 0 0 1em;
}

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

:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 1000;
	padding: 12px 18px;
	background: var(--c-ink);
	color: var(--c-bg);
	font-weight: 700;
	border-radius: var(--radius);
}

.skip-link:focus {
	top: calc(8px + var(--admin-offset));
	color: var(--c-bg);
}

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

.site-main {
	display: block;
	min-height: 50vh;
	overflow-x: clip;
}

.site-main:focus {
	outline: none;
}

/* Buttons */

.button,
.wp-block-button__link,
.search-form__submit,
.comment-form .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--radius);
	background: var(--c-accent);
	color: var(--c-on-accent);
	font: 800 0.875rem/1 var(--font-head);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.button:hover,
.wp-block-button__link:hover,
.search-form__submit:hover,
.comment-form .submit:hover {
	background: var(--c-accent-dark);
	color: var(--c-on-accent);
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.icon-btn:hover {
	background: rgba(127, 127, 127, 0.14);
	color: inherit;
}

/* ==========================================================================
   4. Ad areas and partner zones (printed only when the plugin has output)
   ========================================================================== */

/*
 * The wrapper only reserves space; it never clips, so full-width responsive
 * units can bleed to the screen edges and expanding units can open. Inside
 * the page, .site-main stops horizontal scrolling; the full-width spots
 * outside it clip sideways only (at the screen edge).
 */
.ad-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	margin: 20px auto;
	text-align: center;
}

.ad-area--header_top,
.ad-area--below_nav,
.ad-area--footer_top {
	overflow-x: clip;
}

.ad-area--header_top {
	margin: 0;
	padding: 8px var(--gutter);
	min-height: 66px;
	background: var(--c-band);
	border-bottom: 1px solid var(--c-rule);
}

.ad-area--below_nav {
	margin: 12px auto;
	padding-inline: var(--gutter);
	min-height: 50px;
}

/*
 * Phones: the spots above the headlines stay compact (a 320x50 or 320x100
 * banner), so a large ad can never push the news below the first screen.
 */
@media (max-width: 767px) {
	.ad-area--header_top,
	.ad-area--below_nav {
		padding-block: 6px;
	}

	.ad-area--header_top .usnow-ad__inner,
	.ad-area--below_nav .usnow-ad__inner {
		min-height: min(var(--usnow-ad-mh-m, 0px), 100px);
		max-height: 100px;
		overflow: hidden;
	}
}

.ad-area--home_after_hero,
.ad-area[class*="ad-area--home_between_"] {
	margin: 0 auto var(--section-space);
	min-height: 100px;
}

.ad-area--archive_inline {
	margin: 0;
	padding: 16px 0;
	min-height: 100px;
	border-bottom: 1px solid var(--c-rule);
}

.ad-area--article_top {
	margin: 4px 0 24px;
	min-height: 100px;
}

.ad-area--article_bottom {
	margin: 28px 0;
	min-height: 100px;
}

.ad-area--sidebar_top,
.ad-area--sidebar_middle,
.ad-area--sidebar_bottom {
	margin: 0;
	min-height: 250px;
}

.ad-area--footer_top {
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin: 40px auto 0;
	padding-inline: var(--gutter);
	min-height: 90px;
}

.ad-area--sticky_footer {
	display: block;
	margin: 0;
	min-height: 0;
}

@media (min-width: 768px) {
	.ad-area--header_top {
		min-height: 106px;
	}

	.ad-area--below_nav,
	.ad-area--home_after_hero,
	.ad-area[class*="ad-area--home_between_"],
	.ad-area--archive_inline,
	.ad-area--article_top,
	.ad-area--article_bottom {
		min-height: 90px;
	}
}

.sponsored-zone {
	margin: 32px 0;
}

.sponsored-zone--footer_row {
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin: 40px auto 0;
	padding-inline: var(--gutter);
}

.sponsored-zone--sidebar,
.sponsored-zone--home_spotlight,
.home-section > .sponsored-zone {
	margin: 0;
}

/* The wrapper sets the spacing, so a zone lines up with the sections around it. */
.sponsored-zone > .usnow-sz {
	margin-block: 0;
}

/* ==========================================================================
   5. Top bar
   ========================================================================== */

.topbar {
	background: var(--c-band);
	border-bottom: 1px solid var(--c-rule);
	color: var(--c-text-2);
	font-size: 0.8125rem;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	min-height: 34px;
}

.topbar__date {
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.topbar__nav,
.social--topbar {
	display: none;
}

.topbar__menu {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

/* Padded links keep the focus ring inside the scrolling list, unclipped. */
.topbar__menu a {
	display: block;
	padding: 6px 4px;
	font-weight: 600;
}

.topbar__menu a:focus-visible {
	outline-width: 2px;
	outline-offset: -2px;
}

/* Phones show only the date line in the top bar. */
@media (max-width: 767px) {
	.topbar--no-date {
		display: none;
	}
}

@media (min-width: 768px) {
	.topbar__inner {
		justify-content: flex-start;
	}

	.topbar__nav {
		display: block;
		margin-left: auto;
		min-width: 0;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.social--topbar {
		display: flex;
	}

	.topbar__date + .social--topbar {
		margin-left: auto;
	}
}

.social {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: inherit;
}

.social a:hover {
	background: rgba(127, 127, 127, 0.16);
	color: inherit;
}

.social--topbar a {
	width: 30px;
	height: 30px;
}

.social--topbar .icon {
	width: 16px;
	height: 16px;
}

/* ==========================================================================
   6. Masthead and logo
   ========================================================================== */

.site-header {
	background: var(--c-header-bg);
	color: var(--c-header-ink);
	border-bottom: 1px solid var(--c-rule);
}

.masthead {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
	min-height: 60px;
}

.masthead > .menu-toggle {
	justify-self: start;
	margin-left: -10px;
}

.menu-toggle__label {
	display: none;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.site-branding {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-width: 0;
}

.masthead__actions {
	display: flex;
	justify-self: end;
	gap: 2px;
	margin-right: -10px;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	color: var(--c-logo-now);
}

.site-logo:hover {
	color: var(--c-logo-now);
}

.site-logo .wordmark {
	display: block;
	width: auto;
	height: 32px;
}

.site-logo .custom-logo {
	display: block;
	width: auto;
	max-height: 40px;
}

.site-tagline {
	display: none;
	margin: 0;
	padding-left: 16px;
	border-left: 1px solid var(--c-rule);
	color: var(--c-muted);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
}

.theme-toggle .icon-sun,
:root[data-theme="dark"] .theme-toggle .icon-moon {
	display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
	display: block;
}

@media (min-width: 768px) {
	.masthead {
		min-height: 84px;
	}

	.menu-toggle__label {
		display: inline;
	}

	.site-logo .wordmark {
		height: 44px;
	}

	.site-logo .custom-logo {
		max-height: 52px;
	}

	.header-left .masthead {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 20px;
	}

	.header-left .site-branding {
		justify-content: flex-start;
	}
}

@media (min-width: 960px) {
	.header-left .site-tagline {
		display: block;
	}
}

@media (min-width: 768px) {
	.header-centered .masthead {
		min-height: 112px;
	}

	.header-centered .site-branding {
		flex-direction: column;
		gap: 6px;
		text-align: center;
	}

	.header-centered .site-logo .wordmark {
		height: 56px;
	}

	.header-centered .site-tagline {
		display: block;
		padding: 0;
		border: 0;
	}
}

/*
 * Header action buttons from plugins (hook usnow_header_actions), before the
 * search button: in the masthead on every screen size, and in the compact
 * section bar while it sticks. They look like the theme's icon buttons and
 * take the bar's text color. Classes for plugin markup:
 *   .header-action          the button or link (44px tap target)
 *   .header-action__label   a word beside the icon, shown in the masthead on wide screens
 *   .header-action__badge   a dot (empty) or a small count on the icon
 */
.header-actions {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	gap: 2px;
}

.header-actions .header-action,
.header-actions > a,
.header-actions > button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	height: 44px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: inherit;
	font: 800 0.8125rem/1 var(--font-head);
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.header-actions .header-action:hover,
.header-actions > a:hover,
.header-actions > button:hover {
	background: rgba(127, 127, 127, 0.14);
	color: inherit;
}

.header-actions svg {
	flex: none;
}

.header-action__label {
	display: none;
}

@media (min-width: 1100px) {
	.header-actions--masthead .header-action__label {
		display: inline;
	}
}

.header-action__badge {
	position: absolute;
	top: 9px;
	right: 9px;
	min-width: 9px;
	height: 9px;
	padding: 0;
	border-radius: 999px;
	background: var(--c-accent);
	box-shadow: 0 0 0 2px var(--c-header-bg);
	color: var(--c-on-accent);
	font: 800 10px/16px var(--font-head);
	text-align: center;
}

.header-action__badge:not(:empty) {
	top: 4px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
}

.site-nav .header-action__badge,
.site-nav .usnow-push-bell.is-on::after {
	box-shadow: 0 0 0 2px var(--c-nav-bg);
}

/*
 * The card a header button opens (the push module's alerts card, added at
 * the end of the page) drops down under that button on screens wider than a
 * phone. main.js adds .is-anchored and the button's position; phones keep
 * the plugin's bottom sheet, and its invitation card keeps its corner.
 */
@media (min-width: 601px) {
	.usnow-push-card.is-anchored {
		top: var(--anchor-top, 72px);
		right: var(--anchor-right, 16px);
		bottom: auto;
		left: var(--anchor-left, auto);
		max-height: max(160px, calc(100vh - var(--anchor-top, 72px) - 16px));
		animation-name: usnow-drop;
	}
}

/* In the section bar they appear with the compact logo, once it sticks. */
.header-actions--sticky {
	display: none;
}

.site-nav.is-stuck .header-actions--sticky {
	display: flex;
}

/* Small phones: slightly narrower header buttons and logo keep everything on one row. */
@media (max-width: 399px) {
	.masthead__actions .icon-btn,
	.header-actions--masthead .header-action,
	.header-actions--masthead > a,
	.header-actions--masthead > button {
		min-width: 40px;
		padding: 0 8px;
	}
}

@media (max-width: 359px) {
	.masthead .site-logo .wordmark {
		height: 28px;
	}
}

/* ==========================================================================
   7. Section bar (sticky)
   ========================================================================== */

.site-nav {
	--c-focus: var(--c-nav-ink);
	position: relative;
	z-index: 60;
	background: var(--c-nav-bg);
	color: var(--c-nav-ink);
}

.has-sticky-nav .site-nav {
	position: sticky;
	top: var(--admin-offset);
}

.site-nav.is-stuck {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.site-nav__inner {
	display: flex;
	align-items: center;
	gap: 4px;
	height: var(--nav-h);
}

.site-nav__brand {
	display: none;
	flex: none;
	align-items: center;
	gap: 2px;
	margin-left: -10px;
	padding-right: 8px;
}

.site-nav__brand .site-logo,
.site-nav__brand .site-logo:hover {
	color: var(--c-nav-ink);
}

.site-nav__brand .wordmark {
	height: 24px;
}

.site-nav__brand .custom-logo {
	max-height: 30px;
	padding: 2px 4px;
	border-radius: 3px;
	background: #fff;
}

.site-nav.is-stuck .site-nav__brand {
	display: flex;
}

/* Small phones: keep room for the sections; the menu button stays. */
@media (max-width: 479px) {
	.site-nav__brand .site-logo {
		display: none;
	}
}

/*
 * The list starts 12px left so the first label lines up with the page edge.
 * The scroller (not the list) takes that offset, so the first link isn't
 * cut off by the scroller's own edge.
 */
.site-nav__scroller {
	flex: 1;
	min-width: 0;
	margin-left: -12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.site-nav__scroller::-webkit-scrollbar {
	display: none;
}

.site-nav__scroller.can-scroll-right {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

.site-nav__scroller.can-scroll-left {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
	mask-image: linear-gradient(to right, transparent, #000 40px);
}

.site-nav__scroller.can-scroll-left.can-scroll-right {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.site-nav__menu {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.site-nav__menu a {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--nav-h);
	padding: 0 12px;
	color: inherit;
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.site-nav__menu a:hover {
	color: inherit;
}

/* Red bar under the hovered and the current section (it grows from the middle, section 20). */
.site-nav__menu a::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 0;
	left: 12px;
	height: 4px;
	background: var(--c-accent);
	transform: scaleX(0);
}

.site-nav__menu a:hover::after,
.site-nav__menu .current-menu-item > a::after,
.site-nav__menu .current-menu-parent > a::after,
.site-nav__menu .current-post-ancestor > a::after,
.site-nav__menu .current-category-ancestor > a::after {
	transform: none;
}

/* The links fill the scroller's height, so the focus ring sits inside them. */
.site-nav__menu a:focus-visible {
	outline: 2px solid var(--c-focus);
	outline-offset: -6px;
}

.site-nav.is-stuck .site-nav__scroller {
	margin-left: 0;
}

.site-nav__search {
	display: none;
	flex: none;
	margin-right: -10px;
}

.site-nav.is-stuck .site-nav__search {
	display: inline-flex;
}

/* Breaking news bar and trending strip: their labels line up with the logo and the page content. */
.usnow-breaking .usnow-breaking__inner,
.usnow-trending .usnow-trending__inner {
	max-width: calc(var(--container) + 2 * var(--gutter));
	padding-inline: var(--gutter);
}

/*
 * Trending strip (printed by the editorial module with its own base styles):
 * story links turn red like headlines elsewhere. Its height is fixed, so the
 * page below never moves.
 */
.usnow-trending .usnow-trending__link:hover {
	color: var(--c-accent-text);
}

:root[data-theme="dark"] .usnow-trending__ad {
	background: #3d321a;
	color: #f1dfab;
}

/*
 * Breaking news bar (printed by the editorial module) on phones: one story at
 * a time in a single row, at most two lines, so the bar stays compact however
 * many stories it carries. Readers swipe to the next story; main.js also
 * advances it every few seconds unless they prefer reduced motion. The
 * scrolling "ticker" style is a single line already.
 */
@media (max-width: 600px) {
	.usnow-breaking .usnow-breaking__inner {
		min-height: 0;
		padding-block: 6px;
	}

	.usnow-breaking.usnow-breaking--banner .usnow-breaking__items,
	.usnow-breaking.usnow-breaking--pill .usnow-breaking__items {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.usnow-breaking .usnow-breaking__items::-webkit-scrollbar {
		display: none;
	}

	.usnow-breaking.usnow-breaking--banner .usnow-breaking__item,
	.usnow-breaking.usnow-breaking--pill .usnow-breaking__item {
		display: -webkit-box;
		flex: 0 0 100%;
		overflow: hidden;
		line-height: 1.3;
		scroll-snap-align: start;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.usnow-breaking.usnow-breaking--banner .usnow-breaking__item .usnow-breaking__link,
	.usnow-breaking.usnow-breaking--banner .usnow-breaking__item .usnow-breaking__text {
		font-size: 14px;
	}

	/* Inside the clipped row the focus ring sits within the link. */
	.usnow-breaking .usnow-breaking__link:focus-visible {
		outline-offset: -2px;
	}
}

/* ==========================================================================
   8. Search overlay and menu drawer
   ========================================================================== */

/* Above everything else, including the ads module's sticky bar (z-index 9990). */
.search-overlay,
.drawer {
	position: fixed;
	inset: 0;
	z-index: 10000;
}

.search-overlay[hidden],
.drawer[hidden] {
	display: none;
}

/* While main.js plays the closing animation, clicks go through to the page. */
.search-overlay.is-closing,
.drawer.is-closing {
	pointer-events: none;
}

.search-overlay__backdrop,
.drawer__backdrop {
	position: absolute;
	inset: 0;
	background: var(--c-overlay);
}

.search-overlay__panel {
	position: relative;
	z-index: 1;
	margin-top: var(--admin-offset);
	padding: 18px 0;
	background: var(--c-bg);
	box-shadow: var(--shadow);
}

.search-overlay__inner {
	display: flex;
	align-items: center;
	gap: 8px;
}

.search-overlay .search-form {
	flex: 1;
}

.drawer__panel {
	position: absolute;
	top: var(--admin-offset);
	bottom: 0;
	left: 0;
	z-index: 1;
	width: min(380px, 88vw);
	padding: 10px 20px 32px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--c-bg);
	box-shadow: var(--shadow);
}

.drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--c-rule);
}

.drawer__head .wordmark {
	height: 30px;
}

.drawer__head .custom-logo {
	max-height: 34px;
}

.drawer__close {
	margin-right: -10px;
}

.drawer__search {
	margin: 16px 0 8px;
}

.drawer .search-form__field {
	height: 46px;
	font-size: 1rem;
}

.drawer .search-form__submit {
	display: none;
}

.drawer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.drawer__menu a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 10px 0;
	border-bottom: 1px solid var(--c-rule);
	color: var(--c-ink);
	font-size: 1.125rem;
	font-weight: 800;
}

.drawer__menu .current-menu-item > a,
.drawer__menu a:hover {
	color: var(--c-accent-text);
}

.drawer__menu .sub-menu {
	margin: 0;
	padding: 4px 0 8px 14px;
	list-style: none;
}

.drawer__menu .sub-menu a {
	min-height: 40px;
	padding: 6px 0;
	border: 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

.drawer__menu--small {
	margin-top: 20px;
}

.drawer__menu--small a {
	min-height: 40px;
	padding: 6px 0;
	border: 0;
	color: var(--c-text-2);
	font-size: 0.9375rem;
	font-weight: 600;
}

.social--drawer {
	margin-top: 20px;
	color: var(--c-ink);
}

/* Search form (overlay, drawer, search page, 404) */

.search-form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.search-form__icon {
	position: absolute;
	top: 50%;
	left: 14px;
	display: flex;
	color: var(--c-muted);
	transform: translateY(-50%);
	pointer-events: none;
}

.search-form__field {
	flex: 1;
	min-width: 0;
	height: 52px;
	padding: 0 14px 0 44px;
	border: 2px solid var(--c-ink);
	border-radius: var(--radius);
	background: var(--c-bg);
	color: var(--c-ink);
	font-size: 1.0625rem;
	font-weight: 500;
	text-overflow: ellipsis;
	-webkit-appearance: none;
	appearance: none;
}

.search-form__field::placeholder {
	color: var(--c-muted);
	text-overflow: ellipsis;
}

.search-form__field:focus {
	border-color: var(--c-accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.search-form__submit {
	min-height: 52px;
}

/* Phones: the header search box gets the full row; the keyboard's Search key submits. */
@media (max-width: 479px) {
	.search-overlay .search-form__submit {
		display: none;
	}
}

/* ==========================================================================
   9. Labels: badges, kickers, time stamps
   ========================================================================== */

.badges {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 7px 3px;
	border-radius: 2px;
	background: var(--c-brand);
	color: #fff;
	font: 800 0.6875rem/1.15 var(--font-head);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
}

.badge--breaking,
.badge--live {
	background: var(--c-accent);
	color: var(--c-on-accent);
}

.badge--exclusive {
	background: var(--c-brand);
	color: #fff;
}

.badge--sponsored {
	background: #f4ead0;
	color: #574310;
}

.badge--updated {
	background: transparent;
	color: var(--c-text-2);
	box-shadow: inset 0 0 0 1px var(--c-rule);
}

.badge--analysis {
	background: transparent;
	color: var(--c-ink);
	box-shadow: inset 0 0 0 1.5px currentColor;
}

.badge--opinion {
	background: #46327a;
	color: #fff;
}

:root[data-theme="dark"] .badge--exclusive {
	background: #2a3d63;
}

:root[data-theme="dark"] .badge--sponsored {
	background: #3d321a;
	color: #f1dfab;
}

/* Breaking and Live: a dot that pulses a few times as the page opens (section 20). */
.badge__dot {
	position: relative;
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.kicker {
	display: inline-block;
	color: var(--c-kicker);
	font: 800 0.75rem/1.2 var(--font-head);
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

a.kicker:hover {
	color: var(--c-kicker);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * Section links on cards sit above the card's story link: make them at least
 * 24px tall to tap (WCAG 2.5.8) without moving anything around them.
 */
.card__top a.kicker,
.article-header a.kicker {
	padding-block: 5px;
	margin-block: -5px;
}

/* ==========================================================================
   10. Story cards
   ========================================================================== */

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.card__media {
	position: relative;
	margin: 0 0 10px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 2px;
	background: var(--c-band);
}

/* WebP wrapper (inc/images.php): the image lays out as if it had no wrapper. */
picture.picture {
	display: contents;
}

.card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hover effects only where a mouse can hover (no "stuck" hover after a tap). The photo zoom is in section 20. */
@media (hover: hover) {
	.card:hover .card__link {
		color: var(--c-accent-text);
	}
}

.card__play {
	position: absolute;
	bottom: 10px;
	left: 10px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(10, 26, 51, 0.88);
	color: #fff;
}

.card__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.card__top {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin-bottom: 6px;
}

.card__title {
	color: var(--c-ink);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.012em;
	text-wrap: pretty;
}

.card__link {
	color: inherit;
}

.card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.card__link:focus-visible {
	color: var(--c-accent-text);
	outline: none;
}

.card__link:focus-visible::after {
	outline: 3px solid var(--c-focus);
	outline-offset: 3px;
}

.card__excerpt {
	margin: 6px 0 0;
	color: var(--c-text-2);
	font: 400 0.9375rem/1.45 var(--font-body);
}

.card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 10px;
	margin-top: 8px;
	color: var(--c-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.card__byline {
	color: var(--c-text-2);
	font-weight: 700;
}

.card.is-sponsored .card__title {
	font-weight: 600;
}

/* Lead story */

.card--hero .card__media {
	margin-bottom: 14px;
}

.card--hero .card__title {
	font-size: clamp(1.625rem, 1.15rem + 2vw, 2.5rem);
	font-weight: 800;
	line-height: 1.07;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.card--hero .card__excerpt {
	margin-top: 10px;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.card--hero .card__meta {
	margin-top: 10px;
}

.card--hero.no-image {
	justify-content: flex-end;
	min-height: 300px;
	padding: 28px 24px 24px;
	border-radius: 2px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0) 60%),
		var(--c-brand);
	color: #fff;
}

.card--hero.no-image .card__title,
.card--hero.no-image .card__byline {
	color: #fff;
}

.card--hero.no-image:hover .card__link,
.card--hero.no-image .card__link:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* With animations on, the line grows in instead (section 20). */
@media (prefers-reduced-motion: no-preference) {
	.has-motion .card--hero.no-image:hover .card__link,
	.has-motion .card--hero.no-image .card__link:focus-visible {
		text-decoration: none;
	}
}

.card--hero.no-image .card__excerpt {
	color: rgba(255, 255, 255, 0.86);
}

.card--hero.no-image .card__meta {
	color: rgba(255, 255, 255, 0.72);
}

.card--hero.no-image .kicker {
	color: var(--c-accent-on-brand);
}

/* Large */

.card--large .card__title {
	font-size: clamp(1.375rem, 1.05rem + 1.2vw, 1.875rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.card--large .card__excerpt {
	font-size: 1rem;
}

.card--large.no-image,
.card--standard.no-image {
	padding-top: 12px;
	border-top: 3px solid var(--c-ink);
}

/* List: image on the left */

.card--list {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: 16px 0;
	border-bottom: 1px solid var(--c-rule);
}

.card--list.no-image {
	grid-template-columns: minmax(0, 1fr);
}

.card--list .card__media {
	margin: 0;
}

.card--list .card__excerpt {
	display: none;
}

@media (min-width: 600px) {
	.card--list {
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 20px;
	}

	.card--list .card__title {
		font-size: 1.1875rem;
		line-height: 1.2;
	}

	.card--list .card__excerpt {
		display: block;
	}
}

@media (min-width: 1024px) {
	.card--list {
		grid-template-columns: 240px minmax(0, 1fr);
	}
}

/* Compact: headline only */

.card--compact {
	flex-direction: row;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--c-rule);
}

.card--compact .card__title {
	font-size: 0.9688rem;
	line-height: 1.3;
}

.card--compact .card__meta {
	margin-top: 4px;
}

.card--compact .card__top {
	margin-bottom: 4px;
}

.card__number {
	flex: none;
	min-width: 1.4ch;
	color: var(--c-accent-text);
	font: 800 1.875rem/0.95 var(--font-head);
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   11. Section headings and grids
   ========================================================================== */

.section-head {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--c-rule);
}

.section-head::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 56px;
	height: 4px;
	background: var(--c-accent);
}

.section-head__title {
	color: var(--c-ink);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.section-head__title a:hover {
	color: var(--c-accent-text);
}

.section-head__more {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 2px;
	color: var(--c-accent-text);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.section-head__more:hover {
	text-decoration: underline;
}

/*
 * Even grid of story cards: two across, then four across on wide sections.
 * It runs on a 12-column track so the last row never leaves a hole: one
 * story left over spans the row (image beside the text), two share it in
 * halves and three in thirds.
 */
.card-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap-y) var(--gap);
}

@container (min-width: 520px) {
	.card-grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.card-grid > * {
		grid-column: span 6;
	}

	.card-grid > :nth-child(2n + 1):last-child {
		grid-column: 1 / -1;
	}

	.card-grid > .card.has-image:nth-child(2n + 1):last-child {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gap);
		align-items: center;
	}

	.card-grid > .card.has-image:nth-child(2n + 1):last-child .card__media {
		margin: 0;
	}
}

@container (min-width: 900px) {
	.card-grid > *,
	.card-grid > :nth-child(2n + 1):last-child {
		grid-column: span 3;
	}

	.card-grid > .card.has-image:nth-child(2n + 1):last-child {
		display: flex;
	}

	.card-grid > .card.has-image:nth-child(2n + 1):last-child .card__media {
		margin: 0 0 10px;
	}

	.card-grid > :nth-child(4n + 1):nth-last-child(2),
	.card-grid > :nth-child(4n + 2):last-child {
		grid-column: span 6;
	}

	.card-grid > :nth-child(4n + 1):nth-last-child(3),
	.card-grid > :nth-child(4n + 2):nth-last-child(2),
	.card-grid > :nth-child(4n + 3):last-child {
		grid-column: span 4;
	}

	.card-grid > :nth-child(4n + 1):last-child {
		grid-column: 1 / -1;
	}

	.card-grid > .card.has-image:nth-child(4n + 1):last-child {
		display: grid;
	}

	.card-grid > .card.has-image:nth-child(4n + 1):last-child .card__media {
		margin: 0;
	}
}

/* ==========================================================================
   12. Homepage
   ========================================================================== */

/*
 * Page zones: top stories (full width), then the sections above Most Read
 * beside the sticky right rail (.home__body), then the remaining sections at
 * full width (.home__full). On phones the rail follows its sections.
 */
.home__top {
	padding-top: 20px;
}

.home__body {
	display: grid;
	gap: var(--section-space);
	margin-bottom: var(--section-space);
}

.home__main {
	min-width: 0;
}

.home__main > :last-child {
	margin-bottom: 0;
}

@media (min-width: 1024px) {
	.home__body.has-sidebar {
		grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
		gap: var(--sidebar-gap);
	}
}

.home-section {
	margin: 0 0 var(--section-space);
	container-type: inline-size;
}

.home-section.band {
	padding: 4px 16px 8px;
	background: var(--c-band);
}

.home-section.band .section-head {
	border-top-color: transparent;
}

/* Always-dark band (Video): text, rule, label and focus colors for a dark surface. */
.home-section.is-dark {
	--c-ink: #fff;
	--c-text: #fff;
	--c-text-2: #c5cad3;
	--c-muted: #a3acb9;
	--c-rule: rgba(255, 255, 255, 0.18);
	--c-band: #151b24;
	--c-accent-text: var(--c-accent-text-dark);
	--c-kicker: var(--c-accent-text-dark);
	--c-focus: #8ab4f8;
	padding: 4px 16px 20px;
	background: #0b1220;
	color: #fff;
}

.home-html > :last-child {
	margin-bottom: 0;
}

/* Hero: lead + secondary + Latest rail */

.home-section--hero {
	margin-bottom: var(--section-space);
}

.hero {
	display: grid;
	grid-template-areas: "lead" "secondary" "rail";
	gap: 20px;
}

/* A lead story on its own (no secondary stories, no rail) fills the row. */
.hero:not(.has-rail):not(.has-secondary) {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "lead";
}

.hero__lead {
	grid-area: lead;
	min-width: 0;
}

@media (max-width: 619px) {
	.hero__lead .card--hero .card__media {
		margin-inline: calc(-1 * var(--gutter));
		border-radius: 0;
	}
}

.hero__secondary {
	grid-area: secondary;
	min-width: 0;
}

.hero__rail {
	grid-area: rail;
	min-width: 0;
}

.hero__secondary .card {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 14px 0;
	border-top: 1px solid var(--c-rule);
}

.hero__secondary .card.no-image {
	grid-template-columns: minmax(0, 1fr);
}

.hero__secondary .card__media {
	margin: 0;
}

.hero__secondary .card__title {
	font-size: 1rem;
}

.rail__title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--c-ink);
	color: var(--c-ink);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.rail__pulse {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--c-accent);
}

.rail__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rail__list li {
	break-inside: avoid;
}

.rail .card__body {
	flex-direction: column;
}

.rail .card__meta {
	order: -1;
	margin: 0 0 3px;
	color: var(--c-accent-text);
	font-weight: 800;
}

.rail .card--compact .card__title {
	font-size: 0.9375rem;
}

@container (min-width: 620px) {
	.hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "lead lead" "secondary secondary" "rail rail";
	}

	.hero__secondary {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 20px;
	}

	.hero__secondary .card {
		display: flex;
		padding: 0;
		border: 0;
	}

	.hero__secondary .card__media {
		margin-bottom: 10px;
	}

	.hero__secondary .card.no-image {
		padding-top: 12px;
		border-top: 3px solid var(--c-ink);
	}

	.rail__list {
		columns: 2;
		column-gap: 28px;
	}
}

/*
 * Tablets in landscape and small laptops (a 760-979px wide section): the lead
 * photo sits beside its headline, so the headline is on the first screen
 * instead of below a full-width photo. From 980px the lead shares the row
 * with the secondary stories and the "Latest" rail.
 */
@container (min-width: 760px) and (max-width: 979.98px) {
	.hero__lead .card--hero.has-image {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		gap: 24px;
		align-items: center;
	}

	.hero__lead .card--hero.has-image .card__media {
		margin: 0;
	}

	.hero__lead .card--hero.has-image .card__title {
		font-size: clamp(1.625rem, 0.9rem + 1.9vw, 2.25rem);
	}

	.hero__lead .card--hero.has-image .card__excerpt {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		line-clamp: 4;
	}
}

@container (min-width: 980px) {
	.hero {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		grid-template-areas: "lead secondary" "rail rail";
		gap: 24px;
	}

	.hero:not(.has-rail):not(.has-secondary) .card--hero.has-image {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		gap: 32px;
		align-items: center;
	}

	.hero:not(.has-rail):not(.has-secondary) .card--hero.has-image .card__media {
		margin: 0;
	}

	.hero.has-rail {
		grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 0.92fr);
		grid-template-areas: "lead secondary rail";
	}

	.hero.has-rail:not(.has-secondary) {
		grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
		grid-template-areas: "lead rail";
	}

	.hero__secondary {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.hero__secondary .card {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 12px;
		padding: 14px 0;
		border-top: 1px solid var(--c-rule);
	}

	.hero__secondary .card:first-child {
		display: flex;
		padding-top: 0;
		border-top: 0;
	}

	.hero__secondary .card:first-child .card__media {
		margin-bottom: 10px;
	}

	.hero__secondary .card:first-child .card__title {
		font-size: 1.1875rem;
		font-weight: 800;
		line-height: 1.18;
	}

	.hero__secondary .card:not(:first-child) .card__title {
		font-size: 0.9375rem;
	}

	.hero__secondary .card.no-image {
		grid-template-columns: minmax(0, 1fr);
		border-top-width: 1px;
		border-top-color: var(--c-rule);
	}

	.hero__rail {
		padding-left: 22px;
		border-left: 1px solid var(--c-rule);
	}

	.rail__list {
		columns: 1;
	}
}

/* Story rivers */

.river--list {
	display: flex;
	flex-direction: column;
}

.river--list > .card--list:first-child {
	padding-top: 0;
}

.river--grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px 20px;
}

.river--grid > .river__lead,
.river--grid > .ad-area {
	grid-column: 1 / -1;
}

.river__lead {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--c-rule);
}

.river--main .river__lead .card__title {
	font-size: clamp(1.625rem, 1.15rem + 1.8vw, 2.375rem);
}

@container (min-width: 560px) {
	.river--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (min-width: 760px) {
	.river__lead.has-image {
		display: grid;
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		gap: 24px;
		align-items: center;
	}

	.river__lead.has-image .card__media {
		margin: 0;
	}
}

@container (min-width: 900px) {
	.river--grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * Homepage lists (More News, section lists): two columns on wide sections.
 * Summaries stay to two lines; an odd last story spans both columns.
 */
.home-section .river--list .card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.home-section .river--list > .card--list:last-child {
	border-bottom: 0;
}

@container (max-width: 599px) {
	.home-section .river--list .card__excerpt {
		display: none;
	}
}

@container (min-width: 840px) {
	.home-section .river--list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
		align-items: start;
	}

	.home-section .river--list > .card--list {
		grid-template-columns: 160px minmax(0, 1fr);
		gap: 16px;
		padding-top: 16px;
	}

	.home-section .river--list > .card--list.no-image {
		grid-template-columns: minmax(0, 1fr);
	}

	.home-section .river--list > .card--list:nth-child(-n + 2) {
		padding-top: 0;
	}

	.home-section .river--list > .card--list:nth-child(odd):last-child {
		grid-column: 1 / -1;
	}

	.home-section .river--list > .card--list .card__title {
		font-size: 1.0625rem;
		line-height: 1.25;
	}

	/* Rows share a bottom rule; the last row needs none. */
	.home-section .river--list > .card--list:nth-child(odd):nth-last-child(2) {
		border-bottom: 0;
	}
}

.river--compact .card--list {
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 12px;
	padding: 12px 0;
}

.river--compact .card--list.no-image {
	grid-template-columns: minmax(0, 1fr);
}

.river--compact .card__title {
	font-size: 1rem;
}

@container (min-width: 840px) {
	.home-section .river--compact > .card--list {
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 14px;
	}
}

/*
 * Story blocks (homepage sections). The layout follows the number of stories
 * (story-block--1 to --5, set by inc/homepage.php), so no column is ever left
 * empty:
 *   1  one wide story, image beside the text
 *   2  two equal columns
 *   3  three equal columns (tablets: lead across, two below)
 *   4  lead + three stacked stories (tablets: lead across, three below)
 *   5  lead + a 2 x 2 grid (tablets: lead across, 2 x 2 below)
 * Phones: the first story large, the others as compact rows.
 */
.story-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap-y) var(--gap);
}

.story-block + .story-block__more {
	margin-top: var(--gap-y);
}

/* Headline sizes follow the width of the section (cqi), not the screen. */
.story-block .card--large .card__title {
	font-size: clamp(1.25rem, 0.85rem + 1.5cqi, 1.75rem);
}

.story-block--1 .card--large .card__title {
	font-size: clamp(1.375rem, 0.95rem + 1.7cqi, 2.125rem);
}

.story-block--3 .card__title {
	font-size: 1.1875rem;
	font-weight: 800;
	line-height: 1.2;
}

.story-block .card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

@container (max-width: 599px) {
	.story-block {
		gap: 0;
	}

	.story-block > .card + .card {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 12px;
		align-items: start;
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid var(--c-rule);
	}

	.story-block > .card + .card.no-image {
		grid-template-columns: minmax(0, 1fr);
	}

	.story-block > .card + .card .card__media {
		margin: 0;
	}

	.story-block > .card + .card .card__excerpt,
	.story-block > .card + .card .card__byline {
		display: none;
	}

	.story-block > .card + .card .card__title {
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.25;
		letter-spacing: -0.01em;
	}

	.story-block + .story-block__more {
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid var(--c-rule);
	}
}

@container (min-width: 600px) {
	.story-block {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.story-block > .card {
		grid-column: span 6;
	}

	/* The lead runs across the block with its image beside the text. */
	.story-block--1 > .card,
	.story-block--3 > .card:first-child,
	.story-block--4 > .card:first-child,
	.story-block--5 > .card:first-child {
		grid-column: 1 / -1;
	}

	.story-block--1 > .card.has-image,
	.story-block--3 > .card.has-image:first-child,
	.story-block--4 > .card.has-image:first-child,
	.story-block--5 > .card.has-image:first-child {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: var(--gap);
		align-items: center;
	}

	.story-block--1 > .card.has-image .card__media,
	.story-block--3 > .card.has-image:first-child .card__media,
	.story-block--4 > .card.has-image:first-child .card__media,
	.story-block--5 > .card.has-image:first-child .card__media {
		margin: 0;
	}

	.story-block--4 > .card + .card {
		grid-column: span 4;
	}

	.story-block--3 > .card:first-child .card__title {
		font-size: 1.5rem;
		line-height: 1.15;
	}
}

@container (min-width: 860px) {
	.story-block--3 > .card:first-child .card__title {
		font-size: 1.1875rem;
		line-height: 1.2;
	}

	.story-block--1 > .card.has-image {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: 32px;
	}

	.story-block--3 > .card,
	.story-block--3 > .card:first-child {
		grid-column: span 4;
	}

	/* Lead stories stand tall on the left from here on. */
	.story-block--3 > .card.has-image:first-child,
	.story-block--4 > .card.has-image:first-child,
	.story-block--5 > .card.has-image:first-child {
		display: flex;
	}

	.story-block--3 > .card.has-image:first-child .card__media {
		margin: 0 0 10px;
	}

	.story-block--4 > .card.has-image:first-child .card__media,
	.story-block--5 > .card.has-image:first-child .card__media {
		margin: 0 0 14px;
	}

	.story-block--4 {
		row-gap: 0;
	}

	.story-block--4 > .card:first-child {
		grid-column: 1 / span 6;
		grid-row: 1 / span 3;
	}

	.story-block--4 > .card + .card {
		display: grid;
		grid-column: 7 / -1;
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
		gap: 16px;
		align-items: start;
		align-self: start;
		padding: 16px 0;
		border-top: 1px solid var(--c-rule);
	}

	.story-block--4 > .card:nth-child(2) {
		padding-top: 0;
		border-top: 0;
	}

	.story-block--4 > .card + .card.no-image {
		grid-template-columns: minmax(0, 1fr);
	}

	.story-block--4 > .card + .card .card__media {
		margin: 0;
	}

	.story-block--5 > .card:first-child {
		grid-column: 1 / span 6;
		grid-row: 1 / span 2;
	}

	.story-block--5 > .card + .card {
		grid-column: span 3;
	}
}

/* Most Read */

.most-read {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.most-read > li:last-child .card--compact {
	border-bottom: 0;
}

/* Full-width band (homepage sidebar off): one column per story, up to five. */
@container (min-width: 860px) {
	.home-section--most-read .most-read {
		grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
		gap: var(--gap);
	}

	.home-section--most-read .card--compact {
		flex-direction: column;
		gap: 8px;
		padding: 0 0 12px;
		border-bottom: 0;
	}

	.home-section--most-read .card__number {
		font-size: 2.5rem;
	}
}

/*
 * Magazine block (style "magazine", the Celebrity section by default): tall
 * 4:5 portrait photos, headlines set tight and heavy, summaries in italic.
 * The layout follows the number of stories (magazine--1 to --5, set by
 * inc/homepage.php), so a row is always full on large screens:
 *   1  one feature: photo beside headline, summary and byline
 *   2  two features side by side
 *   3  a feature whose photo is as tall as the row + two portraits
 *   4  four portraits
 *   5+ five portraits per row
 * Below an 860px-wide section the portraits become a swipeable row (edge to
 * edge on phones); one story stays a feature.
 */
.card__media--portrait {
	aspect-ratio: 4 / 5;
	border-radius: 3px;
}

/* Keeps faces in the frame when a tall photo is cropped to 4:5. */
.card__media--portrait img {
	object-position: 50% 22%;
}

/* A soft shade at the foot of the photo gives the portraits depth. */
.card__media--portrait::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 14, 26, 0.26), rgba(8, 14, 26, 0) 40%);
	pointer-events: none;
}

.card__media--portrait .card__play {
	z-index: 1;
}

/* A story without a photo keeps the tall frame: a quiet brand panel. */
.card__media--blank {
	background:
		radial-gradient(120% 80% at 0 0, var(--c-accent-soft), transparent 62%),
		linear-gradient(160deg, var(--c-brand), #050c18);
}

.card--portrait .card__media {
	margin-bottom: 12px;
}

.card--portrait .card__title {
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.card--portrait .card__excerpt {
	font-style: italic;
}

.card--portrait.is-feature .card__title {
	font-size: clamp(1.25rem, 0.95rem + 1.3cqi, 1.75rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.card--portrait.is-feature .card__excerpt {
	margin-top: 10px;
	font-size: 1rem;
	line-height: 1.5;
}

.magazine {
	display: grid;
	gap: var(--gap-y) var(--gap);
}

/* One story: a feature, photo beside the text. */
.magazine--1 > .card {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 16px;
	align-items: start;
}

.magazine--1 > .card .card__media {
	margin: 0;
}

@container (min-width: 600px) {
	.magazine--1 > .card {
		grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
		gap: 32px;
		align-items: center;
	}
}

/* Phones and tablets: a swipeable row of portraits. */
@container (max-width: 859.98px) {
	.magazine:not(.magazine--1) {
		grid-auto-columns: calc((100% - 2 * 16px) / 3.2);
		grid-auto-flow: column;
		gap: 16px;
		padding-bottom: 2px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.magazine:not(.magazine--1)::-webkit-scrollbar {
		display: none;
	}

	.magazine:not(.magazine--1) > .card {
		scroll-snap-align: start;
	}

	/* In the row every story is a portrait: same height, headline and time. */
	.magazine:not(.magazine--1) .card__excerpt,
	.magazine:not(.magazine--1) .card__byline {
		display: none;
	}

	.magazine:not(.magazine--1) .card.is-feature .card__title {
		font-size: 1.0625rem;
		line-height: 1.2;
	}
}

/* Phones: the row runs to the screen edges and starts in line with the page. */
@container (max-width: 599.98px) {
	.magazine:not(.magazine--1) {
		grid-auto-columns: min(64%, 260px);
		gap: 14px;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		scroll-padding-inline: var(--gutter);
	}
}

/*
 * A mouse can't swipe: in a narrow window (or beside the sidebar) the row
 * wraps into an even grid instead: 2 or 3 across, 2 across below 600px.
 */
@media (hover: hover) and (pointer: fine) {
	@container (max-width: 859.98px) {
		.magazine:not(.magazine--1) {
			grid-template-columns: repeat(var(--magazine-cols, 3), minmax(0, 1fr));
			grid-auto-flow: row;
			margin-inline: 0;
			padding-inline: 0;
			overflow: visible;
			scroll-snap-type: none;
		}

		.magazine--2,
		.magazine--4 {
			--magazine-cols: 2;
		}
	}

	@container (max-width: 599.98px) {
		.magazine:not(.magazine--1) {
			--magazine-cols: 2;
		}
	}
}

@container (min-width: 860px) {
	.magazine--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.magazine--3 {
		grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
	}

	.magazine--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.magazine--5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.magazine--2 > .card.is-feature,
	.magazine--3 > .card.is-feature {
		display: grid;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: 22px;
		align-items: center;
	}

	.magazine .card.is-feature .card__media {
		margin: 0;
	}

	/* Three stories: the feature's photo fills the height of the row beside it. */
	.magazine--3 > .card.is-feature {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
	}

	.magazine--3 > .card.is-feature .card__media {
		min-height: 260px;
		aspect-ratio: auto;
	}

	.magazine--3 > .card.is-feature .card__media img {
		position: absolute;
		inset: 0;
	}

	.magazine--3 > .card.is-feature .card__body {
		align-self: center;
	}
}

/* ==========================================================================
   13. Section, topic, author, search pages
   ========================================================================== */

.page-layout {
	display: grid;
	gap: var(--section-space);
	padding-top: 24px;
	padding-bottom: 48px;
}

.page-layout__main {
	min-width: 0;
	container-type: inline-size;
}

@media (min-width: 1024px) {
	.page-layout.has-sidebar {
		grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
		gap: var(--sidebar-gap);
	}
}

.archive-header {
	position: relative;
	margin-bottom: 20px;
	padding: 4px 0 20px;
	border-bottom: 1px solid var(--c-rule);
}

.archive-header::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 72px;
	height: 4px;
	background: var(--c-accent);
}

.archive-header__label {
	margin: 0 0 6px;
	color: var(--c-kicker);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.archive-header__title {
	color: var(--c-ink);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.archive-header__description {
	max-width: 68ch;
	margin-top: 10px;
	color: var(--c-text-2);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.archive-header__description p:last-child {
	margin-bottom: 0;
}

.archive-header--author {
	display: flex;
	align-items: center;
	gap: 20px;
}

.archive-header__avatar img {
	display: block;
	width: 80px;
	height: 80px;
	border-radius: 50%;
}

.archive-header--search .search-form {
	max-width: 680px;
	margin-top: 18px;
}

.archive-header__count {
	margin: 14px 0 0;
	color: var(--c-muted);
	font-size: 0.875rem;
	font-weight: 600;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.chip,
.chips a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 4px 14px;
	border: 1px solid var(--c-rule);
	border-radius: 999px;
	color: var(--c-ink);
	font-size: 0.8125rem;
	font-weight: 700;
}

.chip:hover,
.chips a:hover {
	border-color: var(--c-accent);
	color: var(--c-accent-text);
}

.pagination {
	margin-top: 32px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--c-rule);
	border-radius: var(--radius);
	color: var(--c-ink);
	font-size: 0.9375rem;
	font-weight: 700;
}

.pagination .page-numbers.current {
	border-color: var(--c-ink);
	background: var(--c-ink);
	color: var(--c-bg);
}

.pagination a.page-numbers:hover {
	border-color: var(--c-accent);
	color: var(--c-accent-text);
}

.pagination .page-numbers.dots {
	min-width: 24px;
	padding: 0;
	border: 0;
}

.pagination .prev .icon {
	transform: rotate(180deg);
}

@media (max-width: 479px) {
	.pagination .prev span,
	.pagination .next span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}
}

/* ==========================================================================
   14. Article
   ========================================================================== */

.article-layout {
	display: grid;
	gap: 40px;
	max-width: calc(760px + 2 * var(--gutter));
	padding-top: 24px;
	padding-bottom: 48px;
}

.article-layout.has-sidebar {
	max-width: calc(1120px + 2 * var(--gutter));
}

.article-layout__main {
	min-width: 0;
	container-type: inline-size;
}

@media (min-width: 1024px) {
	.article-layout.has-sidebar {
		grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
		gap: 52px;
	}
}

.article-header {
	margin-bottom: 20px;
}

.article-header__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin-bottom: 12px;
}

.article-header .kicker {
	font-size: 0.8125rem;
}

.article-title {
	color: var(--c-ink);
	font-size: clamp(1.875rem, 1.2rem + 2.7vw, 3rem);
	font-weight: 800;
	line-height: 1.07;
	letter-spacing: -0.028em;
	text-wrap: balance;
}

.article-dek {
	margin: 14px 0 0;
	color: var(--c-text-2);
	font: 400 clamp(1.125rem, 1rem + 0.5vw, 1.375rem)/1.42 var(--font-body);
	text-wrap: pretty;
}

.article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 20px;
	padding: 14px 0;
	border-top: 1px solid var(--c-rule);
	border-bottom: 1px solid var(--c-rule);
}

.article-meta__main {
	min-width: 0;
}

.article-meta__byline {
	margin: 0 0 3px;
	color: var(--c-ink);
	font-size: 0.9375rem;
	font-weight: 800;
}

.article-meta__byline a {
	color: var(--c-ink);
	text-decoration: underline;
	text-decoration-color: var(--c-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.article-meta__byline a:hover {
	color: var(--c-accent-text);
}

.article-meta__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
	margin: 0;
	color: var(--c-muted);
	font-size: 0.8125rem;
	font-weight: 500;
}

.article-meta__date--updated {
	color: var(--c-text-2);
	font-weight: 700;
}

.article-meta__reading {
	white-space: nowrap;
}

.article-figure {
	margin: 0 0 26px;
}

.article-figure__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--c-band);
}

.article-figure__caption {
	margin-top: 8px;
	color: var(--c-muted);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.figure-caption {
	color: var(--c-text-2);
}

.figure-credit {
	color: var(--c-muted);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}

.figure-credit a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 767px) {
	.article-figure {
		margin-inline: calc(-1 * var(--gutter));
	}

	.article-figure__caption {
		padding-inline: var(--gutter);
	}
}

/* Body typography */

.entry-content {
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: 1.125rem;
	line-height: 1.7;
	overflow-wrap: break-word;
}

@media (min-width: 768px) {
	.entry-content {
		font-size: 1.1875rem;
	}
}

.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

.entry-content > * {
	margin-top: 0;
	margin-bottom: 1.25em;
}

.entry-content p {
	text-wrap: pretty;
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	margin: 1.7em 0 0.55em;
	color: var(--c-ink);
	font-family: var(--font-head);
	text-wrap: balance;
}

.entry-content h2 {
	font-size: 1.625rem;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.018em;
}

.entry-content h3 {
	font-size: 1.3125rem;
	font-weight: 800;
	line-height: 1.24;
}

.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.entry-content a {
	color: var(--c-link);
	text-decoration: underline;
	text-decoration-color: var(--c-accent);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.entry-content a:hover {
	color: var(--c-accent-text);
}

.entry-content strong,
.entry-content b {
	font-weight: 700;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
}

.entry-content li {
	margin-bottom: 0.45em;
}

.entry-content li::marker {
	color: var(--c-accent-text);
	font-weight: 700;
}

.entry-content blockquote {
	margin: 1.7em 0;
	padding: 0.1em 0 0.1em 1.1em;
	border-left: 4px solid var(--c-accent);
	color: var(--c-ink);
	font-style: italic;
}

.entry-content blockquote p {
	margin-bottom: 0.6em;
}

.entry-content blockquote cite,
.entry-content .wp-block-quote cite,
.entry-content .wp-block-pullquote cite {
	display: block;
	margin-top: 0.6em;
	color: var(--c-muted);
	font: 700 0.8125rem/1.4 var(--font-head);
	font-style: normal;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.entry-content .wp-block-pullquote {
	margin: 2em 0;
	padding: 1.3em 0 1em;
	border-top: 4px solid var(--c-ink);
	border-bottom: 1px solid var(--c-rule);
	text-align: left;
}

.entry-content .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}

.entry-content .wp-block-pullquote p {
	color: var(--c-ink);
	font: 800 clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem)/1.2 var(--font-head);
	letter-spacing: -0.018em;
}

.entry-content .wp-block-pullquote p::before {
	content: "\201C";
	display: block;
	height: 0.55em;
	color: var(--c-accent-text);
	font-size: 2.6em;
	line-height: 0.9;
}

.entry-content figure {
	margin: 1.8em 0;
}

.entry-content figcaption,
.entry-content .wp-element-caption,
.wp-caption-text {
	margin-top: 8px;
	color: var(--c-muted);
	font: 400 0.8125rem/1.45 var(--font-head);
	text-align: left;
}

.entry-content img {
	height: auto;
}

.entry-content .wp-caption {
	max-width: 100%;
}

.alignleft {
	float: left;
	max-width: 50%;
	margin: 0.35em 1.4em 1em 0;
}

.alignright {
	float: right;
	max-width: 50%;
	margin: 0.35em 0 1em 1.4em;
}

.aligncenter {
	margin-inline: auto;
	text-align: center;
}

@media (max-width: 599px) {
	.alignleft,
	.alignright {
		float: none;
		max-width: 100%;
		margin-inline: 0;
	}
}

@media (min-width: 1180px) {
	.article-layout:not(.has-sidebar) .entry-content .alignwide {
		width: auto;
		max-width: none;
		margin-inline: -170px;
	}

	.article-layout:not(.has-sidebar) .entry-content .alignfull {
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(50% - 50vw);
	}
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font: 400 0.9375rem/1.45 var(--font-head);
	font-variant-numeric: tabular-nums;
}

.entry-content > table {
	display: block;
	overflow-x: auto;
}

.entry-content .wp-block-table {
	overflow-x: auto;
}

.entry-content th,
.entry-content td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--c-rule);
	text-align: left;
	vertical-align: top;
}

.entry-content thead th {
	border-bottom: 2px solid var(--c-ink);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.entry-content .is-style-stripes tbody tr:nth-child(odd) {
	background: var(--c-band);
}

.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content video {
	max-width: 100%;
}

.entry-content > iframe,
.entry-content p > iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.entry-content .wp-block-embed {
	margin: 1.8em 0;
}

.entry-content code,
.entry-content kbd {
	padding: 0.1em 0.35em;
	border-radius: 3px;
	background: var(--c-band);
	font: 0.875em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.entry-content pre {
	padding: 16px;
	overflow-x: auto;
	border-radius: var(--radius);
	background: var(--c-band);
	font-size: 0.875rem;
	line-height: 1.55;
}

.entry-content pre code {
	padding: 0;
	background: none;
}

.entry-content hr,
.entry-content .wp-block-separator {
	width: 100%;
	margin: 2.2em auto;
	border: 0;
	border-top: 1px solid var(--c-rule);
}

.entry-content .wp-block-separator.is-style-dots {
	border: 0;
	text-align: center;
}

.entry-content .wp-block-button__link {
	color: #fff;
	text-decoration: none;
}

.entry-content mark {
	padding: 0 0.15em;
	background: #ffe9a8;
	color: #111418;
}

.entry-content details {
	margin: 1.4em 0;
	padding: 12px 16px;
	border: 1px solid var(--c-rule);
	border-radius: var(--radius);
}

.entry-content summary {
	font-family: var(--font-head);
	font-weight: 800;
	cursor: pointer;
}

.has-drop-cap .entry-content > p:first-of-type::first-letter,
.entry-content .has-drop-cap:not(:focus)::first-letter {
	float: left;
	margin: 0.06em 0.09em 0 0;
	color: var(--c-accent-text);
	font: 800 4.1em/0.82 var(--font-head);
}

.page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 1.5em 0;
	font-family: var(--font-head);
	font-weight: 700;
}

.page-links a,
.page-links > span:not(.page-links__label) {
	display: inline-grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	border: 1px solid var(--c-rule);
	border-radius: var(--radius);
	text-decoration: none;
}

/* Share */

.share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.share__label {
	color: var(--c-muted);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.share--top .share__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.share__list [hidden] {
	display: none;
}

.share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--c-rule);
	border-radius: 999px;
	background: var(--c-bg);
	color: var(--c-ink);
	font: 700 0.8125rem/1 var(--font-head);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.share__btn:hover {
	border-color: var(--c-ink);
	color: var(--c-ink);
}

.share__btn--x:hover {
	border-color: #000;
	background: #000;
	color: #fff;
}

:root[data-theme="dark"] .share__btn--x:hover {
	border-color: #fff;
	background: #fff;
	color: #000;
}

.share__btn--facebook:hover {
	border-color: #1877f2;
	background: #1877f2;
	color: #fff;
}

.share__btn--linkedin:hover {
	border-color: #0a66c2;
	background: #0a66c2;
	color: #fff;
}

.share__btn.is-copied {
	border-color: var(--c-success);
	color: var(--c-success);
}

.share--top .share__btn {
	width: 40px;
	padding: 0;
}

.share--top .share__text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.share__status {
	color: var(--c-success);
	font-size: 0.8125rem;
	font-weight: 700;
}

.share__status:empty {
	display: none;
}

/* Article footer */

.article-footer {
	display: grid;
	gap: 24px;
	margin-top: 28px;
}

.article-footer:empty {
	display: none;
}

.article-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.article-tags__label {
	color: var(--c-muted);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.article-tags .chips {
	margin: 0;
}

.share--bottom {
	padding: 16px 0;
	border-top: 1px solid var(--c-rule);
	border-bottom: 1px solid var(--c-rule);
}

.author-box {
	display: flex;
	gap: 16px;
	padding: 20px;
	border-radius: var(--radius);
	background: var(--c-band);
}

.author-box__avatar {
	flex: none;
	border-radius: 50%;
}

.author-box__name {
	margin: 0 0 4px;
	font-size: 1.0625rem;
	font-weight: 800;
}

.author-box__bio {
	color: var(--c-text-2);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.author-box__bio p:last-child {
	margin: 0;
}

.related {
	margin-top: var(--section-space);
	container-type: inline-size;
}

/* Comments */

.comments {
	margin-top: var(--section-space);
}

.comment-list {
	margin: 16px 0 32px;
	padding: 0;
	list-style: none;
}

.comment-list .children {
	margin: 0;
	padding-left: 24px;
	list-style: none;
}

.comment-body {
	padding: 16px 0;
	border-bottom: 1px solid var(--c-rule);
}

.comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	font-size: 0.875rem;
}

.comment-author .avatar {
	float: left;
	margin-right: 10px;
	border-radius: 50%;
}

.comment-metadata {
	color: var(--c-muted);
	font-size: 0.8125rem;
}

.comment-content {
	clear: both;
	padding-top: 8px;
	font-family: var(--font-body);
}

.comment-respond {
	margin-top: 24px;
}

.comment-form label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.875rem;
	font-weight: 700;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--c-rule);
	border-radius: var(--radius);
	background: var(--c-bg);
}

.comment-form .comment-form-cookies-consent label {
	display: inline;
	font-weight: 500;
}

.comments__closed {
	color: var(--c-muted);
}

/* ==========================================================================
   15. Sidebar and widgets
   ========================================================================== */

.sidebar {
	min-width: 0;
}

.sidebar__inner {
	display: flex;
	flex-direction: column;
	gap: var(--gap-y);
}

/*
 * Beside the content the whole sidebar is sticky, inside its own column (so
 * it never covers the footer). A short sidebar stays at the top of the
 * screen; a taller one scrolls until its end, the sidebar_bottom ad, is in
 * view and stays there. main.js measures the sidebar into --sidebar-h.
 */
@media (min-width: 1024px) {
	.has-sidebar > .sidebar {
		align-self: stretch;
	}

	.has-sidebar > .sidebar > .sidebar__inner {
		position: sticky;
		top: min(var(--sticky-top), calc(100vh - var(--sidebar-h, 0px) - 24px));
	}
}

.widget {
	font-size: 0.9375rem;
}

.widget-title {
	position: relative;
	margin-bottom: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--c-rule);
	color: var(--c-ink);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.widget-title::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 40px;
	height: 4px;
	background: var(--c-accent);
}

.widget ul:not(.most-read):not(.social) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget ul:not(.most-read):not(.social) li {
	padding: 9px 0;
	border-bottom: 1px solid var(--c-rule);
}

.widget a:not(.card__link):not(.kicker) {
	font-weight: 700;
}

.widget select {
	width: 100%;
	padding: 8px;
}

.widget .card__number {
	font-size: 1.625rem;
}

/* Tablets: the sidebar runs below the content at full width; rankings use two columns. */
@media (min-width: 600px) and (max-width: 1023px) {
	.sidebar .most-read--stack {
		display: block;
		columns: 2;
		column-gap: 32px;
	}

	.sidebar .most-read--stack > li {
		break-inside: avoid;
	}
}

/* ==========================================================================
   16. Footer
   ========================================================================== */

.site-footer {
	--c-focus: var(--c-footer-ink);
	margin-top: 48px;
	padding: 40px 0 24px;
	background: var(--c-footer-bg);
	color: var(--c-footer-ink);
	font-size: 0.9375rem;
}

.site-footer a {
	color: inherit;
}

.site-footer a:hover {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer__top {
	display: grid;
	gap: 32px;
	padding-bottom: 28px;
	border-bottom: 1px solid rgba(127, 127, 127, 0.3);
}

@media (min-width: 900px) {
	.site-footer__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
		gap: 64px;
	}
}

.site-footer .site-logo,
.site-footer .site-logo:hover {
	color: var(--c-footer-ink);
	text-decoration: none;
}

.site-footer .wordmark {
	height: 40px;
}

.site-logo--text {
	font-size: 1.75rem;
	font-weight: 900;
	letter-spacing: -0.02em;
}

.footer-logo__img {
	display: block;
	width: auto;
	max-height: 48px;
}

.site-footer__about {
	max-width: 44ch;
	margin: 14px 0 18px;
	font-family: var(--font-body);
	line-height: 1.55;
	opacity: 0.84;
}

.social--footer a {
	background: rgba(127, 127, 127, 0.22);
}

.social--footer a:hover {
	background: var(--c-accent);
	color: var(--c-on-accent);
}

.site-footer__heading {
	margin-bottom: 12px;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.72;
}

.footer-sections {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 24px;
}

.footer-sections li {
	padding: 5px 0;
	break-inside: avoid;
}

.footer-sections a {
	font-size: 1rem;
	font-weight: 700;
}

/* footer.php sets column counts that split the links evenly (no lonely last column). */
@media (min-width: 600px) {
	.footer-sections {
		columns: var(--cols-md, 2);
	}
}

@media (min-width: 1200px) {
	.footer-sections {
		columns: var(--cols-lg, 5);
	}
}

.site-footer__widgets {
	display: grid;
	gap: 28px;
	padding: 28px 0;
	border-bottom: 1px solid rgba(127, 127, 127, 0.3);
}

@media (min-width: 768px) {
	.site-footer__widgets {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 40px;
	}
}

.site-footer .widget-title {
	border-top-color: rgba(127, 127, 127, 0.3);
	color: inherit;
}

.site-footer .widget ul li {
	border-bottom-color: rgba(127, 127, 127, 0.25);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-top: 20px;
	font-size: 0.8125rem;
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu a {
	font-weight: 600;
}

.site-footer__copyright {
	margin: 0;
	opacity: 0.75;
}

/* ==========================================================================
   17. Pages, search, 404, empty states
   ========================================================================== */

.page-single {
	max-width: calc(760px + 2 * var(--gutter));
	padding-top: 32px;
	padding-bottom: 56px;
}

.page-header {
	margin-bottom: 24px;
}

.page-title {
	color: var(--c-ink);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	font-weight: 800;
	line-height: 1.07;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.page-header--full {
	padding-top: 32px;
}

.entry-content--full {
	padding-bottom: 56px;
}

.entry-content--full > * {
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.entry-content--full > p,
.entry-content--full > ul,
.entry-content--full > ol,
.entry-content--full > h2,
.entry-content--full > h3,
.entry-content--full > h4,
.entry-content--full > blockquote {
	max-width: calc(760px + 2 * var(--gutter));
}

.entry-content--full > ul,
.entry-content--full > ol {
	padding-left: calc(var(--gutter) + 1.4em);
}

.entry-content--full > .alignfull {
	max-width: none;
	padding-inline: 0;
}

.empty-state {
	max-width: 640px;
	margin: 0 auto;
	padding: 56px 0;
	text-align: center;
}

.empty-state__logo {
	width: auto;
	height: 44px;
	color: var(--c-logo-now);
}

.empty-state__title {
	margin: 20px 0 8px;
	color: var(--c-ink);
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.15;
}

.empty-state__text {
	color: var(--c-text-2);
	font-family: var(--font-body);
	font-size: 1.0625rem;
}

.empty-state .search-form {
	margin-top: 20px;
	text-align: left;
}

.error-404 {
	padding-top: 40px;
	padding-bottom: 56px;
}

.error-404__header {
	max-width: 680px;
	margin: 0 auto 52px;
	text-align: center;
}

.error-404__code {
	margin: 0;
	color: var(--c-accent-text);
	font-size: clamp(5rem, 3rem + 8vw, 9rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.05em;
}

.error-404__title {
	margin: 8px 0 12px;
	color: var(--c-ink);
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	font-weight: 800;
	line-height: 1.1;
}

.error-404__text {
	margin: 0 0 24px;
	color: var(--c-text-2);
	font-family: var(--font-body);
	font-size: 1.125rem;
}

.error-404 .search-form {
	text-align: left;
}

.error-404__latest {
	container-type: inline-size;
}

/* ==========================================================================
   18. Back to top, reading progress
   ========================================================================== */

/* main.js sets --sticky-ad-h to the height of the ads module's sticky bar, if any. */
.back-to-top {
	position: fixed;
	right: 16px;
	bottom: calc(16px + var(--sticky-ad-h, 0px));
	z-index: 90;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--c-ink);
	color: var(--c-bg);
	box-shadow: var(--shadow);
}

.back-to-top[hidden] {
	display: none;
}

/* On phones the floating button covers headline text; the OS already offers
   tap-the-status-bar to scroll up, so the button is desktop/tablet only. */
@media (max-width: 599px) {
	.back-to-top {
		display: none;
	}
}

.back-to-top:hover {
	background: var(--c-accent);
	color: var(--c-on-accent);
}

@media (min-width: 768px) {
	.back-to-top {
		right: 24px;
		bottom: calc(24px + var(--sticky-ad-h, 0px));
	}
}

.reading-progress {
	position: fixed;
	top: var(--admin-offset);
	right: 0;
	left: 0;
	z-index: 300;
	height: 3px;
	pointer-events: none;
}

.reading-progress__bar {
	display: block;
	height: 100%;
	background: var(--c-accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* ==========================================================================
   19. WordPress core classes
   ========================================================================== */

.sticky,
.bypostauthor {
	display: block;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 8px;
}

.gallery-item {
	margin: 0;
}

.wp-block-image img {
	display: block;
}

/* ==========================================================================
   20. Motion
   ==========================================================================

   Every decorative animation lives here and is opt-in twice: it runs only
   when the reader's device doesn't ask for reduced motion, and only while
   "Subtle animations" is on in the Customizer (body.has-motion). Without
   either, the site works and looks the same, just still. Movement uses
   only opacity and transform (no layout work, no layout shift); hover
   colors and the growing underline under links only repaint.

   Reveal on scroll: main.js marks sections and story cards that are below
   the first screen when the page loads (.reveal) and adds .is-visible as
   each comes into view. Content on the first screen (top stories, the lead
   photo) is never hidden, and without JavaScript nothing is hidden at all. */

@media (prefers-reduced-motion: no-preference) {
	/* Sections and cards below the fold fade up into place. */
	.has-motion .reveal {
		transition:
			opacity 0.7s cubic-bezier(0.2, 0.65, 0.3, 1) var(--reveal-delay, 0ms),
			transform 0.7s cubic-bezier(0.2, 0.65, 0.3, 1) var(--reveal-delay, 0ms);
	}

	.has-motion .reveal:not(.is-visible):not(:focus-within) {
		opacity: 0;
		transform: translate3d(0, 20px, 0);
	}

	/* Breaking and Live dots: three soft pulses as the page opens (under 5 seconds, WCAG 2.2.2), then still. */
	.has-motion .badge__dot::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background: currentColor;
		opacity: 0;
		animation: usnow-ping 1.6s cubic-bezier(0, 0, 0.2, 1) 3;
	}

	.has-motion .rail__pulse {
		animation: usnow-blink 1.6s ease-in-out 3;
	}

	/* Section bar: the red line grows from the middle; the compact logo slides in when it sticks. */
	.has-motion .site-nav {
		transition: box-shadow 0.3s ease;
	}

	.has-motion .site-nav__menu a::after {
		transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.has-motion .site-nav.is-stuck .site-nav__brand {
		animation: usnow-nav-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.has-motion .site-nav.is-stuck .site-nav__search,
	.has-motion .site-nav.is-stuck .header-actions--sticky {
		animation: usnow-fade 0.3s ease-out;
	}

	/* Menu drawer and search: slide and fade in, and out again (main.js adds .is-closing). */
	.has-motion .search-overlay__backdrop,
	.has-motion .drawer__backdrop {
		animation: usnow-fade 0.25s ease-out;
	}

	.has-motion .search-overlay__panel {
		animation: usnow-drop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.has-motion .drawer__panel {
		animation: usnow-slide 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.has-motion .drawer__menu > li {
		animation: usnow-rise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
	}

	.has-motion .drawer__menu > li:nth-child(2) {
		animation-delay: 30ms;
	}

	.has-motion .drawer__menu > li:nth-child(3) {
		animation-delay: 60ms;
	}

	.has-motion .drawer__menu > li:nth-child(4) {
		animation-delay: 90ms;
	}

	.has-motion .drawer__menu > li:nth-child(5) {
		animation-delay: 120ms;
	}

	.has-motion .drawer__menu > li:nth-child(6) {
		animation-delay: 150ms;
	}

	.has-motion .drawer__menu > li:nth-child(7) {
		animation-delay: 180ms;
	}

	.has-motion .drawer__menu > li:nth-child(n + 8) {
		animation-delay: 210ms;
	}

	.has-motion .search-overlay.is-closing .search-overlay__backdrop,
	.has-motion .drawer.is-closing .drawer__backdrop {
		animation: usnow-fade-out 0.2s ease-in forwards;
	}

	.has-motion .search-overlay.is-closing .search-overlay__panel {
		animation: usnow-lift 0.2s ease-in forwards;
	}

	.has-motion .drawer.is-closing .drawer__panel {
		animation: usnow-slide-out 0.22s cubic-bezier(0.4, 0, 1, 1) forwards;
	}

	/* Story links: a line grows under the headline. */
	.has-motion .card__link,
	.has-motion .section-head__title a,
	.has-motion .topbar__menu a,
	.has-motion .footer-menu a,
	.has-motion .footer-sections a,
	.has-motion .usnow-trending__text {
		background-image: linear-gradient(currentColor, currentColor);
		background-origin: content-box;
		background-position: 0 100%;
		background-repeat: no-repeat;
		background-size: 0 0.07em;
		transition: background-size 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.2s ease;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}

	.has-motion .card__link:focus-visible,
	.has-motion .section-head__title a:hover,
	.has-motion .topbar__menu a:hover,
	.has-motion .footer-menu a:hover,
	.has-motion .footer-sections a:hover,
	.has-motion .usnow-trending__link:hover .usnow-trending__text {
		background-size: 100% 0.07em;
		text-decoration: none;
	}

	.has-motion .section-head__more .icon {
		transition: transform 0.2s ease;
	}

	.has-motion .section-head__more:hover .icon {
		transform: translateX(3px);
	}

	/* Buttons: gentle color fades and a small press. */
	.has-motion :is(.button, .wp-block-button__link, .search-form__submit, .comment-form .submit, .icon-btn, .share__btn, .back-to-top, .chip, .chips a, .pagination a.page-numbers, .header-action) {
		transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
	}

	.has-motion :is(.button, .wp-block-button__link, .search-form__submit, .comment-form .submit, .icon-btn, .share__btn, .chip, .chips a, .pagination a.page-numbers, .header-action):active {
		transform: scale(0.96);
	}

	.has-motion .back-to-top {
		animation: usnow-fade 0.2s ease-out;
	}

	.has-motion .back-to-top:active {
		transform: scale(0.92);
	}
}

/* Hover-only effects: devices with a mouse (no "stuck" hover after a tap). */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	/* Photos zoom slightly inside their fixed frames. */
	.has-motion .card__media img {
		transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.has-motion .card:hover .card__media img {
		transform: scale(1.045);
	}

	.has-motion .card:hover .card__link {
		background-size: 100% 0.07em;
	}

	.has-motion .back-to-top:hover {
		transform: translateY(-2px);
	}
}

@keyframes usnow-fade {
	from {
		opacity: 0;
	}
}

@keyframes usnow-drop {
	from {
		opacity: 0;
		transform: translateY(-14px);
	}
}

@keyframes usnow-slide {
	from {
		transform: translateX(-100%);
	}
}

@keyframes usnow-ping {
	0% {
		opacity: 0.75;
		transform: scale(1);
	}

	80%,
	100% {
		opacity: 0;
		transform: scale(2.4);
	}
}

@keyframes usnow-blink {
	50% {
		opacity: 0.25;
	}
}

@keyframes usnow-nav-in {
	from {
		opacity: 0;
		transform: translateX(-8px);
	}
}

@keyframes usnow-rise {
	from {
		opacity: 0;
		transform: translateX(-10px);
	}
}

@keyframes usnow-fade-out {
	to {
		opacity: 0;
	}
}

@keyframes usnow-lift {
	to {
		opacity: 0;
		transform: translateY(-14px);
	}
}

@keyframes usnow-slide-out {
	to {
		transform: translateX(-100%);
	}
}

/* ==========================================================================
   21. Reduced motion and print
   ========================================================================== */

/* A safety net: nothing moves for readers who ask their device for less motion. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* Print: the story on white paper, with the masthead logo and no page furniture. */
@media print {
	@page {
		margin: 1.6cm 1.8cm;
	}

	:root,
	:root[data-theme="dark"] {
		color-scheme: light;
		--c-ink: #000;
		--c-text: #000;
		--c-text-2: #222;
		--c-muted: #444;
		--c-rule: #bbb;
		--c-bg: #fff;
		--c-band: #fff;
		--c-link: #000;
		--c-header-bg: #fff;
		--c-header-ink: #000;
		--c-logo-now: #0a1a33;
		--c-accent-text: #a81c22;
		--c-kicker: #a81c22;
	}

	.skip-link,
	.topbar,
	.site-nav,
	.usnow-breaking,
	.usnow-trending,
	.masthead__actions,
	.menu-toggle,
	.ad-area,
	.sponsored-zone,
	.home-section--sponsored,
	.share,
	.sidebar,
	.related,
	.comments,
	.article-footer .author-box,
	.site-footer,
	.back-to-top,
	.reading-progress,
	.search-overlay,
	.drawer,
	.pagination,
	.card__play {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.site-header {
		border-bottom: 2px solid #000;
	}

	.masthead {
		display: block;
		min-height: 0;
		padding-block: 8px;
	}

	.container,
	.article-layout,
	.page-layout,
	.home__body {
		display: block;
		max-width: none;
		padding-inline: 0;
	}

	.entry-content {
		font-size: 11.5pt;
		line-height: 1.55;
	}

	.entry-content a::after,
	.usnow-sources a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}

	/* The phone layout's edge-to-edge photo would run into the page margins. */
	.article-figure {
		margin-inline: 0;
	}

	.article-figure__caption {
		padding-inline: 0;
	}

	.article-title,
	.entry-content h2,
	.entry-content h3,
	.section-head {
		break-after: avoid;
	}

	.article-figure,
	.entry-content figure,
	.entry-content blockquote,
	.entry-content table,
	.card {
		break-inside: avoid;
	}

	.entry-content p {
		orphans: 3;
		widows: 3;
	}

	.card__media img,
	.reveal {
		transform: none !important;
	}

	.reveal {
		opacity: 1 !important;
	}
}