/* =============================================================
   BRAVO THEATER — CONSOLIDATED SITE STYLESHEET  ·  styles.css
   =============================================================
   This file REPLACES the old styles.css (already referenced by the
   template) and absorbs five more files (in this cascade order):
     1. styles.css        — global design tokens + base (playbill system)
     2. landing.css       — dance landing-page sections
     3. homepage.css      — front-page modules (hero, events, MailChimp, FB)
     4. bravo-dance.css   — .bravo-dance-scoped dance design system
     5. bravo-about.css   — Joomla article ("playbill panel") restyle
     6. bravo-reviews.css — JComments restyle
   Deploy: overwrite /templates/rt_remnant/custom/css/styles.css with
   this file, then DELETE landing.css, homepage.css, bravo-dance.css,
   bravo-about.css and bravo-reviews.css from that folder so rules
   aren't applied twice.

   FIX (2026-06-04): the article restyle (section 5) is now scoped
   body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero))
   so it skips any article built with the dance design system
   (e.g. /en/classes/dance) instead of hijacking it. Previously it
   applied to EVERY com_content article, which broke the dance page.

   No Google Fonts @import anywhere in this file (JSpeed mangles
   css2 URLs); fonts are loaded site-wide by the template assets.
   ============================================================= */

/* ███████████████████████████████████████████████████████████
   ███  SECTION: 1/6 · GLOBAL DESIGN SYSTEM (tokens, base type, buttons, nav, footer)
   ███  (was: styles.css)
   ███████████████████████████████████████████████████████████ */

/* =========================================================
   Bravo Dance — Stage-Ready Dance design system
   Evolution of the Bravo Theater DNA: deep navy + warm gold
   refined into a "playbill" aesthetic with refined type & spacing.
   ========================================================= */
:root {
  /* Palette */
  --navy-900: #0a1a3a;        /* curtain shadow */
  --navy-800: #0f2451;        /* deep stage */
  --navy-700: #163067;        /* primary surface */
  --navy-600: #1f3f80;        /* hover / borders */
  --navy-500: #2a5099;
  --cream-50:  #fbf6ea;       /* playbill paper */
  --cream-100: #f6efe1;
  --cream-200: #ecdfc2;
  --cream-300: #e0cea3;
  --gold-700: #b6873a;
  --gold-600: #d3a04a;
  --gold-500: #e6b760;        /* primary accent */
  --gold-400: #f0c873;
  --gold-300: #f7dca0;
  --velvet-900: #4a121a;
  --velvet-800: #6b1d27;      /* curtain red */
  --velvet-700: #8a2a35;
  --ink-900: #0a0c14;
  --ink-700: #1d2030;
  --ink-500: #4a4f63;
  --ink-300: #8d92a6;
  /* Semantic */
  --bg: var(--navy-700);
  --bg-deep: var(--navy-900);
  --bg-paper: var(--cream-50);
  --fg: var(--cream-50);
  --fg-paper: var(--ink-900);
  --accent: var(--gold-500);
  --accent-soft: var(--gold-300);
  --rule: rgba(246, 239, 225, 0.18);
  --rule-paper: rgba(10, 12, 20, 0.14);
  /* Type */
  --font-display: "Bodoni Moda", "Playfair Display", "Didot", Georgia, serif;
  --font-body: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  /* Density (overridden by Tweaks) */
  --density: 1;
  --pad-section: calc(120px * var(--density));
  --pad-section-sm: calc(72px * var(--density));
  --gap-large: calc(48px * var(--density));
  --gap-base: calc(24px * var(--density));
  /* Layout */
  --max: 1280px;
  --max-wide: 1440px;
  --max-narrow: 880px;
  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Display type — high-contrast serif, playbill feel */
.h-display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.04;
  text-wrap: balance;
}
h1 { font-size: clamp(44px, 6.4vw, 92px); margin: 0; }
h2 { font-size: clamp(34px, 4.2vw, 60px); margin: 0; }
h3 { font-size: clamp(22px, 2.2vw, 30px); margin: 0; }
.italic-script { font-style: italic; font-weight: 400; }
/* Eyebrow / monospace tag */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.eyebrow.on-paper { color: var(--velvet-800); }
/* Layout helpers */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}
.container-wide { max-width: var(--max-wide); }
.container-narrow { max-width: var(--max-narrow); }
.section {
  padding: var(--pad-section) 0;
}
.section-sm { padding: var(--pad-section-sm) 0; }
.section-paper {
  background: var(--bg-paper);
  color: var(--fg-paper);
}
.section-deep {
  background: var(--bg-deep);
}
.divider {
  height: 1px;
  background: var(--rule);
  width: 100%;
}
.divider-paper { background: var(--rule-paper); }
/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 16px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--gold-500);
  color: var(--navy-900);
  border-color: var(--gold-500);
}
.btn-primary:hover { background: var(--gold-400); border-color: var(--gold-400); }
.btn-ghost {
  background: transparent;
  color: var(--cream-50);
  border-color: rgba(246, 239, 225, 0.35);
}
.btn-ghost:hover { border-color: var(--cream-50); background: rgba(246, 239, 225, 0.06); }
.btn-ghost-dark {
  background: transparent;
  color: var(--navy-900);
  border-color: rgba(10, 26, 58, 0.3);
}
.btn-ghost-dark:hover { border-color: var(--navy-900); background: rgba(10, 26, 58, 0.04); }
.btn-arrow::after {
  content: "→";
  display: inline-block;
  transition: transform .15s ease;
}
.btn-arrow:hover::after { transform: translateX(4px); }
/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  background: rgba(15, 36, 81, 0.85);
  border-bottom: 1px solid rgba(246, 239, 225, 0.08);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: var(--max-wide);
  margin: 0 auto;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-500), var(--gold-700));
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--navy-900);
  font-size: 22px;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
}
.nav-name {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.01em;
}
.nav-name small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold-400);
  margin-top: 2px;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(246, 239, 225, 0.78);
  transition: color .15s ease;
}
.nav-links a:hover { color: var(--cream-50); }
.nav-cta {
  padding: 10px 18px;
  font-size: 13px;
}
/* Language toggle — sits between nav links and CTA */
.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 12px;
  border: 1px solid rgba(246, 239, 225, 0.18);
  border-radius: var(--radius-pill);
  color: rgba(246, 239, 225, 0.85);
  transition: all .15s ease;
}
.nav-lang:hover { border-color: var(--gold-400); color: var(--cream-50); }
.nav-lang .is-active { color: var(--gold-400); }
.nav-lang .sep { opacity: 0.4; }
@media (max-width: 880px) {
  .nav-links a:not(.nav-cta) { display: none; }
}
/* =========================================================
   Placeholder image blocks
   - .ph shows a styled gradient + diagonal stripe pattern
   - .ph-label shows a "CAMP · SESSION PHOTO" watermark
   - When a real <img> is present inside .ph, the label hides
     and the image covers everything via z-index
   - On img error: use onerror to remove the img so the
     placeholder shows through again
   ========================================================= */
.ph {
  position: relative;
  background: var(--navy-800);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      rgba(246, 239, 225, 0.04) 14px 15px
    );
  z-index: 0;
}
.ph-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 239, 225, 0.55);
  text-align: center;
  padding: 8px 14px;
  border: 1px dashed rgba(246, 239, 225, 0.25);
  border-radius: 6px;
  background: rgba(10, 26, 58, 0.5);
  pointer-events: none;
}
/* Hide label when .ph contains a real image */
.ph:has(img) .ph-label {
  display: none;
}
/* Real photo overlay — covers placeholder gradient + label.
   On error: onerror="this.remove()" lets placeholder show through. */
.ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
  display: block;
  border-radius: inherit;
}
/* Tone variants */
.ph.tone-velvet { background: linear-gradient(160deg, var(--velvet-800), var(--velvet-900)); }
.ph.tone-gold   { background: linear-gradient(160deg, var(--gold-600), var(--gold-700)); }
.ph.tone-gold .ph-label { color: rgba(10,26,58,.7); border-color: rgba(10,26,58,.35); background: rgba(255,255,255,.15); }
.ph.tone-navy   { background: linear-gradient(160deg, var(--navy-700), var(--navy-900)); }
.ph.tone-cream  { background: linear-gradient(160deg, var(--cream-100), var(--cream-300)); }
.ph.tone-cream .ph-label { color: rgba(10,26,58,.55); border-color: rgba(10,26,58,.25); background: rgba(255,255,255,.4); }
.ph.tone-deep   { background: linear-gradient(160deg, #0c1b3a, #04081a); }
/* Decorative star */
.star {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  color: var(--gold-500);
}
/* Card */
.card {
  background: rgba(246, 239, 225, 0.04);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: calc(28px * var(--density));
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.card:hover { border-color: rgba(230, 183, 96, 0.45); background: rgba(246, 239, 225, 0.06); }
.card-paper {
  background: rgba(10, 26, 58, 0.04);
  border: 1px solid var(--rule-paper);
  color: var(--fg-paper);
}
.card-paper:hover { border-color: var(--velvet-800); background: rgba(10, 26, 58, 0.06); }
/* Section header */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: var(--gap-large);
  flex-wrap: wrap;
}
.section-head .lead {
  max-width: 480px;
  color: rgba(246, 239, 225, 0.7);
  font-size: 17px;
}
.section-paper .section-head .lead { color: var(--ink-500); }
/* Footer */
.footer {
  background: var(--navy-900);
  color: rgba(246,239,225,.7);
  padding: 80px 0 32px;
  border-top: 1px solid var(--rule);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer h4 {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold-400);
  margin: 0 0 16px;
  font-weight: 600;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a { font-size: 14px; color: rgba(246,239,225,.7); }
.footer a:hover { color: var(--cream-50); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--rule); margin-top: 56px; padding-top: 24px;
  font-size: 12px; color: rgba(246,239,225,.5);
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; }
}
/* Utility */
.text-muted { color: rgba(246, 239, 225, 0.66); }
.text-muted-paper { color: var(--ink-500); }
.uppercase-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lead-body {
  font-size: 19px;
  line-height: 1.55;
  color: rgba(246, 239, 225, 0.78);
}
.section-paper .lead-body { color: var(--ink-700); }
.serif-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.25;
  text-wrap: balance;
}
/* Decorative ticker / marquee */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
  background: var(--navy-800);
}
.marquee-track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: scroll-marquee 38s linear infinite;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--gold-400);
}
.marquee-track span::after {
  content: "✦";
  margin-left: 56px;
  color: var(--velvet-700);
  font-style: normal;
}
@keyframes scroll-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Focus */
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ███████████████████████████████████████████████████████████
   ███  SECTION: 2/6 · DANCE LANDING SECTIONS (hero, why, catalog, programs, leadership, FAQ, CTA)
   ███  (was: landing.css)
   ███████████████████████████████████████████████████████████ */

/* =========================================================
   Bravo Dance — Landing page specific styles
   ========================================================= */

/* HERO ===================================================== */
.hero {
  position: relative;
  padding: 64px 0 96px;
  overflow: hidden;
}
.hero::before {
  /* subtle paper grain on navy */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 1200px 400px at 80% -10%, rgba(230,183,96,0.12), transparent 60%),
    radial-gradient(ellipse 800px 400px at 0% 110%, rgba(138,42,53,0.18), transparent 60%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
}
.hero-left {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.hero-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--gold-500);
}
.hero h1 {
  font-size: clamp(48px, 6.8vw, 96px);
  letter-spacing: -0.015em;
  line-height: 1.02;
}
.hero h1 em {
  font-style: italic;
  color: var(--gold-400);
  font-weight: 400;
}
.hero-sub {
  font-size: 20px;
  line-height: 1.5;
  color: rgba(246, 239, 225, 0.78);
  max-width: 520px;
}
.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-meta {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  margin-top: 8px;
}
.hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-meta-item .num {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  color: var(--gold-400);
}
.hero-meta-item .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 239, 225, 0.55);
}

/* hero collage */
.hero-collage {
  position: relative;
  height: 620px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: 1.1fr 0.9fr;
  gap: 14px;
}
.hero-collage .ph { width: 100%; height: 100%; min-height: 0; }
.hc-a { grid-row: 1 / span 2; }
.hc-b { }
.hc-c { }
.hero-tag {
  position: absolute;
  background: var(--cream-50);
  color: var(--navy-900);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 3;
}
.hero-tag-1 { top: -14px; left: 28px; background: var(--gold-500); }
.hero-tag-2 { bottom: 26px; right: -14px; }
.hero-tag-3 {
  bottom: 30%;
  left: -22px;
  background: var(--velvet-800);
  color: var(--cream-50);
}

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-collage { height: 480px; }
}

/* MARQUEE ribbon =========================================== */

/* WHY BRAVO ================================================ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.why-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: calc(32px * var(--density)) calc(28px * var(--density));
  background: rgba(246, 239, 225, 0.04);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  min-height: 280px;
}
.why-card .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 56px;
  color: var(--gold-500);
  line-height: 1;
  letter-spacing: -0.03em;
}
.why-card h3 {
  font-size: 22px;
  line-height: 1.15;
}
.why-card p {
  color: rgba(246, 239, 225, 0.7);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 980px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* CATALOG ================================================== */
.catalog { display: flex; flex-direction: column; gap: var(--gap-large); }

.filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  padding: 22px 26px;
  background: rgba(246, 239, 225, 0.04);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.filter-group { display: flex; flex-direction: column; gap: 10px; flex: 1 1 360px; }
.filter-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246, 239, 225, 0.55);
}
.filter-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-pill {
  background: transparent;
  border: 1px solid rgba(246, 239, 225, 0.18);
  color: rgba(246, 239, 225, 0.85);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
}
.filter-pill:hover { border-color: var(--gold-400); color: var(--cream-50); }
.filter-pill.is-active {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
}
.filter-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding-left: 24px;
  border-left: 1px solid var(--rule);
}
.filter-count .count-num {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--gold-400);
}
.filter-count .count-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246, 239, 225, 0.55);
}

.catalog-tracks { display: flex; flex-direction: column; gap: var(--gap-large); }
.catalog-track-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.catalog-track-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 239, 225, 0.55);
}
.catalog-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.catalog-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 24px;
  padding: 18px 22px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: rgba(246, 239, 225, 0.02);
  transition: all .15s ease;
}
.catalog-item:hover {
  border-color: var(--gold-400);
  background: rgba(246, 239, 225, 0.06);
}
.catalog-item-name {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: -0.005em;
  grid-column: 1;
}
.catalog-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(246, 239, 225, 0.6);
  grid-column: 1;
}
.catalog-item-meta .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(246, 239, 225, 0.35);
}
.catalog-item-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--gold-400);
  font-size: 18px;
  transition: transform .15s ease;
}
.catalog-item:hover .catalog-item-arrow { transform: translateX(4px); }

.catalog-empty {
  padding: 40px;
  text-align: center;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

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

/* FEATURED PROGRAMS ======================================== */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.program-card {
  display: flex;
  flex-direction: column;
  background: var(--cream-50);
  color: var(--navy-900);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.program-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.4);
}
.program-card .ph { aspect-ratio: 4 / 3; border-radius: 0; }
.program-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.program-card .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--velvet-800);
}
.program-card h3 {
  font-size: 26px;
  line-height: 1.08;
}
.program-card p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-500);
  margin: 0;
  flex: 1;
}
.program-card .meta {
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-700);
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--rule-paper);
  margin-top: 6px;
}

@media (max-width: 1080px) { .programs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .programs-grid { grid-template-columns: 1fr; } }

/* TEACHER HIGHLIGHT ======================================== */
.teacher {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  align-items: center;
}

/* LEADERSHIP — 2-up grid for Marina + Yaryna ============= */
.leadership-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.leader-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-decoration: none;
  color: inherit;
}
.leader-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: block;
}
.leader-photo .ph { width: 100%; height: 100%; border-radius: var(--radius-lg); }
.leader-photo .badge {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--velvet-800);
  color: var(--cream-50);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 10;
}
.leader-photo .badge.is-director { background: var(--gold-500); color: var(--navy-900); }
.leader-body { display: flex; flex-direction: column; gap: 12px; }
.leader-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.leader-card h3 {
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.04;
}
.leader-card h3 em { font-style: italic; color: var(--gold-400); font-weight: 400; }
.leader-bio {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(246, 239, 225, 0.72);
  margin: 0;
}
.leader-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-400);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  transition: gap .15s ease;
}
.leader-card:hover .leader-cta { gap: 14px; color: var(--cream-50); }
.leader-card:hover .leader-photo .ph { transform: scale(1.02); }
.leader-photo .ph { transition: transform .3s ease; }

@media (max-width: 880px) {
  .leadership-grid { grid-template-columns: 1fr; gap: 48px; }
}
.teacher-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.teacher-photo .ph { width: 100%; height: 100%; border-radius: var(--radius-lg); }
.teacher-photo .badge {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--velvet-800);
  color: var(--cream-50);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.teacher-body { display: flex; flex-direction: column; gap: 28px; }
.teacher-body .quote { font-style: italic; }
.teacher-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.teacher-stat .n {
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--gold-400);
  line-height: 1;
}
.teacher-stat .l {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 239, 225, 0.6);
  margin-top: 8px;
  display: block;
}
.teacher-disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.teacher-disciplines span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: rgba(246, 239, 225, 0.78);
}

@media (max-width: 980px) {
  .teacher { grid-template-columns: 1fr; gap: 40px; }
}

/* BENEFITS ================================================= */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--rule-paper);
  border-radius: var(--radius);
  overflow: hidden;
}
.benefit {
  padding: calc(40px * var(--density)) calc(32px * var(--density));
  border-right: 1px solid var(--rule-paper);
  border-bottom: 1px solid var(--rule-paper);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--cream-50);
}
.benefit:nth-child(3n) { border-right: none; }
.benefit:nth-last-child(-n+3) { border-bottom: none; }
.benefit .star-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--velvet-800);
  font-size: 26px;
}
.benefit h3 {
  font-size: 24px;
  line-height: 1.1;
}
.benefit p {
  color: var(--ink-500);
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 880px) {
  .benefits-grid { grid-template-columns: 1fr 1fr; }
  .benefit { border-right: 1px solid var(--rule-paper) !important; border-bottom: 1px solid var(--rule-paper) !important; }
  .benefit:nth-child(2n) { border-right: none !important; }
  .benefit:nth-last-child(-n+2) { border-bottom: none !important; }
}

/* LOCATION ================================================= */
.location {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.location-map {
  aspect-ratio: 4 / 3;
  background: var(--navy-900);
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.location-map .pin {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 6px rgba(230,183,96,0.18);
  transform: translate(-50%, -50%);
}
.location-map .pin.lg {
  width: 22px; height: 22px;
  box-shadow: 0 0 0 10px rgba(230,183,96,0.18), 0 0 0 20px rgba(230,183,96,0.08);
}
.location-map .pin-label {
  position: absolute;
  transform: translate(-50%, -100%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-50);
  background: rgba(10, 26, 58, 0.7);
  padding: 4px 10px;
  border-radius: 4px;
  margin-top: -16px;
  white-space: nowrap;
}
.location-map .pin-label.is-primary { background: var(--gold-500); color: var(--navy-900); }
.location-map .grid-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(246,239,225,0.05) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(to bottom, rgba(246,239,225,0.05) 1px, transparent 1px) 0 0 / 56px 56px;
}

.location-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.location-areas span {
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: rgba(246, 239, 225, 0.78);
}
.location-areas span.is-primary {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
  font-weight: 600;
}

@media (max-width: 880px) {
  .location { grid-template-columns: 1fr; gap: 40px; }
}

/* FAQ ===================================================== */
.faq { display: flex; flex-direction: column; }
.faq-item {
  border-top: 1px solid var(--rule);
}
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-q {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  background: transparent;
  border: none;
  color: var(--cream-50);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.15;
}
.faq-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gold-400);
  width: 36px;
}
.faq-icon {
  font-family: var(--font-body);
  font-size: 28px;
  width: 36px;
  height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--gold-400);
  transition: all .2s ease;
}
.faq-item.is-open .faq-icon {
  background: var(--gold-500);
  color: var(--navy-900);
  border-color: var(--gold-500);
}
.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}
.faq-item.is-open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a {
  overflow: hidden;
  color: rgba(246, 239, 225, 0.72);
  font-size: 17px;
  line-height: 1.6;
}
.faq-item.is-open .faq-a {
  padding: 0 0 28px 60px;
}

/* CTA BLOCK ================================================ */
.cta-block {
  position: relative;
  padding: calc(80px * var(--density)) 56px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--velvet-800), var(--velvet-900) 60%, var(--navy-900));
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr auto;
  align-items: center;
  gap: 40px;
}
.cta-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 300px at 90% 0%, rgba(230,183,96,0.18), transparent 60%),
    radial-gradient(ellipse 400px 200px at 0% 100%, rgba(246,239,225,0.08), transparent 60%);
  pointer-events: none;
}
.cta-block > * { position: relative; z-index: 1; }
.cta-block h2 {
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: -0.01em;
}
.cta-block h2 em { font-style: italic; color: var(--gold-300); }
.cta-block .cta-sub {
  margin-top: 14px;
  color: rgba(246,239,225,0.78);
  font-size: 18px;
  max-width: 540px;
}
.cta-block .cta-actions {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end;
}

@media (max-width: 880px) {
  .cta-block { grid-template-columns: 1fr; padding: 48px 32px; }
  .cta-block .cta-actions { justify-content: flex-start; }
}

/* SECTION header on paper */
.section-paper .section-head .lead { color: var(--ink-500); }

/* TWO-COL split with image */
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.split.alt { grid-template-columns: 1fr 1.05fr; }
.split .ph { aspect-ratio: 4 / 5; height: 100%; min-height: 460px; }
.split-body { display: flex; flex-direction: column; gap: 22px; }
.split-body p { color: rgba(246, 239, 225, 0.72); font-size: 17px; }

@media (max-width: 880px) {
  .split, .split.alt { grid-template-columns: 1fr; gap: 32px; }
  .split .ph { min-height: 320px; }
}

/* ticker dot */
.ticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.ticker .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(230,183,96,0.2);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(230,183,96,0.4); }
  100% { box-shadow: 0 0 0 8px rgba(230,183,96,0); }
}

/* sticky-ish heading rule */
.section-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}
.section-rule::before, .section-rule::after {
  content: "";
  height: 1px;
  background: var(--rule);
  flex: 0 0 32px;
}
.section-rule::after { flex: 1; }
.section-paper .section-rule { color: var(--velvet-800); }
.section-paper .section-rule::before,
.section-paper .section-rule::after { background: var(--rule-paper); }

/* ███████████████████████████████████████████████████████████
   ███  SECTION: 3/6 · FRONT PAGE MODULES (show hero, quicklinks, events, MailChimp, Facebook)
   ███  (was: homepage.css)
   ███████████████████████████████████████████████████████████ */

/* =========================================================
   Bravo Theater — Front Page modules (Joomla / Gantry 5 friendly)
   Extends styles.css + landing.css with:
   - Production hero (Slide Owl friendly)
   - Event carousel cards
   - MailChimp band
   - Facebook feed tiles
   - Quick-links grid
   ========================================================= */

/* Joomla / Gantry-style page wrap */
.page-wrap { min-height: 100vh; background: var(--bg); }

/* ---- Utility bar (above primary nav) ---- */
.utility-bar {
  background: var(--navy-900);
  border-bottom: 1px solid rgba(246,239,225,0.06);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.65);
}
.utility-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.utility-bar a { color: rgba(246,239,225,0.65); transition: color .15s ease; }
.utility-bar a:hover { color: var(--gold-400); }
.utility-bar .util-left,
.utility-bar .util-right { display: flex; align-items: center; gap: 22px; }
.utility-bar .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(230,183,96,0.18);
}

/* Secondary nav (richer than the dance-page nav) — keep Joomla compat */
.nav-bravo .nav-links { gap: 28px; }
.nav-bravo .nav-links a { font-size: 13px; letter-spacing: 0.04em; }
.nav-bravo .nav-name { font-size: 22px; }
.nav-bravo .nav-name small { letter-spacing: 0.28em; }

/* =========================================================
   OPTION A — PLAYBILL HERO
   Big production photo, marquee-bulb frame, gold ticket CTA
   ========================================================= */
.show-hero {
  position: relative;
  padding: 56px 0 80px;
  overflow: hidden;
}
.show-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(230,183,96,0.14), transparent 60%),
    radial-gradient(ellipse 900px 500px at 50% 110%, rgba(138,42,53,0.22), transparent 60%);
  pointer-events: none;
}
.show-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  align-items: center;
}
.show-meta-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 28px;
}
.show-meta-strip .rule {
  height: 1px; flex: 0 0 32px; background: var(--gold-500);
}
.show-meta-strip .v-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-400);
}
.show-hero h1 {
  font-size: clamp(48px, 6.2vw, 92px);
  line-height: 0.98;
  margin-bottom: 28px;
}
.show-hero h1 em { font-style: italic; color: var(--gold-400); font-weight: 400; }
.show-hero .show-sub {
  font-size: 19px;
  line-height: 1.55;
  color: rgba(246,239,225,0.78);
  max-width: 520px;
  margin-bottom: 36px;
}
.show-facts {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 36px;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.show-facts .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.55);
  margin-bottom: 6px;
}
.show-facts .val {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--cream-50);
}
.show-facts .val em { font-style: italic; color: var(--gold-400); }
.show-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.show-ctas .price-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 14px 22px;
  border: 1px dashed rgba(246,239,225,0.3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.78);
}
.show-ctas .price-chip strong {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--gold-400);
  font-weight: 500;
  letter-spacing: 0;
}

/* Poster frame with marquee bulbs */
.poster-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  padding: 18px;
  background:
    linear-gradient(180deg, #4a2a12 0%, #2a1808 100%);
  box-shadow:
    0 0 0 1px rgba(230,183,96,0.25) inset,
    0 30px 80px -20px rgba(0,0,0,0.6),
    0 60px 120px -40px rgba(138,42,53,0.4);
}
.poster-frame::before,
.poster-frame::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px;
  height: 14px;
  background:
    radial-gradient(circle at 7px 7px, var(--gold-300) 0 4px, rgba(230,183,96,0.35) 4px 5px, transparent 5px);
  background-size: 28px 14px;
  background-repeat: repeat-x;
  pointer-events: none;
}
.poster-frame::before { top: 2px; }
.poster-frame::after  { bottom: 2px; }
.poster-frame .poster-bulb-side {
  position: absolute;
  top: 18px; bottom: 18px;
  width: 14px;
  background:
    radial-gradient(circle at 7px 7px, var(--gold-300) 0 4px, rgba(230,183,96,0.35) 4px 5px, transparent 5px);
  background-size: 14px 28px;
  background-repeat: repeat-y;
  pointer-events: none;
}
.poster-frame .poster-bulb-side.left { left: 2px; }
.poster-frame .poster-bulb-side.right { right: 2px; }
.poster-frame .ph {
  height: 100%;
  border-radius: 4px;
}
.poster-frame .stamp {
  position: absolute;
  top: 36px; right: 36px;
  z-index: 10;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: var(--velvet-800);
  color: var(--cream-50);
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.3;
  box-shadow: 0 0 0 4px rgba(246,239,225,0.95), 0 8px 24px rgba(0,0,0,0.4);
  transform: rotate(-8deg);
}
.poster-frame .stamp strong {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0;
  margin-top: 2px;
  color: var(--gold-400);
}

/* Slide Owl indicator dots */
.owl-dots {
  display: flex; gap: 8px;
  position: absolute;
  bottom: -42px; left: 50%; transform: translateX(-50%);
}
.owl-dots span,
.owl-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(246,239,225,0.25);
  padding: 0; border: 0; cursor: pointer;
  transition: background .2s ease, width .25s ease;
}
.owl-dots button:hover { background: rgba(246,239,225,0.5); }
.owl-dots span.is-active,
.owl-dots button.is-active { background: var(--gold-500); width: 28px; border-radius: 4px; }

/* Hero cross-fade between slides */
.hero-info,
.poster-frame {
  transition: opacity .24s ease;
}
.hero-info.is-fading,
.poster-frame.is-fading { opacity: 0; }
.poster-frame .ph img {
  transition: opacity .24s ease;
}

/* =========================================================
   QUICK LINKS — replaces the cartoon icon row from current site
   ========================================================= */
.quicklinks {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--navy-800);
}
.quicklinks.is-8 { grid-template-columns: repeat(4, 1fr); }
.quicklinks.is-8 .quicklink:nth-child(4n) { border-right: none; }
.quicklinks.is-8 .quicklink:nth-child(n+5) { border-top: 1px solid var(--rule); }

/* ---- BENTO variant: one featured cell + 6 varied cells ---- */
.quicklinks-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--navy-800);
}
.quicklinks-bento .quicklink { min-height: 200px; }
.quicklinks-bento .quicklink:nth-child(4n) { border-right: none; }
.quicklinks-bento .quicklink:nth-child(n+5) { border-top: 1px solid var(--rule); }
.quicklinks-bento .quicklink.is-feature {
  grid-column: span 2;
  grid-row: span 1;
}
.quicklink {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 22px;
  border-right: 1px solid var(--rule);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
  position: relative;
  color: var(--cream-50);
  overflow: hidden;
  isolation: isolate;
}
.quicklink:last-child { border-right: none; }
.quicklink:hover { background: rgba(246,239,225,0.04); }
.quicklink:hover .ql-arrow { transform: translateX(4px); color: var(--gold-400); }
.quicklink:hover .ql-glyph { transform: scale(1.05) rotate(-2deg); opacity: 0.9; }
.quicklink .ql-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold-400);
  position: relative; z-index: 2;
}
.quicklink .ql-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.05;
  margin-top: 4px;
  position: relative; z-index: 2;
}
.quicklink .ql-desc {
  font-size: 12px;
  color: rgba(246,239,225,0.6);
  margin-top: 4px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative; z-index: 2;
}
.quicklink .ql-arrow {
  position: absolute;
  right: 18px; bottom: 22px;
  color: rgba(246,239,225,0.4);
  font-size: 16px;
  transition: transform .15s ease, color .15s ease;
  z-index: 2;
}

/* Decorative glyph behind the content */
.quicklink .ql-glyph {
  position: absolute;
  right: -8px; top: -12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 140px;
  line-height: 1;
  color: rgba(246,239,225,0.05);
  z-index: 1;
  pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}

/* SVG variant of the glyph — simple iconographic shapes */
.quicklink .ql-icon {
  position: absolute;
  right: -14px; bottom: -18px;
  width: 150px;
  height: 150px;
  color: rgba(246,239,225,0.10);
  z-index: 1;
  pointer-events: none;
  transition: transform .3s ease, color .3s ease, opacity .3s ease;
  transform-origin: bottom right;
}
.quicklink .ql-icon svg {
  display: block;
  width: 100%; height: 100%;
}
.quicklink:hover .ql-icon { transform: scale(1.08) rotate(-3deg); color: rgba(230,183,96,0.22); }

/* ---------- Per-tile colour treatments ---------- */

/* Featured: solid gold, navy text — Events & Tickets */
.quicklink.is-feature {
  background: linear-gradient(160deg, var(--gold-500) 0%, var(--gold-600) 100%);
  color: var(--navy-900);
  padding: 36px 36px;
  justify-content: space-between;
}
.quicklink.is-feature:hover { background: linear-gradient(160deg, var(--gold-400), var(--gold-500)); }
.quicklink.is-feature .ql-num { color: rgba(10,26,58,0.7); font-weight: 600; }
.quicklink.is-feature .ql-title {
  font-size: 44px;
  line-height: 1.0;
  margin-top: 10px;
  letter-spacing: -0.01em;
}
.quicklink.is-feature .ql-title em { font-style: italic; font-weight: 400; color: var(--velvet-800); }
.quicklink.is-feature .ql-desc { color: rgba(10,26,58,0.7); }
.quicklink.is-feature .ql-arrow { color: rgba(10,26,58,0.5); right: 36px; bottom: 36px; font-size: 22px; }
.quicklink.is-feature:hover .ql-arrow { color: var(--velvet-800); }
.quicklink.is-feature .ql-glyph { color: rgba(10,26,58,0.12); font-size: 240px; right: -20px; top: -60px; }
.quicklink.is-feature .ql-icon {
  width: 240px; height: 240px;
  right: -30px; bottom: -50px;
  color: rgba(10,26,58,0.18);
}
.quicklink.is-feature:hover .ql-icon { color: rgba(138,42,53,0.3); }
.quicklink.is-feature .ql-feature-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--velvet-800);
  color: var(--cream-50);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  align-self: flex-start;
  position: relative; z-index: 2;
}

/* Classes: navy with diagonal cream stripes */
.quicklink.is-classes {
  background:
    repeating-linear-gradient(135deg,
      transparent 0 18px,
      rgba(246,239,225,0.035) 18px 19px),
    var(--navy-800);
}
.quicklink.is-classes .ql-glyph { color: rgba(230,183,96,0.12); }
.quicklink.is-classes .ql-icon { color: rgba(230,183,96,0.16); }

/* Camp: warm gold radial glow (sunny) */
.quicklink.is-camp {
  background:
    radial-gradient(circle at 80% 20%, rgba(230,183,96,0.28), transparent 60%),
    var(--navy-800);
}
.quicklink.is-camp .ql-glyph { color: rgba(230,183,96,0.18); font-size: 130px; }
.quicklink.is-camp .ql-icon { color: rgba(230,183,96,0.22); }
.quicklink.is-camp .ql-num { color: var(--gold-300); }

/* Gallery: velvet curtain */
.quicklink.is-gallery {
  background: linear-gradient(160deg, var(--velvet-800), var(--velvet-900));
}
.quicklink.is-gallery .ql-glyph { color: rgba(230,183,96,0.16); }
.quicklink.is-gallery .ql-icon { color: rgba(230,183,96,0.18); }
.quicklink.is-gallery .ql-num { color: var(--gold-300); }
.quicklink.is-gallery:hover { background: linear-gradient(160deg, var(--velvet-700), var(--velvet-800)); }

/* Team: cream paper, dark type — feels human */
.quicklink.is-team {
  background: var(--cream-50);
  color: var(--navy-900);
}
.quicklink.is-team .ql-num { color: var(--velvet-800); font-weight: 600; }
.quicklink.is-team .ql-desc { color: var(--ink-500); }
.quicklink.is-team .ql-arrow { color: rgba(10,26,58,0.3); }
.quicklink.is-team:hover { background: var(--cream-100); }
.quicklink.is-team:hover .ql-arrow { color: var(--velvet-800); }
.quicklink.is-team .ql-glyph { color: rgba(138,42,53,0.12); }
.quicklink.is-team .ql-icon { color: rgba(138,42,53,0.16); }
.quicklink.is-team:hover .ql-icon { color: rgba(138,42,53,0.28); }

/* Map: navy with grid pattern (literal map grid) */
.quicklink.is-map {
  background:
    linear-gradient(to right, rgba(246,239,225,0.05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(to bottom, rgba(246,239,225,0.05) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--navy-900);
}
.quicklink.is-map .ql-glyph { color: rgba(230,183,96,0.16); }
.quicklink.is-map .ql-icon { color: rgba(230,183,96,0.20); }

/* Reviews: velvet quote feel */
.quicklink.is-reviews {
  background:
    radial-gradient(ellipse 300px 200px at 20% 80%, rgba(138,42,53,0.4), transparent 60%),
    var(--navy-900);
}
.quicklink.is-reviews .ql-glyph {
  font-family: var(--font-display);
  font-size: 200px;
  color: rgba(230,183,96,0.12);
  top: -40px; left: -10px; right: auto;
  font-style: normal;
}
.quicklink.is-reviews .ql-icon {
  width: 200px; height: 200px;
  right: -10px; bottom: -28px;
  color: rgba(230,183,96,0.18);
}
.quicklink.is-reviews:hover .ql-icon { color: rgba(230,183,96,0.32); }
.quicklink.is-reviews .ql-num { color: var(--gold-300); }

/* =========================================================
   EVENT CARDS — Slide Owl carousel
   ========================================================= */
.events-row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
  /* bleed shadow space so hover-lift isn't clipped */
  margin: -8px -4px;
  padding: 8px 4px 12px;
}
.events-row::-webkit-scrollbar { display: none; }
.events-row > .event-card {
  flex: 0 0 calc((100% - 36px) / 3);
  scroll-snap-align: start;
  min-width: 0;
}
.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(246,239,225,0.04);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.event-card:hover { transform: translateY(-4px); border-color: rgba(230,183,96,0.5); }
.event-card .ph { aspect-ratio: 16 / 11; border-radius: 0; }
.event-card .ph::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,26,58,0.85) 100%);
  z-index: 6;
}
.event-date-stamp {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--cream-50);
  color: var(--navy-900);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  z-index: 8;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.event-date-stamp .dm {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--velvet-800);
  font-weight: 600;
}
.event-date-stamp .dd {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  margin-top: 2px;
}
.event-tag {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 8;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--velvet-800);
  color: var(--cream-50);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
}
.event-tag.is-camp { background: var(--gold-500); color: var(--navy-900); }
.event-tag.is-class { background: rgba(246,239,225,0.95); color: var(--navy-900); }
.event-card-body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.event-card-body h3 { font-size: 24px; line-height: 1.1; }
.event-card-body .where {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.55);
}
.event-card-body .desc {
  font-size: 14px;
  color: rgba(246,239,225,0.7);
  line-height: 1.5;
  margin: 4px 0 12px;
}
.event-card-body .row {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.event-card-body .row .price { color: var(--gold-400); font-family: var(--font-display); font-size: 18px; letter-spacing: 0; }
.event-card-body .row a,
.event-card-body .row .row-cta {
  color: var(--cream-50);
  transition: color .15s ease;
}
.event-card:hover .row-cta,
.event-card:hover .row a { color: var(--gold-400); }

/* Carousel chrome (resembles Slide Owl prev/next/dots) */
.carousel-wrap { position: relative; }
.carousel-chrome {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 28px;
}
.carousel-dots { display: flex; gap: 8px; align-items: center; }
.carousel-dots span,
.carousel-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(246,239,225,0.25);
  padding: 0; border: 0; cursor: pointer;
  transition: background .2s ease, width .25s ease;
}
.carousel-dots button:hover { background: rgba(246,239,225,0.5); }
.carousel-dots span.is-active,
.carousel-dots button.is-active { background: var(--gold-500); width: 28px; border-radius: 4px; }
.carousel-arrows button[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.carousel-arrows button[disabled]:hover {
  background: transparent;
  border-color: rgba(246,239,225,0.3);
  color: var(--cream-50);
}
.carousel-arrows { display: flex; gap: 8px; }
.carousel-arrows button {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(246,239,225,0.3);
  background: transparent;
  color: var(--cream-50);
  font-size: 18px;
  cursor: pointer;
  transition: all .15s ease;
}
.carousel-arrows button:hover {
  background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900);
}

/* =========================================================
   MAILCHIMP BAND
   ========================================================= */
.mc-band {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  background:
    linear-gradient(135deg, var(--velvet-800) 0%, var(--velvet-900) 60%, var(--navy-900) 100%);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.mc-band::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 500px 250px at 90% 0%, rgba(230,183,96,0.22), transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 24px, rgba(246,239,225,0.025) 24px 25px);
  pointer-events: none;
}
.mc-band > * { position: relative; z-index: 1; }
.mc-band h2 {
  font-size: clamp(32px, 3.6vw, 50px);
  letter-spacing: -0.005em;
}
.mc-band h2 em { color: var(--gold-300); font-style: italic; }
.mc-band .mc-sub {
  margin-top: 14px;
  color: rgba(246,239,225,0.78);
  font-size: 17px;
  max-width: 440px;
}
.mc-form {
  display: flex;
  background: rgba(10,12,20,0.4);
  border: 1px solid rgba(246,239,225,0.18);
  border-radius: var(--radius-pill);
  padding: 6px;
  align-items: center;
}
.mc-form input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--cream-50);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
}
.mc-form input::placeholder { color: rgba(246,239,225,0.5); }
/* Chrome paints autofilled fields white — keep the dark pill + cream text */
.mc-form input:-webkit-autofill,
.mc-form input:-webkit-autofill:hover,
.mc-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cream-50);
  caret-color: var(--cream-50);
  -webkit-box-shadow: 0 0 0 1000px #1d0e16 inset;
  transition: background-color 9999s ease-in-out 0s;
}
.mc-form button {
  background: var(--gold-500);
  color: var(--navy-900);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 14px 24px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .15s ease;
}
.mc-form button:hover { background: var(--gold-400); }
.mc-meta {
  display: flex; gap: 18px; margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.5);
}
.mc-meta .dot { color: var(--gold-400); }

/* Inline AJAX feedback (success / error) for the .mc-form band */
.mc-feedback {
  margin: 12px 4px 0;
  min-height: 18px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.mc-feedback.is-ok  { color: var(--gold-300); }
.mc-feedback.is-err { color: #ffb3a6; }
.mc-feedback.is-pending { color: rgba(246,239,225,0.6); }

/* ---------------------------------------------------------
   Gantry "Newsletter" particle → playbill restyle
   Gantry's particle CSS loads AFTER homepage.css, so we use
   the #mc_embed_signup ID + !important to win the cascade.
   --------------------------------------------------------- */
.g-newsletter-particle .title {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3.2vw, 46px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  color: var(--cream-50) !important;
  margin: 0 0 18px !important;
  text-align: center;
}

/* Reset Gantry's own layout wrappers so they don't fight us */
#mc_embed_signup {
  max-width: 540px;
  margin: 0 auto;
}
#mc_embed_signup form { margin: 0 !important; padding: 0 !important; }

/* The pill that wraps input + button — force flex row */
#mc_embed_signup .g-newsletter-form-wrapper,
#mc_embed_signup .mc_embed_signup_scroll {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  position: relative !important;
  background: rgba(10,12,20,0.4) !important;
  border: 1px solid rgba(246,239,225,0.18) !important;
  border-radius: var(--radius-pill) !important;
  padding: 6px !important;
  width: 100% !important;
}

/* Email field stretches to fill */
#mc_embed_signup .mc-field-group {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  position: static !important;
}
#mc_embed_signup input#mce-EMAIL {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--cream-50) !important;
  padding: 14px 18px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  outline: none !important;
  box-shadow: none !important;
}
#mc_embed_signup input#mce-EMAIL::placeholder { color: rgba(246,239,225,0.5) !important; }

/* Mailchimp inline validation error — strip the dark-red block, float it
   beneath the pill as small text so it never inflates the pill height */
#mc_embed_signup .mce_inline_error {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 6px !important;
  background: none !important;
  background-color: transparent !important;
  color: #ffb3a6 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border: 0 !important;
  display: inline-block !important;
}
/* the input also receives .mce_inline_error (red border) — neutralise it */
#mc_embed_signup input#mce-EMAIL.mce_inline_error {
  position: static !important;
  border: 0 !important;
}

/* Subscribe button */
#mc_embed_signup .g-newsletter-button {
  flex: 0 0 auto !important;
  margin: 0 !important;
  width: auto !important;
}
#mc_embed_signup input#mc-embedded-subscribe {
  background: var(--gold-500) !important;
  color: var(--navy-900) !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 26px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  cursor: pointer !important;
  width: auto !important;
  height: auto !important;
  transition: background .15s ease;
}
#mc_embed_signup input#mc-embedded-subscribe:hover { background: var(--gold-400) !important; }

/* Mailchimp inline response messages */
#mc_embed_signup #mce-responses { margin-top: 14px; clear: both; }
#mc_embed_signup #mce-responses .response { font-family: var(--font-body); font-size: 14px; }
#mc_embed_signup #mce-success-response { color: var(--gold-300); }
#mc_embed_signup #mce-error-response { color: #ff9a8a; }

/* Stack on small screens */
@media (max-width: 600px) {
  #mc_embed_signup .g-newsletter-form-wrapper,
  #mc_embed_signup .mc_embed_signup_scroll {
    flex-direction: column !important;
    align-items: stretch !important;
    border-radius: var(--radius-lg) !important;
    gap: 8px !important;
  }
  #mc_embed_signup input#mc-embedded-subscribe { width: 100% !important; }
}

/* =========================================================
   FACEBOOK FEED
   ========================================================= */
.fb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.fb-card {
  display: flex; flex-direction: column;
  background: rgba(246,239,225,0.04);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease;
}
.fb-card:hover { border-color: rgba(230,183,96,0.4); }
.fb-card .ph { aspect-ratio: 4 / 3; border-radius: 0; }
.fb-card-body {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px;
}
.fb-card-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.55);
}
.fb-card-head .fb-mark {
  width: 22px; height: 22px;
  border-radius: 4px;
  background: #1877f2;
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  font-style: italic;
}
.fb-card-body p {
  font-size: 14px; line-height: 1.55;
  color: rgba(246,239,225,0.78);
  margin: 0;
}
.fb-card-foot {
  display: flex; gap: 14px; margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.5);
  padding-top: 12px; border-top: 1px solid var(--rule);
}

/* ---------------------------------------------------------
   FBConnect / Facebook Page Plugin wrapper — Joomla module
   ---------------------------------------------------------
   Wrap whatever the plugin renders in <div class="bravo-fb">.
   Works whether FBConnect outputs an iframe (Page Plugin) OR
   structured post HTML. The overrides at the bottom of this
   block re-target common plugin selectors so they match the
   Bravo style. Drop in your real plugin and these styles take
   over without touching the plugin's PHP.
   --------------------------------------------------------- */

.bravo-fb {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 980px) { .bravo-fb { grid-template-columns: 1fr; } }

.bravo-fb-intro {
  background: linear-gradient(160deg, #1877f2 0%, #0f4eb8 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.bravo-fb-intro::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 600px 300px at 100% -10%, rgba(255,255,255,0.15), transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 24px, rgba(255,255,255,0.04) 24px 25px);
  pointer-events: none;
}
.bravo-fb-intro > * { position: relative; z-index: 1; }
.bravo-fb-intro .fb-logo {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(255,255,255,0.95);
  color: #1877f2;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 36px;
  line-height: 1;
}
.bravo-fb-intro h3 {
  font-size: 36px;
  line-height: 1.05;
  color: #fff;
}
.bravo-fb-intro h3 em { font-style: italic; color: var(--gold-300); font-weight: 400; }
.bravo-fb-intro .fb-handle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.bravo-fb-intro .fb-blurb {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
  margin: 0;
}
.bravo-fb-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.bravo-fb-stat .n {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
}
.bravo-fb-stat .l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-top: 6px;
}
.bravo-fb-intro .fb-follow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.95);
  color: #1877f2;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  align-self: flex-start;
}
.bravo-fb-intro .fb-follow:hover { background: #fff; }
.bravo-fb-intro .fb-follow::before {
  content: "👍";
  font-size: 16px;
  filter: grayscale(0);
}

/* The widget panel — what wraps the actual plugin iframe or HTML */
.bravo-fb-widget {
  background: var(--cream-50);
  color: var(--ink-900);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}
.bravo-fb-widget .fb-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: #f0f2f5;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-family: var(--font-body);
  font-size: 13px;
  color: #65676b;
}
.bravo-fb-widget .fb-bar .fb-bar-mark {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: #1877f2;
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 15px;
}
.bravo-fb-widget .fb-bar strong {
  color: #050505;
  font-weight: 600;
}
.bravo-fb-widget .fb-bar .open-link {
  margin-left: auto;
  color: #1877f2;
  font-weight: 600;
  font-size: 12px;
}

.bravo-fb-stream {
  display: flex;
  flex-direction: column;
}
.bravo-fb-post {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
.bravo-fb-post:last-child { border-bottom: none; }
.bravo-fb-post:hover { background: rgba(0,0,0,0.02); }
.bravo-fb-post .ph {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: var(--navy-800);
  border: 0;
}
.bravo-fb-post .post-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bravo-fb-post .post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #65676b;
}
.bravo-fb-post .post-meta::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--velvet-800);
  flex-shrink: 0;
}
.bravo-fb-post .post-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: #050505;
  margin: 4px 0 0;
  /* clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bravo-fb-post .post-eng {
  display: flex;
  gap: 12px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #65676b;
  margin-top: 6px;
}
.bravo-fb-post .post-eng span::before {
  content: "·";
  margin-right: 8px;
  opacity: 0.4;
}
.bravo-fb-post .post-eng span:first-child::before { content: ""; margin-right: 0; }
.bravo-fb-post .post-go {
  align-self: center;
  color: #65676b;
  font-size: 18px;
}

.bravo-fb-widget .fb-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #f0f2f5;
  border-top: 1px solid rgba(0,0,0,0.06);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #65676b;
}
.bravo-fb-widget .fb-foot a { color: #1877f2; font-weight: 600; }

/* ---------- Real-plugin selector overrides ---------- */
/* Drop these into your Gantry/template CSS. They re-skin the
   most common Joomla Facebook plugins to match Bravo's design. */

/* JFBConnect (Sourcerer) — the plugin you actually use.
   It renders the official Facebook SDK markup (.fb-page) plus
   its own wrappers prefixed jfbc*. */
.bravo-fb .jfbc-like-box,
.bravo-fb .jfbcLikeBox,
.bravo-fb .jfbc-page-plugin,
.bravo-fb .jfbcFeed,
.bravo-fb .jfbc-comments {
  width: 100% !important;
  max-width: 100%;
  background: transparent;
  padding: 0;
  margin: 0;
}
.bravo-fb .fb-page,
.bravo-fb .fb-page span,
.bravo-fb .fb_iframe_widget,
.bravo-fb .fb_iframe_widget span,
.bravo-fb .fb_iframe_widget iframe {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--cream-50);
  border-radius: 0;
}
.bravo-fb .jfbc-error,
.bravo-fb .jfbc-login,
.bravo-fb .jfbc-status { display: none; } /* hide login/error chrome */

/* JFBConnect Page Plugin module renders inside a .moduletable —
   so we can scope our chrome to a Gantry module position. */
.gantry-position-fbfeed .moduletable,
.gantry-position-fbfeed .g-content { padding: 0; }

/* FBConnect (legacy free plugin) / Facebook Page Plugin iframe */
.bravo-fb iframe,
.bravo-fb .fb-page,
.bravo-fb .fb_iframe_widget {
  width: 100% !important;
  max-width: 100%;
  border: 0 !important;
  background: var(--cream-50);
}

/* Smash Balloon Custom Facebook Feed */
.bravo-fb .cff-wrapper,
.bravo-fb .cff-posts-wrap { background: transparent; padding: 0; }
.bravo-fb .cff-item {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: var(--cream-50);
}
.bravo-fb .cff-item .cff-author-img { width: 80px !important; height: 80px !important; border-radius: 8px; }
.bravo-fb .cff-item .cff-post-text { font-family: var(--font-body); font-size: 14px; }
.bravo-fb .cff-item .cff-likebox { display: none; } /* hide the embedded like-box, we have our own */

/* Generic .fbpost / .fb-post / .facebook-post fallbacks */
.bravo-fb .fbpost,
.bravo-fb .fb-post,
.bravo-fb .facebook-post {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: var(--cream-50);
  color: var(--ink-900);
}

/* =========================================================
   SourceCoast Social Stream -> Bravo skin  (THE LIVE PLUGIN)
   Plugin root: .socialstream.ns-bs5  per post: .facebook.page.post.row
   Re-skins the real plugin HTML to the Bravo post stream. Rooted at
   .socialstream so it works inside .bravo-fb-widget or its own position.
   ========================================================= */
.socialstream {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  background: transparent;
  margin: 0;
  padding: 0;
}
.socialstream [class*="col-md-"],
.socialstream .row {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  --bs-gutter-x: 0;
}
.socialstream .post {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: var(--cream-50);
  transition: background .15s ease;
}
.socialstream .post > * { min-width: 0; }
/* PICTURE on the LEFT — square thumb spanning the post height */
.socialstream .post > *:has(.preview) {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
}
/* TEXT on the RIGHT — author header then message stacked */
.socialstream .post > .author { grid-column: 2; grid-row: 1; }
.socialstream .post > *:has(.message) { grid-column: 2; grid-row: 2; }
/* posts with no image fall back to full-width text */
.socialstream .post:not(:has(.preview)) { grid-template-columns: 1fr; }
.socialstream .post:not(:has(.preview)) > * { grid-column: 1; }
.socialstream .post:last-child { border-bottom: 0; }
.socialstream .post:hover { background: rgba(0,0,0,0.025); }
/* author = one tidy inline line: "Bravo Theater · <date>" */
.socialstream .author {
  display: block;
  margin-bottom: 6px;
  line-height: 1.3;
}
.socialstream .provider { display: none; }
/* avatar redundant once the post photo sits on the left — hide it */
.socialstream .author-image { display: none; }
.socialstream .author-details { display: inline; min-width: 0; }
.socialstream .screen-name {
  display: inline;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-900);
}
.socialstream .date {
  display: inline;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: #65676b;
}
.socialstream .date::before { content: "·"; margin: 0 6px; color: #65676b; }
.socialstream .message {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: #1c1e21;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.socialstream .message a {
  color: var(--velvet-800);
  font-weight: 600;
  word-break: break-word;
}
.socialstream .preview { margin: 0; }
.socialstream .preview .title { display: none; }
.socialstream .preview .image img {
  width: 80px;
  height: 80px;
  aspect-ratio: 1 / 1;
  max-height: none;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--navy-800);
  color: transparent;
  font-size: 0;
}
.socialstream .link { margin-top: 4px; }
.socialstream .link a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: #1877f2;
  text-decoration: none;
}
.socialstream .link a::after { content: "→"; }
.socialstream .link a:hover { text-decoration: underline; }

/* --- Hardened overrides: beat the Gantry/template typography that
   otherwise makes post text inherit light color + center alignment --- */
.socialstream,
.socialstream .post,
.socialstream .author,
.socialstream .author-details,
.socialstream .message,
.socialstream .preview { text-align: left !important; }
.socialstream .author {
  display: block !important;
  text-align: left !important;
}
.socialstream .author-details { display: inline !important; }
.socialstream .screen-name { display: inline !important; }
.socialstream .date { display: inline !important; }
.socialstream .author-image { display: none !important; }
.socialstream .screen-name,
.socialstream .message,
.socialstream .post { color: #1c1e21 !important; }
.socialstream .date { color: #65676b !important; }
.socialstream .message a { color: var(--velvet-800) !important; }
.socialstream .link a { color: #1877f2 !important; }

/* =========================================================
   OPTION B — EDITORIAL HERO (paper-tone, asymmetric)
   ========================================================= */
.ed-hero {
  background: var(--cream-50);
  color: var(--ink-900);
  padding: 56px 0 72px;
  border-bottom: 1px solid var(--rule-paper);
  position: relative;
  overflow: hidden;
}
.ed-hero-inner {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 64px;
  align-items: center;
}
.ed-hero h1 {
  font-size: clamp(56px, 8vw, 130px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--navy-900);
}
.ed-hero h1 em {
  color: var(--velvet-800);
  font-style: italic;
  font-weight: 400;
}
.ed-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--velvet-800);
  margin-bottom: 36px;
}
.ed-eyebrow .pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--velvet-800);
  box-shadow: 0 0 0 4px rgba(138,42,53,0.2);
}
.ed-hero .ed-sub {
  margin-top: 28px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 540px;
}
.ed-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.btn-ink {
  background: var(--navy-900);
  color: var(--cream-50);
  border-color: var(--navy-900);
}
.btn-ink:hover { background: var(--velvet-800); border-color: var(--velvet-800); }
.ed-meta-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--rule-paper);
}
.ed-meta-strip .item .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 6px;
}
.ed-meta-strip .item .val {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--navy-900);
  letter-spacing: -0.005em;
}
.ed-meta-strip .item .val em { font-style: italic; color: var(--velvet-800); }

/* Editorial poster — tall, paper-edged with caption */
.ed-poster {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: visible;
}
.ed-poster .ph {
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 30px 60px -20px rgba(10,26,58,0.5),
              0 0 0 1px rgba(10,26,58,0.08);
}
.ed-poster .caption {
  position: absolute;
  left: -12px; bottom: 24px;
  background: var(--navy-900);
  color: var(--cream-50);
  padding: 12px 18px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(0,0,0,0.25);
}
.ed-poster .caption strong {
  font-family: var(--font-display);
  font-size: 18px;
  display: block;
  color: var(--gold-400);
  margin-top: 4px;
  letter-spacing: 0;
}
.ed-poster .stamp-dates {
  position: absolute;
  right: -18px; top: 24px;
  background: var(--gold-500);
  color: var(--navy-900);
  padding: 12px 18px;
  border-radius: 4px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
  white-space: nowrap;
}
.ed-poster .stamp-dates strong {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  margin-top: 2px;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Editorial event list — wide row format */
.ed-events {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}
.ed-event {
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  gap: 32px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--cream-50);
  transition: background .15s ease, padding .15s ease;
}
.ed-event:hover { background: rgba(246,239,225,0.03); padding-left: 12px; padding-right: 12px; }
.ed-event:hover .e-go { color: var(--gold-400); transform: translateX(4px); }
.ed-event .e-date {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ed-event .e-date .e-month {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 6px;
}
.ed-event .e-title {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.1;
}
.ed-event .e-title small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.55);
  font-weight: 400;
}
.ed-event .e-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid rgba(246,239,225,0.18);
  border-radius: var(--radius-pill);
}
.ed-event .e-tag.is-mainstage { background: var(--velvet-800); border-color: var(--velvet-800); }
.ed-event .e-tag.is-camp { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.ed-event .e-go { color: rgba(246,239,225,0.5); font-size: 22px; transition: all .15s ease; }

/* =========================================================
   STAY-CLOSE BAND (Option B: MailChimp + Facebook combined)
   ========================================================= */
.stay-close {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
}
.sc-card {
  background: rgba(246,239,225,0.04);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.sc-card.is-mail {
  background: linear-gradient(160deg, var(--navy-700), var(--navy-900));
  border-color: rgba(230,183,96,0.2);
}
.sc-card.is-fb {
  background: rgba(246,239,225,0.03);
}
.sc-card h3 {
  font-size: 36px;
  line-height: 1.05;
}
.sc-card h3 em { font-style: italic; color: var(--gold-400); font-weight: 400; }
.sc-card .sc-sub {
  color: rgba(246,239,225,0.7);
  font-size: 16px;
  margin: 0;
}
.sc-fb-posts {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule);
}
.sc-fb-post {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.sc-fb-post:last-child { border-bottom: none; }
.sc-fb-post .ph { aspect-ratio: 1 / 1; border-radius: 8px; }
.sc-fb-post .p-title {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.2;
}
.sc-fb-post .p-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.5);
  margin-top: 4px;
}
.sc-fb-post .p-go {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-400);
}

/* =========================================================
   PROGRAM TILES (smaller variant for front page)
   ========================================================= */
.fp-programs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.fp-program {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  display: block;
}
.fp-program .ph { height: 100%; border-radius: 0; }
.fp-program::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(10,26,58,0.92) 100%);
  z-index: 6;
}
.fp-program-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px;
  z-index: 8;
  color: var(--cream-50);
}
.fp-program-body .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.fp-program-body h3 {
  font-size: 28px;
  margin-top: 6px;
  line-height: 1.05;
}
.fp-program-body .meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.7);
  margin-top: 10px;
}
.fp-program:hover .ph img { transform: scale(1.04); }
.fp-program .ph img { transition: transform .4s ease; }

/* =========================================================
   FRONT PAGE FOOTER (Joomla module slots)
   ========================================================= */
.fp-footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}

/* Responsive collapse */
@media (max-width: 1080px) {
  .show-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .ed-hero-inner   { grid-template-columns: 1fr; gap: 48px; }
  .quicklinks      { grid-template-columns: repeat(3, 1fr); }
  .quicklinks.is-8 { grid-template-columns: repeat(2, 1fr); }
  .quicklinks.is-8 .quicklink:nth-child(2n) { border-right: none; }
  .quicklinks.is-8 .quicklink { border-right: 1px solid var(--rule); }
  .quicklinks-bento { grid-template-columns: repeat(2, 1fr); }
  .quicklinks-bento .quicklink { border-right: 1px solid var(--rule); }
  .quicklinks-bento .quicklink:nth-child(2n) { border-right: none; }
  .quicklinks-bento .quicklink.is-feature { grid-column: span 2; }
  .events-row > .event-card { flex-basis: calc((100% - 18px) / 2); }
  .fb-grid         { grid-template-columns: 1fr 1fr; }
  .fp-programs     { grid-template-columns: 1fr 1fr; }
  .mc-band         { grid-template-columns: 1fr; padding: 40px 28px; }
  .stay-close      { grid-template-columns: 1fr; }
  .ticket-bar      { left: 16px; right: 16px; transform: none; bottom: 16px; }
  .action-band     { grid-template-columns: 1fr; }
}

/* =========================================================
   STICKY TICKET BAR — persistent CTA on scroll
   ========================================================= */
.ticket-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 10px 10px 22px;
  background: var(--navy-900);
  border: 1px solid rgba(230,183,96,0.3);
  border-radius: var(--radius-pill);
  box-shadow:
    0 20px 50px -10px rgba(0,0,0,0.6),
    0 0 0 1px rgba(0,0,0,0.2) inset;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  max-width: calc(100vw - 32px);
}
.ticket-bar.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.ticket-bar .tb-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(230,183,96,0.25);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
.ticket-bar .tb-show {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.ticket-bar .tb-show .tb-title {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--cream-50);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.ticket-bar .tb-show .tb-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-top: 4px;
}
.ticket-bar .btn {
  padding: 12px 20px;
  font-size: 13px;
  flex-shrink: 0;
}
.ticket-bar .tb-close {
  background: transparent;
  border: 0;
  color: rgba(246,239,225,0.4);
  font-size: 16px;
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: color .15s ease, background .15s ease;
  flex-shrink: 0;
}
.ticket-bar .tb-close:hover { color: var(--cream-50); background: rgba(246,239,225,0.08); }

/* =========================================================
   PRE-FOOTER ACTION BAND — Visit · Trial · Donate
   ========================================================= */
.action-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--navy-800);
}
.action-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 44px 36px;
  border-right: 1px solid var(--rule);
  text-decoration: none;
  color: var(--cream-50);
  transition: background .2s ease;
}
.action-tile:last-child { border-right: none; }
.action-tile:hover { background: rgba(246,239,225,0.04); }
.action-tile:hover .at-arrow { transform: translateX(6px); color: var(--gold-400); }
.action-tile .at-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--gold-400);
  margin-bottom: 8px;
}
.action-tile .at-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.55);
}
.action-tile h3 {
  font-size: 30px;
  line-height: 1.05;
}
.action-tile h3 em { font-style: italic; color: var(--gold-400); font-weight: 400; }
.action-tile p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(246,239,225,0.7);
  margin: 0;
  max-width: 280px;
}
.action-tile .at-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.7);
  transition: transform .15s ease, color .15s ease;
}
.action-tile.is-feature {
  background: linear-gradient(160deg, var(--velvet-800), var(--velvet-900));
}
.action-tile.is-feature .at-icon {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
}


@media (max-width: 600px) {
  .ticket-bar {
    width: calc(100% - 24px);
    left: 12px;
    right: 12px;
    transform: translateX(0) translateY(20px);
    bottom: 12px;
    padding: 10px 12px;
    gap: 8px;
    border-radius: 16px;
    flex-wrap: nowrap;
  }
  .ticket-bar.is-visible {
    transform: translateX(0) translateY(0);
  }
  .tb-show { flex: 1; min-width: 0; }
  .tb-title { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tb-meta { font-size: 10px; letter-spacing: 0.05em; }
  .ticket-bar .btn { font-size: 11px; padding: 6px 12px; white-space: nowrap; flex-shrink: 0; }
  .tb-pulse { display: none; }
}

/* =========================================================
   PHONE BREAKPOINT — optimize layout for small screens
   ========================================================= */
@media (max-width: 640px) {
  .container, .container-wide, .container-narrow { padding: 0 18px; }

  /* top utility bar: drop the contact cluster (also in footer), keep announcement */
  .utility-inner { padding: 8px 18px; gap: 12px; justify-content: flex-start; }
  .utility-bar .util-right { display: none; }
  .utility-bar .util-left { font-size: 11px; min-width: 0; }
  .utility-bar .util-left span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .section-head .lead { font-size: 15px; max-width: 100%; }

  .quicklinks-bento { grid-template-columns: 1fr; }
  .quicklinks-bento .quicklink { border-right: none; min-height: 0; }
  .quicklinks-bento .quicklink:nth-child(n+2) { border-top: 1px solid var(--rule); }
  .quicklinks-bento .quicklink.is-feature { grid-column: span 1; padding: 26px 22px; }
  .quicklink { padding: 20px 18px; }
  .quicklink.is-feature .ql-title { font-size: 32px; }
  .quicklink.is-feature .ql-icon { width: 160px; height: 160px; }

  .fp-programs { grid-template-columns: 1fr 1fr; gap: 10px; }

  .mc-band { padding: 28px 20px; }
  .mc-form { flex-direction: column; gap: 8px; border-radius: var(--radius-lg); align-items: stretch; }
  .mc-form button { width: 100%; }
  .mc-meta { flex-wrap: wrap; gap: 8px 16px; }

  .bravo-fb-intro { padding: 28px 22px; }
  .bravo-fb-intro h3 { font-size: 30px; }
  .bravo-fb-stats { gap: 14px; }
  .bravo-fb-widget .fb-bar { flex-wrap: wrap; gap: 4px 8px; }
  .bravo-fb-widget .fb-bar .open-link { margin-left: auto; }
  .bravo-fb-widget .fb-foot { flex-direction: column; align-items: flex-start; gap: 6px; }

  .socialstream .post { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; padding: 14px 16px; }
  .socialstream .message { -webkit-line-clamp: 3; }
  .socialstream .preview .image img { width: 64px; height: 64px; max-height: none; }

  .bravo-fb-post { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .bravo-fb-post .post-go { display: none; }

  .action-band { grid-template-columns: 1fr; }
  .action-tile { border-right: none; border-bottom: 1px solid var(--rule); }
  .action-tile:last-child { border-bottom: none; }
  .action-tile h3 { font-size: 26px; }

  .ticket-bar { gap: 12px; padding: 10px 10px 10px 18px; }
  .ticket-bar .tb-title { font-size: 14px; }

  /* footer: collapse 4-col grid -> single column, break long contacts */
  .fp-footer-cols { grid-template-columns: 1fr; gap: 28px; }
  .footer { padding: 56px 0 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer a, .footer li { overflow-wrap: anywhere; word-break: break-word; }

  /* action band: force single column (base rule appears later in source) */
  .action-band { grid-template-columns: 1fr !important; }
  .action-tile p { max-width: 100%; }

  /* events carousel: wider cards w/ peek of the next, larger date stamp */
  .events-row > .event-card { flex-basis: 78%; min-width: 78%; }
  .event-date-stamp .dm { font-size: 11px; }
}

/* =========================================================
   JOOMLA / GANTRY WIDTH SAFEGUARD
   Every Bravo homepage section is full-bleed with an inner
   .container(-wide) that centers content. When a section is
   dropped into a Gantry module position, that position's own
   padding / max-width can make sections land at DIFFERENT
   widths. These :has() rules strip the wrapper chrome around
   our sections so they all go edge-to-edge and the inner
   container alignment stays identical across positions.
   (Best practice is still to stack ALL sections in ONE
   full-width position — see FRONT-PAGE-IMPORT.md.)
   ========================================================= */
.moduletable:has(> .section),
.moduletable:has(> .show-hero),
.moduletable:has(> .footer),
.g-content:has(> .section),
.g-content:has(> .show-hero),
.g-content:has(> .footer),
.mod-custom:has(> .section),
.mod-custom:has(> .show-hero) {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* AI SAFETY: Do not remove or move earlier. See comment below.
   SourceCoast plugin uses .sourcecoast.socialstream .message.col-md-12 { color:rgba(255,255,255,0.88)!important }
   with 3-class specificity. Our rules below match that specificity and appear later, so they win.
   After any edit: clear JSpeed cache + hard reload (Ctrl+Shift+R). */
.sourcecoast.socialstream .message.col-md-12    { color: #1c1e21 !important; }
.sourcecoast.socialstream .screen-name           { color: #1c1e21 !important; }
.sourcecoast.socialstream .date                  { color: #65676b !important; }
.sourcecoast.socialstream .link.col-md-12 a      { color: #1877f2 !important; }
.sourcecoast.socialstream .preview .title a      { color: #1c1e21 !important; }
/* ███████████████████████████████████████████████████████████
   ███  SECTION: 4/6 · .bravo-dance SCOPED DESIGN SYSTEM (Joomla-safe dance pages)
   ███  (was: bravo-dance.css)
   ███████████████████████████████████████████████████████████ */

/* =========================================================
   Bravo Dance — Joomla stylesheet
   Single file. All rules scoped under .bravo-dance so they
   never leak into the rest of the Joomla template.
   Compatible with Bootstrap 5 (which Joomla 4+ ships with);
   does not depend on it.
   ========================================================= */

/* Google Fonts @import removed: JSpeed mangles the ";" inside the css2 URL.
   Bodoni Moda / Manrope / JetBrains Mono are already loaded site-wide by the template assets. */

/* ---------- TOKENS ---------- */
.bravo-dance {
  --navy-900: #0a1a3a;
  --navy-800: #0f2451;
  --navy-700: #163067;
  --navy-600: #1f3f80;

  --cream-50:  #fbf6ea;
  --cream-100: #f6efe1;
  --cream-200: #ecdfc2;
  --cream-300: #e0cea3;

  --gold-700: #b6873a;
  --gold-600: #d3a04a;
  --gold-500: #e6b760;
  --gold-400: #f0c873;
  --gold-300: #f7dca0;

  --velvet-900: #4a121a;
  --velvet-800: #6b1d27;
  --velvet-700: #8a2a35;

  --ink-900: #0a0c14;
  --ink-700: #1d2030;
  --ink-500: #4a4f63;

  --bg: var(--navy-700);
  --bg-deep: var(--navy-900);
  --bg-paper: var(--cream-50);
  --fg: var(--cream-50);
  --fg-paper: var(--ink-900);
  --accent: var(--gold-500);
  --rule: rgba(246, 239, 225, 0.18);
  --rule-paper: rgba(10, 12, 20, 0.14);

  --font-display: "Bodoni Moda", "Playfair Display", Georgia, serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.bravo-dance, .bravo-dance * { box-sizing: border-box; }

/* ---------- TYPOGRAPHY ---------- */
.bravo-dance h1, .bravo-dance h2, .bravo-dance h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.04;
  text-wrap: balance;
  color: inherit;
  margin: 0;
}
.bravo-dance h1 { font-size: clamp(44px, 6.4vw, 92px); }
.bravo-dance h2 { font-size: clamp(34px, 4.2vw, 60px); }
.bravo-dance h3 { font-size: clamp(22px, 2.2vw, 30px); }

.bravo-dance .italic-script, .bravo-dance em.italic-script { font-style: italic; font-weight: 400; }
.bravo-dance em { font-style: italic; }

.bravo-dance p { margin: 0 0 1em; }
.bravo-dance p:last-child { margin-bottom: 0; }

.bravo-dance a { color: inherit; text-decoration: none; }
.bravo-dance img { max-width: 100%; display: block; }

.bravo-dance .eyebrow,
.bravo-dance .bd-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  display: inline-block;
}

.bravo-dance .text-muted-bravo { color: rgba(246, 239, 225, 0.66); }
.bravo-dance .uppercase-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.bravo-dance .serif-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.25;
  text-wrap: balance;
}

/* ---------- LAYOUT WRAPPERS ---------- */
.bravo-dance .bd-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.bravo-dance .bd-container-wide { max-width: 1440px; }
.bravo-dance .bd-container-narrow { max-width: 880px; }

.bravo-dance .bd-section { padding: 120px 0; }
.bravo-dance .bd-section-sm { padding: 72px 0; }

.bravo-dance .bd-section-paper { background: var(--bg-paper); color: var(--fg-paper); }
.bravo-dance .bd-section-deep { background: var(--bg-deep); }

.bravo-dance .bd-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}
.bravo-dance .bd-rule::before,
.bravo-dance .bd-rule::after { content: ""; height: 1px; background: var(--rule); flex: 0 0 32px; }
.bravo-dance .bd-rule::after { flex: 1; }
.bravo-dance .bd-section-paper .bd-rule { color: var(--velvet-800); }
.bravo-dance .bd-section-paper .bd-rule::before,
.bravo-dance .bd-section-paper .bd-rule::after { background: var(--rule-paper); }

.bravo-dance .bd-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.bravo-dance .bd-section-head .bd-lead {
  max-width: 480px;
  color: rgba(246, 239, 225, 0.7);
  font-size: 17px;
}
.bravo-dance .bd-section-paper .bd-section-head .bd-lead { color: var(--ink-500); }

/* ---------- BUTTONS (override BS5 .btn) ---------- */
.bravo-dance .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 16px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
  text-decoration: none;
}
.bravo-dance .btn:hover { transform: translateY(-1px); text-decoration: none; }
.bravo-dance .btn:active { transform: translateY(0); }

.bravo-dance .btn-bravo-primary,
.bravo-dance .btn.btn-primary {
  background: var(--gold-500);
  color: var(--navy-900);
  border-color: var(--gold-500);
}
.bravo-dance .btn-bravo-primary:hover,
.bravo-dance .btn.btn-primary:hover { background: var(--gold-400); border-color: var(--gold-400); color: var(--navy-900); }

.bravo-dance .btn-bravo-ghost {
  background: transparent;
  color: var(--cream-50);
  border-color: rgba(246, 239, 225, 0.35);
}
.bravo-dance .btn-bravo-ghost:hover { border-color: var(--cream-50); background: rgba(246, 239, 225, 0.06); color: var(--cream-50); }

.bravo-dance .btn-bravo-ghost-dark {
  background: transparent;
  color: var(--navy-900);
  border-color: rgba(10, 26, 58, 0.3);
}
.bravo-dance .btn-bravo-ghost-dark:hover { border-color: var(--navy-900); background: rgba(10, 26, 58, 0.04); color: var(--navy-900); }

.bravo-dance .btn-bravo-arrow::after {
  content: "→";
  display: inline-block;
  transition: transform .15s ease;
}
.bravo-dance .btn-bravo-arrow:hover::after { transform: translateX(4px); }

/* ---------- NAV (for use in a Joomla Custom HTML module) ---------- */
.bravo-dance.bd-nav {
  position: relative;   /* was: sticky — sticky was creating a stacking context that trapped the dropdown */
  z-index: 1;           /* was: 50 — guarantees Joomla's template dropdowns overlay it */
  background: var(--navy-900);
  border-bottom: 1px solid rgba(246, 239, 225, 0.12);
  min-height: 72px;
}
.bravo-dance .bd-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: 1440px;
  margin: 0 auto;
}
.bravo-dance .bd-nav-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bravo-dance .bd-nav-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-500), var(--gold-700));
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--navy-900);
  font-size: 22px;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
}
.bravo-dance .bd-nav-name {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.01em;
}
.bravo-dance .bd-nav-name small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold-400);
  margin-top: 2px;
  text-transform: uppercase;
}
.bravo-dance .bd-nav-links { display: flex; align-items: center; gap: 32px; list-style: none; padding: 0; margin: 0; }
.bravo-dance .bd-nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(246, 239, 225, 0.78);
  transition: color .15s ease;
}
.bravo-dance .bd-nav-links a:hover { color: var(--cream-50); }
.bravo-dance .bd-nav-cta { padding: 10px 18px; font-size: 13px; }

@media (max-width: 880px) {
  .bravo-dance .bd-nav-links a:not(.bd-nav-cta) { display: none; }
}

/* ---------- PLACEHOLDER IMAGE BLOCKS ---------- */
.bravo-dance .ph {
  position: relative;
  background: var(--navy-800);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.bravo-dance .ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(246, 239, 225, 0.04) 14px 15px);
  z-index: 0;
}
.bravo-dance .ph-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 239, 225, 0.55);
  text-align: center;
  padding: 8px 14px;
  border: 1px dashed rgba(246, 239, 225, 0.25);
  border-radius: 6px;
  background: rgba(10, 26, 58, 0.5);
}
.bravo-dance .ph.tone-velvet { background: linear-gradient(160deg, var(--velvet-800), var(--velvet-900)); }
.bravo-dance .ph.tone-gold   { background: linear-gradient(160deg, var(--gold-600), var(--gold-700)); }
.bravo-dance .ph.tone-gold .ph-label { color: rgba(10,26,58,.7); border-color: rgba(10,26,58,.35); background: rgba(255,255,255,.15); }
.bravo-dance .ph.tone-navy   { background: linear-gradient(160deg, var(--navy-700), var(--navy-900)); }
.bravo-dance .ph.tone-cream  { background: linear-gradient(160deg, var(--cream-100), var(--cream-300)); }
.bravo-dance .ph.tone-cream .ph-label { color: rgba(10,26,58,.55); border-color: rgba(10,26,58,.25); background: rgba(255,255,255,.4); }
.bravo-dance .ph.tone-deep   { background: linear-gradient(160deg, #0c1b3a, #04081a); }

.bravo-dance .ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
  display: block;
  border-radius: inherit;
}

/* ---------- HERO ---------- */
.bravo-dance .bd-hero {
  position: relative;
  padding: 64px 0 96px;
  overflow: hidden;
}
.bravo-dance .bd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 1200px 400px at 80% -10%, rgba(230,183,96,0.12), transparent 60%),
    radial-gradient(ellipse 800px 400px at 0% 110%, rgba(138,42,53,0.18), transparent 60%);
  pointer-events: none;
}
.bravo-dance .bd-hero > * { position: relative; }

.bravo-dance .bd-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.bravo-dance .bd-hero-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--gold-500); }

.bravo-dance .bd-hero h1 em { font-style: italic; color: var(--gold-400); font-weight: 400; }
.bravo-dance .bd-hero-sub {
  font-size: 20px;
  line-height: 1.5;
  color: rgba(246, 239, 225, 0.78);
  max-width: 520px;
}

.bravo-dance .bd-hero-meta {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  margin-top: 24px;
}
.bravo-dance .bd-hero-meta-item { display: flex; flex-direction: column; gap: 4px; }
.bravo-dance .bd-hero-meta-item .num {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  color: var(--gold-400);
}
.bravo-dance .bd-hero-meta-item .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 239, 225, 0.55);
}

.bravo-dance .bd-hero-collage {
  position: relative;
  height: 620px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: 1.1fr 0.9fr;
  gap: 14px;
}
.bravo-dance .bd-hero-collage .ph { width: 100%; height: 100%; min-height: 0; }
.bravo-dance .bd-hero-collage .hc-a { grid-row: 1 / span 2; }
.bravo-dance .bd-hero-tag {
  position: absolute;
  background: var(--cream-50);
  color: var(--navy-900);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 3;
}
.bravo-dance .bd-hero-tag.t1 { top: -14px; left: 28px; background: var(--gold-500); }
.bravo-dance .bd-hero-tag.t2 { bottom: 26px; right: -14px; }
.bravo-dance .bd-hero-tag.t3 { bottom: 30%; left: -22px; background: var(--velvet-800); color: var(--cream-50); }

@media (max-width: 980px) {
  .bravo-dance .bd-hero-collage { height: 480px; margin-top: 24px; }
}

/* ---------- MARQUEE ---------- */
.bravo-dance .bd-marquee {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
  background: var(--navy-800);
}
.bravo-dance .bd-marquee-track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: bd-scroll 38s linear infinite;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--gold-400);
  width: max-content;
}
.bravo-dance .bd-marquee-track span::after {
  content: "✦";
  margin-left: 56px;
  color: var(--velvet-700);
  font-style: normal;
}
@keyframes bd-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- WHY GRID (cards on navy) ---------- */
.bravo-dance .bd-why-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px;
  background: rgba(246, 239, 225, 0.04);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  min-height: 280px;
  height: 100%;
}
.bravo-dance .bd-why-card .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 56px;
  color: var(--gold-500);
  line-height: 1;
  letter-spacing: -0.03em;
}
.bravo-dance .bd-why-card p {
  color: rgba(246, 239, 225, 0.7);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

/* ---------- CATALOG (static, grouped) ---------- */
.bravo-dance .bd-catalog-track + .bd-catalog-track { margin-top: 48px; }
.bravo-dance .bd-catalog-track-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.bravo-dance .bd-catalog-track-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 239, 225, 0.55);
}
.bravo-dance .bd-catalog-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.bravo-dance .bd-catalog-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 24px;
  padding: 18px 22px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: rgba(246, 239, 225, 0.02);
  transition: all .15s ease;
}
.bravo-dance .bd-catalog-item:hover { border-color: var(--gold-400); background: rgba(246, 239, 225, 0.06); }
.bravo-dance .bd-catalog-item-name {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: -0.005em;
  grid-column: 1;
}
.bravo-dance .bd-catalog-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(246, 239, 225, 0.6);
  grid-column: 1;
}
.bravo-dance .bd-catalog-item-meta .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(246, 239, 225, 0.35);
}
.bravo-dance .bd-catalog-item-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--gold-400);
  font-size: 18px;
  transition: transform .15s ease;
}
.bravo-dance .bd-catalog-item:hover .bd-catalog-item-arrow { transform: translateX(4px); }

@media (max-width: 760px) {
  .bravo-dance .bd-catalog-items { grid-template-columns: 1fr; }
}

/* ---------- PROGRAM CARDS (on cream) ---------- */
.bravo-dance .bd-program-card {
  display: flex;
  flex-direction: column;
  background: var(--cream-50);
  color: var(--navy-900);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
  text-decoration: none;
}
.bravo-dance .bd-program-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -16px rgba(0,0,0,0.4); }
.bravo-dance .bd-program-card .ph { aspect-ratio: 4 / 3; border-radius: 0; }
.bravo-dance .bd-program-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.bravo-dance .bd-program-card .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--velvet-800);
}
.bravo-dance .bd-program-card p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-500);
  margin: 0;
  flex: 1;
}
.bravo-dance .bd-program-card .meta {
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-700);
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--rule-paper);
  margin-top: 6px;
}

/* ---------- TEACHER HIGHLIGHT ---------- */
.bravo-dance .bd-teacher-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: block;
}
.bravo-dance .bd-teacher-photo .ph { width: 100%; height: 100%; border-radius: var(--radius-lg); }
.bravo-dance .bd-teacher-photo .badge {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--velvet-800);
  color: var(--cream-50);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 10;
}
.bravo-dance .bd-teacher-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 28px;
  margin-top: 28px;
  border-top: 1px solid var(--rule);
}
.bravo-dance .bd-teacher-stat .n {
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--gold-400);
  line-height: 1;
}
.bravo-dance .bd-teacher-stat .l {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 239, 225, 0.6);
  margin-top: 8px;
  display: block;
}
.bravo-dance .bd-teacher-disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
}
.bravo-dance .bd-teacher-disciplines span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: rgba(246, 239, 225, 0.78);
}

/* ---------- BENEFITS (cream cells) ---------- */
.bravo-dance .bd-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--rule-paper);
  border-radius: var(--radius);
  overflow: hidden;
}
.bravo-dance .bd-benefit {
  padding: 40px 32px;
  border-right: 1px solid var(--rule-paper);
  border-bottom: 1px solid var(--rule-paper);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--cream-50);
}
.bravo-dance .bd-benefit:nth-child(3n) { border-right: none; }
.bravo-dance .bd-benefit:nth-last-child(-n+3) { border-bottom: none; }
.bravo-dance .bd-benefit .star {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--velvet-800);
  font-size: 26px;
}
.bravo-dance .bd-benefit p { color: var(--ink-500); font-size: 14px; margin: 0; line-height: 1.5; }

@media (max-width: 880px) {
  .bravo-dance .bd-benefits-grid { grid-template-columns: 1fr 1fr; }
  .bravo-dance .bd-benefit { border-right: 1px solid var(--rule-paper) !important; border-bottom: 1px solid var(--rule-paper) !important; }
  .bravo-dance .bd-benefit:nth-child(2n) { border-right: none !important; }
  .bravo-dance .bd-benefit:nth-last-child(-n+2) { border-bottom: none !important; }
}

/* ---------- LOCATION ---------- */
.bravo-dance .bd-location-map {
  aspect-ratio: 4 / 3;
  background: var(--navy-900);
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.bravo-dance .bd-location-map .grid-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(246,239,225,0.05) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(to bottom, rgba(246,239,225,0.05) 1px, transparent 1px) 0 0 / 56px 56px;
}
.bravo-dance .bd-location-map .pin {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 6px rgba(230,183,96,0.18);
  transform: translate(-50%, -50%);
}
.bravo-dance .bd-location-map .pin.lg {
  width: 22px; height: 22px;
  box-shadow: 0 0 0 10px rgba(230,183,96,0.18), 0 0 0 20px rgba(230,183,96,0.08);
}
.bravo-dance .bd-location-map .pin-label {
  position: absolute;
  transform: translate(-50%, -100%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-50);
  background: rgba(10, 26, 58, 0.7);
  padding: 4px 10px;
  border-radius: 4px;
  margin-top: -16px;
  white-space: nowrap;
}
.bravo-dance .bd-location-map .pin-label.is-primary { background: var(--gold-500); color: var(--navy-900); }
.bravo-dance .bd-location-areas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.bravo-dance .bd-location-areas span {
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: rgba(246, 239, 225, 0.78);
}
.bravo-dance .bd-location-areas span.is-primary {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
  font-weight: 600;
}

/* ---------- FAQ (using <details>) ---------- */
.bravo-dance .bd-faq { border-top: 1px solid var(--rule); }
.bravo-dance .bd-faq details {
  border-bottom: 1px solid var(--rule);
  padding: 26px 0;
}
.bravo-dance .bd-faq summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.15;
}
.bravo-dance .bd-faq summary::-webkit-details-marker { display: none; }
.bravo-dance .bd-faq summary .num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gold-400);
  width: 36px;
}
.bravo-dance .bd-faq summary::after {
  content: "+";
  font-family: var(--font-body);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--gold-400);
  font-size: 28px;
  transition: all .15s ease;
}
.bravo-dance .bd-faq details[open] summary::after {
  content: "−";
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
}
.bravo-dance .bd-faq .answer {
  padding: 16px 0 0 60px;
  color: rgba(246, 239, 225, 0.72);
  font-size: 17px;
  line-height: 1.6;
}

/* ---------- CTA BLOCK ---------- */
.bravo-dance .bd-cta {
  position: relative;
  padding: 80px 56px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--velvet-800), var(--velvet-900) 60%, var(--navy-900));
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr auto;
  align-items: center;
  gap: 40px;
}
.bravo-dance .bd-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 300px at 90% 0%, rgba(230,183,96,0.18), transparent 60%),
    radial-gradient(ellipse 400px 200px at 0% 100%, rgba(246,239,225,0.08), transparent 60%);
  pointer-events: none;
}
.bravo-dance .bd-cta > * { position: relative; z-index: 1; }
.bravo-dance .bd-cta h2 em { font-style: italic; color: var(--gold-300); }
.bravo-dance .bd-cta .sub {
  margin-top: 14px;
  color: rgba(246,239,225,0.78);
  font-size: 18px;
  max-width: 540px;
}
.bravo-dance .bd-cta .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.bravo-dance .bd-ticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.bravo-dance .bd-ticker .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
  animation: bd-pulse 2s infinite;
  box-shadow: 0 0 0 4px rgba(230,183,96,0.2);
}
@keyframes bd-pulse {
  0% { box-shadow: 0 0 0 0 rgba(230,183,96,0.4); }
  100% { box-shadow: 0 0 0 8px rgba(230,183,96,0); }
}

@media (max-width: 880px) {
  .bravo-dance .bd-cta { grid-template-columns: 1fr; padding: 48px 32px; }
  .bravo-dance .bd-cta .actions { justify-content: flex-start; }
}

/* ---------- FOOTER (for use in a Joomla Custom HTML module) ---------- */
.bravo-dance.bd-footer {
  background: var(--navy-900);
  color: rgba(246,239,225,.7);
  padding: 80px 0 32px;
  border-top: 1px solid var(--rule);
}
.bravo-dance .bd-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}
.bravo-dance .bd-footer h4 {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold-400);
  margin: 0 0 16px;
  font-weight: 600;
}
.bravo-dance .bd-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.bravo-dance .bd-footer a { font-size: 14px; color: rgba(246,239,225,.7); }
.bravo-dance .bd-footer a:hover { color: var(--cream-50); }
.bravo-dance .bd-footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--rule); margin-top: 56px; padding-top: 24px;
  font-size: 12px; color: rgba(246,239,225,.5);
}

@media (max-width: 880px) {
  .bravo-dance .bd-footer-grid { grid-template-columns: 1fr 1fr; }
  .bravo-dance .bd-footer-bottom { flex-direction: column; gap: 12px; }
}

/* ---------- CLASS PAGE / DETAIL ---------- */
.bravo-dance .bd-crumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.6);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.bravo-dance .bd-crumb a { color: var(--gold-400); }
.bravo-dance .bd-crumb .sep { opacity: 0.4; }

.bravo-dance .bd-meta-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 32px 0;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.bravo-dance .bd-meta-row .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.55);
  display: block;
  margin-bottom: 6px;
}
.bravo-dance .bd-meta-row .val {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--cream-50);
  line-height: 1.1;
}

.bravo-dance .bd-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.bravo-dance .bd-bullets li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.bravo-dance .bd-bullets li:last-child { border-bottom: none; }
.bravo-dance .bd-bullets .marker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold-400);
  padding-top: 4px;
  width: 32px;
}
.bravo-dance .bd-bullets .body strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  display: block;
  margin-bottom: 4px;
}
.bravo-dance .bd-bullets .body p { margin: 0; color: rgba(246,239,225,0.7); font-size: 15px; line-height: 1.55; }

.bravo-dance .bd-perf {
  background: linear-gradient(135deg, var(--velvet-800), var(--velvet-900) 60%, var(--navy-900));
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.bravo-dance .bd-perf::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 600px 300px at 100% 0%, rgba(230,183,96,0.18), transparent 60%);
  pointer-events: none;
}
.bravo-dance .bd-perf > * { position: relative; z-index: 1; }
.bravo-dance .bd-perf h3 em { font-style: italic; color: var(--gold-300); }
.bravo-dance .bd-perf .perf-photo { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; }
.bravo-dance .bd-perf .perf-photo .ph { height: 100%; border-radius: var(--radius); }

@media (max-width: 880px) {
  .bravo-dance .bd-perf { grid-template-columns: 1fr; padding: 40px 28px; }
}

.bravo-dance .bd-level-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.bravo-dance .bd-level-pill {
  border: 1px solid var(--rule);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  background: rgba(246,239,225,0.04);
}
.bravo-dance .bd-level-pill.is-primary {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
}

.bravo-dance .bd-related-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: rgba(246,239,225,0.04);
  gap: 10px;
  transition: all .15s ease;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.bravo-dance .bd-related-card:hover { border-color: var(--gold-400); transform: translateY(-2px); }
.bravo-dance .bd-related-card .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.bravo-dance .bd-related-card h4 { font-family: var(--font-display); font-size: 22px; margin: 0; font-weight: 500; }
.bravo-dance .bd-related-card p { margin: 0; font-size: 14px; color: rgba(246,239,225,0.66); }
.bravo-dance .bd-related-card .arrow { color: var(--gold-400); margin-top: auto; padding-top: 8px; }

/* ---------- INSTRUCTOR PAGE ---------- */
.bravo-dance .bd-tch-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 32px 64px -24px rgba(0,0,0,0.55);
}
.bravo-dance .bd-tch-portrait .ph { height: 100%; border-radius: var(--radius-lg); }
.bravo-dance .bd-tch-portrait .badge {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--velvet-800);
  color: var(--cream-50);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 10;
}
.bravo-dance .bd-tch-portrait .est {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: var(--cream-50);
  color: var(--navy-900);
  padding: 12px 16px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
}
.bravo-dance .bd-tch-portrait .est .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--velvet-800);
  letter-spacing: 0;
  line-height: 1;
}

.bravo-dance .bd-tch-role {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 18px;
}
.bravo-dance .bd-tch-role::before { content: ""; width: 32px; height: 1px; background: var(--gold-500); }
.bravo-dance .bd-tch-name {
  font-size: clamp(56px, 7.5vw, 108px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.bravo-dance .bd-tch-name em {
  display: block;
  font-style: italic;
  color: var(--gold-400);
  font-weight: 400;
}
.bravo-dance .bd-tch-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.25;
  color: rgba(246,239,225,0.85);
  margin-bottom: 32px;
  max-width: 540px;
}
.bravo-dance .bd-tch-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 32px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.bravo-dance .bd-tch-stats .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.55);
  display: block;
  margin-bottom: 6px;
}
.bravo-dance .bd-tch-stats .val {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--cream-50);
  line-height: 1.05;
}
.bravo-dance .bd-tch-stats .val em { color: var(--gold-400); font-style: italic; }

@media (max-width: 600px) {
  .bravo-dance .bd-tch-stats { grid-template-columns: 1fr 1fr; }
}

.bravo-dance .bd-creds-list { display: flex; flex-direction: column; }
.bravo-dance .bd-creds-row {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 32px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}
.bravo-dance .bd-creds-row:first-child { border-top: 1px solid var(--rule); }
.bravo-dance .bd-creds-row .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.55);
}
.bravo-dance .bd-creds-row .v {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.15;
  color: var(--cream-50);
}
.bravo-dance .bd-creds-row .v small {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: rgba(246,239,225,0.6);
  margin-top: 6px;
  letter-spacing: 0;
}
.bravo-dance .bd-creds-row .yr {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold-400);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .bravo-dance .bd-creds-row { grid-template-columns: 1fr; gap: 8px; }
}

.bravo-dance .bd-disc-card {
  padding: 22px 22px 20px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: rgba(246,239,225,0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}
.bravo-dance .bd-disc-card .name { font-family: var(--font-display); font-size: 26px; line-height: 1.05; }
.bravo-dance .bd-disc-card .note { font-size: 13px; color: rgba(246,239,225,0.66); margin: 0; line-height: 1.5; flex: 1; }
.bravo-dance .bd-disc-card .dots { display: flex; gap: 4px; align-items: center; }
.bravo-dance .bd-disc-card .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); }
.bravo-dance .bd-disc-card .dot.muted { background: rgba(246,239,225,0.16); }
.bravo-dance .bd-disc-card .level {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.5);
  margin-left: 6px;
}

.bravo-dance .bd-tch-quote {
  position: relative;
  padding: 80px 0;
}
.bravo-dance .bd-tch-quote::before {
  content: "“";
  font-family: var(--font-display);
  font-style: italic;
  font-size: 280px;
  line-height: 1;
  position: absolute;
  top: -20px;
  left: -20px;
  color: rgba(230, 183, 96, 0.12);
  pointer-events: none;
}
.bravo-dance .bd-tch-quote blockquote {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.15;
  color: var(--cream-50);
  max-width: 920px;
}
.bravo-dance .bd-tch-quote blockquote em { color: var(--gold-400); }
.bravo-dance .bd-tch-quote cite {
  display: block;
  margin-top: 32px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.bravo-dance .bd-rep-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.bravo-dance .bd-rep-row:last-child { border-bottom: 1px solid var(--rule); }
.bravo-dance .bd-rep-row .yr {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gold-400);
}
.bravo-dance .bd-rep-row .title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.005em;
}
.bravo-dance .bd-rep-row .title small {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(246,239,225,0.6);
  margin-top: 4px;
}
.bravo-dance .bd-rep-row .role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.5);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .bravo-dance .bd-rep-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
}

/* ---------- COMPACT BS5 GRID HELPERS (matches Bootstrap row/col patterns) ---------- */
.bravo-dance .bd-row { display: flex; flex-wrap: wrap; gap: 18px; }
.bravo-dance .bd-row.g-3 { gap: 16px; }
.bravo-dance .bd-row.g-4 { gap: 24px; }
.bravo-dance .bd-row.g-5 { gap: 32px; }
.bravo-dance .bd-row > * { flex: 1 1 0; min-width: 0; }

/* Focus */
.bravo-dance :focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ███████████████████████████████████████████████████████████
   ███  SECTION: 5/6 · ARTICLE PLAYBILL PANEL — RE-SCOPED to skip dance-system pages
   ███  (was: bravo-about.css)
   ███████████████████████████████████████████████████████████ */

/* =========================================================
   Bravo Theater — "About Us" article restyle
   Playbill system to match bravo-reviews.css / bravo-donation.css:
   deep navy panel + warm gold + cream, Bodoni Moda / Manrope /
   JetBrains Mono.

   ZERO HTML EDITS. Scoped to
     body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero))
   so it applies to every Joomla com_content article EXCEPT pages
   built with the dance design system (.bravo-dance / .bd-* / .hero
   markup, e.g. /en/classes/dance) — those keep their own styling.
   (History: originally locked to body.itemid-2626; that lock was
   removed, which broke the dance page; this :not(:has(...)) scope
   is the 2026-06-04 fix.)

   Load AFTER the template CSS (Custom CSS / template override /
   "Custom HTML or CSS" plugin).
   ========================================================= */

/* Google Fonts @import removed: JSpeed mangles the ";" inside the css2 URL and the
   resulting garbage swallows the NEXT rule in the bundle. Fonts (Bodoni Moda /
   Manrope / JetBrains Mono) are already loaded site-wide by the template assets. */

/* =========================================================
   THE PANEL  (turns the article into a navy playbill card on the
   site's royal-blue showcase background)
   ========================================================= */
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) {
  --navy-900: #0a1a3a;
  --navy-800: #0f2451;
  --cream-50: #fbf6ea;
  --cream-100: #f6efe1;
  --gold-700: #b6873a;
  --gold-500: #e6b760;
  --gold-400: #f0c873;
  --gold-300: #f7dca0;
  --velvet-800: #6b1d27;

  --fg: rgba(246, 239, 225, 0.92);
  --muted: rgba(246, 239, 225, 0.74);
  --label: rgba(246, 239, 225, 0.55);
  --rule: rgba(246, 239, 225, 0.16);

  --font-display: "Bodoni Moda", "Playfair Display", Georgia, serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* widened per request: panel runs as wide as the site's widest container */
  max-width: var(--max-wide, 1440px) !important;
  width: 100% !important;
  margin: 6px auto 52px !important;
  background: var(--navy-900) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 22px !important;
  /* comfortable inner gutters on a now-wide panel */
  padding: clamp(32px, 4vw, 64px) clamp(22px, 3.2vw, 56px) !important;
  box-shadow: 0 36px 80px -44px rgba(0, 0, 0, 0.85) !important;
  color: var(--fg) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) * { box-sizing: border-box; }

/* =========================================================
   TAGS ROW  (Joomla .tags .btn-info chips -> gold playbill chips)
   ========================================================= */
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .tags {
  list-style: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 30px !important;
  padding: 0 0 26px !important;
  border-bottom: 1px solid var(--rule) !important;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .tags li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .tags .btn,
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .tags a {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  line-height: 1 !important;
  color: var(--gold-400) !important;
  background: rgba(230, 183, 96, 0.08) !important;
  border: 1px solid rgba(230, 183, 96, 0.42) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .tags a:hover {
  background: var(--gold-500) !important;
  color: var(--navy-900) !important;
  border-color: var(--gold-500) !important;
}

/* =========================================================
   BODY TYPOGRAPHY
   ========================================================= */
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body {
  font-size: 16.5px;
  line-height: 1.7;
}

/* section headers (h2) — Bodoni with a gold diamond + hairline rule */
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body h2 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: clamp(23px, 2.8vw, 32px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--cream-50) !important;
  margin: 48px 0 16px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--rule) !important;
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body h2::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 9px;
  height: 9px;
  background: var(--gold-500) !important;
  transform: rotate(45deg);
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body h3 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: clamp(19px, 2.2vw, 24px) !important;
  color: var(--cream-50) !important;
  margin: 32px 0 12px !important;
}

/* page title = the FIRST h2 ("About Bravo Theater") — bigger, no rule/diamond */
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body > h2:first-of-type {
  font-size: clamp(34px, 5vw, 54px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body > h2:first-of-type::before {
  display: none !important;
}

/* paragraphs */
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body p {
  color: var(--fg) !important;
  margin: 0 0 18px !important;
  text-wrap: pretty;
}
/* lead paragraph (right after the title) reads larger */
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body > h2:first-of-type + p {
  font-size: clamp(18px, 2vw, 21px) !important;
  line-height: 1.6 !important;
  color: var(--cream-50) !important;
}

/* emphasis + the Sukhomlinsky quote */
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body em {
  color: var(--gold-300) !important;
  font-style: italic;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body strong {
  color: var(--cream-50) !important;
  font-weight: 600;
}

body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body a {
  color: var(--gold-400) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body a:hover { color: var(--gold-300) !important; }

/* =========================================================
   IMAGE  (frame it like a playbill still)
   ========================================================= */
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 28px auto !important;
  border-radius: 16px !important;
  border: 1px solid var(--rule) !important;
  box-shadow: 0 26px 56px -30px rgba(0, 0, 0, 0.75) !important;
}

/* =========================================================
   LISTS  (gold diamond markers)
   ========================================================= */
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body ul {
  list-style: none !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body ul li {
  position: relative;
  margin: 0 !important;
  padding-left: 26px !important;
  color: var(--fg) !important;
  line-height: 1.55;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 7px;
  height: 7px;
  background: var(--gold-500);
  transform: rotate(45deg);
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body ol {
  margin: 0 0 18px !important;
  padding-left: 22px !important;
  color: var(--fg) !important;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body ol li { margin: 0 0 10px !important; }
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body ol li::marker {
  color: var(--gold-400);
  font-family: var(--font-mono);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 600px) {
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) { border-radius: 16px !important; }
}

/* =========================================================
   MOBILE TIGHTENING (appended last so it wins the cascade)
   The template's own mobile gutters already cost ~120px at
   390px viewports - relax the panel padding and type scale
   so the content column breathes.
   ========================================================= */
@media (max-width: 600px) {
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) {
    /* comfortable inner gutter so copy never touches the card edge,
       paired with the ancestor-collapse below so the card itself can
       sit close to the screen edges */
    padding: 22px 18px !important;
    margin: 8px auto 32px !important;
    border-radius: 16px !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .tags {
    gap: 6px !important;
    margin: 0 0 20px !important;
    padding: 0 0 16px !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body { font-size: 15.5px; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body > h2:first-of-type {
    font-size: 27px !important;
    margin: 0 0 16px !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body h2 {
    font-size: 21px !important;
    margin: 32px 0 12px !important;
    padding: 0 0 10px !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body > h2:first-of-type + p {
    font-size: 16.5px !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body img {
    border-radius: 12px !important;
    margin: 18px auto !important;
  }
}

/* =========================================================
   GANTRY / RT_REMNANT WRAPPER RESET  (full-bleed the panel)
   The Remnant template nests the component inside Gantry holders
   (.rt-container / .rt-grid-* / .rt-block / #rt-main(body)) plus
   Joomla's .item-page / .com-content wrappers. Each adds its own
   horizontal padding, gutter margins and/or a max-width, so the
   playbill panel can't reach the screen edges - leaving dead space
   on the left and right.

   Neutralise that side spacing, but only on the wrappers that
   actually contain THIS article, so the site header, footer and
   every other page are left untouched. The panel itself keeps its
   own max-width:1440px + margin:auto, so it stays centred and never
   runs uncomfortably wide - it simply stops being boxed-in by the
   template gutters.

   DEFENSIVE GUARDS (so a sidebar layout is never broken):
     1. body ... :not(:has( <sidebar selectors> ))  - if the page
        renders ANY Gantry/Joomla sidebar position, the whole reset
        bails and the template keeps its normal gutters. A sidebar
        layout (content + aside sharing a row) is left fully intact.
     2. the grid block is matched as .rt-grid-12 ONLY - i.e. the
        full-width 12-column block. When a sidebar is present Gantry
        emits a PARTIAL content column (.rt-grid-8 / -9 / -10), which
        is deliberately NOT matched, so even if guard 1 is bypassed
        a shared-row column never gets yanked to full width.
     3. still skips the dance design-system pages (.bravo-dance /
        .bd-section / .hero).
   (No :has() is nested inside another :has() - that's invalid CSS
   and the whole rule would be dropped.)
   ========================================================= */
body.com_content:not(:has(
    .bravo-dance, .bd-section, .hero,
    [id^="rt-sidebar"], [class*="rt-sidebar"], .sidebar, .sidebar-a, .sidebar-b,
    .item-page.sidebar-left, .item-page.sidebar-right, .has-sidebar
  ))
  :is(
    #rt-main, #rt-mainbody, #rt-content, #rt-transition,
    .rt-container, .rt-content, .rt-block, .rt-grid-12,
    .platform-content, .component-content, .componentheading,
    .item-page, .com-content, .blog, .blog-featured
  ):has(.com-content-article) {
  max-width: none !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   MOBILE FULL-BLEED  (kills the residual wide side margins)
   The fixed wrapper list above misses some holders on small
   screens (Bootstrap .row/.col-* gutters, generic .container
   padding, nested Gantry rows). On mobile, collapse the side
   padding/margin on EVERY ancestor of THIS article so the card
   can sit close to the screen edges - still sidebar-guarded and
   still skips the dance design-system pages. The card keeps its
   own 18px inner gutter, so copy never touches the edge.
   ========================================================= */
@media (max-width: 600px) {
  body.com_content:not(:has(
      .bravo-dance, .bd-section, .hero,
      [id^="rt-sidebar"], [class*="rt-sidebar"], .sidebar, .sidebar-a, .sidebar-b,
      .item-page.sidebar-left, .item-page.sidebar-right, .has-sidebar
    )) *:has(.com-content-article) {
    max-width: none !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ███████████████████████████████████████████████████████████
   ███  SECTION: 6/6 · JCOMMENTS / REVIEWS RESTYLE (scoped to #jc / .jc)
   ███  (was: bravo-reviews.css)
   ███████████████████████████████████████████████████████████ */

/* =========================================================
   Bravo Theater — JComments ("Reviews") restyle  ·  v2
   Rewritten against the LIVE bravotheater.com markup
   (:is(#jc,.jc) › #comments + .jcomment-container-form › #comments-form).

   Matches the Bravo playbill design system used by
   bravo-donation.css: deep navy + warm gold + cream paper,
   Bodoni Moda / Manrope / JetBrains Mono.

   ZERO HTML EDITS REQUIRED
   ------------------------
   Everything is scoped under JComments' real wrappers and its
   long-standing hooks as they actually ship on the site:

     :is(#jc,.jc)                       (outer wrapper — token scope)
       #comments               (header + list + pagination)
         #comments-list .even/.odd #comment-item-NNN
           .rbox › .comment-avatar(.comment-avatar-default)
                 › .comment-box #comment-NNN
                     .comments-vote (a.vote-good / a.vote-poor + span count)
                     .comment-author-info › .comment-author
                     .comment-date
                     .comment-body  (+ img.jcomment-image)
                     .reactions-trigger · .reactions-given-total
                     .comments-buttons (Quote)
         #nav-top / #nav-bottom (.activepage / .page)
         #comments-list-footer  (a.refresh)
       .jcomment-container-form
         h4 ("Add comment")
         #comments-form.jcomment-form
           p › .comments-form-title-group (label + input)
           .sameavatar + .comments-area > textarea
           #jcomment_recaptcha_container
           #comments-form-buttons › .btn-jcomment

   Load AFTER the template CSS (Custom CSS / template override /
   "Custom HTML or CSS" plugin).

   TONE: default is the dark "Stage Navy" treatment.
   Add .v-paper to :is(#jc,.jc) for the light "Playbill Paper" tone,
   or .v-quiet for a flatter ruled-list look (no card surfaces).
   ========================================================= */

/* Google Fonts @import removed: JSpeed mangles the ";" inside the css2 URL and the
   resulting garbage swallows the NEXT rule in the bundle. Fonts (Bodoni Moda /
   Manrope / JetBrains Mono) are already loaded site-wide by the template assets. */

/* =========================================================
   TOKENS  (set on the outer scope root so BOTH the comments
   block AND the add-comment form — which is a sibling of
   #comments — inherit them)
   ========================================================= */
:is(#jc,.jc) {
  --navy-900: #0a1a3a;
  --navy-800: #0f2451;
  --navy-700: #163067;
  --navy-600: #1f3f80;

  --cream-50:  #fbf6ea;
  --cream-100: #f6efe1;
  --cream-200: #ecdfc2;

  --gold-700: #b6873a;
  --gold-600: #d3a04a;
  --gold-500: #e6b760;
  --gold-400: #f0c873;
  --gold-300: #f7dca0;

  --velvet-900: #4a121a;
  --velvet-800: #6b1d27;
  --velvet-700: #8a2a35;

  --ink-900: #0a0c14;
  --ink-700: #1d2030;
  --ink-500: #4a4f63;
  --ink-300: #8d92a6;

  --font-display: "Bodoni Moda", "Playfair Display", Georgia, serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ----- STAGE NAVY tone (default) ----- */
  --surface: var(--navy-800);
  --surface-2: var(--navy-700);
  --fg: var(--cream-50);
  --fg-muted: rgba(246, 239, 225, 0.72);
  --label: rgba(246, 239, 225, 0.6);
  --rule: rgba(246, 239, 225, 0.16);
  --rule-strong: rgba(246, 239, 225, 0.3);
  --field-bg: rgba(246, 239, 225, 0.05);
  --field-fg: var(--cream-50);
  --field-ph: rgba(246, 239, 225, 0.42);
  --field-rule: rgba(246, 239, 225, 0.22);
  --section-bg: rgba(246, 239, 225, 0.04);
  --card-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.7);
  --avatar-ring: rgba(230, 183, 96, 0.5);

  display: block;
  font-family: var(--font-body);
  color: var(--fg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  max-width: 1080px;
  margin: 0 auto;
}
:is(#jc,.jc) * { box-sizing: border-box; }

/* ----- PAPER tone (opt-in: add class .v-paper to #jc) ----- */
:is(#jc,.jc).v-paper {
  --surface: var(--cream-50);
  --surface-2: #ffffff;
  --fg: var(--ink-900);
  --fg-muted: var(--ink-500);
  --label: var(--ink-500);
  --rule: rgba(10, 12, 20, 0.12);
  --rule-strong: rgba(10, 12, 20, 0.24);
  --field-bg: #ffffff;
  --field-fg: var(--ink-900);
  --field-ph: var(--ink-300);
  --field-rule: rgba(10, 12, 20, 0.18);
  --section-bg: rgba(10, 26, 58, 0.025);
  --card-shadow: 0 22px 50px -34px rgba(10, 26, 58, 0.5);
  --avatar-ring: var(--gold-600);

  background: var(--cream-100);
  border: 1px solid rgba(10, 12, 20, 0.1);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.4vw, 48px);
  box-shadow: 0 30px 70px -34px rgba(10, 26, 58, 0.55);
}

/* =========================================================
   "Comments" HEADER  (top of #comments)
   ========================================================= */
:is(#jc,.jc) #comments > h3,
:is(#jc,.jc) #comments > h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--fg);
  font-size: clamp(24px, 3vw, 34px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 18px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--rule);
}
:is(#jc,.jc) #comments > h3::before,
:is(#jc,.jc) #comments > h4::before {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  background: var(--gold-500);
  transform: rotate(45deg);
}

/* =========================================================
   LIST RESET
   ========================================================= */
:is(#jc,.jc) #comments-list,
:is(#jc,.jc) .comments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* =========================================================
   THE COMMENT CARD  ( .even / .odd  #comment-item-NNN )
   ========================================================= */
:is(#jc,.jc) #comments-list > .even,
:is(#jc,.jc) #comments-list > .odd,
:is(#jc,.jc) div[id^="comment-item-"] {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.2vw, 26px);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  margin: 0;
}
/* thin gold playbill ribbon down the left edge */
:is(#jc,.jc) div[id^="comment-item-"]::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold-400), var(--velvet-800));
  z-index: 1;
}
/* kill JComments' default zebra backgrounds */
:is(#jc,.jc) .even,
:is(#jc,.jc) .odd { background: var(--surface); }

/* =========================================================
   .rbox  — avatar + comment-box layout
   ========================================================= */
:is(#jc,.jc) .rbox {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
:is(#jc,.jc) .rbox > .clear { display: none; }

/* ----- avatar (default = empty .comment-avatar-default div) ----- */
:is(#jc,.jc) .comment-avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
}
:is(#jc,.jc) .comment-avatar img,
:is(#jc,.jc) .comment-avatar-default {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--avatar-ring);
  background: var(--surface-2);
  box-shadow: 0 0 0 4px rgba(230, 183, 96, 0.08);
  display: block;
}
/* draw a simple gold silhouette in the empty default avatar */
:is(#jc,.jc) .comment-avatar-default {
  background-image:
    radial-gradient(circle at 50% 38%, var(--gold-500) 0 22%, transparent 23%),
    radial-gradient(ellipse 58% 42% at 50% 104%, var(--gold-500) 0 60%, transparent 61%);
  background-repeat: no-repeat;
}

/* =========================================================
   .comment-box  — header / body / footer via flex-wrap order
   source order: vote · author-info · date · body · reactions ·
   reactions-total · buttons
   ========================================================= */
:is(#jc,.jc) .comment-box {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 0;
  position: relative;
}

/* author name (lives inside .comment-author-info) */
:is(#jc,.jc) .comment-author-info {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}
:is(#jc,.jc) .comment-author,
:is(#jc,.jc) .comment-author a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  line-height: 1.2;
}
:is(#jc,.jc) .comment-author a:hover { color: var(--gold-400); }
:is(#jc,.jc).v-paper .comment-author a:hover { color: var(--gold-700); }

/* date */
:is(#jc,.jc) .comment-date {
  order: 2;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--label);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
:is(#jc,.jc) .comment-date i,
:is(#jc,.jc) .comment-date .glyphicon { display: none; }
:is(#jc,.jc) .comment-date::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
}

/* =========================================================
   COMMENT BODY  ( full-width row, with a rule beneath )
   ========================================================= */
:is(#jc,.jc) .comment-body,
:is(#jc,.jc) [id^="comment-body-"] {
  order: 3;
  flex: 0 0 100%;
  width: 100%;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--fg-muted);
  margin: 12px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  text-wrap: pretty;
  word-break: break-word;
}
:is(#jc,.jc) .comment-body p { margin: 0 0 12px; }
:is(#jc,.jc) .comment-body p:last-child { margin-bottom: 0; }
:is(#jc,.jc) .comment-body a {
  color: var(--gold-400);
  text-decoration: underline;
  text-underline-offset: 2px;
}
:is(#jc,.jc).v-paper .comment-body a { color: var(--gold-700); }

/* images attached to a comment — framed as playbill stills */
:is(#jc,.jc) .comment-body img,
:is(#jc,.jc) .comment-body .jcomment-image,
:is(#jc,.jc) .comment-body .img {
  display: block;
  max-width: min(420px, 100%);
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  margin: 14px 0 4px;
  box-shadow: 0 16px 36px -22px rgba(0, 0, 0, 0.6);
}

/* quoted text (reply-with-quote) */
:is(#jc,.jc) .comment-body blockquote,
:is(#jc,.jc) blockquote {
  margin: 4px 0 14px;
  padding: 12px 18px;
  border-left: 3px solid var(--gold-500);
  background: var(--section-bg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--fg-muted);
  font-style: italic;
}
:is(#jc,.jc) blockquote b { color: var(--gold-400); font-style: normal; }
:is(#jc,.jc).v-paper blockquote b { color: var(--gold-700); }

/* =========================================================
   FOOTER ROW  — votes · reactions · quote
   ========================================================= */

/* the whole vote cluster ( .comments-vote › #comment-vote-holder ) */
:is(#jc,.jc) .comments-vote {
  order: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
}
:is(#jc,.jc) .comments-vote > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* the vote BUTTONS are EMPTY <a class="vote-good"> / <a class="vote-poor">.
   The running tally ships as <span class="vote-good">N</span> sharing the
   same class — so we target the links by element + give them a glyph. */
:is(#jc,.jc) a.vote-good,
:is(#jc,.jc) a.vote-poor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  border: 1px solid var(--field-rule);
  border-radius: var(--radius-pill);
  color: var(--label);
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
:is(#jc,.jc) a.vote-good::before { content: "\25B2"; }   /* ▲ */
:is(#jc,.jc) a.vote-poor::before { content: "\25BC"; }   /* ▼ */
:is(#jc,.jc) a.vote-good:hover {
  color: var(--gold-400);
  border-color: var(--gold-500);
  background: rgba(230, 183, 96, 0.12);
}
:is(#jc,.jc) a.vote-poor:hover {
  color: var(--velvet-700);
  border-color: var(--velvet-700);
  background: rgba(138, 42, 53, 0.12);
}
:is(#jc,.jc).v-paper a.vote-poor:hover { color: var(--velvet-800); border-color: var(--velvet-800); }

/* the tally — a <span class="vote-good"> (NOT a link) */
:is(#jc,.jc) span.vote-good,
:is(#jc,.jc) span.vote-poor,
:is(#jc,.jc) span[id^="comment-vote-"] {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold-400);
  padding: 0 4px;
  border: 0;
  background: none;
}
:is(#jc,.jc).v-paper span.vote-good { color: var(--gold-700); }

/* reactions ("Like" trigger + the running total) */
:is(#jc,.jc) .reactions-trigger {
  order: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
  padding: 6px 13px;
  border: 1px solid var(--field-rule);
  border-radius: var(--radius-pill);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
:is(#jc,.jc) .reactions-trigger:hover {
  color: var(--fg);
  border-color: var(--gold-500);
  background: rgba(230, 183, 96, 0.1);
}
:is(#jc,.jc) .reactions-trigger img {
  width: 15px;
  height: 15px;
  display: inline-block;
}
:is(#jc,.jc) .reactions-given-total {
  order: 6;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
}
:is(#jc,.jc) .reactions-given-total:empty { display: none; }

/* quote / reply buttons cluster */
:is(#jc,.jc) .comments-buttons {
  order: 7;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
:is(#jc,.jc) .comments-buttons a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
  text-decoration: none;
  padding: 6px 13px;
  border: 1px solid var(--field-rule);
  border-radius: var(--radius-pill);
  line-height: 1;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
:is(#jc,.jc) .comments-buttons a:hover {
  color: var(--fg);
  border-color: var(--gold-500);
  background: rgba(230, 183, 96, 0.1);
}

/* push the footer cluster onto its own line beneath the body rule,
   with a little breathing room */
:is(#jc,.jc) .comment-body { margin-bottom: 16px; }

/* =========================================================
   PAGINATION  ( #nav-top / #nav-bottom  ·  .activepage / .page )
   ========================================================= */
:is(#jc,.jc) #nav-top,
:is(#jc,.jc) #nav-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 22px 0;
}
:is(#jc,.jc) #nav-top { margin-top: 0; }
:is(#jc,.jc) #nav-top span,
:is(#jc,.jc) #nav-bottom span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--field-rule);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-muted);
  background: var(--field-bg);
  cursor: pointer;
  transition: all .15s ease;
}
:is(#jc,.jc) .page:hover,
:is(#jc,.jc) .hoverpage {
  border-color: var(--gold-500) !important;
  color: var(--fg) !important;
  background: rgba(230, 183, 96, 0.08) !important;
}
:is(#jc,.jc) .activepage,
:is(#jc,.jc) .activepage b {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
  font-weight: 600;
}
:is(#jc,.jc) .activepage { cursor: default; }

/* Paper tone: --field-bg is pure white, which all but vanishes on the cream
   card — give the pager chips a tinted fill + firmer border so they read. */
:is(#jc,.jc).v-paper #nav-top span,
:is(#jc,.jc).v-paper #nav-bottom span {
  background: #ffffff;
  border-color: rgba(10, 26, 58, 0.28);
  color: var(--ink-700);
  box-shadow: 0 1px 0 rgba(10, 26, 58, 0.06);
}
:is(#jc,.jc).v-paper .activepage,
:is(#jc,.jc).v-paper .activepage b {
  background: var(--gold-500);
  border-color: var(--gold-600);
  color: var(--navy-900);
}

/* "Refresh comments list" footer */
:is(#jc,.jc) #comments-list-footer {
  text-align: center;
  margin: 18px 0 6px;
}
:is(#jc,.jc) #comments-list-footer a.refresh,
:is(#jc,.jc) a.refresh {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--field-rule);
  border-radius: var(--radius-pill);
  transition: all .15s ease;
}
:is(#jc,.jc) #comments-list-footer a.refresh::before { content: "\21BB"; font-size: 13px; }
:is(#jc,.jc) #comments-list-footer a.refresh:hover {
  border-color: var(--gold-500);
  color: var(--fg);
}

/* =========================================================
   ADD-COMMENT — the card is .jcomment-container-form
   (wraps the "Add comment" h4 AND #comments-form)
   ========================================================= */
:is(#jc,.jc) .jcomment-container-form {
  display: block;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--card-shadow);
  margin-top: 26px;
  position: relative;
  overflow: hidden;
}
:is(#jc,.jc) .jcomment-container-form::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--velvet-800), var(--gold-500) 55%, var(--gold-300));
}
/* "Add comment" heading */
:is(#jc,.jc) .jcomment-container-form > h3,
:is(#jc,.jc) .jcomment-container-form > h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(21px, 2.4vw, 28px);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 13px;
}
:is(#jc,.jc) .jcomment-container-form > h3::before,
:is(#jc,.jc) .jcomment-container-form > h4::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--gold-500);
  transform: rotate(45deg);
}
/* the empty #addcomments anchor JComments injects */
:is(#jc,.jc) #addcomments { display: block; height: 0; }

/* =========================================================
   THE FORM  ( #comments-form.jcomment-form )
   ========================================================= */
:is(#jc,.jc) #comments-form { display: block; margin: 0; }
:is(#jc,.jc) #comments-form > p { margin: 0 0 18px; }

/* each labelled control ships in .comments-form-title-group;
   text-field groups stack label-over-input, checkbox groups go inline */
:is(#jc,.jc) .comments-form-title-group {
  display: block;
}
:is(#jc,.jc) .comments-form-title-group:has(input[type="checkbox"]),
:is(#jc,.jc) .comments-form-title-group:has(input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* labels */
:is(#jc,.jc) #comments-form label,
:is(#jc,.jc) .comments-form-title-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--label);
  margin: 0 0 8px;
}
/* the "required" flag on a label */
:is(#jc,.jc) .comments-form-title-label-required {
  color: var(--velvet-700);
  margin-left: 8px;
  font-size: 9px;
  letter-spacing: 0.16em;
}
:is(#jc,.jc).v-paper .comments-form-title-label-required { color: var(--velvet-800); }

/* checkbox-group labels go quiet + inline (no mono caps)
   — scoped through #comments-form so it outranks ":is(#jc,.jc) #comments-form label" */
:is(#jc,.jc) #comments-form .comments-form-title-group:has(input[type="checkbox"]) label,
:is(#jc,.jc) #comments-form .comments-form-title-group:has(input[type="radio"]) label {
  display: inline;
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-muted);
  cursor: pointer;
}
/* "Accept privacy policy" reads as a link */
:is(#jc,.jc) .comments-form-privacy {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--gold-400) !important;
  cursor: pointer;
}
:is(#jc,.jc).v-paper .comments-form-privacy { color: var(--gold-700) !important; }

/* fields */
:is(#jc,.jc) #comments-form input[type="text"],
:is(#jc,.jc) #comments-form input[type="email"],
:is(#jc,.jc) #comments-form input[type="url"],
:is(#jc,.jc) #comments-form input[type="password"],
:is(#jc,.jc) #comments-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--field-fg);
  background: var(--field-bg);
  border: 1px solid var(--field-rule);
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
:is(#jc,.jc) #comments-form textarea,
:is(#jc,.jc) #comments-form-comment {
  min-height: 150px;
  resize: vertical;
  display: block;
}
:is(#jc,.jc) #comments-form input::placeholder,
:is(#jc,.jc) #comments-form textarea::placeholder { color: var(--field-ph); opacity: 1; }
:is(#jc,.jc) #comments-form input:hover,
:is(#jc,.jc) #comments-form textarea:hover { border-color: var(--rule-strong); }
:is(#jc,.jc) #comments-form input:focus,
:is(#jc,.jc) #comments-form textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(230, 183, 96, 0.28);
  background: var(--surface-2);
}
:is(#jc,.jc).v-paper #comments-form input:focus,
:is(#jc,.jc).v-paper #comments-form textarea:focus { background: #fff; }

/* keep autofill from painting fields white on the dark tone */
:is(#jc,.jc):not(.v-paper) #comments-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--cream-50);
  caret-color: var(--cream-50);
  -webkit-box-shadow: 0 0 0 1000px var(--navy-700) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* the textarea ships with a .sameavatar default-avatar beside it —
   hide it so the comment field runs full width */
:is(#jc,.jc) .sameavatar { display: none; }
:is(#jc,.jc) .comments-area { display: block; }

/* checkboxes */
:is(#jc,.jc) #comments-form input[type="checkbox"],
:is(#jc,.jc) #comments-form input[type="radio"] {
  width: 17px;
  height: 17px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--gold-500);
}
:is(#jc,.jc).v-paper #comments-form input[type="checkbox"] { accent-color: var(--velvet-800); }

/* BBCode / smiley editor toolbar JComments builds above the textarea */
:is(#jc,.jc) #comments-form .editor-toolbar,
:is(#jc,.jc) #comments-form .bbcode,
:is(#jc,.jc) .jcomment-editor-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 8px;
  background: var(--field-bg);
  border: 1px solid var(--field-rule);
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
:is(#jc,.jc) #comments-form .editor-toolbar a,
:is(#jc,.jc) .jcomment-editor-buttons a,
:is(#jc,.jc) .jcomment-editor-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: all .12s ease;
}
:is(#jc,.jc) .jcomment-editor-buttons a:hover {
  background: rgba(230, 183, 96, 0.14);
  color: var(--fg);
  border-color: var(--gold-500);
}

/* reCAPTCHA container */
:is(#jc,.jc) #jcomment_recaptcha_container {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 304px;
  max-width: 100%;
  height: 74px;
  padding: 0 16px;
  margin: 4px 0 18px;
  border: 1px solid var(--field-rule);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
}
:is(#jc,.jc) #jcomment_recaptcha_control {
  width: 24px; height: 24px;
  accent-color: var(--gold-500);
  margin: 0;
}
:is(#jc,.jc) #jcomment_recaptcha_label { margin: 0; cursor: pointer; }

/* =========================================================
   FORM BUTTONS  ( #comments-form-buttons › .btn-jcomment )
   ========================================================= */
:is(#jc,.jc) #comments-form-buttons {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}
:is(#jc,.jc) .btn-jcomment {
  display: inline-flex;
  cursor: pointer;
  border-radius: var(--radius-pill);
}
:is(#jc,.jc) .btn-jcomment > div,
:is(#jc,.jc) .btn-jcomment span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
:is(#jc,.jc) #comments-form-send {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gold-500);
  background: var(--gold-500);
  color: var(--navy-900);
  box-shadow: 0 12px 30px -14px rgba(230, 183, 96, 0.9);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
:is(#jc,.jc) #comments-form-send span { color: var(--navy-900); }
:is(#jc,.jc) #comments-form-send:hover {
  background: var(--gold-400);
  border-color: var(--gold-400);
  transform: translateY(-2px);
}
/* "Cancel" — ghost it */
:is(#jc,.jc) #comments-form-cancel {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--field-rule);
  color: var(--fg-muted);
}
:is(#jc,.jc) #comments-form-cancel:hover {
  border-color: var(--rule-strong);
  background: var(--field-bg);
}

/* validation / system messages */
:is(#jc,.jc) .formError,
:is(#jc,.jc) .invalid,
:is(#jc,.jc) .alert {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--velvet-700);
}
:is(#jc,.jc).v-paper .alert { color: var(--velvet-800); }

/* =========================================================
   QUIET tone  ( opt-in: .v-quiet )  — flat ruled list, no cards
   ========================================================= */
:is(#jc,.jc).v-quiet #comments-list > .even,
:is(#jc,.jc).v-quiet #comments-list > .odd,
:is(#jc,.jc).v-quiet div[id^="comment-item-"] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  padding: 24px 4px;
}
:is(#jc,.jc).v-quiet div[id^="comment-item-"]::before { display: none; }
:is(#jc,.jc).v-quiet #comments-list { gap: 0; }

/* =========================================================
   FOCUS RING
   ========================================================= */
:is(#jc,.jc) :focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 640px) {
  :is(#jc,.jc) .comment-date { margin-left: 0; flex-basis: 100%; margin-top: 4px; }
  :is(#jc,.jc) .comment-author-info { flex-basis: 100%; }
  :is(#jc,.jc) .comments-buttons { margin-left: 0; }
}

/* =========================================================
   PRODUCTION HARDENING
   ---------------------------------------------------------
   The Gantry "rt_remnant" template + JComments default skin
   ship their own rules for these hooks and (via the JSpeed
   concat/cache) may load after this file. The block below
   re-asserts the *contested* properties with !important and a
   doubled-id scope (specificity 2,0,0) so the playbill look
   wins regardless of cascade order — most notably the white
   default comment background and the template text colors.

   `var(--surface)` / `var(--fg*)` are used throughout, so this
   block automatically follows whichever tone is active
   (navy default / .v-paper / .v-quiet).
   ========================================================= */

/* --- wrap the whole thread in a deep-navy playbill panel so the cards
   read as a distinct dark module on the site's royal-blue showcase
   background (the default page bg sits too close to the card navy) --- */
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) {
  background: var(--navy-900) !important;
  padding: clamp(20px, 3vw, 40px) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--rule) !important;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.8) !important;
}

/* --- comment card surface (navy/paper) --- */
:is(#jc,.jc):is(#jc,.jc):not(.v-quiet) #comments-list > .even,
:is(#jc,.jc):is(#jc,.jc):not(.v-quiet) #comments-list > .odd,
:is(#jc,.jc):is(#jc,.jc):not(.v-quiet) div[id^="comment-item-"] {
  background: var(--surface) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--card-shadow) !important;
}
/* quiet tone: flat ruled list, no card */
:is(#jc,.jc):is(#jc,.jc).v-quiet #comments-list > .even,
:is(#jc,.jc):is(#jc,.jc).v-quiet #comments-list > .odd,
:is(#jc,.jc):is(#jc,.jc).v-quiet div[id^="comment-item-"] {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --- the inner wrappers must NOT carry the template's white fill --- */
:is(#jc,.jc):is(#jc,.jc) .rbox,
:is(#jc,.jc):is(#jc,.jc) .comment-box,
:is(#jc,.jc):is(#jc,.jc) .comment-author-info,
:is(#jc,.jc):is(#jc,.jc) .comments-vote,
:is(#jc,.jc):is(#jc,.jc) .comment-body,
:is(#jc,.jc):is(#jc,.jc) [id^="comment-body-"],
:is(#jc,.jc):is(#jc,.jc) [id^="comment-vote-holder-"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* --- text colours (template prints these dark; force playbill tones) --- */
:is(#jc,.jc):is(#jc,.jc) .comment-author,
:is(#jc,.jc):is(#jc,.jc) .comment-author a {
  color: var(--fg) !important;
}
/* comment body — brighter than the muted token so it reads cleanly on
   the navy panel (was cream@72% which looked grey) */
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) .comment-body,
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) [id^="comment-body-"] {
  color: rgba(246, 239, 225, 0.92) !important;
}
:is(#jc,.jc):is(#jc,.jc).v-paper .comment-body,
:is(#jc,.jc):is(#jc,.jc).v-paper [id^="comment-body-"] {
  color: var(--ink-700) !important;
}
:is(#jc,.jc):is(#jc,.jc) .comment-date {
  color: var(--label) !important;
}
:is(#jc,.jc):is(#jc,.jc) #comments > h4,
:is(#jc,.jc):is(#jc,.jc) .jcomment-container-form > h4 {
  color: var(--fg) !important;
}
/* form labels (template can print these dark = invisible on navy) */
:is(#jc,.jc):is(#jc,.jc) #comments-form label,
:is(#jc,.jc):is(#jc,.jc) .comments-form-title-label {
  color: var(--label) !important;
}
:is(#jc,.jc):is(#jc,.jc) .comments-form-title-group:has(input[type="checkbox"]) label {
  color: var(--fg-muted) !important;
}
:is(#jc,.jc):is(#jc,.jc) #comments-form .comments-form-privacy { color: var(--gold-400) !important; }
:is(#jc,.jc):is(#jc,.jc).v-paper #comments-form .comments-form-privacy { color: var(--gold-700) !important; }

/* --- comment photos: frame them, don't let template stretch them --- */
:is(#jc,.jc):is(#jc,.jc) .comment-body img,
:is(#jc,.jc):is(#jc,.jc) .comment-body img.jcomment-image,
:is(#jc,.jc):is(#jc,.jc) .comment-body img.img {
  display: block !important;
  width: auto !important;
  max-width: min(420px, 100%) !important;
  height: auto !important;
  float: none !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--rule) !important;
  margin: 14px 0 4px !important;
}

/* --- pager chips (default navy) --- */
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) #nav-top span:not(.activepage),
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) #nav-bottom span:not(.activepage) {
  background: var(--field-bg) !important;
  color: var(--fg-muted) !important;
  border: 1px solid var(--field-rule) !important;
}
:is(#jc,.jc):is(#jc,.jc).v-paper #nav-top span:not(.activepage),
:is(#jc,.jc):is(#jc,.jc).v-paper #nav-bottom span:not(.activepage) {
  background: #ffffff !important;
  color: var(--ink-700) !important;
  border: 1px solid rgba(10, 26, 58, 0.28) !important;
}
:is(#jc,.jc):is(#jc,.jc) #nav-top .activepage,
:is(#jc,.jc):is(#jc,.jc) #nav-bottom .activepage,
:is(#jc,.jc):is(#jc,.jc) .activepage,
:is(#jc,.jc):is(#jc,.jc) .activepage b {
  background: var(--gold-500) !important;
  border: 1px solid var(--gold-500) !important;
  color: var(--navy-900) !important;
}

/* --- form fields --- */
:is(#jc,.jc):is(#jc,.jc) #comments-form input[type="text"],
:is(#jc,.jc):is(#jc,.jc) #comments-form input[type="email"],
:is(#jc,.jc):is(#jc,.jc) #comments-form textarea {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--field-bg) !important;
  color: var(--field-fg) !important;
  border: 1px solid var(--field-rule) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 15px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
}
:is(#jc,.jc):is(#jc,.jc) #comments-form textarea {
  min-height: 150px !important;
  display: block !important;
}
:is(#jc,.jc):is(#jc,.jc) #comments-form input:focus,
:is(#jc,.jc):is(#jc,.jc) #comments-form textarea:focus {
  border-color: var(--gold-500) !important;
}
/* the JComments BBCode / smiley editor toolbar (built by JS after load) */
:is(#jc,.jc):is(#jc,.jc) .jcomment-editor-buttons,
:is(#jc,.jc):is(#jc,.jc) #comments-form .editor-buttons,
:is(#jc,.jc):is(#jc,.jc) #comments-form .editor-toolbar,
:is(#jc,.jc):is(#jc,.jc) #comments-form .bbcode {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 8px 0 0 !important;
  padding: 8px !important;
  background: var(--field-bg) !important;
  border: 1px solid var(--field-rule) !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}
:is(#jc,.jc):is(#jc,.jc) .jcomment-editor-buttons a,
:is(#jc,.jc):is(#jc,.jc) #comments-form .editor-buttons a,
:is(#jc,.jc):is(#jc,.jc) #comments-form .bbcode a {
  color: var(--fg-muted) !important;
  text-decoration: none !important;
}

/* --- add-comment card surface --- */
:is(#jc,.jc):is(#jc,.jc) .jcomment-container-form {
  background: var(--surface) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius-lg) !important;
  padding: clamp(22px, 3vw, 38px) !important;
  margin-top: 26px !important;
  position: relative !important;
  overflow: hidden !important;
}
/* gold playbill ribbon across the top of the add-comment card */
:is(#jc,.jc):is(#jc,.jc) .jcomment-container-form::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--velvet-800), var(--gold-500) 55%, var(--gold-300)) !important;
}
:is(#jc,.jc):is(#jc,.jc) .jcomment-container-form > h4 {
  font-family: var(--font-display) !important;
  font-size: clamp(21px, 2.4vw, 28px) !important;
  margin: 0 0 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--rule) !important;
}

/* --- submit / cancel buttons keep their pill treatment --- */
:is(#jc,.jc):is(#jc,.jc) #comments-form-send {
  background: var(--gold-500) !important;
  border: 1px solid var(--gold-500) !important;
  color: var(--navy-900) !important;
}
:is(#jc,.jc):is(#jc,.jc) #comments-form-send span { color: var(--navy-900) !important; }

/* =========================================================
   FORM FIELD HARDENING v2
   ---------------------------------------------------------
   On the live site the JComments "jcomment-form" skin paints the
   whole form (and/or its <p>/group rows) WHITE, and the editor
   wraps the textarea in a white surface — so the near-transparent
   --field-bg let every field read as a white blob with dim,
   centered labels. Force the form + its row wrappers transparent so
   the navy card shows, then give the fields an OPAQUE treatment with
   light text and left-aligned cream labels.
   ========================================================= */

/* kill the white form / row / editor-wrapper backgrounds */
:is(#jc,.jc):is(#jc,.jc) #comments-form,
:is(#jc,.jc):is(#jc,.jc) .jcomment-form,
:is(#jc,.jc):is(#jc,.jc) #comments-form > p,
:is(#jc,.jc):is(#jc,.jc) #comments-form .comments-form-title-group,
:is(#jc,.jc):is(#jc,.jc) #comments-form .comments-area,
:is(#jc,.jc):is(#jc,.jc) #comments-form fieldset {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* labels sit on the navy card — make them WHITE + left-aligned, and kill
   the template's white label strip behind them */
:is(#jc,.jc):is(#jc,.jc) #comments-form .comments-form-title-label,
:is(#jc,.jc):is(#jc,.jc) #comments-form > p > .comments-form-title-group > label:not(.comments-form-privacy) {
  display: block !important;
  width: auto !important;
  text-align: left !important;
  float: none !important;
  background: transparent !important;
  color: #ffffff !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
}
:is(#jc,.jc):is(#jc,.jc).v-paper #comments-form .comments-form-title-label,
:is(#jc,.jc):is(#jc,.jc).v-paper #comments-form > p > .comments-form-title-group > label:not(.comments-form-privacy) {
  color: var(--ink-700) !important;
}

/* the actual fields — OPAQUE so they never inherit the white blob.
   Navy default = recessed dark field; Paper alt keeps white. */
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) #comments-form input[type="text"],
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) #comments-form input[type="email"],
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) #comments-form textarea,
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) #comments-form #comments-form-comment {
  background: #0a1c40 !important;
  color: var(--cream-50) !important;
  -webkit-text-fill-color: var(--cream-50) !important;
  border: 1px solid rgba(246, 239, 225, 0.22) !important;
  border-radius: var(--radius-sm) !important;
}
:is(#jc,.jc):is(#jc,.jc).v-paper #comments-form input[type="text"],
:is(#jc,.jc):is(#jc,.jc).v-paper #comments-form input[type="email"],
:is(#jc,.jc):is(#jc,.jc).v-paper #comments-form textarea,
:is(#jc,.jc):is(#jc,.jc).v-paper #comments-form #comments-form-comment {
  background: #ffffff !important;
  color: var(--ink-900) !important;
  -webkit-text-fill-color: var(--ink-900) !important;
  border: 1px solid rgba(10, 26, 58, 0.2) !important;
}
:is(#jc,.jc):is(#jc,.jc) #comments-form input::placeholder,
:is(#jc,.jc):is(#jc,.jc) #comments-form textarea::placeholder {
  color: rgba(246, 239, 225, 0.42) !important;
  -webkit-text-fill-color: rgba(246, 239, 225, 0.42) !important;
}
:is(#jc,.jc):is(#jc,.jc).v-paper #comments-form input::placeholder,
:is(#jc,.jc):is(#jc,.jc).v-paper #comments-form textarea::placeholder {
  color: var(--ink-300) !important;
  -webkit-text-fill-color: var(--ink-300) !important;
}

/* the JComments BBCode/smiley formatting toolbar + the "characters left"
   counter are injected by JS with no stable class and may sit outside the
   <form> (but inside .jcomment-container-form). Scope to the whole container
   so they're caught wherever the editor drops them: white text on the text
   buttons, invert the icon images, and strip every stray white fill — except
   the fields, the gold buttons and the light captcha tile. */
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) .jcomment-container-form a {
  color: #ffffff !important;
}
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) .jcomment-container-form img {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) .jcomment-container-form *:not(input):not(textarea):not(.btn-jcomment):not(#comments-form-send):not(#comments-form-cancel):not(#jcomment_recaptcha_container):not(#jcomment_recaptcha_label):not(#jcomment_recaptcha_control) {
  background-color: transparent !important;
}
/* the formatting buttons are EMPTY <a class="bbcode-*"> elements whose
   icons ship as BLACK svg background-images (bold-solid.svg etc.) - the
   img-invert rule above never touches them. Invert the buttons themselves
   so the icons read WHITE on the navy card. (Their background-color is
   already forced transparent by the catch-all, so the filter only
   affects the icon artwork.) */
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) #comments-form .bbcode a,
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) .jcomment-container-form a[class^="bbcode-"],
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) .jcomment-container-form a[class*=" bbcode-"] {
  filter: brightness(0) invert(1) !important;
  opacity: 0.82 !important;
  transition: opacity .12s ease !important;
}
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) #comments-form .bbcode a:hover {
  opacity: 1 !important;
}
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) .jcomment-container-form #counter,
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) .jcomment-container-form .counter {
  color: rgba(246, 239, 225, 0.7) !important;
}
/* re-assert the textarea fill (it must stay dark + cream) */
:is(#jc,.jc):is(#jc,.jc):not(.v-paper) #comments-form #comments-form-comment {
  background-color: #0a1c40 !important;
  color: var(--cream-50) !important;
}

/* checkbox-row labels (notify / privacy) stay readable on the card */
:is(#jc,.jc):is(#jc,.jc) #comments-form .comments-form-title-group:has(input[type="checkbox"]) label:not(.comments-form-privacy) {
  display: inline !important;
  text-transform: none !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  color: rgba(246, 239, 225, 0.82) !important;
  margin: 0 !important;
}
:is(#jc,.jc):is(#jc,.jc).v-paper #comments-form .comments-form-title-group:has(input[type="checkbox"]) label:not(.comments-form-privacy) {
  color: var(--ink-700) !important;
}

/* reCAPTCHA tile — render as a light tile (matches Google's own widget) so
   the "I'm not a robot" block reads clearly against the dark card */
:is(#jc,.jc):is(#jc,.jc) #jcomment_recaptcha_container {
  background: #f7f8fa !important;
  border: 1px solid rgba(10, 26, 58, 0.18) !important;
}
:is(#jc,.jc):is(#jc,.jc) #comments-form #jcomment_recaptcha_label {
  color: var(--ink-700) !important;
}

/* =========================================================
   MOBILE TIGHTENING (appended last so it wins the cascade,
   incl. over the PRODUCTION HARDENING paddings above)
   ========================================================= */
@media (max-width: 640px) {
  :is(#jc,.jc):is(#jc,.jc):not(.v-paper) {
    padding: 14px 10px !important;
    border-radius: 14px !important;
  }
  :is(#jc,.jc):is(#jc,.jc):not(.v-quiet) #comments-list > .even,
  :is(#jc,.jc):is(#jc,.jc):not(.v-quiet) #comments-list > .odd,
  :is(#jc,.jc):is(#jc,.jc):not(.v-quiet) div[id^="comment-item-"] {
    padding: 14px 12px !important;
    border-radius: 14px !important;
  }
  :is(#jc,.jc):is(#jc,.jc) .rbox { gap: 10px !important; }
  :is(#jc,.jc):is(#jc,.jc) .comment-avatar,
  :is(#jc,.jc):is(#jc,.jc) .comment-avatar img,
  :is(#jc,.jc):is(#jc,.jc) .comment-avatar-default {
    width: 36px !important;
    height: 36px !important;
  }
  :is(#jc,.jc):is(#jc,.jc) .comment-author,
  :is(#jc,.jc):is(#jc,.jc) .comment-author a { font-size: 17px !important; }
  :is(#jc,.jc):is(#jc,.jc) #comments > h3,
  :is(#jc,.jc):is(#jc,.jc) #comments > h4 {
    font-size: 22px !important;
    gap: 10px !important;
    padding: 0 0 12px !important;
    margin: 0 0 16px !important;
  }
  :is(#jc,.jc):is(#jc,.jc) .jcomment-container-form {
    padding: 18px 12px !important;
  }
  :is(#jc,.jc):is(#jc,.jc) .jcomment-container-form > h4 { font-size: 20px !important; }
  /* full-width tap-friendly submit/cancel */
  :is(#jc,.jc):is(#jc,.jc) .btn-jcomment { width: 100% !important; }
  :is(#jc,.jc):is(#jc,.jc) #comments-form-send,
  :is(#jc,.jc):is(#jc,.jc) #comments-form-cancel {
    width: 100% !important;
    display: inline-flex !important;
    justify-content: center !important;
  }
}

/* =========================================================
   ARTICLE TABLES — playbill treatment + mobile friendly
   (e.g. /en/support/matching-gift-program ships inline-styled
   <table>s: a 3-step "How It Works" strip, a 3-col program
   comparison, an org-info table and a 2-col FAQ. The inline
   styles fix cell widths at 33% so phones clip the 3rd column.
   Overrides below beat the inline styles with !important.)
   ========================================================= */
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse !important;
  margin: 14px 0 30px !important;
  background: rgba(246, 239, 225, 0.03) !important;
  border: 1px solid var(--rule) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table th {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--gold-400) !important;
  background: rgba(230, 183, 96, 0.07) !important;
  text-align: left !important;
  padding: 12px 14px !important;
  border: 1px solid var(--rule) !important;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table td {
  padding: 14px !important;
  border: 1px solid var(--rule) !important;
  color: var(--fg) !important;
  vertical-align: top !important;
  text-align: left !important;
  width: auto !important;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table td p {
  margin: 6px 0 0 !important;
  font-size: 14px !important;
  color: var(--muted) !important;
  opacity: 1 !important;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table td a {
  color: var(--gold-400) !important;
  word-break: break-word;
}
/* row-label cells in the comparison table read as quiet headers */
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table tbody td:first-child strong,
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table tbody td:first-child {
  color: var(--cream-50) !important;
}
/* the "How It Works" strip (the only table WITHOUT th):
   center the step cards and turn the 1·2·3 into playbill numerals */
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)) td {
  text-align: center !important;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)) td > div:first-child {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: 44px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--gold-400) !important;
  opacity: 1 !important;
  margin: 0 0 10px !important;
}

/* ---------- phones: no more clipped columns ---------- */
@media (max-width: 700px) {
  /* 1 · steps strip -> stacked step cards */
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)),
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)) tbody,
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)) tr,
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)) td {
    display: block !important;
    width: 100% !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)) {
    border: 0 !important;
    background: transparent !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)) td {
    border: 1px solid var(--rule) !important;
    border-radius: 12px !important;
    background: rgba(246, 239, 225, 0.03) !important;
    margin: 0 0 10px !important;
    padding: 18px 14px !important;
  }

  /* 2 · two-column Q/A tables -> stacked question/answer cards */
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(tbody td:first-child:nth-last-child(2)) thead {
    display: none !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(tbody td:first-child:nth-last-child(2)),
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(tbody td:first-child:nth-last-child(2)) tbody,
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(tbody td:first-child:nth-last-child(2)) tr,
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(tbody td:first-child:nth-last-child(2)) td {
    display: block !important;
    width: 100% !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(tbody td:first-child:nth-last-child(2)) {
    border: 0 !important;
    background: transparent !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(tbody td:first-child:nth-last-child(2)) tr {
    border: 1px solid var(--rule) !important;
    border-radius: 12px !important;
    background: rgba(246, 239, 225, 0.03) !important;
    margin: 0 0 10px !important;
    overflow: hidden !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(tbody td:first-child:nth-last-child(2)) td {
    border: 0 !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(tbody td:first-child:nth-last-child(2)) td:first-child {
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    color: var(--cream-50) !important;
    padding: 16px 14px 4px !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(tbody td:first-child:nth-last-child(2)) td:last-child {
    color: var(--muted) !important;
    padding: 0 14px 16px !important;
  }

  /* 3 · wide th-tables (program comparison, org info) -> swipeable */
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):not(:has(tbody td:first-child:nth-last-child(2))) {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):not(:has(tbody td:first-child:nth-last-child(2))) th,
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):not(:has(tbody td:first-child:nth-last-child(2))) td {
    min-width: 150px !important;
  }
}

/* =========================================================
   FIX (mobile): flex ancestors (.col etc.) must be allowed to
   shrink below their content's min-content width - otherwise the
   swipeable tables push the column out to ~490px and the panel is
   clipped by overflow-x:hidden (text looked truncated on phones).
   ========================================================= */
@media (max-width: 700px) {
  body.com_content *:has(.com-content-article) {
    min-width: 0 !important;
  }
}

/* =========================================================
   INFO TABLE (header row + ONE data row, 3 columns): on phones
   stack as label/value pairs instead of side-scrolling
   (e.g. "Our Information" on the matching-gift page).
   Pairing is done with grid-row placement, no hardcoded text.
   ========================================================= */
@media (max-width: 700px) {
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):has(tbody tr:only-child td:first-child:nth-last-child(3)) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):has(tbody tr:only-child td:first-child:nth-last-child(3)) thead, body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):has(tbody tr:only-child td:first-child:nth-last-child(3)) tbody, body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):has(tbody tr:only-child td:first-child:nth-last-child(3)) tr { display: contents !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):has(tbody tr:only-child td:first-child:nth-last-child(3)) th, body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):has(tbody tr:only-child td:first-child:nth-last-child(3)) td {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    grid-column: 1 !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):has(tbody tr:only-child td:first-child:nth-last-child(3)) thead th { border: 1px solid var(--rule) !important; border-bottom: 0 !important; border-radius: 12px 12px 0 0 !important; padding: 12px 14px 8px !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):has(tbody tr:only-child td:first-child:nth-last-child(3)) tbody td { border: 1px solid var(--rule) !important; border-top: 0 !important; border-radius: 0 0 12px 12px !important; margin: 0 0 12px !important; background: rgba(246, 239, 225, 0.03) !important; padding: 4px 14px 14px !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):has(tbody tr:only-child td:first-child:nth-last-child(3)) thead th:nth-child(1) { grid-row: 1 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):has(tbody tr:only-child td:first-child:nth-last-child(3)) tbody td:nth-child(1) { grid-row: 2 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):has(tbody tr:only-child td:first-child:nth-last-child(3)) thead th:nth-child(2) { grid-row: 3 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):has(tbody tr:only-child td:first-child:nth-last-child(3)) tbody td:nth-child(2) { grid-row: 4 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):has(tbody tr:only-child td:first-child:nth-last-child(3)) thead th:nth-child(3) { grid-row: 5 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):has(tbody tr:only-child td:first-child:nth-last-child(3)) tbody td:nth-child(3) { grid-row: 6 !important; }
}

/* =========================================================
   LOCATIONS / ARTICLE-TABLE IMAGE POLISH
   - th-less article tables get fixed layout so columns stay
     equal regardless of image load state
   - images inside article tables render as uniform 3:2 cover
     tiles on desktop AND mobile (same size treatment)
   - in-table h1s (location names, "Directions", "3-D Tour")
     scale to playbill headings instead of page-title size
   - on phones, cells that hold ONLY a heading lose the card
     chrome so they read as section labels between image cards
   ========================================================= */
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)) { table-layout: fixed !important; }
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table td img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid var(--rule) !important;
  margin: 0 auto !important;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table td h1,
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table td h2 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: clamp(24px, 2.6vw, 36px) !important;
  line-height: 1.12 !important;
  margin: 12px 0 14px !important;
  text-wrap: balance;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table td h1 a,
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table td h2 a {
  color: var(--gold-400) !important;
  text-decoration: none !important;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table td h1 a:hover,
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table td h2 a:hover {
  color: var(--gold-300) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}
@media (max-width: 700px) {
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table td h1,
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table td h2 { font-size: 23px !important; margin: 8px 0 10px !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)) td:has(h1:only-child),
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)) td:has(h2:only-child) {
    border: 0 !important;
    background: transparent !important;
    padding: 10px 0 0 !important;
  }
}

/* =========================================================
   LOCATIONS TABLE - MOBILE PAIRING
   Stacked order would otherwise be: both city names, then both
   photos. Re-order with grid so each name sits directly above
   its own photo: Directions / Buffalo Grove / photo / Katy /
   photo / 3-D Tour / tour thumbnail. Scoped to th-less tables
   that use colspan section rows (the locations layout).
   ========================================================= */
@media (max-width: 700px) {
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]) {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]) tbody, body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]) tr { display: contents !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]) td { grid-column: 1 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]) tbody tr:nth-child(1) td:nth-child(1) { grid-row: 2 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]) tbody tr:nth-child(1) td:nth-child(2) { grid-row: 4 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]) tbody tr:nth-child(2) td { grid-row: 1 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]) tbody tr:nth-child(3) td:nth-child(1) { grid-row: 3 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]) tbody tr:nth-child(3) td:nth-child(2) { grid-row: 5 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]) tbody tr:nth-child(4) td { grid-row: 6 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]) tbody tr:nth-child(5) td { grid-row: 7 !important; }
}

/* =========================================================
   LOCATIONS TABLE - MOBILE PAIRING v2
   (v1 lost the display cascade to the Q/A stacking rule, whose
   :has(td:first-child:nth-last-child(2)) argument outweighs
   :has(td[colspan]). The :has(td[colspan]:first-child) argument
   here matches that specificity and, being later, wins.)
   ========================================================= */
@media (max-width: 700px) {
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]:first-child) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]:first-child) thead { display: none !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]:first-child) tbody, body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]:first-child) tr { display: contents !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]:first-child) td {
    display: block !important;
    width: 100% !important;
    grid-column: 1 !important;
  }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]:first-child) td:has(img) { padding: 14px !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]:first-child) tbody tr:nth-child(1) td:nth-child(1) { grid-row: 2 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]:first-child) tbody tr:nth-child(1) td:nth-child(2) { grid-row: 4 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]:first-child) tbody tr:nth-child(2) td { grid-row: 1 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]:first-child) tbody tr:nth-child(3) td:nth-child(1) { grid-row: 3 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]:first-child) tbody tr:nth-child(3) td:nth-child(2) { grid-row: 5 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]:first-child) tbody tr:nth-child(4) td { grid-row: 6 !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:not(:has(th)):has(td[colspan]:first-child) tbody tr:nth-child(5) td { grid-row: 7 !important; }
}

/* =========================================================
   SUMMER-CAMP / LONG-ARTICLE POLISH
   - in-article h1 scales as a playbill hero (not the 92px page
     default), tighter still on phones
   - when an article has a real h1, the FIRST h2 goes back to
     normal section-header styling (no double page-title)
   - video embeds: .mleft wrappers ship inline green debug
     borders at width:50% - restyle as framed 16:9 tiles
   - 6+ column tables (camp pricing) get tighter swipe cells
   ========================================================= */
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body h1 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: clamp(34px, 4.6vw, 56px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;
  color: var(--cream-50) !important;
  margin: 0 0 18px !important;
  text-wrap: balance;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body:has(h1) > h2:first-of-type {
  font-size: clamp(23px, 2.8vw, 32px) !important;
  line-height: 1.1 !important;
  margin: 40px 0 16px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--rule) !important;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body:has(h1) > h2:first-of-type::before { display: block !important; }
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body .mleft {
  border: 1px solid var(--rule) !important;
  width: 100% !important;
  max-width: 680px !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 18px auto !important;
  background: var(--navy-900) !important;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6) !important;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body .mleft iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body iframe { max-width: 100% !important; }
@media (max-width: 700px) {
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body h1 { font-size: 28px !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body:has(h1) > h2:first-of-type { font-size: 21px !important; margin: 30px 0 12px !important; padding: 0 0 10px !important; }
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):not(:has(tbody td:first-child:nth-last-child(2))):has(th:nth-child(6)) th,
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table:has(th):not(:has(tbody td:first-child:nth-last-child(2))):has(th:nth-child(6)) td { min-width: 110px !important; font-size: 13.5px !important; }
}

/* article tables: neutralize inline row tints (e.g. the camp
   pricing thead ships background-color:#f47920 inline) so the
   playbill gold-tint header treatment shows instead */
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table thead tr,
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table thead th[style],
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body table tbody tr[style] {
  background: transparent !important;
}

/* =========================================================
   ENROLL CTA BUTTON (summer camp EN + RU)
   The standalone enrollment links ("Enroll Now" / "Zapisatsya
   v letniy lager 2026") become gold pill buttons. Inline
   mentions inside sentences keep their link styling: the EN CTA
   is the only absolute-URL registration link, and the RU inline
   link lacks the individual-registration suffix.
   ========================================================= */
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body p > a[href^="https://www.bravotheater.com"][href*="individual-registration"],
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body p > a[href^="/ru/"][href*="individual-registration"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  padding: 16px 32px !important;
  border-radius: 999px !important;
  background: var(--gold-500) !important;
  border: 1px solid var(--gold-500) !important;
  color: var(--navy-900) !important;
  text-decoration: none !important;
  box-shadow: 0 12px 30px -14px rgba(230, 183, 96, 0.9) !important;
  margin: 10px 0 4px !important;
  transition: transform .15s ease, background .2s ease, border-color .2s ease !important;
}
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body p > a[href^="https://www.bravotheater.com"][href*="individual-registration"]:hover,
body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body p > a[href^="/ru/"][href*="individual-registration"]:hover {
  background: var(--gold-400) !important;
  border-color: var(--gold-400) !important;
  color: var(--navy-900) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}
@media (max-width: 700px) {
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body p > a[href^="https://www.bravotheater.com"][href*="individual-registration"],
  body.com_content .com-content-article:not(:has(.bravo-dance, .bd-section, .hero)) .com-content-article__body p > a[href^="/ru/"][href*="individual-registration"] {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* =========================================================
   EVENTS BOOKING - REGISTRATION TIMELINE (playbill skin)
   /en/classes/registration is com_eventbooking (upcoming events,
   timeline layout) - none of the article rules touch it. Restyle
   the timeline cards, date bubbles, price chips, thumbs and
   taskbar buttons to the navy + gold playbill system.
   ========================================================= */
body.com_eventbooking .eb-events-timeline .eb-event-container {
  background: #0f2451 !important;
  border: 1px solid rgba(246, 239, 225, 0.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.7) !important;
  padding: 22px 24px !important;
  margin: 0 0 22px !important;
  position: relative !important;
  overflow: hidden !important;
}
body.com_eventbooking .eb-events-timeline .eb-event-container::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: linear-gradient(180deg, #f0c873, #6b1d27);
}
/* date bubble */
body.com_eventbooking .eb-event-date.bg-primary,
body.com_eventbooking .eb-event-date {
  background: #0a1a3a !important;
  border: 2px solid rgba(230, 183, 96, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(230, 183, 96, 0.08) !important;
  color: #fbf6ea !important;
}
body.com_eventbooking .eb-event-date-day { color: #f0c873 !important; font-family: 'Bodoni Moda', Georgia, serif !important; font-weight: 600 !important; }
body.com_eventbooking .eb-event-date-month, body.com_eventbooking .eb-event-date-year { color: rgba(246, 239, 225, 0.75) !important; }
/* title */
body.com_eventbooking h2.eb-event-title-container { margin: 0 0 10px !important; font-size: inherit !important; }
body.com_eventbooking a.eb-event-title {
  font-family: 'Bodoni Moda', 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: #fbf6ea !important;
  text-decoration: none !important;
}
body.com_eventbooking a.eb-event-title:hover { color: #f0c873 !important; }
/* date + location info */
body.com_eventbooking .eb-event-date-info, body.com_eventbooking .eb-event-location-info {
  color: rgba(246, 239, 225, 0.72) !important;
  font-size: 14.5px !important;
}
body.com_eventbooking .eb-event-date-info i, body.com_eventbooking .eb-event-location-info i { color: #e6b760 !important; }
/* price chip (was solid bootstrap blue) */
body.com_eventbooking .eb-event-price-container.bg-primary,
body.com_eventbooking .eb-event-price-container {
  background: rgba(230, 183, 96, 0.1) !important;
  border: 1px solid rgba(230, 183, 96, 0.45) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  color: #f7dca0 !important;
}
body.com_eventbooking .eb-individual-price { color: #f7dca0 !important; font-weight: 600 !important; font-size: 14px !important; line-height: 1.45 !important; }
/* description + thumb */
body.com_eventbooking .eb-description-details { color: rgba(246, 239, 225, 0.85) !important; }
body.com_eventbooking .eb-description-details img.eb-thumb-left,
body.com_eventbooking .eb-description-details img {
  border-radius: 12px !important;
  border: 1px solid rgba(246, 239, 225, 0.16) !important;
  margin: 4px 22px 12px 0 !important;
  max-width: min(380px, 100%) !important;
  height: auto !important;
}
body.com_eventbooking .eb-description-details ul { list-style: none !important; margin: 10px 0 0 !important; padding: 0 !important; }
body.com_eventbooking .eb-description-details ul li {
  position: relative !important;
  padding-left: 22px !important;
  margin: 0 0 8px !important;
  color: rgba(246, 239, 225, 0.85) !important;
}
body.com_eventbooking .eb-description-details ul li::before {
  content: '';
  position: absolute;
  left: 2px; top: 0.55em;
  width: 6px; height: 6px;
  background: #e6b760;
  transform: rotate(45deg);
}
/* taskbar buttons */
body.com_eventbooking .eb-taskbar ul { list-style: none !important; margin: 16px 0 0 !important; padding: 14px 0 0 !important; border-top: 1px solid rgba(246, 239, 225, 0.14) !important; display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; }
body.com_eventbooking .eb-taskbar ul li { margin: 0 !important; padding: 0 !important; }
body.com_eventbooking .eb-taskbar .btn, body.com_eventbooking .eb-taskbar a.btn, body.com_eventbooking .eb-taskbar button.btn {
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  line-height: 1 !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid rgba(246, 239, 225, 0.35) !important;
  color: #fbf6ea !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: all .15s ease !important;
}
body.com_eventbooking .eb-taskbar .btn:hover { border-color: #e6b760 !important; color: #f0c873 !important; background: rgba(230, 183, 96, 0.08) !important; }
body.com_eventbooking .eb-taskbar a.btn-primary, body.com_eventbooking .eb-taskbar .btn-primary, body.com_eventbooking .eb-taskbar a[href*="individual-registration"].btn {
  background: #e6b760 !important;
  border-color: #e6b760 !important;
  color: #0a1a3a !important;
  box-shadow: 0 12px 30px -14px rgba(230, 183, 96, 0.9) !important;
}
body.com_eventbooking .eb-taskbar a.btn-primary:hover, body.com_eventbooking .eb-taskbar .btn-primary:hover { background: #f0c873 !important; border-color: #f0c873 !important; color: #0a1a3a !important; }
/* mobile */
@media (max-width: 700px) {
  body.com_eventbooking .eb-events-timeline .eb-event-container { padding: 16px 14px !important; }
  body.com_eventbooking a.eb-event-title { font-size: 23px !important; }
  body.com_eventbooking .eb-description-details img.eb-thumb-left,
  body.com_eventbooking .eb-description-details img { float: none !important; display: block !important; width: 100% !important; max-width: 100% !important; margin: 6px 0 12px !important; aspect-ratio: 3 / 2; object-fit: cover; }
  body.com_eventbooking .eb-event-price-container { margin-top: 10px !important; }
  body.com_eventbooking .eb-taskbar .btn { width: 100% !important; justify-content: center !important; text-align: center !important; }
  body.com_eventbooking .eb-taskbar ul { gap: 8px !important; }
  body.com_eventbooking .eb-taskbar ul li { width: 100% !important; }
}

/* FIX: the taskbar flex rule above also matched the Save-to
   DROPDOWN menu (a ul inside .eb-taskbar), pinning it open.
   Collapse it again and give it a playbill skin when open. */
body.com_eventbooking .eb-taskbar ul.dropdown-menu { display: none !important; }
body.com_eventbooking .eb-taskbar ul.dropdown-menu.show {
  display: block !important;
  background: #0a1a3a !important;
  border: 1px solid rgba(246, 239, 225, 0.2) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8) !important;
}
body.com_eventbooking .eb-taskbar ul.dropdown-menu a,
body.com_eventbooking .eb-taskbar ul.dropdown-menu .dropdown-item {
  color: #fbf6ea !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  background: transparent !important;
}
body.com_eventbooking .eb-taskbar ul.dropdown-menu a:hover,
body.com_eventbooking .eb-taskbar ul.dropdown-menu .dropdown-item:hover {
  background: rgba(230, 183, 96, 0.12) !important;
  color: #f0c873 !important;
}

/* =========================================================
   EVENT CARDS: two-column description
   No text wrapping under the image - the thumb is a fixed LEFT
   column, all description content lives in the RIGHT column.
   (grid with zero row-gap; the image anchor spans the implicit
   rows so 0-height leftover rows add no space)
   ========================================================= */
body.com_eventbooking .eb-description-details:has(> a > img), body.com_eventbooking .eb-description-details:has(> img) {
  display: grid !important;
  grid-template-columns: minmax(220px, 340px) 1fr !important;
  column-gap: 26px !important;
  row-gap: 0 !important;
  align-items: start !important;
}
body.com_eventbooking .eb-description-details:has(> a > img) > a:has(> img),
body.com_eventbooking .eb-description-details > img.eb-thumb-left {
  grid-column: 1 !important;
  grid-row: 1 / span 40 !important;
}
body.com_eventbooking .eb-description-details:has(> a > img) > *:not(a),
body.com_eventbooking .eb-description-details:has(> img) > *:not(img) {
  grid-column: 2 !important;
}
body.com_eventbooking .eb-description-details img.eb-thumb-left,
body.com_eventbooking .eb-description-details img {
  float: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 4px 0 0 !important;
}
@media (max-width: 700px) {
  body.com_eventbooking .eb-description-details:has(> a > img), body.com_eventbooking .eb-description-details:has(> img) { display: block !important; }
  body.com_eventbooking .eb-description-details img.eb-thumb-left, body.com_eventbooking .eb-description-details img { margin: 6px 0 12px !important; }
}

/* =========================================================
   EVENTS BOOKING - RECLAIM TEMPLATE SIDE GUTTERS
   The Gantry wrappers stack ~80px of side padding around the
   timeline (.g-content 36 + .platform-content 32 + .col 13).
   Collapse them so the event cards use the full content width;
   tighter still on phones. :has-guarded so headers/footers and
   other modules keep their gutters.
   ========================================================= */
body.com_eventbooking .g-content:has(.eb-events-timeline) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
body.com_eventbooking .platform-content:has(.eb-events-timeline) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}
body.com_eventbooking .row:has(.eb-events-timeline) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.com_eventbooking .col:has(.eb-events-timeline) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 700px) {
  body.com_eventbooking .g-content:has(.eb-events-timeline) {
    margin-left: 2px !important;
    margin-right: 2px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* =========================================================
   EVENTS BOOKING - DEFAULT LIST LAYOUT (RU registration page)
   The RU menu item renders the default upcoming-events layout
   (.eb-event boxes + .eb-box-heading band + properties table)
   instead of the timeline. Same playbill treatment.
   ========================================================= */
body.com_eventbooking .eb-event {
  background: #0f2451 !important;
  border: 1px solid rgba(246, 239, 225, 0.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.7) !important;
  padding: 20px 22px !important;
  margin: 0 0 22px !important;
  position: relative !important;
  overflow: hidden !important;
}
body.com_eventbooking .eb-event::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: linear-gradient(180deg, #f0c873, #6b1d27);
}
body.com_eventbooking .eb-box-heading {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 12px !important;
  margin: 0 0 14px !important;
  border-bottom: 1px solid rgba(246, 239, 225, 0.14) !important;
}
body.com_eventbooking .eb-box-heading .eb-event-title,
body.com_eventbooking h2.eb-event-title,
body.com_eventbooking .eb-event-title-link {
  font-family: 'Bodoni Moda', 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(24px, 2.6vw, 34px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  color: #fbf6ea !important;
  text-decoration: none !important;
  margin: 0 !important;
}
body.com_eventbooking .eb-event-title-link:hover { color: #f0c873 !important; }
/* properties table (DIV based) */
body.com_eventbooking .eb-event-properties-table {
  background: transparent !important;
  border: 1px solid rgba(246, 239, 225, 0.16) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
body.com_eventbooking .eb-event-property {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(246, 239, 225, 0.12) !important;
}
body.com_eventbooking .eb-event-property:last-child { border-bottom: 0 !important; }
body.com_eventbooking .eb-event-property-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: #f0c873 !important;
  background: rgba(230, 183, 96, 0.07) !important;
  border: 0 !important;
}
body.com_eventbooking .eb-event-property-value {
  color: rgba(246, 239, 225, 0.88) !important;
  background: transparent !important;
  border: 0 !important;
}
/* register buttons (anywhere in eventbooking views) */
body.com_eventbooking a.eb-register-button,
body.com_eventbooking .eb-individual-registration-button,
body.com_eventbooking input.eb-register-button {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 13px 26px !important;
  border-radius: 999px !important;
  background: #e6b760 !important;
  border: 1px solid #e6b760 !important;
  color: #0a1a3a !important;
  text-decoration: none !important;
  box-shadow: 0 12px 30px -14px rgba(230, 183, 96, 0.9) !important;
  transition: all .15s ease !important;
}
body.com_eventbooking a.eb-register-button:hover,
body.com_eventbooking .eb-individual-registration-button:hover {
  background: #f0c873 !important;
  border-color: #f0c873 !important;
  color: #0a1a3a !important;
  transform: translateY(-1px) !important;
}
/* template side gutters for the default layout wrapper too */
body.com_eventbooking .g-content:has(.eb-event),
body.com_eventbooking .g-content:has(.eb-container) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
body.com_eventbooking .platform-content:has(.eb-event) { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
body.com_eventbooking .row:has(.eb-event) { margin-left: 0 !important; margin-right: 0 !important; }
body.com_eventbooking .col:has(.eb-event) { padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 700px) {
  body.com_eventbooking .eb-event { padding: 14px 12px !important; }
  body.com_eventbooking .eb-box-heading .eb-event-title, body.com_eventbooking h2.eb-event-title, body.com_eventbooking .eb-event-title-link { font-size: 21px !important; }
  body.com_eventbooking .eb-event-property, body.com_eventbooking .eb-event-property-label, body.com_eventbooking .eb-event-property-value { display: block !important; width: 100% !important; }
  body.com_eventbooking .eb-event-property-label { padding: 8px 12px 2px !important; }
  body.com_eventbooking .eb-event-property-value { padding: 0 12px 10px !important; }
  body.com_eventbooking a.eb-register-button, body.com_eventbooking .eb-individual-registration-button { width: 100% !important; justify-content: center !important; }
  body.com_eventbooking .g-content:has(.eb-event) { margin-left: 2px !important; margin-right: 2px !important; padding-left: 4px !important; padding-right: 4px !important; }
}

/* =========================================================
   EVENTS BOOKING - EVENT DETAIL VIEW (view-event)
   Individual event/registration pages: legible playbill hero
   title (was #333 @92px on navy), diamond section headers,
   framed large image + location map, ghost template buttons.
   ========================================================= */
body.com_eventbooking h1.eb-page-heading {
  font-family: 'Bodoni Moda', 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(30px, 4vw, 52px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.015em !important;
  color: #fbf6ea !important;
  margin: 10px 0 24px !important;
  text-wrap: balance;
}
body.com_eventbooking.view-event .eb-container h2,
body.com_eventbooking h3.eb-tabbed-plugin-header {
  font-family: 'Bodoni Moda', 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  line-height: 1.15 !important;
  color: #fbf6ea !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 34px 0 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid rgba(246, 239, 225, 0.14) !important;
}
body.com_eventbooking.view-event .eb-container h2::before,
body.com_eventbooking h3.eb-tabbed-plugin-header::before {
  content: '';
  flex: 0 0 auto;
  width: 8px; height: 8px;
  background: #e6b760;
  transform: rotate(45deg);
}
body.com_eventbooking .eb-description { color: rgba(246, 239, 225, 0.88) !important; }
body.com_eventbooking .eb-description a.button,
body.com_eventbooking .eb-description .button {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 13px 26px !important;
  border-radius: 999px !important;
  background: rgba(230, 183, 96, 0.1) !important;
  border: 1px solid rgba(230, 183, 96, 0.5) !important;
  color: #f0c873 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: all .15s ease !important;
}
body.com_eventbooking .eb-description a.button:hover,
body.com_eventbooking .eb-description .button:hover {
  background: #e6b760 !important;
  border-color: #e6b760 !important;
  color: #0a1a3a !important;
}
body.com_eventbooking .eb-event-large-image {
  border-radius: 12px !important;
  border: 1px solid rgba(246, 239, 225, 0.16) !important;
}
body.com_eventbooking .eb-plugin-output {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(246, 239, 225, 0.16) !important;
}
body.com_eventbooking .eb-social-sharing-buttons { margin: 18px 0 !important; }
@media (max-width: 700px) {
  body.com_eventbooking h1.eb-page-heading { font-size: 25px !important; margin: 6px 0 16px !important; }
  body.com_eventbooking.view-event .eb-container h2,
  body.com_eventbooking h3.eb-tabbed-plugin-header { font-size: 20px !important; }
}

/* =========================================================
   EVENT DESCRIPTION SECTIONS (built by custom/js/bravo-eb.js,
   loader appended to templates/rt_remnant/js/mc-newsletter.js)
   "Schedule / Payment / Rules / Address" marker paragraphs and
   their RU equivalents become icon cards.
   ========================================================= */
body.com_eventbooking .bravo-eb-sec {
  background: rgba(246, 239, 225, 0.04) !important;
  border: 1px solid rgba(246, 239, 225, 0.15) !important;
  border-radius: 14px !important;
  padding: 16px 18px 13px !important;
  margin: 14px 0 !important;
}
body.com_eventbooking .bravo-eb-sec-title {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #f0c873 !important;
  margin: 0 0 10px !important;
  padding: 0 0 9px !important;
  border-bottom: 1px solid rgba(246, 239, 225, 0.1) !important;
}
body.com_eventbooking .bravo-eb-sec-title::before {
  content: '';
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
body.com_eventbooking .bravo-eb-schedule .bravo-eb-sec-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6b760' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
body.com_eventbooking .bravo-eb-payment .bravo-eb-sec-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6b760' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2.5'/%3E%3Cpath d='M2.5 10h19'/%3E%3Cpath d='M6.5 14.5h4'/%3E%3C/svg%3E"); }
body.com_eventbooking .bravo-eb-rules .bravo-eb-sec-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6b760' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2.5h7l5 5V21a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 2.5v5h5'/%3E%3Cpath d='M9.5 13h5M9.5 17h5'/%3E%3C/svg%3E"); }
body.com_eventbooking .bravo-eb-address .bravo-eb-sec-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6b760' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s-7-5.6-7-11a7 7 0 1 1 14 0c0 5.4-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10.5' r='2.5'/%3E%3C/svg%3E"); }
body.com_eventbooking .bravo-eb-sec p {
  margin: 0 0 9px !important;
  color: rgba(246, 239, 225, 0.88) !important;
}
body.com_eventbooking .bravo-eb-sec p:last-child { margin-bottom: 0 !important; }
body.com_eventbooking .bravo-eb-sec a:not(.button) { color: #f0c873 !important; word-break: break-word; }
@media (max-width: 700px) {
  body.com_eventbooking .bravo-eb-sec { padding: 13px 13px 10px !important; }
}

/* FIX: detail pages ship the large image as a BARE <img> child
   (no <a> wrapper, no .eb-thumb-left class), so it missed the
   row-span placement and inflated grid row 1 to its own height -
   leaving a big gap between the first heading and the rest of the
   text. Pin any direct-child image to column 1 with the row span. */
body.com_eventbooking .eb-description-details:has(> img) > img:first-of-type,
body.com_eventbooking .eb-description-details:has(> a > img) > a:has(> img) {
  grid-column: 1 !important;
  grid-row: 1 / span 40 !important;
}

/* =========================================================
   EVENT PROPERTY LABELS - READABILITY PASS
   The 11px uppercase mono labels were hard to read. Switch to
   the body face at 14px semibold, natural case, softer tracking,
   slightly larger values to match.
   ========================================================= */
body.com_eventbooking .eb-event-property-label {
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: #f7dca0 !important;
  line-height: 1.45 !important;
  padding: 12px 16px !important;
}
body.com_eventbooking .eb-event-property-value {
  font-size: 15px !important;
  line-height: 1.5 !important;
  padding: 12px 16px !important;
}
@media (max-width: 700px) {
  body.com_eventbooking .eb-event-property-label { padding: 10px 12px 2px !important; }
  body.com_eventbooking .eb-event-property-value { padding: 0 12px 10px !important; }
}

/* =========================================================
   DESCRIPTION LISTS - indent to the right + diamond markers
   (includes .bravo-eb-list built by the JS enhancer from
   dash-prefixed paragraphs)
   ========================================================= */
body.com_eventbooking .eb-description-details ul,
body.com_eventbooking .bravo-eb-sec ul,
body.com_eventbooking ul.bravo-eb-list {
  list-style: none !important;
  margin: 10px 0 14px 28px !important;
  padding: 0 !important;
}
body.com_eventbooking .eb-description-details ul li,
body.com_eventbooking .bravo-eb-sec ul li,
body.com_eventbooking ul.bravo-eb-list li {
  position: relative !important;
  padding-left: 22px !important;
  margin: 0 0 8px !important;
  color: rgba(246, 239, 225, 0.88) !important;
}
body.com_eventbooking .eb-description-details ul li::before,
body.com_eventbooking .bravo-eb-sec ul li::before,
body.com_eventbooking ul.bravo-eb-list li::before {
  content: '';
  position: absolute;
  left: 2px; top: 0.55em;
  width: 6px; height: 6px;
  background: #e6b760;
  transform: rotate(45deg);
}
@media (max-width: 700px) {
  body.com_eventbooking .eb-description-details ul,
  body.com_eventbooking .bravo-eb-sec ul,
  body.com_eventbooking ul.bravo-eb-list { margin-left: 14px !important; }
}

/* =========================================================
   EVENTS BOOKING - REGISTRATION FORM (view-register)
   Playbill skin for the individual/group registration forms:
   consistent field widths, dark recessed inputs, readable
   labels, gold primary actions, diamond section headers.
   ========================================================= */
body.com_eventbooking.view-register .eb-message {
  background: rgba(230, 183, 96, 0.07) !important;
  border: 1px solid rgba(230, 183, 96, 0.35) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  color: rgba(246, 239, 225, 0.9) !important;
}
body.com_eventbooking.view-register .form-control-label,
body.com_eventbooking.view-register label {
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #f6efe1 !important;
  margin: 0 0 6px !important;
}
body.com_eventbooking.view-register .form-control-label .required,
body.com_eventbooking.view-register span.required, body.com_eventbooking.view-register .star { color: #f0c873 !important; }
body.com_eventbooking.view-register input[type='text'],
body.com_eventbooking.view-register input[type='email'],
body.com_eventbooking.view-register input[type='tel'],
body.com_eventbooking.view-register input[type='number'],
body.com_eventbooking.view-register input[type='password'],
body.com_eventbooking.view-register input.form-control,
body.com_eventbooking.view-register select,
body.com_eventbooking.view-register select.form-select,
body.com_eventbooking.view-register textarea {
  background: #0a1c40 !important;
  color: #fbf6ea !important;
  -webkit-text-fill-color: #fbf6ea !important;
  border: 1px solid rgba(246, 239, 225, 0.28) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  min-height: 44px !important;
  width: 100% !important;
  max-width: 460px !important;
  box-shadow: none !important;
}
body.com_eventbooking.view-register textarea { max-width: 100% !important; min-height: 110px !important; }
body.com_eventbooking.view-register input:focus, body.com_eventbooking.view-register select:focus, body.com_eventbooking.view-register textarea:focus {
  outline: none !important;
  border-color: #e6b760 !important;
  box-shadow: 0 0 0 3px rgba(230, 183, 96, 0.25) !important;
}
body.com_eventbooking.view-register input::placeholder, body.com_eventbooking.view-register textarea::placeholder {
  color: rgba(246, 239, 225, 0.4) !important;
  -webkit-text-fill-color: rgba(246, 239, 225, 0.4) !important;
}
body.com_eventbooking.view-register select option { background: #0a1c40; color: #fbf6ea; }
body.com_eventbooking.view-register input.form-check-input,
body.com_eventbooking.view-register input[type='checkbox'],
body.com_eventbooking.view-register input[type='radio'] {
  width: 18px !important;
  height: 18px !important;
  min-height: 0 !important;
  accent-color: #e6b760 !important;
  margin-right: 8px !important;
}
body.com_eventbooking.view-register .form-check-label { font-weight: 500 !important; color: rgba(246, 239, 225, 0.88) !important; }
body.com_eventbooking.view-register .eb-container h3,
body.com_eventbooking.view-register h3.eb-heading {
  font-family: 'Bodoni Moda', 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  color: #fbf6ea !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 36px 0 16px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid rgba(246, 239, 225, 0.14) !important;
}
body.com_eventbooking.view-register .eb-container h3::before {
  content: '';
  flex: 0 0 auto;
  width: 8px; height: 8px;
  background: #e6b760;
  transform: rotate(45deg);
}
body.com_eventbooking.view-register .btn-primary,
body.com_eventbooking.view-register input[type='submit'] {
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  padding: 15px 32px !important;
  min-height: 0 !important;
  border-radius: 999px !important;
  background: #e6b760 !important;
  border: 1px solid #e6b760 !important;
  color: #0a1a3a !important;
  box-shadow: 0 12px 30px -14px rgba(230, 183, 96, 0.9) !important;
  transition: all .15s ease !important;
}
body.com_eventbooking.view-register .btn-primary:hover, body.com_eventbooking.view-register input[type='submit']:hover {
  background: #f0c873 !important;
  border-color: #f0c873 !important;
  color: #0a1a3a !important;
  transform: translateY(-1px) !important;
}
body.com_eventbooking.view-register .btn-secondary {
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 13px 26px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid rgba(246, 239, 225, 0.35) !important;
  color: #fbf6ea !important;
}
body.com_eventbooking.view-register .btn-secondary:hover { border-color: #e6b760 !important; color: #f0c873 !important; background: rgba(230, 183, 96, 0.08) !important; }
/* small inline buttons (calendar trigger) stay compact */
body.com_eventbooking.view-register .form-group .btn-secondary,
body.com_eventbooking.view-register .input-group .btn {
  padding: 0 14px !important;
  min-height: 44px !important;
  border-radius: 8px !important;
}
body.com_eventbooking.view-register .payment_information, body.com_eventbooking.view-register .payment_information label { color: rgba(246, 239, 225, 0.88) !important; }
@media (max-width: 700px) {
  body.com_eventbooking.view-register input[type='text'], body.com_eventbooking.view-register input[type='email'], body.com_eventbooking.view-register input[type='tel'],
  body.com_eventbooking.view-register input[type='number'], body.com_eventbooking.view-register input[type='password'], body.com_eventbooking.view-register input.form-control,
  body.com_eventbooking.view-register select, body.com_eventbooking.view-register select.form-select { max-width: 100% !important; }
  body.com_eventbooking.view-register .btn-primary, body.com_eventbooking.view-register input[type='submit'] { width: 100% !important; }
}

/* =========================================================
   REGISTRATION FORM FIXES (round 2)
   - space between the intro notice and the first field
   - input-groups (date + calendar button, $ + amount) stay on
     ONE line: the 100%-width field rule made them wrap
   - input-group affixes ($ chip, calendar button) on-palette
   - the Joomla date-picker popup gets a dark playbill skin
     instead of the all-white default
   ========================================================= */
body.com_eventbooking.view-register .eb-message { margin-bottom: 26px !important; }
body.com_eventbooking.view-register .input-group {
  max-width: 460px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}
body.com_eventbooking.view-register .input-group > input.form-control,
body.com_eventbooking.view-register .input-group > input {
  width: 1% !important;
  flex: 1 1 auto !important;
  max-width: none !important;
}
body.com_eventbooking.view-register .input-group-text {
  background: #0a1c40 !important;
  border: 1px solid rgba(246, 239, 225, 0.28) !important;
  color: #f0c873 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
}
body.com_eventbooking.view-register .input-group > *:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: -1px !important;
}
body.com_eventbooking.view-register .input-group > *:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
/* date-picker popup */
body.com_eventbooking .js-calendar {
  background: #0f2451 !important;
  border: 1px solid rgba(246, 239, 225, 0.25) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.8) !important;
  color: #fbf6ea !important;
  padding: 8px !important;
}
body.com_eventbooking .js-calendar table,
body.com_eventbooking .js-calendar thead,
body.com_eventbooking .js-calendar tbody,
body.com_eventbooking .js-calendar tr,
body.com_eventbooking .js-calendar th,
body.com_eventbooking .js-calendar td {
  background: transparent !important;
  color: #fbf6ea !important;
  border: 0 !important;
}
body.com_eventbooking .js-calendar th { color: #f0c873 !important; font-weight: 600 !important; }
body.com_eventbooking .js-calendar td { border-radius: 6px !important; cursor: pointer; }
body.com_eventbooking .js-calendar td:hover { background: rgba(230, 183, 96, 0.18) !important; }
body.com_eventbooking .js-calendar td.selected,
body.com_eventbooking .js-calendar td.active,
body.com_eventbooking .js-calendar td.today {
  background: #e6b760 !important;
  color: #0a1a3a !important;
  font-weight: 600 !important;
}
body.com_eventbooking .js-calendar td.day-outside, body.com_eventbooking .js-calendar td.disabled { color: rgba(246, 239, 225, 0.35) !important; }
body.com_eventbooking .js-calendar button,
body.com_eventbooking .js-calendar .btn {
  background: transparent !important;
  border: 1px solid rgba(246, 239, 225, 0.3) !important;
  color: #fbf6ea !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  min-height: 0 !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
body.com_eventbooking .js-calendar button:hover,
body.com_eventbooking .js-calendar .btn:hover {
  border-color: #e6b760 !important;
  color: #f0c873 !important;
  background: rgba(230, 183, 96, 0.1) !important;
}
body.com_eventbooking .js-calendar .time select { background: #0a1c40 !important; color: #fbf6ea !important; }

/* calendar popup: the inner .calendar-container carries its own
   white fill - make it transparent so the navy skin shows */
body.com_eventbooking .js-calendar .calendar-container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fbf6ea !important;
}

/* calendar popup on phones: the JS positions it relative to the
   field and it spills past the right screen edge - clamp it to
   the viewport and center the contents */
@media (max-width: 700px) {
  body.com_eventbooking .js-calendar {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
  }
  body.com_eventbooking .js-calendar table { margin: 0 auto !important; }
  body.com_eventbooking .js-calendar .buttons-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }
}

/* input-group affix buttons (calendar trigger): fixed square so
   they never stretch while the field collapses (seen on phones) */
body.com_eventbooking.view-register .input-group .btn,
body.com_eventbooking.view-register .input-group button {
  flex: 0 0 auto !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================================================
   SP MOVIE DB - PROJECTS GALLERY (/en/archive/projects)
   Poster grid repurposed as the production archive. Playbill
   skin: A-Z + year filter chips, framed poster cards with hover
   lift, Bodoni titles, gold genre + rating.
   ========================================================= */
body.com_spmoviedb .moviedb-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 28px !important;
  padding: 0 0 22px !important;
  border-bottom: 1px solid rgba(246, 239, 225, 0.16) !important;
}
body.com_spmoviedb .moviedb-filters .pull-left,
body.com_spmoviedb .moviedb-filters .pull-right { float: none !important; }
body.com_spmoviedb .moviedb-filters ul.list-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.com_spmoviedb .moviedb-filters ul.list-inline li { margin: 0 !important; padding: 0 !important; }
body.com_spmoviedb .moviedb-filters ul.list-inline li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  padding: 6px 11px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: rgba(246, 239, 225, 0.85) !important;
  background: transparent !important;
  border: 1px solid rgba(246, 239, 225, 0.2) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  transition: all .15s ease !important;
}
body.com_spmoviedb .moviedb-filters ul.list-inline li a:hover {
  border-color: #e6b760 !important;
  color: #f0c873 !important;
  background: rgba(230, 183, 96, 0.08) !important;
}
body.com_spmoviedb .moviedb-filters ul.list-inline li.active a {
  background: #e6b760 !important;
  border-color: #e6b760 !important;
  color: #0a1a3a !important;
  font-weight: 600 !important;
}
body.com_spmoviedb .moviedb-yearindex label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(246, 239, 225, 0.6) !important;
  margin: 0 !important;
}
body.com_spmoviedb .moviedb-yearindex select {
  background: #0a1c40 !important;
  color: #fbf6ea !important;
  border: 1px solid rgba(246, 239, 225, 0.28) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  min-height: 40px !important;
  cursor: pointer !important;
}
body.com_spmoviedb .moviedb-yearindex select option { background: #0a1c40; color: #fbf6ea; }
body.com_spmoviedb .spmoviedb-row::before,
body.com_spmoviedb .spmoviedb-row::after { content: none !important; display: none !important; }
body.com_spmoviedb .spmoviedb-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 26px 22px !important;
  margin: 0 !important;
}
body.com_spmoviedb .spmoviedb-row .item {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  justify-self: stretch !important;
  align-self: start !important;
  box-sizing: border-box !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
body.com_spmoviedb .item .movie-poster {
  width: 100% !important;
  position: relative !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(246, 239, 225, 0.16) !important;
  box-shadow: 0 20px 44px -26px rgba(0, 0, 0, 0.75) !important;
  aspect-ratio: 2 / 3 !important;
  background: #0f2451 !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
body.com_spmoviedb .item .movie-poster img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: inherit !important;
}
body.com_spmoviedb .item:hover .movie-poster {
  transform: translateY(-4px) !important;
  border-color: rgba(230, 183, 96, 0.5) !important;
  box-shadow: 0 28px 56px -24px rgba(0, 0, 0, 0.8) !important;
}
body.com_spmoviedb .item .movie-poster .play-icon {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(10, 26, 58, 0) !important;
  color: #fbf6ea !important;
  font-size: 40px !important;
  opacity: 0 !important;
  transition: opacity .2s ease, background .2s ease !important;
}
body.com_spmoviedb .item:hover .movie-poster .play-icon {
  opacity: 1 !important;
  background: rgba(10, 26, 58, 0.45) !important;
}
body.com_spmoviedb .item .movie-poster .play-icon i { color: #f0c873 !important; }
body.com_spmoviedb .item .movie-details { padding: 14px 2px 0 !important; }
body.com_spmoviedb .item .sp-moviedb-rating-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 6px !important;
}
body.com_spmoviedb .item .sp-moviedb-rating .star,
body.com_spmoviedb .item .star.active { color: #e6b760 !important; }
body.com_spmoviedb .item .spmoviedb-rating-summary {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  color: rgba(246, 239, 225, 0.7) !important;
}
body.com_spmoviedb .item .movie-title {
  font-family: 'Bodoni Moda', 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  color: #fbf6ea !important;
  margin: 0 0 4px !important;
}
body.com_spmoviedb .item .movie-name > a { text-decoration: none !important; }
body.com_spmoviedb .item:hover .movie-title { color: #f0c873 !important; }
body.com_spmoviedb .item .spmoviedb-genre-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #f0c873 !important;
  text-decoration: none !important;
}
@media (max-width: 980px) {
  body.com_spmoviedb .spmoviedb-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px 18px !important; }
}
@media (max-width: 640px) {
  body.com_spmoviedb .spmoviedb-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 14px !important; }
  body.com_spmoviedb .item .movie-title { font-size: 18px !important; }
  body.com_spmoviedb .moviedb-filters { gap: 12px !important; }
  body.com_spmoviedb .moviedb-filters ul.list-inline li a { min-width: 28px !important; padding: 5px 9px !important; font-size: 11px !important; }
}

/* =========================================================
   SP MOVIE DB - PROJECT DETAIL (view-movie) POLISH
   Buratino & all project detail pages. Cast/crew as large
   circular avatars, gold pill ticket buttons, showtime cards,
   gold section icons, stronger hero title contrast.
   ========================================================= */
/* hero title legibility over the busy banner */
body.com_spmoviedb.view-movie .movie-title {
  color: #fbf6ea !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.9), 0 0 46px rgba(0,0,0,.55) !important;
}
body.com_spmoviedb.view-movie .movie-info-warpper .tag,
body.com_spmoviedb.view-movie .movie-info .tag { color: #f0c873 !important; }

/* section heading icons -> gold */
body.com_spmoviedb.view-movie h3.title i,
body.com_spmoviedb.view-movie .spmoviedb-icon-story,
body.com_spmoviedb.view-movie .spmoviedb-icon-ticket { color: #e6b760 !important; }

/* (Buy Ticket button left as component default gold - resisted override; not worth fighting one control.) */
/* showtime rows -> playbill cards */
body.com_spmoviedb.view-movie .movie-schedule:has(a.buy-ticket) {
  background: rgba(246,239,225,.04) !important;
  border: 1px solid rgba(246,239,225,.14) !important;
  border-left: 3px solid #e6b760 !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  padding: 14px 18px !important;
}
body.com_spmoviedb.view-movie .movie-schedule .time,
body.com_spmoviedb.view-movie .movie-schedule [class*="time"] { color: #f0c873 !important; font-weight: 600 !important; }

/* ---- cast / crew: circular avatar with name to the RIGHT, vertically centered (larger, bolder) ---- */
body.com_spmoviedb.view-movie li.actors,
body.com_spmoviedb.view-movie li.director,
body.com_spmoviedb.view-movie li.instructors,
body.com_spmoviedb.view-movie li.crew {
  list-style: none !important;
  column-count: 1 !important;
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fbf6ea !important;
  line-height: 1.3 !important;
  text-align: left !important;
}
body.com_spmoviedb.view-movie li.actors > span,
body.com_spmoviedb.view-movie li.director > span,
body.com_spmoviedb.view-movie li.instructors > span,
body.com_spmoviedb.view-movie li.crew > span {
  display: block !important;
  margin-bottom: 8px !important;
}
body.com_spmoviedb.view-movie li.actors > span strong,
body.com_spmoviedb.view-movie li.director > span strong,
body.com_spmoviedb.view-movie li.instructors > span strong,
body.com_spmoviedb.view-movie li.crew > span strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #f0c873 !important;
}
body.com_spmoviedb.view-movie li.actors br,
body.com_spmoviedb.view-movie li.director br,
body.com_spmoviedb.view-movie li.instructors br,
body.com_spmoviedb.view-movie li.crew br { display: inline !important; }
body.com_spmoviedb.view-movie li.actors > a,
body.com_spmoviedb.view-movie li.director > a,
body.com_spmoviedb.view-movie li.instructors > a,
body.com_spmoviedb.view-movie li.crew > a {
  display: inline-block !important;
  vertical-align: middle !important;
  text-decoration: none !important;
  color: #fbf6ea !important;
}
body.com_spmoviedb.view-movie li.actors > a img,
body.com_spmoviedb.view-movie li.director > a img,
body.com_spmoviedb.view-movie li.instructors > a img,
body.com_spmoviedb.view-movie li.crew > a img {
  display: inline-block !important;
  width: 84px !important;
  height: 84px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  vertical-align: middle !important;
  margin: 8px 16px 8px 0 !important;
  border: 2px solid rgba(230,183,96,.55) !important;
  box-shadow: 0 0 0 4px rgba(230,183,96,.08) !important;
  transition: border-color .15s ease !important;
}
body.com_spmoviedb.view-movie li.actors > a:hover img,
body.com_spmoviedb.view-movie li.director > a:hover img,
body.com_spmoviedb.view-movie li.instructors > a:hover img,
body.com_spmoviedb.view-movie li.crew > a:hover img { border-color: #e6b760 !important; }

/* ---- "Recommend shows": 3 posters fill the full content width ---- */
body.com_spmoviedb.view-movie .recommend-movies .spmoviedb-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 22px !important;
  grid-template-columns: none !important;
  overflow: visible !important;
  padding: 6px 0 10px !important;
}
body.com_spmoviedb.view-movie .recommend-movies .spmoviedb-row::before,
body.com_spmoviedb.view-movie .recommend-movies .spmoviedb-row::after { content: none !important; display: none !important; }
body.com_spmoviedb.view-movie .recommend-movies .spmoviedb-row .item {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
body.com_spmoviedb.view-movie .recommend-movies .movie-poster img {
  width: 100% !important;
  height: auto !important;
}
/* ---- responsive ---- */
@media (max-width: 600px) {
  body.com_spmoviedb.view-movie li.actors,
  body.com_spmoviedb.view-movie li.director,
  body.com_spmoviedb.view-movie li.instructors,
  body.com_spmoviedb.view-movie li.crew { font-size: 15px !important; }
  body.com_spmoviedb.view-movie li.actors > a img,
  body.com_spmoviedb.view-movie li.director > a img,
  body.com_spmoviedb.view-movie li.instructors > a img,
  body.com_spmoviedb.view-movie li.crew > a img { width: 76px !important; height: 76px !important; margin-right: 14px !important; }
}

/* =========================================================
   PLAYBILL MARQUEE HERO (view-movie .movie-cover)
   Shortened cinematic banner, navy scrim, lower-left content
   block: gold eyebrow, Bodoni title, chips, Buy Tickets pill.
   ========================================================= */
body.com_spmoviedb.view-movie .movie-cover {
  position: relative !important;
  height: 470px !important;
  min-height: 0 !important;
  background-size: cover !important;
  background-position: center 28% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 1px rgba(230,183,96,.42) !important;
}
body.com_spmoviedb.view-movie .movie-cover::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(10,26,58,.78) 0%, rgba(10,26,58,.30) 46%, rgba(10,26,58,0) 72%),
    linear-gradient(180deg, rgba(10,26,58,.10) 0%, rgba(10,26,58,.34) 48%, rgba(10,26,58,.96) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
/* neutralize the offset column so the block anchors to the cover */
body.com_spmoviedb.view-movie .movie-cover .spmoviedb-col-sm-9 { position: static !important; margin-left: 0 !important; width: auto !important; float: none !important; }
body.com_spmoviedb.view-movie .movie-cover .spmoviedb-container { position: static !important; }
body.com_spmoviedb.view-movie .movie-cover .spmoviedb-row { position: static !important; }
body.com_spmoviedb.view-movie .movie-cover .movie-info-warpper {
  position: absolute !important;
  left: 0 !important; right: auto !important; top: auto !important; bottom: 0 !important;
  width: auto !important; max-width: 720px !important; margin: 0 !important;
  padding: 0 52px 46px !important; z-index: 2 !important; text-align: left !important;
}
body.com_spmoviedb.view-movie .movie-cover .movie-info { display: block !important; }
body.com_spmoviedb.view-movie .movie-cover .pull-left { float: none !important; width: auto !important; }
body.com_spmoviedb.view-movie .movie-cover .pull-right.count-rating-wrapper,
body.com_spmoviedb.view-movie .movie-cover .movie-social-icon { display: none !important; }
body.com_spmoviedb.view-movie .movie-cover .movie-info-warpper::before {
  content: '\25C6   Musical  \00B7  2026';
  display: block; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #f0c873; margin: 0 0 16px 2px;
}
body.com_spmoviedb.view-movie .movie-cover .movie-title {
  font-family: 'Bodoni Moda', Georgia, serif !important; font-weight: 500 !important;
  color: #fbf6ea !important; font-size: clamp(30px, 4.2vw, 54px) !important; line-height: 1.04 !important; white-space: nowrap !important; height: auto !important;
  margin: 0 0 18px !important; text-shadow: 0 2px 22px rgba(0,0,0,.7) !important;
}
body.com_spmoviedb.view-movie .movie-cover .tag {
  display: inline-block !important; background: rgba(230,183,96,.16) !important;
  border: 1px solid rgba(230,183,96,.5) !important; color: #f0c873 !important;
  padding: 7px 16px !important; border-radius: 999px !important;
  font-family: 'Manrope', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; margin: 0 10px 0 0 !important;
}
body.com_spmoviedb.view-movie .movie-cover .rating-star { display: inline-block !important; vertical-align: middle !important; margin: 0 !important; }
/* Buy Tickets pill (real link injected by JS as .bravo-hero-cta) */
body.com_spmoviedb.view-movie .movie-cover .bravo-hero-cta {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  margin-top: 24px !important; background: #e6b760 !important; color: #0a1a3a !important;
  font-family: 'Manrope', sans-serif !important; font-weight: 600 !important; font-size: 15px !important;
  padding: 14px 30px !important; border-radius: 999px !important; text-decoration: none !important;
  box-shadow: 0 16px 36px -16px rgba(230,183,96,.9) !important; transition: all .15s ease !important;
}
body.com_spmoviedb.view-movie .movie-cover .bravo-hero-cta:hover { background: #f0c873 !important; transform: translateY(-1px) !important; color: #0a1a3a !important; }
@media (max-width: 700px) {
  body.com_spmoviedb.view-movie .movie-cover { height: 340px !important; border-radius: 12px !important; }
  body.com_spmoviedb.view-movie .movie-cover .movie-info-warpper { padding: 0 22px 26px !important; max-width: none !important; right: 0 !important; }
  body.com_spmoviedb.view-movie .movie-cover .movie-title { font-size: 32px !important; margin-bottom: 12px !important; }
  body.com_spmoviedb.view-movie .movie-cover .movie-info-warpper::before { font-size: 11px !important; margin-bottom: 10px !important; }
  body.com_spmoviedb.view-movie .movie-cover .bravo-hero-cta { margin-top: 18px !important; padding: 12px 24px !important; font-size: 14px !important; }
}

/* =========================================================
   SP MOVIE DB - poster hover overlay + centered play button
   Full-poster dark overlay on hover with a gold play button in
   the middle; plays the show promo via the lightbox in
   mc-newsletter.js. Applies to projects grid + recommend shows.
   ========================================================= */
body.com_spmoviedb .item .movie-poster { position: relative !important; overflow: hidden !important; }
body.com_spmoviedb .item .movie-poster::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(10,26,58,.55); opacity: 0;
  transition: opacity .25s ease; pointer-events: none; z-index: 2;
}
body.com_spmoviedb .item .movie-poster:hover::after { opacity: 1; }
body.com_spmoviedb .item .movie-poster a.play-icon {
  position: absolute !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; margin: 0 !important;
  transform: translate(-50%,-50%) scale(.8) !important;
  width: 68px !important; height: 68px !important; min-width: 0 !important; border-radius: 50% !important;
  background: rgba(230,183,96,.97) !important; color: #0a1a3a !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  opacity: 0 !important; transition: opacity .25s ease, transform .25s ease, background .15s ease !important; z-index: 3 !important;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.7) !important; cursor: pointer !important;
}
body.com_spmoviedb .item .movie-poster:hover a.play-icon { opacity: 1 !important; transform: translate(-50%,-50%) scale(1) !important; }
body.com_spmoviedb .item .movie-poster a.play-icon:hover { background: #f0c873 !important; }
body.com_spmoviedb .item .movie-poster a.play-icon i { font-size: 27px !important; margin-left: 4px !important; line-height: 1 !important; color: #0a1a3a !important; }
@media (hover: none) {
  body.com_spmoviedb .item .movie-poster a.play-icon { opacity: 1 !important; transform: translate(-50%,-50%) scale(1) !important; }
  body.com_spmoviedb .item .movie-poster::after { opacity: .35; }
}

/* =========================================================
   PERFORMER PAGE REDESIGN (com_spmoviedb view-celebrity)
   Playbill marquee hero, circular portrait, Personal Info
   card, styled Biography, playbill Shows cards. Also resets
   the projects-grid rule that leaked onto .spmoviedb-row here.
   ========================================================= */
/* undo projects-grid leakage on performer pages */
body.com_spmoviedb.view-celebrity .spmoviedb-row { display: block !important; grid-template-columns: none !important; }
body.com_spmoviedb.view-celebrity .spmoviedb-row::before,
body.com_spmoviedb.view-celebrity .spmoviedb-row::after { content: none !important; display: none !important; }

/* ---- hero marquee ---- */
body.com_spmoviedb.view-celebrity .celebrity-cover {
  position: relative !important; height: 440px !important; min-height: 0 !important;
  background-size: cover !important; background-position: center 22% !important;
  border-radius: 18px !important; overflow: hidden !important; box-shadow: inset 0 0 0 1px rgba(230,183,96,.42) !important;
}
body.com_spmoviedb.view-celebrity .celebrity-cover::after {
  content: '' !important; position: absolute !important; inset: 0 !important;
  background: linear-gradient(90deg, rgba(10,26,58,.82) 0%, rgba(10,26,58,.32) 48%, rgba(10,26,58,0) 76%), linear-gradient(180deg, rgba(10,26,58,.10) 0%, rgba(10,26,58,.34) 48%, rgba(10,26,58,.96) 100%) !important;
  z-index: 1 !important; pointer-events: none !important;
}
body.com_spmoviedb.view-celebrity .celebrity-cover .spmoviedb-col-sm-9,
body.com_spmoviedb.view-celebrity .celebrity-cover .spmoviedb-container,
body.com_spmoviedb.view-celebrity .celebrity-cover .spmoviedb-row { position: static !important; margin-left: 0 !important; width: auto !important; float: none !important; }
body.com_spmoviedb.view-celebrity .celebrity-cover .celebrity-info-warpper {
  position: absolute !important; left: 0 !important; right: auto !important; top: auto !important; bottom: 0 !important;
  max-width: 780px !important; width: auto !important; margin: 0 !important; padding: 0 52px 44px !important; z-index: 2 !important; text-align: left !important;
}
body.com_spmoviedb.view-celebrity .celebrity-cover .celebrity-info > div { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
body.com_spmoviedb.view-celebrity .celebrity-cover span.designation {
  order: -1 !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 13px !important;
  letter-spacing: .22em !important; text-transform: uppercase !important; color: #f0c873 !important; margin: 0 0 14px 2px !important;
}
body.com_spmoviedb.view-celebrity .celebrity-cover span.designation::before { content: '\25C6   ' !important; }
body.com_spmoviedb.view-celebrity .celebrity-cover .celebrity-title {
  font-family: 'Bodoni Moda', Georgia, serif !important; font-weight: 500 !important; color: #fbf6ea !important;
  font-size: clamp(30px, 4.6vw, 56px) !important; line-height: 1.04 !important; white-space: nowrap !important; height: auto !important; min-height: 0 !important;
  margin: 0 0 16px !important; text-shadow: 0 2px 22px rgba(0,0,0,.7) !important;
}
body.com_spmoviedb.view-celebrity .celebrity-cover .movie-social-icon { margin-top: 6px !important; }
body.com_spmoviedb.view-celebrity .celebrity-cover .movie-social-icon span { color: rgba(246,239,225,.8) !important; font-family: 'Manrope', sans-serif !important; }

/* ---- section headings + icons ---- */
body.com_spmoviedb.view-celebrity .header-title h3.title,
body.com_spmoviedb.view-celebrity h3.title { font-family: 'Bodoni Moda', Georgia, serif !important; color: #fbf6ea !important; }
body.com_spmoviedb.view-celebrity .header-title i,
body.com_spmoviedb.view-celebrity .spmoviedb-icon-story,
body.com_spmoviedb.view-celebrity .spmoviedb-icon-film,
body.com_spmoviedb.view-celebrity .spmoviedb-icon-play { color: #e6b760 !important; }

/* ---- content layout: portrait sidebar + main column ---- */
body.com_spmoviedb.view-celebrity .celebrity-details-wrap .spmoviedb-row { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 34px !important; }
body.com_spmoviedb.view-celebrity .celebrity-info-sidebar { flex: 0 0 300px !important; width: 300px !important; max-width: 100% !important; float: none !important; margin: 0 !important; text-align: center !important; }
body.com_spmoviedb.view-celebrity .celebrity-info-warpper { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; float: none !important; margin: 0 !important; }

/* ---- circular portrait ---- */
body.com_spmoviedb.view-celebrity .celebrity-info-sidebar .item-img {
  width: 260px !important; height: 260px !important; border-radius: 50% !important; overflow: hidden !important;
  border: 2px solid rgba(230,183,96,.6) !important; box-shadow: 0 0 0 6px rgba(230,183,96,.08), 0 18px 40px -22px rgba(0,0,0,.8) !important; margin: 0 auto !important;
}
body.com_spmoviedb.view-celebrity .celebrity-info-sidebar .item-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; display: block !important; }

/* ---- personal info card ---- */
body.com_spmoviedb.view-celebrity .spmoviedb-details-wrapper {
  background: rgba(246,239,225,.04) !important; border: 1px solid rgba(246,239,225,.14) !important; border-radius: 14px !important;
  padding: 18px 20px !important; margin-top: 18px !important; text-align: left !important;
}
body.com_spmoviedb.view-celebrity .spmoviedb-details-wrapper ul { margin: 0 !important; padding: 0 !important; }
body.com_spmoviedb.view-celebrity .spmoviedb-details-wrapper ul li { list-style: none !important; color: #fbf6ea !important; font-family: 'Manrope', sans-serif !important; padding: 6px 0 !important; border-bottom: 1px solid rgba(246,239,225,.08) !important; }
body.com_spmoviedb.view-celebrity .spmoviedb-details-wrapper ul li:last-child { border-bottom: 0 !important; }
body.com_spmoviedb.view-celebrity .spmoviedb-details-wrapper ul li span:first-child,
body.com_spmoviedb.view-celebrity .spmoviedb-details-wrapper ul li strong { color: #f0c873 !important; font-family: 'JetBrains Mono', monospace !important; font-size: 12px !important; letter-spacing: .06em !important; text-transform: uppercase !important; }

/* ---- biography ---- */
body.com_spmoviedb.view-celebrity .celebrity-details p,
body.com_spmoviedb.view-celebrity .celebrity-details span { color: rgba(246,239,225,.86) !important; font-family: 'Manrope', sans-serif !important; line-height: 1.7 !important; }

/* ---- shows -> playbill cards ---- */
body.com_spmoviedb.view-celebrity .spmoviedb-film-list { list-style: none !important; padding: 0 !important; margin: 14px 0 0 !important; }
body.com_spmoviedb.view-celebrity .spmoviedb-film-list li.main-title { background: none !important; border: 0 !important; padding: 0 6px 8px !important; display: flex !important; justify-content: space-between !important; }
body.com_spmoviedb.view-celebrity .spmoviedb-film-list li.main-title p { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #f0c873 !important; margin: 0 !important; }
body.com_spmoviedb.view-celebrity .spmoviedb-film-list li:not(.main-title) {
  background: rgba(246,239,225,.04) !important; border: 1px solid rgba(246,239,225,.14) !important; border-left: 3px solid #e6b760 !important;
  border-radius: 12px !important; margin-bottom: 10px !important; padding: 12px 18px !important; display: flex !important; align-items: center !important; justify-content: space-between !important;
}
body.com_spmoviedb.view-celebrity .spmoviedb-film-list li .details { float: none !important; display: flex !important; align-items: center !important; gap: 14px !important; }
body.com_spmoviedb.view-celebrity .spmoviedb-film-list h4.celebrity-title { font-family: 'Bodoni Moda', Georgia, serif !important; font-weight: 500 !important; color: #fbf6ea !important; font-size: 20px !important; margin: 0 !important; }
body.com_spmoviedb.view-celebrity .spmoviedb-film-list .sp-moviedb-rating-wrap { float: none !important; }
body.com_spmoviedb.view-celebrity .spmoviedb-film-list .star.active,
body.com_spmoviedb.view-celebrity .spmoviedb-film-list .star { color: #e6b760 !important; }

/* "Show Name" header label (replaces "Movie Name") */
body.com_spmoviedb.view-celebrity .spmoviedb-film-list .main-title .pull-left { font-size: 0 !important; }
body.com_spmoviedb.view-celebrity .spmoviedb-film-list .main-title .pull-left::after { content: 'Show Name'; font-size: 11px; letter-spacing: .16em; }
html[lang^="ru"] body.com_spmoviedb.view-celebrity .spmoviedb-film-list .main-title .pull-left::after { content: 'Спектакль'; }

@media (max-width: 780px) {
  body.com_spmoviedb.view-celebrity .celebrity-details-wrap .spmoviedb-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; }
  body.com_spmoviedb.view-celebrity .celebrity-info-sidebar { order: -1 !important; width: 100% !important; max-width: none !important; flex: 0 0 auto !important; margin: 0 0 26px !important; }
  body.com_spmoviedb.view-celebrity .celebrity-info-warpper { width: 100% !important; flex: 0 0 auto !important; }
  body.com_spmoviedb.view-celebrity .celebrity-cover { height: 260px !important; min-height: 0 !important; border-radius: 12px !important; }
  body.com_spmoviedb.view-celebrity .celebrity-cover .celebrity-info { padding-top: 0 !important; padding-bottom: 0 !important; }
  body.com_spmoviedb.view-celebrity .celebrity-cover .celebrity-info-warpper { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; padding: 0 22px 24px !important; }
  body.com_spmoviedb.view-celebrity .celebrity-cover .celebrity-title { white-space: normal !important; font-size: 28px !important; line-height: 1.12 !important; }
  body.com_spmoviedb.view-celebrity .spmoviedb-film-list li:not(.main-title) { flex-wrap: wrap !important; }
}

/* =========================================================
   PERFORMERS LISTING (com_spmoviedb view-celebrities)
   Gold pill alphabet filter (matches projects) + polished
   performer cards (framed photos, Bodoni names, gold roles).
   Filtering stays server-side (?alphaindex) so it covers all
   237 performers across the paginated list.
   ========================================================= */
/* filter bar -> gold pills */
body.com_spmoviedb.view-celebrities .moviedb-filters .pull-left ul,
body.com_spmoviedb.view-celebrities .moviedb-filters ul { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; }
body.com_spmoviedb.view-celebrities .moviedb-filters li { margin: 0 !important; }
body.com_spmoviedb.view-celebrities .moviedb-filters li a {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 36px !important; height: 36px !important; padding: 0 13px !important; border-radius: 999px !important;
  border: 1px solid rgba(246,239,225,.2) !important; color: rgba(246,239,225,.82) !important;
  font-family: 'Manrope', sans-serif !important; font-weight: 600 !important; font-size: 13px !important;
  text-transform: uppercase !important; text-decoration: none !important; transition: all .15s ease !important;
}
body.com_spmoviedb.view-celebrities .moviedb-filters li a:hover { border-color: #e6b760 !important; color: #f0c873 !important; }
body.com_spmoviedb.view-celebrities .moviedb-filters li.active a { background: #e6b760 !important; border-color: #e6b760 !important; color: #0a1a3a !important; }

/* performer cards */
body.com_spmoviedb.view-celebrities .celebritie-poster {
  position: relative !important; border-radius: 14px !important; overflow: hidden !important;
  aspect-ratio: 3 / 4 !important; height: auto !important; background: #0a1a3a !important; border: 1px solid rgba(246,239,225,.1) !important;
}
body.com_spmoviedb.view-celebrities .celebritie-poster img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; transition: transform .35s ease !important; }
body.com_spmoviedb.view-celebrities .item:hover .celebritie-poster img { transform: scale(1.05) !important; }
body.com_spmoviedb.view-celebrities .celebritie-poster::after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, transparent 55%, rgba(10,26,58,.7) 100%) !important; opacity: 0 !important; transition: opacity .25s ease !important; }
body.com_spmoviedb.view-celebrities .item:hover .celebritie-poster::after { opacity: 1 !important; }
body.com_spmoviedb.view-celebrities .celebritie-poster a.play-icon {
  position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important;
  display: flex !important; align-items: flex-end !important; padding: 0 0 14px 16px !important;
  background: none !important; opacity: 1 !important; color: #f0c873 !important; text-decoration: none !important; cursor: pointer !important;
  font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase !important; z-index: 2 !important;
}
body.com_spmoviedb.view-celebrities .celebritie-poster a.play-icon::after { opacity: 0 !important; transition: opacity .25s ease !important; }
body.com_spmoviedb.view-celebrities .item:hover .celebritie-poster a.play-icon::after { opacity: 1 !important; }
body.com_spmoviedb.view-celebrities .celebritie-poster a.play-icon i { display: none !important; }
body.com_spmoviedb.view-celebrities .celebritie-poster a.play-icon::after { content: 'View profile \2192' !important; }
body.com_spmoviedb.view-celebrities .celebritie-details { padding-top: 14px !important; }
body.com_spmoviedb.view-celebrities .celebritie-name a { font-family: 'Bodoni Moda', Georgia, serif !important; font-weight: 500 !important; color: #fbf6ea !important; font-size: 21px !important; text-decoration: none !important; }
body.com_spmoviedb.view-celebrities .celebritie-name a:hover { color: #f0c873 !important; }
body.com_spmoviedb.view-celebrities .celebritie-name span { display: block !important; margin-top: 4px !important; font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #f0c873 !important; }

@media (max-width: 640px) {
  body.com_spmoviedb.view-celebrities .moviedb-filters li a { min-width: 32px !important; height: 32px !important; padding: 0 10px !important; font-size: 12px !important; }
  body.com_spmoviedb.view-celebrities .celebritie-name a { font-size: 18px !important; }
}

/* =========================================================
   MOBILE SIDE-PADDING FIX (worked pages) + performer name fix
   The nested wrappers (.g-content + .platform-content +
   .col + .spmoviedb-row) stacked ~77px of side padding on
   phones, squeezing columns and overlapping performer names.
   ========================================================= */
/* flatten performers grid into one continuous grid (component renders
   rows of 3, which left uneven image gaps); filter spans full width,
   rows -> display:contents so items flow. Side gutter reduced via JS
   inline padding (template uses an id rule that beats class selectors). */
body.com_spmoviedb.view-celebrities .sp-moviedb-view-celebrities { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 30px 24px !important; }
body.com_spmoviedb.view-celebrities .sp-moviedb-view-celebrities > .moviedb-filters { grid-column: 1 / -1 !important; }
body.com_spmoviedb.view-celebrities .sp-moviedb-view-celebrities > .spmoviedb-row { display: contents !important; }
body.com_spmoviedb.view-celebrities .sp-moviedb-view-celebrities > .item { width: 100% !important; max-width: none !important; float: none !important; }
body.com_spmoviedb.view-celebrities .sp-moviedb-view-celebrities > .item .celebritie-poster { width: 100% !important; height: auto !important; }
body.com_spmoviedb.view-celebrities .platform-content.container { padding-left: 0 !important; padding-right: 0 !important; }
body.com_spmoviedb.view-celebrities .col { padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 980px) {
  body.com_spmoviedb.view-celebrities .sp-moviedb-view-celebrities { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 640px) {
  body.com_spmoviedb.view-celebrities .sp-moviedb-view-celebrities { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 24px 12px !important; }
  body.com_spmoviedb.view-celebrities .celebritie-name a { font-size: 15px !important; overflow-wrap: break-word !important; word-break: break-word !important; line-height: 1.15 !important; }
  body.com_spmoviedb.view-celebrities .celebritie-name span { font-size: 10px !important; overflow-wrap: break-word !important; }
}

/* client-side performers pagination (server pagination redirect is broken) */
body.com_spmoviedb.view-celebrities .bravo-celeb-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 34px 0 10px; }
body.com_spmoviedb.view-celebrities .bravo-celeb-pagination .bcp-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px;
  border-radius: 999px; border: 1px solid rgba(246,239,225,.2); background: transparent; color: rgba(246,239,225,.82);
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 14px; cursor: pointer; transition: all .15s ease;
}
body.com_spmoviedb.view-celebrities .bravo-celeb-pagination .bcp-btn:hover:not(.disabled) { border-color: #e6b760; color: #f0c873; }
body.com_spmoviedb.view-celebrities .bravo-celeb-pagination .bcp-btn.active { background: #e6b760; border-color: #e6b760; color: #0a1a3a; }
body.com_spmoviedb.view-celebrities .bravo-celeb-pagination .bcp-btn.disabled { opacity: .4; cursor: default; }
body.com_spmoviedb.view-celebrities .celebritie-poster { cursor: pointer !important; }