/**
 * Civic Grey Skin (CPDC Logo-Aligned)
 *
 * Government/institutional credibility. Neutral grey workspace with CPDC
 * brand color punctuation (magenta arc + gold underline from logo).
 * Charcoal ONLY in footer + Tides of Debt section + documentary.
 *
 * Palette (sampled from CPDC logo):
 *   Page bg       #F4F4F5 (Zinc-100)
 *   Hero bg       #FFFFFF (white — framed by magenta/gold accent bars)
 *   Action bg     #EC008C (Magenta from logo arc — 5.6:1 on white ✓ AA UI)
 *   Link          #BE185D (Pink-700 — ~7.0:1 on white ✓ AA)
 *   Gold accent   #F9A825 (from logo underline — use as bg/accent only)
 *   Charcoal      #1F1F23 (documentary + footer + Tides of Debt ONLY)
 *   Card bg       #FFFFFF
 *   Card text     #18181B (Zinc-900)
 *
 * @package CPDC_Sovereign_Debt_Hub
 * @since 0.3.0
 */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

.skin-civic-grey {
	/* --- Existing --cc-* tokens --- */
	--cc-deep:        #1F1F23;   /* Charcoal — footer/drama sections ONLY */
	--cc-mid:         #3F3F46;   /* Zinc-700 */
	--cc-accent:      #EC008C;   /* Magenta from CPDC logo — hero highlights */
	--cc-highlight:   #F9A825;   /* Gold from logo underline — callouts, pills, bars */
	--cc-warning:     #DC2626;   /* Red-600 */
	--cc-text:        #FAFAFA;   /* Zinc-50 — text on charcoal */
	--cc-dim:         #D4D4D8;   /* Zinc-300 — secondary text on charcoal */

	/* Borders */
	--cc-border-subtle: rgba(24, 24, 27, 0.06);
	--cc-border-medium: rgba(24, 24, 27, 0.10);
	--cc-border-strong: rgba(24, 24, 27, 0.18);

	/* Typography */
	--cc-font-display: 'DM Serif Display', Georgia, serif;
	--cc-font-main:    'Inter', 'Helvetica Neue', sans-serif;
	--cc-font-mono:    'Courier New', Courier, monospace;

	/* Border Radius */
	--cc-radius-sm:   6px;
	--cc-radius-md:   10px;
	--cc-radius-lg:   16px;
	--cc-radius-pill: 999px;

	/* Transitions */
	--cc-transition-flow: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--cc-transition-slow: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

	/* Spacing */
	--cc-space-xs:  0.5rem;
	--cc-space-sm:  1rem;
	--cc-space-md:  1.5rem;
	--cc-space-lg:  2rem;
	--cc-space-xl:  3rem;
	--cc-space-2xl: 4rem;

	/* Card / light containers */
	--cc-card-bg:             #FFFFFF;
	--cc-card-border:         rgba(24, 24, 27, 0.10);
	--cc-card-shadow:         0 1px 4px rgba(0, 0, 0, 0.08);
	--cc-card-text:           #18181B;   /* Zinc-900 — 16:1 on white ✓ AA */
	--cc-card-text-secondary: #52525B;   /* Zinc-600 — 7.2:1 on white ✓ AA */
	--cc-card-text-muted:     #71717A;   /* Zinc-500 — 4.6:1 on white ✓ AA (borderline) */
	--cc-card-inner-bg:       #F4F4F5;   /* Zinc-100 */

	/* --- New semantic tokens --- */
	--brand-page-bg:     #F4F4F5;   /* Zinc-100 — neutral grey, no temperature */
	--brand-hero-bg:     #FFFFFF;   /* Heroes are white; accent bars provide punctuation */
	--brand-hero-text:   #18181B;   /* Zinc-900 — trivially passes AA on white */
	--brand-action-bg:   #EC008C;   /* Magenta — 5.6:1 UI contrast on white ✓ AA */
	--brand-action-rgb:  236, 0, 140;   /* RGB channels of --brand-action-bg, for rgba() alpha variants */
	--brand-action-text: #FFFFFF;
	--brand-link:        #BE185D;   /* Pink-700 — ~7.0:1 on white ✓ AA */
	--brand-link-hover:  #9D174D;   /* Pink-800 */
	--brand-accent-gold:       #F9A825;   /* Gold — buttons + accents. Dark text only. */
	--brand-accent-gold-hover: #D97706;   /* Amber-600 — darker gold for button hover */
	--brand-stat-amber:        #B45309;   /* Amber-700 — ~5.5:1 on white ✓ AA — warm stat values */

	/* Charcoal drama tokens — ONLY for documentary + Tides of Debt + footer */
	--brand-drama-bg:     #1F1F23;
	--brand-drama-text:   #FAFAFA;   /* 14.7:1 on charcoal ✓ AA */
	--brand-drama-accent: #F9A825;   /* Gold on charcoal — 3.5:1 ✓ AA UI */
}

/* ==========================================================================
   2. GLOBAL — Light page background
   ========================================================================== */

.skin-civic-grey {
	background-color: var(--brand-page-bg);
	color: var(--cc-card-text);
	font-family: var(--cc-font-main);
}

.skin-civic-grey::before { content: none; }
.skin-civic-grey #main-content { background-color: transparent; }

/* Focus states — magenta ring */
.skin-civic-grey :focus { outline: 2px solid var(--brand-action-bg); outline-offset: 2px; }
.skin-civic-grey :focus:not(:focus-visible) { outline: none; }
.skin-civic-grey :focus-visible { outline: 2px solid var(--brand-action-bg); outline-offset: 2px; }

/* ==========================================================================
   3. LINKS
   ========================================================================== */

.skin-civic-grey a { color: var(--brand-link); transition: color var(--cc-transition-flow); }
.skin-civic-grey a:hover { color: var(--brand-link-hover); }

/* ==========================================================================
   4. HEADINGS
   ========================================================================== */

.skin-civic-grey :where(h1, h2, h3, h4, h5, h6) {
	color: var(--cc-card-text);
	font-family: var(--cc-font-display);
	font-weight: 400;
	letter-spacing: -0.01em;
}
.skin-civic-grey p,
.skin-civic-grey .card__excerpt,
.skin-civic-grey .home-explore__tile-desc { color: var(--cc-card-text-secondary); }

/* ==========================================================================
   5. SITE HEADER — White, clean institutional look
   ========================================================================== */

.skin-civic-grey .site-header {
	background-color: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 3px solid var(--brand-action-bg);   /* magenta top-bar fingerprint */
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.skin-civic-grey .site-header__logo { color: var(--cc-card-text); }
.skin-civic-grey .site-header__logo-img {
	filter: none;
	opacity: 1;
}
.skin-civic-grey .site-header__logo-icon { border-color: var(--brand-action-bg); color: var(--brand-action-bg); }
.skin-civic-grey .site-header__logo-text { color: var(--cc-card-text); }
.skin-civic-grey .site-header__menu .menu-item a {
	color: var(--cc-card-text);
	font-family: var(--cc-font-main);
	text-transform: none;
	font-size: 0.85rem;
	font-weight: 500;
	transition: color var(--cc-transition-flow);
}
.skin-civic-grey .site-header__menu .menu-item a:hover,
.skin-civic-grey .site-header__menu .menu-item.current-menu-item a,
.skin-civic-grey .site-header__menu .menu-item.current_page_item a { color: var(--brand-link); }
.skin-civic-grey .site-header__cta {
	background: var(--brand-accent-gold);
	border-color: var(--brand-accent-gold);
	color: var(--cc-card-text);
	border-radius: var(--cc-radius-pill);
	font-weight: 600;
}
.skin-civic-grey .site-header__cta:hover {
	background: var(--brand-accent-gold-hover);
	border-color: var(--brand-accent-gold-hover);
	color: var(--cc-card-text);
}

/* ==========================================================================
   6. SITE FOOTER — Charcoal (allowed)
   ========================================================================== */

.skin-civic-grey .site-footer {
	background: linear-gradient(180deg, #1F1F23 0%, #161618 50%, #0D0D0F 100%);
	border-top: 3px solid var(--brand-action-bg);
}
.skin-civic-grey .site-footer::after {
	content: '';
	display: block;
	height: 2px;
	background: var(--brand-accent-gold);
	margin-top: -2px;
	/* gold rule immediately below the magenta top bar */
}
.skin-civic-grey .site-footer__brand { color: var(--brand-drama-text); }
.skin-civic-grey .site-footer__brand-icon { border-color: var(--brand-action-bg); color: var(--brand-action-bg); }
.skin-civic-grey .site-footer__brand-name { color: var(--brand-drama-text); }
.skin-civic-grey .site-footer__tagline { color: var(--cc-dim); }
.skin-civic-grey .site-footer__heading {
	color: var(--brand-accent-gold);
	font-family: var(--cc-font-main);
	text-transform: uppercase;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
}
.skin-civic-grey .site-footer__heading::before { content: none; }
.skin-civic-grey .site-footer__links a { color: var(--cc-dim); }
.skin-civic-grey .site-footer__links a:hover { color: var(--brand-accent-gold); }
.skin-civic-grey .site-footer__social-link { border: 1px solid rgba(249,168,37,0.25); color: var(--cc-dim); border-radius: var(--cc-radius-pill); }
.skin-civic-grey .site-footer__social-link:hover { background-color: var(--brand-action-bg); border-color: var(--brand-action-bg); color: #FFFFFF; }
.skin-civic-grey .site-footer__bottom { border-top: 1px solid rgba(249,168,37,0.12); }
.skin-civic-grey .site-footer__copyright { color: var(--cc-dim); }
.skin-civic-grey .site-footer__legal a { color: var(--cc-dim); }
.skin-civic-grey .site-footer__legal a:hover { color: var(--brand-accent-gold); }

/* ==========================================================================
   7. HERO SECTIONS — White with magenta accent bar + gold rule
   ========================================================================== */

/* Hero sections — accent bars define Civic Grey character.
   Background images show through a subtle white overlay (::before pseudo).
   Sections with no image asset will fall back to white gracefully. */
.skin-civic-grey .home-hero,
.skin-civic-grey .about-hero,
.skin-civic-grey .country-hero,
.skin-civic-grey .data-hero,
.skin-civic-grey .resource-header,
.skin-civic-grey .news-header,
.skin-civic-grey .archive-header,
.skin-civic-grey .countries-header,
.skin-civic-grey .policy-header {
	background-color: transparent;  /* let base CSS image show through */
	border-top: 6px solid var(--brand-action-bg);   /* magenta bar */
	position: relative;
	overflow: hidden;
}

.skin-civic-grey .about-hero {
	background-image: url('../../images/heroes/about-hero.jpg');
	background-size: cover;
	background-position: center;
}

.skin-civic-grey .data-hero {
	background-image: url('../../images/heroes/data-explorer-hero.jpg');
	background-size: cover;
	background-position: center;
}

.skin-civic-grey .resource-header {
	background-image: url('../../images/heroes/resource-library-hero.jpg');
	background-size: cover;
	background-position: center;
}

/* Dark gradient scrim — Caribbean imagery shines through, light text reads on top */
/* Lighter scrim for home + country heroes */
.skin-civic-grey .home-hero::before,
.skin-civic-grey .country-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15,15,20,0.30) 0%, rgba(15,15,20,0.55) 100%);
	z-index: 0;
	pointer-events: none;
}
/* Heavier scrim for data/resource/archive/countries/policy heroes */
.skin-civic-grey .about-hero::before,
.skin-civic-grey .data-hero::before,
.skin-civic-grey .resource-header::before,
.skin-civic-grey .news-header::before,
.skin-civic-grey .archive-header::before,
.skin-civic-grey .countries-header::before,
.skin-civic-grey .policy-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15,15,20,0.45) 0%, rgba(15,15,20,0.70) 100%);
	z-index: 0;
	pointer-events: none;
}
/* Ensure hero content renders above the overlay */
.skin-civic-grey .home-hero > *,
.skin-civic-grey .about-hero > *,
.skin-civic-grey .country-hero > *,
.skin-civic-grey .data-hero > *,
.skin-civic-grey .resource-header > *,
.skin-civic-grey .news-header > *,
.skin-civic-grey .archive-header > *,
.skin-civic-grey .countries-header > *,
.skin-civic-grey .policy-header > * {
	position: relative;
	z-index: 1;
}

/* Gold rule below the magenta bar */
.skin-civic-grey .home-hero::after,
.skin-civic-grey .about-hero::after,
.skin-civic-grey .country-hero::after,
.skin-civic-grey .data-hero::after,
.skin-civic-grey .resource-header::after,
.skin-civic-grey .news-header::after,
.skin-civic-grey .archive-header::after,
.skin-civic-grey .countries-header::after,
.skin-civic-grey .policy-header::after {
	content: "";
	display: block;
	position: absolute;
	top: 6px;   /* immediately below the 6px magenta bar */
	left: 0;
	right: 0;
	height: 2px;
	background: var(--brand-accent-gold);
	z-index: 2;
}

/* Home hero text — white on dark scrim */
.skin-civic-grey .home-hero__title {
	color: #FFFFFF;
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: clamp(2.4rem, 5.6vw, 6.4rem);
	letter-spacing: -0.02em;
	line-height: 0.95;
}
.skin-civic-grey .home-hero__title-outline { color: var(--brand-accent-gold); }
.skin-civic-grey .home-hero__subtitle { color: rgba(255,255,255,0.85); }

/* Home hero image restore — handled by hero group rule above */

/* Country hero */
.skin-civic-grey .country-hero { border-bottom: 1px solid var(--cc-border-medium); }
.skin-civic-grey .country-hero__name { color: #FFFFFF; font-family: var(--cc-font-display); }
.skin-civic-grey .country-hero__breadcrumb,
.skin-civic-grey .country-hero__breadcrumb a { color: rgba(255,255,255,0.85); }
.skin-civic-grey .country-hero__breadcrumb a:hover { color: var(--brand-link); }
.skin-civic-grey .country-hero__meta { color: rgba(255,255,255,0.75); }

/* About hero */
.skin-civic-grey .about-hero__title { color: #FFFFFF; font-family: var(--cc-font-display); }
.skin-civic-grey .about-hero__breadcrumb,
.skin-civic-grey .about-hero__breadcrumb a { color: rgba(255,255,255,0.85); }

/* Data hero */
.skin-civic-grey .data-hero__title { color: #FFFFFF; font-family: var(--cc-font-display); }
.skin-civic-grey .data-hero__description { color: rgba(255,255,255,0.85); }

/* Resource header */
.skin-civic-grey .resource-header__title { color: #FFFFFF; font-family: var(--cc-font-display); }
.skin-civic-grey .resource-header__subtitle { color: rgba(255,255,255,0.85); }
.skin-civic-grey .resource-header__eyebrow { color: var(--brand-link); }

/* News hero */
.skin-civic-grey .news-header__title { color: #FFFFFF; font-family: var(--cc-font-display); }
.skin-civic-grey .news-header__subtitle { color: rgba(255,255,255,0.85); }
.skin-civic-grey .news-header__breadcrumb,
.skin-civic-grey .news-header__breadcrumb a { color: rgba(255,255,255,0.85); }
.skin-civic-grey .news-header__breadcrumb a:hover { color: var(--brand-accent-gold); text-decoration: none; }

/* Archive / countries / policy headers */
.skin-civic-grey .archive-title,
.skin-civic-grey .countries-header__title,
.skin-civic-grey .policy-header__title { color: #FFFFFF; font-family: var(--cc-font-display); }
.skin-civic-grey .archive-description,
.skin-civic-grey .countries-header__subtitle,
.skin-civic-grey .policy-header__subtitle { color: rgba(255,255,255,0.85); }
.skin-civic-grey .policy-header__eyebrow { color: var(--brand-link); }

/* ==========================================================================
   8. TIDES OF DEBT SECTION — Charcoal (allowed exception on homepage)
   The existing ocean-currents.css uses .home-documentary for this block.
   ========================================================================== */

.skin-civic-grey .home-documentary {
	background-color: var(--brand-drama-bg);
}
.skin-civic-grey .home-documentary__bg {
	background-color: var(--brand-drama-bg) !important;
}
.skin-civic-grey .home-documentary__overlay {
	background: linear-gradient(to right, rgba(31,31,35,0.75) 0%, rgba(31,31,35,0.45) 50%, rgba(31,31,35,0.25) 100%);
}
.skin-civic-grey .home-documentary__title { color: var(--brand-drama-text); font-family: var(--cc-font-display); }
.skin-civic-grey .home-documentary__description { color: rgba(250, 250, 250, 0.85); }

/* ==========================================================================
   9. BUTTONS — Gold primary, charcoal text
   ========================================================================== */

.skin-civic-grey .btn,
.skin-civic-grey .home-hero__cta,
.skin-civic-grey .home-action__card-cta {
	background: transparent;
	border: 1px solid var(--brand-accent-gold);
	color: var(--cc-card-text);
	font-family: var(--cc-font-main);
	font-weight: 600;
	border-radius: var(--cc-radius-pill);
	padding: 0.75rem 1.75rem;
	transition: all var(--cc-transition-flow);
}
.skin-civic-grey .btn:hover,
.skin-civic-grey .home-hero__cta:hover {
	background: var(--brand-accent-gold);
	border-color: var(--brand-accent-gold);
	color: var(--cc-card-text);
}
.skin-civic-grey .btn--primary,
.skin-civic-grey .home-hero__cta--primary {
	background: var(--brand-accent-gold);
	border-color: var(--brand-accent-gold);
	color: var(--cc-card-text);
}
.skin-civic-grey .btn--primary:hover,
.skin-civic-grey .home-hero__cta--primary:hover {
	background: var(--brand-accent-gold-hover);
	border-color: var(--brand-accent-gold-hover);
	color: var(--cc-card-text);
	box-shadow: 0 4px 20px rgba(217, 119, 6, 0.25);
}

.skin-civic-grey .home-hero__cta--secondary {
	color: rgba(255,255,255,0.88);
}

/* Buttons on dark action section */
.skin-civic-grey .home-documentary__cta { border-color: var(--brand-accent-gold); color: var(--brand-drama-text); }
.skin-civic-grey .home-documentary__cta:hover { background: var(--brand-accent-gold); color: var(--brand-drama-bg); }

/* Policy / support buttons */
.skin-civic-grey .policy-header__cta-btn--primary { background: var(--brand-accent-gold); border-color: var(--brand-accent-gold); color: var(--cc-card-text); }
.skin-civic-grey .policy-header__cta-btn--primary:hover { background: var(--brand-accent-gold-hover); border-color: var(--brand-accent-gold-hover); color: var(--cc-card-text); }
.skin-civic-grey .policy-single__support-btn { background: var(--brand-accent-gold); border-color: var(--brand-accent-gold); color: var(--cc-card-text); }
.skin-civic-grey .policy-single__support-btn:hover { background: var(--brand-accent-gold-hover); border-color: var(--brand-accent-gold-hover); color: var(--cc-card-text); }

/* ==========================================================================
   10. CHIPS / FILTER PILLS
   ========================================================================== */

.skin-civic-grey .chip {
	background: rgba(var(--brand-action-rgb), 0.06);
	border: 1px solid var(--cc-border-medium);
	color: var(--brand-link);
	border-radius: var(--cc-radius-pill);
}
.skin-civic-grey a.chip:hover,
.skin-civic-grey button.chip:hover { background: rgba(var(--brand-action-rgb), 0.12); border-color: var(--brand-action-bg); color: var(--brand-action-bg); }
.skin-civic-grey .chip--active { background: var(--cc-card-text); border-color: var(--cc-card-text); color: #FFFFFF; }  /* charcoal fill — magenta demoted to focus/structural only */

/* ==========================================================================
   11. CARDS
   ========================================================================== */

.skin-civic-grey .card {
	background: var(--cc-card-bg);
	border: 1px solid var(--cc-card-border);
	border-radius: var(--cc-radius-md);
	box-shadow: var(--cc-card-shadow);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.skin-civic-grey .card:hover { border-color: rgba(var(--brand-action-rgb), 0.15); box-shadow: 0 8px 32px rgba(0,0,0,0.08); transform: translateY(-2px); }
.skin-civic-grey .card__title { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .card__link { color: var(--cc-card-text); }
.skin-civic-grey .card__link:hover { color: var(--brand-link); }
.skin-civic-grey .card__excerpt { color: var(--cc-card-text-secondary); }
.skin-civic-grey .card__footer { border-top: 1px solid var(--cc-border-medium); }

/* ==========================================================================
   12. HOME SECTIONS
   ========================================================================== */

.skin-civic-grey .home-policies {
	background-color: #FFFFFF;
	border-top: none;
	padding-block: var(--cc-space-2xl);
}
.skin-civic-grey .home-policies__title { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .home-policies__eyebrow { color: var(--brand-link); }
.skin-civic-grey .home-policies__view-all { color: var(--brand-link); font-weight: 600; }
.skin-civic-grey .home-policies__card {
	background: #FFFFFF;
	border: 1px solid rgba(24,24,27,0.10);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.skin-civic-grey .home-policies__card::after {
	background: linear-gradient(90deg, var(--brand-action-bg), var(--brand-accent-gold));
}
.skin-civic-grey .home-policies__card:hover { border-color: rgba(var(--brand-action-rgb), 0.2); }
.skin-civic-grey .home-policies__card-title { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .home-policies__card-excerpt { color: var(--cc-card-text-secondary); }
.skin-civic-grey .home-policies__card-link { color: var(--brand-link); }
.skin-civic-grey .home-policies__card-theme { color: var(--brand-link); }
.skin-civic-grey .home-policies__card-meta { border-color: rgba(24,24,27,0.10); }

/* Stats section */
.skin-civic-grey .home-stats {
	background: linear-gradient(135deg, rgba(249,168,37,0.05) 0%, rgba(var(--brand-action-rgb), 0.03) 100%);
	border-top: 1px solid var(--cc-border-subtle);
}
.skin-civic-grey .home-stats__box { background: rgba(249,168,37,0.05); border: 1px solid rgba(249,168,37,0.15); border-radius: var(--cc-radius-lg); }
.skin-civic-grey .home-stats__title { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .home-stats__hook { color: var(--cc-card-text-secondary); font-family: var(--cc-font-display); }
.skin-civic-grey .home-stats__description { color: var(--cc-card-text-secondary); }
.skin-civic-grey .home-stats__card {
	background-color: transparent;
	border-left: none;
	border-bottom: 3px solid var(--brand-action-bg);   /* magenta bottom border on stat cards */
}
.skin-civic-grey .home-stats__value { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .home-stats__label { color: var(--cc-card-text-secondary); }

/* Resources section */
.skin-civic-grey .home-resources { background: rgba(244,244,245,0.7); border-top: 1px solid var(--cc-border-subtle); }
.skin-civic-grey .home-resources__title { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .home-resources__view-all { color: var(--brand-link); font-weight: 600; }
.skin-civic-grey .home-resources__card { border: 1px solid var(--cc-card-border); border-radius: var(--cc-radius-md); }
.skin-civic-grey .home-resources__card:hover { border-color: rgba(var(--brand-action-rgb), 0.15); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.skin-civic-grey .home-resources__card-topic { color: var(--brand-link); }
.skin-civic-grey .home-resources__card-title { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .home-resources__card-overlay {
	background: linear-gradient(to bottom, transparent 15%, rgba(31,31,35,0.55) 45%, rgba(31,31,35,0.88) 100%);
}

/* Explore section */
.skin-civic-grey .home-explore { background-color: var(--brand-page-bg); }
.skin-civic-grey .home-explore__container { background: rgba(var(--brand-action-rgb), 0.02); border-top: 1px solid var(--cc-border-medium); }
.skin-civic-grey .home-explore__hook { color: var(--brand-link); }
.skin-civic-grey .home-explore__title { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .home-explore__tile {
	background: #FFFFFF;
	border: 1px solid var(--cc-card-border);
	border-left: none;
	border-radius: var(--cc-radius-md);
	box-shadow: var(--cc-card-shadow);
	backdrop-filter: none;
}
.skin-civic-grey .home-explore__tile:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); transform: translateY(-2px); }
.skin-civic-grey .home-explore__tile-title { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .home-explore__tile-desc { color: var(--cc-card-text-secondary); }
.skin-civic-grey .home-explore__tile-link { color: var(--brand-link); font-weight: 600; }

/* Eyebrow labels */
.skin-civic-grey [class*="__eyebrow"] { color: var(--brand-link); }

/* Action section — light grey (NOT charcoal — charcoal is reserved for documentary/Tides) */
.skin-civic-grey .home-action__bg { background-color: #F4F4F5; }
.skin-civic-grey .home-action__overlay {
	background: linear-gradient(to right, rgba(244,244,245,0.85) 0%, rgba(244,244,245,0.65) 50%, rgba(244,244,245,0.40) 100%);
}
.skin-civic-grey .home-action__eyebrow { color: var(--brand-link); }
.skin-civic-grey .home-action__title { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .home-action__subtitle { color: var(--cc-card-text-secondary); }
.skin-civic-grey .home-action__card {
	background: #FFFFFF;
	border: 1px solid var(--cc-card-border);
	border-radius: var(--cc-radius-md);
	box-shadow: var(--cc-card-shadow);
	backdrop-filter: none;
}
.skin-civic-grey .home-action__card:hover { border-color: rgba(var(--brand-action-rgb), 0.15); }
.skin-civic-grey .home-action__card-title { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .home-action__card-description { color: var(--cc-card-text-secondary); }
.skin-civic-grey .home-action__card-icon { color: var(--brand-link); }
.skin-civic-grey .home-action__card-cta {
	background: var(--brand-accent-gold);
	border-color: var(--brand-accent-gold);
	color: var(--cc-card-text);  /* dark text on gold ✓ AA */
}
.skin-civic-grey .home-action__card-cta:hover { background: var(--brand-accent-gold-hover); border-color: var(--brand-accent-gold-hover); color: var(--cc-card-text); }

/* 12.1 Home page Resource Library polish — Civic Grey */
.skin-civic-grey .home-page {
	background:
		linear-gradient(180deg, #F4F4F5 0%, #FAFAFA 34rem, #F4F4F5 100%);
	color: var(--cc-card-text);
}

.skin-civic-grey .home-hero.sdh-hero-glass::before,
.skin-civic-grey .home-hero::before {
	background:
		linear-gradient(145deg, rgba(142,202,230,0.08) 0%, rgba(var(--brand-action-rgb),0.04) 44%, rgba(249,168,37,0.08) 100%),
		linear-gradient(90deg, rgba(15,15,20,0.74) 0%, rgba(15,15,20,0.50) 44%, rgba(15,15,20,0.20) 100%),
		linear-gradient(180deg, rgba(15,15,20,0.10) 0%, rgba(15,15,20,0.30) 52%, rgba(15,15,20,0.72) 100%);
	background-size: 300% 300%, 100% 100%, 100% 100%;
}

.skin-civic-grey .home-hero.sdh-hero-glass::after {
	background:
		linear-gradient(90deg, rgba(255,255,255,0.38), rgba(249,168,37,0.56), rgba(142,202,230,0.24)) top / 100% 1px no-repeat,
		linear-gradient(180deg, transparent 72%, rgba(244,244,245,0.20) 100%);
}

.skin-civic-grey .home-hero__container,
.skin-civic-grey .home-stats__container,
.skin-civic-grey .home-policies__container,
.skin-civic-grey .home-resources__container,
.skin-civic-grey .home-news__container,
.skin-civic-grey .home-action__container {
	max-width: 1280px;
}

.skin-civic-grey .home-hero__content {
	max-width: 46rem;
	text-shadow: 0 2px 20px rgba(0,0,0,0.30);
}

.skin-civic-grey .home-hero__title {
	font-size: clamp(3rem, 6.5vw, 5.75rem);
	letter-spacing: 0;
}

.skin-civic-grey .home-hero__subtitle {
	color: rgba(255,255,255,0.88);
}

.skin-civic-grey .home-stats,
.skin-civic-grey .home-policies,
.skin-civic-grey .home-resources,
.skin-civic-grey .home-news {
	background:
		linear-gradient(180deg, #F4F4F5 0%, #FAFAFA 55%, #F4F4F5 100%);
	border-top: 1px solid var(--cc-border-medium);
	color: var(--cc-card-text);
}

.skin-civic-grey .home-stats {
	background: #F4F4F5;
}

.skin-civic-grey .home-stats__hook,
.skin-civic-grey .home-policies__eyebrow,
.skin-civic-grey .home-resources__eyebrow,
.skin-civic-grey .home-news__eyebrow,
.skin-civic-grey .home-action__eyebrow,
.skin-civic-grey .home-documentary__eyebrow {
	padding-left: 0.75rem;
	border-left: 3px solid var(--brand-accent-gold);
	color: var(--cc-card-text);
	font-family: var(--cc-font-main);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.skin-civic-grey .home-stats__hook {
	width: fit-content;
	margin-inline: auto;
	margin-bottom: var(--cc-space-lg);
}

.skin-civic-grey .home-policies__title,
.skin-civic-grey .home-resources__title,
.skin-civic-grey .home-news__title,
.skin-civic-grey .home-stats__title {
	color: var(--cc-card-text);
	font-family: var(--cc-font-display);
	font-size: clamp(2rem, 3vw, 2.75rem);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.05;
}

.skin-civic-grey .home-policies__view-all,
.skin-civic-grey .home-resources__view-all,
.skin-civic-grey .home-news__view-all,
.skin-civic-grey .home-stats__link {
	color: var(--brand-link);
	font-family: var(--cc-font-main);
	font-weight: 700;
	text-decoration: none;
}

.skin-civic-grey .home-policies__view-all:hover,
.skin-civic-grey .home-resources__view-all:hover,
.skin-civic-grey .home-news__view-all:hover,
.skin-civic-grey .home-stats__link:hover {
	color: var(--brand-link-hover);
	text-decoration: none;
}

.skin-civic-grey .home-stats__box {
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 14px 34px rgba(24,24,27,0.08);
}

.skin-civic-grey .home-stats__card {
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-bottom: 3px solid var(--brand-accent-gold);
	border-radius: var(--cc-radius-sm);
	box-shadow: 0 4px 14px rgba(24,24,27,0.06);
	padding: var(--cc-space-md);
}

.skin-civic-grey .home-policies .resource-card,
.skin-civic-grey .home-news__card {
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 4px 14px rgba(24,24,27,0.06);
	overflow: hidden;
	transition: transform var(--cc-transition-flow), box-shadow var(--cc-transition-flow), border-color var(--cc-transition-flow);
}

.skin-civic-grey .home-policies .resource-card:hover,
.skin-civic-grey .home-news__card:hover {
	border-color: rgba(24,24,27,0.24);
	box-shadow: 0 14px 30px rgba(24,24,27,0.12);
	transform: translateY(-3px);
}

.skin-civic-grey .home-policies .resource-card__body,
.skin-civic-grey .home-news__card-body {
	padding: var(--cc-space-md);
}

.skin-civic-grey .home-policies .resource-card__title a,
.skin-civic-grey .home-news__card-title,
.skin-civic-grey .home-news__card-title a {
	color: var(--cc-card-text);
	font-family: var(--cc-font-display);
	font-weight: 400;
	text-decoration: none;
}

.skin-civic-grey .home-policies .resource-card__title a:hover,
.skin-civic-grey .home-news__card-title a:hover {
	color: var(--brand-link);
}

.skin-civic-grey .home-news__card-badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin-bottom: var(--cc-space-sm);
	padding: 0.25rem 0.65rem;
	background: var(--cc-card-text);
	border: 1px solid rgba(255,255,255,0.84);
	border-radius: var(--cc-radius-sm);
	color: #FFFFFF;
	font-family: var(--cc-font-main);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 1.2;
	text-transform: uppercase;
}

.skin-civic-grey .home-policies .resource-card__excerpt,
.skin-civic-grey .home-news__card-excerpt,
.skin-civic-grey .home-news__card-date {
	color: var(--cc-card-text-secondary);
}

.skin-civic-grey .home-policies .resource-card__type,
.skin-civic-grey .home-policies .resource-card__type--pdf,
.skin-civic-grey .home-policies .resource-card__type--video,
.skin-civic-grey .home-policies .resource-card__type--external,
.skin-civic-grey .home-policies .resource-card__type--article,
.skin-civic-grey .home-policies .resource-card__type--image {
	background: var(--cc-card-text);
	border: 1px solid rgba(255,255,255,0.84);
	border-radius: var(--cc-radius-sm);
	color: #FFFFFF;
}

.skin-civic-grey .home-policies .resource-card__topic {
	background: rgba(var(--brand-action-rgb),0.06);
	border-color: rgba(var(--brand-action-rgb),0.16);
	border-radius: var(--cc-radius-pill);
	color: var(--brand-link);
}

.skin-civic-grey .home-policies .resource-card__footer {
	border-top-color: var(--cc-border-medium);
}

.skin-civic-grey .home-resources {
	padding: var(--cc-space-2xl) 0;
}

.skin-civic-grey .home-resources__card {
	border: 1px solid rgba(255,255,255,0.72);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 14px 34px rgba(24,24,27,0.12);
}

.skin-civic-grey .home-resources__card-overlay {
	background:
		linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.38) 44%, rgba(0,0,0,0.82) 100%);
}

.skin-civic-grey .home-resources__card-topic {
	color: var(--brand-accent-gold);
}

.skin-civic-grey .home-resources__card-link,
.skin-civic-grey .home-resources__card-play {
	background: rgba(24,24,27,0.78);
	border-color: rgba(255,255,255,0.40);
	color: #FFFFFF;
}

.skin-civic-grey .home-resources__card-link:hover,
.skin-civic-grey .home-resources__card-play:hover {
	background: var(--brand-accent-gold);
	border-color: var(--brand-accent-gold);
	color: var(--cc-card-text);
}

.skin-civic-grey .home-documentary__bg {
	background-image: url('../../images/heroes/rasta-docu-cover.jpg') !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: cover !important;
	background-attachment: fixed !important;
	position: relative;
}

.skin-civic-grey .home-documentary__overlay {
	position: relative;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(15,15,20,0.80) 0%, rgba(15,15,20,0.52) 45%, rgba(15,15,20,0.22) 100%),
		linear-gradient(180deg, rgba(15,15,20,0.16) 0%, rgba(15,15,20,0.64) 100%);
}

.skin-civic-grey .home-documentary__content {
	text-shadow: 0 2px 18px rgba(0,0,0,0.24);
}

.skin-civic-grey .home-documentary__title {
	color: #FFFFFF;
	font-size: clamp(2.5rem, 4.6vw, 4rem);
}

.skin-civic-grey .home-documentary__description {
	color: rgba(255,255,255,0.84);
}

.skin-civic-grey .home-documentary__eyebrow,
.skin-civic-grey .home-action__eyebrow {
	border-left-color: var(--brand-accent-gold);
	color: #FFFFFF;
}

.skin-civic-grey .home-action__title {
	color: #FFFFFF;
	font-family: var(--cc-font-display);
	font-size: clamp(2rem, 3vw, 2.75rem);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.05;
	text-transform: none;
}

@media (max-width: 767px) {
	.skin-civic-grey .home-hero__title {
		font-size: clamp(2.65rem, 14vw, 4.25rem);
	}

	.skin-civic-grey .home-stats__box,
	.skin-civic-grey .home-action__card {
		padding: var(--cc-space-md);
	}

	.skin-civic-grey .home-policies .resource-card__image {
		aspect-ratio: 4 / 3;
		background: #E4E4E7;
	}

	.skin-civic-grey .home-policies .resource-card__img {
		object-position: center center;
	}
}

/* 12.2 Civic Grey parallax image bands */
.skin-civic-grey .home-documentary,
.skin-civic-grey .home-action {
	position: relative;
	overflow: hidden;
}

.skin-civic-grey .home-action__bg {
	background-color: #18181B;
	background-image: url('../../../../caribbean_town_hall.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
}

.skin-civic-grey .home-action__overlay {
	position: relative;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(15,15,20,0.80) 0%, rgba(15,15,20,0.52) 45%, rgba(15,15,20,0.22) 100%),
		linear-gradient(180deg, rgba(15,15,20,0.16) 0%, rgba(15,15,20,0.64) 100%);
}

.skin-civic-grey .home-action__header {
	text-shadow: 0 2px 18px rgba(0,0,0,0.24);
}

.skin-civic-grey .home-action__eyebrow {
	color: #FFFFFF;
	border-left-color: var(--brand-accent-gold);
}

.skin-civic-grey .home-action__title {
	color: #FFFFFF;
}

.skin-civic-grey .home-action__subtitle {
	color: rgba(255,255,255,0.84);
}

.skin-civic-grey .home-action__card {
	background: rgba(255,255,255,0.94);
	border: 1px solid rgba(255,255,255,0.72);
	box-shadow: 0 14px 34px rgba(24,24,27,0.14);
	backdrop-filter: blur(12px);
}

.skin-civic-grey .home-action__card:hover {
	background: #FFFFFF;
	border-color: rgba(255,255,255,0.90);
	box-shadow: 0 18px 40px rgba(24,24,27,0.18);
	transform: translateY(-3px);
}

@media (hover: none) {
	.skin-civic-grey .home-documentary__bg,
	.skin-civic-grey .home-action__bg {
		background-attachment: scroll !important;
	}
}

/* ==========================================================================
   13. COUNTRY SINGLE — Light containers
   ========================================================================== */

.skin-civic-grey .country-glance {
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 4px 14px rgba(24,24,27,0.06);
	margin-block: 0;
}
.skin-civic-grey .country-glance__card {
	background: var(--cc-card-inner-bg);
	border-color: var(--cc-card-border);
	border-left: 3px solid var(--brand-action-bg);
	border-radius: 0 var(--cc-radius-sm) var(--cc-radius-sm) 0;
}
.skin-civic-grey .country-glance__card-value {
	color: var(--cc-card-text);
	font-family: var(--cc-font-display);
	font-size: clamp(1.35rem, 2vw, 1.65rem);
	line-height: 1.05;
}
.skin-civic-grey .country-glance__card-label { color: var(--cc-card-text-secondary); }
.skin-civic-grey .country-glance__heading {
	color: var(--cc-card-text);
	font-family: var(--cc-font-display);
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.12;
	margin: 0;
	text-transform: none;
}

.skin-civic-grey .country-section__heading {
	color: var(--cc-card-text);
	font-family: var(--cc-font-display);
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.12;
	text-transform: none;
}
.skin-civic-grey .country-section__heading-rule {
	background: var(--brand-accent-gold);
}
.skin-civic-grey .country-section__subheading {
	color: var(--cc-card-text);
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	letter-spacing: 0;
	line-height: 1.35;
	text-transform: none;
}
.skin-civic-grey .country-section__description { color: var(--cc-card-text-secondary); }
.skin-civic-grey .country-section__chart {
	background-color: #FFFFFF;
	border: 1px solid var(--cc-card-border);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 4px 14px rgba(24,24,27,0.05);
}
.skin-civic-grey .country-section__chart-title {
	color: var(--cc-card-text);
	font-family: var(--cc-font-main);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
}
.skin-civic-grey .country-section__metric {
	background-color: #FFFFFF;
	border-color: var(--cc-card-border);
	border-left: 3px solid var(--brand-action-bg);
	border-radius: 0 var(--cc-radius-sm) var(--cc-radius-sm) 0;
	box-shadow: 0 3px 10px rgba(24,24,27,0.05);
}
.skin-civic-grey .country-section__metric-value {
	color: var(--cc-card-text);
	font-family: var(--cc-font-display);
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	line-height: 1.05;
}
.skin-civic-grey .country-section__metric-label { color: var(--cc-card-text-secondary); }
.skin-civic-grey .country-section__links a { color: var(--brand-link); }

.skin-civic-grey .regional-comparison__container {
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 4px 14px rgba(24,24,27,0.06);
	padding: var(--wp--preset--spacing--lg);
}

.skin-civic-grey .regional-comparison__grid {
	background: var(--cc-card-inner-bg);
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-sm);
	margin-top: 0;
	padding: var(--wp--preset--spacing--md);
}

.skin-civic-grey .regional-comparison__header {
	color: var(--cc-card-text);
	font-weight: 700;
}

.skin-civic-grey .regional-comparison__label,
.skin-civic-grey .regional-comparison__multiplier {
	color: var(--cc-card-text-secondary);
}

.skin-civic-grey .regional-comparison__country,
.skin-civic-grey .regional-comparison__regional {
	color: var(--cc-card-text);
}

.skin-civic-grey .country-section--data-sources {
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 4px 14px rgba(24,24,27,0.06);
	margin-block: var(--wp--preset--spacing--lg);
	padding: var(--wp--preset--spacing--lg);
}

.skin-civic-grey .country-section__data-container {
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 4px 14px rgba(24,24,27,0.06);
	padding: var(--wp--preset--spacing--lg);
}

.skin-civic-grey .country-section--detailed-data .country-tabs__content {
	background: var(--cc-card-inner-bg);
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-sm);
	margin-top: var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--md);
}

.skin-civic-grey .country-section--detailed-data .country-tabs__table-wrapper {
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-sm);
}

.skin-civic-grey .country-section--data-sources {
	padding: 0;
}

.skin-civic-grey .country-section--data-sources .data-sources {
	border-bottom: 0;
	padding: 0;
}

.skin-civic-grey .data-sources__toggle {
	align-items: flex-start;
	color: var(--cc-card-text);
	flex-direction: column;
	gap: 0.35rem;
	padding: var(--wp--preset--spacing--lg);
	position: relative;
}

.skin-civic-grey .data-sources__toggle::after {
	position: absolute;
	right: var(--wp--preset--spacing--lg);
	top: var(--wp--preset--spacing--lg);
	color: var(--brand-link);
	font-size: 1rem;
}

.skin-civic-grey .data-sources__toggle:hover,
.skin-civic-grey .data-sources__toggle:focus-visible {
	color: var(--cc-card-text);
}

.skin-civic-grey .data-sources__toggle-text {
	font-family: var(--cc-font-display);
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	font-weight: 400;
	line-height: 1.12;
}

.skin-civic-grey .data-sources__toggle-note {
	color: var(--cc-card-text-secondary);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.5;
	max-width: 54rem;
	padding-right: var(--wp--preset--spacing--lg);
}

.skin-civic-grey .data-sources__content {
	background: var(--cc-card-inner-bg);
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-sm);
	margin: 0 var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg);
}

.skin-civic-grey .country-callout { background-color: rgba(var(--brand-action-rgb), 0.04); border-left: 3px solid var(--brand-action-bg); }
.skin-civic-grey .country-callout__heading { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .country-callout__text { color: var(--cc-card-text-secondary); }

.skin-civic-grey .variable-explainer__toggle { color: var(--cc-card-text-muted); }
.skin-civic-grey .variable-explainer__toggle:hover { color: var(--brand-link); }
.skin-civic-grey .variable-explainer__term { color: var(--cc-card-text); }
.skin-civic-grey .variable-explainer__desc { color: var(--cc-card-text-secondary); }
.skin-civic-grey .data-sources__indicator-name { color: var(--cc-card-text); }
.skin-civic-grey .data-sources__source-list { color: var(--cc-card-text-secondary); }
/* Country tab explainer (Singstat-style "Our Data Explained" panel) */
.skin-civic-grey .tab-explainer { background: #FFFFFF; border-color: rgba(var(--brand-action-rgb), 0.12); border-radius: var(--cc-radius-md); }
.skin-civic-grey .tab-explainer__toggle { color: var(--brand-link); }
.skin-civic-grey .tab-explainer__toggle:hover { color: var(--brand-link-hover); }
.skin-civic-grey .tab-explainer__toggle:focus-visible { outline-color: var(--brand-link); }
.skin-civic-grey .tab-explainer__toggle-icon { color: var(--cc-card-text-muted); }
.skin-civic-grey .tab-explainer[open] .tab-explainer__toggle { border-bottom-color: rgba(var(--brand-action-rgb), 0.12); }
.skin-civic-grey .tab-explainer__term { color: var(--brand-link); font-family: var(--cc-font-display); }
.skin-civic-grey .tab-explainer__unit { color: var(--cc-card-text-muted); }
.skin-civic-grey .tab-explainer__desc { color: var(--cc-card-text-secondary); }
.skin-civic-grey .tab-explainer__glossary-link a { color: var(--brand-link); text-decoration: underline; }
.skin-civic-grey .tab-explainer__glossary-link a:hover { color: var(--brand-link-hover); }
.skin-civic-grey .single__back-link { color: var(--brand-link); font-weight: 600; }

/* ==========================================================================
   14. COUNTRIES ARCHIVE
   ========================================================================== */

.skin-civic-grey .country-card { background: #FFFFFF; border: 1px solid rgba(24,24,27,0.10); border-radius: var(--cc-radius-md); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.skin-civic-grey .country-card:hover { border-color: rgba(var(--brand-action-rgb), 0.15); box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.skin-civic-grey .country-card__name { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .country-card__membership { color: var(--cc-card-text-secondary); }
.skin-civic-grey .country-card__metric {
	background: linear-gradient(90deg, rgba(249,168,37,0.12), rgba(244,244,245,0.7));
	border-left: 3px solid var(--brand-accent-gold);
	border-radius: 0 var(--cc-radius-sm) var(--cc-radius-sm) 0;
	padding: 0.6rem 0.7rem;
}
.skin-civic-grey .country-card__metric-label { color: var(--cc-card-text-secondary); }
.skin-civic-grey .country-card__metric-value {
	color: var(--cc-card-text);
	font-family: var(--cc-font-display);
	font-weight: 700;
}
.skin-civic-grey .country-card__footer { border-top-color: rgba(24,24,27,0.08); }
.skin-civic-grey .country-card__cta { color: var(--cc-card-text); font-weight: 600; }

.skin-civic-grey .countries-filters__chip { background: rgba(var(--brand-action-rgb), 0.04); border-color: var(--cc-border-medium); color: var(--cc-card-text-secondary); border-radius: var(--cc-radius-pill); }
.skin-civic-grey .countries-filters__chip:hover { background: rgba(var(--brand-action-rgb), 0.10); border-color: var(--brand-action-bg); color: var(--brand-action-bg); }
.skin-civic-grey .countries-filters__chip--active { background: var(--cc-card-text); border-color: var(--cc-card-text); color: #FFFFFF; }  /* charcoal — not magenta */
.skin-civic-grey .metrics-explainer__toggle { color: var(--brand-link); }
.skin-civic-grey .metrics-explainer__panel { background: #FFFFFF; border-color: rgba(var(--brand-action-rgb), 0.12); }
.skin-civic-grey .metrics-explainer__term { color: var(--brand-link); }
.skin-civic-grey .metrics-explainer__desc { color: var(--cc-card-text-secondary); }
/* Countries data intro — "Our Data Explained" scope statement */
.skin-civic-grey .countries-data-intro { background: #FFFFFF; border-left-color: var(--brand-accent-gold); border: 1px solid rgba(24,24,27,0.10); border-left: 3px solid var(--brand-accent-gold); border-radius: var(--cc-radius-md); }
.skin-civic-grey .countries-data-intro__title { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .countries-data-intro__body { color: var(--cc-card-text-secondary); }
.skin-civic-grey .countries-summary { background: #FFFFFF; border-color: var(--cc-card-border); border-radius: var(--cc-radius-lg); box-shadow: 0 4px 14px rgba(24,24,27,0.06); }
.skin-civic-grey .countries-summary__heading { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .countries-summary__stat {
	background: linear-gradient(90deg, rgba(249,168,37,0.12), rgba(244,244,245,0.7));
	border: 1px solid var(--cc-card-border);
	border-left: 3px solid var(--brand-accent-gold);
	border-radius: 0 var(--cc-radius-sm) var(--cc-radius-sm) 0;
	padding: 0.85rem 1rem;
}
.skin-civic-grey .countries-summary__stat-value { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .countries-summary__stat-label { color: var(--cc-card-text-secondary); }

/* ==========================================================================
   15. RESOURCE ARCHIVE
   ========================================================================== */

.skin-civic-grey .resource-search-bar__wrapper {
	background-color: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	border-radius: var(--cc-radius-pill);
}
.skin-civic-grey .resource-search-bar__input { color: var(--cc-card-text); background: transparent; }
.skin-civic-grey .resource-search-bar__input::placeholder { color: var(--cc-card-text-muted); }
.skin-civic-grey .resource-search-bar__icon { color: var(--cc-card-text-muted); }
.skin-civic-grey .resource-search-bar__select { color: var(--cc-card-text-secondary); background-color: transparent; }
.skin-civic-grey button.resource-search-bar__submit,
.skin-civic-grey [type="submit"].resource-search-bar__submit { background: var(--brand-accent-gold); color: var(--cc-card-text); border: none; border-radius: 50%; }  /* gold, dark text ✓ AA */
.skin-civic-grey button.resource-search-bar__submit:hover,
.skin-civic-grey [type="submit"].resource-search-bar__submit:hover { background: var(--brand-accent-gold-hover); color: var(--cc-card-text); }

.skin-civic-grey .resource-format-nav__link { background-color: rgba(var(--brand-action-rgb), 0.04); border-color: rgba(24,24,27,0.10); color: var(--cc-card-text); }
.skin-civic-grey .resource-format-nav__icon { background: var(--brand-accent-gold); color: var(--cc-deep); }
.skin-civic-grey .resource-format-nav__link:hover { background-color: rgba(var(--brand-action-rgb), 0.08); }
.skin-civic-grey .resource-format-nav__link--active { background-color: var(--cc-card-text); border-color: var(--cc-card-text); color: #FFFFFF; }  /* charcoal */
.skin-civic-grey .resource-format-nav__link--active .resource-format-nav__icon { background: rgba(255,255,255,0.2); color: #FFFFFF; }

.skin-civic-grey .resource-card__title a { color: var(--cc-card-text); }
.skin-civic-grey .resource-card__title a:hover { color: var(--brand-link); }
.skin-civic-grey .resource-card__topic { background: rgba(var(--brand-action-rgb), 0.06); border-color: rgba(var(--brand-action-rgb), 0.12); border-radius: var(--cc-radius-pill); color: var(--brand-link); }
.skin-civic-grey .resource-card__cta { color: var(--brand-link); font-weight: 600; }
.skin-civic-grey .resource-card__cta:hover { color: var(--brand-link-hover); }
.skin-civic-grey .resource-card__footer { border-top-color: rgba(24,24,27,0.08); }

.skin-civic-grey .resource-filters__bar { background-color: #FFFFFF; border: 1px solid var(--cc-border-medium); border-radius: var(--cc-radius-md); backdrop-filter: none; }
.skin-civic-grey .resource-filters__chip { background: rgba(var(--brand-action-rgb), 0.06); border-color: var(--cc-border-medium); color: var(--brand-link); }
.skin-civic-grey .resource-filters__reset { color: var(--brand-link); }
.skin-civic-grey .resource-results__count p { color: var(--cc-card-text-secondary); }
.skin-civic-grey .resource-results__count strong { color: var(--cc-card-text); }
.skin-civic-grey .resource-section__title { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .resource-section__view-all { color: var(--brand-link); font-weight: 600; }
.skin-civic-grey .resource-spotlight__eyebrow { color: var(--brand-link); }
.skin-civic-grey .resource-spotlight__title a { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .resource-spotlight__title a:hover { color: var(--brand-link); }
.skin-civic-grey .resource-spotlight__description { color: var(--cc-card-text-secondary); }
.skin-civic-grey .resource-spotlight__cta { color: var(--brand-link); }

/* ==========================================================================
   16. DATA EXPLORER
   ========================================================================== */

.skin-civic-grey .data-nav { background-color: #FFFFFF; border-bottom: 1px solid var(--cc-border-medium); }
.skin-civic-grey .data-nav__link {
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--cc-radius-pill);
	color: var(--cc-card-text-secondary);
}
.skin-civic-grey .data-nav__link:hover,
.skin-civic-grey .data-nav__link:focus-visible {
	background: var(--cc-card-inner-bg);
	border-color: var(--cc-border-medium);
	color: var(--cc-card-text);
}
.skin-civic-grey .data-nav__link--active {
	background: var(--cc-card-text);
	border-color: var(--cc-card-text);
	color: #FFFFFF;
}
.skin-civic-grey .data-compare { background: var(--brand-page-bg); }
.skin-civic-grey .data-download { background: var(--brand-page-bg); }
/* Data About panel — Singstat-style "Our Data Explained" reference */
.skin-civic-grey .data-about { background: var(--brand-page-bg); }
.skin-civic-grey .data-about__panel { background: #FFFFFF; border-color: rgba(var(--brand-action-rgb), 0.12); border-radius: var(--cc-radius-md); }
.skin-civic-grey .data-about__title { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .data-about__toggle-label { color: var(--brand-link); }
.skin-civic-grey .data-about__toggle-icon { color: var(--cc-card-text-muted); }
.skin-civic-grey .data-about__panel[open] .data-about__toggle { border-bottom-color: rgba(var(--brand-action-rgb), 0.12); }
.skin-civic-grey .data-about__intro { color: var(--cc-card-text-secondary); }
.skin-civic-grey .data-about__term { color: var(--brand-link); font-family: var(--cc-font-display); }
.skin-civic-grey .data-about__unit { color: var(--cc-card-text-muted); }
.skin-civic-grey .data-about__desc { color: var(--cc-card-text-secondary); }
.skin-civic-grey .data-about__glossary-link a { color: var(--brand-link); text-decoration: underline; }
.skin-civic-grey .data-about__glossary-link a:hover { color: var(--brand-link-hover); }
.skin-civic-grey .data-compare__picker-group {
	padding: var(--wp--preset--spacing--md);
	border-color: var(--cc-card-border);
	border-radius: var(--cc-radius-md);
	box-shadow: var(--cc-card-shadow);
}
.skin-civic-grey .data-compare__subheading {
	margin: 0 0 var(--wp--preset--spacing--sm);
	padding-left: 0.75rem;
	border-left: 3px solid var(--brand-action-bg);
	color: var(--cc-card-text);
	font-family: var(--cc-font-main);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}
.skin-civic-grey .data-compare__fieldset {
	padding: 0;
}
.skin-civic-grey .data-compare__legend,
.skin-civic-grey .data-download__legend,
.skin-civic-grey .data-download__label {
	color: var(--cc-card-text);
}
.skin-civic-grey .data-compare__helper,
.skin-civic-grey .data-download__card-meta {
	color: var(--cc-card-text-secondary);
}
.skin-civic-grey .data-compare__option,
.skin-civic-grey .data-download__option {
	border-color: var(--cc-border-medium);
	color: var(--cc-card-text-secondary);
}
.skin-civic-grey .data-compare__option input,
.skin-civic-grey .data-download__option input {
	accent-color: var(--brand-accent-gold);
}
.skin-civic-grey .data-compare__option:hover,
.skin-civic-grey .data-compare__option:focus-within,
.skin-civic-grey .data-download__option:hover,
.skin-civic-grey .data-download__option:focus-within {
	border-color: var(--brand-accent-gold);
	color: var(--cc-card-text);
}
.skin-civic-grey .data-compare__option:hover input,
.skin-civic-grey .data-compare__option:focus-within input,
.skin-civic-grey .data-download__option:hover input,
.skin-civic-grey .data-download__option:focus-within input {
	outline: 2px solid var(--brand-accent-gold);
	outline-offset: 2px;
}
.skin-civic-grey .data-compare__option:has(input:checked),
.skin-civic-grey .data-download__option:has(input:checked) {
	background: var(--cc-card-inner-bg);
	border-color: var(--cc-card-text);
	color: var(--cc-card-text);
}
.skin-civic-grey .data-compare__option:has(input:checked),
.skin-civic-grey .data-download__option:has(input:checked) {
	border-color: var(--brand-accent-gold);
	color: var(--cc-card-text);
}
.skin-civic-grey .data-compare__option:has(input:checked) input,
.skin-civic-grey .data-download__option:has(input:checked) input {
	outline: 2px solid var(--brand-accent-gold);
	outline-offset: 2px;
}
.skin-civic-grey .data-compare__option--reference {
	background: var(--cc-card-inner-bg);
	color: var(--cc-card-text);
}
.skin-civic-grey .data-compare__chart-toggle:hover,
.skin-civic-grey .data-compare__chart-toggle:focus-visible,
.skin-civic-grey .data-download__toggle-all:hover,
.skin-civic-grey .data-download__toggle-all:focus-visible,
.skin-civic-grey .data-download__button:hover,
.skin-civic-grey .data-download__button:focus-visible {
	background: var(--cc-card-inner-bg);
	border-color: var(--cc-border-medium);
	color: var(--cc-card-text);
	box-shadow: var(--cc-card-shadow);
	transform: translateY(-0.0625rem);
}
.skin-civic-grey .data-compare__chart-toggle--active {
	background: var(--cc-card-text);
	border-color: var(--cc-card-text);
	color: #FFFFFF;
	box-shadow: none;
}
.skin-civic-grey .data-download__card:hover,
.skin-civic-grey .data-download__card:focus-within,
.skin-civic-grey .data-download__card:focus-visible {
	border-color: var(--brand-accent-gold);
	box-shadow: 0 0.75rem 1.5rem rgba(24,24,27,0.10);
}
.skin-civic-grey .data-download__icon {
	background: var(--brand-accent-gold);
	color: var(--cc-card-text);
}
.skin-civic-grey .data-download__summary::before {
	color: var(--cc-card-text);
}
.skin-civic-grey .data-download__submit {
	background: var(--brand-accent-gold);
	border-color: var(--brand-accent-gold);
	color: var(--cc-card-text);
}
.skin-civic-grey .data-download__submit:hover,
.skin-civic-grey .data-download__submit:focus-visible {
	background: var(--brand-accent-gold-hover);
	border-color: var(--brand-accent-gold-hover);
	color: var(--cc-card-text);
}

/* ==========================================================================
   17. TABS / PAGINATION / FORMS
   ========================================================================== */

.skin-civic-grey .tabs__list { border-bottom: 1px solid var(--cc-border-medium); }
.skin-civic-grey .tabs__tab { background: transparent; border: none; color: var(--cc-card-text-muted); font-family: var(--cc-font-main); border-radius: var(--cc-radius-pill); }
.skin-civic-grey .tabs__tab:hover { color: var(--brand-link); }
.skin-civic-grey .tabs__tab--active,
.skin-civic-grey .tabs__tab[aria-selected="true"] { color: var(--cc-card-text); background: transparent; border-bottom: 2px solid var(--brand-action-bg); border-radius: 0; font-weight: 600; }

.skin-civic-grey .pagination__link { background: transparent; border: 1px solid var(--cc-border-medium); color: var(--cc-card-text-secondary); border-radius: var(--cc-radius-pill); }
.skin-civic-grey .pagination__link:hover { border-color: var(--brand-link); color: var(--brand-link); }
.skin-civic-grey .pagination__link--current { background: var(--cc-card-text); border-color: var(--cc-card-text); color: #FFFFFF; }

.skin-civic-grey input,
.skin-civic-grey select,
.skin-civic-grey textarea { background-color: #FFFFFF; border: 1px solid var(--cc-border-medium); border-radius: var(--cc-radius-sm); color: var(--cc-card-text); }
.skin-civic-grey input:focus,
.skin-civic-grey select:focus,
.skin-civic-grey textarea:focus { border-color: var(--brand-action-bg); outline: none; }
.skin-civic-grey input::placeholder,
.skin-civic-grey textarea::placeholder { color: var(--cc-card-text-muted); }
.skin-civic-grey label { color: var(--cc-card-text-secondary); }

.skin-civic-grey .filter-bar { background-color: #FFFFFF; border: 1px solid var(--cc-border-medium); border-radius: var(--cc-radius-md); backdrop-filter: none; }
.skin-civic-grey .filter-bar__label { color: var(--cc-card-text-secondary); }
.skin-civic-grey .filter-bar select,
.skin-civic-grey .filter-bar input { background-color: var(--brand-page-bg); border: 1px solid var(--cc-border-medium); color: var(--cc-card-text); }

.skin-civic-grey table { border: 1px solid var(--cc-border-medium); border-radius: var(--cc-radius-md); }
.skin-civic-grey th { background-color: var(--brand-page-bg); color: var(--cc-card-text); }
.skin-civic-grey td { border-bottom: 1px solid var(--cc-border-subtle); color: var(--cc-card-text); }
.skin-civic-grey tbody tr:hover { background-color: rgba(var(--brand-action-rgb), 0.02); }

/* ==========================================================================
   18. POLICY CARDS
   ========================================================================== */

.skin-civic-grey .policy-card { background: #FFFFFF; border: 1px solid rgba(24,24,27,0.10); border-radius: var(--cc-radius-md); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.skin-civic-grey .policy-card::after { background: linear-gradient(90deg, var(--brand-action-bg), var(--brand-accent-gold)); }
.skin-civic-grey .policy-card:hover { border-color: rgba(var(--brand-action-rgb), 0.15); background: #FFFFFF; }
.skin-civic-grey .policy-card__tag { background: rgba(var(--brand-action-rgb), 0.06); border-color: rgba(var(--brand-action-rgb), 0.15); color: var(--brand-link); }
.skin-civic-grey .policy-card__title { color: var(--cc-card-text); font-family: var(--cc-font-display); }
.skin-civic-grey .policy-card__excerpt { color: var(--cc-card-text-secondary); }
.skin-civic-grey .policy-card__cta { border-color: var(--brand-action-bg); color: var(--brand-action-bg); }
.skin-civic-grey .policy-card__cta:hover { background: var(--brand-action-bg); color: #FFFFFF; }

/* ==========================================================================
   19. DOCUMENTARY SINGLE — Full charcoal surface (allowed)
   ========================================================================== */

.skin-civic-grey .documentary__hero,
.skin-civic-grey .documentary__body,
.skin-civic-grey .documentary__breadcrumb {
	background: transparent;   /* inherits charcoal from body via template */
}

/* When the documentary template applies skin-civic-grey to body,
   the whole page stays charcoal — this is the intended behaviour */
.skin-civic-grey body.single-documentary,
.skin-civic-grey.single-documentary {
	background-color: var(--brand-drama-bg);
	color: var(--brand-drama-text);
}

/* ==========================================================================
   20. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.skin-civic-grey,
	.skin-civic-grey *,
	.skin-civic-grey *::before,
	.skin-civic-grey *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   21. PHASE 1 — P0 INVISIBLES
   Fixes: advocacy H1, active tab indicator, Watch Now button
   ========================================================================== */

/* 21.1 Advocacy header — h1 uses white text in base CSS, but the global
   .skin-civic-grey h1/h2/h3 rule overrides to dark --cc-card-text.
   Re-force white on the dark hero surface. */
.skin-civic-grey .advocacy-header h1,
.skin-civic-grey .advocacy-header__title {
	color: #FFFFFF;
}
.skin-civic-grey .advocacy-header p,
.skin-civic-grey .advocacy-header__subtitle {
	color: rgba(255, 255, 255, 0.85);
}
.skin-civic-grey .advocacy-header__eyebrow {
	color: rgba(249, 168, 37, 0.9); /* gold on dark — legible */
}
/* Advocacy CTA buttons on dark hero */
.skin-civic-grey .advocacy-header__cta-btn {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.4);
}
.skin-civic-grey .advocacy-header__cta-btn:hover {
	border-color: #FFFFFF;
	background: rgba(255, 255, 255, 0.1);
}
.skin-civic-grey .advocacy-header__cta-btn--primary {
	background: var(--brand-accent-gold);
	border-color: var(--brand-accent-gold);
	color: var(--cc-card-text);
}
.skin-civic-grey .advocacy-header__cta-btn--primary:hover {
	background: var(--brand-accent-gold-hover);
	border-color: var(--brand-accent-gold-hover);
	color: var(--cc-card-text);
}

/* 21.2 Active tab indicator — country tabs use tabs__link--active class.
   Base tabs__tab--active rule (section 17) sets white text on magenta bg,
   but country tabs use tabs__link/tabs__link--active — map those too. */
.skin-civic-grey .tabs__link {
	color: var(--cc-card-text-muted);
	border-bottom: 2px solid transparent;
	padding-bottom: 0.5rem;
}
.skin-civic-grey .tabs__link:hover {
	color: var(--brand-link);
	border-bottom-color: rgba(var(--brand-action-rgb), 0.3);
}
.skin-civic-grey .tabs__link--active,
.skin-civic-grey .tabs__link[aria-selected="true"] {
	color: var(--cc-card-text);
	border-bottom: 2px solid var(--brand-action-bg);
	font-weight: 600;
}

/* 21.3 Home documentary "Watch Now" — .home-documentary__cta
   Base rule in section 8 sets gold border + charcoal text. Ensure it reads. */
.skin-civic-grey .home-documentary__cta {
	background: transparent;
	border: 1.5px solid var(--brand-accent-gold);
	color: var(--brand-drama-text);
	font-weight: 600;
}
.skin-civic-grey .home-documentary__cta:hover {
	background: var(--brand-accent-gold);
	color: var(--brand-drama-bg);
}

/* ==========================================================================
   22. PHASE 2 — P1 CONTRAST FAILURES
   Fixes: footer headings, resource-pills active state, Fluent Forms submit,
          header nav darkening
   ========================================================================== */

/* 22.1 Footer — headings/body text already handled in section 6, but
   confirm text rule for direct child text (some themes use bare <p> or <span>). */
.skin-civic-grey .site-footer h1,
.skin-civic-grey .site-footer h2,
.skin-civic-grey .site-footer h3,
.skin-civic-grey .site-footer h4,
.skin-civic-grey .site-footer h5,
.skin-civic-grey .site-footer h6 {
	color: var(--brand-accent-gold); /* gold on charcoal — AA UI ✓ */
	font-family: var(--cc-font-main);
}
.skin-civic-grey .site-footer p,
.skin-civic-grey .site-footer li { color: var(--cc-dim); }

/* 22.2 Resource filter pills — template uses .resource-pills__link / --active
   (not .filter-pill which is used on policy/country filters) */
.skin-civic-grey .resource-pills__link {
	background: #FFFFFF;
	color: var(--cc-card-text);
	border: 1px solid #D4D4D8;
	border-radius: var(--cc-radius-pill);
}
.skin-civic-grey .resource-pills__link:hover {
	border-color: var(--brand-link);
	color: var(--brand-link);  /* pink-700 — text hover, not magenta */
}
.skin-civic-grey .resource-pills__link--active {
	background: var(--cc-card-text);  /* charcoal — not magenta */
	color: #FFFFFF;
	border-color: var(--cc-card-text);
}

/* 22.3 Fluent Forms submit button — gold (primary action), dark text for AA contrast */
.skin-civic-grey .ff-btn-submit,
.skin-civic-grey .ff_btn_style,
.skin-civic-grey .frm-fluent-form button[type="submit"],
.skin-civic-grey .ff-el-group button[type="submit"],
.skin-civic-grey .ff-form-wrap .ff-btn,
.skin-civic-grey .ff-form button[type="submit"] {
	background: var(--brand-accent-gold) !important;
	background-color: var(--brand-accent-gold) !important;
	border-color: var(--brand-accent-gold) !important;
	color: var(--cc-card-text) !important;  /* #18181B — dark on gold ✓ AA */
}
.skin-civic-grey .ff-btn-submit:hover,
.skin-civic-grey .ff_btn_style:hover,
.skin-civic-grey .ff-form button[type="submit"]:hover {
	background: var(--brand-accent-gold-hover) !important;
	background-color: var(--brand-accent-gold-hover) !important;
	border-color: var(--brand-accent-gold-hover) !important;
	color: var(--cc-card-text) !important;
}

/* 22.4 Header nav — darken from Zinc-600 (#52525B) to Zinc-900 (#18181B)
   for better contrast on white header. Already partially handled in section 5
   via --cc-card-text-secondary, but reinforce with direct color. */
.skin-civic-grey .site-header nav a,
.skin-civic-grey .site-header .primary-nav a,
.skin-civic-grey .site-header__menu a {
	color: var(--cc-card-text); /* #18181B — 16:1 on white ✓ */
}
.skin-civic-grey .site-header nav a:hover,
.skin-civic-grey .site-header .primary-nav a:hover {
	color: var(--brand-link);
}

/* ==========================================================================
   23. PHASE 3 — P2 PALETTE CONSISTENCY (Ocean Currents bleed-through)
   Fixes: About orange links/headings, curiosity prompt links, source pills,
          resource card type badges, button unification
   ========================================================================== */

/* 23.1 About page — orange (#FB8500) bleed-through from about.css
   about.css hard-codes #FB8500 on hover links, .about-how__sub-heading,
   and .about-card__body--sublist strong. Override with brand link color.
   Also fix amber border on .about-how__sub-heading → magenta. */
.skin-civic-grey .about-card__body a:hover,
.skin-civic-grey .about-card__body a:focus-visible {
	color: var(--brand-link-hover); /* #9D174D — not orange */
}
.skin-civic-grey .about-card__body--sublist .about-how__sub-heading {
	color: var(--brand-link); /* #BE185D — replaces #FB8500 */
	border-inline-start-color: var(--brand-action-bg); /* magenta not amber */
}
.skin-civic-grey .about-card__body--sublist .about-how__sub-heading + .about-how__sub-body {
	border-inline-start-color: rgba(var(--brand-action-rgb), 0.25);
}
.skin-civic-grey .about-card__body--sublist strong {
	color: var(--brand-link); /* replaces #FB8500 */
}
/* About heading font — override Playfair Display with DM Serif Display */
.skin-civic-grey .about-card__heading {
	font-family: var(--cc-font-display);
	color: var(--cc-card-text);
}

/* 23.2 Curiosity prompt links — base uses dark-teal (#023047)
   Override with brand link pink. */
.skin-civic-grey .curiosity-prompt__link {
	color: var(--brand-link);
}
.skin-civic-grey .curiosity-prompt__link:hover {
	color: var(--brand-link-hover);
}
.skin-civic-grey .curiosity-prompt {
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-md);
}
.skin-civic-grey .curiosity-prompt__heading {
	color: var(--cc-card-text-secondary);
}

/* 23.3 CPDC Calculated / source pills — teal (#219EBC) and ocean-indigo (#023047)
   Selectors confirmed: .data-sources__pill--calculated, .data-methodology__pill--calculated */
.skin-civic-grey .data-sources__pill {
	background: rgba(24, 24, 27, 0.06);
	color: var(--cc-card-text);
	border: 1px solid var(--cc-border-medium);
}
.skin-civic-grey .data-sources__pill--calculated {
	background: rgba(var(--brand-action-rgb), 0.08);
	color: var(--brand-link);
	border: 1px solid rgba(var(--brand-action-rgb), 0.25);
}
.skin-civic-grey .data-methodology__pill {
	background: rgba(24, 24, 27, 0.06);
	color: var(--cc-card-text);
	border: 1px solid var(--cc-border-medium);
}
.skin-civic-grey .data-methodology__pill--calculated {
	background: rgba(var(--brand-action-rgb), 0.08);
	color: var(--brand-link);
	border: 1px solid rgba(var(--brand-action-rgb), 0.25);
}

/* 23.4 Resource card type badges — base CSS uses red/purple/blue/teal
   per format. Replace with a muted gold-on-dark scheme so badges
   don't fight the magenta accent system. */
.skin-civic-grey .resource-card__type {
	background: var(--cc-card-text); /* charcoal badge */
	color: #FFFFFF;
}
.skin-civic-grey .resource-card__type--pdf {
	background: var(--cc-mid); /* Zinc-700 — neutral, not hot red */
	color: #FFFFFF;
}
.skin-civic-grey .resource-card__type--video {
	background: var(--cc-mid);  /* Zinc-700 — consistent with other type badges */
	color: #FFFFFF;
}
.skin-civic-grey .resource-card__type--external {
	background: var(--cc-mid);
	color: #FFFFFF;
}
.skin-civic-grey .resource-card__type--article {
	background: var(--brand-link); /* pink — article/blog */
	color: #FFFFFF;
}

/* 23.5 Button unification — standardise across all skins surfaces.
   Two patterns: filled magenta (primary) and ghost magenta (secondary). */
.skin-civic-grey .btn-primary,
.skin-civic-grey .button.is-primary {
	background: var(--brand-accent-gold);
	color: var(--cc-card-text);  /* #18181B — dark text on gold ✓ AA */
	border: 1px solid var(--brand-accent-gold);
	border-radius: var(--cc-radius-pill);
}
.skin-civic-grey .btn-primary:hover,
.skin-civic-grey .button.is-primary:hover {
	background: var(--brand-accent-gold-hover);
	border-color: var(--brand-accent-gold-hover);
	color: var(--cc-card-text);
}
.skin-civic-grey .btn-secondary,
.skin-civic-grey .button.is-secondary {
	background: transparent;
	color: var(--brand-link);
	border: 1px solid var(--brand-link);
	border-radius: var(--cc-radius-pill);
}
.skin-civic-grey .btn-secondary:hover,
.skin-civic-grey .button.is-secondary:hover {
	background: var(--brand-link);
	color: #FFFFFF;
}

/* 23.6 Countries summary — drop the amber wash, keep clean white card */
.skin-civic-grey .countries-summary {
	background: #FFFFFF;
	border: 1px solid #D4D4D8;
	border-radius: var(--cc-radius-lg);
}

/* ==========================================================================
   24. PHASE 4 — P3 LAYOUT, RHYTHM, TYPOGRAPHY
   Fixes: section backgrounds, archive H1 sizes, card borders,
          search input, country section labels, Data Explorer fonts,
          hero accent bar
   ========================================================================== */

/* 24.1 Section background rhythm — reinforce white/zinc-100 alternation */
.skin-civic-grey .home-stats,
.skin-civic-grey .home-resources,
.skin-civic-grey .home-action__bg {
	background-color: #F4F4F5;
}
.skin-civic-grey .home-policies,
.skin-civic-grey .home-explore {
	background-color: #FFFFFF;
}

/* Country profile sections */
.skin-civic-grey .country-debt-overview,
.skin-civic-grey .country-data-callout,
.skin-civic-grey .country-sdg-progress {
	background-color: #FFFFFF;
}
.skin-civic-grey .country-economic-context,
.skin-civic-grey .country-related-resources {
	background-color: #F4F4F5;
}

/* 24.2 Archive page H1 sizes — bump up from the base ~22px rendered size */
.skin-civic-grey .advocacy-header__title,
.skin-civic-grey .policy-header__title,
.skin-civic-grey .resource-header__title,
.skin-civic-grey .countries-header__title,
.skin-civic-grey .news-header__title,
.skin-civic-grey .archive-title {
	font-size: clamp(2.25rem, 4vw, 3rem); /* 36–48px */
	font-weight: 400;
	line-height: 1.1;
	font-family: var(--cc-font-display);
}

/* 24.3 Card border standardization — solid border replaces rgba(0,0,0,0.10) */
.skin-civic-grey {
	--cc-card-border: #D4D4D8;
	--cc-border-medium: #D4D4D8; /* override the rgba token to solid */
}
.skin-civic-grey .resource-card,
.skin-civic-grey .country-card,
.skin-civic-grey .policy-card,
.skin-civic-grey .advocacy-card {
	background: #FFFFFF;
	border: 1px solid #D4D4D8;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.skin-civic-grey .resource-card:hover,
.skin-civic-grey .country-card:hover,
.skin-civic-grey .policy-card:hover,
.skin-civic-grey .advocacy-card:hover {
	border-color: rgba(var(--brand-action-rgb), 0.25);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* 24.4 Search input — reinforce visible border on resources page */
.skin-civic-grey .resource-search-bar__input,
.skin-civic-grey input[type="search"],
.skin-civic-grey input[type="text"] {
	background: #FFFFFF;
	border: 1px solid #D4D4D8;
	border-radius: var(--cc-radius-sm);
	color: var(--cc-card-text);
}
.skin-civic-grey input[type="search"]:focus,
.skin-civic-grey input[type="text"]:focus {
	border-color: var(--brand-action-bg);
	outline: 2px solid rgba(var(--brand-action-rgb), 0.2);
	outline-offset: 0;
}

/* 24.5 Country section labels — small eyebrow labels used inside section content. */
.skin-civic-grey .country-section__label {
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cc-card-text);  /* charcoal — border stays magenta for structural accent */
	padding-left: 0.75rem;
	border-left: 3px solid var(--brand-action-bg);  /* magenta structural bar — keep */
	margin-bottom: 1rem;
}

/* 24.6 Data Explorer font consistency — force DM Serif Display on headings */
.skin-civic-grey .page-data-explorer h1,
.skin-civic-grey .page-data-explorer h2,
.skin-civic-grey .page-data-explorer h3 {
	font-family: var(--cc-font-display);
}
.skin-civic-grey .page-data-explorer h2 {
	font-size: 2rem;
	font-weight: 400;
	color: var(--cc-card-text);
}
.skin-civic-grey .data-methodology__title,
.skin-civic-grey .data-compare__heading {
	font-family: var(--cc-font-display);
	color: var(--cc-card-text);
}

/* 24.7 Hero accent bar — magenta top border + gold rule underlay
   (already defined in section 7; reinforce advocacy-header which was missing) */
.skin-civic-grey .advocacy-header {
	border-top: 6px solid var(--brand-action-bg);
	position: relative;
}
.skin-civic-grey .advocacy-header::after {
	content: "";
	display: block;
	position: absolute;
	top: 6px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--brand-accent-gold);
	z-index: 2;
}

/* 24.8 Pagination — ensure light-mode tokens match updated border token */
.skin-civic-grey .pagination__link {
	border-color: #D4D4D8;
}

/* 24.9 Filter bar — ensure white background with visible border */
.skin-civic-grey .filter-bar,
.skin-civic-grey .resource-filters__bar {
	background: #FFFFFF;
	border: 1px solid #D4D4D8;
}

/* 24.10 Resource archive polish — Civic Grey surface system */
.skin-civic-grey .resource-layout {
	background:
		linear-gradient(180deg, #F4F4F5 0%, #FAFAFA 22rem, #F4F4F5 100%);
}

.skin-civic-grey .resource-header {
	background-color: var(--cc-card-text);
}

.skin-civic-grey .resource-header::before {
	background:
		linear-gradient(90deg, rgba(15,15,20,0.78) 0%, rgba(15,15,20,0.58) 42%, rgba(15,15,20,0.36) 100%),
		linear-gradient(180deg, rgba(15,15,20,0.20) 0%, rgba(15,15,20,0.68) 100%);
}

.skin-civic-grey .resource-header__container {
	align-items: flex-end;
}

.skin-civic-grey .resource-header__content {
	max-width: 36rem;
	text-shadow: 0 2px 18px rgba(0,0,0,0.28);
}

.skin-civic-grey .resource-header__subtitle {
	color: rgba(255,255,255,0.86);
}

.skin-civic-grey .resource-header__search {
	margin-bottom: 0.2rem;
}

.skin-civic-grey .resource-search-bar__wrapper {
	background: rgba(255,255,255,0.96);
	border: 1px solid rgba(255,255,255,0.78);
	box-shadow: 0 18px 42px rgba(0,0,0,0.22);
	backdrop-filter: blur(12px);
}

.skin-civic-grey .resource-search-bar__wrapper:focus-within {
	border-color: var(--brand-accent-gold);
	box-shadow: 0 20px 48px rgba(0,0,0,0.28);
}

.skin-civic-grey .resource-search-bar__input,
.skin-civic-grey .resource-search-bar__select {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: 0;
}

.skin-civic-grey .resource-search-bar__divider {
	background: var(--cc-border-medium);
}

.skin-civic-grey .resource-search-bar__select-wrap {
	border: 0;
}

.skin-civic-grey .resource-search-bar__submit {
	width: 44px;
	height: 44px;
	min-width: 44px;
	background: var(--brand-accent-gold);
	border: 0;
	color: var(--cc-card-text);
	box-shadow: 0 8px 18px rgba(24,24,27,0.16);
}

.skin-civic-grey .resource-search-bar__submit:hover,
.skin-civic-grey .resource-search-bar__submit:focus-visible {
	background: var(--brand-accent-gold-hover);
	color: var(--cc-card-text);
	transform: translateY(-1px);
}

.skin-civic-grey .resource-format-nav {
	background: rgba(255,255,255,0.96);
	border-bottom: 1px solid var(--cc-border-medium);
	box-shadow: 0 10px 24px rgba(24,24,27,0.08);
	backdrop-filter: blur(12px);
}

.skin-civic-grey .resource-format-nav__container {
	max-width: 1280px;
}

.skin-civic-grey .resource-format-nav__list {
	align-items: stretch;
	gap: 0.5rem;
	padding: 0.75rem 0;
}

.skin-civic-grey .resource-format-nav__link {
	min-width: 0;
	width: 100%;
	min-height: 64px;
	padding: 0.75rem 0.9rem;
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-sm);
	box-shadow: 0 1px 2px rgba(24,24,27,0.04);
	color: var(--cc-card-text);
}

.skin-civic-grey .resource-format-nav__item {
	flex: 1 1 0;
	min-width: 11rem;
}

.skin-civic-grey .resource-format-nav__icon {
	background: var(--brand-accent-gold);
	color: var(--cc-card-text);
	border-radius: var(--cc-radius-sm);
}

.skin-civic-grey .resource-format-nav__meta {
	color: var(--cc-card-text-secondary);
}

.skin-civic-grey .resource-format-nav__link:hover,
.skin-civic-grey .resource-format-nav__link:focus-visible {
	background: var(--cc-card-inner-bg);
	border-color: var(--cc-card-text);
	color: var(--cc-card-text);
	box-shadow: 0 8px 18px rgba(24,24,27,0.08);
	transform: translateY(-1px);
}

.skin-civic-grey .resource-format-nav__link--active {
	background: var(--cc-card-text);
	border-color: var(--cc-card-text);
	box-shadow: inset 0 -3px 0 var(--brand-accent-gold), 0 8px 18px rgba(24,24,27,0.12);
	color: #FFFFFF;
}

.skin-civic-grey .resource-format-nav__link--active .resource-format-nav__icon {
	background: rgba(255,255,255,0.16);
	color: #FFFFFF;
}

.skin-civic-grey .resource-format-nav__link--active .resource-format-nav__meta,
.skin-civic-grey .resource-format-nav__link--active:hover .resource-format-nav__meta {
	color: rgba(255,255,255,0.74);
}

.skin-civic-grey .resource-format-nav__link--active:hover,
.skin-civic-grey .resource-format-nav__link--active:focus-visible {
	background: var(--cc-card-text);
	border-color: var(--cc-card-text);
	color: #FFFFFF;
	filter: none;
}

.skin-civic-grey .resource-layout__container {
	padding-top: var(--wp--preset--spacing--lg);
}

.skin-civic-grey .resource-spotlight {
	margin: var(--wp--preset--spacing--lg) 0;
	padding: var(--wp--preset--spacing--lg);
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 14px 34px rgba(24,24,27,0.08);
}

.skin-civic-grey .resource-spotlight__video,
.skin-civic-grey .resource-spotlight__poster-img {
	border-radius: var(--cc-radius-sm);
	box-shadow: 0 18px 36px rgba(24,24,27,0.16);
}

.skin-civic-grey .resource-spotlight__eyebrow,
.skin-civic-grey .resource-videos__playlist-title {
	padding-left: 0.75rem;
	border-left: 3px solid var(--brand-action-bg);
	color: var(--cc-card-text);
	font-family: var(--cc-font-main);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.skin-civic-grey .resource-spotlight__title a,
.skin-civic-grey .resource-video-card__title a {
	color: var(--cc-card-text);
	text-decoration: none;
}

.skin-civic-grey .resource-spotlight__title a:hover,
.skin-civic-grey .resource-video-card__title a:hover {
	color: var(--brand-link);
	text-decoration: none;
}

.skin-civic-grey .resource-spotlight__description,
.skin-civic-grey .resource-spotlight__detail dd,
.skin-civic-grey .resource-video-card__excerpt {
	color: var(--cc-card-text-secondary);
}

.skin-civic-grey .resource-spotlight__details {
	border-top-color: var(--cc-border-medium);
}

.skin-civic-grey .resource-spotlight__detail dt {
	color: var(--cc-card-text-muted);
}

.skin-civic-grey .resource-section {
	padding: var(--wp--preset--spacing--xl) 0;
	border-bottom-color: var(--cc-border-medium);
}

.skin-civic-grey .resource-section__title {
	position: relative;
	padding-left: 0.85rem;
	border-left: 3px solid var(--brand-action-bg);
}

.skin-civic-grey .resource-section__view-all,
.skin-civic-grey .resource-section__browse-all a,
.skin-civic-grey .resource-spotlight__cta {
	color: var(--brand-link);
	font-family: var(--cc-font-main);
	font-weight: 600;
	text-decoration: none;
}

.skin-civic-grey .resource-section__view-all:hover,
.skin-civic-grey .resource-section__browse-all a:hover,
.skin-civic-grey .resource-spotlight__cta:hover {
	color: var(--brand-link-hover);
	text-decoration: none;
}

.skin-civic-grey .resource-card,
.skin-civic-grey .resource-video-card {
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 4px 14px rgba(24,24,27,0.06);
	overflow: hidden;
	transition: transform var(--cc-transition-flow), box-shadow var(--cc-transition-flow), border-color var(--cc-transition-flow);
}

.skin-civic-grey .resource-card:hover,
.skin-civic-grey .resource-video-card:hover {
	border-color: rgba(24,24,27,0.24);
	box-shadow: 0 14px 30px rgba(24,24,27,0.12);
	transform: translateY(-3px);
}

.skin-civic-grey .resource-card__image,
.skin-civic-grey .resource-video-card__thumbnail {
	border-radius: 0;
	background: #E4E4E7;
}

.skin-civic-grey .resource-card__body,
.skin-civic-grey .resource-video-card__body {
	padding: var(--wp--preset--spacing--md);
}

.skin-civic-grey .resource-card__image-placeholder,
.skin-civic-grey .resource-card__image-placeholder--pdf,
.skin-civic-grey .resource-card__image-placeholder--video,
.skin-civic-grey .resource-card__image-placeholder--image,
.skin-civic-grey .resource-card__image-placeholder--external,
.skin-civic-grey .resource-card__image-placeholder--article,
.skin-civic-grey .resource-video-card__placeholder {
	background:
		linear-gradient(135deg, rgba(249,168,37,0.18) 0%, rgba(244,244,245,0.94) 42%, rgba(212,212,216,0.96) 100%);
	color: var(--cc-card-text);
}

.skin-civic-grey .resource-card__image-icon,
.skin-civic-grey .resource-video-card__placeholder-icon {
	color: var(--cc-card-text-secondary);
}

.skin-civic-grey .resource-card__image-text,
.skin-civic-grey .resource-video-card__placeholder-text {
	color: var(--cc-card-text-secondary);
}

.skin-civic-grey .resource-card__play,
.skin-civic-grey .resource-video-card__play {
	background: rgba(24,24,27,0.82);
	color: #FFFFFF;
	box-shadow: 0 8px 20px rgba(24,24,27,0.18);
}

.skin-civic-grey .resource-card__image-link:hover .resource-card__play,
.skin-civic-grey .resource-video-card__thumbnail:hover .resource-video-card__play {
	background: var(--brand-link);
}

.skin-civic-grey .resource-card__type,
.skin-civic-grey .resource-card__type--pdf,
.skin-civic-grey .resource-card__type--video,
.skin-civic-grey .resource-card__type--external,
.skin-civic-grey .resource-card__type--article,
.skin-civic-grey .resource-card__type--image {
	background: var(--cc-card-text);
	border: 1px solid rgba(255,255,255,0.84);
	border-radius: var(--cc-radius-sm);
	color: #FFFFFF;
}

.skin-civic-grey .resource-card__type--article {
	background: var(--brand-link);
}

.skin-civic-grey .resource-card__topic {
	background: rgba(var(--brand-action-rgb),0.06);
	border-color: rgba(var(--brand-action-rgb),0.16);
	color: var(--brand-link);
}

.skin-civic-grey .resource-card__topic:hover {
	background: rgba(var(--brand-action-rgb),0.10);
	border-color: rgba(var(--brand-action-rgb),0.28);
	color: var(--brand-link-hover);
}

.skin-civic-grey .resource-card__footer {
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	border-top-color: var(--cc-border-medium);
}

.skin-civic-grey .resource-card__date {
	color: var(--cc-card-text-muted);
}

.skin-civic-grey .resource-filters__bar,
.skin-civic-grey .resource-results__pagination,
.skin-civic-grey .resource-results__empty {
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-md);
	box-shadow: var(--cc-card-shadow);
}

.skin-civic-grey .resource-results__pagination {
	padding: var(--wp--preset--spacing--md);
}

.skin-civic-grey .resource-filters__active-label,
.skin-civic-grey .resource-results__sort-label,
.skin-civic-grey .resource-results__pagination-info {
	color: var(--cc-card-text-secondary);
}

.skin-civic-grey .resource-results__sort-select {
	background: #FFFFFF;
	border-color: var(--cc-border-medium);
	color: var(--cc-card-text);
}

.skin-civic-grey .resource-results__sort-btn,
.skin-civic-grey .resource-results__pagination-btn:not(.is-disabled) {
	background: #FFFFFF;
	border-color: var(--cc-border-medium);
	color: var(--cc-card-text);
}

.skin-civic-grey .resource-results__sort-btn:hover,
.skin-civic-grey .resource-results__pagination-btn:hover:not(.is-disabled) {
	background: var(--cc-card-inner-bg);
	border-color: var(--cc-card-text);
	color: var(--cc-card-text);
}

/* 24.11 News archive polish — aligned to resource archive cards */
.skin-civic-grey .news-layout {
	background:
		linear-gradient(180deg, #F4F4F5 0%, #FAFAFA 22rem, #F4F4F5 100%);
	padding-bottom: var(--wp--preset--spacing--xl);
}

.skin-civic-grey .news-header {
	align-items: stretch;
	background-color: var(--cc-card-text);
	background-size: cover;
	background-position: center 40%;
	border-bottom: 1px solid var(--cc-border-medium);
	padding-block: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
}

.skin-civic-grey .news-header::before {
	background:
		linear-gradient(90deg, rgba(15,15,20,0.78) 0%, rgba(15,15,20,0.58) 42%, rgba(15,15,20,0.36) 100%),
		linear-gradient(180deg, rgba(15,15,20,0.20) 0%, rgba(15,15,20,0.68) 100%);
}

.skin-civic-grey .news-header .container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 300px;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
	text-shadow: 0 2px 18px rgba(0,0,0,0.28);
}

@media (min-width: 768px) {
	.skin-civic-grey .news-header .container {
		min-height: 380px;
	}
}

.skin-civic-grey .news-header__breadcrumb {
	margin-bottom: 0;
}

.skin-civic-grey .news-header__text {
	max-width: 36rem;
}

.skin-civic-grey .news-header__title {
	line-height: 1;
	margin-bottom: var(--wp--preset--spacing--xs);
	text-shadow: none;
}

.skin-civic-grey .news-header__subtitle {
	max-width: 480px;
	text-shadow: none;
}

.skin-civic-grey .news-layout__container {
	padding-top: var(--wp--preset--spacing--lg);
}

.skin-civic-grey .news-filters {
	margin: 0 0 var(--wp--preset--spacing--lg);
	padding: var(--wp--preset--spacing--md);
	background: rgba(255,255,255,0.96);
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 10px 24px rgba(24,24,27,0.08);
	gap: 0.5rem;
}

.skin-civic-grey .news-filters__chip {
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-pill);
	color: var(--cc-card-text);
	font-family: var(--cc-font-main);
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(24,24,27,0.04);
	transition: transform var(--cc-transition-flow), box-shadow var(--cc-transition-flow), border-color var(--cc-transition-flow), background-color var(--cc-transition-flow), color var(--cc-transition-flow);
}

.skin-civic-grey .news-filters__chip:hover,
.skin-civic-grey .news-filters__chip:focus-visible {
	background: var(--cc-card-inner-bg);
	border-color: var(--cc-card-text);
	color: var(--cc-card-text);
	box-shadow: 0 8px 18px rgba(24,24,27,0.08);
	text-decoration: none;
	transform: translateY(-1px);
}

.skin-civic-grey .news-filters__chip.is-active {
	background: var(--cc-card-text);
	border-color: var(--cc-card-text);
	box-shadow: inset 0 -3px 0 var(--brand-accent-gold), 0 8px 18px rgba(24,24,27,0.12);
	color: #FFFFFF;
}

.skin-civic-grey .news-card {
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 4px 14px rgba(24,24,27,0.06);
	overflow: hidden;
	transition: transform var(--cc-transition-flow), box-shadow var(--cc-transition-flow), border-color var(--cc-transition-flow);
}

.skin-civic-grey .news-card:hover {
	border-color: rgba(24,24,27,0.24);
	box-shadow: 0 14px 30px rgba(24,24,27,0.12);
	transform: translateY(-3px);
}

.skin-civic-grey .news-card__image {
	background: #E4E4E7;
}

.skin-civic-grey .news-card__body {
	padding: var(--wp--preset--spacing--md);
}

.skin-civic-grey .news-card__badge {
	background: var(--cc-card-text);
	border: 1px solid rgba(255,255,255,0.84);
	border-radius: var(--cc-radius-sm);
	color: #FFFFFF;
	font-family: var(--cc-font-main);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.skin-civic-grey .news-card__title a {
	color: var(--cc-card-text);
	font-family: var(--cc-font-display);
	text-decoration: none;
}

.skin-civic-grey .news-card__title a:hover,
.skin-civic-grey .news-card__title a:focus-visible {
	color: var(--brand-link);
	text-decoration: none;
}

.skin-civic-grey .news-card__date {
	color: var(--cc-card-text-muted);
}

.skin-civic-grey .news-card__excerpt {
	color: var(--cc-card-text-secondary);
}

.skin-civic-grey .news-results__empty,
.skin-civic-grey .news-layout .nav-links {
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-md);
	box-shadow: var(--cc-card-shadow);
}

.skin-civic-grey .news-layout .nav-links {
	padding: var(--wp--preset--spacing--md);
}

.skin-civic-grey .news-layout .page-numbers {
	background: #FFFFFF;
	border-color: var(--cc-border-medium);
	border-radius: var(--cc-radius-sm);
	color: var(--cc-card-text);
	font-family: var(--cc-font-main);
	font-weight: 600;
	transition: transform var(--cc-transition-flow), box-shadow var(--cc-transition-flow), border-color var(--cc-transition-flow), background-color var(--cc-transition-flow), color var(--cc-transition-flow);
}

.skin-civic-grey .news-layout .page-numbers:hover,
.skin-civic-grey .news-layout .page-numbers:focus-visible {
	background: var(--cc-card-inner-bg);
	border-color: var(--cc-card-text);
	color: var(--cc-card-text);
	text-decoration: none;
	transform: translateY(-1px);
}

.skin-civic-grey .news-layout .page-numbers.current {
	background: var(--cc-card-text);
	border-color: var(--cc-card-text);
	box-shadow: inset 0 -3px 0 var(--brand-accent-gold);
	color: #FFFFFF;
}

/* 24.12 Documentary page polish — align with Resource archive */
.skin-civic-grey .documentary {
	background:
		linear-gradient(180deg, #F4F4F5 0%, #FAFAFA 34rem, #F4F4F5 100%);
	color: var(--cc-card-text);
}

.skin-civic-grey .documentary__header {
	padding: var(--wp--preset--spacing--md) 0;
	background: #FFFFFF;
	border-bottom: 1px solid var(--cc-border-medium);
	box-shadow: 0 2px 10px rgba(24,24,27,0.04);
}

.skin-civic-grey .documentary__breadcrumb,
.skin-civic-grey .documentary__breadcrumb a,
.skin-civic-grey .documentary__breadcrumb-current {
	color: var(--cc-card-text-secondary);
}

.skin-civic-grey .documentary__breadcrumb a:hover {
	color: var(--brand-link);
}

.skin-civic-grey .documentary__badge {
	border-radius: var(--cc-radius-pill);
}

.skin-civic-grey .documentary__badge--primary {
	background: var(--cc-card-text);
	color: #FFFFFF;
}

.skin-civic-grey .documentary__badge-text {
	color: var(--cc-card-text-muted);
}

.skin-civic-grey .documentary__hero {
	padding: var(--wp--preset--spacing--xl) 0;
	background:
		linear-gradient(135deg, rgba(24,24,27,0.04) 0%, rgba(255,255,255,0.92) 48%, rgba(249,168,37,0.08) 100%);
	border-bottom: 1px solid var(--cc-border-medium);
}

.skin-civic-grey .documentary__hero-layout {
	grid-template-columns: 1fr;
	align-items: stretch;
}

.skin-civic-grey .documentary__display-title {
	color: #FFFFFF;
	font-family: var(--cc-font-display);
	font-size: clamp(2.5rem, 5vw, 4.25rem);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 0.95;
}

.skin-civic-grey .documentary__video-kicker {
	color: var(--brand-accent-gold);
	font-family: var(--cc-font-main);
}

.skin-civic-grey .documentary__video-description {
	color: rgba(255,255,255,0.88);
}

.skin-civic-grey .documentary__hero-content {
	justify-content: center;
	max-width: none;
	padding: var(--wp--preset--spacing--lg);
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 14px 34px rgba(24,24,27,0.08);
}

.skin-civic-grey .documentary__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--xs);
	padding-left: 0.75rem;
	border-left: 3px solid var(--brand-action-bg);
	color: var(--cc-card-text);
	font-family: var(--cc-font-main);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.skin-civic-grey .documentary__title {
	color: var(--cc-card-text);
	font-family: var(--cc-font-display);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.skin-civic-grey .documentary__summary,
.skin-civic-grey .documentary__section-content,
.skin-civic-grey .documentary__section-content p,
.skin-civic-grey .documentary__info-text,
.skin-civic-grey .documentary__credit-value,
.skin-civic-grey .documentary__sidebar-desc,
.skin-civic-grey .documentary__related-link,
.skin-civic-grey .documentary__feedback-text {
	color: var(--cc-card-text-secondary);
}

.skin-civic-grey .documentary__topic {
	background: rgba(var(--brand-action-rgb),0.06);
	border: 1px solid rgba(var(--brand-action-rgb),0.16);
	border-radius: var(--cc-radius-pill);
	color: var(--brand-link);
}

.skin-civic-grey .documentary__cta-btn {
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-pill);
	background: #FFFFFF;
	color: var(--cc-card-text);
	box-shadow: var(--cc-card-shadow);
}

.skin-civic-grey .documentary__cta-btn:hover,
.skin-civic-grey .documentary__cta-btn:focus-visible {
	background: var(--cc-card-inner-bg);
	border-color: var(--cc-card-text);
	color: var(--cc-card-text);
}

.skin-civic-grey .documentary__cta-btn--primary {
	background: var(--brand-accent-gold);
	border-color: var(--brand-accent-gold);
	color: var(--cc-card-text);
}

.skin-civic-grey .documentary__cta-btn--primary:hover,
.skin-civic-grey .documentary__cta-btn--primary:focus-visible {
	background: var(--brand-accent-gold-hover);
	border-color: var(--brand-accent-gold-hover);
	color: var(--cc-card-text);
}

.skin-civic-grey .documentary__hero-media {
	gap: var(--wp--preset--spacing--md);
	width: 100%;
}

.skin-civic-grey .documentary__video-frame {
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 18px 42px rgba(24,24,27,0.16);
}

.skin-civic-grey .documentary__video-poster,
.skin-civic-grey .documentary__video-placeholder {
	background-color: #18181B;
}

.skin-civic-grey .documentary__poster-button:hover .documentary__play-badge,
.skin-civic-grey .documentary__poster-button:focus-visible .documentary__play-badge {
	background: var(--brand-accent-gold);
	color: var(--cc-card-text);
	transform: scale(1.04);
}

.skin-civic-grey .documentary__play-badge {
	background: rgba(24,24,27,0.86);
	border: 0;
	color: #FFFFFF;
	box-shadow: 0 8px 20px rgba(24,24,27,0.18);
	transition: background var(--cc-transition-flow), color var(--cc-transition-flow), transform var(--cc-transition-flow);
}

.skin-civic-grey .documentary__video-placeholder-text {
	color: var(--cc-card-text-secondary);
}

.skin-civic-grey .documentary__info-box {
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-md);
	box-shadow: var(--cc-card-shadow);
}

.skin-civic-grey .documentary__info-title,
.skin-civic-grey .documentary__credit-label,
.skin-civic-grey .documentary__feedback-label,
.skin-civic-grey .documentary__feedback-title {
	color: var(--cc-card-text);
	font-family: var(--cc-font-main);
}

.skin-civic-grey .documentary__body {
	padding: var(--wp--preset--spacing--xl) 0;
	background: transparent;
}

.skin-civic-grey .documentary__body-layout:not(:has(.documentary__sidebar)) {
	grid-template-columns: 1fr;
}

.skin-civic-grey .documentary__section,
.skin-civic-grey .documentary__sidebar-panel {
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 10px 28px rgba(24,24,27,0.07);
}

.skin-civic-grey .documentary__section-title,
.skin-civic-grey .documentary__sidebar-title {
	padding-left: 0.85rem;
	border-left: 3px solid var(--brand-action-bg);
	color: var(--cc-card-text);
	font-family: var(--cc-font-display);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.skin-civic-grey .documentary__list {
	color: var(--cc-card-text-secondary);
}

.skin-civic-grey .documentary__credit-item,
.skin-civic-grey .documentary__related-item {
	background: #FFFFFF;
	border: 1px solid var(--cc-border-medium);
	border-radius: var(--cc-radius-sm);
	box-shadow: var(--cc-card-shadow);
}

.skin-civic-grey .documentary__related-item {
	transition: transform var(--cc-transition-flow), box-shadow var(--cc-transition-flow), border-color var(--cc-transition-flow);
}

.skin-civic-grey .documentary__related-item:hover,
.skin-civic-grey .documentary__related-item:focus-visible {
	background: #FFFFFF;
	border-color: rgba(24,24,27,0.24);
	box-shadow: 0 12px 24px rgba(24,24,27,0.10);
	transform: translateY(-2px);
}

.skin-civic-grey .documentary__related-badge {
	background: var(--brand-accent-gold);
	border-radius: var(--cc-radius-pill);
	color: var(--cc-card-text);
}

.skin-civic-grey .documentary__related-title {
	color: var(--cc-card-text);
}

.skin-civic-grey .documentary__related-item:hover .documentary__related-title,
.skin-civic-grey .documentary__related-item:focus-visible .documentary__related-title {
	color: var(--brand-link);
}

.skin-civic-grey .documentary__feedback {
	background: #FFFFFF;
	border: 1px solid var(--brand-accent-gold);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 10px 28px rgba(24,24,27,0.07);
}

.skin-civic-grey .documentary__feedback-btn {
	background: var(--brand-accent-gold);
	border: 1px solid var(--brand-accent-gold);
	border-radius: var(--cc-radius-pill);
	color: var(--cc-card-text);
}

.skin-civic-grey .documentary__feedback-btn:hover,
.skin-civic-grey .documentary__feedback-btn:focus-visible {
	background: var(--brand-accent-gold-hover);
	border-color: var(--brand-accent-gold-hover);
	color: var(--cc-card-text);
}