/* =========================================================
   VALIDATED MAGAZINE — SITE-WIDE REDESIGN (2026-11-10)
   Loaded by every page, after style.css. Approved as the
   homepage mock, then rolled out site-wide the same day.
   Direction: black + red base stays; CHAMPAGNE GOLD accents;
   magazine prestige. No layout/content changes — look only.
   ========================================================= */

:root {
  --gold:        #C6A15B;  /* champagne gold — primary accent */
  --gold-light:  #EBD9A7;  /* pale champagne — highlights, badge text bg */
  --gold-pale:   #F4EAD0;  /* lightest champagne — gradient crest */
  --gold-deep:   #8C6D2F;  /* deep gold — gradient base, rules */
  --gold-dim:    rgba(198,161,91,0.38);  /* gold hairline borders */
  --gold-faint:  rgba(198,161,91,0.14);  /* gold glow / wash */
  --gold-grad:   linear-gradient(105deg, #8C6D2F 0%, #C6A15B 32%, #F4EAD0 50%, #C6A15B 68%, #8C6D2F 100%);
  --rule-grad:   linear-gradient(90deg, var(--red) 0%, #7A4A22 55%, var(--gold) 100%);
}

::selection { background: var(--gold); color: #000; }
:focus-visible { outline: 2px solid rgba(198,161,91,0.75); outline-offset: 2px; }

/* -------------------- NAVBAR -------------------- */
.navbar {
  border-bottom: 2px solid var(--gold-deep);
  border-image: var(--rule-grad) 1;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}
.nav-links a { transition: color 0.2s ease; }
.nav-links a:hover { color: var(--gold-light); }
.nav-links a.active { color: var(--red-light); }
.nav-links a.active::after { background: var(--gold-grad); height: 2px; }
.mobile-drawer a.active { color: var(--gold-light); }
.hamburger span { background: var(--gold-light); }

/* -------------------- SOCIAL BAR -------------------- */
.social-bar { background: #0D0B07; border-bottom: 1px solid rgba(198,161,91,0.22); }
.social-bar-label { color: var(--gold); }
.social-bar a:hover { color: var(--gold-light); }

/* -------------------- BUTTONS -------------------- */
/* Primary stays red (brand) — gains a gold edge + warm lift on hover. */
.btn-primary:hover {
  background: var(--red-dark);
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(227,27,35,0.35), 0 0 0 1px rgba(198,161,91,0.35);
}
/* Ghost buttons become the gold voice of the redesign. */
.btn-ghost {
  border-color: var(--gold);
  color: var(--gold-light);
}
.btn-ghost:hover {
  background: var(--gold-grad);
  border-color: var(--gold);
  color: #0A0800;
  box-shadow: 0 8px 22px rgba(198,161,91,0.28);
}

/* -------------------- HERO -------------------- */
.hero {
  background:
    radial-gradient(ellipse 62% 46% at 50% 34%, rgba(198,161,91,0.16), rgba(198,161,91,0) 70%),
    radial-gradient(ellipse 90% 60% at 50% 115%, rgba(227,27,35,0.07), rgba(0,0,0,0) 60%),
    var(--black);
  padding-top: 6.5rem;
}
.hero-title { letter-spacing: 1px; }
.hero-title .white { text-shadow: 0 3px 34px rgba(0,0,0,0.8); }
.hero-title .red {
  text-shadow: 0 3px 30px rgba(227,27,35,0.35);
}
/* Gold flourish rule under the wordmark */
.hero-title::after {
  content: '';
  display: block;
  width: min(230px, 52%);
  height: 3px;
  margin: 1.6rem auto 0;
  background: var(--gold-grad);
  border-radius: 2px;
  box-shadow: 0 2px 14px rgba(198,161,91,0.35);
}
/* Tagline becomes an italic serif in champagne — magazine masthead feel */
.hero-tagline {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  letter-spacing: 0.4px;
  color: var(--gold-light);
  margin-top: 1.4rem;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-tagline {
    background: linear-gradient(100deg, #A8834A 0%, #EBD9A7 45%, #F7EFCE 55%, #C6A15B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* -------------------- CREDIBILITY TICKER -------------------- */
.ticker-strip { background: #0A0906; border-top: 1px solid var(--gold-faint); border-bottom: 1px solid var(--gold-faint); }
.ticker-track span::after { color: var(--gold); }

/* -------------------- PLEDGE MARQUEE — the gold badge strip -------------------- */
.pledge-strip {
  background: linear-gradient(180deg, #0C0A05 0%, #000000 100%);
  border-bottom: 2px solid var(--gold-deep);
  border-image: var(--rule-grad) 1;
  padding: 1rem 0;
}
.pledge-track span::after { color: var(--gold); }
.pledge-track span.pledge-lead {
  letter-spacing: 2.5px;
  font-size: 1.02rem;
  color: var(--gold-light);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pledge-track span.pledge-lead {
    background: linear-gradient(100deg, #A8834A 0%, #EBD9A7 40%, #F7EFCE 52%, #C6A15B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* -------------------- SECTION HEADINGS -------------------- */
.section-heading {
  letter-spacing: 3px;
  padding-bottom: 0.7rem;
  border-bottom: 3px solid var(--gold-deep);
  border-image: linear-gradient(90deg, var(--red) 0%, #7A4A22 58%, var(--gold) 100%) 1;
}
/* Small rotated gold diamond before each heading */
.section-heading::before {
  content: '';
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  margin-right: 0.5em;
  vertical-align: middle;
  transform: rotate(45deg) translateY(-0.05em);
  background: linear-gradient(135deg, var(--gold-pale), var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 0 10px rgba(198,161,91,0.45);
}

/* -------------------- LATEST ISSUE SPOTLIGHT -------------------- */
.latest-issue-frame {
  border: 1px solid var(--gold-dim);
  box-shadow: 0 22px 55px rgba(0,0,0,0.65), 0 0 36px rgba(198,161,91,0.13);
}
.latest-issue-badge {
  background: var(--gold-grad);
  color: #0A0800;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55);
}
.latest-issue-caption .cap-num { color: var(--gold-light); letter-spacing: 1.5px; }
.latest-issue-dots span.is-active { background: var(--gold); box-shadow: 0 0 8px rgba(198,161,91,0.7); }

/* -------------------- ISSUE CARDS -------------------- */
.issue-card:hover {
  border-color: var(--gold-dim);
  box-shadow: 0 16px 36px rgba(0,0,0,0.55), 0 0 22px rgba(198,161,91,0.20);
}
.issue-card.special-edition { border-color: var(--gold-dim); }
.issue-card.special-edition .issue-caption { color: var(--gold-light); }
.issue-caption { transition: color 0.2s ease; }
.issue-card:hover .issue-caption { color: var(--gold-light); }

/* -------------------- VALIDATED RADIO -------------------- */
.radio-player-real {
  background: linear-gradient(180deg, #131007 0%, #0A0A0A 70%);
  border: 1px solid var(--gold-dim);
  box-shadow: 0 18px 44px rgba(0,0,0,0.5), inset 0 1px 0 rgba(235,217,167,0.10);
}
.radio-player-real .radio-head-info .radio-label { color: var(--gold-light); letter-spacing: 1.5px; }
.radio-track:hover { border-color: var(--gold-dim); }
.radio-track-btn { box-shadow: 0 0 0 1px rgba(198,161,91,0.55), 0 4px 12px rgba(0,0,0,0.5); }
.radio-track-btn:hover { background: var(--red-dark); box-shadow: 0 0 0 2px var(--gold), 0 4px 14px rgba(0,0,0,0.55); }
.radio-track-progress-fill { background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light)); }

/* -------------------- VIDEO EMBEDS -------------------- */
.interview-embed .yt-frame-wrap {
  border: 1px solid var(--gold-dim);
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
}
.interview-embed .yt-caption { color: #D9C58F; letter-spacing: 1px; }
.tenttv-link-row a { color: var(--gold-light); }
.tenttv-link-row a:hover { color: var(--gold-pale); }

/* -------------------- CARRYING THE CULTURE -------------------- */
.carrying-culture-img {
  border: 1px solid var(--gold-dim);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
}

/* -------------------- PROMO CARDS -------------------- */
.promo-card i { color: var(--gold); }
.promo-card:hover {
  border-color: var(--gold-dim);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5), 0 0 20px rgba(198,161,91,0.12);
}
.promo-card:hover .promo-title { color: var(--gold-light); }
.promo-card .promo-title { transition: color 0.2s ease; }

/* -------------------- EMAIL CAPTURE -------------------- */
.capture-section {
  background: linear-gradient(180deg, #171410 0%, #1A1A1A 100%);
  border-top: 2px solid var(--gold-deep);
  border-image: linear-gradient(90deg, var(--gold) 0%, #7A4A22 45%, var(--red) 100%) 1;
}
.capture-form input:focus { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(198,161,91,0.4); }
.form-msg.success { color: var(--gold-light); }

/* -------------------- FOOTER -------------------- */
.site-footer { border-top: 1px solid rgba(198,161,91,0.35); }
.footer-nav a:hover { color: var(--gold-light); }
.footer-social a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(198,161,91,0.16); }
.footer-bottom a:hover { color: var(--gold-light); }

/* -------------------- PAGE HERO (inner pages) -------------------- */
/* Same gold system as the homepage hero: warm glow up top, and a
   red-to-gold rule along the bottom — painted, not bordered, so
   the hero's box (and every page's layout) stays byte-identical. */
.page-hero {
  background-image:
    radial-gradient(ellipse 62% 90% at 50% 0%, rgba(198,161,91,0.13), rgba(198,161,91,0) 70%),
    linear-gradient(90deg, var(--red) 0%, #7A4A22 55%, var(--gold) 100%);
  background-size: 100% 100%, 100% 2px;
  background-position: center top, center bottom;
  background-repeat: no-repeat;
}
.page-hero h1 { text-shadow: 0 3px 30px rgba(198,161,91,0.20); }

/* -------------------- ARTICLE HERO -------------------- */
.article-hero {
  background-image: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(198,161,91,0.10), rgba(198,161,91,0) 70%);
  background-repeat: no-repeat;
}

/* -------------------- SUB-COLUMN STRIP (New Music / Album Reviews) -------------------- */
/* The build's own .subsection-tabs (on music.html) and the matching
   .subnav-strip added to album-reviews.html share one gold treatment. */
.subsection-tab {
  color: var(--gold-light);
  border-color: var(--gold-dim);
}
.subsection-tab:hover { border-color: var(--gold); color: var(--gold-pale); }
.subsection-tab.active {
  background: var(--gold-grad);
  border-color: var(--gold);
  color: #0A0800;
}
.subnav-strip {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.5rem 0.2rem;
}
.subnav-strip a {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--gold-light);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  padding: 0.45rem 1.2rem;
  text-decoration: none;
  transition: all 0.2s ease;
}
.subnav-strip a:hover { border-color: var(--gold); color: var(--gold-pale); }
.subnav-strip a.active {
  background: var(--gold-grad);
  border-color: var(--gold);
  color: #0A0800;
}

/* -------------------- PROMO CARD LOGO (Validated Photos) -------------------- */
.promo-card .promo-logo { height: 44px; width: auto; display: block; }

/* -------------------- PHONE TUNING (base breakpoints: 640 / 720 / 1140) -------------------- */
@media (max-width: 640px) {
  .hero { padding-top: 4.5rem; }
  .hero-title { letter-spacing: 0; }
  .hero-title::after { width: 46%; margin-top: 1.2rem; }
  .hero-tagline { font-size: 1.22rem; letter-spacing: 0.2px; }
  .pledge-track span.pledge-lead { letter-spacing: 1px; font-size: 0.95rem; }
  .section-heading { letter-spacing: 2px; }
  .radio-player-real { box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
}