/* ==========================================================================
   Brand themes — three distinct identities applied via body class
   ========================================================================== */

/* ---------- POP CITY ----------
   Warm NOLA Mardi Gras festival — purple, gold, cream. Feminine,
   celebratory, handcrafted. Primary voice of the business. */
body.brand-popcity {
  --brand-accent: #5F2C82;       /* Mardi Gras purple */
  --brand-accent-2: #F5B301;     /* Gold */
  --brand-accent-3: #E91E63;     /* Hot pink */
  --brand-bg: #FFF7E8;           /* Warm cream */
  --brand-ink: #2A1240;
  --brand-font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --brand-font-body: "Inter", system-ui, sans-serif;
  background: var(--brand-bg);
  color: var(--brand-ink);
}
body.brand-popcity .eyebrow { color: var(--brand-accent); }
body.brand-popcity .hero {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(245,179,1,.3), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(233,30,99,.18), transparent 55%),
    var(--brand-bg);
  padding: clamp(3rem, 8vw, 7rem) 0 clamp(2rem, 5vw, 4rem);
}
body.brand-popcity .hero h1 em {
  font-style: italic;
  background: linear-gradient(100deg, var(--brand-accent) 0%, var(--brand-accent-3) 60%, var(--brand-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.brand-popcity .btn { background: var(--brand-accent); border-color: var(--brand-accent); }
body.brand-popcity .btn--ghost { background: transparent; color: var(--brand-accent); }
body.brand-popcity .arrow-mark {
  display: inline-block; color: var(--brand-accent-2); font-size: 1.1em;
  margin: 0 .15em; transform: translateY(-.05em);
}

/* ---------- FUNROCK'N ----------
   Loud, bright, retro-arcade / punk-rock novelty. Black background,
   neon accents, oversized display type, halftone energy. */
body.brand-funrockn {
  --brand-accent: #FF006E;       /* Hot magenta */
  --brand-accent-2: #C6FF00;     /* Electric lime */
  --brand-accent-3: #FF7A00;     /* Tangerine */
  --brand-bg: #0A0A0A;
  --brand-ink: #ffffff;
  --brand-font-display: "Bungee", "Archivo Black", Impact, sans-serif;
  --brand-font-body: "Space Grotesk", "Inter", system-ui, sans-serif;
  background: var(--brand-bg);
  color: var(--brand-ink);
}
body.brand-funrockn .site-nav {
  background: rgba(10,10,10,.9); border-bottom-color: rgba(255,255,255,.08);
}
body.brand-funrockn .site-nav,
body.brand-funrockn .site-nav a,
body.brand-funrockn .site-nav__cta {
  color: #fff;
}
body.brand-funrockn .site-nav__cta { border-color: #fff; }
body.brand-funrockn .site-nav__cta:hover { background: #fff; color: #000; }

body.brand-funrockn .eyebrow { color: var(--brand-accent-2); }
body.brand-funrockn .lede { color: #cfcfcf; }
body.brand-funrockn .hero {
  background:
    radial-gradient(circle at 80% 20%, rgba(255,0,110,.35), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(198,255,0,.2), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 9px),
    var(--brand-bg);
  padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
  position: relative; overflow: hidden;
}
body.brand-funrockn h1 {
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.01em;
}
body.brand-funrockn h1 em {
  font-style: normal;
  color: var(--brand-accent-2);
  -webkit-text-stroke: 1px var(--brand-accent-2);
  color: transparent;
}
body.brand-funrockn h2, body.brand-funrockn h3 { text-transform: uppercase; }

body.brand-funrockn .btn {
  background: var(--brand-accent-2); color: #000; border-color: var(--brand-accent-2);
  border-radius: 0; text-transform: uppercase; font-weight: 700;
  box-shadow: 6px 6px 0 var(--brand-accent);
}
body.brand-funrockn .btn:hover { box-shadow: 3px 3px 0 var(--brand-accent); transform: translate(3px, 3px); }
body.brand-funrockn .btn--ghost { background: transparent; color: var(--brand-accent-2); box-shadow: none; border-color: var(--brand-accent-2); }
body.brand-funrockn .btn--ghost:hover { background: var(--brand-accent-2); color: #000; }

body.brand-funrockn .card {
  background: #151515; border: 1px solid rgba(255,255,255,.08);
  color: #fff;
}
body.brand-funrockn .card:hover { border-color: var(--brand-accent); }
body.brand-funrockn .card__media::after {
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.85));
}

/* ---------- THE CRESCENT COLLECTION ----------
   Quiet luxury. Deep navy, champagne gold, ivory. Serif
   typography, generous whitespace, restrained motion. */
body.brand-crescent {
  --brand-accent: #C7A961;       /* Champagne gold */
  --brand-accent-2: #0D1B2A;     /* Midnight navy */
  --brand-bg: #0D1B2A;
  --brand-ink: #F4EFE6;
  --brand-font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --brand-font-body: "Work Sans", system-ui, sans-serif;
  background: var(--brand-bg);
  color: var(--brand-ink);
}
body.brand-crescent .site-nav { background: rgba(13,27,42,.9); border-bottom-color: rgba(199,169,97,.18); }
body.brand-crescent .site-nav,
body.brand-crescent .site-nav a,
body.brand-crescent .site-nav__cta { color: var(--brand-ink); }
body.brand-crescent .site-nav__cta { border-color: var(--brand-accent); color: var(--brand-accent); }
body.brand-crescent .site-nav__cta:hover { background: var(--brand-accent); color: var(--brand-bg); }

body.brand-crescent .eyebrow { color: var(--brand-accent); letter-spacing: .32em; font-weight: 500; }
body.brand-crescent .lede { color: rgba(244,239,230,.72); }

body.brand-crescent .hero {
  background:
    radial-gradient(ellipse at 80% 30%, rgba(199,169,97,.18), transparent 60%),
    linear-gradient(180deg, #0D1B2A 0%, #101F33 100%);
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(3rem, 6vw, 5rem);
  position: relative;
}
body.brand-crescent h1 {
  font-weight: 400; font-style: italic; letter-spacing: -.015em;
  line-height: 1.05;
}
body.brand-crescent h1 em {
  color: var(--brand-accent);
  font-style: italic;
}
body.brand-crescent h2 { font-weight: 400; }

body.brand-crescent .btn {
  background: transparent; color: var(--brand-accent);
  border: 1px solid var(--brand-accent);
  letter-spacing: .18em; font-size: .8rem;
}
body.brand-crescent .btn:hover { background: var(--brand-accent); color: var(--brand-bg); }

body.brand-crescent .card { background: rgba(255,255,255,.03); border: 1px solid rgba(199,169,97,.18); }
body.brand-crescent .card__media { aspect-ratio: 1/1.1; }
body.brand-crescent .card__title { color: var(--brand-ink); font-weight: 400; }

/* Crescent moon flourish */
.crescent-flourish {
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 65% 50%, var(--brand-bg) 50%, var(--brand-accent) 51%);
  box-shadow: inset 0 0 0 1px var(--brand-accent);
  display: inline-block;
}