/* =====================================================================
   ARTICLE: single.php only.
   Loaded conditionally; @font-face for Cormorant Garamond is scoped here
   so listing pages don't pull the font files.
   ===================================================================== */

@font-face {
	font-family: 'Cormorant Garamond';
	src: url('../fonts/CormorantGaramond-Light.ttf') format('truetype');
	font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Cormorant Garamond';
	src: url('../fonts/CormorantGaramond-LightItalic.ttf') format('truetype');
	font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
	font-family: 'Cormorant Garamond';
	src: url('../fonts/CormorantGaramond-Regular.ttf') format('truetype');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Cormorant Garamond';
	src: url('../fonts/CormorantGaramond-Italic.ttf') format('truetype');
	font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
	font-family: 'Cormorant Garamond';
	src: url('../fonts/CormorantGaramond-Medium.ttf') format('truetype');
	font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Cormorant Garamond';
	src: url('../fonts/CormorantGaramond-MediumItalic.ttf') format('truetype');
	font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
	font-family: 'Cormorant Garamond';
	src: url('../fonts/CormorantGaramond-SemiBold.ttf') format('truetype');
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Cormorant Garamond';
	src: url('../fonts/CormorantGaramond-SemiBoldItalic.ttf') format('truetype');
	font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
	font-family: 'Cormorant Garamond';
	src: url('../fonts/CormorantGaramond-Bold.ttf') format('truetype');
	font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Cormorant Garamond';
	src: url('../fonts/CormorantGaramond-BoldItalic.ttf') format('truetype');
	font-weight: 700; font-style: italic; font-display: swap;
}

/* --- Read progress bar (in-shell, not fixed) ------------------------ */
.tcg-article-shell {
	position: relative;
	background: #FFFFFF;
	color: var(--tcg-navy-deep);
}

.tcg-read-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 4px;
	background: var(--tcg-gold);
	width: 0%;
	z-index: 1000;
	transition: width 0.1s linear;
	pointer-events: none;
}

/* When the WP admin bar is showing (admin-bar body class), drop the
   progress bar below it so it's not hidden behind the admin bar's
   z-index 99999. End users without admin bar see top: 0 unchanged. */
.admin-bar .tcg-read-progress {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .tcg-read-progress {
		top: 46px;
	}
}

/* --- Article hero (subtle navy band) -------------------------------- */
.tcg-article-hero {
	background: var(--tcg-navy-deep);
	padding: 4rem 0 3.6rem;
	color: var(--tcg-cream);
}

.tcg-article-hero-inner {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 3rem;
}

@media (max-width: 900px) {
	.tcg-article-hero { padding: 2.6rem 0 2.4rem; }
	.tcg-article-hero-inner { padding: 0 1.5rem; }
}

.tcg-article-hero .crumbs {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--tcg-font-sans);
	font-size: 0.64rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tcg-cream);
	margin-bottom: 2rem;
}

.tcg-article-hero .crumbs a {
	color: var(--tcg-cream);
	text-decoration: none;
	transition: var(--tcg-transition);
}

.tcg-article-hero .crumbs a:hover { color: var(--tcg-gold); }
.tcg-article-hero .crumbs .sep { opacity: 0.5; }

.tcg-article-hero .cat-label {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--tcg-font-sans);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--tcg-gold);
}

.tcg-article-hero .cat-label::before {
	content: "";
	display: block;
	width: 24px;
	height: 1px;
	background: var(--tcg-gold);
	opacity: 0.7;
}

.tcg-article-hero h1 {
	font-family: var(--tcg-font-serif);
	font-size: clamp(2.2rem, 4.4vw, 3.6rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--tcg-warm-white);
	margin: 1.4rem 0 0;
	text-wrap: pretty;
}

.tcg-article-hero h1 em {
	font-style: italic;
	color: var(--tcg-off-white);
	font-weight: 400;
}

.tcg-article-hero .dek {
	margin-top: 1.4rem;
	font-family: var(--tcg-font-serif);
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	font-weight: 400;
	font-style: italic;
	line-height: 1.55;
	color: var(--tcg-off-white);
	max-width: 780px;
}

.tcg-article-hero .meta-row {
	margin-top: 2.6rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--tcg-border-light);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.2rem;
	align-items: baseline;
}

.tcg-article-hero .meta-row .by {
	font-family: var(--tcg-font-sans);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--tcg-cream);
}

.tcg-article-hero .meta-row .by b {
	color: var(--tcg-warm-white);
	font-weight: 600;
}

.tcg-article-hero .meta-row .right {
	display: flex;
	gap: 1.6rem;
	align-items: center;
	font-family: var(--tcg-font-sans);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tcg-cream);
}

.tcg-article-hero .print-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0.55rem 1rem;
	border: 1px solid var(--tcg-border-light);
	border-radius: 2px;
	background: transparent;
	color: var(--tcg-cream);
	font: inherit;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: var(--tcg-transition);
}

.tcg-article-hero .print-btn:hover {
	border-color: var(--tcg-gold);
	color: var(--tcg-gold);
}

/* --- Article body --------------------------------------------------- */
.tcg-article-body-wrap {
	background: #FFFFFF;
	padding: 3.5rem 0 5rem;
}

.tcg-article-body-inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 3rem;
}

@media (max-width: 900px) {
	.tcg-article-body-wrap { padding: 2.4rem 0 3rem; }
	.tcg-article-body-inner { padding: 0 1.5rem; }
}

.tcg-article-body {
	font-family: var(--tcg-font-serif);
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--tcg-navy-deep);
}

.tcg-article-body > p { margin: 0 0 1.6rem; text-wrap: pretty; }

.tcg-article-body > p:first-of-type::first-letter {
	font-family: var(--tcg-font-serif);
	font-size: 4.2rem;
	font-weight: 400;
	float: left;
	line-height: 0.9;
	margin: 0.2rem 0.6rem 0 0;
	color: var(--tcg-gold);
}

/* Body paragraphs and top-level list items render in Montserrat at a
   slightly larger size than the serif default. Headings, blockquotes,
   pull quotes, tables, sidenotes, footnotes, figcaptions, signoff and
   the drop-cap pseudo-element all retain their explicit font-family
   declarations and are unaffected. Inline <em>, <strong>, <a> inside
   paragraphs inherit the new sans treatment. */
.tcg-article-body > p,
.tcg-article-body > ul > li,
.tcg-article-body > ol > li {
	font-family: var(--tcg-font-sans);
	font-size: 1.1875rem;
	line-height: 1.7;
}

.tcg-article-body h2 {
	font-family: var(--tcg-font-serif);
	font-size: 1.9rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--tcg-navy-deep);
	margin: 3.2rem 0 1.1rem;
	letter-spacing: -0.005em;
	border-left: 4px solid var(--tcg-gold);
	padding-left: 1rem;
}

.tcg-article-body h3 {
	font-family: var(--tcg-font-serif);
	font-size: 1.35rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--tcg-navy-deep);
	margin: 2.6rem 0 0.7rem;
}

.tcg-article-body h4 {
	font-family: var(--tcg-font-sans);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--tcg-gold);
	margin: 2.4rem 0 0.7rem;
}

.tcg-article-body a {
	color: var(--tcg-navy-deep);
	border-bottom: 1px solid var(--tcg-gold);
	text-decoration: none;
	transition: var(--tcg-transition);
}

.tcg-article-body a:hover { color: var(--tcg-gold); }

.tcg-article-body ul,
.tcg-article-body ol {
	margin: 0 0 1.8rem 1.6rem;
}

.tcg-article-body li { margin-bottom: 0.65rem; }

.tcg-article-body strong { font-weight: 600; color: var(--tcg-navy-deep); }
.tcg-article-body em { font-style: italic; }

/* Blockquote callout */
.tcg-article-body blockquote {
	margin: 2.4rem 0;
	padding: 1.6rem 1.8rem;
	background: var(--tcg-warm-bg);
	border-left: 3px solid var(--tcg-gold);
	border-radius: 0 2px 2px 0;
	font-family: var(--tcg-font-serif);
	font-size: 1.15rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1.55;
	color: var(--tcg-navy-deep);
}

.tcg-article-body blockquote footer,
.tcg-article-body blockquote cite {
	display: block;
	margin-top: 0.8rem;
	font-style: normal;
	font-family: var(--tcg-font-sans);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tcg-muted-navy);
}

/* Pull quote, opt-in via .pull-quote class */
.tcg-article-body .pull-quote {
	margin: 3rem 0;
	padding: 2rem 0;
	border-top: 1px solid rgba(13, 20, 36, 0.15);
	border-bottom: 1px solid rgba(13, 20, 36, 0.15);
	text-align: center;
}

.tcg-article-body .pull-quote q {
	display: block;
	quotes: none;
	font-family: var(--tcg-font-serif);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 400;
	font-style: italic;
	line-height: 1.3;
	color: var(--tcg-navy-deep);
}

.tcg-article-body .pull-quote q::before { content: "\201C"; color: var(--tcg-gold); font-style: normal; margin-right: 0.1em; }
.tcg-article-body .pull-quote q::after { content: "\201D"; color: var(--tcg-gold); font-style: normal; margin-left: 0.1em; }

.tcg-article-body .pull-quote cite {
	display: block;
	margin-top: 1rem;
	font-style: normal;
	font-family: var(--tcg-font-sans);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--tcg-gold);
}

/* Tables */
.tcg-article-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 2.4rem 0;
	font-family: var(--tcg-font-sans);
	font-size: 0.84rem;
	font-weight: 400;
	color: var(--tcg-navy-deep);
}

.tcg-article-body thead th {
	text-align: left;
	font-family: var(--tcg-font-sans);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tcg-gold);
	border-bottom: 1px solid var(--tcg-gold);
	padding: 0.8rem 0.8rem;
}

.tcg-article-body thead th:first-child,
.tcg-article-body tbody td:first-child { padding-left: 0; }

.tcg-article-body thead th:last-child,
.tcg-article-body tbody td:last-child {
	padding-right: 0;
	text-align: right;
}

.tcg-article-body tbody td {
	padding: 0.9rem 0.8rem;
	border-bottom: 1px solid rgba(13, 20, 36, 0.1);
	line-height: 1.5;
}

.tcg-article-body tbody tr:last-child td {
	border-bottom: 1px solid rgba(13, 20, 36, 0.25);
}

.tcg-article-body .num {
	font-family: ui-monospace, Menlo, monospace;
	font-size: 0.82rem;
}

.tcg-article-body .accent {
	color: var(--tcg-gold);
	font-weight: 500;
}

/* Inline figure */
.tcg-article-body figure,
.tcg-article-body .figure {
	margin: 2.6rem 0;
}

.tcg-article-body figure img,
.tcg-article-body .figure img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--tcg-border-dark);
}

.tcg-article-body figcaption {
	margin-top: 0.8rem;
	font-family: var(--tcg-font-sans);
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--tcg-muted-navy);
	line-height: 1.5;
}

.tcg-article-body figcaption b {
	font-family: var(--tcg-font-sans);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tcg-gold);
	margin-right: 0.7rem;
}

/* Sidenote ref + footnote list */
.tcg-article-body .sidenote-ref {
	color: var(--tcg-gold);
	font-family: ui-monospace, Menlo, monospace;
	font-size: 0.78em;
	vertical-align: super;
	line-height: 0;
	margin-left: 2px;
	border-bottom: 0;
	cursor: pointer;
}

.tcg-article-body .footnotes {
	margin-top: 4rem;
	padding-top: 1.6rem;
	border-top: 1px solid rgba(13, 20, 36, 0.15);
}

.tcg-article-body .footnotes h4 {
	margin-bottom: 1rem;
}

.tcg-article-body .footnotes ol {
	list-style: none;
	margin: 0;
	counter-reset: fn;
}

.tcg-article-body .footnotes li {
	counter-increment: fn;
	font-family: var(--tcg-font-sans);
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.7;
	color: var(--tcg-muted-navy);
	padding-left: 2rem;
	position: relative;
	margin-bottom: 0.7rem;
}

.tcg-article-body .footnotes li::before {
	content: counter(fn);
	position: absolute;
	left: 0;
	top: 0;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--tcg-gold);
}

/* Signoff */
.tcg-article-body .signoff {
	margin: 3.5rem 0 0;
	padding-top: 1.6rem;
	border-top: 1px solid rgba(13, 20, 36, 0.15);
}

.tcg-article-body .signoff .by-line {
	font-family: var(--tcg-font-sans);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--tcg-muted-navy);
}

.tcg-article-body .signoff .name {
	font-family: var(--tcg-font-serif);
	font-style: italic;
	font-size: 1.6rem;
	color: var(--tcg-navy-deep);
	margin-top: 0.4rem;
}

.tcg-article-body .signoff .title {
	font-family: var(--tcg-font-sans);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--tcg-muted-navy);
	margin-top: 0.3rem;
}

/* --- Related insights ----------------------------------------------- */
.tcg-related-wrap {
	background: var(--tcg-warm-bg);
	padding: 4.5rem 0 5rem;
	border-top: 1px solid var(--tcg-border-dark);
}

.tcg-related-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 3rem;
}

@media (max-width: 900px) {
	.tcg-related-wrap { padding: 3rem 0 3.5rem; }
	.tcg-related-inner { padding: 0 1.5rem; }
}

.tcg-related-label {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--tcg-font-sans);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--tcg-gold);
	margin-bottom: 1.8rem;
}

.tcg-related-label::before {
	content: "";
	display: block;
	width: 24px;
	height: 1px;
	background: var(--tcg-gold);
	opacity: 0.6;
}

.tcg-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--tcg-border-dark);
}

@media (max-width: 900px) {
	.tcg-related-grid { grid-template-columns: 1fr; }
}

.tcg-related-card {
	background: #FFFFFF;
	padding: 1.8rem 1.7rem;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	transition: var(--tcg-transition);
	text-decoration: none;
	color: inherit;
	position: relative;
}

.tcg-related-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--tcg-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: var(--tcg-transition);
}

.tcg-related-card:hover { background: #FDFCFA; }
.tcg-related-card:hover::before { transform: scaleX(1); }

.tcg-related-card .meta {
	display: flex;
	gap: 1rem;
	font-family: var(--tcg-font-sans);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.tcg-related-card .meta .cat { color: var(--tcg-gold); font-weight: 700; }
.tcg-related-card .meta .date { color: var(--tcg-muted-navy); }

.tcg-related-card h4 {
	font-family: var(--tcg-font-serif);
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--tcg-navy-deep);
	margin: 0;
}

.tcg-related-card .dek {
	font-family: var(--tcg-font-sans);
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--tcg-muted-navy);
}

/* =====================================================================
   MARGIN SIDENOTES

   Markup author places <aside class="tcg-sidenote">…</aside> directly
   in the article body, IMMEDIATELY BEFORE the paragraph that contains
   the <sup class="tcg-sidenote-ref">N</sup> inline reference.
   Each sidenote contains an optional <span class="tcg-sidenote-marker">
   §N</span> followed by the body text.

   Default behavior (< 1100px viewport): sidenote renders inline, in
   document flow, between paragraphs as a styled callout block.

   Wide viewport: the sidenote floats right with a negative margin-right,
   which visually places it in the right margin while leaving its layout
   footprint negative, so text flows past at full reading width without
   wrapping around it. Multiple sidenotes stack vertically via clear: right.

   The breakpoint is 1300px (raised from 1100px) because the reading
   column was bumped from 720px to 900px. With the wider column, a
   200px sidenote with 32px gap needs ~1132px of horizontal space
   minimum; 1300px gives a safe margin. Below 1300px, the sidenote
   falls back to the default inline-callout rendering.
   ===================================================================== */

/* Inline reference marker in the prose */
.tcg-article-body .tcg-sidenote-ref {
	font-family: ui-monospace, Menlo, monospace;
	font-size: 0.7em;
	vertical-align: super;
	line-height: 0;
	margin-left: 2px;
	color: var(--tcg-gold);
	cursor: pointer;
	text-decoration: none;
	border-bottom: 0;
}

/* Sidenote default = inline callout for narrow viewports */
.tcg-article-body .tcg-sidenote {
	display: block;
	font-family: var(--tcg-font-sans);
	font-size: 0.85rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--tcg-muted-navy);
	background: var(--tcg-warm-bg);
	border-left: 2px solid var(--tcg-gold);
	padding: 0.9rem 1.1rem;
	margin: 1.2rem 0 1.6rem;
	border-radius: 0 2px 2px 0;
}

.tcg-article-body .tcg-sidenote-marker {
	display: inline-block;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 0.78rem;
	font-style: normal;
	font-weight: 600;
	color: var(--tcg-gold);
	margin-right: 0.5rem;
}

/* Wide viewport: promote the sidenote to a true margin note via float */
@media (min-width: 1300px) {
	.tcg-article-body .tcg-sidenote {
		/* Float into right margin. width 200px + margin-right -232px
		   makes the effective layout footprint -32px, so subsequent
		   text flows past at full reading width without wrapping.
		   The float visually sits 32px outside the parent's right
		   content edge (in the page's right margin space). */
		float: right;
		clear: right;
		width: 200px;
		margin: 0.4rem -232px 1rem 1.5rem;
		/* Margin-note styling: drop the callout fill, keep gold rule */
		background: transparent;
		padding: 0 0 0 0.9rem;
		border-radius: 0;
		font-size: 0.82rem;
	}
}

/* =====================================================================
   MATURITY MATRIX TABLE
   Markup: <table class="tcg-maturity-matrix"> with a 4-column thead
   (Tier / Posture / Operating reality / Data & architecture) and a
   4-row tbody. Add class="accent" to the cell that should render in
   gold (e.g. <td class="accent">AI-Native</td>).

   Inherits the global .tcg-article-body table styling (gold uppercase
   header, gold rule under header, hairline rule between rows, .accent
   class for the highlighted cell). These overrides bump cell padding,
   restore left alignment to the last column (the global rule right-
   aligns it), and switch the first column (tier labels) to serif.
   ===================================================================== */

.tcg-article-body table.tcg-maturity-matrix th,
.tcg-article-body table.tcg-maturity-matrix td {
	padding: 1rem 1.25rem;
	text-align: left;
}

.tcg-article-body table.tcg-maturity-matrix tbody td:first-child {
	font-family: var(--tcg-font-serif);
	font-size: 1rem;
	font-weight: 400;
}

/* =====================================================================
   FULL-BLEED ARTICLE HERO

   GeneratePress's one-container layout applies .site-content { padding:
   40px; }, which insets the article shell, and therefore the navy hero,
   by 40px on all four sides and surrounds it with white: white gutters
   left and right, and a white strip between the branded header and the
   hero. GP exposes a .full-width-content body class that removes this
   via the Pages > Layout sidebar setting, but single posts have no such
   setting, so the child theme has to do it.

   Why the previous attempt did nothing: the selector was written
   `body.tcg-insights-article-page .one-container .site-content`, with a
   descendant combinator before .one-container. But GeneratePress puts
   one-container on the <body> element itself, not on a wrapper, so the
   selector asked for a .one-container descendant of body that is also an
   ancestor of .site-content. No such element exists and the rule matched
   nothing, which is why the !important never took effect and the margins
   persisted. Removing the space makes it a compound selector on body.

   Verified on production: hero goes to left 0 at full document width,
   the top strip closes, and no horizontal scrollbar appears.
   .tcg-article-hero-inner (max-width 1040px, centered) keeps the reading
   width unchanged.
   ===================================================================== */
body.tcg-insights-article-page.one-container .site-content {
	padding: 0 !important;
}

@media print {
	@page { margin: 0.75in; }

	body { padding-top: 0 !important; }

	.tcg-read-progress,
	.tcg-related-wrap,
	.s-header,
	.s-footer,
	.tcg-article-hero .print-btn { display: none !important; }

	.tcg-article-hero { background: #FFFFFF; color: var(--tcg-navy-deep); }
	.tcg-article-hero h1, .tcg-article-hero .dek, .tcg-article-hero .meta-row .by,
	.tcg-article-hero .meta-row .right, .tcg-article-hero .crumbs,
	.tcg-article-hero .crumbs a { color: var(--tcg-navy-deep); }
}