/*
Theme Name: Witfire Elite Intelligence
Theme URI: https://thewitfire.in/
Author: Witfire Elite
Author URI: https://thewitfire.in/
Description: Premium dynamic pharma business intelligence and Google News-ready editorial theme.
Version: 5.0.3
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: witfire-elite
Tags: news, blog, magazine, editorial, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   1. Tokens and base
   ========================================================================== */

/* Tokens are taken from the Witfire article housing so the page shell and the
   article are one design, not two. Display = Cormorant Garamond, body = Crimson
   Pro, interface = Outfit — the same three faces the briefs are set in. */
:root {
	--we-ink: #17140f;
	--we-ink-soft: #3b3529;
	--we-paper: #fbf8f1;
	--we-sheet: #ffffff;
	--we-warm: #f5eedc;
	--we-gold: #a67c1f;
	--we-gold-soft: #d4b872;
	--we-red: #8c2f1f;
	--we-green: #23503e;
	--we-slate: #5c6670;
	--we-muted: #7c7365;
	--we-line: #e4dcca;
	--we-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--we-body: 'Crimson Pro', Georgia, 'Times New Roman', serif;
	--we-serif: var(--we-display);
	--we-sans: 'Outfit', Arial, Helvetica, sans-serif;
	--we-width: 1240px;
}

* {
	box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--we-paper);
	color: var(--we-ink);
	font-family: var(--we-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* An article pasted as a full HTML document brings a <style> block that often
   contains :root{} and body{} rules. Those are not scoped to the article — they
   restyle the whole site. The pasted block is printed after this stylesheet, so
   a bare body{} would win; "html body" outranks it and keeps the page shell on
   the theme's own background. Article-scoped classes are left alone. */
html body {
	background: var(--we-paper);
}
/* Colour is deliberately NOT re-asserted here. A pasted body{color} differs from
   the theme ink by a shade nobody can see, but overriding it re-inherits down
   into every article element — measured at 315 of 490 elements on a live post,
   for no visible gain. Background and font-family are the leaks that show. */

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

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

a:hover {
	color: var(--we-gold);
}

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

.container {
	width: min(var(--we-width), 92vw);
	margin-inline: auto;
}

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

.screen-reader-text:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	background: var(--we-ink);
	color: #fff;
	padding: 12px 18px;
	font-size: 12px;
	font-weight: 700;
}

.we-hint {
	color: var(--we-muted);
	font-size: 11px;
}

/* ==========================================================================
   2. Top bar and masthead
   ========================================================================== */

/* Same reason as the html body rule above. Every block the theme owns states
   its own font, so a pasted article's body{font-family} cannot repaint the page
   around the article. Headings inside these blocks set the serif explicitly and
   are unaffected. */
.we-topbar,
.site-header,
.we-ticker,
.site-footer,
.we-widget-slot,
.single-hero,
.archive-header,
.article-rail,
.share-links,
.sidebar-widget,
.newsletter-box,
.source-box,
.disclosure-box,
.author-box,
.related-posts,
.post-navigation,
.comments-area,
.pagination,
.no-results {
	font-family: var(--we-sans);
}

.we-topbar {
	background: var(--we-ink);
	color: #ddd7cb;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.we-topbar .container {
	min-height: 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.site-header {
	position: relative;
	z-index: 30;
	background: var(--we-paper);
	border-bottom: 1px solid var(--we-ink);
}

/* Two rows on purpose. A masthead with nine long section names cannot share one
   line with a logo and a button — squeeze them together and the logo column
   collapses to nothing. Identity and the call to action take the top row; the
   sections get a full-width bar of their own underneath, which is how a paper
   with this many sections has always handled it. */
.masthead {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas:
		"gap brand cta"
		"nav nav   nav";
	column-gap: 30px;
	align-items: center;
	padding-top: 26px;
}

/* Equal outer columns, so the wordmark sits on the true centre of the page with
   the button off to the right — the broadsheet masthead. This only holds
   because .custom-logo carries a definite height; with a percentage max-width
   the middle track measures itself and collapses to nothing. */
.site-branding {
	grid-area: brand;
	justify-self: center;
}

.header-cta {
	grid-area: cta;
	justify-self: end;
}

.menu-toggle {
	grid-area: gap;
	justify-self: start;
}

.primary-navigation {
	grid-area: nav;
	border-top: 1px solid var(--we-line);
	margin-top: 24px;
}

/* A percentage max-width inside an auto-sized grid track is circular — the track
   measures the image, the image measures the track — and browsers resolve that
   to zero. That is exactly how the logo vanished. A definite height plus the
   image's own aspect ratio gives the track something real to measure. */
.custom-logo {
	display: block;
	height: var(--we-logo-height, 78px);
	width: auto;
	max-width: none;
}

/* The wordmark sets ELITE against the right edge of the name, so it holds for
   any site title instead of relying on a hard-coded offset. */
.text-logo {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	font-family: var(--we-display);
	font-size: 40px;
	font-style: italic;
	font-weight: 600;
	line-height: .86;
	letter-spacing: -.02em;
}

.text-logo small {
	font-family: var(--we-sans);
	font-style: normal;
	font-size: 8.5px;
	font-weight: 500;
	letter-spacing: .5em;
	text-indent: .5em;
	margin-top: 7px;
	color: var(--we-muted);
}

.header-cta,
.we-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: var(--we-ink);
	color: #fff !important;
	padding: 14px 20px;
	font-family: var(--we-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	border: 1px solid var(--we-ink);
	transition: background .22s, color .22s, border-color .22s;
}

.we-button:hover {
	background: transparent;
	color: var(--we-ink) !important;
}

/* An outlined button that fills on hover, rather than a text link hanging off a
   divider. */
.header-cta {
	background: transparent;
	color: var(--we-ink) !important;
	border-color: var(--we-line);
	padding: 12px 20px;
	white-space: nowrap;
}

.header-cta:hover {
	background: var(--we-ink);
	border-color: var(--we-ink);
	color: var(--we-paper) !important;
}

.menu-toggle {
	display: none;
	background: none;
	border: 1px solid;
	padding: 9px 12px;
	font-weight: 700;
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ==========================================================================
   3. Navigation, including dropdowns
   ========================================================================== */

.primary-menu,
.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px 19px;
	flex-wrap: wrap;
	padding: 13px 0;
}

.primary-menu li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Nine long section names have to fit one line. Tighter tracking buys more room
   than a smaller size does, and costs less legibility. */
.primary-menu a {
	font-family: var(--we-sans);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .085em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* A rule that grows in from the left on hover, and sits under the current page. */
.primary-menu > li > a {
	position: relative;
	padding: 6px 0;
}

.primary-menu > li > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1px;
	background: var(--we-gold);
	transition: right .28s cubic-bezier(.2, .7, .2, 1);
}

.primary-menu > li > a:hover::after,
.primary-menu > .current-menu-item > a::after,
.primary-menu > .current_page_item > a::after,
.primary-menu > .current-menu-ancestor > a::after {
	right: 0;
}

.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
	color: var(--we-gold);
}

/* A hairline chevron, not a boxed button. */
.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--we-muted);
	line-height: 0;
	cursor: pointer;
	transition: transform .22s ease, color .22s;
}

.submenu-toggle:hover {
	color: var(--we-ink);
}

.menu-item-has-children.is-open > .submenu-toggle {
	transform: rotate(180deg);
	color: var(--we-gold);
}

.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	min-width: 240px;
	list-style: none;
	margin: 0;
	padding: 10px 0;
	background: var(--we-paper);
	border: 1px solid var(--we-line);
	box-shadow: 0 18px 34px rgba(17, 17, 15, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu,
.primary-menu li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.primary-menu .sub-menu li {
	display: block;
}

.primary-menu .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-size: 12px;
	letter-spacing: .02em;
	text-transform: none;
}

.primary-menu .sub-menu .sub-menu {
	top: -11px;
	left: 100%;
}

/* ==========================================================================
   4. Ticker
   ========================================================================== */

.we-ticker {
	background: var(--we-warm);
	border-bottom: 1px solid var(--we-line);
}

.we-ticker .container {
	display: flex;
	min-height: 43px;
	align-items: center;
	overflow: hidden;
}

.ticker-label {
	align-self: stretch;
	display: flex;
	align-items: center;
	padding: 0 18px;
	background: var(--we-red);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ticker-viewport {
	flex: 1;
	overflow: hidden;
	padding-left: 24px;
}

.ticker-track {
	display: flex;
	width: max-content;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 600;
	animation: we-ticker-scroll 42s linear infinite;
}

.ticker-track span {
	margin-right: 45px;
}

.ticker-track span::before {
	content: '\2022';
	color: var(--we-gold);
	margin-right: 12px;
}

.we-ticker:hover .ticker-track {
	animation-play-state: paused;
}

/* When the items already fit, scrolling them would only show the duplicate set
   that exists to make the loop seamless — which reads as a bug. Sit still and
   drop the duplicate instead. */
.we-ticker.is-static .ticker-track {
	animation: none;
	width: 100%;
}

.we-ticker.is-static .ticker-track span[aria-hidden="true"] {
	display: none;
}

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

/* ==========================================================================
   5. Hero
   ========================================================================== */

.we-hero {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	min-height: 520px;
	border-bottom: 1px solid var(--we-ink);
}

.hero-feature {
	position: relative;
	min-height: 520px;
	background: #26231f;
	overflow: hidden;
}

.hero-feature img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .66;
}

.hero-feature::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, .88), transparent 72%);
}

.hero-content {
	position: absolute;
	z-index: 2;
	left: 7%;
	right: 7%;
	bottom: 8%;
	color: #fff;
}

.hero-content h1 {
	font-family: var(--we-serif);
	font-size: clamp(38px, 4vw, 64px);
	line-height: 1.05;
	letter-spacing: -.035em;
	margin: 14px 0;
}

.hero-content p {
	max-width: 750px;
	color: #e3ded5;
}

.hero-rail {
	display: flex;
	flex-direction: column;
	padding: 42px;
	background: #171715;
	color: #eee9df;
}

.hero-rail-title {
	font-size: 9px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #9e998f;
	border-top: 1px solid #5a554d;
	padding-top: 12px;
}

.rail-story {
	border-bottom: 1px solid #4b4842;
	padding: 23px 0;
}

.rail-story h2 {
	font-family: var(--we-serif);
	font-size: 24px;
	line-height: 1.25;
	margin: 8px 0;
}

.rail-story time {
	font-size: 9px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #918c83;
}

/* ==========================================================================
   6. Sections, kickers and cards
   ========================================================================== */

.we-kicker {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--we-gold);
}

.we-kicker a {
	color: inherit;
}

.we-kicker a:hover,
.we-kicker a:focus-visible {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.we-badge {
	background: var(--we-red);
	color: #fff;
	padding: 3px 8px;
	font-size: 9px;
	letter-spacing: .12em;
}

.we-section {
	padding: 78px 0;
}

.section-heading {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 30px;
	border-top: 1px solid var(--we-ink);
	padding-top: 14px;
	margin-bottom: 35px;
}

.section-heading h2,
.archive-header h1 {
	font-family: var(--we-serif);
	font-size: 48px;
	line-height: 1.1;
	margin: 7px 0;
}

.section-heading p {
	max-width: 370px;
	color: var(--we-muted);
	font-size: 13px;
}

.posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.post-card {
	border-bottom: 1px solid var(--we-line);
	padding-bottom: 24px;
}

.post-card-image {
	display: block;
	aspect-ratio: 16 / 10;
	background: #d8d0c2;
	overflow: hidden;
	margin-bottom: 18px;
}

.post-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s;
}

.post-card:hover img {
	transform: scale(1.025);
}

.post-card h3 {
	font-family: var(--we-serif);
	font-size: 27px;
	line-height: 1.18;
	margin: 10px 0;
}

.post-card p {
	color: var(--we-muted);
	font-size: 13px;
}

.post-meta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	color: var(--we-muted);
	font-size: 9px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.we-intelligence {
	background: #171715;
	color: #eee9df;
}

.we-intelligence .section-heading {
	border-color: #777168;
}

.we-intelligence .post-card {
	border-color: #4c4943;
}

.we-intelligence .post-card p,
.we-intelligence .post-meta {
	color: #aaa49a;
}

.we-intelligence .post-card-image {
	background: #2c2924;
}

/* ==========================================================================
   7. Coverage panels, home layout, sidebar
   ========================================================================== */

.category-panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	border: 1px solid var(--we-line);
}

.category-panel {
	padding: 30px;
	min-height: 285px;
	border-right: 1px solid var(--we-line);
}

.category-panel:last-child {
	border-right: 0;
}

.category-panel h3 {
	font-family: var(--we-serif);
	font-size: 30px;
	margin: 8px 0 4px;
}

.category-panel ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.category-panel li {
	border-top: 1px solid var(--we-line);
	padding: 12px 0;
	font-size: 13px;
}

.home-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 55px;
	align-items: start;
}

.sidebar-widget,
.widget {
	border-top: 2px solid var(--we-ink);
	padding-top: 13px;
	margin-bottom: 38px;
}

.sidebar-widget h3,
.widget-title {
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.rank-list {
	counter-reset: rank;
	list-style: none;
	padding: 0;
	margin: 0;
}

.rank-list li {
	counter-increment: rank;
	display: grid;
	grid-template-columns: 35px 1fr;
	gap: 8px;
	border-top: 1px solid var(--we-line);
	padding: 15px 0;
}

.rank-list li::before {
	content: counter(rank, decimal-leading-zero);
	font-family: var(--we-serif);
	color: var(--we-gold);
}

/* ==========================================================================
   8. Newsletter and magazine
   ========================================================================== */

.newsletter-box {
	background: var(--we-red);
	color: #fff;
	padding: 30px;
}

.newsletter-box h3 {
	font-family: var(--we-serif);
	font-size: 28px;
	margin: 0 0 12px;
}

.newsletter-box .we-button {
	background: #fff;
	color: var(--we-ink) !important;
	border-color: #fff;
}

.newsletter-box .we-button:hover {
	background: transparent;
	color: #fff !important;
}

.newsletter-actions {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 16px;
}

.newsletter-form {
	margin-top: 16px;
}

.newsletter-form input[type="email"],
.newsletter-form input[type="text"] {
	width: 100%;
	max-width: 420px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #e3b4ae;
	color: #fff;
	padding: 12px 0;
	font: inherit;
}

.newsletter-form input::placeholder {
	color: #f0d3cf;
}

.newsletter-form button,
.newsletter-form input[type="submit"] {
	margin-top: 14px;
	border: 1px solid #fff;
	background: #fff;
	color: var(--we-ink);
	padding: 13px 22px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}

.we-magazine {
	background: var(--we-warm);
}

.magazine-layout {
	display: grid;
	grid-template-columns: 330px 1fr;
	gap: 9vw;
	align-items: center;
}

.magazine-cover {
	aspect-ratio: 3 / 4.15;
	background: #151513;
	color: #eee9df;
	padding: 26px;
	box-shadow: 18px 20px 0 #bcb0a0;
}

.magazine-cover-brand {
	font-family: var(--we-serif);
	font-style: italic;
	font-size: 22px;
}

.magazine-cover small {
	display: block;
	margin-top: 6px;
	font-size: 9px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #9e998f;
}

.magazine-cover h3 {
	font-family: var(--we-serif);
	font-size: 46px;
	line-height: 1;
	margin: 60px 0 18px;
}

.magazine-cover strong {
	color: var(--we-gold);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.magazine-copy h2 {
	font-family: var(--we-serif);
	font-size: 50px;
	line-height: 1.1;
	margin: 10px 0 16px;
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

.site-footer {
	background: #11110f;
	color: #aaa49a;
	padding: 65px 0 25px;
}

/* Explicit tracks on purpose: a leading 2fr combined with repeat(auto-fit, …)
   is invalid CSS and silently collapses the whole footer into one column. */
.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 50px;
}

.footer-title {
	font-family: var(--we-serif);
	font-size: 35px;
	font-style: italic;
	color: #eee9df;
}

.footer-grid h3 {
	font-size: 9px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--we-gold);
	margin: 0 0 14px;
}

.footer-menu li {
	margin: 8px 0;
	font-size: 12px;
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	border-top: 1px solid #393733;
	margin-top: 50px;
	padding-top: 20px;
	font-size: 9px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* ==========================================================================
   10. Archives and pagination
   ========================================================================== */

.archive-header {
	padding: 65px 0 30px;
	border-bottom: 1px solid var(--we-ink);
}

.archive-description {
	max-width: 700px;
	color: var(--we-muted);
}

.archive-search {
	max-width: 520px;
	margin-top: 22px;
}

.archive-grid {
	padding: 50px 0 80px;
}

.pagination {
	margin-top: 45px;
}

.nav-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.page-numbers {
	border: 1px solid var(--we-line);
	padding: 8px 13px;
	font-size: 12px;
}

.page-numbers.current {
	background: var(--we-ink);
	color: #fff;
}

.page-links {
	display: flex;
	gap: 8px;
	margin-top: 24px;
	font-size: 12px;
}

/* ==========================================================================
   11. Single article
   ========================================================================== */

.single-hero {
	padding: 65px 0 40px;
	border-bottom: 1px solid var(--we-line);
}

.single-hero h1 {
	font-family: var(--we-serif);
	font-size: clamp(42px, 5vw, 72px);
	line-height: 1.04;
	letter-spacing: -.035em;
	max-width: 1050px;
	margin: 18px 0;
}

.single-deck {
	font-family: var(--we-serif);
	font-size: 21px;
	color: var(--we-muted);
	max-width: 820px;
}

.single-featured {
	margin: 34px auto 0;
}

.single-featured img {
	display: block;
	width: 100%;
	height: auto;
}

.single-featured figcaption {
	margin-top: 10px;
}

.single-layout {
	display: grid;
	grid-template-columns: minmax(0, 760px) 290px;
	justify-content: center;
	gap: 70px;
	padding: 45px 0 80px;
	align-items: start;
}

.single-layout.is-single-column {
	grid-template-columns: minmax(0, 820px);
}

.article-body {
	font-family: var(--we-body);
	font-size: 19px;
	line-height: 1.78;
}

/* Drop cap on articles only — a giant gold letter on a Privacy Policy page or
   a page-builder layout is not the look. */
.witfire-single .article-body > p:first-of-type::first-letter {
	float: left;
	font-size: 72px;
	line-height: .75;
	padding: 12px 9px 0 0;
	color: var(--we-gold);
}

.article-body h2,
.article-body h3 {
	line-height: 1.25;
}

/* A heading the content cleaner demoted from <h1> keeps a display size, so
   fixing the duplicate-h1 error does not flatten a pasted article's headline. */
.article-body h2[data-witfire-demoted] {
	font-size: clamp(32px, 5vw, 50px);
	line-height: 1.1;
	letter-spacing: -.015em;
	margin: 0 0 20px;
}

.article-body blockquote {
	border-left: 3px solid var(--we-gold);
	margin: 40px 0;
	padding: 5px 0 5px 30px;
	font-size: 28px;
	line-height: 1.4;
}

.article-body a {
	text-decoration: underline;
}

.article-body table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--we-sans);
	font-size: 14px;
}

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

/* Block alignment inside a grid column: 100vw would overflow the page, so
   full-width means full-column here. */
.article-body .alignfull {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.article-body .alignwide {
	width: auto;
	max-width: none;
	margin-left: clamp(-40px, -4vw, 0px);
	margin-right: clamp(-40px, -4vw, 0px);
}

.article-body .alignleft {
	float: left;
	margin: 6px 28px 18px 0;
}

.article-body .alignright {
	float: right;
	margin: 6px 0 18px 28px;
}

/* Full Width — Page Builder template. Blocks that ask for full width get the
   whole viewport; plain text still gets a readable measure. */
.fullwidth-body {
	padding: 0 0 60px;
}

.fullwidth-body > *:not(.alignfull):not(.alignwide) {
	width: min(var(--we-width), 92vw);
	margin-inline: auto;
}

.fullwidth-body > .alignwide {
	width: min(1100px, 92vw);
	max-width: none;
	margin-inline: auto;
}

.fullwidth-body > .alignfull {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.fullwidth-comments {
	padding-bottom: 60px;
}

.source-box,
.disclosure-box,
.author-box {
	border-top: 2px solid var(--we-ink);
	padding: 20px 0;
	margin-top: 45px;
	font-family: var(--we-sans);
	font-size: 13px;
}

.author-box {
	display: grid;
	grid-template-columns: 70px 1fr;
	gap: 18px;
}

.author-box img {
	border-radius: 50%;
}

.author-box h3 {
	margin: 6px 0;
	font-family: var(--we-serif);
	font-size: 22px;
}

.article-rail {
	position: sticky;
	top: 24px;
}

.share-links {
	margin-bottom: 34px;
}

.share-links a {
	display: block;
	border-bottom: 1px solid var(--we-line);
	padding: 11px 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.post-navigation {
	margin-top: 45px;
	font-family: var(--we-serif);
	font-size: 18px;
}

.post-navigation .nav-links {
	justify-content: space-between;
}

/* ==========================================================================
   12. Comments
   ========================================================================== */

.comments-area {
	margin-top: 50px;
	border-top: 2px solid var(--we-ink);
	padding-top: 20px;
}

.comments-title {
	font-family: var(--we-serif);
	font-size: 30px;
	margin: 0 0 20px;
}

.comment-list,
.comment-list .children {
	list-style: none;
	padding: 0;
	margin: 0;
}

.comment-list li {
	border-top: 1px solid var(--we-line);
	padding: 22px 0;
}

.comment-list .children {
	border-left: 1px solid var(--we-line);
	padding-left: 26px;
	margin-top: 14px;
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	font-weight: 700;
}

.comment-author img {
	border-radius: 50%;
}

.comment-metadata {
	margin: 6px 0 10px;
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--we-muted);
}

.comment-content {
	font-family: var(--we-serif);
	font-size: 16px;
}

.reply a {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 11px;
	border: 1px solid var(--we-line);
	background: transparent;
	font: inherit;
	font-size: 14px;
}

.comment-form .submit {
	border: 0;
	background: var(--we-ink);
	color: #fff;
	padding: 14px 24px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ==========================================================================
   13. Search, empty states, widget slots
   ========================================================================== */

.search-form {
	display: flex;
}

.search-form input {
	flex: 1;
	min-width: 0;
	padding: 12px;
	border: 1px solid var(--we-line);
	background: transparent;
	font: inherit;
	font-size: 14px;
}

.search-form button {
	border: 0;
	background: var(--we-ink);
	color: #fff;
	padding: 0 18px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}

.no-results {
	padding: 80px 0;
}

.no-results h1,
.no-results h2 {
	font-family: var(--we-serif);
	font-size: 42px;
	line-height: 1.1;
	margin: 10px 0 14px;
}

.no-results .search-form {
	max-width: 520px;
}

.we-widget-slot {
	width: min(var(--we-width), 92vw);
	margin: 26px auto;
}

.we-widget-slot .widget {
	border: 1px solid var(--we-line);
	border-top-width: 1px;
	padding: 14px;
	margin: 0;
}

.we-widget-slot--sidebar {
	width: 100%;
	margin: 0 0 28px;
}

.we-widget-slot--in_article {
	width: 100%;
	margin: 34px 0;
}

/* ==========================================================================
   14. Core block defaults
   ========================================================================== */

.wp-block-image {
	margin: 32px 0;
}

.wp-block-image img {
	height: auto;
}

.wp-block-image figcaption,
.wp-block-embed figcaption {
	font-family: var(--we-sans);
	font-size: 12px;
	color: var(--we-muted);
}

.wp-block-embed {
	margin: 32px 0;
}

.wp-block-button__link {
	background: var(--we-ink);
	color: #fff;
	border-radius: 0;
	font-family: var(--we-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 15px 22px;
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--we-line);
	margin: 40px 0;
}

/* ==========================================================================
   15. Reading experience — progress, section rail, reveal, live score bars
   ========================================================================== */

/* Left-to-right progress through the article body only, not the whole page. */
.we-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	height: 3px;
	pointer-events: none;
}

.we-progress i {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--we-gold), var(--we-gold-soft));
	transition: width .1s linear;
}

.admin-bar .we-progress {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .we-progress {
		top: 46px;
	}
}

/* Section rail, built from the article's own numbered H2s. */
.we-sections {
	font-family: var(--we-sans);
	margin-bottom: 34px;
}

.we-sections__label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--we-gold);
	margin-bottom: 12px;
}

.we-sections ol {
	counter-reset: we-sec;
	list-style: none;
	margin: 0;
	padding: 0;
}

.we-sections li {
	counter-increment: we-sec;
	border-top: 1px solid var(--we-line);
}

.we-sections a {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 8px;
	padding: 9px 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--we-muted);
	transition: color .2s;
}

.we-sections a::before {
	content: counter(we-sec, decimal-leading-zero);
	font-size: 10px;
	font-weight: 700;
	color: var(--we-line);
	transition: color .2s;
}

.we-sections a:hover {
	color: var(--we-ink);
}

.we-sections .is-current a {
	color: var(--we-ink);
	font-weight: 600;
}

.we-sections .is-current a::before {
	color: var(--we-gold);
}

/* Components rise into place once, as they are reached. */
.we-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}

.we-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* The Witfire Risk Score dimension bars fill left to right when they are read,
   rather than arriving already full. The markup is the article's own. */
.article-body .bar i {
	transition: width 1.2s cubic-bezier(.16, .84, .28, 1);
}

/* ==========================================================================
   16. Responsive
   ========================================================================== */

@media (max-width: 950px) {
	/* Back to one row: wordmark and the menu button, nothing else. */
	.masthead {
		min-height: 88px;
		grid-template-columns: 1fr auto;
		grid-template-areas: "brand toggle";
		padding-top: 0;
	}

	.menu-toggle {
		grid-area: toggle;
		display: block;
	}

	/* Centring the wordmark needs something on the other side to balance it.
	   With only a menu button there, it belongs on the left edge. */
	.site-branding {
		justify-self: start;
	}

	/* The brand column is definite here, so capping the width is safe again.
	   The height follows the Customizer setting but never exceeds what a phone
	   masthead can carry. */
	.custom-logo {
		height: min(var(--we-logo-height, 78px), 54px);
		max-width: 56vw;
		object-fit: contain;
		object-position: left center;
	}

	.primary-navigation {
		grid-area: auto;
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--we-paper);
		border-top: 0;
		border-bottom: 1px solid var(--we-ink);
		margin-top: 0;
		padding: 24px;
	}

	.primary-navigation.is-open {
		display: block;
	}

	.primary-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding: 0;
	}

	.primary-menu li {
		width: 100%;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.primary-menu a {
		padding: 10px 0;
	}

	.primary-menu .sub-menu {
		position: static;
		display: none;
		width: 100%;
		min-width: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0 0 8px 16px;
	}

	.primary-menu li.is-open > .sub-menu {
		display: block;
	}

	.header-cta {
		display: none;
	}

	.we-hero,
	.home-layout,
	.single-layout,
	.magazine-layout {
		grid-template-columns: 1fr;
	}

	.article-rail {
		position: static;
	}

	.hero-rail {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
	}

	.hero-rail-title {
		grid-column: 1 / -1;
	}

	.posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-grid {
		grid-template-columns: 2fr 1fr 1fr;
	}
}

@media (max-width: 620px) {
	.we-topbar span:last-child {
		display: none;
	}

	.text-logo {
		font-size: 31px;
	}

	.we-ticker .container {
		width: 100%;
	}

	.we-hero,
	.hero-feature {
		min-height: 500px;
	}

	.hero-rail {
		grid-template-columns: 1fr;
	}

	.posts-grid,
	.category-panels,
	.footer-grid {
		grid-template-columns: 1fr;
	}

	.category-panel {
		border-right: 0;
		border-bottom: 1px solid var(--we-line);
	}

	.section-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	.section-heading h2,
	.archive-header h1 {
		font-size: 38px;
	}

	.we-section {
		padding: 58px 0;
	}

	.magazine-cover {
		max-width: 320px;
	}

	.magazine-copy h2 {
		font-size: 34px;
	}

	.single-hero h1 {
		font-size: 42px;
	}

	.article-body {
		font-size: 17px;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 12px;
	}
}

/* ==========================================================================
   17. Motion and print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	/* Everything stays readable; only the motion goes. */
	.we-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	.we-progress {
		display: none;
	}

	.ticker-track {
		animation: none;
		width: auto;
		flex-wrap: wrap;
		white-space: normal;
	}

	.ticker-track span[aria-hidden="true"] {
		display: none;
	}

	.ticker-viewport {
		overflow-x: auto;
	}
}

@media print {
	.we-topbar,
	.we-ticker,
	.site-header,
	.site-footer,
	.article-rail,
	.related-posts,
	.comments-area,
	.we-widget-slot,
	.post-navigation,
	.we-progress,
	.we-sections {
		display: none !important;
	}

	.we-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	.single-layout {
		display: block;
	}

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