@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700;800&display=swap');

/* =====================================================
   Birthgap.org — global.css (STATIC SITE SINGLE SOURCE)
   - Header/nav/menu defined ONCE
   - Page modules are scoped
   - Barometer is strictly body.bgp-barometer scoped
===================================================== */

/* =====================================================
   1) DESIGN TOKENS (DROP-IN REPLACEMENT)
   - Includes required missing vars + early aliases
   - Keeps your naming, but prevents silent fallbacks
===================================================== */
:root {
  /* ───────────────────────────────────────────────
     TYPOGRAPHY & FONTS
  ─────────────────────────────────────────────── */
  --bg-font: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, Helvetica, Arial, sans-serif;

  /* ───────────────────────────────────────────────
     LAYOUT & BREAKPOINTS
  ─────────────────────────────────────────────── */
  --bg-max: 960px;
  --bg-break: 820px;

  /* ───────────────────────────────────────────────
     1. CORE BRAND & ACCENT COLORS
  ─────────────────────────────────────────────── */
  --color-brand-teal:          #007299;      /* Birthgap Teal */
  --color-brand-teal-dark:     #004d66;
  --color-brand-teal-darker:   #1B4E5E;
  --color-brand-teal-hover:    #005F7F;
  --color-brand-ocean-dark:    #0E2A36;

  --color-patreon-red:         #C43C2E;
  --color-patreon-red-muted:   #8C342A;
  --color-patreon-red-dark:    #010101;

  --color-research-red:        #C93C2A;
  --color-research-red-alert:  #C62828;

  /* ───────────────────────────────────────────────
     2. TEXT & FOREGROUND COLORS (Light Mode)
  ─────────────────────────────────────────────── */
  --color-text-primary:        #1F2933;
  --color-text-strong:         #222;
  --color-text-secondary:      #444;
  --color-text-muted:          #6B7280;
  --color-text-body:           #2B2B2B;

  --color-text-on-dark:        #FFFFFF;
  --color-text-on-primary:     #FFFFFF;

  --color-text-link:           var(--color-brand-teal);

  --color-text-panel-title:    #111111;
  --color-text-ref-em:         #2F3A40;
  --color-text-muted-sub:      #555555;
  --color-text-author-note:    #2B2F33;
  --color-text-body-story:     #1B1F23;
  --color-text-strong-patreon: #111827;
  --color-text-kicker:         #5B1414;
  --color-text-subhead:        #2A2A2A;

  /* ───────────────────────────────────────────────
     3. BACKGROUND & SURFACE COLORS (Light Mode)
  ─────────────────────────────────────────────── */
  --color-bg-page:             #F5F5F3;
  --color-bg-surface:          #FFFFFF;
  --color-bg-light-gray:       #F6F7F8;
  --color-bg-very-light:       #F9FAFB;
  --color-bg-off-white:        #FBFAF6;

  --color-bg-mint:             #F0F7F4;
  --color-bg-mint-light:       #EAF4EE;
  --color-bg-mint-formula:     #E6EFE8;

  --color-bg-gray:             #F2F5F7;

  --color-bg-author-note:      #F4FBFE;

  --color-bg-callout-red:      #F9ECEF;
  --color-bg-callout-pink:     #FFF5F8;

  /* ───────────────────────────────────────────────
     4. BORDERS, DIVIDERS & SHADOWS
  ─────────────────────────────────────────────── */
  --color-border-default:      #E1E4E8;
  --color-border-actions:      #D9D4CC;
  --color-border-dropdown:     #ddd;

  --color-border-subtle:       rgba(0,0,0,0.08);
  --color-border-subtle-dark:  rgba(0,0,0,0.06);

  --color-border-inset-mint:   #A8D5BA;
  --color-border-inset-gray:   #B8C4CC;
  --color-border-inset-green:  #7FAF95;

  /* used by callouts */
  --color-border-inset-callout:#6F8FA3;
  --color-border-inset-red:    #D88C9A;
  --color-border-inset-pink:   #C62828;

  --color-border-mobile-item:  rgba(255,255,255,0.2);
  --color-border-brand-teal-subtle: rgba(0,114,153,0.55);
  --color-border-patreon-btn:  rgba(0,0,0,0.10);

  --color-border-mail-icon:    rgba(255,255,255,0.12);
  --color-border-subtle-light: rgba(255,255,255,0.10);

  --shadow-soft:               0 4px 12px rgba(0,0,0,0.07);
  --shadow-btn:                0 2px 6px rgba(0,0,0,0.14);
  --shadow-btn-hover:          0 4px 12px rgba(0,0,0,0.16);
  --shadow-card:               0 10px 26px rgba(0,0,0,0.06);

  --shadow-btn-actions:        0 2px 6px rgba(0,0,0,0.10);
  --shadow-btn-actions-hover:  0 4px 12px rgba(0,0,0,0.12);
  --shadow-btn-red:            rgba(201,60,42,0.25);
  --shadow-btn-red-hover:      rgba(201,60,42,0.35);
  --shadow-btn-teal:           rgba(0,114,153,0.22);

  --shadow-patreon-btn:        0 8px 18px rgba(0,0,0,0.14);
  --shadow-patreon-btn-hover:  0 12px 24px rgba(0,0,0,0.18);

  --shadow-story-panel:        rgba(0,0,0,0.10);
  --shadow-author-note-inset:  rgba(0,114,153,0.25);

  --shadow-hero-logo:          rgba(0,114,153,0.32);
  --shadow-inset-white-hint:   rgba(255,255,255,0.05);
  --shadow-inset-mint-bottom:  rgba(168,213,186,0.55);
  --shadow-inset-gray-bottom:  rgba(184,196,204,0.6);

  /* ───────────────────────────────────────────────
     5. HEADER / NAV / MENU / HERO SPECIFIC
  ─────────────────────────────────────────────── */
  --color-bg-brand-strip:      var(--color-brand-ocean-dark);
  --color-text-brand-title:    rgba(245,245,245,0.92);

  --color-bg-mobile-overlay:   rgba(0, 114, 153, 0.97);
  --color-bg-menu-trigger-hover: rgba(255,255,255,0.15);

  --color-bg-dropdown:         #FFFFFF;
  --color-text-dropdown:       #222;
  --color-bg-dropdown-hover:   #f5f5f5;

  --color-bg-hero:             linear-gradient(160deg, #1B4E5E 0%, #0A1B22 100%);
  --color-bg-hero-fallback:    #0A1B22;
  --color-bg-hero-mobile-fallback: #070808;

  --color-bg-mobile-subtitle-gradient:
    linear-gradient(to bottom, rgba(10,35,45,0.96), rgba(5,20,28,0.96));

  --color-text-hero-title:     #FFFFFF;
  --color-text-hero-subtitle:  rgba(255,255,255,0.86);

  /* ───────────────────────────────────────────────
     6. BUTTONS & INTERACTIVE
  ─────────────────────────────────────────────── */
  --color-btn-bg-default:      #FFFFFF;
  --color-btn-text-default:    #222;
  --color-btn-border-default:  #E1E4E8;

  --color-btn-bg-home:         #3A4A50;
  --color-btn-text-home:       #FFFFFF;

  --color-btn-bg-primary:      var(--color-brand-teal);
  --color-btn-text-primary:    #FFFFFF;

  --color-btn-bg-barometer:    #132F3A;
  --color-btn-text-barometer:  #EAF4F7;
  --color-btn-border-barometer: rgba(0,114,153,0.45);
  --color-btn-underline-barometer: var(--color-patreon-red);

  --color-btn-bg-patreon:      var(--color-patreon-red);
  --color-btn-text-patreon:    #FFFFFF;

  --color-btn-bg-teal-research:#2F6F73;
  --color-btn-bg-red-research: #C93C2A;


  /* === Active corner accent colors (tokens) === */
  --bg-active-corner-light: rgba(196,60,46,0.58);  /* default on light buttons */
  --bg-active-corner-dark:  rgba(255,255,255,0.55);/* home/primary override */
  --bg-active-corner-barometer: rgba(196,60,46,0.85); /* barometer default */



  /* ───────────────────────────────────────────────
     7. ACCORDION / PANEL / EXPANDER SPECIFIC
  ─────────────────────────────────────────────── */
  --color-bg-accordion-header-gradient:
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
  --color-bg-accordion-q-hover:
    linear-gradient(180deg, #FFFFFF 0%, #F3F5F7 100%);

  --color-bg-expander-summary:   rgba(0,0,0,0.04);
  --color-border-expander:       rgba(0,0,0,0.08);
  --color-bg-expander-content:   rgba(255,255,255,0.7);

  --color-bg-expander-arrow:     #F2F4F7;
  --color-text-expander-arrow:   #4A4F55;
  --color-bg-expander-arrow-open:#E9F1F4;

  /* ───────────────────────────────────────────────
     8. BAROMETER / DARK-THEMED PAGE SPECIFIC
  ─────────────────────────────────────────────── */
  --color-bg-barometer-wrap:     #0B1F26;
  --color-bg-barometer-panel:    #233A42;
  --color-bg-barometer-card:     #16262C;

  --color-bg-chip:               rgba(0,114,153,0.85);
  --color-bg-source-wrap:        rgba(20, 40, 50, 0.6);

  --color-bg-summary-gradient:
    linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(0,0,0,0.10));

  --color-text-barometer-years:  #a0c0d0;

  --color-bg-lightbox:           rgba(0,0,0,0.92);
  --color-text-caption:          rgba(255,255,255,0.7);
  --color-text-hint:             rgba(255,255,255,0.70);

  --color-bg-mail-icon:          rgba(255,255,255,0.10);
  --color-border-mail-icon:      rgba(255,255,255,0.12);
  --color-bg-mail-hover:         rgba(255,255,255,0.16);

  --shadow-intro-card:           rgba(0,0,0,0.5);
  --shadow-intro-image:          rgba(0,0,0,0.35);
  --shadow-panel:                rgba(0,0,0,0.4);
  --shadow-modal:                rgba(0,0,0,0.55);

  /* ───────────────────────────────────────────────
     9. MISC / UTILITY COLORS
  ─────────────────────────────────────────────── */
  --color-bg-tile:               #000000;
  --color-bg-tile-overlay:
    linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.15), rgba(0,0,0,0.0));

  --color-divider:               #999999;
  --color-divider-subtle:        rgba(0,0,0,0.10);
  --color-bg-footer: var(--color-brand-teal);

  /* ───────────────────────────────────────────────
     REQUIRED “MISSING” VARS (prevents silent fallbacks)
  ─────────────────────────────────────────────── */
  --color-shadow-hero-logo:      var(--shadow-hero-logo);

  --color-border-author-note:    rgba(0,114,153,0.18);
  --color-border-callout-default: var(--color-border-inset-callout);

  --color-patreon-bg:            var(--color-bg-very-light);
  --color-text-patreon:          #2E2E2E;
  --bg-patreon-text:             #2E2E2E;

  --color-border-btn-subtle:     rgba(0,0,0,0.10);
  --color-bg-teal-hover-subtle:  rgba(0,114,153,0.06);

  --shadow-details:              rgba(0,0,0,0.30);

  /* ───────────────────────────────────────────────
     EARLY ALIASES USED BY html/body + links (MUST BE HERE)
  ─────────────────────────────────────────────── */
  --bg-page: var(--color-bg-page);
  --bg-text: var(--color-text-primary);
  --bg-link: var(--color-text-link);

  --bg-hero-grad: var(--color-bg-hero);
  
  --bg-hero-dark: var(--color-bg-hero-fallback);
  /* ───────────────────────────────────────────────
     DARK MODE FALLBACK VALUES (if you need them elsewhere)
  ─────────────────────────────────────────────── */
  --color-bg-page-dark:          #0f1419;
  --color-bg-surface-dark:       #11171f;
  --color-text-primary-dark:     #e0e0e0;
  --color-text-muted-dark:       #9ca3af;
  --color-border-dark:           #2a3745;
  --color-link-dark:             #4db8ff;


/* ───────────────────────────────────────────────
   4.5 COUNTRY SNAPSHOT PAGE TOKENS
   (component-level aliases built from global tokens)
─────────────────────────────────────────────── */

--cs-page-bg:        var(--color-bg-page);
--cs-surface:        var(--color-bg-surface);
--cs-surface-soft:   var(--color-bg-gray);

--cs-text:           var(--color-text-primary);
--cs-text-muted:     var(--color-text-muted);

--cs-border:         var(--color-border-default);
--cs-border-soft:    var(--color-border-subtle);

--cs-accent:         var(--color-brand-teal);
--cs-accent-subtle:  var(--color-border-brand-teal-subtle);

--cs-shadow-card:    var(--shadow-card);
--cs-shadow-hover:   0 10px 28px rgba(0,0,0,0.10);


}
/* =====================================================
   2) GLOBAL BASELINE + RESET
===================================================== */
*,
*::before,
*::after{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  font-family: var(--bg-font);
  background-color: var(--bg-page);
  color: var(--bg-text);
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

button, input, select, textarea{ font-family: var(--bg-font); }
h1,h2,h3,h4,h5,h6{ font-family: var(--bg-font); margin: 0; }
p{ margin: 0; }

a{ color: var(--bg-link); }
a:hover{ text-decoration: none; }

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

/* default rhythm in Birthgap content area */
.bgp-page p{ margin: 0 0 1em 0; }
.bgp-page p:last-child{ margin-bottom: 0; }

/* Quill sizing helpers (if used) */
.ql-size-huge{ font-size: 1.35em; line-height: 1.25; }
.ql-size-large{ font-size: 1.125em; line-height: 1.4; }
strong.ql-size-huge{
  font-size: 1.45em;
  font-weight: 800;
  letter-spacing: -0.01em;
}
@media (max-width: 820px){
  strong.ql-size-huge{ font-size: 1.38em; }
}

/* =====================================================
   3) PAGE WRAPPER (STRUCTURAL ONLY)
===================================================== */
.bgp-page{
  max-width: var(--bg-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}



/* =====================================================
   4) FULL-BLEED HEADER + NAV (SINGLE SOURCE OF TRUTH)
===================================================== */

/* Full bleed technique */
.bg-fullbleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}

/* Brand strip */
.bg-brand-strip {
  padding: 12px 0;
  position: relative;
}

.bg-brand-inner {
  max-width: var(--bg-max);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.bg-brand-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--color-text-brand-title);             /* rgba(245,245,245,0.92) – high-contrast white on teal */
}

/* Hero/banner image (full-width under brand strip) */
.bg-hero-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--color-bg-hero-fallback);        /* #0A1B22 – dark fallback for image load/errors */
}

/* Top nav wrapper */
.bg-topnav {
  margin: 14px 0 20px;
}

.bg-navwrap {
  max-width: var(--bg-max);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* Button-like links (default state) */
.bg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;

  font-family: Verdana, sans-serif;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.3px;

  padding: 10px 18px;
  border-radius: 4px;

  border: 1px solid var(--color-border-default);    /* #E1E4E8 */
  background: var(--color-btn-bg-default);          /* #FFFFFF */
  color: var(--color-btn-text-default);             /* #222 */

  box-shadow: var(--shadow-btn);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  position: relative;

  -webkit-tap-highlight-color: transparent;
}

.bg-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
}

/* Variants */
.bg-btn.home {
  background: var(--color-btn-bg-home);             /* #3A4A50 */
  color: var(--color-btn-text-home);                /* #fff */
  border-color: var(--color-btn-bg-home);           /* same as bg for solid look */
}

.bg-btn.primary {
  background: var(--color-btn-bg-primary);          /* = --color-brand-teal = #007299 */
  color: var(--color-btn-text-primary);             /* #fff */
  border-color: var(--color-btn-bg-primary);
}

.bg-btn.barometer {
  background: var(--color-btn-bg-barometer);        /* #132F3A */
  color: var(--color-btn-text-barometer);           /* #EAF4F7 – light teal-gray */
  border: 1px solid var(--color-btn-border-barometer); /* rgba(0,114,153,0.45) */
}

/* Desktop barometer underline */
.bg-btn.barometer.desktop-barometer::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 66%;
  height: 2px;
  transform: translateX(-50%);
  background: var(--color-btn-underline-barometer); /* #C43C2E – Patreon red */
  border-radius: 2px;
}

/* Patreon CTA button (in nav) */
.bg-btn.patreon-cta {
  background: var(--color-btn-bg-patreon);          /* #C43C2E */
  color: var(--color-btn-text-patreon);             /* #fff */
  font-weight: 700;
  border-color: var(--color-btn-bg-patreon);
}


/* Active nav item */
.bg-topnav a.bg-btn.active{
  position: relative;
  transform: none;
  filter: brightness(0.975);
  box-shadow:
    0 5px 14px rgba(0,0,0,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.08);
}

/* Default accent for light buttons */
.bg-topnav a.bg-btn.active::before{
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;

  border-top: 2px solid rgba(196,60,46,0.58);
  border-left: 2px solid rgba(196,60,46,0.58);

  opacity: 0;
  pointer-events: none;

  animation: bg-active-corner-fade .45s ease forwards;
  animation-delay: .25s;
}

/* White accent for dark slate + teal */
.bg-topnav a.bg-btn.home.active::before,
.bg-topnav a.bg-btn.primary.active::before{
  border-top: 2px solid rgba(255,255,255,0.55);
  border-left: 2px solid rgba(255,255,255,0.55);
}

/* Deep structural accent for Barometer */
.bg-topnav a.bg-btn.barometer.active::before{

  border-top: 2px solid rgba(196,60,46,0.85);
  border-left: 2px solid rgba(196,60,46,0.85);
}

@keyframes bg-active-corner-fade{
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Lock hover */
.bg-topnav a.bg-btn.active:hover{
  transform: none;
  filter: brightness(0.975);
}




/* =====================================================
   5) MENU TOGGLE (desktop dropdown + mobile overlay)
===================================================== */
.nav-toggle-input {
  display: none !important;
}

.menu-trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 80px;
  height: 44px;
  padding: 0 16px;
  color: var(--color-text-on-dark);                  /* white – high contrast on teal brand strip */

  font-weight: 600;
  font-size: 16px;
  gap: 12px;

  transition: background 0.2s;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 1000;
}

.menu-trigger:hover {
  background: var(--color-bg-menu-trigger-hover);     /* rgba(255,255,255,0.15) – subtle white overlay on teal */
  border-radius: 4px;
}

/* Hamburger */
.hamburger-lines {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  height: 24px;
}
.hamburger-lines span {
  height: 4px;
  width: 100%;
  background: var(--color-text-on-dark);              /* white – matches menu-trigger text */
  border-radius: 2px;
  transition: all 0.35s ease;
}
.menu-text {
  display: none;
}

.bg-menu-content {
  position: relative;
}

/* Desktop dropdown */
.bg-dropdown-links {
  display: none;
  position: absolute;
  top: 100%;
  right: 20px;
  background: var(--color-bg-dropdown);               /* white */
  border: 1px solid var(--color-border-dropdown);     /* #ddd */
  border-radius: 6px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  min-width: 220px;
  padding: 12px 0;
  z-index: 999;
  margin-top: 4px;
}
.bg-dropdown-links a {
  display: block;
  padding: 10px 24px;
  color: var(--color-text-dropdown);                  /* #222 – dark text on light bg */
  text-decoration: none;
  font-size: 15px;
}
.bg-dropdown-links a:hover {
  background: var(--color-bg-dropdown-hover);         /* #f5f5f5 – light gray hover */
}

/* Mobile overlay */
.bg-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-bg-mobile-overlay);         /* rgba(0, 114, 153, 0.97) – semi-transparent teal overlay */
  z-index: 999;
  padding: 80px 20px 40px;
  overflow-y: auto;
}
.bg-mobile-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  margin: 0 auto;
  gap: 20px;
}
.bg-mobile-items a {
  color: var(--color-text-on-dark);                   /* white – high contrast on dark teal overlay */
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  width: 100%;
  text-align: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border-mobile-item); /* rgba(255,255,255,0.2) – subtle white divider */
}
.bg-mobile-items a:last-child {
  border-bottom: none;
}

/* Responsive visibility helpers */
.desktop-only { display: none !important; }
.mobile-only  { display: none !important; }

@media (max-width: 820px) {
  .hamburger-lines { display: flex !important; }
  .menu-text      { display: none !important; }
  .menu-trigger {
    right: 16px;
    padding: 0 0 0 12px;
  }

  /* Mobile overlay toggle */
  #nav-toggle:checked ~ .bg-menu-content .bg-mobile-overlay {
    display: block !important;
  }

  /* Hamburger -> X */
  #nav-toggle:checked + .menu-trigger .hamburger-lines span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
  }
  #nav-toggle:checked + .menu-trigger .hamburger-lines span:nth-child(2) {
    opacity: 0;
  }
  #nav-toggle:checked + .menu-trigger .hamburger-lines span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }

  .desktop-only     { display: none !important; }
  .desktop-barometer { display: none !important; }
  .mobile-barometer  { display: inline-flex !important; }
  .mobile-only      { display: inline-flex !important; }

  .bg-navwrap {
    gap: 12px;
    justify-content: center;
  }

  .bg-btn.patreon-cta,
  .bg-btn.primary,
  .bg-btn.barometer.mobile-barometer {
    padding: 12px 22px;
    font-size: 14.5px;
  }
}

@media (min-width: 821px) {
  .hamburger-lines { display: none !important; }
  .menu-text      { display: inline !important; }

  /* Desktop dropdown toggle */
  #nav-toggle:checked ~ .bg-menu-content .bg-dropdown-links {
    display: block !important;
  }

  .desktop-only     { display: inline-flex !important; }
  .desktop-barometer { display: inline-flex !important; }
  .mobile-barometer  { display: none !important; }
  .mobile-only      { display: none !important; }
}
/* =====================================================
   6) DESKTOP NAV: keep everything on one row (OPTIONAL)
   - Only affects header nav row on desktop
===================================================== */
@media (min-width: 821px){
  .bg-fullbleed .bg-topnav .bg-navwrap{
    max-width: 1200px;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 10px 20px 8px;
  }

  .bg-fullbleed .bg-topnav a.bg-btn{
    padding: 10px 16px;
    font-size: 13px;
  }

  .bg-fullbleed .bg-topnav a.bg-btn.barometer{
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* =====================================================
   7) HOME HERO (desktop → mobile swap)
   - Used on Home page (if you include .bg-hero markup)
===================================================== */
.bgp-page .bg-hero {
  width: 100%;
  max-width: var(--bg-max);
  margin: 0 auto 24px auto;
  background: var(--color-bg-hero);                        /* --bg-hero-grad in light mode */
  font-size: 16px;
  line-height: 1.0;
  padding: var(--bg-hero-pad-y-top) var(--bg-hero-pad-x) var(--bg-hero-pad-y-bottom) var(--bg-hero-pad-x);
}

.bgp-page .bg-hero h1,
.bgp-page .bg-hero p {
  margin: 0;
  padding: 0;
  max-width: none;
}

.bgp-page .bg-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  overflow: visible;
}

/* Reserve right column for logo so text stays centered */
.bgp-page .bg-hero-lockup {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding-right: var(--bg-logo-reserve);
}

/* Title */
.bgp-page .bg-hero-title {
  font-size: var(--bg-hero-title);
  line-height: 1.10;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--color-text-hero-title);                     /* #fff – white on dark gradient */

  margin: 0 0 8px 0;
  max-inline-size: 20ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

/* Subtitle */
.bgp-page .bg-hero-tagline {
  font-size: var(--bg-hero-tagline);
  line-height: 1.38;
  font-weight: 600;
  color: var(--color-text-hero-subtitle);                  /* rgba(255,255,255,0.86) – semi-transparent white */

  margin: 0 auto;
  max-width: 54ch;
}

/* Logo */
.bgp-page .bg-hero-logo {
  position: absolute;
  right: -12px;
  top: 48%;
  transform: translateY(-50%) rotate(9deg);

  height: var(--bg-hero-logo-h);
  width: auto;
  opacity: 0.88;

  pointer-events: none;
  user-select: none;

  filter: drop-shadow(0 5px 14px var(--color-shadow-hero-logo)) brightness(1.06);
  /* --color-shadow-hero-logo base is rgba(0,114,153,0.32) – teal shadow matching brand */
}

/* Desktop default */
.bgp-page .bg-hero-mobile-wrap,
.bgp-page .bg-hero-mobile-subtitle-wrap {
  display: none;
}
.bgp-page .bg-hero-desktop {
  display: block;
}

@media (max-width: 820px) {
  .bgp-page .bg-hero {
    padding: 0;
    background: var(--color-bg-hero-mobile-fallback);      /* #070808 – very dark for mobile hero */
    margin-bottom: 20px;
  }

  .bgp-page .bg-hero-desktop {
    display: none;
  }

  .bgp-page .bg-hero-mobile-wrap {
    display: block;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    background: var(--color-bg-hero-fallback);             /* #0A1B22 – same as desktop image fallback */
  }

  .bgp-page .bg-hero-mobile-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: scale(1.02);
    transform-origin: 50% 50%;
  }

  .bgp-page .bg-hero-mobile-subtitle-wrap {
    display: block;
    padding: 2px 0 6px;
    background: var(--color-bg-mobile-subtitle-gradient);  /* linear-gradient(to bottom, rgba(10,35,45,0.96), rgba(5,20,28,0.96)) */
    text-align: center;
  }

  .bgp-page .bg-hero-mobile-subtitle {
    margin: 0 auto;
    padding: 4px 0;
    max-width: 88%;
    font-size: 15px;
    line-height: 1.45;
    color: var(--color-text-hero-subtitle);                /* same semi-transparent white as desktop */
    font-weight: 460;
    letter-spacing: 0.15px;
    text-align: center;
  }
}

/* =====================================================
   8) SECTION HEADER (desktop → mobile swap)
   - Used on Contact, Research, Media, Facts, etc.
===================================================== */
.bgp-page .bg-section-header {
  width: 100%;
  max-width: var(--bg-max);
  margin: 0 auto 32px auto;

  background: var(--color-bg-hero);                        /* same gradient as home hero in light mode */
  position: relative;
  overflow: hidden;

  padding: var(--bg-section-pad-y-top) var(--bg-section-pad-x) var(--bg-section-pad-y-bottom) var(--bg-section-pad-x);
  box-sizing: border-box;

  box-shadow: inset 0 1px 0 var(--color-shadow-inset-white-hint), var(--shadow-soft);
  /* subtle white inset highlight + soft outer shadow */
}

.bgp-page .bg-section-header-inner {
  max-width: var(--bg-max);
  margin: 0 auto;
  padding: 0 var(--bg-inner-pad-x);
  position: relative;
  z-index: 1;
}

.bgp-page .bg-section-header-title {
  color: var(--color-text-hero-title);                      /* #fff – white title on gradient */
  font-size: var(--bg-section-title);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 4px 0;
  padding-right: 104px;
  box-sizing: border-box;
}

.bgp-page .bg-section-header-subtitle {
  color: var(--color-text-hero-subtitle);                   /* rgba(255,255,255,0.86) – semi-transparent white */
  font-size: var(--bg-section-subtitle);
  line-height: 1.4;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 68ch;
  padding-right: 104px;
  margin: 0;
}

.bgp-page .bg-section-header-logo {
  position: absolute;
  right: var(--bg-logo-right);
  top: 50%;
  transform: translateY(-50%);
  height: var(--bg-section-logo-h);
  width: auto;
  opacity: 0.96;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

/* Mobile variants hidden by default */
.bgp-page .bg-section-mobile-wrap,
.bgp-page .bg-section-mobile-subtitle-wrap {
  display: none;
}

@media (max-width: 820px) {
  .bgp-page .bg-section-header {
    padding: 0;
    background: var(--color-bg-hero-mobile-fallback);       /* #0A1B22 or similar dark fallback */
    margin-bottom: 20px;
  }

  .bgp-page .bg-section-header-inner {
    display: none;
  }

  .bgp-page .bg-section-mobile-wrap {
    display: block;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    background: var(--color-bg-hero-fallback);              /* same dark fallback as hero image */
  }

  .bgp-page .bg-section-mobile-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: scale(1.02) translateY(1%);
    transform-origin: 50% 50%;
  }

  .bgp-page .bg-section-mobile-subtitle-wrap {
    display: block;
    padding: 2px var(--bg-mobile-inset, 20px) 6px;
    background: var(--color-bg-mobile-subtitle-gradient);   /* same dark teal gradient as mobile hero subtitle */
    text-align: center;
  }

  .bgp-page .bg-section-mobile-subtitle {
    font-size: 15px;
    color: var(--color-text-hero-subtitle);                 /* same semi-transparent white */
    text-align: center;
    margin: 0;
    padding: 4px 0;
    font-weight: 460;
    letter-spacing: 0.15px;
    line-height: 1.45;
  }
}
/* =====================================================
   9) GENERIC PANELS / CALLOUTS (reusable)
===================================================== */
.bg-panel {
  max-width: var(--bg-max);
  margin: 0 auto 24px auto;
  padding: 18px 22px;
  border-radius: 8px;
  box-sizing: border-box;
  line-height: 1.8;
}

.bg-panel--mint {
  background: var(--color-bg-mint);                        /* #F0F7F4 – light mint */
  box-shadow:
    inset 4px 0 0 var(--color-border-inset-mint),           /* #A8D5BA – mint left accent */
    inset 0 -2px 0 var(--color-shadow-inset-mint-bottom);   /* rgba(168,213,186,0.55) – subtle bottom fade */
}

.bg-panel--gray {
  background: var(--color-bg-gray);                        /* #F2F5F7 – light gray */
  box-shadow:
    inset 4px 0 0 var(--color-border-inset-gray),           /* #B8C4CC – gray left accent */
    inset 0 -2px 0 var(--color-shadow-inset-gray-bottom);   /* rgba(184,196,204,0.6) – subtle bottom fade */
}

.bg-panel--card {
  background: var(--color-bg-surface);                     /* #FFFFFF – default card bg */
  box-shadow:
    0 2px 8px rgba(0,0,0,0.06),                            /* soft outer shadow – could become var later if needed */
    inset 0 0 0 1px var(--color-border-default);            /* #E1E4E8 – thin inner border */
}

/* =====================================================
   10) EXPANDER UI (for <details class="bg-expander">)
===================================================== */
.bg-expander {
  margin: 16px 0;
}

.bg-expander > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-weight: 700;
  padding: 10px 14px;
  background: var(--color-bg-expander-summary);            /* rgba(0,0,0,0.04) – very subtle gray tint */
  border: 1px solid var(--color-border-expander);          /* rgba(0,0,0,0.08) – light subtle border */
  border-radius: 6px;
}

.bg-expander > summary::-webkit-details-marker {
  display: none;
}

.bg-expander[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.bg-expander > div {
  padding: 14px 14px 4px;
  border: 1px solid var(--color-border-expander);          /* same subtle border */
  border-top: none;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background: var(--color-bg-expander-content);            /* rgba(255,255,255,0.7) – semi-transparent white overlay */
}

.bg-expander__close {
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  opacity: 0.8;
}

.bg-expander__close:hover {
  opacity: 1;
}

/* =====================================================
   11) BIRTHGAP ACCORDIONS (ABOUT / FACTS / FAQ / PERSPECTIVES)
   Unified checkbox-based expander system
===================================================== */

/* ---------- Shell & Card ---------- */
.bg-about-shell {
  max-width: var(--bg-max);
  margin: 40px auto;
  padding: 0 18px 34px 18px;
}

.bg-about-card {
  background: var(--color-bg-surface);                     /* #fff – default white surface */
  border: 1px solid var(--color-border-default);           /* #E1E4E8 */
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  overflow: hidden;
}

/* ---------- Header ---------- */
.bg-about-hdr {
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border-default);    /* #E1E4E8 */
  background: var(--color-bg-accordion-header-gradient);   /* linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%) */
}

.bg-about-hdrtop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: nowrap;
}

.bg-about-titlewrap {
  flex: 1 1 auto;
  min-width: 0;
}

.bg-about-hdr h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.2px;
}

.bg-about-hdr p {
  margin: 8px 0 0 0;
  line-height: 1.75;
  color: var(--color-text-secondary);                      /* #444 – secondary text */
  font-size: 15px;
}

/* ---------- Header Actions ---------- */
.bg-about-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  white-space: nowrap;
  align-self: flex-start;
}

.bg-about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-default);           /* #E1E4E8 */
  background: var(--color-bg-surface);                     /* #fff */
  color: var(--color-btn-text-default);                    /* #222 */
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.2px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  user-select: none;
  transition: transform .15s ease;
}

.bg-about-btn.primary {
  background: var(--color-btn-bg-primary);                 /* #007299 – brand teal */
  color: var(--color-btn-text-primary);                    /* #fff */
  border-color: var(--color-btn-bg-primary);
}

.bg-about-btn:hover {
  transform: translateY(-1px);
}
.bg-about-btn:active {
  transform: translateY(0);
}

@media (max-width: 820px) {
  .bg-about-hdrtop {
    flex-wrap: wrap;
  }
  .bg-about-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ---------- Shared mechanics ---------- */
.bg-expander__toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  left: -9999px;
}

/* ---------- Accordion Items ---------- */
.bg-about {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bg-about-item {
  background: var(--color-bg-surface);                     /* #fff */
  border: 1px solid var(--color-border-default);           /* #E1E4E8 */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
  position: relative;
}

.bg-about-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  cursor: pointer;
  user-select: none;
  background: var(--color-bg-accordion-header-gradient);   /* same light gradient as header */
}

.bg-about-q:hover {
  background: var(--color-bg-accordion-q-hover);           /* linear-gradient(180deg, #FFFFFF 0%, #F3F5F7 100%) */
}

.bg-about-q strong {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.12px;
  color: var(--color-text-strong);                         /* #222 – strong/primary dark text */
  line-height: 1.5;
  display: block;
}

.bg-about-q::after {
  content: "▾";
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-expander-arrow);              /* #F2F4F7 – light gray arrow bg */
  color: var(--color-text-expander-arrow);                 /* #4A4F55 – dark gray arrow icon */
  font-size: 18px;
  line-height: 1;
  transform: translateY(1px);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

/* ---------- Answer ---------- */
.bg-about-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .45s ease, opacity .30s ease;
}

/* =====================================================
   FIX: Properly collapse accordion when grid row is 0fr
===================================================== */
.bg-about-wrap {
  overflow: hidden;          /* critical: clip overflowing content */
}

.bg-about-wrap > .bg-expander__inner {
  overflow: hidden;          /* critical: prevents content from spilling */
  min-height: 0;             /* prevents grid item min-size from forcing height */
}

.bg-about-a {
  padding: 0 18px 18px 18px;
  background: var(--color-bg-surface);                     /* #fff */
}

.bg-about-a-inner {
  margin-top: 2px;
  background: var(--color-bg-light-gray);                  /* #F6F7F8 – light gray answer bg */
  border-left: 4px solid var(--color-border-inset-gray);   /* #B8C4CC – gray left accent */
  border-radius: 10px;
  padding: 16px;
  line-height: 2.05;
  font-size: 15.5px;
  color: var(--color-text-primary);                        /* #2E2E2E – slightly softer dark text */
}

.bg-about-a-inner.intro {
  background: var(--color-bg-mint);                 
  border-left-color: var(--color-border-inset-green);      /* #7FAF95 – green accent */
}

/* ---------- Open state ---------- */
.bg-expander__toggle:checked ~ .bg-about-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
}

.bg-expander__toggle:checked + label.bg-about-q::after {
  transform: rotate(-180deg) translateY(-1px);
  background: var(--color-bg-expander-arrow-open);         /* #E9F1F4 – lighter blue-gray when open */
  color: var(--color-brand-teal);                          /* #007299 – brand teal icon when open */
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bg-about-wrap,
  .bg-about-q::after,
  .bg-about-btn,
  .bg-btn,
  .hamburger-lines span {
    transition: none !important;
  }
}

/* ---------- Small screens ---------- */
@media (max-width: 820px) {
  .bg-about-shell {
    margin: 22px auto;
    padding-bottom: 22px;
  }

  .bg-about {
    padding: 14px;
  }

  .bg-about-q {
    padding: 16px;
  }

  .bg-about-q strong {
    font-size: 15.5px;
  }

  .bg-about-a {
    padding: 0 16px 16px 16px;
  }

  .bg-about-a-inner {
    font-size: 15px;
    line-height: 2.0;
  }
}



/* =====================================================
   12) BIRTHGAP FACTS TOP TILES (2x2)
===================================================== */
.bg-pagenav-shell {
  max-width: var(--bg-max);
  margin: 22px auto 18px auto;
  padding: 0 18px;
}

.bg-pagenav-card {
  background: var(--color-bg-surface);                     /* #fff – default card surface */
  border: 1px solid var(--color-border-default);           /* #E1E4E8 */
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  overflow: hidden;
}

.bg-pagenav-inner {
  padding: 14px;
}

.bg-topnav-grid {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.bg-topnav-tile {
  position: relative;
  border: 1px solid var(--color-border-default);           /* #E1E4E8 */
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-bg-tile);                        /* #000 – dark tile background */
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  cursor: pointer;
  display: block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}

.bg-topnav-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

.bg-topnav-tile img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.bg-topnav-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-bg-tile-overlay);                /* linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.15), rgba(0,0,0,0.0)) */
  pointer-events: none;
}

.bg-topnav-label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  color: var(--color-text-on-dark);                        /* #fff – white text on dark overlay */
  pointer-events: none;
}

.bg-topnav-label strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.35;
}

.bg-topnav-label span {
  display: block;
  font-size: 13.5px;
  opacity: 0.9;
  margin-top: 2px;
}

@media (max-width: 820px) {
  .bg-topnav-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .bg-topnav-tile img {
    height: 200px;
  }
}

/* =====================================================
   13) REFERENCES PAGE HELPERS
===================================================== */
.bgp-page .bg-pagecard {
  max-width: var(--bg-max);
  margin: 0 auto 40px auto;
  padding: 0 18px;
  box-sizing: border-box;
}

.bgp-page .bg-pagecard-inner {
  background: var(--color-bg-surface);                     /* #FFFFFF – default card */
  border: 1px solid var(--color-border-default);           /* #E1E4E8 */
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  padding: 22px 22px;
  box-sizing: border-box;
}

.bgp-page .bg-reflist {
  font-family: Verdana, sans-serif;
  line-height: 2.05;
  color: var(--color-text-strong);                         /* #222 – strong/primary text */
}

.bgp-page .bg-reflist .bg-ref {
  margin: 0 0 14px 0;
  font-size: 15.5px;
}

.bgp-page .bg-reflist em {
  color: var(--color-text-ref-em);                         /* #2F3A40 – slightly muted dark for emphasis */
}

.bgp-page .bg-footer {
  max-width: var(--bg-max);
  margin: 48px auto 0 auto;
  padding: 14px 18px;
  border-top: 1px solid var(--color-border-default);       /* #E1E4E8 */
  color: var(--color-text-muted);                          /* #6B7280 – muted footer text */
  font-size: 13px;
  line-height: 2.0;
  box-sizing: border-box;
}

.bgp-page .bg-footer p {
  margin: 0;
}

@media (max-width: 820px) {
  .bgp-page .bg-pagecard {
    padding: 0 14px;
  }
  .bgp-page .bg-pagecard-inner {
    padding: 18px 16px;
  }
  .bgp-page .bg-reflist .bg-ref {
    font-size: 15px;
    line-height: 2.0;
  }
}

/* =====================================================
   14) HOSTING AN EVENT PAGE HELPERS
===================================================== */
.bgp-page a.bg-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 2px;
}

.bgp-page .bg-callout {
  background: var(--color-bg-light-gray);                  /* #F6F7F8 – light gray callout bg */
  padding: 22px 24px;
  border-radius: 10px;
  margin: 0 0 18px 0;
  border-left: 4px solid var(--color-border-callout-default); /* #6F8FA3 – default callout accent */
  box-sizing: border-box;
}

.bgp-page .bg-panel--last {
  margin-bottom: 0;
}

.bgp-page .bg-callout--green {
  background: var(--color-bg-mint);                        /* #EAF4EE – green callout */
  border-left-color: var(--color-border-inset-green);      /* #7FAF95 */
  margin-top: 10px;
}

.bgp-page .bg-callout--red {
  background: var(--color-bg-callout-red);                 /* #F9ECEF – red callout */
  border-left-color: var(--color-border-inset-red);        /* #D88C9A */
}

.bgp-page .bg-panel-title {
  margin: 0 0 10px 0;
  font-family: Verdana, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.2px;
  line-height: 1.25;
  color: var(--color-text-panel-title);                    /* #111 – very dark title */
}

.bgp-page .bg-panel-lead {
  margin: 0 0 12px 0;
  font-family: Verdana, sans-serif;
  font-size: 15.5px;
  line-height: 2.05;
  color: var(--color-text-strong);                         /* #222 – lead text */
}

.bgp-page .bg-note {
  margin: 0 0 12px 0;
  font-family: Verdana, sans-serif;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-secondary);                      /* #444 – note text */
  opacity: 0.75;
}

.bgp-page .bg-list,
.bgp-page .bg-olist {
  margin: 0 0 12px 0;
  padding-left: 1.6em;
  font-family: Verdana, sans-serif;
  font-size: 15.5px;
  line-height: 2.05;
  color: var(--color-text-strong);                         /* #222 – list text */
}

.bgp-page .bg-list li,
.bgp-page .bg-olist li {
  margin: 0 0 10px 0;
}

.bgp-page .bg-list li:last-child,
.bgp-page .bg-olist li:last-child {
  margin-bottom: 0;
}

@media (max-width: 820px) {
  .bgp-page .bg-callout {
    padding: 18px 16px;
    border-radius: 10px;
  }
  .bgp-page .bg-panel-title {
    font-size: 20px;
  }
  .bgp-page .bg-panel-lead,
  .bgp-page .bg-list,
  .bgp-page .bg-olist {
    font-size: 15px;
    line-height: 2.0;
  }
}

/* =====================================================
   15) MEDIA PAGE HELPERS
===================================================== */
.bg-media-intro{
  background: var(--color-bg-mint);
  border: var(--color-bg-gray);
  border-radius: 6px;
  padding:20px 22px;
  margin:0 0 40px 0;
}
.bg-media-intro p{ margin:0; line-height:2.4; }

.bg-media-section-title{
  background:#F6F7F8;
  border:1px solid #E1E4E8;
  border-radius:6px;
  padding:18px 22px;
  margin:0 0 18px 0;
}
.bg-media-section-title p{ margin:0; line-height:2.4; }
.bg-media-section-title--spaced{ margin:36px 0 18px 0; }

.bg-media-list{
  line-height:2.4;
  padding-left:32px;
  margin:0 0 36px 0;
}

.bg-media-item{ margin:0 0 1.4em 0; }
.bg-media-item--nofigure{ margin:0 0 1.0em 0; }
.bg-media-item-text{ margin:0; }

.bg-media-figure{
  margin:16px 0 0 32px;
  max-width:50%;
}
.bg-media-figure img{
  width:100%;
  height:auto;
  border-radius:6px;
}
.bg-media-figure figcaption{
  display:block;
  font-size:14px;
  color:#666;
  margin-top:6px;
  line-height:1.4;
}
.bg-media-figure--bordered img{
  border-radius:4px;
  border:1px solid #888;
}

.bg-media-muted{
  color:#777;
  font-size:0.98em;
}

@media (max-width: 820px){
  .bg-media-figure{
    margin-left: 0;
    max-width: 100%;
  }
}

/* =====================================================
   16) PUBLISHED RESEARCH PAGE HELPERS
===================================================== */
.stephen_j_shaw_image {
  flex: 0 0 160px;
}

.stephen_j_shaw_image img {
  width: 100%;
  max-width: 160px;
}


.bg-space-18 {
  height: 18px;
}

.bg-research-nature-card {
  background: var(--color-bg-light-gray);                  /* #F6F7F8 – light gray card */
  padding: 22px 26px;
  border-radius: 6px;
  margin: 36px 0;
  border: 1px solid var(--color-border-default);           /* #E1E4E8 */
}

.bg-research-nature-row {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}

.bg-research-nature-logo {
  flex: 0 0 160px;
}

.bg-research-nature-logo img {
  width: 100%;
  max-width: 160px;
}

.bg-research-nature-text {
  flex: 1;
  min-width: 260px;
  line-height: 2.2;
}

.bg-research-lead {
  margin: 0 0 0.8em 0;
}

.bg-research-desc {
  margin: 0 0 1.0em 0;
}

.bg-research-callout {
  padding: 28px 30px;
  border-radius: 8px;
  margin: 40px 0;
}

.bg-research-callout--pink {
  background: var(--color-bg-callout-pink);                /* #FFF5F8 – pink callout */
  border-left: 4px solid var(--color-border-inset-pink);   /* #C62828 – pink accent */
}

.bg-research-callout--mint {
  background: var(--color-bg-mint);                        /* #F0F7F4 – mint callout */
  border-left: 4px solid var(--color-border-inset-mint);   /* #A8D5BA – mint accent */
}

.bg-research-callout--gray {
  background: var(--color-bg-gray);                        /* #F2F5F7 – gray callout */
  padding: 22px 26px;
  margin: 0 0 44px 0;
  border-left: 4px solid var(--color-border-inset-gray);   /* #B8C4CC – gray accent */
}

.bg-research-callout-sub {
  margin: 8px 0 0 0;
  font-size: 18px;
  color: var(--color-text-muted-sub);                      /* #555 – subtext muted */
}

.bg-research-callout-body {
  line-height: 2.4;
  margin: 0 0 1.2em 0;
}

.bg-research-callout-cta {
  margin: 24px 0 0 0;
}

.bg-research-headline {
  line-height: 2.4;
  margin: 0 0 0.8em 0;
}

.bg-research-body {
  line-height: 2.4;
  margin: 0 0 1.0em 0;
}

.bg-research-body--last {
  margin: 0;
}

.bg-research-formula {
  background: var(--color-bg-mint-formula);                /* #E6EFE8 – light mint formula bg */
  padding: 18px 20px;
  border-radius: 8px;
  margin: 28px auto 22px auto;
  text-align: center;
  max-width: 440px;
}

.bg-research-list {
  line-height: 2.4;
  padding-left: 32px;
  margin: 0 0 1.0em 0;
}

.bg-research-btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  border-radius: 6px;
}

.bg-research-btn--teal {
  background: var(--color-btn-bg-teal-research);           /* #2F6F73 – darker teal research btn */
  color: var(--color-btn-text-primary);                    /* #FFFFFF */
  font-size: 14px;
  padding: 8px 16px;
}

.bg-research-btn--red {
  background: var(--color-btn-bg-red-research);            /* #C93C2A – red research btn */
  color: var(--color-btn-text-primary);                    /* #FFFFFF */
  font-size: 16px;
  padding: 12px 32px;
  border-radius: 6px;
  box-shadow: 0 3px 10px var(--shadow-btn-red);            /* rgba(201,60,42,0.25) – red shadow */
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.bg-research-btn--red:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 14px var(--shadow-btn-red-hover);      /* rgba(201,60,42,0.35) – stronger hover shadow */
  filter: brightness(1.02);
}

.bg-divider {
  width: 120px;
  margin: 40px auto;
  border: 0;
  border-top: 2px solid var(--color-divider);              /* #999 – medium gray divider */
}

.bg-donate-row {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 36px 0 24px 0;
}

.bg-donate-text {
  flex: 1;
  min-width: 260px;
  line-height: 2.0;
  font-size: 15px;
  opacity: 0.9;
}

.bg-donate-title {
  margin: 0 0 0.6em 0;
}

.bg-donate-desc {
  margin: 0;
}

.bg-donate-cta {
  flex: 0 0 auto;
}

.bg-donorbox-btn {
  background: var(--color-btn-bg-primary);                 /* #007299 – brand teal */
  color: var(--color-btn-text-primary);                    /* #FFFFFF */
  text-decoration: none;
  font-family: Verdana, sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  border-radius: 5px;
  line-height: 22px;
  padding: 8px 22px;
}

.bg-donorbox-btn img {
  height: 16px;
  width: auto;
  display: inline-block;
}

.bg-footer-mini {
  margin: 48px 0 0 0;
  padding: 14px 16px;
  border-top: 1px solid var(--color-border-default);       /* #E1E4E8 */
  color: var(--color-text-muted);                          /* #6B7280 */
  font-size: 13px;
  line-height: 2.0;
}

.bg-footer-mini p {
  margin: 0;
}

/* =====================================================
   17) MEASURED FUTURES (WRAPPER STYLES ONLY)
===================================================== */
.bgp-page .bg-story-wrap {
  background: var(--color-bg-off-white);                   /* #FBFAF6 – very light warm off-white */
  padding: 48px 18px 64px 18px;
}

.bgp-page .bg-story-panel {
  max-width: 820px;
  margin: 0 auto;
  background: var(--color-bg-surface);                     /* #FFFFFF */
  border-radius: 10px;
  padding: 38px 34px 32px 34px;
  box-shadow: 0 10px 28px var(--shadow-story-panel);       /* rgba(0,0,0,0.10) – softer panel shadow */
  border: 1px solid var(--color-border-subtle-dark);       /* rgba(0,0,0,0.06) */
  box-sizing: border-box;
}

.bgp-page .bg-story-accent {
  height: 4px;
  background: var(--color-brand-teal);                     /* #007299 – brand teal accent bar */
  border-radius: 10px 10px 0 0;
  margin: -38px -34px 22px -34px;
}

.bgp-page .bg-story-title {
  text-align: center;
  margin: 0 0 0.45em 0;
  line-height: 1.15;
}

.bgp-page .bg-story-title span {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.bgp-page .bg-story-subtitle {
  text-align: center;
  margin: 0 0 1.6em 0;
  line-height: 1.45;
}

.bgp-page .bg-story-subtitle span {
  font-size: 20px;
  font-style: italic;
  opacity: 0.86;
}

.bgp-page .bg-story-byline {
  text-align: center;
  margin: 0 0 1.4em 0;
  line-height: 1.6;
}

.bgp-page .bg-story-byline span {
  font-size: 15px;
  opacity: 0.90;
}

.bgp-page .bg-story-divider {
  display: flex;
  justify-content: center;
  margin: 18px 0 22px 0;
}

.bgp-page .bg-story-divider > div {
  width: 140px;
  height: 2px;
  background: var(--color-divider-subtle);                 /* rgba(0,0,0,0.10) – subtle dark divider */
  border-radius: 2px;
}

.bgp-page .bg-story-authornote {
  background: var(--color-bg-author-note);                 /* #F4FBFE – very light cyan */
  border: 1px solid var(--color-border-author-note);       /* rgba(0,114,153,0.18) – subtle teal border */
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 26px 0;
  box-shadow: inset 3px 0 0 var(--color-shadow-author-note-inset); /* rgba(0,114,153,0.25) – teal inset */
}

.bgp-page .bg-story-authornote p {
  margin: 0;
  text-align: center;
  line-height: 1.65;
}

.bgp-page .bg-story-authornote span {
  font-size: 14px;
  color: var(--color-text-author-note);                    /* #2B2F33 – dark gray author note text */
  opacity: 0.90;
}

.bgp-page .bg-story-body {
  font-size: 17px;
  line-height: 1.90;
  color: var(--color-text-body-story);                     /* #1B1F23 – near-black body text */
}

.bgp-page .bg-story-footer {
  margin: 30px 0 0 0;
  padding: 14px 16px 0 16px;
  border-top: 1px solid var(--color-divider-subtle);       /* rgba(0,0,0,0.10) */
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.9;
  text-align: center;
}

.bgp-page .bg-story-footer p {
  margin: 0 0 12px 0;
}

.bgp-page .bg-story-emailbtn {
  display: inline-block;
  background: var(--color-brand-teal);                     /* #007299 */
  color: var(--color-btn-text-primary);                    /* #FFFFFF */
  font-size: 14px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 7px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px var(--shadow-btn-teal);            /* rgba(0,114,153,0.22) – teal shadow */
}

.bgp-page .bg-story-emailbtn:hover {
  filter: brightness(0.96);
}

@media (max-width: 820px) {
  .bgp-page .bg-story-wrap {
    padding: 34px 14px 46px 14px;
  }
  .bgp-page .bg-story-panel {
    padding: 26px 18px 22px 18px;
  }
  .bgp-page .bg-story-accent {
    margin: -26px -18px 18px -18px;
  }
  .bgp-page .bg-story-title span {
    font-size: 34px;
  }
  .bgp-page .bg-story-subtitle span {
    font-size: 16.5px;
  }
  .bgp-page .bg-story-body {
    font-size: 16px;
    line-height: 1.85;
  }
}

/* =====================================================
   18) BAROMETER (STRICTLY SCOPED)
   - Add <body class="bgp-barometer"> on Barometer page
===================================================== */
body.bgp-barometer {
  /* page-scoped vars – kept for backward compatibility / scoping */
  --bg-brand: var(--color-brand-teal);                     /* #007299 */
  --bg-wrap:  var(--color-bg-barometer-wrap);              /* #0B1F26 */
  --bg-panel: var(--color-bg-barometer-panel);             /* #233A42 */
  --bg-card:  var(--color-bg-barometer-card);              /* #16262C */

  margin: 0;
  background: var(--color-bg-page);                        /* #ffffff in light; overridden in dark */
  font-family: Verdana, sans-serif;
}


body.bgp-barometer .bgp-patreon-cta-inner {
  height: 56px;
  min-height: 56px;

  padding: 0 0 0 24px;
  display: flex;
  align-items: center;

  gap: 12px;
  justify-content: space-between;
  flex-wrap: nowrap;

  max-height: 60px;
}

body.bgp-barometer .bgp-patreon-cta-inner p {
  margin: 0;
  padding: 0;

  font-size: 16px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--color-text-patreon);                        /* #2E2E2E – dark text on light strip */

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  flex: 0 1 auto;
  max-width: 65%;
}

body.bgp-barometer .bgp-patreon-cta-inner p strong {
  font-weight: 900;
  font-size: 16.5px;
  letter-spacing: -0.01em;
}

body.bgp-barometer .bgp-patreon-cta-inner a {
  display: inline-block;

  background: var(--color-btn-bg-patreon);                 /* #C43C2E */
  color: var(--color-btn-text-patreon);                    /* #FFFFFF */
  text-decoration: none;

  width: 150px;
  flex: 0 0 150px;

  margin-left: auto;
  margin-right: -8px;

  padding: 8px 16px;

  font-size: 14px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;

  border-radius: 6px;

  transition: transform .18s ease, filter .18s ease;
}

body.bgp-barometer .bgp-patreon-cta-inner a:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

@media (min-width: 1000px) {
  body.bgp-barometer .bgp-patreon-cta-inner a {
    margin-right: 18px;
  }
}

@media (max-width: 820px) {
  /* hide on mobile if desired */
  body.bgp-barometer .bgp-patreon-cta-strip {
    display: none;
  }
}

/* Main wrap */
body.bgp-barometer .bgp-wrap {
  background: var(--bg-wrap);                              /* dark wrap bg */
  color: var(--color-text-on-dark);                        /* rgba(255,255,255,0.92) – light text on dark */
  border-radius: 12px;
  padding: 18px;
  margin: 0 0 24px 0;
}

/* Intro card */
body.bgp-barometer .bg-intro-card {
  background: var(--bg-wrap);                              /* #0B1F26 – same dark as wrap */
  color: var(--color-text-on-dark);                        /* rgba(255,255,255,0.92) */
  padding: 48px 30px;
  border-radius: 8px;
  margin: 0 0 56px 0;
  text-align: center;
  box-shadow: 0 10px 30px var(--shadow-intro-card);        /* rgba(0,0,0,0.5) – strong dark shadow */
  border: 1px solid var(--color-border-subtle-light);      /* rgba(255,255,255,0.08) */
}

body.bgp-barometer .bg-intro-title {
  font-size: 48px;
  font-weight: 800;
  margin: 0 0 22px 0;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

body.bgp-barometer .bg-intro-row {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  text-align: left;
}

body.bgp-barometer .bg-intro-text {
  font-size: 22px;
  line-height: 1.55;
  margin: 0;
  opacity: 0.9;
}

body.bgp-barometer .bg-intro-imgwrap {
  flex: 0 0 28%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}

body.bgp-barometer .bg-intro-img {
  width: 100%;
  max-width: 460px;
  border-radius: 10px;
  opacity: 0.95;
  display: block;
  margin: 0;
  box-shadow: 0 10px 30px var(--shadow-intro-image);       /* rgba(0,0,0,0.35) */
  cursor: pointer;
}

body.bgp-barometer .bg-intro-caption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--color-text-caption);                        /* rgba(255,255,255,0.7) – muted light caption */
}

@media (max-width: 820px) {
  body.bgp-barometer .bg-intro-row {
    flex-direction: column;
    gap: 18px;
  }
  body.bgp-barometer .bg-intro-imgwrap {
    width: 100%;
    align-items: center;
  }
  body.bgp-barometer .bg-intro-img {
    max-width: 100%;
  }
  body.bgp-barometer .bg-intro-title {
    font-size: 34px;
  }
  body.bgp-barometer .bg-intro-text {
    font-size: 18px;
  }
  body.bgp-barometer .bg-intro-card {
    padding: 34px 18px;
  }
}

/* Country accordion */
body.bgp-barometer .bgp-details {
  background: var(--bg-panel);                             /* panel bg */
  border: 1px solid var(--color-border-subtle-light);      /* rgba(255,255,255,0.10) */
  border-radius: 14px;
  margin: 0 0 28px 0;
  box-shadow: 0 10px 28px var(--shadow-details);           /* rgba(0,0,0,0.30) */
  overflow: hidden;
}

body.bgp-barometer .bgp-summary {
  padding: 20px 28px;
  background: var(--color-bg-summary-gradient);            /* linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(0,0,0,0.10)) */
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text-on-dark);                        /* white */
  font-size: 1.15em;
  font-weight: 600;
}

body.bgp-barometer .bgp-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.bgp-barometer .bgp-flag {
  width: 28px;
  height: auto;
  border-radius: 3px;
}

body.bgp-barometer .bgp-chevron {
  font-size: 1.5em;
  transition: transform 0.25s;
}

body.bgp-barometer .bgp-details[open] .bgp-chevron {
  transform: rotate(180deg);
}

body.bgp-barometer .bgp-acc-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  background: var(--bg-panel);
}

body.bgp-barometer .bgp-details[open] .bgp-acc-wrap {
  max-height: 12000px;
}

body.bgp-barometer .bgp-body {
  padding: 22px 28px 28px;
}

body.bgp-barometer .bgp-faux-header {
  text-align: center;
  margin-bottom: 24px;
}

body.bgp-barometer .bgp-country-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 1.6em;
  font-weight: 700;
  color: var(--color-text-on-dark);                        /* #fff */
}

body.bgp-barometer .bgp-years {
  color: var(--color-text-barometer-years);                /* #a0c0d0 – light teal-gray */
  font-size: 0.85em;
}

body.bgp-barometer .bgp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

body.bgp-barometer .bgp-section {
  grid-column: 1 / -1;
  text-align: center;
  margin: 32px 0 16px;
}

body.bgp-barometer .bgp-section-title {
  font-size: 1.8em;
  margin: 0 0 8px;
  color: var(--color-text-on-dark);                        /* #fff */
}

body.bgp-barometer .bgp-panel {
  background: var(--bg-card);                              /* card bg */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px var(--shadow-panel);              /* rgba(0,0,0,0.4) */
}

body.bgp-barometer .bgp-thumb {
  display: block;
  cursor: pointer;
}

body.bgp-barometer .bgp-img {
  width: 100%;
  height: auto;
  display: block;
}

body.bgp-barometer .bgp-cap {
  height: 0;
  margin: 0;
}

body.bgp-barometer .bgp-chip {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text-on-dark);                        /* white */
  background: var(--color-bg-chip);                        /* rgba(0,114,153,0.85) – semi-transparent teal */
  border: 1px solid var(--bg-brand);                       /* brand teal border */
  padding: 8px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.bgp-barometer .bgp-chip-main::before {
  content: "Open";
}

body.bgp-barometer .bgp-details[open] .bgp-chip-main::before {
  content: "Close";
}

body.bgp-barometer .bgp-source-wrap {
  margin-top: 40px;
  padding: 20px;
  background: var(--color-bg-source-wrap);                 /* rgba(20, 40, 50, 0.6) – dark muted bg */
  border-radius: 8px;
  font-size: 0.95em;
}

/* Lightbox */
body.bgp-barometer .bgp-toggle {
  display: none;
}

body.bgp-barometer .bgp-lightbox {
  position: fixed;
  inset: 0;
  background: var(--color-bg-lightbox);                    /* rgba(0,0,0,0.92) – near-black overlay */
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

body.bgp-barometer .bgp-toggle:checked + .bgp-lightbox {
  display: flex;
}

body.bgp-barometer .bgp-lightbox-inner {
  max-width: 90vw;
  max-height: 90vh;
  position: relative;
}

body.bgp-barometer .bgp-lightbox img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

body.bgp-barometer .bgp-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: var(--color-text-on-dark);                        /* white */
  font-size: 3em;
  cursor: pointer;
}

/* Mobile modal */
body.bgp-barometer .bgp-mmodal {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-bg-lightbox);                    /* same as lightbox */
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

body.bgp-barometer #bgp-mmodal[aria-hidden="false"] {
  display: flex !important;
}

body.bgp-barometer .bgp-mmodal-inner {
  width: min(980px, 100%);
  background: var(--bg-wrap);                              /* dark bg */
  border: 1px solid var(--color-border-subtle-light);      /* rgba(255,255,255,0.10) */
  border-radius: 14px;
  position: relative;
  padding: 16px 14px 14px;
  box-shadow: 0 18px 48px var(--shadow-modal);             /* rgba(0,0,0,0.55) */
}

body.bgp-barometer .bgp-mmodal-viewport {
  width: 100%;
  overflow: auto;
  border-radius: 10px;
  background: var(--color-bg-tile);                        /* #000 – black viewport */
  padding: 10px;
  box-sizing: border-box;
}

body.bgp-barometer .bgp-mmodal-viewport img {
  width: auto;
  max-width: none;
  height: auto;
  max-height: 70vh;
  display: block;
  margin: 0 auto;
}

body.bgp-barometer .bgp-mmodal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 34px;
  line-height: 1;
  color: var(--color-text-on-dark);                        /* #fff */
  cursor: pointer;
  user-select: none;
}

body.bgp-barometer .bgp-mail {
  position: absolute;
  top: 14px;
  left: 14px;
  color: var(--color-text-on-dark);                        /* #fff */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-bg-mail-icon);                   /* rgba(255,255,255,0.10) */
  border: 1px solid var(--color-border-mail-icon);         /* rgba(255,255,255,0.12) */
}

body.bgp-barometer .bgp-mail:hover {
  background: var(--color-bg-mail-hover);                  /* rgba(255,255,255,0.16) */
}

body.bgp-barometer .bgp-mmodal-hint {
  margin-top: 10px;
  text-align: center;
  color: var(--color-text-hint);                           /* rgba(255,255,255,0.70) */
  font-size: 13px;
}

@media (max-width: 820px) {
  body.bgp-barometer .bgp-body {
    padding: 18px 16px 22px;
  }
  body.bgp-barometer .bgp-summary {
    padding: 18px 16px;
  }
  body.bgp-barometer .bgp-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   19) MISC UTILITIES
===================================================== */
.bg-linkblock {
  margin-top: 10px;
}

.bg-linkblock a {
  color: var(--color-text-link);                           /* #007299 – brand teal links */
  text-decoration: none;
  word-break: break-word;
}

.ql-size-small {
  font-size: 0.92em !important;
  line-height: 1.55 !important;
}

/* Outer strip */
.bgp-page .bgp-patreon-cta-strip {
  width: 100% !important;
  max-width: var(--bg-max, 960px) !important;
  margin: 12px auto 24px auto !important;

  background: var(--color-patreon-bg) !important;
  border: 1px solid var(--color-border-default) !important; /* grey #E1E4E8 */
  border-left: 4px solid var(--color-patreon-red) !important;

  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Row */
.bgp-page .bgp-patreon-cta-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;

  /* WP-like: slightly taller than your original */
  min-height: 62px !important;
  padding: 0 18px 0 22px !important;

  box-sizing: border-box !important;
}

/* Copy */
.bgp-page .bgp-patreon-cta-inner p {
  margin: 0 !important;
  padding: 0 !important;

  font-family: var(--bg-font, "Lato", Arial, sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  color: var(--bg-patreon-text) !important;

  /* keep it clean like WP */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.bgp-page .bgp-patreon-cta-inner p strong {
  font-weight: 900 !important;
  color: var(--color-text-strong-patreon);                /* #111827 – very dark strong text */
}

/* ✅ Button */
.bgp-page .bgp-patreon-cta-inner a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-family: var(--bg-font, "Lato", Arial, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;

  color: var(--color-btn-text-patreon) !important;        /* #fff */
  background: var(--color-patreon-red) !important;
  text-decoration: none !important;

  height: 42px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;

  border: 1px solid var(--color-border-default) !important;     /* rgba(0,0,0,0.10) */
  border-color: var(--color-patreon-red) !important;
  box-shadow: var(--shadow-patreon-btn) !important;                 /* 0 8px 18px rgba(0,0,0,0.14) */

  white-space: nowrap !important;
  flex: 0 0 auto !important;

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

.bgp-page .bgp-patreon-cta-inner a:hover {
  filter: brightness(1.03) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-patreon-btn-hover) !important;           /* 0 12px 24px rgba(0,0,0,0.18) */
}

.bgp-page .bgp-patreon-cta-inner a:active {
  transform: translateY(0) !important;
}

/* Tiny WP alignment improvement on wide screens */
@media (min-width: 1000px) {
  .bgp-page .bgp-patreon-cta-inner {
    padding-right: 22px !important;
  }
}

/* OPTIONAL: hide on mobile */
@media (max-width: 820px) {
  .bgp-page .bgp-patreon-cta-strip {
    display: none !important;
  }
}

/* =========================================
   HOME: 3-CARD ACTION GRID (Eventive clone)
========================================= */

.bg-actions {
  max-width: 1120px;
  margin: 44px auto 40px auto;
  padding: 0 18px;
  box-sizing: border-box;
}

.bg-actions__title {
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.12;
  margin: 0 0 18px 0;
  font-size: clamp(30px, 3.2vw, 44px);
}

.bg-actions__frame {
  background: var(--color-bg-surface);                     /* #FFFFFF */
  border: 1px solid var(--color-border-actions);           /* #D9D4CC – actions divider/border */
  border-radius: 6px;
  overflow: hidden;                                        /* keeps dividers clean */
}

.bg-actions__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bg-actions__col {
  padding: 26px 26px 24px 26px;
  box-sizing: border-box;
}

.bg-actions__col + .bg-actions__col {
  border-left: 1px solid var(--color-border-actions);      /* #D9D4CC – vertical divider */
}

/* small maroon kicker */
.bg-actions__kicker {
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 18px;
  color: var(--color-text-kicker);                         /* #5B1414 – maroon-ish */
  margin: 0 0 6px 0;
}

/* italic subhead */
.bg-actions__subhead {
  text-align: center;
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  color: var(--color-text-subhead);                        /* #2A2A2A – dark gray subhead */
  margin: 0 0 16px 0;
}

.bg-actions__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  border: 1px solid var(--color-border-subtle);            /* rgba(0,0,0,0.06) */
  margin: 0 0 16px 0;
}

/* body copy */
.bg-actions__lead {
  font-weight: 900;
  font-size: 26px;
  line-height: 1.25;
  color: var(--color-text-strong);                         /* #222 */
  margin: 0 0 10px 0;
}

.bg-actions__text {
  font-size: 19px;
  line-height: 1.85;
  color: var(--color-text-body);                           /* #2B2B2B – slightly softer dark */
  margin: 0 0 18px 0;
}

.bg-actions__ctaWrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* button style matches your teal CTA vibe */
.bg-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: Verdana, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 14px;
  padding: 14px 22px;
  border-radius: 3px;
  background: var(--color-brand-teal);                     /* #007299 – Birthgap Teal */
  color: var(--color-btn-text-primary);                    /* #FFFFFF */
  border: 1px solid var(--color-border-btn-subtle);        /* rgba(0,0,0,0.10) */
  box-shadow: var(--shadow-btn-actions);                   /* 0 2px 6px rgba(0,0,0,0.10) */
  transition: transform 0.12s ease, background 0.18s ease;
  white-space: nowrap;
}

.bg-actions__btn:hover {
  background: var(--color-brand-teal-hover);               /* #005F7F – darker teal hover */
  transform: translateY(-1px);
}

/* Responsive: stack columns and replace vertical dividers with horizontal */
@media (max-width: 980px) {
  .bg-actions__grid {
    grid-template-columns: 1fr;
  }
  .bg-actions__col + .bg-actions__col {
    border-left: none;
    border-top: 1px solid var(--color-border-actions);     /* #D9D4CC */
  }
}

/* =====================================================
   HOME: How to Participate, Watch, & Explore (3-panel)
   Typography calibration to match the module below
===================================================== */

.bg-actions {
  /* bring this whole block down to match surrounding typography */
  font-size: 0.92rem;
  line-height: 1.6;
}

.bg-actions__title {
  font-size: 2.1rem;      /* keeps the big section headline */
  line-height: 1.15;
  margin: 0 0 18px 0;
}

/* inside the framed 3-column panel */
.bg-actions__frame {
  font-size: 1em;         /* ensures no inherited bumps */
}

.bg-actions__kicker {
  font-size: 0.95em;
  letter-spacing: 0.03em;
  margin: 0 0 6px 0;
}

.bg-actions__subhead {
  font-size: 1.25em;      /* was reading too large */
  margin: 0 0 14px 0;
}

.bg-actions__lead {
  font-size: 1.35em;      /* this is the big offender */
  line-height: 1.25;
  margin: 14px 0 10px 0;
}

.bg-actions__text {
  font-size: 1.05em;      /* body copy in cards */
  line-height: 1.65;
  margin: 0 0 18px 0;
}

/* Button: slightly smaller + less bulky */
.bg-actions__btn {
  font-size: 0.95em;
  padding: 10px 18px;
}

/* Final nudge to match the module below more closely */
.bg-actions__title {
  font-size: 1.95rem;   /* down from ~2.1 */
  letter-spacing: -0.01em;
}

.bg-actions__lead {
  font-size: 1.28em;    /* down from ~1.35 */
  font-weight: 700;
}

.bg-actions__text {
  font-size: 1.02em;    /* tiny nudge */
}

/* =========================================
   ACTION CARDS – BUTTON NORMALIZATION
   Matches "More Than a Screening" CTAs
========================================= */

.bg-actions .bg-btn,
.bg-actions a.button,
.bg-actions a.cta {
  font-size: 14px;              /* down from ~15–16px */
  font-weight: 600;
  padding: 9px 18px;            /* tighter vertical rhythm */
  border-radius: 6px;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-btn-actions); /* reused from earlier – rgba(0,0,0,0.12) or dark-adjusted */
}

/* Optional: slightly reduce visual dominance */
.bg-actions .bg-btn {
  background-color: var(--color-brand-teal);     /* #007299 – unchanged brand */
}

.bg-actions .bg-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-actions-hover);   /* e.g. rgba(0,0,0,0.14) or dark variant */
}

/* Small override */
.bg-actions__kicker {
  font-size: 0.9em;
}

/* =====================================================
   HOME 3-CARD CTAs — make smaller + more elegant
   (Put at VERY END of global.css)
===================================================== */

.bg-actions__btn {
  font-family: var(--bg-font) !important;   /* match site type */
  font-size: 13px !important;
  font-weight: 700 !important;

  text-transform: none !important;         /* kill the shout */
  letter-spacing: 0.2px !important;

  padding: 10px 16px !important;           /* smaller */
  border-radius: 8px !important;           /* softer */
  line-height: 1 !important;

  box-shadow: var(--shadow-btn-actions) !important; /* lighter – reused */
}

.bg-actions__btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.02) !important;
  box-shadow: var(--shadow-btn-actions-hover) !important;
}

.bg-actions__btn {
  background: var(--color-bg-surface) !important;           /* #ffffff */
  color: var(--color-brand-teal) !important;                /* #007299 */
  border: 1px solid var(--color-border-brand-teal-subtle) !important; /* rgba(0,114,153,0.55) */
  box-shadow: none !important;
}

.bg-actions__btn:hover {
  background: var(--color-bg-teal-hover-subtle) !important; /* rgba(0,114,153,0.06) */
}

/* =====================================================
   BAROMETER: constrain content width like other pages
   (put at VERY END of global.css)
===================================================== */

body.bgp-barometer .bgp-wrap {
  max-width: var(--bg-max, 960px) !important;
  margin: 0 auto 24px auto !important;  /* centers */
  border-radius: 12px;
}

/* =========================================================
   GLOBAL ACCORDION MODE FIXES
   (Open / Close all via radios — unified system)

   KEEP THIS AT THE *END* OF /css/global.css
========================================================= */

/* ---------------------------------------------------------
   1) Hide mode radios (state only, never visible)
--------------------------------------------------------- */
.bg-about-mode,
.bg-persp-mode,
.bg-facts-mode,
.bg-faq-mode {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  left: -9999px !important;
}
/* ---------------------------------------------------------
   2) Default button visibility
--------------------------------------------------------- */
.bg-about-openall{ display:inline-flex; }
.bg-about-closeall{ display:none; }

/* ---------------------------------------------------------
   3) ABOUT / FACTS / FAQ / PERSPECTIVES
      (all share .bg-about-shell + .bg-about-*)
--------------------------------------------------------- */

/* Normal mode */
#bg-about-mode-normal:checked ~ .bg-about-shell .bg-about-openall,
#bg-facts-mode-normal:checked ~ .bg-about-shell .bg-about-openall,
#bg-persp-mode-normal:checked ~ .bg-about-shell .bg-about-openall,
#bg-faq-mode-normal:checked   ~ .bg-about-shell .bg-about-openall{
  display:inline-flex;
}

#bg-about-mode-normal:checked ~ .bg-about-shell .bg-about-closeall,
#bg-facts-mode-normal:checked ~ .bg-about-shell .bg-about-closeall,
#bg-persp-mode-normal:checked ~ .bg-about-shell .bg-about-closeall,
#bg-faq-mode-normal:checked   ~ .bg-about-shell .bg-about-closeall{
  display:none;
}

/* Open-all mode */
#bg-about-mode-open:checked ~ .bg-about-shell .bg-about-openall,
#bg-facts-mode-open:checked ~ .bg-about-shell .bg-about-openall,
#bg-persp-mode-open:checked ~ .bg-about-shell .bg-about-openall,
#bg-faq-mode-open:checked   ~ .bg-about-shell .bg-about-openall{
  display:none;
}

#bg-about-mode-open:checked ~ .bg-about-shell .bg-about-closeall,
#bg-facts-mode-open:checked ~ .bg-about-shell .bg-about-closeall,
#bg-persp-mode-open:checked ~ .bg-about-shell .bg-about-closeall,
#bg-faq-mode-open:checked   ~ .bg-about-shell .bg-about-closeall{
  display:inline-flex;
}

/* ---------------------------------------------------------
   4) CRITICAL: Open-all forces panels open
      and disables per-item toggles
--------------------------------------------------------- */

#bg-about-mode-open:checked ~ .bg-about-shell .bg-about-wrap,
#bg-facts-mode-open:checked ~ .bg-about-shell .bg-about-wrap,
#bg-persp-mode-open:checked ~ .bg-about-shell .bg-about-wrap,
#bg-faq-mode-open:checked   ~ .bg-about-shell .bg-about-wrap{
  grid-template-rows:1fr !important;
  opacity:1 !important;
}

#bg-about-mode-open:checked ~ .bg-about-shell .bg-about-q,
#bg-facts-mode-open:checked ~ .bg-about-shell .bg-about-q,
#bg-persp-mode-open:checked ~ .bg-about-shell .bg-about-q,
#bg-faq-mode-open:checked   ~ .bg-about-shell .bg-about-q{
  pointer-events:none !important;
  cursor:default !important;
}

#bg-about-mode-open:checked ~ .bg-about-shell .bg-about-q::after,
#bg-facts-mode-open:checked ~ .bg-about-shell .bg-about-q::after,
#bg-persp-mode-open:checked ~ .bg-about-shell .bg-about-q::after,
#bg-faq-mode-open:checked   ~ .bg-about-shell .bg-about-q::after{
  display:none !important;
}



/* =====================================================
   DARK MODE: System preference (prefers-color-scheme: dark)
   - Overrides semantic variables from :root (tokens only)
   - Keeps layout CSS OUT of dark-mode block (so it won't reintroduce spacing bugs)
   - Maintains your aliases (--bg-page/--bg-text/--bg-link) via variable propagation
===================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* ---------------------------------------------
       Page & surfaces
    --------------------------------------------- */
    --color-bg-page:               #0f1419;
    --color-bg-surface:            #11171f;
    --color-bg-light-gray:         #1f2937;
    --color-bg-gray:               #1f2937;
    --color-bg-very-light:         #1e293b;
    --color-bg-off-white:          #0f1419;

    --color-bg-mint:               #060606;
    --color-bg-mint-light:         #1a2e24;
    --color-bg-mint-formula:       #1a2e24;

    --color-bg-author-note:        #0d1e26;
    --color-bg-callout-red:        #3d1f24;
    --color-bg-callout-pink:       #3d1f24;

    /* ---------------------------------------------
       Text
    --------------------------------------------- */
    --color-text-primary:          #e0e0e0;
    --color-text-strong:           #f0f4f8;
    --color-text-secondary:        #a0a0a0;
    --color-text-muted:            #9ca3af;
    --color-text-body:             #e0e0e0;

    --color-text-panel-title:      #f0f4f8;
    --color-text-ref-em:           #a3bffa;
    --color-text-muted-sub:        #9ca3af;
    --color-text-author-note:      #d1d5db;
    --color-text-body-story:       #e0e0e0;
    --color-text-strong-patreon:   #f0f4f8;

    --color-text-kicker:           #ff9f80;
    --color-text-subhead:          #d1d5db;

    --color-text-on-dark:          #f0f4f8;
    --color-text-on-primary:       #ffffff;

    /* Link color in dark mode (semantic) */
    --color-text-link:             var(--color-link-dark);

    /* ---------------------------------------------
       Borders & dividers
    --------------------------------------------- */
    --color-border-default:        #2a3745;
    --color-border-actions:        #334155;
    --color-border-dropdown:       #334155;

    --color-border-subtle:         rgba(255,255,255,0.12);
    --color-border-subtle-dark:    rgba(255,255,255,0.08);

    --color-border-inset-mint:     #4a6b58;
    --color-border-inset-gray:     #4b5563;
    --color-border-inset-green:    #191d24;
    --color-border-inset-red:      #8b4a55;
    --color-border-inset-pink:     #e05a4d;

    --color-divider:               #666666;
    --color-divider-subtle:        rgba(255,255,255,0.10);

    /* New/required extras (if referenced elsewhere) */
    --color-border-author-note:    rgba(77,184,255,0.18);
    --color-border-callout-default: var(--color-border-inset-callout);
    --color-border-btn-subtle:     rgba(255,255,255,0.14);

    /* ---------------------------------------------
       Hero & section header
    --------------------------------------------- */
    --color-bg-hero:               linear-gradient(160deg, #0a1f2a 0%, #00050a 100%);
    --color-bg-hero-fallback:      #00050a;
    --color-bg-hero-mobile-fallback:#000000;

    --color-bg-mobile-subtitle-gradient:
      linear-gradient(to bottom, rgba(10,35,45,0.98), rgba(5,20,28,0.98));

    --color-text-hero-title:       #f0f4f8;
    --color-text-hero-subtitle:    rgba(240,244,248,0.86);

    /* ---------------------------------------------
       Brand strip & nav
    --------------------------------------------- */
    --color-bg-brand-strip:        #004d66;
    --color-text-brand-title:      #f0f4f8;

    --color-bg-mobile-overlay:     rgba(0, 60, 80, 0.98);
    --color-bg-menu-trigger-hover: rgba(255,255,255,0.08);

    /* ---------------------------------------------
       Dropdown
    --------------------------------------------- */
    --color-bg-dropdown:           #1e293b;
    --color-text-dropdown:         #e2e8f0;
    --color-bg-dropdown-hover:     #334155;

    /* ---------------------------------------------
       Buttons
    --------------------------------------------- */
    --color-btn-bg-default:        #1e293b;
    --color-btn-text-default:      #e2e8f0;
    --color-btn-border-default:    #334155;

    --color-btn-bg-primary:        var(--color-brand-teal);
    --color-btn-text-primary:      #ffffff;

    --color-btn-bg-patreon:        var(--color-patreon-red);
    --color-btn-text-patreon:      #ffffff;

    --color-btn-bg-teal-research:  #2f6f73;
    
    --color-btn-bg-red-research:   #c93c2a;
    /* Keep any “subtle hover” helpers sane */
    --color-bg-teal-hover-subtle:  rgba(0,114,153,0.12);


    --bg-active-corner-light: rgba(196,60,46,0.75);
    --bg-active-corner-barometer: rgba(196,60,46,0.95);


    /* ---------------------------------------------
       Barometer / dark themed page
       (still keep these explicit so you can tune separately)
    --------------------------------------------- */
    --color-bg-barometer-wrap:     #071118;
    --color-bg-barometer-panel:    #142630;
    --color-bg-barometer-card:     #0f1d24;

    --color-bg-source-wrap:        rgba(10, 20, 28, 0.75);
    --color-bg-summary-gradient:
      linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(0,0,0,0.14));

    --color-text-barometer-years:  #a0c0d0;

    --color-bg-lightbox:           rgba(0,0,0,0.94);
    --color-text-caption:          rgba(255,255,255,0.72);
    --color-text-hint:             rgba(255,255,255,0.72);

    --color-bg-mail-icon:          rgba(255,255,255,0.10);
    --color-border-mail-icon:      rgba(255,255,255,0.16);
    --color-bg-mail-hover:         rgba(255,255,255,0.18);

    /* ---------------------------------------------
       Expander
    --------------------------------------------- */
    --color-bg-expander-summary:   rgba(255,255,255,0.06);
    --color-border-expander:       rgba(255,255,255,0.12);
    --color-bg-expander-content:   rgba(17,23,31,0.9);

    --color-bg-expander-arrow:     #2a3745;
    --color-text-expander-arrow:   #d1d5db;
    --color-bg-expander-arrow-open:#334155;

    /* ---------------------------------------------
       Shadows (dark)
    --------------------------------------------- */
    --shadow-soft:                 0 4px 12px rgba(0,0,0,0.50);
    --shadow-btn:                  0 2px 6px rgba(0,0,0,0.60);
    --shadow-btn-hover:            0 4px 12px rgba(0,0,0,0.70);
    --shadow-card:                 0 10px 26px rgba(0,0,0,0.50);

    --shadow-story-panel:          rgba(0,0,0,0.60);
    --shadow-details:              rgba(0,0,0,0.55);

    --shadow-intro-card:           rgba(0,0,0,0.62);
    --shadow-intro-image:          rgba(0,0,0,0.45);
    --shadow-panel:                rgba(0,0,0,0.55);
    --shadow-modal:                rgba(0,0,0,0.70);

    /* ---------------------------------------------
       Utility tiles
    --------------------------------------------- */
    --color-bg-footer: #052F36;  
    --color-bg-tile:               #000000;
    --color-bg-tile-overlay:
      linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.35), rgba(0,0,0,0.0))

  }

  /* Images: subtle dim for contrast (safe + optional) */
    @media (prefers-color-scheme: dark){
    .bgp-page img:not(.bg-no-dim){ filter: brightness(0.92) contrast(1.05); }
    }

 
}



/* =====================================================
   HERO LOGO (NOT DARK-MODE SPECIFIC)
===================================================== */
.bgp-page .bg-hero-logo{
  position:absolute;
  right:-12px;
  top:48%;
  transform:translateY(-50%) rotate(9deg);

  height: var(--bg-hero-logo-h);
  width:auto;
  max-height:120px;
  opacity:0.88;

  pointer-events:none;
  user-select:none;

  filter: drop-shadow(0 5px 14px var(--color-shadow-hero-logo)) brightness(1.06);
}

/* Prevent overflow on smaller screens */
@media (max-width: 960px){
  .bgp-page .bg-hero-logo{
    right:0;
    height:80px;
  }
}

/* Ensure hero container clips overflow */
.bg-hero-inner{ overflow:hidden; }

/* =====================================================
   LOCK HERO TO EXACT ORIGINAL WP SIZES (No Clamp, Fixed Pixels)
   - Title: 48px (original large feel)
   - Tagline: 22px
   - Padding: 38px top/bottom, 20px sides (original)
   - Logo: 120px height, right -12px (original)
   - Prevent overlap & overflow
===================================================== */



/* Hero container - exact padding & min height */
.bgp-page .bg-hero {
  padding: 38px 20px 42px 20px !important; /* original --bg-hero-pad-y-top/bottom + x */
  background: var(--color-bg-hero) !important;
}

/* Title - fixed size from original WP */
.bgp-page .bg-hero-title {
  font-size: 48px !important; /* exact original large title */
  line-height: 1.10 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 8px 0 !important;
  max-width: 20ch !important;
  text-wrap: balance !important;
}

/* Tagline - fixed */
.bgp-page .bg-hero-tagline {
  font-size: 18px !important; 
  line-height: 1.38 !important;
  font-weight: 600 !important;
  margin: 0 auto !important;
  max-width: 54ch !important;
}

/* Logo - exact original size & position */
.bgp-page .bg-hero-logo {
  position: absolute !important;
  right: -12px !important;
  top: 48% !important;
  transform: translateY(-50%) rotate(9deg) !important;
  height: 120px !important; /* exact original */
  width: auto !important;
  max-height: 120px !important;
  opacity: 0.88 !important;
}

/* Prevent text/logo overlap & overflow */
.bgp-page .bg-hero-inner {
  overflow: hidden !important;
  max-width: 900px !important;
  padding: 0 40px !important;
  position: relative !important;
}

.bgp-page .bg-hero-lockup {
  max-width: 720px !important;
  padding-right: 140px !important; /* original reserve space for logo */
  margin: 0 auto !important;
}

/* Mobile - revert to original mobile sizes */
@media (max-width: 820px) {
  .bgp-page .bg-hero {
    padding: 0 !important;
    background: #070808 !important;
    margin-bottom: 20px !important;
  }

  .bgp-page .bg-hero-title {
    font-size: 36px !important; /* original mobile shrink */
  }

  .bgp-page .bg-hero-tagline {
    font-size: 18px !important;
  }

  .bgp-page .bg-hero-logo {
    display: none !important; /* original WP hides logo on mobile */
  }

  .bgp-page .bg-hero-mobile-subtitle {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
}


/* =====================================================
   HERO LOGO & SIZING (LIGHT MODE BASE + DARK MODE ADJUSTMENTS)
   - Fixed pixels from original WP (no clamp shrink)
   - Dark mode: darker gradient, light text, adjusted logo shadow/filter
===================================================== */

/* Hero logo (same in both modes, shadow adjusted in dark) */
.bgp-page .bg-hero-logo {
  position: absolute;
  right: -12px;
  top: 48%;
  transform: translateY(-50%) rotate(9deg);

  height: var(--bg-hero-logo-h);
  width: auto;
  max-height: 120px;
  opacity: 0.88;

  pointer-events: none;
  user-select: none;

  filter: drop-shadow(0 5px 14px var(--color-shadow-hero-logo)) brightness(1.06);
}

/* Prevent overflow on smaller screens */
@media (max-width: 960px) {
  .bgp-page .bg-hero-logo {
    right: 0;
    height: 80px;
  }
}

/* Ensure hero container clips overflow */
.bg-hero-inner {
  overflow: hidden;
}

/* =====================================================
   LOCK HERO TO EXACT ORIGINAL WP SIZES (No Clamp, Fixed Pixels)
   - Title: 48px (original large feel)
   - Tagline: 22px
   - Padding: 38px top/bottom, 20px sides (original)
   - Logo: 120px height, right -12px (original)
   - Prevent overlap & overflow
===================================================== */

/* Hero container - exact padding & min height */
.bgp-page .bg-hero {
  padding: 38px 20px 42px 20px !important; /* original --bg-hero-pad-y-top/bottom + x */
  background: var(--color-bg-hero) !important;
}

/* Title - fixed size from original WP */
.bgp-page .bg-hero-title {
  font-size: 48px !important; /* exact original large title */
  line-height: 1.10 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 8px 0 !important;
  max-width: 20ch !important;
  text-wrap: balance !important;
}

/* Tagline - fixed */
.bgp-page .bg-hero-tagline {
  font-size: 18px !important; 
  line-height: 1.38 !important;
  font-weight: 600 !important;
  margin: 0 auto !important;
  max-width: 54ch !important;
}

/* Logo - exact original size & position */
.bgp-page .bg-hero-logo {
  position: absolute !important;
  right: -12px !important;
  top: 48% !important;
  transform: translateY(-50%) rotate(9deg) !important;
  height: 120px !important; /* exact original */
  width: auto !important;
  max-height: 120px !important;
  opacity: 0.88 !important;
}

/* Prevent text/logo overlap & overflow */
.bgp-page .bg-hero-inner {
  overflow: hidden !important;
  max-width: 900px !important;
  padding: 0 40px !important;
  position: relative !important;
}

.bgp-page .bg-hero-lockup {
  max-width: 720px !important;
  padding-right: 140px !important; /* original reserve space for logo */
  margin: 0 auto !important;
}

/* Mobile - revert to original mobile sizes */
@media (max-width: 820px) {
  .bgp-page .bg-hero {
    padding: 0 !important;
    background: var(--color-bg-hero-mobile-fallback) !important;
    margin-bottom: 20px !important;
  }

  .bgp-page .bg-hero-title {
    font-size: 36px !important; /* original mobile shrink */
  }

  .bgp-page .bg-hero-tagline {
    font-size: 18px !important;
  }

  .bgp-page .bg-hero-logo {
    display: none !important; /* original WP hides logo on mobile */
  }

  .bgp-page .bg-hero-mobile-subtitle {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
}

/* =====================================================
   DARK MODE HERO ADJUSTMENTS (add to existing dark @media if preferred)
   - Darker gradient, light text, adjusted logo shadow/filter
===================================================== */
@media (prefers-color-scheme: dark) {
  .bgp-page .bg-hero {
    background: linear-gradient(160deg, #0a1f2a 0%, #00050a 100%) !important;
  }

  .bgp-page .bg-hero-title,
  .bgp-page .bg-hero-tagline,
  .bgp-page .bg-hero-mobile-subtitle {
    color: #f0f4f8 !important;
  }

  .bgp-page .bg-hero-logo {
    filter: drop-shadow(0 5px 14px rgba(0,114,153,0.5)) brightness(1.1) !important;
  }

  .bg-hero-mobile-subtitle-wrap {
    background: linear-gradient(to bottom, rgba(10,35,45,0.98), rgba(5,20,28,0.98)) !important;
  }
}


/* =====================================================
   RESTORE EXACT ORIGINAL WP SECTION HEADER VALUES
   - Separate from home hero (shorter padding, smaller logo/title)
   - Prevents short panels from collapsing
   - Matches your WP CSS tokens exactly
===================================================== */

/* Section header base — exact WP padding */
.bgp-page .bg-section-header {
  padding: 16px 20px 14px 20px !important; /* --bg-section-pad-y-top/bottom + x */
}

/* Title & subtitle — exact WP clamp scales */
.bgp-page .bg-section-header-title {
  font-size: clamp(30px, 4.2vw, 44px) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  padding-right: 104px !important;
}

/* Subtitle */
.bgp-page .bg-section-header-subtitle {
  font-size: clamp(15.5px, 1.9vw, 18.5px) !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  padding-right: 104px !important;
}

/* Logo — exact WP smaller size & position */
.bgp-page .bg-section-header-logo {
  height: 60px !important;                 /* --bg-section-logo-h */
  right: 28px !important;                  /* --bg-logo-right */
  opacity: 0.96 !important;
}

/* Mobile section header — exact WP mobile behavior */
@media (max-width: 820px) {
  .bgp-page .bg-section-header {
    padding: 0 !important;
    min-height: 140px !important;          /* still readable on mobile */
  }

  .bgp-page .bg-section-header-title {
    font-size: clamp(26px, 7vw, 38px) !important;
  }

  .bgp-page .bg-section-header-subtitle {
    font-size: clamp(14px, 3.5vw, 17px) !important;
  }

  .bgp-page .bg-section-header-logo {
    height: 50px !important;
    right: 20px !important;
  }
}

/* =====================================================
   DARK MODE: Fix accordion subsection headers (white-on-white)
   - Force light text on dark background for .bg-about-q labels
===================================================== */


@media (prefers-color-scheme: dark) {
  .bg-about-q {
    color: #f0f4f8 !important;           /* bright near-white */
    background: linear-gradient(180deg, #1e293b 0%, #11171f 100%) !important;
    transition: background 0.2s ease, color 0.2s ease;  /* smooth hover */
  }

  .bg-about-q strong {
    color: #e2e8f0 !important;           /* slightly softer white for strong text – better hierarchy */
  }

  .bg-about-q:hover {
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;  /* darker & cooler on hover */
    color: #ffffff !important;           /* pure white on hover for max pop */
  }

  .bg-about-q:hover strong {
    color: #ffffff !important;
  }

  /* Arrow / indicator – keep visible */
  .bg-about-q::after {
    color: #60a5fa !important;           /* brighter blue for visibility */
  }

  /* When open/checked – stronger teal accent */
  .bg-expander__toggle:checked + label.bg-about-q {
    background: linear-gradient(180deg, #0e2a36 0%, #112233 100%) !important;
  }

  .bg-expander__toggle:checked + label.bg-about-q::after {
    color: var(--color-brand-teal, #0ea5e9) !important;
  }

  .bg-expander__toggle:checked + label.bg-about-q:hover {
    background: linear-gradient(180deg, #1e3a4f 0%, #0e2a36 100%) !important;
  }
}

/* =====================================================
   DARK MODE: Fix top-level section headers (white-on-white)
   - Targets .bg-about-hdr (About, Evidence, Perspectives, FAQ headers)
   - Forces light text + reinforces dark background
===================================================== */
@media (prefers-color-scheme: dark) {
  .bg-about-hdr {
    background: linear-gradient(180deg, #1e293b 0%, #11171f 100%) !important;
  }

  .bg-about-hdr h2,
  .bg-about-hdr p {
    color: #f0f4f8 !important; /* bright near-white for high contrast */
  }

  .bg-about-hdr p {
    opacity: 0.92 !important; /* slightly softer but still legible */
  }

  /* Open/Close buttons in dark mode */
  .bg-about-btn {
    background: #2a3745 !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
  }

  .bg-about-btn.primary {
    background: #007299 !important;
    color: #ffffff !important;
  }

  .bg-about-btn:hover {
    background: #334155 !important;
  }
}

/* =====================================================
   DARK MODE: Fix Media Appearances page (white-on-white / low contrast)
   - Targets section titles, intro, list text
   - Forces light text on dark backgrounds
===================================================== */
@media (prefers-color-scheme: dark) {
  /* Media section titles (Broadcast, Radio, Podcasts, etc.) */
  .bg-media-section-title,
  .bg-media-section-title p,
  .bg-media-section-title strong.ql-size-huge {
    color: #f0f4f8 !important;           /* bright near-white */
    background: #1f2937 !important;      /* dark gray bg */
  }

  /* Intro paragraph */
  .bg-media-intro,
  .bg-media-intro p,
  .bg-media-intro span.ql-size-large {
    color: #e0e0e0 !important;
    background: #11171f !important;
  }

  /* List items text */
  .bg-media-list,
  .bg-media-list li,
  .bg-media-list .bg-media-item-text,
  .bg-media-list .ql-size-large,
  .bg-media-list strong {
    color: #e0e0e0 !important;
  }

  /* Captions (muted text) */
  .bg-media-figure figcaption,
  .bg-media-muted {
    color: #a0a0a0 !important;           /* softer gray for captions */
  }

  /* Ensure links stay visible (teal → light blue in dark) */
  .bg-media-list a {
    color: #60a5fa !important;           /* brighter blue hover/link in dark */
  }
}

/* =====================================================
   DARK MODE: Make Nature logo white-ish
   - Applies a filter only in dark mode
   - Keeps original colors in light mode
===================================================== */
@media (prefers-color-scheme: dark) {
  .bg-research-nature-logo img {
    filter: brightness(0) invert(1) !important;   /* turns any color → white */
    opacity: 0.95 !important;                     /* slightly softer white */
  }
}


/* =====================================================
   FORCE BRAND STRIP TO TEAL IN LIGHT MODE
   - Overrides any conflicting styles
   - Keeps dark mode override intact
===================================================== */

/* Light mode default (system light or no preference) */
.bg-brand-strip {
  background: var(--color-brand-ocean-dark) !important; 
  color: rgba(245,245,245,0.92) !important;      /* near-white text */
}


/* FORCE 2-up grid on desktop (beats global.css specificity) */
@media (min-width: 1024px) {
  body.bgp-barometer .bgp-country-panel .bgp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 20px;
    align-items: start;
  }

  /* section rows always full width */
  body.bgp-barometer .bgp-country-panel .bgp-grid > .bgp-section {
    grid-column: 1 / -1;
  }

  /* first (big) chart full width */
  body.bgp-barometer .bgp-country-panel .bgp-grid > .bgp-panel.panel-1 {
    grid-column: 1 / -1;
  }

  /* thumbnails must participate as 2-up items */
  body.bgp-barometer .bgp-country-panel .bgp-grid > .bgp-panel:not(.panel-1) {
    grid-column: auto !important;
    width: 100%;
    justify-self: stretch;
    max-width: none;
  }

  /* your generator’s centered leftover */
  body.bgp-barometer .bgp-country-panel .bgp-grid > .bgp-panel.centered:not(.panel-1) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 360px;
  }
}


/* Default accent for light buttons */
.bg-topnav a.bg-btn.active::before{
  border-top: 2px solid var(--bg-active-corner-light);
  border-left: 2px solid var(--bg-active-corner-light);
}

/* White accent for dark slate + teal */
.bg-topnav a.bg-btn.home.active::before,
.bg-topnav a.bg-btn.primary.active::before{
  border-top: 2px solid var(--bg-active-corner-dark);
  border-left: 2px solid var(--bg-active-corner-dark);
}

/* Barometer accent */
.bg-topnav a.bg-btn.barometer.active::before{
  border-top: 2px solid var(--bg-active-corner-barometer);
  border-left: 2px solid var(--bg-active-corner-barometer);
}

/* =========================================================
   Research case study: floated figure (right) with wrap
   Add once to your global.css (or page CSS)
========================================================= */
.bg-research-float-wrap{
  position: relative;
}

/* Figure container */
.bg-research-figure{
  margin: 6px 0 16px 0;
}

.bg-research-figure--right{
  float: right;
  width: min(440px, 46%);
  margin: 6px 0 16px 18px; /* space between text and image */
}

/* Responsive: stack on small screens */
@media (max-width: 820px){
  .bg-research-figure--right{
    float: none;
    width: 100%;
    margin: 0 0 14px 0;
  }
}

/* Image styling */
.bg-research-figure-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform 0.2s ease;
}

.bg-research-figure-link:hover .bg-research-figure-img{
  transform: scale(1.01);
}

/* Caption */
.bg-research-figure-caption{
  margin-top: 10px;
  line-height: 1.55;
  opacity: 0.9;
}


/* =========================================================
   Research: floated figures (left/right) with text wrap
   Add once to your global.css (or page CSS)
========================================================= */
.bg-research-figure{
  margin: 6px 0 16px 0;
}

.bg-research-figure--right{
  float: right;
  width: min(440px, 46%);
  margin: 6px 0 16px 18px;
}

.bg-research-figure--left{
  float: left;
  width: min(440px, 46%);
  margin: 6px 18px 16px 0;
}

/* Responsive: stack on small screens */
@media (max-width: 820px){
  .bg-research-figure--right,
  .bg-research-figure--left{
    float: none;
    width: 100%;
    margin: 0 0 14px 0;
  }
}

/* Image styling */
.bg-research-figure-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform 0.2s ease;
}

.bg-research-figure-link:hover .bg-research-figure-img{
  transform: scale(1.01);
}

/* Caption */
.bg-research-figure-caption{
  margin-top: 10px;
  line-height: 1.55;
  opacity: 0.9;
}

/* ---------- Global footer ---------- */
.bg-footer{
  background: var(--color-bg-footer);
  color: rgba(255,255,255,0.88);
  margin-top: 56px;
}

.bg-footer a{
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-weight: 600;
}
.bg-footer a:hover,
.bg-footer a:focus{
  text-decoration: underline;
}

.bg-footer__inner{
  max-width: var(--bg-max, 960px);
  margin: 0 auto;
  padding: 34px 14px 26px;
}

.bg-footer__grid{
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr;
  gap: 20px;
  align-items: start;
}

.bg-footer__brand{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bg-footer__brandTitle{
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.5px;
  font-weight: 750;
}

.bg-footer__tag{
  margin: 0;
  line-height: 1.65;
  opacity: 0.92;
  max-width: 46ch;
}

.bg-footer__colTitle{
  margin: 0 0 10px 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.bg-footer__links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.bg-footer__meta{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.22);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  opacity: 0.92;
}

.bg-footer__fineprint{
  opacity: 0.85;
  line-height: 1.55;
}

.bg-footer__social{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.bg-footer__pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: rgba(0,0,0,0.10);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.bg-footer__pill:hover,
.bg-footer__pill:focus{
  background: rgba(0,0,0,0.16);
  text-decoration: none;
}

@media (max-width: 820px){
  .bg-footer__grid{
    grid-template-columns: 1fr;
  }
  .bg-footer__meta{
    gap: 10px;
  }
}

/* ==========================================
   DONATION SECTION — REFINED
========================================== */

.bg-donate-contained{
  margin: 64px auto 0;
  padding: 48px 40px;
  max-width: var(--bg-max, 960px);
  background: #EAF5FA;
  border-radius: 12px;
}

.bg-donate-contained__title{
  margin: 0 0 18px 0;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.25;
  color: #0B2F3A;
}

.bg-donate-contained__inner{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  align-items: start;
}

/* Image */
.bg-donate-image-link{
  display: block;
  text-decoration: none;
}

.bg-donate-contained__media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  filter: saturate(0.92);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.bg-donate-image-link:hover img{
  transform: translateY(-2px);
  opacity: 0.95;
}

/* Content */
.bg-donate-contained__content{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bg-donate-contained__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #2C4B55;
  max-width: 72ch;
}

.bg-donate-contained__cta{
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  padding-top: 18px;
}

.bg-donate-contained__button{
  background: #007299;
  color: #e5e5e5;
  font-weight: 600;         
  font-size: 15px;           
  padding: 12px 18px;       
  border-radius: 8px;       
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08); 
}

.bg-donate-contained__button:hover{
  background: #005E7D;
  transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 768px){
  .bg-donate-contained{
    padding: 36px 24px;
  }

  .bg-donate-contained__inner{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .bg-donate-contained__cta{
    justify-content: flex-start;
    padding-top: 22px;
  }
}

/* Glossary */

.bg-glossary__item{
  margin-bottom: 36px;
}

.bg-glossary__item h2{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text-body);
}

.bg-glossary__item p{
  margin: 0;
  line-height: 1.7;
  color: (var(--color-text-body));
}

/* ==========================================
   WHY BIRTHRATES MATTER — CLASS-DRIVEN LAYOUT
========================================== */

.bg-wbm{}

/* Intro block spacing */
.bg-wbm__intro{
  max-width: 820px;
  margin: 0 0 28px 0; /* space between opening para and row */
}

.bg-wbm__introText{
  margin: 0;
  line-height: 2.2;
}

/* Visible row (text + image) */
.bg-wbm__row{
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0;
}

/* Text column */
.bg-wbm__textCol{
  flex: 1 1 260px;
  min-width: 260px;
}

.bg-wbm__lead{
  margin: 0;
  line-height: 2.2;
}

/* Media column */
.bg-wbm__mediaCol{
  flex: 0 0 320px;
  max-width: 320px;
  min-width: 240px;
}

.bg-wbm__mediaLink{
  display: block;
  text-decoration: none;
}

.bg-wbm__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.bg-wbm__caption{
  font-size: 13px;
  opacity: 0.65;
  margin: 10px 0 0 0;
  text-align: center;
}

/* Expander spacing under the visible row */
.bg-wbm__expander{
  margin-top: 18px;
}

/* Fix the “compressed” paragraph by forcing the same rhythm as the rest */
.bg-wbm__after{
  margin: 22px 0 0 0;     /* space after the button block */
  line-height: 2.2;       /* match your other expanded paragraphs */
}

.bg-wbm__after .ql-size-large{
  line-height: inherit;   /* if you wrap spans later, keep consistent */
}

/* ==========================================
   FOOTER — DARK BAROMETER VARIANT
========================================== */

.bg-footer--dark{
  background: #052F36;   /* deep teal */
  color: #D6F1F6;
}

.bg-footer--dark .bg-footer__brandTitle{
  color: #FFFFFF;
}

.bg-footer--dark .bg-footer__tag{
  color: #A7D4DC;
}

.bg-footer--dark .bg-footer__colTitle{
  color: #8FD0DA;
  opacity: 0.9;
}

.bg-footer--dark .bg-footer__links a{
  color: #D6F1F6;
}

.bg-footer--dark .bg-footer__links a:hover{
  color: #FFFFFF;
}

.bg-footer--dark .bg-footer__pill{
  border-color: rgba(255,255,255,0.25);
  color: #E6FAFF;
}

.bg-footer--dark .bg-footer__pill:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.45);
}

.bg-footer--dark .bg-footer__meta{
  border-top: 1px solid rgba(255,255,255,0.12);
}

.bg-footer--dark .bg-footer__fineprint{
  color: #9FCAD1;
}

.bg-footer--dark a{
  color: inherit;
}

/* Inner collapsible details – no extra border/margin, matches callout padding */
.bg-research-details-inner {
  margin: 1.5rem 0 0 0;
  padding: 0;
  border: none;
  background: transparent;
}

/* Summary styling – looks like a clickable teaser */
.bg-research-details-inner summary {
  cursor: pointer;
  list-style: none;              /* remove default marker */
  outline: none;
  padding: 0.8rem 1rem;
  background: rgba(0, 102, 102, 0.08);   /* subtle teal tint – adjust to your brand */
  border-radius: 6px;
  transition: background 0.2s ease;
}

.bg-research-details-inner summary:hover {
  background: rgba(0, 102, 102, 0.15);
}

/* Hide default marker in WebKit & standard */
.bg-research-details-inner summary::-webkit-details-marker,
.bg-research-details-inner summary::marker {
  display: none;
}

/* Optional custom arrow */
.bg-research-details-inner summary::after {
  content: '▼';
  float: right;
  font-size: 0.9em;
  transition: transform 0.3s ease;
}

.bg-research-details-inner[open] summary::after {
  transform: rotate(180deg);
}

/* Smooth reveal for content */
.bg-research-details-inner > *:not(summary) {
  padding: 1rem 0 0.5rem 0;
  transition: opacity 0.4s ease, max-height 0.4s ease;
}

.bg-research-figure--left {
  float: left;
  margin: 0 1.5rem 1rem 0;
}


.bg-research-figure--left img {
  max-width: 220px;          /* adjust size as desired: 180–280px range works well */
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* optional subtle shadow for depth */
}

.bg-research-figure--left figcaption {
  font-size: 0.85em;
  color: #666;
  text-align: center;
  margin-top: 0.4rem;
}

.bg-research-access-cta {
  background: linear-gradient(135deg, #f8f9fa 0%, #e8f5f5 100%);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  margin: 3rem auto;
  padding: 3.5rem 1.5rem;
  text-align: center;
  max-width: 900px;
}

.bg-research-access-cta .ql-size-huge {
  color: var(--teal, #006666);
  margin-bottom: 0.8rem;
}

.bg-research-access-cta .bg-research-btn--teal {
  font-size: 1.3rem;
  padding: 1rem 2.5rem;
  min-width: 280px;
}

.bg-sets-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:22px;
  margin-top:10px;
}

.bg-set-card-premium{
  border:1px solid rgba(0,0,0,0.08);
  border-radius:18px;
  padding:22px 22px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.6) 100%);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bg-set-card-premium:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

.bg-set-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:8px;
}

.bg-set-header h3{
  margin:0;
  font-size:1.25rem;
}

.bg-set-runtime{
  font-size:0.9rem;
  opacity:0.7;
}

.bg-set-theme{
  margin:0 0 14px 0;
  line-height:1.6;
}

.bg-set-episodes{
  list-style:none;
  padding:0;
  margin:0;
}

.bg-set-episodes li{
  padding:4px 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
  font-size:0.95rem;
}

.bg-set-episodes li:last-child{
  border-bottom:none;
}

@media (max-width: 760px){
  .bg-sets-grid{
    grid-template-columns: 1fr;
  }
}

.bg-set-episodes-label{
  font-size:0.9rem;
  opacity:0.65;
  margin:14px 0 6px 0;
  font-weight:500;
}

.bg-set-footnote{
  margin-top:18px;
  font-size:0.85rem;
  opacity:0.7;
  line-height:1.5;
}

.bg-set-episodes li{
  font-size:0.92rem;
  opacity:0.9;
}


.bg-hr-contained{
  max-width:980px;
  margin:40px auto;
  height:1px;
  background:rgba(0,0,0,0.08);
}


.bg-explainer-wrap{
  overflow:hidden; /* ensures float containment */
}

.bg-explainer-thumb{
  float:right;
  width:220px;
  max-width:40%;
  margin:4px 0 12px 22px;
  border-radius:12px;
}

@media (max-width: 720px){
  .bg-explainer-thumb{
    float:none;
    display:block;
    width:100%;
    max-width:100%;
    margin:0 0 14px 0;
  }
}


/* Explainer image wrap */
.bg-explainer-wrap{
  overflow:hidden; /* contains float */
}

.bg-explainer-thumb{
  float:right;
  width:220px;
  max-width:40%;
  margin:4px 0 14px 24px;
  border-radius:12px;
}

@media (max-width:720px){
  .bg-explainer-thumb{
    float:none;
    display:block;
    width:100%;
    max-width:100%;
    margin:0 0 14px 0;
  }
}

/* ==========================================
   WHY BIRTHRATES MATTER — FIXED LAYOUT
   (drop-in replacement for your bg-wbm block)
========================================== */

.bg-wbm__row{
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;          /* default: allow wrap */
  margin: 0;
}

/* Text column: allow it to shrink (critical) */
.bg-wbm__textCol{
  flex: 1 1 320px;          /* was 260px; gives it a better starting point */
  min-width: 0;             /* CRITICAL: allows flexbox to actually shrink text col */
}

/* Image column: elastic width instead of fixed 320 */
.bg-wbm__mediaCol{
  flex: 0 1 clamp(220px, 28vw, 320px);
  max-width: 320px;
  min-width: 200px;
}

/* On true desktop widths, force side-by-side */
@media (min-width: 860px){
  .bg-wbm__row{
    flex-wrap: nowrap;
  }
}

/* On small screens, stack naturally */
@media (max-width: 820px){
  .bg-wbm__row{
    flex-direction: column;
  }
  .bg-wbm__mediaCol{
    max-width: 100%;
  }
}

/* =============================
   EXPLAINER SECTION STYLES
   Float-based text wrap
============================== */

.bg-wbm .bg-inner{
  max-width: var(--bg-max, 960px);
  margin: 0 auto;
  padding: 28px 14px 36px;
}

/* Wrap container (contains float reliably) */
.bg-wbm-wrap{
  overflow: hidden; /* contains float */
}

/* Bigger image, with text wrapping */
.bg-wbm-float{
  float: right;
  width: 320px;         /* adjust: 300–380 works well */
  max-width: 42%;
  height: auto;
  margin: 6px 0 16px 28px;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

/* Lead paragraph styling (optional) */
.bg-wbm-lead{
  font-size: 1.06rem;
  line-height: 1.55;
  margin-top: 0;        /* ensures the first paragraph starts tight */
}

/* Normal paragraph spacing */
.bg-wbm-wrap p{
  margin: 0 0 12px;
  line-height: 1.6;
}

/* Optional clear helper (use if you want later content below image) */
.bg-wbm-clear{
  clear: both;
}

/* Mobile: stack image above text */
@media (max-width: 820px){
  .bg-wbm-float{
    float: none;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 14px 0;
  }
}


.bg-explainer-figure {
  float: left;
  width: 340px;
  margin: 0 24px 16px 0;
}

.bg-explainer-figure img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.bg-explainer-wrap {
  overflow: hidden; /* clearfix */
}

@media (max-width: 820px) {
  .bg-explainer-figure {
    float: none;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 20px;
    text-align: center;
  }
}

.bg-explainer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: start;
}

.bg-explainer-text-col {
  flex: 2 1 0;
  min-width: 0;
  max-width: 66%;
}

.bg-explainer-image-col {
  flex: 1 1 0;
  min-width: 280px;
  max-width: 34%;
  text-align: center;
}

.bg-explainer-image-col img {
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

@media (max-width: 820px) {
  .bg-explainer-row {
    flex-direction: column;
    gap: 24px;
  }
  .bg-explainer-text-col,
  .bg-explainer-image-col {
    max-width: 100%;
  }
}


/* Reusable left accent border for any section/panel */
.bg-left-accent{
  position: relative;
  padding-left: 18px; /* makes room for the accent */
}

.bg-left-accent::before{
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 3px;
  background: var(--color-teal, #2F6F73);
  opacity: 0.55;
}


.bg-panel--light {
  background:var(--color-bg-gray) ; /* very light grey */
}

/* Set 1 – Soft Amber */
.bg-set--amber .bg-set-header h3 {
  color: #D98E04;
}

.bg-set--amber .bg-set-runtime {
  color: #D98E04;
  opacity: 0.75;
}

/* Set 2 – Muted Plum */
.bg-set--plum .bg-set-header h3 {
  color: #6E4A7E;
}

.bg-set--plum .bg-set-runtime {
  color: #6E4A7E;
  opacity: 0.75;
}

/* Base accent setup for premium set cards */
.bg-set-card-premium {
  position: relative;
  padding-left: 18px; /* room for accent */
}

/* Shared accent bar styling */
.bg-set-card-premium::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 2px;
  opacity: 0.35; /* subtle */
}

/* Amber set */
.bg-set--amber::before {
  background: #D98E04;
}

/* Plum set */
.bg-set--plum::before {
  background: #6E4A7E;
}


/* Scroll reveal: default hidden state */
.bg-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 700ms ease 250ms,
    transform 700ms ease 250ms;
}
/* When revealed */
.bg-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Optional variants */
.bg-reveal--up    { transform: translateY(18px); }
.bg-reveal--left  { transform: translateX(-18px); }
.bg-reveal--right { transform: translateX(18px); }

/* Respect reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .bg-reveal,
  .bg-reveal.is-visible {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Optional stagger delays */
.bg-delay-1 { transition-delay: 120ms; }
.bg-delay-2 { transition-delay: 240ms; }
.bg-delay-3 { transition-delay: 360ms; }

/* =============================== */
/* Events: cinematic skin (drop-in) */
/* =============================== */

:root{
  --bg-ink: #0f1419;
  --bg-panel: #111823;
  --bg-panel-2: #0d121b;

  --teal: #00a0a0;
  --gold: #D98E04;
  --plum: #6E4A7E;

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);
  --hairline: rgba(255,255,255,0.10);
}

.bg-events-section{
  margin: 2.5rem auto;
  max-width: 1180px;
  padding: 0 1rem;
}

.bg-events-card{
  background: linear-gradient(180deg, rgba(0,160,160,0.08), rgba(0,0,0,0.00) 22%),
              linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-panel-2) 100%);
  border: 1px solid var(--hairline);
  box-shadow: 0 14px 55px rgba(0,0,0,0.55);
  border-radius: 18px;
  border-top: none !important; /* prevents double line */
  overflow: hidden;
  padding: 2.1rem 1.8rem 2.2rem;
  position: relative;
}

/* Replace multicolor top strip with brand teal */
.bg-events-card::before{
  background: #007299 !important;
  height: 4px;
  opacity: 1;
}

.bg-events-title{
  color: var(--text);
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

.bg-events-title::after{
  /* keep your underline but make it glow a bit */
  opacity: 0.9;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.35));
}

/* Timezone box should look “embedded”, not like a random form */
.bg-events-tz{
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.bg-events-tz-label{ color: var(--muted); }
.bg-events-tz-hint{ color: rgba(255,255,255,0.60); }

.bg-events-tz-select{
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--hairline);
  color: var(--text);
  outline: none;
}
.bg-events-tz-select:focus{
  border-color: rgba(0,160,160,0.55);
  box-shadow: 0 0 0 3px rgba(0,160,160,0.18);
}

/* Month header: add a divider line */
.month-header td{
  padding: 2rem 0 0.9rem !important;
}
.month-title{
  color: var(--text);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 14px;
}
.month-title::after{
  content:"";
  height:1px;
  flex:1;
  background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.03));
}

/* Rows: tighter, more premium */
.bg-events-table{
  border-spacing: 0 10px;
}
.bg-events-table tbody tr:not(.month-header){
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.bg-events-table tbody tr:not(.month-header):hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}

/* Date + title colors on dark */
.event-date{ color: rgba(255,255,255,0.78); }
.event-date::before{ color: rgba(0,160,160,0.95); } /* swap to teal brand */
.event-title{ color: var(--text); }

/* Accent bar at left stays, but make it glow subtly */
tr.event-childless::before{ background: var(--gold); box-shadow: 0 0 0 1px rgba(217,142,4,0.25); }
tr.event-broken::before{ background: var(--plum); box-shadow: 0 0 0 1px rgba(110,74,126,0.25); }

/* Keep your gradient title pills, but soften and add depth */
tr.event-childless td.event-title,
tr.event-broken td.event-title{
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}

/* Button: match your “Get Tickets” vibe */
.eventive-button a,
.eventive-button button{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--text) !important;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.eventive-button a:hover,
.eventive-button button:hover{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.24);
  transform: translateY(-1px);
}


.event-datechip{
  display:inline-flex;
  align-items:center;
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.event-datechip-main{
  font-weight: 750;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
}
.event-date::before{ content:none; } /* remove the triangle once chip exists */


.event-title{
  display:flex;
  align-items:center;
  gap: 12px;
}
.event-thumb{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 10px 20px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.10);
}
.event-title-text{
  display:block;
  line-height:1.25;
}

/* ========================================= */
/* Upcoming Events: centered title + fullwidth */
/* + subtle mustard/plum accents              */
/* ========================================= */

/* 1) Center ONLY the title */
.bg-events-header{
  text-align: left;              /* keep header area left by default */
}

.bg-events-title{
  display: block;
  width: 100%;
  text-align: center;            /* centers the title text */
  margin-left: auto;
  margin-right: auto;
}

/* Keep timezone panel left (and stop it from auto-centering) */
.bg-events-tz{
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;               /* let it span like the table */
  width: 100%;
  justify-content: flex-start;   /* label + select align left */
}

/* 2) Make table stretch full width (and rows fill it) */
.bg-events-tablewrap{
  width: 100%;
}

.bg-events-table{
  width: 100%;
  border-spacing: 0 12px;        /* keep your row gaps */
}

.bg-events-table tbody tr:not(.month-header){
  width: 100%;
}

/* Ensure the title cell can breathe */
.event-title{
  width: auto;
}

/* 3) Mustard / plum “hint” per event row
   - subtle glow + a faint right-edge tint
   - keeps your existing left accent bar */
tr.event-childless,
tr.event-broken{
  position: relative;            /* needed for ::after */
  overflow: hidden;
}

/* soft tinted edge + slight ambient glow */
tr.event-childless{
  box-shadow:
    0 14px 34px rgba(0,0,0,0.45),
    0 0 0 1px rgba(217,142,4,0.12),
    0 0 28px rgba(217,142,4,0.10);
}

tr.event-broken{
  box-shadow:
    0 14px 34px rgba(0,0,0,0.45),
    0 0 0 1px rgba(110,74,126,0.14),
    0 0 28px rgba(110,74,126,0.10);
}

/* faint “wash” on the right side of the row */
tr.event-childless::after,
tr.event-broken::after{
  content:"";
  position:absolute;
  top:0; bottom:0; right:0;
  width: 36%;
  pointer-events:none;
  opacity: 0.22;                /* the “hint” amount */
  filter: blur(0px);
}

tr.event-childless::after{
  background: linear-gradient(270deg, rgba(217,142,4,0.35), rgba(217,142,4,0.0));
}

tr.event-broken::after{
  background: linear-gradient(270deg, rgba(110,74,126,0.38), rgba(110,74,126,0.0));
}

/* Optional: nudge the month divider line to match the palette a touch */
.month-title::after{
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.18),
    rgba(217,142,4,0.10),
    rgba(110,74,126,0.10),
    rgba(255,255,255,0.03)
  );
}

/* ========================================= */
/* Upcoming Events tweaks: height, accents, TZ */
/* ========================================= */

/* Bigger centered title */
.bg-events-title{
  font-size: 2.6rem;          /* was ~2.1 */
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0.2rem 0 1.4rem;
}

/* Timezone area: remove “box” feel */
.bg-events-tz{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.2rem 0 1.2rem !important;
}

/* Selector: no outline/box; keep it readable on dark */
.bg-events-tz-select{
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: rgba(255,255,255,0.08) !important;  /* subtle pill */
  color: rgba(255,255,255,0.92) !important;
  border-radius: 10px !important;
  padding: 0.55rem 0.9rem !important;
}
.bg-events-tz-select:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,160,160,0.18) !important; /* teal focus ring */
}

.bg-events-tz-hint{
  margin-top: 0.55rem;
  color: rgba(255,255,255,0.60);
}

/* Rows: give them height + breathing room */
.bg-events-table tbody tr:not(.month-header){
  min-height: 78px;                 /* helps the button */
}
.bg-events-table td{
  padding-top: 1.15rem !important;
  padding-bottom: 1.15rem !important;
}

/* Make the ticket cell center vertically and give room */
.event-tickets{
  padding-right: 1.4rem !important;
  vertical-align: middle;
}

/* Ensure Eventive button has enough height (prevents “crushed” look) */
.eventive-button a,
.eventive-button button{
  padding: 0.85rem 1.35rem !important;
  min-height: 44px;
  line-height: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* DATE chip: slightly taller for balance */
.event-datechip{
  padding: 0.75rem 1.0rem;
  border-radius: 14px;
}

/* ----------------------------------------- */
/* Mustard / plum accents as LEFT border bar */
/* ----------------------------------------- */

/* Make sure the row is a positioning context */
tr.event-childless,
tr.event-broken{
  position: relative;
  overflow: hidden;
}

/* Left accent bar — clearer than the subtle wash */
tr.event-childless::before,
tr.event-broken::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width: 6px;
  border-radius: 6px;
  opacity: 0.95;
}

tr.event-childless::before{
  background: #D98E04;
  box-shadow: 0 0 18px rgba(217,142,4,0.28);
}

tr.event-broken::before{
  background: #6E4A7E;
  box-shadow: 0 0 18px rgba(110,74,126,0.28);
}

/* Add a tiny matching tint at the far right so it feels intentional */
tr.event-childless::after,
tr.event-broken::after{
  content:"";
  position:absolute;
  top:0; bottom:0; right:0;
  width: 22%;
  pointer-events:none;
  opacity: 0.16;               /* subtle */
}

tr.event-childless::after{
  background: linear-gradient(270deg, rgba(217,142,4,0.40), rgba(217,142,4,0.0));
}

tr.event-broken::after{
  background: linear-gradient(270deg, rgba(110,74,126,0.42), rgba(110,74,126,0.0));
}


/* Increase spacing between label and select */
.bg-events-tz{
  gap: 0.9rem !important;  /* was too tight */
}

/* Extra breathing room specifically for label */
.bg-events-tz-label{
  margin-right: 0.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.bg-events-tz-select:focus{
  box-shadow: 0 0 0 3px rgba(0,114,153,0.25) !important;
}


.bg-events-tz-select,
.bg-events-tz-select option {
  text-decoration: none !important;
}

/* Kill any single-cell top border/line inside rows */
.bg-events-table td{
  border-top: none !important;
  box-shadow: none;
}

/* If the line is specifically on the title column */
.bg-events-table td.event-title{
  border-top: none !important;
  box-shadow: none !important;
  background-clip: padding-box;
}

/* Title container */
.event-title-text {
  position: relative;
  display: inline-block;
  padding-bottom: 12px; /* breathing space */
}

/* Accent line */
.event-title-text::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;

  width: 64%;        /* shorter & elegant */
  height: 1.5px;      
  border-radius: 2px;
  opacity: 0.92;
}

/* Childless (mustard) */
.event-childless .event-title-text::after {
  background: #D98E04DD;
}

/* Broken (plum) */
.event-broken .event-title-text::after {
  background: #6E4A7EDD;
}

/* ---- Eventive "BOOK NOW" hover: remove the grey mist layer ---- */
.eventive-button button:hover {
  background-color: rgb(3, 96, 122) !important; 
  filter: none !important;
  opacity: 1 !important;
}


/* Material-UI style overlay is usually the first inner div that changes bg */
.eventive-button button:hover > div > div {
  background-color: transparent !important;
}

/* Sometimes the overlay is applied even when not hovered (via transitions) */
.eventive-button button > div > div {
  background-color: transparent !important;
}

/* Powered by Eventive row */
.bg-events-powered {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.08);

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

/* Make text clearly visible on dark background */
.bg-events-powered-text {
  color: rgba(255,255,255,0.75);   /* much lighter */
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}

.bg-events-powered-logo {
  height: 13px;              /* ~30% smaller than 18px */
  width: auto;
  opacity: 0.9;
  filter: brightness(1.15);
  transform: translateY(0.5px); /* micro optical alignment */
  padding-bottom: 2px;

}

/* =====================================================
   TYPOGRAPHY FIXES: Standardize to Lato Everywhere
   - Remove Verdana overrides
   - Align sizes/weights to match "Research" page feel
   - Improve spacing for "Host" page
===================================================== */

/* Force Lato on all key elements (overrides any Verdana) */
.bgp-page .bg-panel-title,
.bgp-page .bg-panel-lead,
.bgp-page .bg-list,
.bgp-page .bg-olist,
.bg-research-body,
.ql-size-large,
.ql-size-huge {
  font-family: var(--bg-font) !important; /* Lato */
}

/* Align "Host" page titles to "Research" boldness/sizing */
.bgp-page .bg-panel-title {
  font-size: 1.45em !important; /* matches ql-size-huge feel */
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

/* Better body/lead spacing on "Host" */
.bgp-page .bg-panel-lead,
.bgp-page .bg-list,
.bgp-page .bg-olist {
  font-size: 1.125em !important; /* match ql-size-large */
  line-height: 1.8 !important; /* more breathable */
  margin-bottom: 1.2em !important;
}

/* Subtle improvements for consistency */
.bgp-page .bg-note {
  font-size: 0.95em !important; /* slightly smaller for notes */
  opacity: 0.85 !important;
}

/* Ensure strong/em tags use proper weights (Lato has 800 for extra bold) */
strong { font-weight: 800 !important; }
em { font-style: italic !important; }

.event-themed {
  text-align: right;
  white-space: nowrap;
}

.event-themed-label {
  font-size: 0.72rem;
  opacity: 0.7;
  letter-spacing: 0.02em;
}

/* Prevent collapse */
.bg-events-table td.event-themed{
  width: 160px;
  min-width: 160px;
  padding-right: 14px;
  vertical-align: middle;
  white-space: normal;
}

/* The badge */
.bg-events-table .event-themed-label{
  display: inline-block;
  width: 100%;
  box-sizing: border-box;

  /* Force horizontal text */
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;

  /* Wrapping behaviour */
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.1;

  /* VISIBILITY FIX */
  color: #E6E6E6;              /* light grey, not black */
  background: rgba(255,255,255,0.06);  /* subtle lift */
  font-size: 0.72rem;
  font-weight: 600;

  padding: 5px 8px;
  border-radius: 8px;

  /* Choose one */
  border: 1px solid #D98E04;   /* mustard */
  /* border: 1px solid #6E4A7E; */  /* plum */
}

/* Protect ticket column width */
.bg-events-table td.event-tickets{
  min-width: 190px;
}


.bg-events-table td.event-themed{
  text-align: center;
}

/* Column itself */
.bg-events-table td.event-themed{
  text-align: center;      /* center badge in column */
  vertical-align: middle;
  padding: 0 8px;
  width: auto;             /* allow natural sizing */
  min-width: unset;
}

/* Badge */
.bg-events-table .event-themed-label{
  display: inline-block;   /* shrink-wrap */
  padding: 6px 12px;

  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;

  color: #E6E6E6;
  background: rgba(255,255,255,0.05);

  border-radius: 999px;    /* elegant pill shape */
  border: 1px solid #D98E04;   /* mustard */
  /* border: 1px solid #6E4A7E; */  /* plum if needed */

  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.bg-events-table td.event-tickets{
  text-align: center;
  vertical-align: middle;
}

/* Base badge styling (neutral background) */
.bg-events-table .event-themed-label{
  display: inline-block;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  color: #E6E6E6;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  border: 1px solid transparent;
}

/* Europe = darker blue */
.bg-events-table .event-themed-label.is-europe{
  border-color: #1E3A5F;  /* deep navy blue */
}

/* US = darker red */
.bg-events-table .event-themed-label.is-us{
  border-color: #7A1F1F;  /* deep muted red */
}





/* =========================================================
   BIRTHGAP × EVENTIVE — Checkout modal polish
   (Paste as RAW CSS. Do NOT include <style> tags in Eventive.)
   ========================================================= */

/* --- Frame + softer canvas --- */
.eventive-widget-container .eventive-background-container{
  background-color: #f3f5f6 !important;

  border-radius: 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  box-shadow:
    0 0 0 3px #007299,
    0 10px 30px rgba(0,0,0,0.35) !important;
}

/* keep inner corners clipped */
.eventive-widget-container .eventive-content-container{
  border-radius: 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* --- Checkout typography (slightly larger) --- */
.eventive-widget-container .Eventive--Checkout{
  font-size: 13.5pt !important;
}

/* --- Ticket row: hide the (confusing) date/time line (often shows EST) --- */
.eventive-widget-container td[class^="order-quantity-name"] > div > div:nth-child(2){
  display: none !important;
}

/* --- Ticket row: make event name a touch more prominent --- */
.eventive-widget-container td[class^="order-quantity-name"] > div > div:first-child{
  font-weight: 700 !important;
  letter-spacing: 0.1px;
}

/* --- Ticket type line (e.g. "General Admission") red --- */
.eventive-widget-container td[class^="order-quantity-name"] > div > div:last-child{
  color: #C62828 !important;
  font-weight: 600 !important;
}

/* --- Links: discount code + “Never mind” to mid-teal --- */
.eventive-widget-container a.eventive-discount-code,
.eventive-widget-container a.eventive-discount-code:visited{
  color: #007299 !important;
}

/* "Never mind" is usually an <a href="#"> in the checkout modal */
.eventive-widget-container .Eventive--Checkout a[href="#"],
.eventive-widget-container .Eventive--Checkout a[href="#"]:visited{
  color: #007299 !important;
}

/* --- Optional: tidy the Facebook iframe row spacing --- */
.eventive-widget-container .account-creation-container iframe{
  border-radius: 6px !important;
}

/* =========================================================
   OR separator readability (tight + safe)
   ========================================================= */

/* Keep the divider line behind */
.eventive-widget-container .account-creation-container div[style*="border-bottom"]{
  position: relative !important;
  z-index: 1 !important;
}

/* Style ONLY the OR pill (matches Eventive’s inline style signature) */
.eventive-widget-container .account-creation-container
span[style*="font-style: italic"][style*="text-transform: uppercase"]{
  background-color: #f3f5f6 !important;   /* same canvas grey */
  padding: 0 12px !important;
  display: inline-block !important;
  position: relative !important;
  z-index: 2 !important;
  color: #777 !important;                /* OR text only */
  box-shadow: 0 0 0 6px #f3f5f6 !important; /* blocks the line cleanly */
}

.eventive-button a:hover,
.eventive-button button:hover {
  transform: none !important;          /* kills the lift → no white line exposed */
  background: rgb(3, 96, 122) !important;
  border-color: rgba(0, 114, 153, 0.7) !important;  /* optional: make border match teal better */
  box-shadow: none !important;         /* if any hover shadow contributes to "glow" */
}




/* =========================================================
   EVENTIVE — Checkout modal title: eg "Checkout (Sun, Apr 26th 2026, 9PM PDT)"
   Uses your existing row TZ formatting (tzAbbrev + fmtWhen)
   ========================================================= */

/* hide original <h2> text */
.eventive-widget-container h2{
  visibility: hidden;
  position: relative;
}

/* show our injected title */
.eventive-widget-container h2::after{
  content: var(--bg-checkout-title, "Checkout");
  visibility: visible;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}


/* Eventive: change the primary "Continue" button label to "Check Out" */

/* 1) Make sure the button can host an overlay label */
.eventive-widget-container .account-creation-container button[type="button"]{
  position: relative !important;
}

/* 2) Hide ONLY the real label span (the one with inline uppercase styling) */
.eventive-widget-container .account-creation-container
button[type="button"] span[style*="text-transform: uppercase"]{
  color: transparent !important;   /* hides "Continue" */
}

/* 3) Overlay replacement label */
.eventive-widget-container .account-creation-container
button[type="button"]::after{
  content: "Check Out";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;            /* don't break clicking */

  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: uppercase;
}



/* =========================================
   GLOBAL HEADER WORDMARK LOCK
   Ensures Birthgap·org is identical everywhere
   ========================================= */
.bg-brand-strip .bg-brand-title{
  font-family: var(--bg-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =========================================
   BAROMETER PAGE — FORCE SAME WORDMARK
   Prevents local overrides from barometer.css
   ========================================= */
body.bgp-barometer .bg-brand-strip .bg-brand-title{
  font-family: var(--bg-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}

/* =========================================
   HEADER LOGO + WORDMARK
   ========================================= */

.bg-brand-mark{
  display: flex;
  align-items: center;
  gap: 1px;
  text-decoration: none;
  color: inherit;
}


.bg-brand-logo{
  height: 24px;
  width: auto;
  display: block;
}

.bg-brand-strip {
  background: #0E2A36;
  border-top: 1.2px solid #0A5568; 
}

.now-showing-img {
  display:block;
  width:100%;
  max-width:320px;
  height:auto;
  border-radius:10px;
  clip-path: inset(1px round 10px);
}

.poster-trim {
  display: block;
  width: 100%;
  height: auto;

  /* Trim 1px from all sides */
  clip-path: inset(1px round 0);

}

.poster-trim-6 {
  width: 100%;
  height: auto;
  display: block;

  border-radius: 6px;

  /* Trim 1px from all sides */
  clip-path: inset(1px round 6px);
}

.media-trim {
  width: 100%;
  height: auto;
  display: block;

  border-radius: 6px;

  /* Trim 1px from all sides */
  clip-path: inset(1px round 6px);
}

img[src*="/website/media/"] {
  display: block;
  border-radius: 6px;
  clip-path: inset(1px round 6px);
}

.bg-wbm__img {
  display: block;
  width: 100%;
  height: auto;
  /* Trim 2px from all sides */
  clip-path: inset(5px round 6px);
}

.bg-expander summary {
  display: inline-block;     /* shrink to text width */
  width: auto;               /* prevent 100% stretch */
  cursor: pointer;

  padding: 8px 16px;
  border-radius: 6px;

  background: #2F6F73;
  color: #fff;
  font-weight: 600;

  list-style: none;          /* remove default marker */
}

/* Remove default triangle (Chrome/Safari) */
.bg-expander summary::-webkit-details-marker {
  display: none;
}

.bg-expander[open] summary {
  background: #24575a;
}

.bg-research-details-inner summary {
  display: inline-block;   /* shrink to content width */
  width: auto;
  cursor: pointer;

  padding: 8px 16px;
  border-radius: 6px;

  background: #006666;
  color: #ffffff;
  font-weight: 600;

  list-style: none;
}

/* Remove default arrow (Chrome/Safari) */
.bg-research-details-inner summary::-webkit-details-marker {
  display: none;
}

.bg-research-details-inner summary {
  display: inline-block;   /* shrink to content width */
  width: auto;
  cursor: pointer;

  padding: 8px 16px;
  border-radius: 6px;

  background: #006666;
  color: #ffffff;
  font-weight: 600;

  list-style: none;        /* remove default marker */
}

/* Remove default triangle (Chrome/Safari) */
.bg-research-details-inner summary::-webkit-details-marker {
  display: none;
}

/* Optional open-state styling */
.bg-research-details-inner[open] summary {
  background: #004c4c;
}

.bg-research-access-cta {
  text-align: center;
  padding: 3.5rem 1rem;
  margin: 3rem auto;
  max-width: 900px;

  border-radius: 12px;

  /* Use tokenized gradient */
  background: linear-gradient(
    135deg,
    var(--color-bg-very-light) 0%,
    var(--color-bg-mint-light) 100%
  );

  box-shadow: var(--shadow-soft);
}

.bg-research-access-cta__title {
  margin-bottom: 0.8rem;
  font-weight: 700;
  color: var(--color-brand-teal-dark);
}

.bg-research-access-cta__subtitle {
  font-size: 1.4rem;
  color: var(--color-text-secondary);
  margin-bottom: 1.8rem;
}

.bg-research-access-cta__body {
  max-width: 680px;
  margin: 0 auto 2.2rem;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--color-text-body);
}

.bg-research-access-cta__btn {
  font-size: 1.3rem;
  padding: 1rem 2.5rem;
}

.bg-media-figure--heavy-trim img {
  clip-path: inset(3px);
}

/* =========================================================
   Media Section Title Bars — GLOBAL (kills Quill banding)
   Apply to ALL your media section headers.
   ========================================================= */

/* 1) The bar itself */
.bg-media-section-title{
  margin: 3rem 0 1.75rem;
  padding: 1.25rem 1.5rem;
  border-radius: 10px;
  background: var(--bg-media-title-bg, #f4f6f8);
  border: 1px solid var(--bg-media-title-border, rgba(0,0,0,.18));
  border-left: 6px solid #007299; /* Birthgap Teal */
}

/* 2) Remove “inner dark band” caused by Quill descendants */
.bg-media-section-title p,
.bg-media-section-title strong,
.bg-media-section-title .ql-size-huge,
.bg-media-section-title .ql-size-large,
.bg-media-section-title .ql-size-medium{
  background: transparent !important;
  box-shadow: none !important;
}

/* 3) Normalize typography (works whether you use h2 or Quill) */
.bg-media-section-title h2,
.bg-media-section-title p{
  margin: 0;
}

.bg-media-section-title h2,
.bg-media-section-title strong{
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* 4) Dark mode */
@media (prefers-color-scheme: dark){
  .bg-media-section-title{
    background: var(--bg-media-title-bg-dark, #12222b);
    border-color: var(--bg-media-title-border-dark, rgba(255,255,255,.45));
  }
  .bg-media-section-title h2,
  .bg-media-section-title p,
  .bg-media-section-title strong{
    color: var(--bg-media-title-text-dark, #e6f2f7);
  }
}

/* =========================
   GLOSSARY — PURE TOKEN USAGE
   ========================= */

.bg-glossary__search{
  position: relative;
  max-width: 740px;
  margin: 32px auto 40px;
}

.bg-glossary__searchPanel{
  max-width: 740px;
  margin: 28px auto 34px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-card);
}

.bg-glossary__searchHead{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0 2px 12px;
}

.bg-glossary__searchTitle{
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.2px;
  color: var(--color-text-primary);
}

.bg-glossary__searchMeta{
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.bg-glossary__searchMeta kbd,
.bg-glossary__kbdhint kbd{
  background: var(--color-bg-light-gray);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: 2px 6px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--color-text-primary);
}

.bg-glossary__searchRow{ position: relative; }

.bg-glossary__icon{
  position:absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.75;
  pointer-events:none;
  font-size: 18px;
  color: var(--color-text-muted);
}

.bg-glossary__input{
  width: 100%;
  padding: 14px 14px 14px 46px;
  border-radius: 14px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-very-light);
  color: var(--color-text-primary);
  font-size: 16px;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.bg-glossary__input::placeholder{
  color: var(--color-text-muted);
}

.bg-glossary__input:focus{
  border-color: var(--color-brand-teal);
  box-shadow: 0 0 0 3px var(--color-border-brand-teal-subtle);
  background: var(--color-bg-surface);
}

/* Helper row */
.bg-glossary__help{
  margin: 12px 2px 0;
  font-size: 13px;
  color: var(--color-text-muted);
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Chips */
.bg-glossary__chip{
  appearance: none;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-light-gray);
  color: var(--color-text-primary);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.bg-glossary__chip:hover{
  background: var(--color-bg-gray);
  border-color: var(--color-border-default);
}

.bg-glossary__chip:active{
  transform: translateY(1px);
}

.bg-glossary__kbdhint{
  margin: 8px 0 0 4px;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* =========================
   ITEMS
   ========================= */

.bg-glossary__item{
  scroll-margin-top: 110px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.bg-glossary__item:last-child{ border-bottom: none; }

.bg-glossary__term{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: baseline;
  margin: 0 0 8px;
}

.bg-glossary__term h2{
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.2px;
  color: var(--color-text-strong);
}

.bg-glossary__anchors{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-text-muted);
}

.bg-glossary__anchors a{
  color: var(--color-text-link);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-border-default);
}

.bg-glossary__anchors a:hover{
  border-bottom-style: solid;
}

.bg-glossary__refs{
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.bg-glossary__refs code{
  font-family: ui-monospace, monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--color-bg-light-gray);
  border: 1px solid var(--color-border-default);
  white-space: nowrap;
  color: var(--color-text-primary);
}

.bg-glossary__noresults{
  display:none;
  margin: 14px 2px 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-light-gray);
  color: var(--color-text-muted);
}

/* Mobile */
@media (max-width: 520px){
  .bg-glossary__searchHead{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .bg-glossary__searchMeta{
    white-space: normal;
  }
}

/* Target Birthgap-Facts answer wrapper when it's visible */
.bg-expander__toggle:checked ~ .bg-about-wrap {
  padding-top: 1.2em;          /* or 1.5em / 24px — adjust to taste */
  /* If the answer already has padding-top, increase it instead */
}

.bg-about-wrap,
.bg-expander__inner,
.bg-about-a,
.bg-about-a-inner {
  padding-left: 0.9em !important;   /* narrower left indent */
  margin-left: 0 !important;
}

/* =========================
   MEDIA JUMP NAV (pruned)
   ========================= */

.bg-media-jump{
  margin: 2rem 0 3rem;
}

.bg-jump-panel{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.9rem 1.2rem;
  text-align: center;

  background: var(--color-bg-light-gray);
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
}

.bg-jump-row{
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 1.1rem;

  font-size: 0.95rem;
}

.bg-jump-label{
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.bg-jump-btn{
  display:inline-block;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;

  text-decoration: none;
  white-space: nowrap;

  color: var(--color-text-secondary);
  border: 1px solid transparent;
  background: transparent;

  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.bg-jump-btn:hover,
.bg-jump-btn:focus{
  color: var(--color-brand-teal);
  background: var(--color-bg-teal-hover-subtle);
  border-color: var(--color-border-brand-teal-subtle);
  outline: none;
  transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 640px){
  .bg-jump-panel{ padding: 0.85rem 1rem; }
  .bg-jump-row{ gap: 0.7rem 0.8rem; }
  .bg-jump-btn{ padding: 0.34rem 0.78rem; font-size: 0.92rem; }
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .bg-jump-panel{
    background: var(--color-bg-barometer-card);
    border-color: var(--color-border-subtle-light);
    box-shadow: none;
  }

  .bg-jump-label{ color: var(--color-text-muted-dark); }

  .bg-jump-btn{
    color: var(--color-text-primary-dark);
  }

  .bg-jump-btn:hover,
  .bg-jump-btn:focus{
    color: var(--color-link-dark);
    background: var(--shadow-inset-white-hint);
    border-color: var(--color-border-brand-teal-subtle);
  }
}
.bg-jump-label{
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}

@media (min-width: 768px) {  /* or whatever breakpoint fits your design – 768px is common for tablets */
  .watch-party-flex {
    flex-direction: row !important; /* override column */
    flex-wrap: wrap;
    align-items: start;
    gap: 32px;
  }

  .text-column {
    flex: 2 1 0;
    max-width: 66%;
    min-width: 0;
  }

  .image-column {
    flex: 1 1 0;
    max-width: 34%;
    min-width: 280px; /* your original min-width */
  }
}

@media (max-width: 767px) {
  .image-column {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px 0 !important; /* stack below text, centered */
  }

  .text-column {
    overflow: visible !important; /* reset */
  }
}
.bg-about-titlewrap {
  display: flex;
  flex-direction: column;          /* default = mobile stack: image on top */
  align-items: flex-start;
  gap: 16px;
}

@media (min-width: 768px) {        /* or 900px / 64em — adjust to taste */
  .bg-about-titlewrap {
    flex-direction: row;           /* desktop: side-by-side */
    align-items: center;
    gap: 16px;
  }
  
  .bg-section-thumb {
    width: 156px !important;
    height: 96px !important;
    flex-shrink: 0;
  }
}

/* Mobile-first default: image full-width on top, text below */
.bg-about-titlewrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;       /* makes children stretch full width */
  gap: 20px;                  /* a bit more breathing room on mobile */
  width: 100%;
}

.bg-section-thumb {
  width: 100%;                /* full width on mobile */
  max-width: 400px;           /* optional cap so it doesn't get cartoonishly wide on tablets */
  height: auto;               /* maintain aspect ratio */
  border-radius: 8px;         /* optional: soft corners */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* subtle lift */
  align-self: center;         /* center if you prefer, or remove for left-align */
}

/* Desktop/large screens: revert to side-by-side, fixed image size */
@media (min-width: 768px) {
  .bg-about-titlewrap {
    flex-direction: row;
    align-items: center;
    gap: 24px;                /* slightly larger gap on desktop */
  }

  .bg-section-thumb {
    width: 156px !important;  /* force original fixed size */
    height: 96px !important;
    max-width: 156px;
    flex-shrink: 0;
    align-self: flex-start;   /* top-align image with title */
  }
}

/* Trim thumbnails in About/Facts/etc. sections — removes any fixed 1px border/edge artifacts */
.bg-section-thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;          /* soft corners, matches your other trims */
  clip-path: inset(1px round 6px);  /* trims 1px from all sides + rounds to match border-radius */
}


/* Dark mode: subtle brightness/contrast boost if needed (optional) */
@media (prefers-color-scheme: dark) {
  .bg-section-thumb {
    filter: brightness(0.98) contrast(1.05);
  }
}

/* Target the rendered Patreon button */
[data-patreon-widget-type="become-patron-button"] {
  background: #007299 !important;           /* your brand teal */
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-family: "Lato", sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  transition: all 0.2s ease !important;
}

[data-patreon-widget-type="become-patron-button"]:hover {
  background: #005f7f !important;           /* darker teal hover */
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
}

/* Optional: make text say something custom via CSS if needed */
[data-patreon-widget-type="become-patron-button"]::before {
  content: "Join on Patreon" !important;    /* overrides default text if you want */
}

/* Target the rendered Patreon button */
[data-patreon-widget-type="become-patron-button"] {
  background: #007299 !important;           /* your brand teal */
  color: #ffffff !important;
  border: 1px solid #005f7f !important;     /* darker teal border */
  border-radius: 8px !important;
  padding: 10px 22px !important;
  font-family: "Lato", sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  transition: all 0.2s ease !important;
  text-transform: none !important;          /* no uppercase if you prefer */
}

[data-patreon-widget-type="become-patron-button"]:hover {
  background: #005f7f !important;           /* darker hover */
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
}

/* Hide any forced Patreon logo/text if it sneaks in (rare) */
[data-patreon-widget-type="become-patron-button"] img,
[data-patreon-widget-type="become-patron-button"] span:not(:empty) {
  display: none !important;                 /* optional – only if needed */
}

/* =========================
   EVENTS TABLE — MOBILE ONLY
   ========================= */
@media (max-width: 720px) {
  /* Let the wrapper stop forcing table-like clipping */
  .bg-events-tablewrap {
    overflow: visible !important;
  }

  /* Convert the table layout into blocks */
  .bg-events-table,
  .bg-events-table tbody,
  .bg-events-table tr,
  .bg-events-table td {
    display: block;
    width: 100%;
  }

  /* Month header row */
  .bg-events-table tr.month-header {
    margin: 18px 0 10px;
    padding: 0;
    background: transparent;
    border: 0;
  }

  .bg-events-table tr.month-header td {
    padding: 0;
  }

  .bg-events-table .month-title {
    font-size: 1.35rem;
    line-height: 1.15;
    margin: 0;
  }

  /* Each event row becomes a card */
  .bg-events-table tr:not(.month-header) {
    margin: 14px 0;
    padding: 14px 14px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    box-shadow: 0 10px 26px rgba(0,0,0,0.35);

    /* kill any desktop row layout assumptions */
    position: relative;
  }

  /* Remove “table-cell” padding rules if you have them */
  .bg-events-table td {
    padding: 0 !important;
    border: 0 !important;
  }

  /* Date first, full width */
  .bg-events-table td.event-date {
    margin-bottom: 10px;
  }

  .bg-events-table .event-datechip {
    width: 100%;
  }

  .bg-events-table .event-datechip-main {
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.2;
    white-space: normal;          /* allow wrap */
    overflow: visible;
    text-overflow: unset;
  }

  /* Title row: thumbnail + text */
  .bg-events-table td.event-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    min-width: 0;
  }

  .bg-events-table img.event-thumb {
    width: 56px;
    height: auto;
    flex: 0 0 auto;
    border-radius: 10px;
  }

  .bg-events-table .event-title-text {
    font-size: 1.05rem;
    line-height: 1.25;
    font-weight: 800;
    min-width: 0;
    overflow: visible;
    white-space: normal;
  }

  /* Themed label becomes its own line */
  .bg-events-table td.event-themed {
    margin: 0 0 12px;
  }

  .bg-events-table .event-themed-label {
    display: inline-block;
    padding: 8px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.05;
  }

  /* Tickets button full width */
  .bg-events-table td.event-tickets {
    margin-top: 6px;
  }

  .bg-events-table td.event-tickets .eventive-button {
    width: 100%;
  }

  /* If Eventive injects an iframe/button with a fixed width, force it */
  .bg-events-table td.event-tickets * {
    max-width: 100% !important;
  }
}

@media (max-width: 720px) {

  /* --- Put themed + tickets side-by-side --- */
  .bg-events-table tr:not(.month-header) {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* left/right halves */
    gap: 12px;
  }

  /* Date spans full width (row 1) */
  .bg-events-table tr:not(.month-header) td.event-date {
    grid-column: 1 / -1;
    margin-bottom: 6px;
  }

  /* Title spans full width (row 2) */
  .bg-events-table tr:not(.month-header) td.event-title {
    grid-column: 1 / -1;
    margin-bottom: 6px;
  }

  /* Themed chip goes left (row 3 col 1) */
.bg-events-table tr:not(.month-header) td.event-themed {
  grid-column: 1;
  margin: 0;
  display: flex;
  justify-content: center;   
  align-items: center;
}

  /* Stop the chip stretching full width */
  .bg-events-table tr:not(.month-header) td.event-themed .event-themed-label {
    display: inline-flex;
    width: auto;            /* key: don’t fill the column */
    max-width: 100%;
    padding: 10px 12px;
    line-height: 1.05;
    white-space: normal;    /* allow wrap if needed */
    text-align: center;
  }

  /* Button goes right (row 3 col 2) */
  .bg-events-table tr:not(.month-header) td.event-tickets {
    grid-column: 2;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  /* Center the date row */
  .bg-events-table tr:not(.month-header) td.event-date {
    grid-column: 1 / -1;   /* full width row */
    display: flex;
    justify-content: center;   /* horizontal center */
    align-items: center;
    margin-bottom: 6px;
  }

  /* Make sure the date chip itself doesn’t stretch */
  .bg-events-table tr:not(.month-header) 
  td.event-date .event-datechip {
    width: auto;           /* prevent full-width stretching */
    max-width: 100%;
  }

  .bg-events-table tr:not(.month-header) 
  td.event-date .event-datechip-main {
    text-align: center;
  }

  
  .bg-events-table tr:not(.month-header) 
  td.event-themed .event-themed-label {
    margin: 0 auto;      /* hard center safeguard */
    text-align: center;
  }
  /* Make the Eventive button a sensible size on mobile */
  .bg-events-table tr:not(.month-header) td.event-tickets .eventive-button {
    width: 100%;
    max-width: 190px;  /* tweak: 170–220 depending on taste */
  }

 

  /* 1) The grid that contains the two cards:
        your template uses an inline style "display: grid" for this wrapper.
        Make it a clean single-column mobile layout. */
  .bg-boxoffice-wrap div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    justify-items: center !important;  /* centers the cards */
  }

  /* 2) Make the cards themselves centered and not “wider than viewport” */
  .bg-boxoffice-wrap .bg-event-card {
    width: 100%;
    max-width: 560px;        /* adjust if you want */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 3) If the colored header bar is visually inset, force it to full-bleed */
  .bg-boxoffice-wrap .bg-event-card > div:first-child {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
  }

  /* 4) Body padding is inline in your HTML (style="padding: 1.8rem;").
        Ensure it’s symmetric on mobile so the whole card reads centered. */
  .bg-boxoffice-wrap .bg-event-card > div:nth-child(2) {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

   /* Optional: on very narrow phones, stack again */
  @media (max-width: 380px) {
    .bg-events-table tr:not(.month-header) {
      grid-template-columns: 1fr;
    }
    .bg-events-table tr:not(.month-header) td.event-themed,
    .bg-events-table tr:not(.month-header) td.event-tickets {
      grid-column: 1 / -1;
    }
    .bg-events-table tr:not(.month-header) td.event-tickets {
      justify-content: center;
    }
    .bg-events-table tr:not(.month-header) td.event-tickets .eventive-button {
      max-width: none;
    }
  }

}

  /* COUNTRY SNAPSHOTS PAGES */


@media (max-width: 720px) {

  /* Center the whole thumbnail+title row */
  .bg-events-table tr:not(.month-header) td.event-title {
    justify-content: center;   /* centers the flex content */
    text-align: center;
  }

  /* Keep the title text centered (multi-line too) */
  .bg-events-table tr:not(.month-header) .event-title-text {
    text-align: center;
  }
}


/* Snapshot page wrapper */

.bgp-snapshot .cs-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:2rem 1.5rem 3rem;
}

/* heading */

.bgp-snapshot .cs-h1{
  font-size:2.2rem;
  margin-bottom:0.5rem;
}

.bgp-snapshot .cs-sub{
  color:#64748b;
  margin-bottom:2rem;
}

body.bgp-snapshot .cs-wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 20px 56px;
}

body.bgp-snapshot .cs-topbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 6px 0 18px;
  font-size: 14px;
  color: var(--color-text-muted);
}

body.bgp-snapshot .cs-back a{
  color: var(--color-link, var(--color-patreon-red));
  text-decoration: none;
  font-weight: 600;
}

body.bgp-snapshot .cs-back a:hover{
  text-decoration: underline;
}

body.bgp-snapshot .cs-meta{
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}

body.bgp-snapshot .cs-h1{
  margin: 0 0 10px;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.08;
  font-weight: 760;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

body.bgp-snapshot .cs-sub{
  max-width: 840px;
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--color-text-secondary);
}

body.bgp-snapshot .cs-ki{
  background: var(--color-bg-off-white);
  border: 1px solid var(--color-divider-subtle);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 0 0 24px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.04);
}

body.bgp-snapshot .cs-kih{
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

body.bgp-snapshot .cs-kih2{
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 730;
}

body.bgp-snapshot .cs-kimeta{
  font-size: 14px;
  color: var(--color-text-muted);
}

body.bgp-snapshot .cs-kit{
  width: 100%;
  border-collapse: collapse;
}

body.bgp-snapshot .cs-kit td{
  padding: 10px 0;
  border-top: 1px solid var(--color-divider-subtle);
  vertical-align: top;
}

body.bgp-snapshot .cs-kit tr:first-child td{
  border-top: none;
}

body.bgp-snapshot .cs-kitd-label{
  width: 68%;
  padding-right: 16px;
  font-size: 15px;
  line-height: 1.55;
}

body.bgp-snapshot .cs-kitd-label a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(0,0,0,0.28);
}

body.bgp-snapshot .cs-kitd-val{
  width: 32%;
  text-align: right;
  font-size: 16px;
  font-weight: 720;
  white-space: nowrap;
}

body.bgp-snapshot .cs-kifoot{
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-text-muted);
}

body.bgp-snapshot .cs-defs,
body.bgp-snapshot .cs-jump{
  background: #F7FAFC;
  border: 1px solid var(--color-divider-subtle);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 20px;
}

body.bgp-snapshot .cs-defs-h,
body.bgp-snapshot .cs-jump-lab{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

body.bgp-snapshot .cs-defs-links,
body.bgp-snapshot .cs-jump-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

body.bgp-snapshot .cs-defs a,
body.bgp-snapshot .cs-jump-a{
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: 600;
}

body.bgp-snapshot .cs-defs a:hover,
body.bgp-snapshot .cs-jump-a:hover{
  color: var(--color-patreon-red);
}

body.bgp-snapshot .cs-body{
  margin-top: 10px;
}

body.bgp-snapshot .cs-panel,
body.bgp-snapshot .cs-section{
  background: #FCFDFC;
  border: 1px solid var(--color-divider-subtle);
  border-radius: 16px;
  padding: 24px 24px 22px;
  margin: 0 0 24px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.035);
}

body.bgp-snapshot .cs-h2{
  margin: 0 0 18px;
  font-size: 24px;
  line-height: 1.18;
  font-weight: 760;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}

body.bgp-snapshot .cs-section p{
  margin: 0 0 1.1em;
  font-size: 18px;
  line-height: 1.88;
  color: var(--color-text-primary);
}

body.bgp-snapshot .cs-section p:last-child{
  margin-bottom: 0;
}

body.bgp-snapshot .cs-measure__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}

body.bgp-snapshot .cs-measure__text{
  min-width: 0;
}

body.bgp-snapshot .cs-inline{
  margin: 0;
}

body.bgp-snapshot .cs-inline-link{
  display: block;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid var(--color-divider-subtle);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,0.04);
}

body.bgp-snapshot .cs-inline-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #F6F9FB;
  border-bottom: 1px solid var(--color-divider-subtle);
}

body.bgp-snapshot .cs-inline-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

body.bgp-snapshot .cs-inline-badge{
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: var(--color-patreon-red);
  padding: 3px 7px;
  border-radius: 999px;
}

body.bgp-snapshot .cs-inline-img{
  width: 100%;
  height: auto;
  display: block;
}

body.bgp-snapshot .cs-inline-hint{
  padding: 8px 12px 10px;
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
}

body.bgp-snapshot .cs-gallery{
  margin: 28px 0 0;
  background: var(--color-bg-off-white);
  border: 1px solid var(--color-divider-subtle);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
}

body.bgp-snapshot .cs-gallery-sum{
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-size: 18px;
  font-weight: 720;
  background: #F7FAFC;
}

body.bgp-snapshot .cs-gallery-sum::-webkit-details-marker{
  display: none;
}

body.bgp-snapshot .cs-gallery-body{
  padding: 20px 22px 24px;
}

body.bgp-snapshot .cs-charts-section{
  margin: 0 0 28px;
}

body.bgp-snapshot .cs-h3{
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 720;
}

body.bgp-snapshot .cs-charts-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

body.bgp-snapshot .cs-chart{
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--color-divider-subtle);
  border-radius: 12px;
  overflow: hidden;
}

body.bgp-snapshot .cs-chart-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #F7FAFC;
}

body.bgp-snapshot .cs-chart-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

body.bgp-snapshot .cs-badge{
  font-size: 12px;
  font-weight: 700;
  color: white;
  background: var(--color-patreon-red);
  padding: 3px 7px;
  border-radius: 999px;
}

body.bgp-snapshot .cs-chart-img{
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 920px){
  body.bgp-snapshot .cs-measure__grid{
    grid-template-columns: 1fr;
  }

  body.bgp-snapshot .cs-inline{
    max-width: 520px;
  }

  body.bgp-snapshot .cs-kitd-val{
    text-align: left;
    white-space: normal;
  }

  body.bgp-snapshot .cs-kit td{
    display: block;
    width: 100%;
    padding: 6px 0;
  }
}

@media (max-width: 640px){
  body.bgp-snapshot .cs-wrap{
    padding: 22px 16px 46px;
  }

  body.bgp-snapshot .cs-section,
  body.bgp-snapshot .cs-panel,
  body.bgp-snapshot .cs-ki{
    padding: 18px 16px;
    border-radius: 14px;
  }

  body.bgp-snapshot .cs-section p{
    font-size: 16px;
    line-height: 1.78;
  }

  body.bgp-snapshot .cs-h2{
    font-size: 21px;
  }
}

.cs-context{
  font-size: 0.88rem;
  font-weight: 500;
  color: #64748b;

  margin-bottom: 0.5rem;
}

.cs-measure__text strong:first-child{
  font-weight:600;
}

.cs-rank{
  font-weight: 650;
  color: var(--color-text-primary);
}

.cs-rankword{
  font-weight: 650;
  color: var(--color-text-primary);
}

.cs-measure__text p strong:first-child{
  font-weight:600;
  font-size:1.05em;
}

.cs-context{
  font-size:0.86rem;
  color:#64748b;
  font-weight:500;
}

.cs-rank-block{
margin-top:1rem;
padding-top:0.8rem;
border-top:1px solid #e2e8f0;
}


.cs-context{
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;
  color: #64748b;
  margin: 0 0 0.7rem 0;
}

.cs-context-sep{
  opacity: 0.72;
  padding: 0 0.2rem;
}

.cs-flowchain{
  margin: 0.95rem 0 1.15rem 0;
  font-size: 1.02rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
}

.cs-rank{
  font-weight: 650;
  color: var(--color-text-primary);
}

.cs-rankword{
  font-weight: 650;
  color: var(--color-text-primary);
}

.cs-panel{
  margin: 3rem 0;
}

.cs-panel-title{
  font-size: 1.9rem;
  font-weight: 760;
  margin-bottom: 1.8rem;
}

.cs-subsection{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap: 2rem;
  margin-bottom: 2.6rem;
}

.cs-subsection--left{
  grid-template-columns: 420px 1fr;
}

.cs-subhead{
  font-size:1.15rem;
  font-weight:650;
  margin-bottom:.6rem;
}

.cs-pyramid{
  text-align:center;
  font-weight:600;
}

.cs-pyramid-row{
  margin:.25rem 0;
}

.cs-pyramid-arrow{
  opacity:.6;
}

.cs-family-charts{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:1.2rem;
  margin-top:1.2rem;
}

.cs-pyramid{
    text-align:center;
    font-weight:500;
    line-height:1.4;
}

.cs-pyramid-row{
    font-size:1.05rem;
}

.cs-pyramid-arrow{
    color:#64748b;
    margin:4px 0;
}

.cs-inline-stat{
  display:flex;
  align-items:center;
  justify-content:center;
}

.cs-stat-box{
  text-align:center;
  padding:28px 20px;
  border-radius:10px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  width:220px;
}

.cs-stat-label{
  font-size:14px;
  color:#64748b;
  margin-bottom:6px;
}

.cs-stat-value{
  font-size:46px;
  font-weight:700;
  line-height:1.1;
}

.cs-stat-unit{
  font-size:14px;
  color:#64748b;
}

.cs-inline-img,
.cs-chart-img{
  filter: brightness(1.18) contrast(1.15) saturate(1.05);
}

.cs-pyramid-box{
  display:flex;
  align-items:center;
  justify-content:center;
  width:220px;
  min-height:210px;
  padding:24px 20px;
  border-radius:10px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  box-sizing:border-box;
}

.cs-pyramid{
  width:100%;
  text-align:center;
}

.cs-pyramid-row{
  font-size:1.05rem;
  font-weight:500;
  line-height:1.25;
}

.cs-pyramid-arrow{
  margin:6px 0;
  color:#94a3b8;
  font-size:1rem;
  line-height:1;
}


.cs-stat-box,
.cs-pyramid-box{
  width: 220px;
  min-height: 160px;
}

.cs-subsection{
  display:grid;
  grid-template-columns: minmax(0,0.9fr) minmax(0,1.5fr);
  gap: 1.6rem;
  align-items:start;
  margin-bottom:2.4rem;
}

.cs-subsection--left{
  grid-template-columns: minmax(0,1.5fr) minmax(0,0.9fr);
} 

.cs-inline,
.cs-inline-link,
.cs-chart{
  width:100%;
  max-width:none;
}

.cs-inline-img,
.cs-chart-img{
  width:100%;
  height:auto;
}

.cs-stat-box{
  width:260px;
  min-height:180px;
}

.cs-pyramid-box{
  width:260px;
  min-height:180px;
}

.cs-inline-head{
  padding:16px 18px 14px;
}

.cs-inline-hint{
  padding:14px 18px 16px;
}

/* ─────────────────────────────────────
   Mini "Selected years" values table
   ───────────────────────────────────── */

.cs-mini-values{
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #475569;
  border-top: 1px solid #e2e8f0;
}

.cs-mini-values-title{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 4px;
}

.cs-mini-values table{
  border-collapse: collapse;
  width: auto;
}

.cs-mini-values td{
  padding: 2px 10px 2px 0;
  white-space: nowrap;
}

.cs-mini-values td:first-child{
  color: #64748b;
}

.cs-mini-values tr.latest td{
  font-weight: 600;
  color: #0f172a;
}

.cs-decadal-table-wrap {
  margin: 1.8rem 0 2.2rem;
}

.cs-decadal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
  line-height: 1.4;
}

.cs-decadal-table caption {
  font-weight: 600;
  padding-bottom: 0.6rem;
  text-align: left;
  font-size: 1.05rem;
}

.cs-decadal-table th,
.cs-decadal-table td {
  padding: 0.5rem 0.9rem;
  text-align: center;
  border: 1px solid #e0e0e0;
}

.cs-decadal-table th[scope="row"] {
  text-align: left;
  font-weight: 600;
  background: #f8f9fa;
}

.cs-decadal-table .na {
  color: #888;
  font-style: italic;
}

.cs-table-note {
  margin-top: 0.7rem;
  font-size: 0.84rem;
  color: #555;
  text-align: center;
  line-height: 1.35;
}

/* In global.css */
.cs-decadal-table td.latest {
    font-weight: bold;
    background-color: #e3f2fd;  /* light blue */
    border: 1px solid #90caf9;
    color: #0d47a1;
}

/* Tall thin vertical decadal table */
.cs-vertical-table {
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 1.6rem 0 2rem;
}

.cs-vertical-table caption {
  font-weight: 600;
  padding-bottom: 0.6rem;
  text-align: left;
  font-size: 1.05rem;
}

.cs-vertical-table th,
.cs-vertical-table td {
  padding: 0.6rem 1rem;
  text-align: center;
  border: 1px solid #e0e0e0;
  vertical-align: middle;
}

.cs-vertical-table th {
  background: #f8f9fa;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

/* Year column (first column) */
.cs-vertical-table th:first-child,
.cs-vertical-table td:first-child {
  text-align: center;
  font-weight: bold;
  background: #f0f4f8;
  min-width: 80px;
}

/* Highlight latest row */
.cs-vertical-table tr.latest {
  background: #e3f2fd;
  font-weight: 600;
}

.cs-vertical-table tr.latest td {
  border-color: #90caf9;
}

/* n/a cells */
.cs-vertical-table .na {
  color: #888;
  font-style: italic;
}

/* Responsive: scroll on very narrow screens */
.cs-decadal-table-wrap {
  overflow-x: auto;
  margin: 1.6rem 0;
}

.cs-vertical-pairs {
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 1.6rem 0 2rem;
}

.cs-vertical-pairs caption {
  font-weight: 600;
  padding-bottom: 0.6rem;
  text-align: left;
  font-size: 1.05rem;
}

.cs-vertical-pairs th,
.cs-vertical-pairs td {
  padding: 0.6rem 1rem;
  text-align: center;
  border: 1px solid #e0e0e0;
}

.cs-vertical-pairs th {
  background: #f8f9fa;
  font-weight: 600;
}

/* Year columns */
.cs-vertical-pairs th:first-child,
.cs-vertical-pairs td:nth-child(odd) {
  background: #f0f4f8;
  font-weight: bold;
  min-width: 80px;
}

/* Value columns */
.cs-vertical-pairs td:nth-child(even) {
  min-width: 100px;
}

/* Highlight latest row (any cell in the row) */
.cs-vertical-pairs tr.latest td {
  background: #e3f2fd;
  font-weight: 600;
  border-color: #90caf9;
}

/* n/a */
.cs-vertical-pairs .na {
  color: #888;
  font-style: italic;
}

/* Responsive */
.cs-decadal-table-wrap {
  overflow-x: auto;
}


/* Single-metric vertical table: Year | Value */
.cs-vertical-single {
  width: 100%;
  max-width: 320px;               /* Keeps it narrow and tall */
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 1.8rem 0 2.2rem;
}

.cs-vertical-single caption {
  font-weight: 600;
  padding-bottom: 0.6rem;
  text-align: left;
  font-size: 1.05rem;
}

.cs-vertical-single th,
.cs-vertical-single td {
  padding: 0.6rem 1rem;
  text-align: center;
  border: 1px solid #e0e0e0;
}

.cs-vertical-single th {
  background: #f8f9fa;
  font-weight: 600;
}

/* Year column */
.cs-vertical-single th:first-child,
.cs-vertical-single td:first-child {
  background: #f0f4f8;
  font-weight: bold;
  width: 40%;
}

/* Value column */
.cs-vertical-single td:last-child {
  width: 60%;
}

/* Highlight latest row */
.cs-vertical-single tr.latest td {
  background: #e3f2fd;
  font-weight: 600;
  border-color: #90caf9;
}

/* n/a */
.cs-vertical-single .na {
  color: #888;
  font-style: italic;
}

/* Wrapper for spacing */
.cs-decadal-table-wrap {
  margin: 1.8rem 0;
}

.cs-split-vertical {
  width: 100%;
  max-width: 600px;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 1.8rem 0 2.2rem;
}

.cs-split-vertical caption {
  font-weight: 600;
  padding-bottom: 0.6rem;
  text-align: left;
  font-size: 1.05rem;
}

.cs-split-vertical th,
.cs-split-vertical td {
  padding: 0.6rem 1rem;
  text-align: center;
  border: 1px solid #e0e0e0;
}

.cs-split-vertical th {
  background: #f8f9fa;
  font-weight: 600;
}

/* Left side (oldest) */
.cs-split-vertical th:nth-child(1),
.cs-split-vertical td:nth-child(1),
.cs-split-vertical th:nth-child(2),
.cs-split-vertical td:nth-child(2) {
  background: #f0f4f8;
}

/* Right side (recent) */
.cs-split-vertical th:nth-child(3),
.cs-split-vertical td:nth-child(3),
.cs-split-vertical th:nth-child(4),
.cs-split-vertical td:nth-child(4) {
  background: #f0f4f8;
}

/* Highlight latest row */
.cs-split-vertical tr.latest td {
  background: #e3f2fd !important;
  font-weight: 600;
  border-color: #90caf9;
}

/* n/a */
.cs-split-vertical .na {
  color: #888;
  font-style: italic;
}

.cs-decadal-table-wrap {
  overflow-x: auto;
  margin: 1.8rem 0;
}

.cs-split-vertical {
  width: 100%;
  max-width: 600px;               /* Keeps it narrow */
  border-collapse: collapse;
  font-size: 0.85rem;             /* Smaller font – was 0.95rem */
  margin: 1.6rem 0 2rem;
  line-height: 1.3;
}

.cs-split-vertical caption {
  font-weight: 600;
  padding-bottom: 0.5rem;
  text-align: left;
  font-size: 1rem;                /* Slightly smaller caption */
}

.cs-split-vertical th,
.cs-split-vertical td {
  padding: 0.5rem 0.8rem;         /* Tighter padding */
  text-align: center;
  border: 1px solid #e0e0e0;
}

.cs-split-vertical th {
  background: #f8f9fa;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Year columns */
.cs-split-vertical th:nth-child(1),
.cs-split-vertical td:nth-child(1),
.cs-split-vertical th:nth-child(3),
.cs-split-vertical td:nth-child(3) {
  background: #f0f4f8;
  font-weight: bold;
  min-width: 70px;
}

/* Value columns */
.cs-split-vertical td:nth-child(2),
.cs-split-vertical td:nth-child(4) {
  min-width: 90px;
}

/* Highlight latest row */
.cs-split-vertical tr.latest td {
  background: #e3f2fd !important;
  font-weight: 600;
  border-color: #90caf9;
}

/* n/a */
.cs-split-vertical .na {
  color: #888;
  font-style: italic;
}

.cs-decadal-table-wrap {
  overflow-x: auto;
  margin: 1.6rem 0;
}

/* Reduced white space between table and note */
.cs-decadal-table-wrap {
  margin: 1.4rem 0 0.8rem;  /* Less top/bottom margin */
  overflow-x: auto;
}

.cs-table-note {
  margin-top: 0.4rem;        /* Much closer to table */
  font-size: 0.85rem;
  color: #555;
  text-align: left;
  line-height: 1.3;
}

/* Prior year: lighter blue */
.cs-split-vertical tr td.prior {
  background: #f0f8ff !important;  /* very light blue */
  font-weight: 500;
  border-color: #b3e5fc;
}

/* Most recent year: stronger blue */
.cs-split-vertical tr td.latest {
  background: #e3f2fd !important;  /* medium blue */
  font-weight: 700;
  border-color: #90caf9;
  box-shadow: inset 0 0 0 1px #42a5f5;  /* subtle inner border for emphasis */
}

/* Prior year: lighter blue */
.cs-split-vertical td.prior {
  background: #f0f8ff !important;  /* very light blue */
  font-weight: 500;
  border-color: #b3e5fc;
}

/* Most recent year: stronger blue */
.cs-split-vertical td.latest {
  background: #e3f2fd !important;  /* medium blue */
  font-weight: 700;
  border-color: #90caf9;
  box-shadow: inset 0 0 0 1px #42a5f5;
}

/* Superscript asterisk for expected */
.cs-split-vertical sup {
  font-size: 0.75em;
  vertical-align: super;
  color: #d32f2f;  /* red asterisk for visibility */
  margin-left: 0.2em;
}

/* Tighter spacing table → note */
.cs-decadal-table-wrap {
  margin: 1.2rem 0 0.5rem;  /* less white space */
}

.cs-table-note {
  margin-top: 0.3rem;
  font-size: 0.84rem;
  color: #555;
  line-height: 1.3;
}

/* Centered source note */
.cs-table-note {
  margin: 0.4rem 0 0;          /* Tight spacing */
  font-size: 0.85rem;
  color: #555;
  line-height: 1.3;
  text-align: center;          /* ← CENTERED */
}

/* Asterisk: larger, same color as text, no 3D lift */
.cs-split-vertical sup {
  font-size: 1.2em;            /* Larger than before */
  vertical-align: baseline;    /* Sits naturally with text, no "lift" */
  color: inherit;              /* Same color as surrounding text (no red) */
  margin-left: 0.1em;
  font-weight: normal;
}

/* Centered main panel titles */
.cs-panel-title-center {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1.2rem;
  color: #0E2A36;  /* your theme color */
  padding: 0.8rem 0;
  border-bottom: 2px solid #e0e0e0;  /* optional underline */
}

/* TGI Pyramid - tight vertical stacking */
.cs-pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;                    /* Very small gap between rows/arrows */
  margin: 1rem 0;
}

.cs-pyramid-row {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0E2A36;
  text-align: center;
  min-width: 180px;
  padding: 0.4rem 0.8rem;
  background: #f8f9fa;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.cs-pyramid-arrow {
  font-size: 1.6rem;
  color: #555;
  line-height: 0.8;               /* Pull arrow closer to rows */
  margin: -0.3rem 0;              /* Negative margin to reduce space */
}

/* SHL + TGI stacked layout */
.cs-subsection--stack {
  display: block;
}

.cs-subsection--stack .cs-subsection__text {
  max-width: 760px;
}

.cs-inline-below {
  margin: 1.35rem 0 1.1rem;
}

.cs-inline-below .cs-inline,
.cs-inline-below .cs-inline-stat {
  margin: 0;
}

/* keep SHL card below text, not off to the side */
.cs-inline-below .cs-inline-stat {
  display: block;
  width: fit-content;
  max-width: 100%;
}

/* TGI pyramid below heading / context and above text */
.cs-inline-below--pyramid {
  display: flex;
  justify-content: center;
}

.cs-inline-below--pyramid .cs-pyramid-box {
  margin: 0;
}

/* optional: slightly tighter pyramid spacing in stacked mode */
.cs-pyramid-box {
  width: fit-content;
  max-width: 100%;
}

/* SHL + TGI paired row */
.cs-paired-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;

  margin: 3rem 0;
  padding: 2rem 0;
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.cs-paired-col {
  min-width: 0;
}

.cs-paired-col .cs-subsection__text {
  max-width: none;
}

.cs-paired-visual {
  margin-top: 1.2rem;
}

.cs-paired-visual--shl {
  display: flex;
  justify-content: flex-start;
}

.cs-paired-visual--tgi {
  display: flex;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.cs-paired-visual--shl .cs-inline,
.cs-paired-visual--shl .cs-inline-stat {
  margin: 0;
}

.cs-paired-visual--tgi .cs-pyramid-box {
  margin: 0;
}

@media (max-width: 980px) {
  .cs-paired-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .cs-paired-visual--tgi {
    justify-content: flex-start;
  }
}


/* subtle centered subsection divider inside panels */
.cs-panel .cs-subsection + .cs-subsection {
  position: relative;
  margin-top: 2.4rem;
  padding-top: 2.2rem;
}

.cs-panel .cs-subsection + .cs-subsection::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  
  width: 280px;
  height: 1px;
  background: rgba(0,0,0,0.1);
}



/* SHL + TGI paired row */
.cs-paired-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  margin: 3rem 0;
  padding: 1.25rem 0;
}

.cs-paired-col {
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  padding: 1.6rem 1.5rem 1.7rem;
}

.cs-paired-col .cs-subsection__text {
  max-width: none;
}

.cs-paired-col .cs-subhead {
  text-align: center;
  margin-bottom: 1rem;
}

.cs-paired-visual {
  margin-top: 1.2rem;
}

.cs-paired-visual--shl {
  display: flex;
  justify-content: center;
}

.cs-paired-visual--tgi {
  display: flex;
  justify-content: center;
  margin-top: 0.9rem;
  margin-bottom: 1.2rem;
}

.cs-paired-visual--shl .cs-inline,
.cs-paired-visual--shl .cs-inline-stat {
  margin: 0;
}

.cs-paired-visual--tgi .cs-pyramid-box {
  margin: 0;
}

@media (max-width: 980px) {
  .cs-paired-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* extra separation before final ranking paragraph, e.g. "Globally..." */
.cs-ranker-para {
  margin-top: 1rem;
}


/* =========================
   11) ADD CSS
   ========================= */

.cs-ai-summary {
  margin: 1.25rem 0 1.75rem;
}

.cs-ai-summary-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 1rem 1.15rem 1.05rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.cs-ai-summary-inner p:last-child {
  margin-bottom: 0;
}

.cs-ai-summary {
  margin: 1.25rem 0 1.75rem;
}

.cs-ai-summary-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 1rem 1.15rem 1.05rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.cs-ai-summary-inner p:last-of-type {
  margin-bottom: 0.7rem;
}

.cs-ai-summary-bullets {
  margin: 0.3rem 0 0 1.15rem;
  padding: 0;
}

.cs-ai-summary-bullets li {
  margin: 0.35rem 0;
}