/**
 * Overdrive 4.7.1 visual parity layer for the current News Magazine X theme.
 *
 * Scope only:
 * - two-tier header + compact-on-scroll state;
 * - current Overdrive logo inside the 4.7.1 chrome;
 * - 4.7.1 light/dark canvas and palette tokens;
 * - Barlow Condensed + Source Sans 3 typography;
 * - left-side offcanvas presentation.
 *
 * Advertising inventory, slot dimensions and provider code are intentionally
 * outside this file.
 */

:root {
	--od471-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
	--od471-body: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
	--od471-accent: #d8ff38;
	--od471-on-accent: #141414;
	--od471-header: #111217;
	--od471-ease: cubic-bezier(.22, 1, .36, 1);
	--od471-light-canvas:
		radial-gradient(ellipse at 16% -10%, #ffffff 0%, #f4f5f7 38%, transparent 70%),
		radial-gradient(ellipse at 92% 0%, rgba(216, 255, 56, .14) 0%, transparent 42%),
		linear-gradient(#f4f5f7, #eceff3);
	--od471-dark-canvas:
		radial-gradient(ellipse at 18% 0%, #2e323c 0%, #17191e 42%, transparent 70%),
		radial-gradient(ellipse at 88% 8%, rgba(216, 255, 56, .10) 0%, transparent 40%),
		linear-gradient(#14161b, #0f1115);
}

@media (min-width: 768px) {
	:root {
		--od471-dark-canvas:
			radial-gradient(ellipse at 24% -8%, #32363f 0%, #161a22 44%, transparent 72%),
			radial-gradient(ellipse at 90% 0%, rgba(216, 255, 56, .11) 0%, transparent 42%),
			linear-gradient(#12141a, #0c111a);
	}
}

/* -------------------------------------------------------------------------
   1. 4.7.1 color system mapped to the current theme's semantic variables.
   ------------------------------------------------------------------------- */

html[data-theme="light-mode"] body.go-verge {
	--canvas: #f4f5f7;
	--slate: #ffffff;
	--surface: #ffffff;
	--surface-1: #ffffff;
	--surface-2: #eef1f4;
	--frame: #d5d8de;
	--text: #111217;
	--text-secondary: #3a404c;
	--text-muted: #59616f;
	--border: rgba(17, 18, 23, .12);
	--border-strong: rgba(17, 18, 23, .20);
	--lime: #d8ff38;
	--lime-dim: #526300;
	--lime-text: #455400;
	--ink-on-lime: #141414;
	--font-display: var(--od471-heading);
	--font-sans: var(--od471-body);
	--font-mono: var(--od471-heading);
	color: #111217;
}

html[data-theme="dark-mode"] body.go-verge {
	--canvas: #0f1115;
	--slate: #1c1f26;
	--surface: #1c1f26;
	--surface-1: #1c1f26;
	--surface-2: #232831;
	--frame: #3a404c;
	--text: #f6f7f9;
	--text-secondary: #c9cfd9;
	--text-muted: #aeb6c2;
	--border: rgba(246, 247, 249, .13);
	--border-strong: rgba(246, 247, 249, .23);
	--lime: #d8ff38;
	--lime-dim: #d8ff38;
	--lime-text: #d8ff38;
	--ink-on-lime: #141414;
	--font-display: var(--od471-heading);
	--font-sans: var(--od471-body);
	--font-mono: var(--od471-heading);
	color: #f6f7f9;
}

/* The browser/overscroll canvas itself uses the same paper values too. */
html[data-theme="light-mode"] {
	background-color: #f4f5f7 !important;
}

html[data-theme="dark-mode"] {
	background-color: #0f1115 !important;
}

/* Apply the 4.7.1 canvas consistently, including pages that had legacy editorial backgrounds. */
html[data-theme="light-mode"] body.go-verge,
html[data-theme="light-mode"] body.go-verge.go-has-editorial-background[class] {
	background-color: #f4f5f7 !important;
	background-image: var(--od471-light-canvas) !important;
	background-attachment: fixed !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

html[data-theme="dark-mode"] body.go-verge,
html[data-theme="dark-mode"] body.go-verge.go-has-editorial-background[class] {
	background-color: #0f1115 !important;
	background-image: var(--od471-dark-canvas) !important;
	background-attachment: fixed !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

body.go-verge :where(
	.go-site,
	.site-content,
	#content,
	.go-main,
	#primary.go-main,
	.go-home,
	.go-article,
	.go-article-layout,
	.go-article__main
),
body.go-verge.go-has-editorial-background[class] :where(
	.go-site,
	.site-content,
	#content,
	.go-main,
	#primary.go-main,
	.go-home,
	.go-article,
	.go-article-layout,
	.go-article__main
) {
	background-color: transparent !important;
	background-image: none !important;
}

/* -------------------------------------------------------------------------
   2. Typography: the same two-family system used by Overdrive 4.7.1.
   ------------------------------------------------------------------------- */

body.go-verge,
body.go-verge button,
body.go-verge input,
body.go-verge select,
body.go-verge textarea {
	font-family: var(--od471-body) !important;
}

body.go-verge :is(
	h1, h2, h3, h4, h5, h6,
	.go-article__title,
	.go-pagehead__title,
	.go-section__title,
	.go-tile__title,
	.go-stream__title,
	.go-archive-feature__title,
	.go-archive-row__title,
	.go-breadcrumbs,
	.go-byline,
	.go-kicker,
	.go-eyebrow,
	.go-card__title,
	.go-gamecard__title,
	.go-home-panel__title,
	.go-institutional__title,
	.go-pillar__title,
	.go-feed__title,
	.go-related__title,
	.go-offcanvas__label,
	.go-offcanvas__menu,
	.go-header__sections-list,
	.go-mono
) {
	font-family: var(--od471-heading) !important;
}

body.go-verge :where(code, pre, kbd, samp) {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
}

/* -------------------------------------------------------------------------
   3. Header: dark masthead + lime section bar at rest; lime-only on scroll.
   ------------------------------------------------------------------------- */

body.go-verge .go-header--471 {
	position: sticky !important;
	top: 0 !important;
	z-index: var(--go-z-header, 60) !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: var(--od471-header) !important;
	color: #ffffff !important;
	contain: none !important;
	isolation: isolate;
	overflow: hidden !important;
	box-shadow: none;
	transition: box-shadow .18s ease;
}

body.go-verge .go-header--471.is-od471-scrolled,
body.go-verge .go-header--471.is-stuck {
	box-shadow: 0 10px 28px rgba(17, 18, 23, .14);
}

body.go-verge .go-header--471 .go-header__primary {
	display: block !important;
	height: 60px !important;
	min-height: 60px !important;
	background: #111217 !important;
	color: #ffffff !important;
	border: 0 !important;
}

body.go-verge .go-header--471 .go-header__bar {
	position: relative !important;
	display: grid !important;
	grid-template-columns: 1fr auto 1fr !important;
	grid-template-rows: 60px !important;
	align-items: center !important;
	column-gap: 0 !important;
	width: min(1200px, calc(100% - 2rem)) !important;
	max-width: 1200px !important;
	height: 60px !important;
	min-height: 60px !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

body.go-verge .go-header--471 .go-header__menu-toggle--leading {
	grid-column: 1 !important;
	grid-row: 1 !important;
	justify-self: start !important;
	position: static !important;
	z-index: auto !important;
}

body.go-verge .go-header--471 .go-header__brand,
body.go-verge .go-header--471.is-compact .go-header__brand,
body.go-verge .go-header--471.is-od471-scrolled .go-header__brand {
	grid-column: 2 !important;
	grid-row: 1 !important;
	justify-self: center !important;
	position: static !important;
	inset: auto !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 220px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
	overflow: visible !important;
	text-decoration: none !important;
	border: 0 !important;
	box-shadow: none !important;
	background: none !important;
}

body.go-verge .go-header--471 .go-header__brand:hover,
body.go-verge .go-header--471 .go-header__brand:focus-visible {
	opacity: .72;
}

body.go-verge .go-header--471 .go-header__logo-full,
body.go-verge .go-header--471.is-compact .go-header__logo-full,
body.go-verge .go-header--471.is-od471-scrolled .go-header__logo-full {
	position: static !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	height: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* The masthead is dark in both color modes, so always use the current dark-bg artwork. */
body.go-verge .go-header--471 .go-logo--full .go-logo__img--dark {
	display: block !important;
	width: auto !important;
	height: 30px !important;
	max-width: 200px !important;
	max-height: 30px !important;
	object-fit: contain !important;
	filter: none !important;
}

body.go-verge .go-header--471 .go-logo--full .go-logo__img--light {
	display: none !important;
}

body.go-verge .go-header--471 .go-header__actions {
	grid-column: 3 !important;
	grid-row: 1 !important;
	justify-self: end !important;
	position: static !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 0 !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

body.go-verge .go-header--471 :where(.go-iconbtn, .go-theme-toggle) {
	display: grid !important;
	place-items: center !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	max-width: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	box-shadow: none !important;
}

body.go-verge .go-header--471 :where(.go-iconbtn, .go-theme-toggle):hover,
body.go-verge .go-header--471 :where(.go-iconbtn, .go-theme-toggle):focus-visible {
	background: rgba(255, 255, 255, .14) !important;
}

body.go-verge .go-header--471 :where(.go-iconbtn, .go-theme-toggle) svg {
	width: 22px !important;
	height: 22px !important;
	color: currentColor !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
}

body.go-verge .go-header--471 :where(.go-iconbtn, .go-theme-toggle) svg * {
	color: currentColor !important;
}

/* Let each theme-toggle glyph keep the current theme.js visibility contract. */
body.go-verge .go-header--471 .go-theme-toggle__sun,
body.go-verge .go-header--471 .go-theme-toggle__moon {
	width: 20px !important;
	height: 20px !important;
}

body.go-verge .go-header--471 .go-header__sections {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: #d8ff38 !important;
	color: #141414 !important;
	box-shadow: none;
}

body.go-verge .go-header--471 .go-header__sections-row {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	width: min(1200px, calc(100% - 2rem)) !important;
	max-width: 1200px !important;
	min-height: 44px !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
	gap: .35rem !important;
}

body.go-verge .go-header--471 .go-header__sections-list {
	display: flex !important;
	flex: 1 1 auto !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 1.7rem !important;
	list-style: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: .5rem 0 !important;
	font-family: var(--od471-heading) !important;
	font-size: 1.08rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: .05em !important;
	text-transform: uppercase !important;
}

body.go-verge .go-header--471 .go-header__sections-list li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	list-style: none !important;
}

body.go-verge .go-header--471 .go-header__sections-list a {
	display: inline-block !important;
	padding: .15rem 0 !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	background: transparent !important;
	color: #141414 !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: border-color .15s ease, opacity .15s ease !important;
}

body.go-verge .go-header--471 .go-header__sections-list a:hover,
body.go-verge .go-header--471 .go-header__sections-list a:focus-visible,
body.go-verge .go-header--471 .go-header__sections-list a[aria-current="page"] {
	border-bottom-color: #141414 !important;
	color: #141414 !important;
}

body.go-verge .go-header--471 .go-header__compact-menu,
body.go-verge .go-header--471 .go-header__compact-tools {
	display: none !important;
}

/* Compact state: the charcoal row disappears; lime becomes the entire sticky masthead. */
body.go-verge .go-header--471.is-od471-scrolled .go-header__primary {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	border: 0 !important;
	pointer-events: none !important;
}

body.go-verge .go-header--471.is-od471-scrolled .go-header__sections {
	min-height: 48px !important;
	box-shadow: 0 8px 22px rgba(17, 18, 23, .12) !important;
}

body.go-verge .go-header--471.is-od471-scrolled .go-header__sections-row {
	display: grid !important;
	grid-template-columns: 44px minmax(0, 1fr) auto !important;
	align-items: center !important;
	min-height: 48px !important;
	gap: .25rem !important;
}

body.go-verge .go-header--471.is-od471-scrolled .go-header__compact-menu {
	display: grid !important;
	grid-column: 1 !important;
	justify-self: start !important;
	color: #181818 !important;
	-webkit-text-fill-color: #181818 !important;
}

body.go-verge .go-header--471.is-od471-scrolled .go-header__sections-list {
	display: flex !important;
	grid-column: 2 !important;
	position: static !important;
	width: auto !important;
	justify-content: center !important;
	padding: .45rem 0 !important;
}

body.go-verge .go-header--471.is-od471-scrolled .go-header__compact-tools {
	display: flex !important;
	grid-column: 3 !important;
	justify-self: end !important;
	align-items: center !important;
	gap: 0 !important;
	color: #181818 !important;
}

body.go-verge .go-header--471.is-od471-scrolled :where(.go-header__compact-menu, .go-header__compact-tools .go-iconbtn, .go-header__compact-tools .go-theme-toggle) {
	color: #181818 !important;
	-webkit-text-fill-color: #181818 !important;
	background: transparent !important;
}

body.go-verge .go-header--471.is-od471-scrolled :where(.go-header__compact-menu, .go-header__compact-tools .go-iconbtn, .go-header__compact-tools .go-theme-toggle):hover,
body.go-verge .go-header--471.is-od471-scrolled :where(.go-header__compact-menu, .go-header__compact-tools .go-iconbtn, .go-header__compact-tools .go-theme-toggle):focus-visible {
	background: rgba(0, 0, 0, .12) !important;
}

body.go-verge .go-header--471.is-od471-scrolled :where(.go-header__compact-menu, .go-header__compact-tools .go-iconbtn, .go-header__compact-tools .go-theme-toggle) svg,
body.go-verge .go-header--471.is-od471-scrolled :where(.go-header__compact-menu, .go-header__compact-tools .go-iconbtn, .go-header__compact-tools .go-theme-toggle) svg * {
	color: #181818 !important;
	stroke: #181818 !important;
}

/* WordPress toolbar safety while previewing/logged in. */
body.admin-bar.go-verge .go-header--471 {
	top: 32px !important;
}

@media (max-width: 782px) {
	body.admin-bar.go-verge .go-header--471 {
		top: 46px !important;
	}
}

/* On smaller screens keep the first state usable and make the compact nav a horizontal rail. */
@media (max-width: 1023px) {
	body.go-verge .go-header--471 .go-header__sections-list {
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		gap: 0 1.25rem !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scrollbar-width: none !important;
		-webkit-overflow-scrolling: touch;
	}

	body.go-verge .go-header--471 .go-header__sections-list::-webkit-scrollbar {
		display: none !important;
	}

	body.go-verge .go-header--471.is-od471-scrolled .go-header__sections-list {
		justify-content: flex-start !important;
	}
}

@media (max-width: 719px) {
	body.go-verge .go-header--471 .go-header__bar {
		width: calc(100% - 1rem) !important;
	}

	body.go-verge .go-header--471 .go-header__brand,
	body.go-verge .go-header--471.is-compact .go-header__brand,
	body.go-verge .go-header--471.is-od471-scrolled .go-header__brand {
		max-width: min(180px, 48vw) !important;
	}

	body.go-verge .go-header--471 .go-logo--full .go-logo__img--dark {
		height: 27px !important;
		max-width: min(180px, 48vw) !important;
		max-height: 27px !important;
	}

	body.go-verge .go-header--471 .go-header__sections-row {
		width: calc(100% - 1rem) !important;
	}

	body.go-verge .go-header--471 .go-header__sections-list {
		font-size: 1rem !important;
	}
}

@media (max-width: 520px) {
	body.go-verge .go-header--471 .go-header__bar {
		grid-template-columns: 44px minmax(0, 1fr) 88px !important;
	}

	body.go-verge .go-header--471 .go-header__brand,
	body.go-verge .go-header--471.is-compact .go-header__brand,
	body.go-verge .go-header--471.is-od471-scrolled .go-header__brand {
		max-width: min(150px, 43vw) !important;
	}

	body.go-verge .go-header--471 .go-logo--full .go-logo__img--dark {
		height: 24px !important;
		max-width: min(150px, 43vw) !important;
		max-height: 24px !important;
	}

	body.go-verge .go-header--471.is-od471-scrolled .go-header__sections-row {
		grid-template-columns: 40px minmax(0, 1fr) 80px !important;
	}

	body.go-verge .go-header--471 :where(.go-iconbtn, .go-theme-toggle) {
		width: 40px !important;
		height: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
	}
}

/* -------------------------------------------------------------------------
   4. Left-side offcanvas in the same charcoal/lime language as 4.7.1.
   ------------------------------------------------------------------------- */

body.go-verge .go-offcanvas {
	position: fixed !important;
	top: 0 !important;
	right: auto !important;
	bottom: 0 !important;
	left: 0 !important;
	width: min(360px, 92vw) !important;
	max-width: 92vw !important;
	height: 100dvh !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #111217 !important;
	color: #f2f2f2 !important;
	box-shadow: 18px 0 44px rgba(0, 0, 0, .30) !important;
	transform: translateX(-110%) !important;
	transition: transform .22s var(--od471-ease) !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

body.go-verge .go-offcanvas.is-open {
	transform: translateX(0) !important;
}

body.go-verge .go-offcanvas__backdrop {
	background: rgba(0, 0, 0, .55) !important;
	transition: opacity .2s ease !important;
}

body.go-verge .go-offcanvas__head {
	position: sticky !important;
	top: 0 !important;
	z-index: 2 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	min-height: 58px !important;
	padding: .85rem 1rem !important;
	border: 0 !important;
	border-bottom: 1px solid #2a2a2a !important;
	background: #111217 !important;
	color: #ffffff !important;
}

body.go-verge .go-offcanvas__head .go-logo--icon .go-logo__img--dark {
	display: block !important;
	width: auto !important;
	height: 28px !important;
	max-height: 28px !important;
	filter: none !important;
}

body.go-verge .go-offcanvas__head .go-logo--icon .go-logo__img--light {
	display: none !important;
}

body.go-verge .go-offcanvas__head .go-iconbtn {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: #ffffff !important;
}

body.go-verge .go-offcanvas__head .go-iconbtn:hover,
body.go-verge .go-offcanvas__head .go-iconbtn:focus-visible {
	background: rgba(255, 255, 255, .12) !important;
}

body.go-verge .go-offcanvas__head .go-iconbtn svg {
	width: 22px !important;
	height: 22px !important;
	fill: none !important;
	stroke: currentColor !important;
}

body.go-verge .go-offcanvas__body {
	padding: .15rem 0 1.25rem !important;
	background: #111217 !important;
	color: #f2f2f2 !important;
}

body.go-verge .go-offcanvas__menu,
body.go-verge .go-offcanvas__submenu,
body.go-verge .go-offcanvas__menu li,
body.go-verge .go-offcanvas__submenu li {
	margin: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	border: 0 !important;
	background-image: none !important;
	list-style: none !important;
}

body.go-verge .go-offcanvas__menu {
	padding: .15rem 0 .4rem !important;
	font-family: var(--od471-heading) !important;
}

body.go-verge .go-offcanvas__direct > a,
body.go-verge .go-offcanvas__group-link {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	min-height: 45px !important;
	padding: .62rem 1.15rem !important;
	border: 0 !important;
	background: transparent !important;
	color: #f2f2f2 !important;
	font-family: var(--od471-heading) !important;
	font-size: 1.18rem !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

body.go-verge .go-offcanvas__group-row {
	display: flex !important;
	align-items: stretch !important;
	border: 0 !important;
	background: transparent !important;
}

body.go-verge .go-offcanvas__group-row > .go-offcanvas__group-link {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

body.go-verge .go-offcanvas__group-toggle {
	flex: 0 0 44px !important;
	width: 44px !important;
	min-width: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #c4c4c4 !important;
	box-shadow: none !important;
}

body.go-verge .go-offcanvas__group-toggle:hover,
body.go-verge .go-offcanvas__group-toggle:focus-visible {
	background: #1c1c1c !important;
	color: #d8ff38 !important;
}

body.go-verge .go-offcanvas__direct > a:hover,
body.go-verge .go-offcanvas__direct > a:focus-visible,
body.go-verge .go-offcanvas__group-link:hover,
body.go-verge .go-offcanvas__group-link:focus-visible,
body.go-verge .go-offcanvas__direct.is-current > a,
body.go-verge .go-offcanvas__group.is-current > .go-offcanvas__group-row .go-offcanvas__group-link {
	background: #1c1c1c !important;
	color: #d8ff38 !important;
}

body.go-verge .go-offcanvas__direct > a:hover::before,
body.go-verge .go-offcanvas__direct > a:focus-visible::before,
body.go-verge .go-offcanvas__group-link:hover::before,
body.go-verge .go-offcanvas__group-link:focus-visible::before,
body.go-verge .go-offcanvas__direct.is-current > a::before,
body.go-verge .go-offcanvas__group.is-current > .go-offcanvas__group-row .go-offcanvas__group-link::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 3px !important;
	background: #d8ff38 !important;
}

body.go-verge .go-offcanvas__submenu {
	padding: 0 0 .25rem !important;
	background: #0a0a0a !important;
}

body.go-verge .go-offcanvas__submenu[hidden] {
	display: none !important;
}

body.go-verge .go-offcanvas__submenu a {
	display: block !important;
	padding: .42rem 1.15rem .42rem 1.85rem !important;
	border: 0 !important;
	background: transparent !important;
	color: #e8e8e8 !important;
	font-family: var(--od471-body) !important;
	font-size: .98rem !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
}

body.go-verge .go-offcanvas__submenu a:hover,
body.go-verge .go-offcanvas__submenu a:focus-visible,
body.go-verge .go-offcanvas__submenu .is-current > a {
	background: #1c1c1c !important;
	color: #d8ff38 !important;
}

body.go-verge .go-offcanvas__personal,
body.go-verge .go-offcanvas__socials,
body.go-verge .go-offcanvas__utilities {
	border: 0 !important;
	background: transparent !important;
}

body.go-verge .go-offcanvas__personal {
	gap: 8px !important;
	margin: 14px 1rem 20px !important;
}

body.go-verge .go-offcanvas__personal a,
body.go-verge .go-offcanvas__socials a {
	border-color: #333 !important;
	background: transparent !important;
	color: #f2f2f2 !important;
	font-family: var(--od471-body) !important;
}

body.go-verge .go-offcanvas__personal a:hover,
body.go-verge .go-offcanvas__personal a:focus-visible,
body.go-verge .go-offcanvas__socials a:hover,
body.go-verge .go-offcanvas__socials a:focus-visible {
	border-color: #d8ff38 !important;
	color: #d8ff38 !important;
}

body.go-verge .go-offcanvas__label {
	margin: 0 !important;
	padding: 1rem 1.15rem .25rem !important;
	color: #d2d2d2 !important;
	font-family: var(--od471-heading) !important;
	font-size: .68rem !important;
	font-weight: 700 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
}

@media (prefers-reduced-motion: reduce) {
	body.go-verge .go-header--471,
	body.go-verge .go-offcanvas,
	body.go-verge .go-offcanvas__backdrop {
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
   6. Single posts: publisher/portal composition from Overdrive 4.7.1.

   This is structural only. The existing News Magazine X components keep their
   styling and behavior; the story lead, hero and copy simply share the left
   editorial column while the contextual rail starts at the top on desktop.
   ------------------------------------------------------------------------- */

body.single-post .go-article-layout--portal {
	grid-template-columns: minmax(0, 1fr) 300px !important;
	justify-content: stretch !important;
	align-items: start !important;
	gap: clamp(36px, 3.4vw, 44px) !important;
	margin-top: 0 !important;
}

body.single-post .go-article-layout--portal .go-article__main--portal {
	min-width: 0;
	width: 100%;
}

/* Headline, deck, hero and reader tools use the wider editorial column. */
body.single-post .go-article__main--portal > .go-article__header,
body.single-post .go-article__main--portal > .go-article__hero,
body.single-post .go-article__main--portal > .go-article__posthero-bar {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}

body.single-post .go-article__main--portal > .go-article__header {
	text-align: left !important;
}

body.single-post .go-article__main--portal > .go-article__header .go-article__breadcrumb-strip {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}

body.single-post .go-article__main--portal > .go-article__hero {
	margin-top: clamp(24px, 2.3vw, 30px) !important;
}

body.single-post .go-article__main--portal > .go-article__posthero-bar {
	margin-top: 10px !important;
}

/* The prose stays left-aligned at a comfortable newspaper-like measure rather
   than being centered inside the larger media/headline column. */
body.single-post .go-article__reading {
	width: min(100%, var(--reading, 720px));
	max-width: var(--reading, 720px);
	min-width: 0;
	margin: clamp(18px, 2vw, 24px) 0 0 !important;
}

body.single-post .go-article__reading > :first-child {
	margin-top: 0 !important;
}

body.single-post .go-article__reading .go-article__content {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* The rail begins beside the story lead, like a conventional news portal. */
body.single-post .go-article-layout--portal > .go-article-sidebar {
	min-width: 0;
	margin-top: 0 !important;
}

@media (min-width: 1101px) {
	body.single-post .go-article-layout--portal {
		align-items: stretch !important;
	}
}

/* Tablet: keep the article readable and move the rail below it before the two
   columns become cramped. This matches the existing theme's sidebar behavior. */
@media (max-width: 1100px) {
	body.single-post .go-article-layout--portal {
		grid-template-columns: minmax(0, var(--reading, 720px)) !important;
		justify-content: center !important;
		gap: 0 !important;
	}

	body.single-post .go-article-layout--portal > .go-article-sidebar {
		position: static !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 38px !important;
	}
}

@media (max-width: 768px) {
	body.single-post .go-article-layout--portal {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	body.single-post .go-article__reading {
		width: 100%;
		max-width: none;
	}

	body.single-post .go-article-layout--portal > .go-article-sidebar {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 32px !important;
	}
}
/* -------------------------------------------------------------------------
   7. Final 4.7.1 parity tuning: canvas, mobile chrome and editorial controls.
   ------------------------------------------------------------------------- */

/* The older article-reference layer has a more specific purple dark canvas.
   Restate the actual 4.7.1 paper here with equal/higher specificity so every
   public template — including singles — uses the reference theme's background. */
/* Keep browser overscroll / viewport chrome on the same paper as 4.7.1. */
html[data-theme="light-mode"] { background-color: #f4f5f7 !important; }
html[data-theme="dark-mode"] { background-color: #0f1115 !important; }

html[data-theme="light-mode"] body.go-verge,
html[data-theme="light-mode"] body.go-verge[class],
html[data-theme="light-mode"] body.single-post.go-verge,
html[data-theme="light-mode"] body.go-verge.go-has-editorial-background[class] {
	background-color: #f4f5f7 !important;
	background-image: var(--od471-light-canvas) !important;
	background-attachment: fixed !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

html[data-theme="dark-mode"] body.go-verge,
html[data-theme="dark-mode"] body.go-verge[class],
html[data-theme="dark-mode"] body.single-post.go-verge,
html[data-theme="dark-mode"] body.single-post.go-verge:not(.go-has-editorial-background),
html[data-theme="dark-mode"] body.go-verge.go-has-editorial-background[class] {
	background-color: #0f1115 !important;
	background-image: var(--od471-dark-canvas) !important;
	background-attachment: fixed !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center top !important;
}

html[data-theme="light-mode"] body.go-verge :where(.go-site, .go-main, .site-content, #content, .go-home),
html[data-theme="dark-mode"] body.go-verge :where(.go-site, .go-main, .site-content, #content, .go-home) {
	background-color: transparent !important;
	background-image: none !important;
}

/* -------------------------------------------------------------------------
   8. Phone masthead: one lime rail, matching the supplied mobile reference.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	body.go-verge .go-header--471,
	body.go-verge .go-header--471.is-od471-scrolled,
	body.go-verge .go-header--471.is-stuck {
		min-height: 56px !important;
		background: #d8ff38 !important;
		color: #10142a !important;
		box-shadow: 0 1px 0 rgba(16, 20, 42, .12) !important;
		overflow: visible !important;
	}

	/* Mobile never swaps to the desktop compact navigation row: the same clean
	   menu + wordmark + theme/search rail remains visible while scrolling. */
	body.go-verge .go-header--471 .go-header__primary,
	body.go-verge .go-header--471.is-od471-scrolled .go-header__primary,
	body.go-verge .go-header--471.is-stuck .go-header__primary {
		display: block !important;
		height: 56px !important;
		min-height: 56px !important;
		background: #d8ff38 !important;
		color: #10142a !important;
		pointer-events: auto !important;
	}

	body.go-verge .go-header--471 .go-header__sections,
	body.go-verge .go-header--471.is-od471-scrolled .go-header__sections,
	body.go-verge .go-header--471.is-stuck .go-header__sections {
		display: none !important;
		height: 0 !important;
		min-height: 0 !important;
		box-shadow: none !important;
	}

	body.go-verge .go-header--471 .go-header__bar,
	body.go-verge .go-header--471.is-od471-scrolled .go-header__bar {
		display: grid !important;
		grid-template-columns: 40px minmax(0, 1fr) 88px !important;
		grid-template-rows: 56px !important;
		align-items: center !important;
		column-gap: 6px !important;
		width: 100% !important;
		max-width: none !important;
		height: 56px !important;
		min-height: 56px !important;
		padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)) !important;
	}

	body.go-verge .go-header--471 .go-header__menu-toggle--leading {
		grid-column: 1 !important;
		grid-row: 1 !important;
		justify-self: start !important;
	}

	body.go-verge .go-header--471 .go-header__brand,
	body.go-verge .go-header--471.is-compact .go-header__brand,
	body.go-verge .go-header--471.is-od471-scrolled .go-header__brand {
		grid-column: 2 !important;
		grid-row: 1 !important;
		justify-self: start !important;
		position: static !important;
		max-width: min(132px, 44vw) !important;
		transform: none !important;
	}

	/* Lime is a light background: use the official light-background artwork
	   (navy/black wordmark) regardless of the page's light/dark preference. */
	body.go-verge .go-header--471 .go-logo--full .go-logo__img--dark {
		display: none !important;
	}
	body.go-verge .go-header--471 .go-logo--full .go-logo__img--light {
		display: block !important;
		width: auto !important;
		height: 21px !important;
		max-width: min(132px, 44vw) !important;
		max-height: 21px !important;
		object-fit: contain !important;
	}

	body.go-verge .go-header--471 .go-header__actions,
	body.go-verge .go-header--471.is-od471-scrolled .go-header__actions {
		grid-column: 3 !important;
		grid-row: 1 !important;
		justify-self: end !important;
		display: grid !important;
		grid-template-columns: repeat(2, 44px) !important;
		width: 88px !important;
		min-width: 88px !important;
		gap: 0 !important;
		margin: 0 !important;
	}

	body.go-verge .go-header--471 :where(.go-header__menu-toggle--leading, .go-header__actions .go-iconbtn, .go-header__actions .go-theme-toggle) {
		display: grid !important;
		place-items: center !important;
		width: 40px !important;
		height: 44px !important;
		min-width: 40px !important;
		max-width: 40px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 50% !important;
		background: transparent !important;
		color: #10142a !important;
		-webkit-text-fill-color: #10142a !important;
	}

	body.go-verge .go-header--471 .go-header__actions > :last-child {
		justify-self: end !important;
	}

	body.go-verge .go-header--471 :where(.go-header__menu-toggle--leading, .go-header__actions .go-iconbtn, .go-header__actions .go-theme-toggle):hover,
	body.go-verge .go-header--471 :where(.go-header__menu-toggle--leading, .go-header__actions .go-iconbtn, .go-header__actions .go-theme-toggle):focus-visible {
		background: rgba(16, 20, 42, .09) !important;
	}

	body.go-verge .go-header--471 :where(.go-header__menu-toggle--leading, .go-header__actions .go-iconbtn, .go-header__actions .go-theme-toggle) svg,
	body.go-verge .go-header--471 :where(.go-header__menu-toggle--leading, .go-header__actions .go-iconbtn, .go-header__actions .go-theme-toggle) svg * {
		color: #10142a !important;
		stroke: #10142a !important;
	}
}

@media (max-width: 359px) {
	body.go-verge .go-header--471 .go-header__bar,
	body.go-verge .go-header--471.is-od471-scrolled .go-header__bar {
		grid-template-columns: 38px minmax(0, 1fr) 80px !important;
		column-gap: 4px !important;
		padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)) !important;
	}
	body.go-verge .go-header--471 .go-header__actions,
	body.go-verge .go-header--471.is-od471-scrolled .go-header__actions {
		grid-template-columns: repeat(2, 40px) !important;
		width: 80px !important;
		min-width: 80px !important;
	}
	body.go-verge .go-header--471 .go-header__brand,
	body.go-verge .go-header--471.is-od471-scrolled .go-header__brand,
	body.go-verge .go-header--471 .go-logo--full .go-logo__img--light {
		max-width: min(122px, 42vw) !important;
	}
}

/* -------------------------------------------------------------------------
   9. Homepage hero metadata + module "see all" links.
   ------------------------------------------------------------------------- */
body.home.go-verge .go-hero-visual :where(.go-hero-visual__side, .go-hero-visual__bottom) .go-tile {
	gap: 10px !important;
}

body.home.go-verge .go-hero-visual :where(.go-hero-visual__side, .go-hero-visual__bottom) .go-tile__body {
	gap: 4px !important;
	padding-bottom: 0 !important;
}

/* Reference 4.7.1 uses a restrained text action at module heads, not a heavy
   outlined pill. Keep all the homepage variants on that one visual contract. */
body.go-verge .go-section__head > .go-btn,
body.go-verge .go-section__head > .go-btn--outline-mint,
body.go-verge .go-home-panel__head > .go-home-panel__link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 36px !important;
	margin: 0 !important;
	padding: 7px 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--text-secondary) !important;
	font-family: var(--od471-heading) !important;
	font-size: .82rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}

body.go-verge .go-section__head > .go-btn:hover,
body.go-verge .go-section__head > .go-btn:focus-visible,
body.go-verge .go-section__head > .go-btn--outline-mint:hover,
body.go-verge .go-section__head > .go-btn--outline-mint:focus-visible,
body.go-verge .go-home-panel__head > .go-home-panel__link:hover,
body.go-verge .go-home-panel__head > .go-home-panel__link:focus-visible {
	background: transparent !important;
	color: var(--text) !important;
	text-decoration-line: underline !important;
	text-decoration-color: #d8ff38 !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 4px !important;
}

@media (max-width: 560px) {
	body.go-verge .go-section__head > .go-btn,
	body.go-verge .go-section__head > .go-btn--outline-mint,
	body.go-verge .go-home-panel__head > .go-home-panel__link {
		min-height: 44px !important;
	}
}

/* -------------------------------------------------------------------------
   10. Reading progress: a black hairline immediately BELOW the lime masthead.

   The header changes height on desktop (104px -> 48px) and stays 56px on
   phones. `theme.js` publishes the real border-box height through
   --go-header-height, so the meter follows the actual chrome instead of
   guessing a scroll-state offset. Keeping it outside the header also avoids
   painting over the active-section underline.
   ------------------------------------------------------------------------- */
body.single-post.go-verge .go-reading-meter {
	position: fixed !important;
	top: var(--go-header-height, 104px) !important;
	right: 0 !important;
	bottom: auto !important;
	left: 0 !important;
	width: 100% !important;
	height: 4px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: rgba(17, 18, 23, .10) !important;
	box-shadow: 0 1px 0 rgba(17, 18, 23, .05) !important;
	overflow: hidden !important;
	pointer-events: none !important;
	z-index: 61 !important;
}

body.single-post.go-verge .go-reading-meter__bar {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	background: #111217 !important;
	border-radius: 0 999px 999px 0 !important;
	box-shadow: none !important;
	transform-origin: left center !important;
	will-change: transform !important;
}

html[data-theme="dark-mode"] body.single-post.go-verge .go-reading-meter {
	/* A faint neutral rail keeps the black fill legible on the dark canvas while
	   the actual progress color remains black, as requested. */
	background: rgba(246, 247, 249, .12) !important;
	box-shadow: none !important;
}

/* Logged-in previews keep the meter below both the WordPress toolbar and the
   sticky Overdrive header. Public visitors keep the simpler rule above. */
body.admin-bar.single-post.go-verge .go-reading-meter {
	top: calc(var(--go-header-height, 104px) + 32px) !important;
}

@media (max-width: 782px) {
	body.admin-bar.single-post.go-verge .go-reading-meter {
		top: calc(var(--go-header-height, 56px) + 46px) !important;
	}
}

@media (max-width: 767px) {
	body.single-post.go-verge .go-reading-meter {
		top: var(--go-header-height, 56px) !important;
		height: 3px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.single-post.go-verge .go-reading-meter {
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
   11. Preferred-source CTA: lime instead of blue in light mode.
   ------------------------------------------------------------------------- */
html[data-theme="light-mode"] body.single-post.go-verge .go-preferred-source-pill {
	border-color: rgba(16, 20, 42, .14) !important;
	background: #d8ff38 !important;
	color: #141414 !important;
	box-shadow: 0 8px 22px rgba(16, 20, 42, .10) !important;
}

html[data-theme="light-mode"] body.single-post.go-verge .go-preferred-source-pill:hover,
html[data-theme="light-mode"] body.single-post.go-verge .go-preferred-source-pill:focus-visible {
	border-color: #10142a !important;
	background: #d8ff38 !important;
	color: #10142a !important;
	box-shadow: 0 10px 26px rgba(16, 20, 42, .14) !important;
}

html[data-theme="light-mode"] body.single-post.go-verge .go-preferred-source-pill:focus-visible {
	outline-color: #10142a !important;
}

/* -------------------------------------------------------------------------
   12. In-copy share CTA: mobile-safe geometry and lime visual language.
   ------------------------------------------------------------------------- */
html[data-theme="light-mode"] body.single-post.go-verge .go-article__content .go-inline-cta--share-only {
	border-color: rgba(16, 20, 42, .13) !important;
	background:
		radial-gradient(circle at 12% -35%, rgba(216, 255, 56, .32) 0, transparent 55%),
		#ffffff !important;
	box-shadow: 0 10px 28px rgba(16, 20, 42, .08) !important;
}

html[data-theme="dark-mode"] body.single-post.go-verge .go-article__content .go-inline-cta--share-only {
	border-color: rgba(216, 255, 56, .18) !important;
	background:
		radial-gradient(circle at 12% -35%, rgba(216, 255, 56, .12) 0, transparent 55%),
		#1c1f26 !important;
}

@media (max-width: 560px) {
	body.single-post.go-verge .go-article__content .go-inline-cta--engagement.go-inline-cta--share-only {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-inline: 0 !important;
		padding: 14px !important;
		border-radius: 12px !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}

	body.single-post.go-verge .go-inline-cta--share-only .go-inline-cta__share-block {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		align-items: stretch !important;
		gap: 12px !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	body.single-post.go-verge .go-inline-cta--share-only .go-inline-cta__share-heading {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		min-width: 0 !important;
		gap: 10px !important;
	}

	body.single-post.go-verge .go-inline-cta--share-only .go-inline-cta__share-title {
		min-width: 0 !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
	}

	body.single-post.go-verge .go-inline-cta--share-only .go-inline-cta__share {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		align-items: stretch !important;
		justify-content: stretch !important;
		gap: 8px !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	body.single-post.go-verge .go-article__content .go-inline-cta--share-only .go-inline-cta__share-link {
		display: grid !important;
		place-items: center !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		height: 44px !important;
		min-height: 44px !important;
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 10px !important;
		box-sizing: border-box !important;
		transform: none !important;
	}

	body.single-post.go-verge .go-article__content .go-inline-cta--share-only .go-inline-cta__share-link svg {
		display: block !important;
		width: 18px !important;
		height: 18px !important;
	}

	body.single-post.go-verge .go-inline-cta--share-only .go-inline-cta__share-link span {
		display: none !important;
	}
}


/* 13. Share CTA hard reset + Auto Ads article opportunities. */

/* Stable opportunities copied from the Overdrive 4.7.1 article rhythm. The
 * empty node occupies no reserved ad height; Google remains free to use or skip
 * the pause. */
body.single-post.go-verge .go-article__content > .go-auto-ad-opportunity[data-go-ad-break] {
	display: block !important;
	clear: both !important;
	width: 100% !important;
	max-width: 760px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 1.35rem auto !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: visible !important;
}

/* Do not constrain Google's own automatic wrapper; only give it editorial
 * breathing room when AdSense chooses an in-page placement. */

body.single-post.go-verge .go-article__content > .go-auto-ad-opportunity[data-go-ad-break]:has(ins.adsbygoogle),
body.single-post.go-verge .go-article__content > .go-auto-ad-opportunity[data-go-ad-break]:has(.google-auto-placed) {
	min-height: 90px !important;
	margin-block: 1.6rem !important;
}

body.single-post.go-verge .go-article__content .google-auto-placed {
	clear: both !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-block: 1.55rem !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
	box-sizing: border-box !important;
}
body.single-post.go-verge .go-article__content .google-auto-placed ins.adsbygoogle {
	max-width: 100% !important;
	margin-inline: auto !important;
}

/* The old theme has several historical CTA/link sheets. This final reset lives
 * in the last enqueued stylesheet so the mobile share component cannot inherit
 * the generic blue article-link rule or a global SVG size. */
body.single-post.go-verge .go-article__content .go-inline-cta--share-only,
body.single-post.go-verge .go-article__content .go-inline-cta--share-only * {
	box-sizing: border-box;
}
body.single-post.go-verge .go-inline-cta--share-only .go-inline-cta__share-emblem {
	display: grid !important;
	place-items: center !important;
	flex: 0 0 38px !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;
	max-width: 38px !important;
	max-height: 38px !important;
	padding: 0 !important;
	overflow: hidden !important;
}
body.single-post.go-verge .go-inline-cta--share-only .go-inline-cta__share-emblem svg {
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
}
body.single-post.go-verge .go-article__content .go-inline-cta--share-only .go-inline-cta__share-link,
body.single-post.go-verge .go-article__content .go-inline-cta--share-only .go-inline-cta__share-link:visited {
	box-shadow: none !important;
	text-decoration: none !important;
	-webkit-text-fill-color: currentColor !important;
}
html[data-theme="light-mode"] body.single-post.go-verge .go-article__content .go-inline-cta--share-only .go-inline-cta__share-link,
html[data-theme="light-mode"] body.single-post.go-verge .go-article__content .go-inline-cta--share-only .go-inline-cta__share-link:visited {
	color: #141414 !important;
	border-color: rgba(16,20,42,.16) !important;
	background: #f4f5f7 !important;
}
html[data-theme="dark-mode"] body.single-post.go-verge .go-article__content .go-inline-cta--share-only .go-inline-cta__share-link,
html[data-theme="dark-mode"] body.single-post.go-verge .go-article__content .go-inline-cta--share-only .go-inline-cta__share-link:visited {
	color: #f7f8fb !important;
	border-color: rgba(255,255,255,.16) !important;
	background: #242832 !important;
}

@media (max-width: 767px) {
	body.single-post.go-verge .go-article__content .go-inline-cta--engagement.go-inline-cta--share-only {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 28px 0 !important;
		padding: 15px !important;
		border-radius: 12px !important;
		overflow: hidden !important;
	}
	body.single-post.go-verge .go-inline-cta--share-only .go-inline-cta__share-block {
		display: grid !important;
		grid-template-columns: minmax(0,1fr) !important;
		gap: 13px !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		padding: 0 !important;
	}
	body.single-post.go-verge .go-inline-cta--share-only .go-inline-cta__share-heading {
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
	}
	body.single-post.go-verge .go-inline-cta--share-only .go-inline-cta__share-title {
		display: block !important;
		min-width: 0 !important;
		margin: 0 !important;
		color: var(--text, #141414) !important;
		font-size: .92rem !important;
		font-weight: 780 !important;
		line-height: 1.2 !important;
		white-space: normal !important;
		overflow-wrap: normal !important;
		word-break: normal !important;
	}
	body.single-post.go-verge .go-inline-cta--share-only .go-inline-cta__share {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0,1fr)) !important;
		align-items: stretch !important;
		justify-content: stretch !important;
		gap: 8px !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	body.single-post.go-verge .go-article__content .go-inline-cta--share-only .go-inline-cta__share-link {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 8px !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		height: 44px !important;
		min-height: 44px !important;
		margin: 0 !important;
		padding: 0 11px !important;
		border-radius: 9px !important;
		font-size: .78rem !important;
		font-weight: 760 !important;
		line-height: 1 !important;
		transform: none !important;
	}
	body.single-post.go-verge .go-article__content .go-inline-cta--share-only .go-inline-cta__share-link svg {
		display: block !important;
		flex: 0 0 17px !important;
		width: 17px !important;
		height: 17px !important;
		min-width: 17px !important;
		min-height: 17px !important;
		max-width: 17px !important;
		max-height: 17px !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	body.single-post.go-verge .go-inline-cta--share-only .go-inline-cta__share-link span {
		position: static !important;
		display: block !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		clip: auto !important;
		clip-path: none !important;
		white-space: nowrap !important;
		border: 0 !important;
		color: inherit !important;
		-webkit-text-fill-color: currentColor !important;
	}
}

@media (max-width: 360px) {
	body.single-post.go-verge .go-inline-cta--share-only .go-inline-cta__share {
		grid-template-columns: minmax(0,1fr) !important;
	}
}

/* ========================================================================
   2026-08-24 — global hover contract + review archive canvas QA
   ======================================================================== */
html[data-theme="light-mode"] body.go-verge,
html[data-theme="light"] body.go-verge {
	--go-hover-accent: #421aff;
}
html[data-theme="dark-mode"] body.go-verge,
html[data-theme="dark"] body.go-verge {
	--go-hover-accent: #d8ff38;
}

html[data-theme="light-mode"] body.go-verge a:hover,
html[data-theme="light-mode"] body.go-verge a:focus-visible,
html[data-theme="light"] body.go-verge a:hover,
html[data-theme="light"] body.go-verge a:focus-visible {
	color: #421aff !important;
	-webkit-text-fill-color: #421aff !important;
}
html[data-theme="dark-mode"] body.go-verge a:hover,
html[data-theme="dark-mode"] body.go-verge a:focus-visible,
html[data-theme="dark"] body.go-verge a:hover,
html[data-theme="dark"] body.go-verge a:focus-visible {
	color: #d8ff38 !important;
	-webkit-text-fill-color: #d8ff38 !important;
}
/* The lime navigation and lime-filled controls need ink for contrast. */
body.go-verge .go-header--471 .go-header__sections a:hover,
body.go-verge .go-header--471 .go-header__sections a:focus-visible,
body.go-verge :where(.go-btn--mint, .go-tag:first-child):hover,
body.go-verge :where(.go-btn--mint, .go-tag:first-child):focus-visible {
	color: #111217 !important;
	-webkit-text-fill-color: #111217 !important;
}

/* Reviews/critics archive was still inheriting an older purple section skin. */
html[data-theme="light-mode"] body.go-verge :where(.go-review-index, .go-review-index .go-archive-page, .go-review-index .go-pagehead),
html[data-theme="light"] body.go-verge :where(.go-review-index, .go-review-index .go-archive-page, .go-review-index .go-pagehead) {
	background-color: transparent !important;
	background-image: none !important;
	color: #111217 !important;
}
html[data-theme="dark-mode"] body.go-verge :where(.go-review-index, .go-review-index .go-archive-page, .go-review-index .go-pagehead),
html[data-theme="dark"] body.go-verge :where(.go-review-index, .go-review-index .go-archive-page, .go-review-index .go-pagehead) {
	background-color: transparent !important;
	background-image: none !important;
	color: #f6f7f9 !important;
}
html[data-theme="light-mode"] body.go-verge .go-review-index :where(.go-archive-feature, .go-archive-row, .go-archive-highlight, .go-archive-sidebar__module),
html[data-theme="light"] body.go-verge .go-review-index :where(.go-archive-feature, .go-archive-row, .go-archive-highlight, .go-archive-sidebar__module) {
	background: rgba(255,255,255,.72) !important;
	border-color: rgba(17,18,23,.12) !important;
}
html[data-theme="dark-mode"] body.go-verge .go-review-index :where(.go-archive-feature, .go-archive-row, .go-archive-highlight, .go-archive-sidebar__module),
html[data-theme="dark"] body.go-verge .go-review-index :where(.go-archive-feature, .go-archive-row, .go-archive-highlight, .go-archive-sidebar__module) {
	background: rgba(28,31,38,.78) !important;
	border-color: rgba(246,247,249,.13) !important;
}

/* Light-mode readability for review/critique widgets that used dark-only text. */
html[data-theme="light-mode"] body.go-verge :where(.go-review-box, .go-review-recap, .go-author-card, .go-channel-invite, .go-inline-cta--share-only),
html[data-theme="light"] body.go-verge :where(.go-review-box, .go-review-recap, .go-author-card, .go-channel-invite, .go-inline-cta--share-only) {
	color: #111217 !important;
}
html[data-theme="light-mode"] body.go-verge :where(.go-review-box, .go-review-recap, .go-author-card, .go-channel-invite, .go-inline-cta--share-only) :where(p,span,strong,h2,h3),
html[data-theme="light"] body.go-verge :where(.go-review-box, .go-review-recap, .go-author-card, .go-channel-invite, .go-inline-cta--share-only) :where(p,span,strong,h2,h3) {
	color: inherit;
}

/* ========================================================================
   2026-08-24 — archive headings, breadcrumb path, card hover + mobile brand
   ======================================================================== */

/* Page/category/tag titles stay editorial and clean: no legacy // rails. */
body.go-verge .go-pagehead__title,
body.go-verge.go-accent .go-pagehead__title,
body.go-verge .go-editorial-zone .go-pagehead__title,
body.go-verge .go-main.go-editorial-zone .go-pagehead__title,
body.go-verge .go-editorial-hub .go-pagehead__title,
body.go-verge .go-platform-brand .go-pagehead__title {
	padding-inline: 0 !important;
}
body.go-verge .go-pagehead__title::before,
body.go-verge .go-pagehead__title::after,
body.go-verge.go-accent .go-pagehead__title::before,
body.go-verge.go-accent .go-pagehead__title::after,
body.go-verge.go-accent:not(.go-platform-brand) .go-pagehead__title::before,
body.go-verge .go-editorial-zone .go-pagehead__title::before,
body.go-verge .go-editorial-zone .go-pagehead__title::after,
body.go-verge .go-main.go-editorial-zone .go-pagehead__title::before,
body.go-verge .go-main.go-editorial-zone .go-pagehead__title::after,
body.go-verge .go-editorial-hub .go-pagehead__title::before,
body.go-verge .go-editorial-hub .go-pagehead__title::after,
body.go-verge .go-platform-brand .go-pagehead__title::before,
body.go-verge .go-platform-brand .go-pagehead__title::after {
	content: none !important;
	display: none !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Breadcrumbs become a small directional path rather than HOME / CATEGORY. */
body.go-verge .go-breadcrumbs {
	display: inline-flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 7px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-family: "Barlow Condensed", var(--font-display), sans-serif !important;
	font-size: .76rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: .085em !important;
	text-transform: uppercase !important;
}
body.go-verge .go-breadcrumbs::before {
	content: "";
	inline-size: 7px;
	block-size: 7px;
	margin-inline-end: 3px;
	border: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .9;
}
html[data-theme="light-mode"] body.go-verge .go-breadcrumbs::before,
html[data-theme="light"] body.go-verge .go-breadcrumbs::before {
	color: #421aff;
}
html[data-theme="dark-mode"] body.go-verge .go-breadcrumbs::before,
html[data-theme="dark"] body.go-verge .go-breadcrumbs::before {
	color: #d8ff38;
}
body.go-verge .go-breadcrumbs > :where(a, span:not(.sep)) {
	color: var(--text-secondary) !important;
	-webkit-text-fill-color: currentColor !important;
	text-decoration: none !important;
}
body.go-verge .go-breadcrumbs > :where(span:not(.sep)):last-child {
	color: var(--text) !important;
	-webkit-text-fill-color: currentColor !important;
}
body.go-verge .go-breadcrumbs .sep {
	display: inline-grid !important;
	place-items: center !important;
	inline-size: 12px !important;
	block-size: 16px !important;
	font-size: 0 !important;
	color: var(--text-secondary) !important;
	opacity: .62;
}
body.go-verge .go-breadcrumbs .sep::before {
	content: "›" !important;
	display: block !important;
	font-family: ui-sans-serif, system-ui, sans-serif !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	transform: translateY(-1px);
}
html[data-theme="light-mode"] body.go-verge .go-breadcrumbs a:hover,
html[data-theme="light-mode"] body.go-verge .go-breadcrumbs a:focus-visible,
html[data-theme="light"] body.go-verge .go-breadcrumbs a:hover,
html[data-theme="light"] body.go-verge .go-breadcrumbs a:focus-visible {
	color: #421aff !important;
	-webkit-text-fill-color: #421aff !important;
}
html[data-theme="dark-mode"] body.go-verge .go-breadcrumbs a:hover,
html[data-theme="dark-mode"] body.go-verge .go-breadcrumbs a:focus-visible,
html[data-theme="dark"] body.go-verge .go-breadcrumbs a:hover,
html[data-theme="dark"] body.go-verge .go-breadcrumbs a:focus-visible {
	color: #d8ff38 !important;
	-webkit-text-fill-color: #d8ff38 !important;
}

/* One hover language everywhere: blue on light, lime on dark. This explicit
   card selector wins over per-editoria accent rules from the historical CSS. */
html[data-theme="light-mode"] body.go-verge :where(
	.go-tile,
	.go-stream__card,
	.go-archive-row,
	.go-archive-feature,
	.go-archive-highlight,
	.go-archive-hero__lead,
	.go-archive-hero__item,
	.go-aside-item
):hover :where(.go-tile__title, .go-stream__title, .go-archive-row__title, .go-archive-feature__title, .go-archive-highlight__title, .go-archive-hero__title, .go-archive-hero__item-title, .go-aside-item__title) a,
html[data-theme="light"] body.go-verge :where(
	.go-tile,
	.go-stream__card,
	.go-archive-row,
	.go-archive-feature,
	.go-archive-highlight,
	.go-archive-hero__lead,
	.go-archive-hero__item,
	.go-aside-item
):hover :where(.go-tile__title, .go-stream__title, .go-archive-row__title, .go-archive-feature__title, .go-archive-highlight__title, .go-archive-hero__title, .go-archive-hero__item-title, .go-aside-item__title) a,
html[data-theme="light-mode"] body.go-verge :where(.go-tile__title, .go-stream__title, .go-archive-row__title, .go-archive-feature__title, .go-archive-highlight__title, .go-archive-hero__title, .go-archive-hero__item-title, .go-aside-item__title) a:hover,
html[data-theme="light"] body.go-verge :where(.go-tile__title, .go-stream__title, .go-archive-row__title, .go-archive-feature__title, .go-archive-highlight__title, .go-archive-hero__title, .go-archive-hero__item-title, .go-aside-item__title) a:hover {
	color: #421aff !important;
	-webkit-text-fill-color: #421aff !important;
}
html[data-theme="dark-mode"] body.go-verge :where(
	.go-tile,
	.go-stream__card,
	.go-archive-row,
	.go-archive-feature,
	.go-archive-highlight,
	.go-archive-hero__lead,
	.go-archive-hero__item,
	.go-aside-item
):hover :where(.go-tile__title, .go-stream__title, .go-archive-row__title, .go-archive-feature__title, .go-archive-highlight__title, .go-archive-hero__title, .go-archive-hero__item-title, .go-aside-item__title) a,
html[data-theme="dark"] body.go-verge :where(
	.go-tile,
	.go-stream__card,
	.go-archive-row,
	.go-archive-feature,
	.go-archive-highlight,
	.go-archive-hero__lead,
	.go-archive-hero__item,
	.go-aside-item
):hover :where(.go-tile__title, .go-stream__title, .go-archive-row__title, .go-archive-feature__title, .go-archive-highlight__title, .go-archive-hero__title, .go-archive-hero__item-title, .go-aside-item__title) a,
html[data-theme="dark-mode"] body.go-verge :where(.go-tile__title, .go-stream__title, .go-archive-row__title, .go-archive-feature__title, .go-archive-highlight__title, .go-archive-hero__title, .go-archive-hero__item-title, .go-aside-item__title) a:hover,
html[data-theme="dark"] body.go-verge :where(.go-tile__title, .go-stream__title, .go-archive-row__title, .go-archive-feature__title, .go-archive-highlight__title, .go-archive-hero__title, .go-archive-hero__item-title, .go-aside-item__title) a:hover {
	color: #d8ff38 !important;
	-webkit-text-fill-color: #d8ff38 !important;
}

/* The lime phone rail needs an all-dark lockup: the normal light-background
   logo intentionally has a lime symbol, which disappears against this rail. */
body.go-verge .go-logo__img--mobile-lime {
	display: none !important;
}
@media (max-width: 767px) {
	body.go-verge .go-header--471 .go-logo--full .go-logo__img--dark,
	body.go-verge .go-header--471 .go-logo--full .go-logo__img--light {
		display: none !important;
	}
	body.go-verge .go-header--471 .go-logo--full .go-logo__img--mobile-lime {
		display: block !important;
		inline-size: auto !important;
		block-size: 22px !important;
		max-inline-size: min(145px, 46vw) !important;
		max-block-size: 22px !important;
		object-fit: contain !important;
		object-position: left center !important;
	}
}

/* Card hover itself follows the same light/dark accent contract; older
   editoria rules must not paint the whole row green in light mode. */
html[data-theme="light-mode"] body.go-verge :where(
	.go-tile,
	.go-stream__card,
	.go-archive-row,
	.go-archive-feature,
	.go-archive-highlight,
	.go-archive-hero__lead,
	.go-archive-hero__item,
	.go-aside-item
):hover,
html[data-theme="light"] body.go-verge :where(
	.go-tile,
	.go-stream__card,
	.go-archive-row,
	.go-archive-feature,
	.go-archive-highlight,
	.go-archive-hero__lead,
	.go-archive-hero__item,
	.go-aside-item
):hover {
	border-color: color-mix(in srgb, #421aff 38%, var(--frame)) !important;
}
html[data-theme="dark-mode"] body.go-verge :where(
	.go-tile,
	.go-stream__card,
	.go-archive-row,
	.go-archive-feature,
	.go-archive-highlight,
	.go-archive-hero__lead,
	.go-archive-hero__item,
	.go-aside-item
):hover,
html[data-theme="dark"] body.go-verge :where(
	.go-tile,
	.go-stream__card,
	.go-archive-row,
	.go-archive-feature,
	.go-archive-highlight,
	.go-archive-hero__lead,
	.go-archive-hero__item,
	.go-aside-item
):hover {
	border-color: color-mix(in srgb, #d8ff38 36%, var(--frame)) !important;
}