/*
Theme Name: TCG Blog
Theme URI: https://tokencapitalgroup.ai
Description: Token Capital Group child theme of GeneratePress. Houses the custom Insights system and brand styling for tokencapitalgroup.ai.
Author: Token Capital Group
Author URI: https://tokencapitalgroup.ai
Template: generatepress
Version: 0.4.4
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tcg-blog
*/

/* =====================================================================
   TOKENS (colors, type, spacing): shared by listing CSS and article.css
   ===================================================================== */
:root {
	--tcg-black: #07080F;
	--tcg-navy-deep: #0D1424;
	--tcg-navy: #111827;
	--tcg-navy-mid: #1A2540;
	--tcg-charcoal: #1E2433;
	--tcg-charcoal-lt: #272F42;

	--tcg-warm-white: #F5F0E8;
	--tcg-off-white: #DDD8CF;
	--tcg-cream: #C8C2B5;
	--tcg-muted: #6B7594;
	/* Lighter muted step for sentence-length copy on dark surfaces. The base
	   --tcg-muted measures 4.0:1 on the page navy and 3.4:1 on charcoal cards,
	   both under the 4.5:1 WCAG AA floor for body text. Keep --tcg-muted for
	   short meta labels; use this wherever the copy runs to multiple lines. */
	--tcg-muted-lt: #8A94B0;
	--tcg-muted-navy: #3A4A6B;
	--tcg-warm-bg: #F8F6F2;

	--tcg-gold: #C9A84C;
	--tcg-gold-lt: #DFC070;

	--tcg-border-dark: rgba(13, 20, 36, 0.08);
	--tcg-border-light: rgba(255, 255, 255, 0.08);

	--tcg-font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--tcg-font-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

	--tcg-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	--tcg-container-max: 1200px;

	/* Hero ornament layers, reproduced from the Home hero's SVG arcs and
	   .hero-grid so pages whose hero markup lives in page content can pick
	   them up from a pseudo-element. Geometry: top right pair centred 60px
	   outside the corner at r120 and r180 at 0.12 opacity, bottom left pair
	   80px outside at r100 and r180 at 0.07. Rings use a four-stop rgba fade
	   rather than the `transparent` keyword, which would interpolate through
	   transparent black and leave a gray fringe on the hairline. */
	--tcg-hero-arcs:
		radial-gradient(circle at calc(100% + 60px) -60px,
			rgba(244, 239, 230, 0) 119.6px, rgba(244, 239, 230, 0.12) 119.6px,
			rgba(244, 239, 230, 0.12) 120.4px, rgba(244, 239, 230, 0) 120.4px),
		radial-gradient(circle at calc(100% + 60px) -60px,
			rgba(244, 239, 230, 0) 179.6px, rgba(244, 239, 230, 0.12) 179.6px,
			rgba(244, 239, 230, 0.12) 180.4px, rgba(244, 239, 230, 0) 180.4px),
		radial-gradient(circle at -80px calc(100% + 80px),
			rgba(244, 239, 230, 0) 99.6px, rgba(244, 239, 230, 0.07) 99.6px,
			rgba(244, 239, 230, 0.07) 100.4px, rgba(244, 239, 230, 0) 100.4px),
		radial-gradient(circle at -80px calc(100% + 80px),
			rgba(244, 239, 230, 0) 179.6px, rgba(244, 239, 230, 0.07) 179.6px,
			rgba(244, 239, 230, 0.07) 180.4px, rgba(244, 239, 230, 0) 180.4px);

	--tcg-hero-grid:
		linear-gradient(rgba(255, 255, 255, 0.015) 1px, rgba(255, 255, 255, 0) 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, rgba(255, 255, 255, 0) 1px);
}

/* =====================================================================
   INSIGHTS LISTING: shared across home.php, category.php, author.php
   GeneratePress chrome handles header/footer; these styles live inside
   GeneratePress's main content container and adopt site type for body.
   ===================================================================== */

/* Article pages: white reading surface across body + all GP wrappers. */
body.tcg-insights-article-page,
body.tcg-insights-article-page .site,
body.tcg-insights-article-page #page,
body.tcg-insights-article-page .site-content,
body.tcg-insights-article-page .content-area,
body.tcg-insights-article-page .site-main,
body.tcg-insights-article-page .inside-article,
body.tcg-insights-article-page .separate-containers .inside-article,
body.tcg-insights-article-page .one-container .container {
	background-color: #FFFFFF;
}

body.tcg-insights-article-page .inside-article,
body.tcg-insights-article-page .separate-containers .inside-article {
	padding: 0;
}

/* Listing pages: dark navy edge to edge, continuous from below the GP
   header to above the GP footer. Gridline pattern is scoped to the hero
   section only (see .tcg-insights-dark .grid-bg below). */
body.tcg-insights-listing-page {
	background-color: var(--tcg-navy-deep);
	color: var(--tcg-cream);
}

body.tcg-insights-listing-page .site,
body.tcg-insights-listing-page #page,
body.tcg-insights-listing-page .site-content,
body.tcg-insights-listing-page .content-area,
body.tcg-insights-listing-page .site-main,
body.tcg-insights-listing-page .inside-article,
body.tcg-insights-listing-page .separate-containers .inside-article,
body.tcg-insights-listing-page .one-container .container {
	background-color: transparent;
}

body.tcg-insights-listing-page .inside-article,
body.tcg-insights-listing-page .separate-containers .inside-article {
	padding: 0;
}

.tcg-insights ::selection {
	background: rgba(201, 168, 76, 0.25);
}

.tcg-insights-container {
	max-width: var(--tcg-container-max);
	margin: 0 auto;
	padding: 0 3rem;
}

@media (max-width: 900px) {
	.tcg-insights-container { padding: 0 1.5rem; }
}

/* --- Dark masthead wrapper (full-bleed inside GP main) ---------------
   Body provides the navy + gridlines; this wrapper just adds a hero-
   scoped radial-gradient accent and full-bleed breakout from the GP
   content container. */
.tcg-insights-dark {
	position: relative;
	color: var(--tcg-cream);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 5rem 0 4rem;
	overflow: hidden;
}

.tcg-insights-dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 40% 50% at 85% 20%, rgba(201, 168, 76, 0.05), transparent 60%),
		radial-gradient(ellipse 60% 60% at 15% 80%, rgba(26, 37, 64, 0.6), transparent 70%);
	pointer-events: none;
}

.tcg-insights-dark .grid-bg {
	position: absolute;
	inset: 0;
	/* 0.015 matches the Home hero's .hero-grid exactly. Was 0.025, which read
	   roughly 50% hotter than the rest of the system. */
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
	background-size: 80px 80px;
	pointer-events: none;
	z-index: 0;
}

.tcg-insights-dark-inner {
	position: relative;
	z-index: 1;
	max-width: var(--tcg-container-max);
	margin: 0 auto;
	padding: 0 3rem;
}

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

.tcg-insights-dark ::selection { background: rgba(201, 168, 76, 0.25); color: var(--tcg-warm-white); }

/* --- Insights hero (home.php) ---------------------------------------- */
.tcg-insights-hero {
	padding: 1rem 0 2.4rem;
}

.tcg-insights-hero .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--tcg-font-sans);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--tcg-gold);
	margin-bottom: 1.4rem;
}

.tcg-insights-hero .eyebrow::before {
	content: "";
	display: block;
	width: 28px;
	height: 1px;
	background: var(--tcg-gold);
	opacity: 0.7;
}

.tcg-insights-hero h1 {
	font-family: var(--tcg-font-serif);
	font-size: clamp(2.6rem, 5.2vw, 4.4rem);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.01em;
	color: var(--tcg-warm-white);
	max-width: 920px;
	margin: 0;
}

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

.tcg-insights-hero .lede {
	max-width: 640px;
	margin-top: 1.5rem;
	font-family: var(--tcg-font-sans);
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.8;
	color: var(--tcg-cream);
}

/* --- Filter chips (sit on plain navy below the hero) ---------------- */
.tcg-insights-filters {
	margin: 3rem 0 3rem;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	flex-wrap: wrap;
}

.tcg-insights-filters .filter-label {
	font-family: var(--tcg-font-sans);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--tcg-muted);
	margin-right: 0.6rem;
}

.tcg-insights-filters .chip {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--tcg-border-light);
	color: var(--tcg-cream);
	font-family: var(--tcg-font-sans);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-radius: 2px;
	transition: var(--tcg-transition);
	background: transparent;
	text-decoration: none;
	line-height: 1;
}

.tcg-insights-filters .chip:hover {
	border-color: rgba(201, 168, 76, 0.5);
	color: var(--tcg-warm-white);
}

.tcg-insights-filters .chip.active {
	background: rgba(201, 168, 76, 0.12);
	border-color: var(--tcg-gold);
	color: var(--tcg-gold);
}

/* --- Featured (sticky post), dark variant -------------------------- */
.tcg-featured {
	display: block;
	background: var(--tcg-charcoal);
	border-right: 1px solid var(--tcg-border-light);
	border-bottom: 1px solid var(--tcg-border-light);
	border-left: 1px solid var(--tcg-border-light);
	margin: 0;
	position: relative;
	overflow: hidden;
	transition: var(--tcg-transition);
	text-decoration: none;
	color: inherit;
}

.tcg-featured:hover { background: var(--tcg-charcoal-lt); }

.tcg-featured-inner {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 0;
}

.tcg-featured-visual,
.tcg-featured-body {
	border-top: 2px solid var(--tcg-gold);
}

.tcg-featured-visual {
	position: relative;
	min-height: 420px;
	background: var(--tcg-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	border-right: 1px solid var(--tcg-border-light);
	overflow: hidden;
}

.tcg-featured-visual::before,
.tcg-featured-visual::after {
	content: "";
	position: absolute;
	width: 48px;
	height: 48px;
	border: 1px solid var(--tcg-gold);
	opacity: 0.85;
	z-index: 2;
}

.tcg-featured-visual::before { top: 20px; left: 20px; border-right: 0; border-bottom: 0; }
.tcg-featured-visual::after { bottom: 20px; right: 20px; border-left: 0; border-top: 0; }

.tcg-featured-visual svg.tcg-chart {
	width: 75%;
	height: auto;
	opacity: 0.92;
}

.tcg-featured-image {
	position: relative;
	display: block;
	max-width: calc(100% - 6rem);
	max-height: calc(100% - 6rem);
	width: auto;
	height: auto;
	object-fit: contain;
	z-index: 1;
}

.tcg-featured-body {
	padding: 3rem 2.8rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
}

.tcg-featured-body .eyebrow-row {
	display: flex;
	gap: 1.4rem;
	align-items: center;
}

.tcg-featured-body .cat {
	font-family: var(--tcg-font-sans);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--tcg-gold);
}

.tcg-featured-body .date {
	font-family: var(--tcg-font-sans);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tcg-muted);
}

.tcg-featured-body h2 {
	font-family: var(--tcg-font-serif);
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--tcg-warm-white);
	margin: 1.2rem 0 0;
}

.tcg-featured-body .dek {
	margin-top: 1.2rem;
	font-family: var(--tcg-font-sans);
	font-size: 0.9rem;
	font-weight: 300;
	line-height: 1.75;
	color: var(--tcg-cream);
	max-width: 46ch;
}

.tcg-featured-footer {
	padding-top: 1.4rem;
	border-top: 1px solid var(--tcg-border-light);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

.tcg-featured-footer .read {
	font-family: var(--tcg-font-sans);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tcg-muted);
}

.tcg-featured-body .read-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--tcg-font-sans);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tcg-gold);
	transition: var(--tcg-transition);
}

.tcg-featured-body .read-more .arrow { transition: var(--tcg-transition); }
.tcg-featured:hover .read-more .arrow { transform: translateX(4px); }

@media (max-width: 900px) {
	.tcg-featured-inner { grid-template-columns: 1fr; }
	.tcg-featured-visual { min-height: 240px; border-right: 0; border-bottom: 1px solid var(--tcg-border-dark); }
	.tcg-featured-body { padding: 2rem 1.6rem; }
}

/* --- Recent grid list header --------------------------------------- */
.tcg-list-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin: 4rem 0 2.2rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--tcg-border-dark);
}

body.tcg-insights-listing-page .tcg-list-header {
	border-bottom-color: var(--tcg-border-light);
}

.tcg-list-header .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-list-header .label::before {
	content: "";
	display: block;
	width: 24px;
	height: 1px;
	background: var(--tcg-gold);
	opacity: 0.6;
}

.tcg-list-header .count {
	font-family: ui-monospace, Menlo, monospace;
	font-size: 0.72rem;
	color: var(--tcg-muted-navy);
}

body.tcg-insights-listing-page .tcg-list-header .count {
	color: var(--tcg-muted);
}

/* --- Post grid (4-up), gold-bordered cards on dark navy ----------- */
.tcg-post-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 4rem;
}

@media (max-width: 1024px) {
	.tcg-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

.tcg-post-card {
	background: rgba(255, 255, 255, 0.03);
	border: 0.5px solid rgba(201, 168, 76, 0.25);
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: var(--tcg-transition);
	text-decoration: none;
	color: inherit;
}

.tcg-post-card:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--tcg-gold);
}

.tcg-post-card .cat {
	font-family: var(--tcg-font-sans);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--tcg-gold);
}

.tcg-post-card h3 {
	font-family: var(--tcg-font-serif);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--tcg-warm-white);
	margin: 0;
	min-height: 2.6em;
}

.tcg-post-card .date {
	font-family: var(--tcg-font-sans);
	font-size: 0.69rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tcg-cream);
	opacity: 0.7;
	margin-top: auto;
}

/* --- Pagination ---------------------------------------------------- */
.tcg-insights-pagination {
	margin: 2rem 0 4rem;
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	justify-content: center;
}

.tcg-insights-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.8rem;
	border: 1px solid var(--tcg-border-dark);
	font-family: var(--tcg-font-sans);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tcg-muted-navy);
	text-decoration: none;
	transition: var(--tcg-transition);
}

.tcg-insights-pagination .page-numbers.current {
	background: var(--tcg-navy-deep);
	border-color: var(--tcg-navy-deep);
	color: var(--tcg-warm-white);
}

.tcg-insights-pagination .page-numbers:hover:not(.current) {
	border-color: var(--tcg-gold);
	color: var(--tcg-gold);
}

body.tcg-insights-listing-page .tcg-insights-pagination .page-numbers {
	border-color: var(--tcg-border-light);
	color: var(--tcg-cream);
}

body.tcg-insights-listing-page .tcg-insights-pagination .page-numbers.current {
	background: rgba(201, 168, 76, 0.12);
	border-color: var(--tcg-gold);
	color: var(--tcg-gold);
}

/* =====================================================================
   CATEGORY & AUTHOR PAGES
   ===================================================================== */

.tcg-section-title-block {
	padding: 4rem 0 2.6rem;
}

.tcg-section-title-block .lbl {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--tcg-font-sans);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--tcg-gold);
}

.tcg-section-title-block .lbl::before {
	content: "";
	display: block;
	width: 28px;
	height: 1px;
	background: var(--tcg-gold);
	opacity: 0.6;
}

.tcg-section-title-block h1 {
	font-family: var(--tcg-font-serif);
	font-size: clamp(2.2rem, 4.2vw, 3.4rem);
	font-weight: 400;
	line-height: 1.1;
	color: var(--tcg-navy-deep);
	margin: 1.2rem 0 1.2rem;
}

.tcg-section-title-block h1 em {
	font-style: italic;
	color: var(--tcg-muted-navy);
	font-weight: 400;
}

.tcg-section-title-block .blurb {
	font-family: var(--tcg-font-sans);
	font-size: 0.92rem;
	font-weight: 300;
	line-height: 1.8;
	color: var(--tcg-muted-navy);
	max-width: 660px;
}

.tcg-section-title-block .meta-strip {
	margin-top: 2rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--tcg-border-dark);
	display: flex;
	gap: 2.4rem;
	flex-wrap: wrap;
}

.tcg-section-title-block .meta-strip > div { min-width: 110px; }

.tcg-section-title-block .meta-strip .dl {
	font-family: var(--tcg-font-sans);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tcg-gold);
}

.tcg-section-title-block .meta-strip .dv {
	font-family: var(--tcg-font-serif);
	font-size: 1.05rem;
	color: var(--tcg-navy-deep);
	margin-top: 4px;
}

/* --- Author block -------------------------------------------------- */
.tcg-author-block {
	padding: 4rem 0 2.6rem;
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 4rem;
	align-items: start;
}

@media (max-width: 900px) {
	.tcg-author-block { grid-template-columns: 1fr; gap: 2rem; padding: 2.4rem 0 1.6rem; }
}

.tcg-author-portrait {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--tcg-warm-bg);
	border: 1px solid var(--tcg-border-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.tcg-author-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tcg-author-portrait::before,
.tcg-author-portrait::after {
	content: "";
	position: absolute;
	width: 44px;
	height: 44px;
	border: 2px solid var(--tcg-gold);
	z-index: 2;
}

.tcg-author-portrait::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.tcg-author-portrait::after { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

.tcg-author-portrait .ph {
	font-family: var(--tcg-font-sans);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--tcg-muted-navy);
}

.tcg-author-bio .lbl {
	font-family: var(--tcg-font-sans);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--tcg-gold);
}

.tcg-author-bio h1 {
	font-family: var(--tcg-font-serif);
	font-size: clamp(2.2rem, 4vw, 3.2rem);
	font-weight: 400;
	line-height: 1.1;
	color: var(--tcg-navy-deep);
	margin: 1rem 0 0.6rem;
}

.tcg-author-bio .role {
	font-family: var(--tcg-font-sans);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--tcg-muted-navy);
}

.tcg-author-bio p {
	margin: 1.4rem 0 0;
	font-family: var(--tcg-font-sans);
	font-size: 0.9rem;
	font-weight: 300;
	line-height: 1.85;
	color: var(--tcg-muted-navy);
}

.tcg-author-bio .stats {
	margin-top: 2rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--tcg-border-dark);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.tcg-author-bio .stats .dl {
	font-family: var(--tcg-font-sans);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tcg-gold);
}

.tcg-author-bio .stats .dv {
	font-family: var(--tcg-font-serif);
	font-size: 1.6rem;
	font-weight: 300;
	color: var(--tcg-navy-deep);
	margin-top: 4px;
}

/* --- Archive list (used by category.php and author.php) ------------- */
.tcg-archive {
	border-top: 1px solid var(--tcg-border-dark);
	margin: 0 0 4rem;
}

.tcg-archive-row {
	display: grid;
	grid-template-columns: 120px 120px 1fr 160px 80px;
	gap: 2rem;
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--tcg-border-dark);
	align-items: baseline;
	transition: var(--tcg-transition);
	text-decoration: none;
	color: inherit;
}

.tcg-archive-row:hover {
	background: rgba(13, 20, 36, 0.02);
	padding-left: 12px;
}

.tcg-archive-row .r-date {
	font-family: ui-monospace, Menlo, monospace;
	font-size: 0.72rem;
	color: var(--tcg-muted-navy);
	letter-spacing: 0.04em;
}

.tcg-archive-row .r-cat {
	font-family: var(--tcg-font-sans);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tcg-gold);
}

.tcg-archive-row .r-title {
	font-family: var(--tcg-font-serif);
	font-size: 1.1rem;
	color: var(--tcg-navy-deep);
	line-height: 1.4;
}

.tcg-archive-row .r-author {
	font-family: var(--tcg-font-sans);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--tcg-muted-navy);
}

.tcg-archive-row .r-read {
	font-family: ui-monospace, Menlo, monospace;
	font-size: 0.68rem;
	color: var(--tcg-muted-navy);
	text-align: right;
}

@media (max-width: 900px) {
	.tcg-archive-row { grid-template-columns: 1fr; gap: 0.4rem; padding: 1.2rem 0; }
	.tcg-archive-row .r-read { text-align: left; }
}

/* --- Empty state ---------------------------------------------------- */
.tcg-empty-state {
	border-top: 1px solid var(--tcg-border-dark);
	padding: 4rem 0 6rem;
	max-width: 540px;
}

.tcg-empty-state .empty-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--tcg-font-sans);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--tcg-gold);
}

.tcg-empty-state .empty-eyebrow::before {
	content: "";
	display: block;
	width: 28px;
	height: 1px;
	background: var(--tcg-gold);
	opacity: 0.6;
}

.tcg-empty-state .empty-body {
	margin-top: 1.2rem;
	font-family: var(--tcg-font-serif);
	font-size: 1.15rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1.6;
	color: var(--tcg-muted-navy);
}

/* =====================================================================
   SITE-WIDE BRANDED CHROME: header + footer
   Hides GP's default header/footer site-wide. Branded header is hooked
   via wp_body_open; branded footer is rendered from footer.php.
   ===================================================================== */

/* Hide GP's default chrome on every page. */
.site-header,
header.site-header,
header#masthead,
.site-header.has-inline-mobile-toggle,
.site-info,
footer.site-info,
#colophon {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	overflow: hidden !important;
}

/* =====================================================================
   FIX 1: EDGE-TO-EDGE CONTAINER OVERRIDE
   GeneratePress's customizer caps .grid-container at 1600px, which
   leaves dark navy gutters on viewports wider than 1600px. Force the
   outer wrapper to 100% width on every page. Insights pages have their
   own inner .tcg-insights-container (max 1200px) so this widening only
   removes the gutter without affecting Insights layout.
   ===================================================================== */
.grid-container {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* (FIX 2 removed. The active menu item no longer gets a persistent gold
   underline or gold text. The gold underline now appears only on
   :hover, via the .tcg-site-nav a:hover::after rule above.) */

/* =====================================================================
   FIX 3: CATEGORY/AUTHOR ARCHIVE READABILITY ON DARK LISTING PAGES
   The .tcg-archive-row text colors were authored for the white-bg
   archive variant: r-title is --tcg-navy-deep (literally the same hex
   as the listing-page body bg, hence invisible), r-date / r-author /
   r-read are --tcg-muted-navy (barely visible on navy). These scoped
   overrides flip them to light tones whenever body has the
   tcg-insights-listing-page class. Also tightens the gap between the
   section-title-block and the first archive row.
   ===================================================================== */
body.tcg-insights-listing-page .tcg-archive {
	border-top-color: var(--tcg-border-light);
}

body.tcg-insights-listing-page .tcg-archive-row {
	border-bottom-color: var(--tcg-border-light);
}

body.tcg-insights-listing-page .tcg-archive-row .r-title  { color: var(--tcg-warm-white); }
body.tcg-insights-listing-page .tcg-archive-row .r-date   { color: var(--tcg-muted); }
body.tcg-insights-listing-page .tcg-archive-row .r-author { color: var(--tcg-cream); }
body.tcg-insights-listing-page .tcg-archive-row .r-read   { color: var(--tcg-muted); }

body.tcg-insights-listing-page .tcg-archive-row:hover {
	background: rgba(255, 255, 255, 0.03);
}

body.tcg-insights-listing-page .tcg-section-title-block {
	padding-bottom: 1.5rem;
}

/* =====================================================================
   PAGE-SPECIFIC OVERRIDES: CONTACT (page 79)
   The /contact page renders an inlined HTML mockup whose CSS is being
   shadowed by a child-theme rule cascading from an ancestor selector
   (no direct match found via grep, likely an .entry-content / article
   wrapper rule overriding text-align). These two scoped rules force the
   intended visual: a clearly-bordered Response Time card on the right
   sidebar, and a center-aligned bottom CTA section.
   ===================================================================== */

body.page-id-79 .response-note {
	background: var(--navy-deep) !important;
	border: 1px solid rgba(201, 168, 76, 0.3) !important;
	border-radius: 2px !important;
	padding: 1.5rem !important;
}

body.page-id-79 .contact-cta-bar,
body.page-id-79 .contact-cta-bar h2,
body.page-id-79 .contact-cta-bar p,
body.page-id-79 .contact-cta-bar .section-label,
body.page-id-79 .contact-cta-bar .container {
	text-align: center !important;
}

/* Right column distributes its content top-to-bottom so the LinkedIn
   block anchors the top and the Response Time card anchors the bottom
   of the (form-height) grid row. Empty space moves from below the card
   to between the blocks, reading as intentional spacing. */
body.page-id-79 .direct-contact {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	justify-content: center !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

/* Restore production CTA section padding (5rem 3rem desktop, 4rem 1.5rem
   mobile). Something in the child-theme cascade is shaving this on local. */
body.page-id-79 .contact-cta-bar {
	padding: 5rem 3rem !important;
}

@media (max-width: 900px) {
	body.page-id-79 .contact-cta-bar {
		padding: 4rem 1.5rem !important;
	}
}

/* =====================================================================
   HERO BACKGROUND STANDARDIZATION

   The /home hero (SECTION.hero in that page's content) is the canonical
   treatment and is left untouched. Every other hero is brought to it.
   The Home stack, read off production, is four layers:

     1. base            var(--tcg-navy-deep)
     2. glow (::before) radial 80% 60% at 50% 40%, rgba(22,36,71,0.9)
                        plus a gold breath 40% 40% at 90% 10% at 0.04
     3. gridline layer  crossed 1px lines at rgba(255,255,255,0.015),
                        80px pitch
     4. corner arcs     two concentric hairline rings top right at 0.12
                        opacity, two more bottom left at 0.07

   Where each page stands before this section:

     /about     .about-hero    has the grid and both arc SVGs already;
                               only the glow was off spec.
     /contact   .contact-hero  off-spec glow, no grid, no arcs.
     /insights  .tcg-insights-dark  off-spec glow, grid too hot (fixed at
                               source above), no arcs.

   About and Contact heroes live in page content, so the arcs and grid
   there cannot be added as markup from the theme. They are reproduced
   as gradient rings on a pseudo-element instead, which lands in the same
   place visually and stays entirely reversible from this file.

   Page scope uses the slug-based body class registered in functions.php
   rather than page-id-NNN, so these rules survive the local/production
   ID mismatch called out in TCG-SITE-CONTEXT.md.
   ===================================================================== */

/* --- Layer 2: the shared glow -------------------------------------- */
body.tcg-insights-listing-page .tcg-insights-dark::before,
body.tcg-page-contact .contact-hero::before,
body.page-id-79 .contact-hero::before,
body.tcg-page-about .about-hero::before,
body.page-id-112 .about-hero::before {
	background:
		radial-gradient(ellipse 80% 60% at 50% 40%, rgba(22, 36, 71, 0.9) 0%, rgba(22, 36, 71, 0) 70%),
		radial-gradient(ellipse 40% 40% at 90% 10%, rgba(201, 168, 76, 0.04) 0%, rgba(201, 168, 76, 0) 60%);
}

/* --- Layers 3 and 4: grid + arcs on the heroes that lack the markup --
   Rings are drawn as four-stop radial gradients rather than the keyword
   `transparent`, so the fade does not interpolate through transparent
   black and leave a gray fringe. Geometry mirrors the Home SVGs: the top
   right pair is centred 60px outside the corner at r120 and r180, the
   bottom left pair 80px outside at r100 and r180. */
body.tcg-page-contact .contact-hero,
body.page-id-79 .contact-hero {
	position: relative;
	overflow: hidden;
}

body.tcg-page-contact .contact-hero::after,
body.page-id-79 .contact-hero::after,
body.tcg-insights-listing-page .tcg-insights-dark::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image: var(--tcg-hero-arcs);
	background-repeat: no-repeat;
}

/* Contact has no .hero-grid element of its own, so its gridlines ride on
   the same pseudo-element, painted beneath the arcs. Insights already has
   a .grid-bg div (normalised to 0.015 at source), so it is not repeated. */
body.tcg-page-contact .contact-hero::after,
body.page-id-79 .contact-hero::after {
	background-image: var(--tcg-hero-arcs), var(--tcg-hero-grid);
	background-size: auto, auto, auto, auto, 80px 80px, 80px 80px;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
}

/* Keep hero copy above the ornament layer. */
body.tcg-page-contact .contact-hero-content,
body.page-id-79 .contact-hero-content {
	position: relative;
	z-index: 1;
}

/* --- Shared interior hero metrics ----------------------------------- */
/* One H1 size across interior pages. About and Insights already render
   70.4px; Contact rendered 60.8px. The clamp matches the Insights rule so
   the responsive ramp is identical rather than merely the desktop cap. */
body.tcg-page-contact .contact-hero h1,
body.page-id-79 .contact-hero h1 {
	font-size: clamp(2.6rem, 5.2vw, 4.4rem);
}

/* One band rhythm: 160px top, 80px bottom. About and Contact already sit
   here from their page content; Insights ran 80/64 on the outer section
   plus 16/38.4 on the inner hero, which made it read as a shorter, denser
   band than the other two. */
body.tcg-insights-listing-page .tcg-insights-dark {
	padding: 160px 0 80px;
}

body.tcg-insights-listing-page .tcg-insights-hero {
	padding: 0;
}

@media (max-width: 900px) {
	body.tcg-insights-listing-page .tcg-insights-dark {
		padding: 100px 0 56px;
	}
}

/* =====================================================================
   INSIGHTS HERO: center alignment + symmetric eyebrow dashes
   Bring the Insights landing-page hero in line with About/Contact:
   center the content (eyebrow + h1) horizontally, and add a matching
   right-side dash to the eyebrow via ::after to mirror the existing
   ::before. Scoped to the listing-page body class so it only affects
   /insights (the dark masthead is only rendered there).
   ===================================================================== */

body.tcg-insights-listing-page .tcg-insights-hero {
	text-align: center;
}

body.tcg-insights-listing-page .tcg-insights-hero h1 {
	margin-left: auto;
	margin-right: auto;
}

body.tcg-insights-listing-page .tcg-insights-hero .eyebrow::after {
	content: "";
	display: block;
	width: 28px;
	height: 1px;
	background: var(--tcg-gold);
	opacity: 0.7;
}

/* =====================================================================
   SITE-WIDE SCROLLBAR STYLING
   The branded scrollbar (6px thin, navy thumb on near-black track, gold
   on hover) is declared inline in the page content of /home, /about,
   and /contact, but NOT in the child theme. Theme-rendered routes
   (/insights, /category/*, /author/*, single posts) had no scrollbar
   rules and fell back to the browser default (translucent overlay on
   macOS, gray system bar on Windows). Replicating the rules here
   applies them everywhere, bringing theme routes in line with the
   page-content routes. The page-content routes still have their own
   inline copy, identical declarations, no conflict.
   ===================================================================== */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--tcg-black); }
::-webkit-scrollbar-thumb { background: var(--tcg-navy-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--tcg-gold); }

/* =====================================================================
   CATEGORY AND AUTHOR ARCHIVES ON THE DARK LISTING BACKGROUND

   Root cause of the "large blank gap above the article list" on
   /category/*: the section title block and author bio were authored for
   a white archive variant, so their headings are set in
   --tcg-navy-deep. On the dark listing pages that is the same hex as the
   page background, which renders the H1 invisible while it keeps its
   full layout footprint. The gap is a headline nobody can see, not
   leftover markup from the removed meta-strip block. The blurb, role,
   bio and stat values have the same problem one step less severe, sitting
   in --tcg-muted-navy against navy.

   FIX 3 above already did this for .tcg-archive-row. This does the rest.
   ===================================================================== */

body.tcg-insights-listing-page .tcg-section-title-block h1,
body.tcg-insights-listing-page .tcg-author-bio h1 {
	color: var(--tcg-warm-white);
}

body.tcg-insights-listing-page .tcg-section-title-block h1 em,
body.tcg-insights-listing-page .tcg-author-bio h1 em {
	color: var(--tcg-off-white);
}

body.tcg-insights-listing-page .tcg-section-title-block .blurb,
body.tcg-insights-listing-page .tcg-author-bio p,
body.tcg-insights-listing-page .tcg-author-bio .role {
	color: var(--tcg-muted-lt);
}

body.tcg-insights-listing-page .tcg-section-title-block .meta-strip,
body.tcg-insights-listing-page .tcg-author-bio .stats {
	border-top-color: var(--tcg-border-light);
}

body.tcg-insights-listing-page .tcg-section-title-block .meta-strip .dv,
body.tcg-insights-listing-page .tcg-author-bio .stats .dv {
	color: var(--tcg-warm-white);
}

body.tcg-insights-listing-page .tcg-author-portrait {
	background: var(--tcg-charcoal);
	border-color: var(--tcg-border-light);
}

body.tcg-insights-listing-page .tcg-author-portrait .ph {
	color: var(--tcg-muted-lt);
}

body.tcg-insights-listing-page .tcg-empty-state {
	border-top-color: var(--tcg-border-light);
}

body.tcg-insights-listing-page .tcg-empty-state .empty-body {
	color: var(--tcg-cream);
}

/* Archive masthead. category.php and author.php now wrap their title
   block in the same .tcg-insights-dark section /insights uses, so they
   inherit the standardised glow, grid and arcs. The title block's own
   4rem top padding would double up inside that band, so it is dropped. */
body.tcg-insights-listing-page .tcg-insights-dark .tcg-section-title-block,
body.tcg-insights-listing-page .tcg-insights-dark .tcg-author-block {
	padding-top: 0;
	padding-bottom: 0;
}

body.tcg-insights-listing-page .tcg-insights-dark .tcg-section-title-block h1 {
	margin-top: 1.2rem;
	margin-bottom: 0;
}

/* Archive rows sat a step smaller than the rest of the site: 0.72rem mono
   for date and read time against 1.1rem serif titles. Bring the row up so
   it reads as the same system as the Insights grid. */
body.tcg-insights-listing-page .tcg-archive-row {
	padding: 1.7rem 0;
}

body.tcg-insights-listing-page .tcg-archive-row .r-title {
	font-size: 1.28rem;
}

body.tcg-insights-listing-page .tcg-archive-row .r-date,
body.tcg-insights-listing-page .tcg-archive-row .r-read {
	font-size: 0.78rem;
}

body.tcg-insights-listing-page .tcg-archive-row .r-author {
	font-size: 0.74rem;
}

body.tcg-insights-listing-page .tcg-archive {
	margin-top: 2.5rem;
}

/* =====================================================================
   MUTED BODY COPY ON DARK SURFACES

   --tcg-muted measures 4.0:1 on the page navy and 3.4:1 on the charcoal
   cards, both below the 4.5:1 AA floor for body-size text. The token is
   fine for short meta labels and stays as-is there. These are the places
   it carries sentence-length copy, so they step up to --tcg-muted-lt.
   ===================================================================== */

/* Home: the What We Look For list. */
body.tcg-page-home .thesis-content p,
body.home .thesis-content p {
	color: var(--tcg-muted-lt);
}

/* Contact: audience cards and the form intro. */
body.tcg-page-contact .audience-card p,
body.tcg-page-contact .form-container > p,
body.page-id-79 .audience-card p,
body.page-id-79 .form-container > p {
	color: var(--tcg-muted-lt);
}

/* =====================================================================
   CONTACT INFO RAIL CARD HEADINGS

   The rail labels (Response Time, Confidentiality, Headquartered in
   Charlotte NC) rendered as bold 14px Montserrat, while the audience
   cards directly above use 22.4px Cormorant headings, so one page
   carried two card-heading treatments. Rather than introduce a third
   size, these adopt the gold small-caps eyebrow the site already uses
   everywhere it labels a block.
   ===================================================================== */

body.tcg-page-contact .response-note p strong,
body.page-id-79 .response-note p strong {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--tcg-font-sans);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tcg-gold);
}

/* =====================================================================
   CLOSING CTA BAND

   Home boxes the pre-footer CTA as a charcoal band with hairline rules
   top and bottom and a faint gold radial. About runs the same
   .cta-section class on flat navy with no rules, Contact runs
   .contact-cta-bar the same way, and Insights had no CTA at all. Home's
   treatment becomes the single one. The Insights band is added in
   home.php and picks these rules up through .tcg-cta-band.
   ===================================================================== */

body.tcg-page-about .cta-section,
body.page-id-112 .cta-section,
body.tcg-page-contact .contact-cta-bar,
body.page-id-79 .contact-cta-bar,
.tcg-cta-band {
	background: var(--tcg-charcoal);
	border-top: 1px solid var(--tcg-border-light);
	border-bottom: 1px solid var(--tcg-border-light);
	position: relative;
	overflow: hidden;
}

body.tcg-page-about .cta-section::before,
body.page-id-112 .cta-section::before,
body.tcg-page-contact .contact-cta-bar::before,
body.page-id-79 .contact-cta-bar::before,
.tcg-cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(201, 168, 76, 0.05) 0%, rgba(201, 168, 76, 0) 70%);
}

/* --- Insights closing band ------------------------------------------ */
.tcg-cta-band {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 6rem 3rem;
	text-align: center;
}

.tcg-cta-band-inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
}

.tcg-cta-band .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-cta-band .label::before,
.tcg-cta-band .label::after {
	content: "";
	display: block;
	width: 24px;
	height: 1px;
	background: var(--tcg-gold);
	opacity: 0.6;
}

.tcg-cta-band h2 {
	font-family: var(--tcg-font-serif);
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--tcg-warm-white);
	margin: 1.4rem 0 0;
}

.tcg-cta-band p {
	margin: 1.2rem auto 0;
	max-width: 46rem;
	font-family: var(--tcg-font-sans);
	font-size: 0.9rem;
	font-weight: 300;
	line-height: 1.8;
	color: var(--tcg-muted-lt);
}

.tcg-cta-band-actions {
	margin-top: 2.4rem;
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.tcg-cta-band-actions a {
	display: inline-flex;
	align-items: center;
	padding: 0.85rem 2rem;
	font-family: var(--tcg-font-sans);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 2px;
	transition: var(--tcg-transition);
}

.tcg-cta-band-actions .primary {
	background: linear-gradient(135deg, var(--tcg-gold), var(--tcg-gold-lt));
	color: var(--tcg-navy-deep);
	border: 1px solid transparent;
}

.tcg-cta-band-actions .primary:hover {
	filter: brightness(1.08);
}

.tcg-cta-band-actions .secondary {
	border: 1px solid rgba(245, 240, 232, 0.3);
	color: var(--tcg-cream);
}

.tcg-cta-band-actions .secondary:hover {
	border-color: var(--tcg-gold);
	color: var(--tcg-gold);
}

@media (max-width: 900px) {
	.tcg-cta-band { padding: 4rem 1.5rem; }
}