/* ============================================================================
   BLACK ARCSCEND — HOMEPAGE EDITORIAL LAYER
   Obsidian & Gold Leaf · v1.1.0

   Loaded ONLY on is_front_page() via inc/homepage.php.
   Scoped behind body.ba-homepage so the single-post blogzine layer
   and the rest of the site stay untouched.

   Targets tagDiv's stable structural classes (.td_module_wrap,
   .td-module-thumb, .td-post-category, .td-module-title, .td-excerpt)
   PLUS optional custom classes you paste into each named Composer
   block's "CSS Class" field — see COMPOSER_CLASSES.md.
   ============================================================================ */


/* ============================================================================
   1 · TOKENS — Obsidian & Gold Leaf (re-declared for safety)
   ============================================================================ */
body.ba-homepage {
  --ba-black:        #0A0A0A;
  --ba-ink:          #14110F;
  --ba-paper:        #FAF7F1;
  --ba-parchment:    #F5F0E6;
  --ba-parchment-2:  #EDE6D6;
  --ba-gold:         #C9A961;
  --ba-gold-deep:    #A8884A;
  --ba-gold-light:   #E4CB8C;
  --ba-crimson:      #8B2635;
  --ba-green:        #1B4332;
  --ba-green-2:      #0B3D2E;
  --ba-green-3:      #2D5A3D;
  --ba-rule:         rgba(201,169,97,0.20);
  --ba-rule-soft:    rgba(201,169,97,0.10);
  --ba-rule-dark:    rgba(20,17,15,0.10);
  --ba-shadow-card:  0 4px 24px rgba(10,10,10,0.06);
  --ba-shadow-lift:  0 12px 40px rgba(10,10,10,0.14);
  --ba-shadow-inset: 0 6px 32px rgba(10,10,10,0.35);
  --ba-gutter:       clamp(20px, 4vw, 56px);
  --ba-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --ba-ease-luxe:    cubic-bezier(0.16, 1, 0.3, 1);
  --ba-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ba-font-body:    'Newsreader', Georgia, 'Times New Roman', serif;
  --ba-font-mono:    'JetBrains Mono', ui-monospace, monospace;
}


/* ============================================================================
   2 · PAGE ATMOSPHERE — subtle film grain over the entire homepage
   ============================================================================ */
body.ba-homepage {
  background: var(--ba-parchment);
}

body.ba-homepage::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='320' height='320' filter='url(%23n)' opacity='0.8'/></svg>");
}


/* ============================================================================
   3 · HIDE TAGDIV BREAKING NEWS (replaced visually by the Cover Hero)
   ============================================================================ */
body.ba-homepage .td_block_trending_now,
body.ba-homepage .tdb_breaking_news,
body.ba-homepage .td-trending-now-wrapper,
body.ba-homepage .ba-hide-on-home {
  display: none !important;
}


/* ============================================================================
   4 · COVER HERO — the cinematic magazine opening
   ============================================================================ */
.ba-cover {
  position: relative;
  width: 100%;
  min-height: 92vh;
  background: var(--ba-black);
  color: var(--ba-paper);
  overflow: hidden;
  isolation: isolate;
  display: flex;
}

/* The image, with slow Ken Burns + cinematic grade */
.ba-cover__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.ba-cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.06) saturate(1.10) brightness(0.92);
  transform-origin: 52% 48%;
  animation: ba-kenburns 32s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ba-kenburns {
  from { transform: scale(1.0)  translate(0%,    0%); }
  to   { transform: scale(1.08) translate(-1.6%, -0.9%); }
}

/* Layered scrim — bottom-up dark + side vignettes + top fade for masthead legibility */
.ba-cover__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10,10,10,0.72) 0%,
      rgba(10,10,10,0.20) 18%,
      rgba(10,10,10,0.10) 50%,
      rgba(10,10,10,0.55) 82%,
      rgba(10,10,10,0.92) 100%),
    linear-gradient(90deg,
      rgba(10,10,10,0.55) 0%,
      rgba(10,10,10,0.00) 30%,
      rgba(10,10,10,0.00) 70%,
      rgba(10,10,10,0.55) 100%);
}
.ba-cover__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(10,10,10,0.55) 100%);
  pointer-events: none;
}
.ba-cover__grain {
  position: absolute; inset: 0;
  opacity: 0.10;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* Content container */
.ba-cover__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) var(--ba-gutter) clamp(56px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 44px);
}

/* Editorial masthead bar */
.ba-cover__masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--ba-font-display);
  font-weight: 700;
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ba-gold-light);
}
.ba-cover__wordmark { color: var(--ba-gold); }
.ba-cover__issue {
  font-family: var(--ba-font-mono);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.24em;
  color: rgba(228,203,140,0.78);
}
.ba-cover__top-rule {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--ba-gold-deep) 12%,
    var(--ba-gold) 50%,
    var(--ba-gold-deep) 88%,
    transparent 100%);
  opacity: 0.55;
  margin-top: -16px;
}

/* Body split — lead on left, cover-story inset on right (desktop) */
.ba-cover__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: end;
  flex: 1;
  padding-top: clamp(16px, 4vw, 56px);
}
@media (min-width: 1100px) {
  .ba-cover__body {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 380px);
    align-items: end;
  }
}

.ba-cover__lead { max-width: 22ch; }

.ba-cover__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ba-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ba-gold);
  margin-bottom: clamp(18px, 2.5vw, 28px);
}
.ba-cover__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ba-gold);
  box-shadow: 0 0 12px rgba(228,203,140,0.65);
}

/* The big title — gradient gold with subtle shimmer on hover */
.ba-cover__title {
  font-family: var(--ba-font-display);
  font-weight: 800;
  font-size: clamp(40px, 7vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(20px, 3vw, 32px) 0;
  text-shadow: 0 2px 32px rgba(0,0,0,0.5);
}
.ba-cover__title a {
  color: transparent;
  text-decoration: none;
  background-image: linear-gradient(95deg,
    var(--ba-gold-light) 0%,
    var(--ba-gold) 38%,
    var(--ba-gold-light) 62%,
    var(--ba-gold) 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 1.2s var(--ba-ease-luxe), filter 0.4s var(--ba-ease);
}
.ba-cover__title a:hover {
  background-position: 100% 50%;
  filter: drop-shadow(0 0 24px rgba(228,203,140,0.25));
}

.ba-cover__deck {
  font-family: var(--ba-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.44;
  color: var(--ba-paper);
  margin: 0 0 clamp(22px, 3vw, 32px) 0;
  max-width: 52ch;
  opacity: 0.94;
}

.ba-cover__byline {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ba-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--ba-gold);
}
.ba-cover__byline-sep { color: var(--ba-gold-deep); font-weight: 400; }

/* The "Cover Story" parchment inset card — gold-foil top edge, embossed feel */
.ba-cover__inset {
  position: relative;
  background: linear-gradient(180deg, var(--ba-parchment) 0%, var(--ba-parchment-2) 100%);
  color: var(--ba-ink);
  padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 28px);
  box-shadow: var(--ba-shadow-inset);
  border-bottom: 1px solid var(--ba-rule-dark);
  width: 100%;
}
.ba-cover__inset-foil {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--ba-gold-deep) 0%,
    var(--ba-gold) 22%,
    var(--ba-gold-light) 50%,
    var(--ba-gold) 78%,
    var(--ba-gold-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 2px 6px rgba(168,136,74,0.35);
}
.ba-cover__inset-label {
  font-family: var(--ba-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ba-green);
  margin-bottom: 18px;
}
.ba-cover__inset-list { list-style: none; padding: 0; margin: 0 0 18px; }
.ba-cover__inset-item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ba-rule-dark);
  font-family: var(--ba-font-body);
  font-size: 14px;
  line-height: 1.46;
  color: var(--ba-ink);
}
.ba-cover__inset-item:last-child { border-bottom: none; }
.ba-cover__inset-num {
  font-family: var(--ba-font-mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--ba-gold-deep);
  letter-spacing: 0.05em;
}
.ba-cover__inset-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ba-font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 13px;
  color: var(--ba-green-2);
  text-decoration: none;
  border-bottom: 1px solid var(--ba-green-2);
  padding-bottom: 2px;
  transition: gap 220ms var(--ba-ease), color 220ms var(--ba-ease);
}
.ba-cover__inset-cta:hover { gap: 14px; color: var(--ba-crimson); }

/* The "OPEN ━" scroll cue, bottom right */
.ba-cover__scroll {
  position: absolute;
  bottom: clamp(20px, 3vw, 36px);
  right: var(--ba-gutter);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ba-gold);
  font-family: var(--ba-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  transition: color 220ms var(--ba-ease);
  z-index: 3;
}
.ba-cover__scroll:hover { color: var(--ba-gold-light); }
.ba-cover__scroll-line {
  width: 64px; height: 1px;
  background: linear-gradient(90deg, var(--ba-gold-deep), var(--ba-gold-light));
  animation: ba-cue 2.6s ease-in-out infinite;
}
@keyframes ba-cue {
  0%, 100% { transform: translateX(0);   opacity: 0.55; }
  50%      { transform: translateX(10px); opacity: 1; }
}

@media (min-width: 1400px) {
  .ba-cover__lead { padding-right: 40px; }
}
@media (max-width: 1099px) {
  .ba-cover { min-height: 88vh; }
  .ba-cover__inset { max-width: 720px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .ba-cover { min-height: 78vh; }
  .ba-cover__title { font-size: clamp(34px, 9vw, 56px); }
  .ba-cover__scroll-line { width: 40px; }
}


/* ============================================================================
   5 · BRAND-LINE MARQUEE
   ============================================================================ */
.ba-marquee {
  background: var(--ba-ink);
  border-top: 1px solid var(--ba-rule);
  border-bottom: 1px solid var(--ba-rule);
  overflow: hidden;
  padding: clamp(18px, 2vw, 26px) 0;
  position: relative;
}
.ba-marquee::before,
.ba-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  pointer-events: none;
  z-index: 2;
}
.ba-marquee::before { left: 0;  background: linear-gradient(90deg, var(--ba-ink), transparent); }
.ba-marquee::after  { right: 0; background: linear-gradient(270deg, var(--ba-ink), transparent); }

.ba-marquee__track {
  display: inline-flex;
  white-space: nowrap;
  animation: ba-marquee-slide 70s linear infinite;
  will-change: transform;
}
.ba-marquee__line {
  font-family: var(--ba-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 0.005em;
  color: var(--ba-gold-light);
  background: linear-gradient(95deg, var(--ba-gold) 0%, var(--ba-gold-light) 45%, var(--ba-gold) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 32px;
}
.ba-marquee__diamond {
  color: var(--ba-gold-deep);
  -webkit-text-fill-color: var(--ba-gold-deep);
  font-style: normal;
}
@keyframes ba-marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}


/* ============================================================================
   6 · GOLD-FOIL SECTION DIVIDER + KICKER+TITLE PATTERN
   Apply ".ba-section" + ".ba-section--{name}" to each named Composer block.
   The kicker label and title are derived from the block's existing heading;
   we restyle them via the structural selectors below.
   ============================================================================ */
body.ba-homepage .ba-section {
  position: relative;
  padding-top: clamp(64px, 9vw, 112px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
body.ba-homepage .ba-section::before {
  content: '';
  display: block;
  width: min(1200px, calc(100% - 2 * var(--ba-gutter)));
  margin: 0 auto clamp(32px, 4vw, 56px);
  height: 6px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      var(--ba-gold-deep) 18%,
      var(--ba-gold) 38%,
      var(--ba-gold-light) 50%,
      var(--ba-gold) 62%,
      var(--ba-gold-deep) 82%,
      transparent 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 2px 12px rgba(201,169,97,0.18);
  position: relative;
}

/* Decorative diamond ornament centered on the foil bar */
body.ba-homepage .ba-section::after {
  content: '✦';
  position: absolute;
  top: clamp(54px, 9vw, 96px);
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ba-font-display);
  font-size: 18px;
  color: var(--ba-gold-deep);
  background: var(--ba-parchment);
  padding: 0 14px;
  text-shadow: 0 0 12px rgba(228,203,140,0.55);
}

/* Section-heading restyling — works on Newspaper's block titles */
body.ba-homepage .ba-section .td-block-title,
body.ba-homepage .ba-section .tdb-block-title,
body.ba-homepage .ba-section .td_block_title,
body.ba-homepage .ba-section h2.entry-title,
body.ba-homepage .ba-section .td_module_wrap > .td-module-meta-info > .td-module-title,
body.ba-homepage .ba-section .tdb-title-text,
body.ba-homepage .ba-section .ba-section__title {
  font-family: var(--ba-font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(24px, 3vw, 38px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.005em !important;
  color: var(--ba-ink) !important;
  text-transform: none !important;
  margin: 0 auto clamp(28px, 4vw, 44px) !important;
  text-align: center !important;
  max-width: 1100px !important;
  padding: 0 var(--ba-gutter) !important;
  position: relative !important;
}

/* Dark-band sections (TV, member CTA) get inverted heading color */
body.ba-homepage .ba-section--dark .td-block-title,
body.ba-homepage .ba-section--dark .tdb-block-title,
body.ba-homepage .ba-section--dark .ba-section__title,
body.ba-homepage .ba-section--dark .tdb-title-text {
  color: var(--ba-gold-light) !important;
}


/* ============================================================================
   7 · POST CARD MINI-SPREAD — restyles every tagDiv card on the homepage
   Targets .td_module_wrap and its standard children. Sitewide effect on home.
   ============================================================================ */

/* Card frame */
body.ba-homepage .td_module_wrap,
body.ba-homepage .tdb_module_loop .td_module_wrap,
body.ba-homepage .td-module-container,
body.ba-homepage .td_block_inner .td_module_wrap {
  background: var(--ba-paper) !important;
  border: 1px solid var(--ba-rule-soft) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: var(--ba-shadow-card);
  transition: transform 380ms var(--ba-ease-luxe),
              box-shadow 380ms var(--ba-ease-luxe),
              border-color 380ms var(--ba-ease);
  position: relative;
}
body.ba-homepage .td_module_wrap:hover {
  transform: translateY(-3px);
  box-shadow: var(--ba-shadow-lift);
  border-color: var(--ba-gold);
}

/* Card thumbnail */
body.ba-homepage .td_module_wrap .td-module-thumb,
body.ba-homepage .td_module_wrap .td-image-wrap {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0 !important;
}
body.ba-homepage .td_module_wrap .td-module-thumb img,
body.ba-homepage .td_module_wrap .td-image-wrap img,
body.ba-homepage .td_module_wrap .entry-thumb {
  width: 100%;
  height: auto;
  display: block;
  filter: contrast(1.04) saturate(1.06) brightness(0.96);
  transition: transform 760ms var(--ba-ease-luxe), filter 380ms var(--ba-ease);
}
body.ba-homepage .td_module_wrap:hover .td-module-thumb img,
body.ba-homepage .td_module_wrap:hover .td-image-wrap img,
body.ba-homepage .td_module_wrap:hover .entry-thumb {
  transform: scale(1.04);
  filter: contrast(1.08) saturate(1.12) brightness(1.0);
}

/* Card meta + content area */
body.ba-homepage .td_module_wrap .td-module-meta-info,
body.ba-homepage .td_module_wrap .item-details {
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 28px) !important;
  background: var(--ba-paper) !important;
  border-top: none !important;
  position: relative;
}

/* Category kicker — small mono gold above title */
body.ba-homepage .td_module_wrap .td-post-category,
body.ba-homepage .td_module_wrap .tdb-entry-category,
body.ba-homepage .td_module_wrap .entry-category {
  display: inline-block !important;
  font-family: var(--ba-font-mono) !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase !important;
  color: var(--ba-gold-deep) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 0 0 16px !important;
  margin: 0 0 12px !important;
  text-decoration: none !important;
  position: relative;
}
body.ba-homepage .td_module_wrap .td-post-category::before,
body.ba-homepage .td_module_wrap .tdb-entry-category::before,
body.ba-homepage .td_module_wrap .entry-category::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ba-gold);
  box-shadow: 0 0 6px rgba(228,203,140,0.55);
}
body.ba-homepage .td_module_wrap .td-post-category:hover { color: var(--ba-crimson) !important; }

/* Title */
body.ba-homepage .td_module_wrap .td-module-title,
body.ba-homepage .td_module_wrap .entry-title {
  font-family: var(--ba-font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(17px, 1.6vw, 22px) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.005em !important;
  margin: 0 0 12px !important;
}
body.ba-homepage .td_module_wrap .td-module-title a,
body.ba-homepage .td_module_wrap .entry-title a {
  color: var(--ba-ink) !important;
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 480ms var(--ba-ease-luxe), color 280ms var(--ba-ease);
  padding-bottom: 2px;
}
body.ba-homepage .td_module_wrap:hover .td-module-title a,
body.ba-homepage .td_module_wrap:hover .entry-title a {
  color: var(--ba-green-2) !important;
  background-size: 100% 1px;
}

/* Excerpt */
body.ba-homepage .td_module_wrap .td-excerpt,
body.ba-homepage .td_module_wrap .entry-summary {
  font-family: var(--ba-font-body) !important;
  font-size: 14px !important;
  line-height: 1.52 !important;
  color: rgba(20,17,15,0.78) !important;
  margin: 0 0 14px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Date + author meta */
body.ba-homepage .td_module_wrap .td-post-date,
body.ba-homepage .td_module_wrap .entry-date,
body.ba-homepage .td_module_wrap .td-module-date,
body.ba-homepage .td_module_wrap .meta-info-date {
  font-family: var(--ba-font-mono) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  color: var(--ba-gold-deep) !important;
  text-transform: uppercase !important;
}
body.ba-homepage .td_module_wrap .td-post-author-name,
body.ba-homepage .td_module_wrap .td-author-name {
  font-family: var(--ba-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  color: rgba(20,17,15,0.55) !important;
  text-transform: uppercase !important;
}

/* Comment counter — make it discreet */
body.ba-homepage .td_module_wrap .td-module-comments {
  font-family: var(--ba-font-mono) !important;
  font-size: 11px !important;
  color: var(--ba-crimson) !important;
}


/* ============================================================================
   8 · SECTION-SPECIFIC OVERRIDES — apply via custom CSS Class in Composer
   See COMPOSER_CLASSES.md for the mapping table.
   ============================================================================ */

/* 8.1 — EXCLUSIVE CONTENTS */
.ba-section--exclusive { background: var(--ba-parchment); }

/* 8.2 — BLACK BUSINESS FUNDING : "Money Desk" register, deeper shadows */
.ba-section--funding .td_module_wrap { box-shadow: var(--ba-shadow-lift); }
.ba-section--funding .td_module_wrap .td-post-category::before { background: var(--ba-green-2); }

/* 8.3 — BLACK BUSINESS GROWTH : energetic royal-fern register */
.ba-section--growth .td_module_wrap:hover .td-module-title a { color: var(--ba-green-3) !important; }

/* 8.4 — Celebrities (flag for rename) */
.ba-section--celebrities { background: var(--ba-parchment-2); }

/* 8.5 — Most Popular : list format with mono index numerals */
.ba-section--popular .td_module_wrap {
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  gap: 24px !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--ba-rule-dark) !important;
  box-shadow: none !important;
  padding: 18px var(--ba-gutter) !important;
}
.ba-section--popular .td_module_wrap:hover { transform: none; box-shadow: none; }
.ba-section--popular .td_module_wrap .td-module-thumb { display: none !important; }
.ba-section--popular .td_module_wrap::before {
  content: counter(ba-popular, decimal-leading-zero);
  font-family: var(--ba-font-mono);
  font-weight: 700;
  font-size: 22px;
  color: var(--ba-gold-deep);
  letter-spacing: 0.05em;
}
.ba-section--popular { counter-reset: ba-popular; }
.ba-section--popular .td_module_wrap { counter-increment: ba-popular; }
.ba-section--popular .td_module_wrap .td-module-title { font-size: clamp(16px, 1.4vw, 20px) !important; }

/* 8.6 — Exclusive Content (members' shelf) — premium register, malachite */
.ba-section--shelf { background: var(--ba-parchment-2); }
.ba-section--shelf .td_module_wrap { border-color: var(--ba-gold) !important; }
.ba-section--shelf .td_module_wrap .td-post-category::before { background: var(--ba-green-2); }

/* 8.7 — BLACK-LUX BRANDING : premium luxury register */
.ba-section--branding { background: var(--ba-parchment-2); }
.ba-section--branding .td_module_wrap {
  border-width: 1.5px !important;
  border-color: var(--ba-rule) !important;
}
.ba-section--branding .td_module_wrap:hover {
  border-color: var(--ba-gold) !important;
  border-width: 1.5px !important;
}
.ba-section--branding .td_module_wrap .td-post-category {
  color: var(--ba-green-2) !important;
}

/* 8.8 — High-Performance Infrastructure : crimson markers, thicker rules */
.ba-section--infra .td_module_wrap .td-post-category::before { background: var(--ba-crimson); }

/* 8.9 — NEWSROOM (Black Business News & Politics) */
.ba-section--newsroom { background: var(--ba-ink); }
.ba-section--newsroom .td_module_wrap {
  background: var(--ba-black) !important;
  border-color: rgba(201,169,97,0.16) !important;
}
.ba-section--newsroom .td_module_wrap .td-module-meta-info { background: var(--ba-black) !important; }
.ba-section--newsroom .td_module_wrap .td-module-title a { color: var(--ba-paper) !important; }
.ba-section--newsroom .td_module_wrap .td-excerpt { color: rgba(250,247,241,0.72) !important; }
.ba-section--newsroom .td_module_wrap .td-post-category { color: var(--ba-gold-light) !important; }


/* ============================================================================
   9 · BLACK ARCSCEND TV — "TRANSMISSIONS" theatre treatment
   Apply .ba-section--tv to the TV block. Container becomes a dark theatre band.
   ============================================================================ */
.ba-section--tv {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(201,169,97,0.06) 0%, transparent 55%),
    var(--ba-black);
  padding: clamp(80px, 10vw, 140px) 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ba-section--tv::before {
  /* Override the parchment foil — render foil bar on dark */
  background:
    linear-gradient(90deg,
      transparent 0%,
      var(--ba-gold-deep) 22%,
      var(--ba-gold) 50%,
      var(--ba-gold-deep) 78%,
      transparent 100%) !important;
}
.ba-section--tv::after {
  background: var(--ba-black) !important;
  color: var(--ba-gold) !important;
}
.ba-section--tv .td-block-title,
.ba-section--tv .tdb-block-title,
.ba-section--tv .ba-section__title,
.ba-section--tv .tdb-title-text {
  color: var(--ba-gold-light) !important;
  font-style: italic !important;
  font-size: clamp(28px, 3.8vw, 48px) !important;
}
.ba-section--tv .td_module_wrap {
  background: rgba(20,17,15,0.6) !important;
  border-color: rgba(201,169,97,0.18) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
.ba-section--tv .td_module_wrap:hover {
  border-color: var(--ba-gold) !important;
  box-shadow: 0 12px 40px rgba(201,169,97,0.18) !important;
}
.ba-section--tv .td_module_wrap .td-module-meta-info { background: transparent !important; }
.ba-section--tv .td_module_wrap .td-module-title a { color: var(--ba-paper) !important; }
.ba-section--tv .td_module_wrap .td-post-category { color: var(--ba-gold-light) !important; }
.ba-section--tv .td-module-thumb img { aspect-ratio: 16 / 9; object-fit: cover; }


/* ============================================================================
   10 · MEMBER CTA — "JOIN BLACK ARCSCEND" wax-seal concierge invitation
   Apply .ba-section--member to the "Become a member" block.
   ============================================================================ */
.ba-section--member {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(201,169,97,0.08) 0%, transparent 50%),
    linear-gradient(180deg, var(--ba-ink) 0%, var(--ba-black) 100%);
  color: var(--ba-paper);
  padding: clamp(96px, 12vw, 160px) var(--ba-gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ba-section--member::before { display: none; }
.ba-section--member::after  { display: none; }

.ba-section--member .ba-member-wrap {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.ba-section--member .ba-member-ornament {
  font-family: var(--ba-font-display);
  font-size: 22px;
  color: var(--ba-gold);
  text-shadow: 0 0 18px rgba(228,203,140,0.5);
  margin-bottom: 24px;
}
.ba-section--member h2,
.ba-section--member .td-block-title,
.ba-section--member .tdb-block-title {
  font-family: var(--ba-font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(32px, 5vw, 56px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.02em !important;
  color: var(--ba-gold-light) !important;
  text-align: center !important;
  margin: 0 0 18px !important;
  border: none !important;
}
.ba-section--member p {
  font-family: var(--ba-font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(17px, 1.6vw, 22px) !important;
  line-height: 1.5 !important;
  color: rgba(250,247,241,0.85) !important;
  max-width: 56ch !important;
  margin: 0 auto 32px !important;
}
.ba-section--member a.btn,
.ba-section--member .td-subscribe-btn,
.ba-section--member button[type="submit"],
.ba-section--member input[type="submit"],
.ba-section--member .ba-member-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: transparent !important;
  color: var(--ba-gold) !important;
  border: 1.5px solid var(--ba-gold) !important;
  padding: 16px 32px !important;
  font-family: var(--ba-font-display) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 280ms var(--ba-ease) !important;
}
.ba-section--member a.btn:hover,
.ba-section--member .td-subscribe-btn:hover,
.ba-section--member button[type="submit"]:hover,
.ba-section--member input[type="submit"]:hover,
.ba-section--member .ba-member-cta:hover {
  background: var(--ba-green-2) !important;
  color: var(--ba-gold-light) !important;
  border-color: var(--ba-green-2) !important;
}

.ba-section--member .ba-member-pillars {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 4vw, 56px);
  margin-top: 40px;
  flex-wrap: wrap;
  font-family: var(--ba-font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ba-gold);
}
.ba-section--member .ba-member-pillars span { display: inline-flex; gap: 10px; align-items: baseline; }
.ba-section--member .ba-member-pillars span::before {
  content: attr(data-num);
  color: var(--ba-gold-deep);
  font-weight: 500;
}


/* ============================================================================
   11 · TABBED CLUSTERS — Finance/Marketing/Politics/Travel + Regional tabs
   Newspaper renders these as .td-pulldown-* or .tdb_tab_* — target both.
   ============================================================================ */
body.ba-homepage .td-tab-content-wrap .td-pulldown-filter-list-wrap,
body.ba-homepage .tdb_tab .tdb_tab_titles,
body.ba-homepage .td-tabs-1 .td-tabs-list,
body.ba-homepage .td-tabs-wrap .td-tabs-list {
  border-bottom: 1px solid var(--ba-rule-dark) !important;
  background: transparent !important;
  padding: 0 var(--ba-gutter) !important;
}
body.ba-homepage .td-pulldown-filter-link,
body.ba-homepage .tdb_tab_title,
body.ba-homepage .td-tabs-list a {
  font-family: var(--ba-font-display) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: rgba(20,17,15,0.55) !important;
  padding: 14px 18px !important;
  background: transparent !important;
  border: none !important;
  position: relative;
  transition: color 220ms var(--ba-ease) !important;
}
body.ba-homepage .td-pulldown-filter-link:hover,
body.ba-homepage .tdb_tab_title:hover,
body.ba-homepage .td-tabs-list a:hover { color: var(--ba-ink) !important; }
body.ba-homepage .td-pulldown-filter-link.td-cur-simple-item,
body.ba-homepage .tdb_tab_title.tdb-tab-active,
body.ba-homepage .td-tabs-list .td-current-sub-cat a {
  color: var(--ba-ink) !important;
}
body.ba-homepage .td-pulldown-filter-link.td-cur-simple-item::after,
body.ba-homepage .tdb_tab_title.tdb-tab-active::after,
body.ba-homepage .td-tabs-list .td-current-sub-cat a::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--ba-gold-deep), var(--ba-gold-light), var(--ba-gold-deep));
}


/* ============================================================================
   12 · TOP NAV — secondary ribbon + main menu refinements
   ============================================================================ */
body.ba-homepage .td-header-wrap,
body.ba-homepage .td-header-row,
body.ba-homepage .td-header-menu-wrap {
  background: var(--ba-ink) !important;
  border-bottom: 1px solid var(--ba-rule) !important;
}
body.ba-homepage .td-header-sp-top-menu,
body.ba-homepage .top-header-menu,
body.ba-homepage .header-search-wrap {
  background: var(--ba-black) !important;
}
body.ba-homepage .top-header-menu a,
body.ba-homepage .td-header-sp-top-menu a {
  font-family: var(--ba-font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--ba-gold) !important;
  transition: color 220ms var(--ba-ease);
}
body.ba-homepage .top-header-menu a:hover,
body.ba-homepage .td-header-sp-top-menu a:hover { color: var(--ba-gold-light) !important; }

body.ba-homepage .sf-menu > li > a {
  font-family: var(--ba-font-display) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--ba-gold-light) !important;
}
body.ba-homepage .sf-menu > li > a:hover { color: var(--ba-gold) !important; }


/* ============================================================================
   13 · FOOTER — luxury closing
   ============================================================================ */
body.ba-homepage .td-footer-wrapper,
body.ba-homepage .td-footer-container {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,169,97,0.06) 0%, transparent 50%),
    var(--ba-black) !important;
  color: rgba(250,247,241,0.7);
  padding-top: clamp(64px, 9vw, 120px) !important;
  position: relative;
  border-top: 1px solid var(--ba-rule);
}
body.ba-homepage .td-footer-wrapper a { color: var(--ba-gold) !important; }
body.ba-homepage .td-footer-wrapper a:hover { color: var(--ba-gold-light) !important; }
body.ba-homepage .td-footer-wrapper .td-block-title,
body.ba-homepage .td-footer-wrapper .tdb-block-title,
body.ba-homepage .td-footer-wrapper h3 {
  font-family: var(--ba-font-display) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ba-gold-light) !important;
  border-bottom: 1px solid var(--ba-rule) !important;
  padding-bottom: 12px !important;
  margin-bottom: 18px !important;
}

/* Hide the themeforest/recl-content affiliate placements */
body.ba-homepage img[src*="themeforest"],
body.ba-homepage img[src*="recl-content"],
body.ba-homepage img[alt="spot_img"] {
  display: none !important;
}


/* ============================================================================
   14 · SCROLL REVEAL — JS adds .ba-reveal--in when in viewport
   ============================================================================ */
body.ba-homepage .ba-section,
body.ba-homepage .td_module_wrap,
body.ba-homepage .ba-marquee {
  opacity: 1;
}
body.ba-homepage.ba-js .ba-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 780ms var(--ba-ease-luxe), transform 780ms var(--ba-ease-luxe);
}
body.ba-homepage.ba-js .ba-reveal.ba-reveal--in {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================================
   15 · ACCESSIBILITY — reduce motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .ba-cover__img         { animation: none !important; transform: none !important; }
  .ba-marquee__track     { animation: none !important; transform: none !important; }
  .ba-cover__scroll-line { animation: none !important; }
  body.ba-homepage.ba-js .ba-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ============================================================================
   16 · RESPONSIVE GUARDS
   ============================================================================ */
@media (max-width: 768px) {
  body.ba-homepage .td_module_wrap .td-module-title { font-size: 17px !important; }
  body.ba-homepage .ba-section { padding-top: clamp(48px, 9vw, 72px); }
  .ba-section--member { padding: clamp(64px, 14vw, 100px) var(--ba-gutter); }
}
@media (max-width: 480px) {
  .ba-cover__masthead { font-size: 9px; letter-spacing: 0.22em; }
  .ba-cover__title { font-size: clamp(30px, 9vw, 48px); }
  .ba-marquee__line { font-size: 14px; }
}

/* ============================================================================
   8 · THUMBNAIL FILL FIX  (added v1.2.3)
   ----------------------------------------------------------------------------
   Section 7 above groups .entry-thumb with the <img> selectors and sets
   height:auto. That is correct for a real <img> (intrinsic height), but WRONG
   for tagDiv's flex modules: they render the post thumbnail as a CSS
   background on <span class="entry-thumb td-thumb-css"> — a span has no
   intrinsic height, so height:auto collapses it to 0px. The featured image
   (painted as background-image) then renders into a zero-height box and is
   invisible; all that remains is the module's ::after scrim gradient — which
   is the "grey card." The image itself loads fine (200, not a 404).

   This re-asserts the background span so it fills its (position:relative,
   height-bearing) .td-image-wrap exactly as Newspaper renders it natively.
   Scoped to body.ba-homepage. ADDITIVE + REVERSIBLE: delete this block to
   revert. <img>-based thumbnails are untouched — Section 7 still governs them.
   ============================================================================ */
body.ba-homepage .td_module_wrap .entry-thumb,
body.ba-homepage .td_module_wrap .td-thumb-css,
body.ba-homepage .td_module_wrap span.entry-thumb {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

/* ============================================================================
   15 · HOUSE-AD CREATIVE ALLOWLIST  (added 2026-06-04)
   ----------------------------------------------------------------------------
   Section above ("Hide the themeforest/recl-content affiliate placements")
   hides EVERY tagDiv ad spot via  img[alt="spot_img"]  to suppress leftover
   Newspaper demo ads. Our own ad creatives use the same native ad element, so
   they share alt="spot_img" and were being hidden too.

   This block re-shows ONLY our real Black Arcscend creatives, matched by
   filename. Demo placements (recl-content, rec-sidebar, themeforest, the old
   2021/2022 hex demos, and empty slots) are NOT matched, so they stay hidden.

   Wins the cascade by: higher specificity (extra [src] attr) + later source
   order + !important.  Additive & fully reversible — delete this block to
   restore the prior (all-hidden) behaviour.

   FUTURE ADS: give the creative a filename containing "arcscend" and it is
   auto-allowed. Otherwise add its src substring to the selector list below.
   ============================================================================ */
body.ba-homepage img[alt="spot_img"][src*="arcscend" i],
body.ba-homepage img[alt="spot_img"][src*="ChatGPT-Image-May-23-2026"],
body.ba-homepage img[alt="spot_img"][src*="20240304f64b57af"] {
  display: inline-block !important;
  max-width: 100% !important;
  height: auto !important;
}