/* ============================================================
   DFW Rockstars — gold + black theme, drawn from the show logo.
   Overrides the shared design system's color variables and the
   header for an art-deco gold-on-black look.
   ============================================================ */
:root {
    --brand: #c9a23a;          /* antique gold (logo) */
    --brand-dark: #806008;     /* deep bronze — readable text on light backgrounds */
    --brand-soft: #f7eed3;     /* pale gold */
    --accent: #806008;         /* bronze links/CTAs (contrast-safe on white) */
    --accent-soft: #f7eed3;
    --gold: #806008;
    --gold-soft: #f7eed3;
    --ink: #1a160d;
}

/* Dark header with a gold wordmark, echoing the logo. */
.app-header {
    background: #14110a;
    border-bottom: 1px solid #2c2415;
}
.app-header .brand,
.app-header .brand-text { color: #e7cd73 !important; }
.app-header .brand-text small { color: #b89a4e; }
/* Square logo (DFW + ROCKSTARS wordmark) — a touch taller than the default so the
   inner text stays legible; rounded to soften the distressed black edge on the dark header. */
.app-header .brand-mark { height: 2.9rem; width: auto; border-radius: 6px; }

/* Auth buttons + user name legible on the dark header (ghost buttons inherit dark text). */
.app-header .btn2.ghost { color: #e7cd73; border-color: #6b5a2e; }
.app-header .btn2.ghost:hover { background: rgba(231, 205, 115, .12); }
.app-header .app-user-name { color: #cbb56a; font-weight: 600; }
.app-header .app-nav a { color: #cbb56a; }
.app-header .app-nav a:hover { color: #e7cd73; background: rgba(231, 205, 115, .12); }
.app-header .app-nav a.active { color: #e7cd73; background: rgba(231, 205, 115, .18); }

/* Home hero */
.hero { padding: 1.6rem 0 1.3rem; border-bottom: 1px solid var(--line); margin-bottom: 1.4rem; }
.hero h1 { font-size: 2.1rem; letter-spacing: -.3px; }
.hero p { color: var(--ink-soft); font-size: 1.05rem; max-width: 60ch; margin: 0; }

/* Episode list */
.episode-list { display: grid; gap: 1rem; }
.episode-card h2 { font-size: 1.12rem; margin-bottom: .3rem; }
.episode-card h2 a { color: var(--ink); }
.episode-card h2 a:hover { color: var(--brand-dark); }

/* Episode detail */
.episode-detail { max-width: 760px; }
.episode-detail .audio-frame { width: 100%; margin: 1rem 0 1.3rem; border: 0; border-radius: 10px; background: #0f1720; }
.episode-body { color: var(--ink-soft); line-height: 1.6; }
.episode-body a { color: var(--brand-dark); }