/* ============================================================
   Gypsy Pistoleros — v0.css site-wide bundle
   Generated from css/v0.css source files
   Paste into Bandzoogle: Design → Customize CSS

   Do NOT edit this file directly — edit the source files in
   css/ and rerun scripts/build-v0-bundle.sh
   Generated: 2026-05-26 22:04 UTC
   ============================================================ */

/* ========================================
   css/variables.css
   ======================================== */
/* Gypsy Pistoleros — variables.css */
/* Part of the AUSTIN_SPACE build — May 2026 */
/* DO NOT edit directly in Bandzoogle — always edit here first */


:root {
  /* ==========================================
     BACKGROUNDS
     ========================================== */
  --color-bg-primary: #000000;
  --color-bg-secondary: #111111;
  --color-bg-elevated: #0f0f0f;

  /* ==========================================
     ACCENTS — pulled from Dark Faerie Tales vinyl artwork
     ========================================== */

  /* Neon green with black splatter vinyl */
  --color-accent-green: #39ff14;
  --color-accent-green-muted: #1a7a0a;
  --color-accent-green-dark: #2dcc10;   /* ~20% darker than #39ff14 — flat button hover */

  /* Neon purple with black splatter vinyl */
  --color-accent-purple: #bf00ff;
  --color-accent-purple-muted: #6b0099;

  /* Blood red — gothic secondary */
  --color-accent-red: #8b0000;
  --color-accent-red-bright: #cc0000;

  /* Gold — RETIRED for design-system roles. Retained for the yellow star rating
     fill only (functional/semantic, not decorative). Do not use for new design work. */
  --color-accent-gold: #c9a84c;

  /* Silver — secondary button; mirrors gold primary structure in cool metal tone */
  --color-silver: #c0c0c0;
  --color-silver-dark: #909090;

  /* Electric blue — high saturation neon accent; use for decorative hairline icons */
  --color-accent-blue: #00bfff;

  /* Hot pink — decorative accent on hairlines and hero divider feather */
  --color-accent-pink: #ff2d92;
  --color-accent-pink-muted: #d12579;

  /* ==========================================
     TEXT
     ========================================== */
  --color-text-primary: #e8e8e0;      /* off-white, not harsh */
  --color-text-secondary: #a0a090;    /* muted for secondary content */
  --color-text-accent: #39ff14;       /* green for links/highlights */

  /* ==========================================
     BORDERS
     ========================================== */
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-accent: rgba(57, 255, 20, 0.3);

  /* ==========================================
     TYPOGRAPHY
     ========================================== */

  /* ---- Two-font system (Georgia display + Inter body) ---- */

  /* Display — Georgia: all heading and display roles at any size */
  --font-display: Georgia, 'Times New Roman', serif;

  /* V2 BUNDLE TOKENS — Active for cult-membership.html via
     gypsy-pistoleros.css (loads cult-gathering.css, cg-inscribed.css,
     hero-v2.css, press-pasteup.css). NOT consumed by the v0 bundle
     (active staging pages). When cult-membership deploys, these tokens
     become production-active for that page. Do not delete without
     verifying every consumer in BOTH bundles. */
  --font-display-secondary: 'Cinzel', Georgia, serif;
  --font-cinzel-min: 1.125rem;
  --font-cinzel-max: 1.9375rem;
  --font-display-tertiary: 'Cormorant Garamond', Georgia, serif;

  /* Body / UI — Inter */
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Courier New', monospace;

  /* Scale */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  1.875rem;   /*  30px */
  --text-4xl:  2.25rem;    /*  36px */
  --text-5xl:  3rem;       /*  48px */
  --text-6xl:  3.75rem;    /*  60px */

  /* ==========================================
     SPACING & LAYOUT
     ========================================== */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  --max-width:     1200px;
  --content-width: 800px;
}

/* ==========================================
   WEB AWESOME 3.7.0 — DESIGN TOKEN OVERRIDES
   WA components read their own --wa-* tokens.
   Overriding them here means wa-button, wa-icon etc.
   automatically inherit our brand palette without
   needing per-element style attributes.

   Verify these names against WA docs if a component
   isn't picking up the expected value — WA 3.x
   introduced a revised token namespace.
   ========================================== */
:root {
  /* Primary / brand colour → neon green (replaces purple for highlights/hover/focus) */
  --wa-color-brand-600:      #39ff14;
  --wa-color-brand-700:      #2dd610;   /* hover/active state */
  --wa-color-brand-500:      #5fff3a;   /* lighter tint */
  --wa-color-brand-50:       #001a00;   /* subtle tinted bg */

  /* Neutral surface → our dark backgrounds */
  --wa-color-neutral-0:      #0a0a0a;
  --wa-color-neutral-50:     #111111;
  --wa-color-neutral-100:    #1a1a1a;
  --wa-color-neutral-200:    #2a2a2a;
  --wa-color-neutral-700:    #a0a090;
  --wa-color-neutral-900:    #e8e8e0;
  --wa-color-neutral-950:    #f0f0e8;

  /* Danger → blood red accent */
  --wa-color-danger-600:     #cc0000;
  --wa-color-danger-700:     #8b0000;

  /* Border radius → matches our --radius-* scale */
  --wa-border-radius-small:  2px;   /* = --radius-sm */
  --wa-border-radius-medium: 4px;   /* = --radius-md */
  --wa-border-radius-large:  8px;   /* = --radius-lg */
  --wa-border-radius-x-large: 12px;

  /* Typography → matches our --font-* values */
  --wa-font-sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;
  --wa-font-mono:  'Courier New', monospace;

  /* Font size scale → matches our --text-* scale */
  --wa-font-size-x-small:  0.75rem;    /* = --text-xs */
  --wa-font-size-small:    0.875rem;   /* = --text-sm */
  --wa-font-size-medium:   1rem;       /* = --text-base */
  --wa-font-size-large:    1.125rem;   /* = --text-lg */
  --wa-font-size-x-large:  1.25rem;    /* = --text-xl */
  --wa-font-size-2x-large: 1.5rem;     /* = --text-2xl */

  /* Focus ring → green to match our accent */
  --wa-focus-ring-color:   rgba(57, 255, 20, 0.5);
  --wa-focus-ring-width:   2px;
}

/* BUTTON HIERARCHY — strictly enforced (Pass 9d) */
/* Neon pink (variant="brand"): primary conversion actions (join, buy, subscribe) */
/* Neon green (variant="neutral"): secondary discovery actions (explore, learn more, see all) */
/* Purple: text links and nav accent ONLY — never on buttons */

/* ========================================
   css/components/icons.css
   ======================================== */
/* ================================================
   ICON STYLES — Font Awesome Pro Thin (fa-thin)
   Loaded via FA Pro Kit: kit.fontawesome.com/6a400036f2.js
   staging/cult-membership.html · staging/staging-wrapper.html
   Built by AUSTIN_SPACE — May 2026
   ================================================ */

/* Base thin icon colour — silver (decorative default) */
i.fa-thin {
  color: var(--color-silver);
}

/* Benefit card icons — 3.5rem silver */
.benefit-card-content i.fa-thin {
  font-size: 3.5rem;
  color: var(--color-silver);
}

/* Membership panel benefit icons */
.membership-benefit i.fa-thin {
  color: var(--color-silver);
  font-size: 1rem;
  flex-shrink: 0;
}

/* ========================================
   css/components/typography.css
   ======================================== */
/* Gypsy Pistoleros — typography.css */
/* Part of the AUSTIN_SPACE build — May 2026 */
/* DO NOT edit directly in Bandzoogle — always edit here first */

/* ==========================================
   FONT LOADING
   ========================================== */

/* Tier 1 — Bleeding Cowboys (≥ 32px / 2rem) */
/* Local staging: paths relative to css/components/ */
/* Bandzoogle: swap src to url('/files/Bleeding_Cowboys.woff2') etc. */
@font-face {
  font-family: 'BleedingCowboys';
  src: url('../../staging/assets/fonts/Bleeding_Cowboys.woff2') format('woff2'),
       url('../../staging/assets/fonts/Bleeding_Cowboys.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Tier 2 — Cinzel (18px–31px / 1.125rem–1.9375rem)
   Tier 3 — Cormorant Garamond (editorial italic, quotes, descriptions)
   Both loaded via Google Fonts <link> in <head>.
   For Bandzoogle: add the same Google Fonts link to Headers & Metatags */

/* ==========================================
   THREE-TIER FONT THRESHOLD SYSTEM

   ≥ 32px (2rem)             → --font-display       (Bleeding Cowboys)
   18px–31px (1.125–1.9375rem) → --font-display-secondary (Cinzel)
   < 18px                    → --font-body           (Inter)

   Cormorant Garamond (--font-display-tertiary) is an editorial/accent
   font used at any size for quotes, press text, and product descriptions.
   It is always italic in this build.
   ========================================== */

/* ==========================================
   BASE
   ========================================== */

html {
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   H1–H2: Bleeding Cowboys (≥ 32px / 2rem)
   clamp() guarantees the 2rem floor
   ========================================== */

h1, h2 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: var(--space-4);
}

/* h1: hero/page title — 60px cap, 2rem floor */
h1 { font-size: clamp(2rem, 6vw, var(--text-6xl)); }

/* h2: section heading — 32px floor, 48px cap */
h2 { font-size: clamp(2rem, 4vw, 2.5rem); }

/* ==========================================
   H3: Georgia, display tier, sub-section role
   H4–H5: Inter, label tier
   ========================================== */

/* h3 — Georgia, display tier, sub-section role */
h3 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: clamp(1.125rem, 2.5vw, var(--text-3xl));
  margin-top: 0;
  margin-bottom: var(--space-3);
}

/* h4 — Inter, label tier */
h4 {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--text-xl);
  margin-top: 0;
  margin-bottom: var(--space-3);
}

/* h5 — Inter, label tier, smaller */
h5 {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1.125rem;
  margin-top: 0;
  margin-bottom: var(--space-3);
}

/* ==========================================
   H6: Inter (below 18px threshold)
   ========================================== */

h6 {
  font-family: var(--font-body);
  font-size: var(--text-base); /* 16px */
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: var(--space-2);
}

/* ==========================================
   BODY TEXT
   ========================================== */

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-top: 0;
  margin-bottom: var(--space-4);
}

p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--color-text-primary); }
em, i     { font-style: italic; }

small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ==========================================
   LINKS
   ========================================== */

a {
  color: var(--color-text-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover { color: var(--color-accent-green); }

/* ==========================================
   SITE HEADER / BAND NAME
   Bleeding Cowboys — well above 2rem floor
   ========================================== */

.site-header {
  padding: var(--space-12) var(--space-8);
  text-align: center;
  background-color: var(--color-bg-primary);
}

.site-header h1,
.site-title h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, var(--text-6xl));
  color: var(--color-text-primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.site-tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* ==========================================
   NAVIGATION LINKS — Inter, UI chrome
   1.5rem = 24px desktop
   ========================================== */

.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-2xl);  /* 1.5rem / 24px */
  font-weight: 400;
  color: var(--color-text-primary);
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.nav-link:hover { color: var(--color-accent-purple); }

/* ==========================================
   PRESS QUOTES / EDITORIAL
   ========================================== */

.text-quote,
blockquote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-2xl); /* 24px — editorial weight */
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-primary);
  margin: 0;
}

blockquote cite,
.text-quote-source {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  display: block;
  margin-top: var(--space-3);
}

/* ==========================================
   FOOTER BRAND NAME — Bleeding Cowboys (≥ 2rem)
   ========================================== */

.site-footer__brand h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, var(--text-3xl));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}


/* ========================================
   css/components/navigation.css
   ======================================== */
/* Gypsy Pistoleros — navigation.css */
/* Part of the AUSTIN_SPACE build — May 2026 */
/* DO NOT edit directly in Bandzoogle — always edit here first */

/* ==========================================
   NAV STRUCTURE
   HTML order inside <nav class="site-nav">:
   1. <input type="checkbox" class="nav-toggle-input">  ← hidden, state only
   2. <label class="nav-toggle-label">                  ← hamburger icon
   3. <ul class="nav-list">                             ← actual links
   CSS sibling selector (~) requires this order.
   ========================================== */

/* ---- Checkbox — visually hidden, state only ---- */
.nav-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Hamburger label — desktop: hidden ---- */
.nav-toggle-label {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 14px 20px;
  min-width: 44px; /* touch target */
  min-height: 44px;
  margin-left: auto; /* push to right edge */
  user-select: none;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text-primary);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Hamburger → X when open */
.nav-toggle-input:checked ~ .nav-toggle-label .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle-input:checked ~ .nav-toggle-label .nav-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle-input:checked ~ .nav-toggle-label .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Nav container ---- */
.site-nav {
  background-color: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  position: relative;
}

/* ---- Desktop: horizontal list ---- */
.nav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.nav-list li {
  display: flex;
}

/* Nav link: Cinzel at exactly the Cinzel-min threshold (1.5rem = 24px, within 18–31px range) */
/* Styling is in typography.css — only layout here */
.nav-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  white-space: nowrap;
}

/* ---- "Join The Cult" — always purple, all breakpoints ---- */
.nav-link--cta {
  color: var(--color-accent-purple) !important;
  border-left: 1px solid var(--color-border-subtle);
}

.nav-link--cta:hover {
  color: var(--color-accent-green) !important;
}

/* ==========================================
   MOBILE — 768px and below
   ========================================== */
@media (max-width: 768px) {

  /* Nav container becomes a column */
  .site-nav {
    display: flex;
    flex-direction: column;
  }

  /* Show hamburger label */
  .nav-toggle-label {
    display: flex;
    align-self: flex-end;
  }

  /* Nav list: hidden by default, full-width column when open */
  .nav-list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-subtle);
    padding: var(--space-3) 0;
    gap: 0;
  }

  /* Show nav list when checkbox is checked */
  .nav-toggle-input:checked ~ .nav-list {
    display: flex;
  }

  /* Stack items full-width, centred text */
  .nav-list li {
    width: 100%;
    justify-content: center;
  }

  .nav-link {
    width: 100%;
    text-align: center;
    padding: var(--space-3) var(--space-8);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .nav-list li:last-child .nav-link {
    border-bottom: none;
  }

  /* CTA link loses left-border treatment on mobile (it's stacked) */
  .nav-link--cta {
    border-left: none;
  }
}

/* ==========================================
   NARROW MOBILE — 375px
   ========================================== */
@media (max-width: 375px) {
  .nav-link {
    padding: var(--space-3) var(--space-4);
    font-size: 1.125rem; /* hold at 18px minimum (literal 1.125rem after token retirement) */
  }
}

/* ========================================
   css/components/footer.css
   ======================================== */
/* ==========================================
   footer.css — Brand footer styles

   Pairs with staging/_brand-footer-feature-row.html.
   The Feature Row block is DOM-portable and carries structure only;
   all styling lives here.

   This file styles the CUSTOM BRAND FOOTER only (band name, tagline,
   social icons, AUSTIN_SPACE credit). Bandzoogle's INJECTED site-wide
   footer (#site-wide-footer with the copyright text feature and member
   nav) is a separate concern — its real selectors are documented in
   docs/bandzoogle-injected-markup.md and will be styled during v2 work.
   ========================================== */

/* ==========================================
   FOOTER WRAPPER
   ========================================== */

.site-footer {
  padding: 48px 24px;
  text-align: center;
  border-top: 1px solid var(--color-border-subtle);
}

/* ==========================================
   BRAND BLOCK (name + tagline)
   .site-footer__brand h3 is styled in typography.css
   .site-tagline is styled in typography.css
   ========================================== */

.site-footer__brand {
  margin-bottom: 24px;
}

/* ==========================================
   SOCIAL ICON ROW
   ========================================== */

.site-footer__social {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

/* ==========================================
   SOCIAL LINK ANCHORS
   font-size set here so wa-icon (which inherits font-size
   from its parent) renders at 24px
   ========================================== */

.footer-social-link {
  color: var(--color-text-secondary);
  font-size: 24px;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-social-link:hover {
  color: var(--color-text-primary);
}

.footer-social-link:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ========================================
   css/components/reviews.css
   ======================================== */
/* ==========================================
   reviews.css — Review card grid styles
   Part of the AUSTIN_SPACE build — May 2026

   v0 baseline only. No v2 styling flourishes —
   no Bleeding Cowboys, no gold accents, no textures,
   no Cinzel uppercase. All decoration deferred to v2.

   Pairs with js/reviews.js (renderer) and
   data/reviews.json (dataset).
   ========================================== */

/* ==========================================
   GRID LAYOUT
   ========================================== */

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

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

/* ==========================================
   CARD
   ========================================== */

.review-card {
  width: 100%;
  background-color: var(--color-bg-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  height: 100%;
  /* WA card internal dividers (header/body and body/footer borders).
     Override both token approaches to match the outer card border. */
  --wa-color-neutral-border-normal: rgba(255, 255, 255, 0.2);
  --wa-color-neutral-border-quiet: rgba(255, 255, 255, 0.2);
}

/* Push card body to fill remaining height so footer always sits at bottom */
.review-card::part(body) {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Fallback for WA token approach: set divider border-color directly on parts */
.review-card::part(header),
.review-card::part(footer) {
  border-color: rgba(255, 255, 255, 0.2);
}

/* ==========================================
   CARD HEADER — publication logo or name
   ========================================== */

.review-card__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 48px;
}

.review-card__logo {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

/* Publication titles use --font-display (Bleeding Cowboys).
   At 14px this is below the design system's 32px floor and may
   render with some flourish collapse — accept this for v0.
   The .woff files are currently NOT uploaded to Bandzoogle, so
   this renders as the @font-face fallback (Georgia) until that
   upload happens. */
.review-card__publication {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-primary);
}

/* ==========================================
   CARD BODY — quote
   ========================================== */

/* margin !important — beats Bandzoogle's
   #usersite-container blockquote { margin: 1em 0; } override.
   See bandzoogle-overrides.css header.
   border-inline-start/padding-inline-start — beats WA's native
   blockquote { border-inline-start: ... } rule. Using logical properties
   to match WA's own property names. Class selector (0,1,0) beats
   WA-native element selector (0,0,1) — no !important needed. */
.review-card__quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-primary);
  margin: 0 !important;
  border-inline-start: none;
  padding-inline-start: 0;
}

/* ==========================================
   CARD FOOTER — rating + reviewer credit
   ========================================== */

.review-card__footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.review-card__rating {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.review-card__score {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.review-card__reviewer {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-style: normal;
}

/* Reserves a small amount of footer slot height for cards with
   no rating/reviewer so the slot doesn't collapse entirely. Kept
   intentionally smaller (16px) than typical real footer content
   (~20px) so cards with actual footers drive the row height.
   visibility: hidden keeps the element occupying space while
   hiding visual presence. */
.review-card__footer-placeholder {
  display: inline-block;
  min-height: 16px;
  visibility: hidden;
}


/* ==========================================
   TABLE MODE — used on press kit for press scannability.
   See Pass 7e. Card mode is the default; this is opt-in via
   data-reviews-render="table" on the reviews container.
   ========================================== */

.reviews-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  margin-top: var(--space-6);
  font-family: var(--font-body);
  color: var(--color-text-primary);
}

.reviews-table thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-silver);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-silver);
}

.reviews-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.15s ease;
}

.reviews-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.reviews-table tbody td {
  padding: var(--space-4);
  vertical-align: top;
  font-size: var(--text-base);
  line-height: 1.6;
}

.reviews-table__pub {
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.reviews-table__reviewer {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.reviews-table__quote {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-text-secondary);
}

.reviews-table__stars {
  white-space: nowrap;
  text-align: right;
}

.reviews-table__score {
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-silver);
  text-align: right;
}

@media (max-width: 768px) {
  .reviews-table thead {
    display: none;
  }

  .reviews-table tbody tr {
    display: block;
    padding: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .reviews-table tbody td {
    display: block;
    padding: var(--space-1) 0;
    border: none;
  }

  .reviews-table tbody td:before {
    content: attr(data-label) ': ';
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-right: var(--space-2);
  }
}

/* ========================================
   css/components/buttons-v0.css
   ======================================== */
/* ============================================================
   buttons-v0.css — v0 button styling

   Overrides Web Awesome's default wa-button visual treatment with
   the Gypsy Pistoleros v0 button palette:

     Primary (variant="brand")     — neon pink bg, white text
     Secondary (variant="neutral") — neon green bg, black text

   Both use Inter 14px weight 600 with subtle letter-spacing.

   Flat buttons: 2px black border, colour-shift hover. No shadow,
   no transform. The chunky 3D shadow pattern from Pass 6h/6i
   was retired — see docs/design-system.md §8.

   Applies site-wide. All v0 pages inherit these styles.

   Web Awesome custom elements have shadow DOM — styling requires
   ::part() selectors. See https://webawesome.com/docs/buttons for
   the part anatomy.
   ============================================================ */


/* ===== Primary — neon pink ===== */
wa-button[variant="brand"]::part(base) {
  background-color: var(--color-accent-pink);
  color: #ffffff;
  border: 2px solid #000;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: background-color 0.15s ease;
}

wa-button[variant="brand"]:hover::part(base),
wa-button[variant="brand"]:active::part(base) {
  background-color: var(--color-accent-pink-muted);   /* #d12579 — ~18% darker */
}


/* ===== Secondary — neon green ===== */
wa-button[variant="neutral"]::part(base) {
  background-color: var(--color-accent-green);
  color: #000000;
  border: 2px solid #000;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: background-color 0.15s ease;
}

wa-button[variant="neutral"]:hover::part(base),
wa-button[variant="neutral"]:active::part(base) {
  background-color: var(--color-accent-green-dark);   /* #2dcc10 — ~20% darker */
}


/* ===== Label part — ensures Inter applies to the actual text ===== */
wa-button[variant="brand"]::part(label),
wa-button[variant="neutral"]::part(label) {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
}


/* ===== Disabled state — Pass 8c =====
   WA's default disabled state on variant="brand" produces a
   desaturated red that reads as "error". Override to a muted
   neutral grey consistent with the dark theme.
   Applies site-wide: homepage upcoming cards, shows page cards,
   press-kit Full Press Bundle download button. */

wa-button[variant="brand"][disabled]::part(base),
wa-button[variant="neutral"][disabled]::part(base),
wa-button[disabled]::part(base) {
  background-color: var(--color-text-secondary);
  color: var(--color-bg-primary);
  border: 2px solid #000;
  cursor: not-allowed;
  opacity: 0.7;
}

wa-button[variant="brand"][disabled]:hover::part(base),
wa-button[variant="brand"][disabled]:active::part(base),
wa-button[variant="neutral"][disabled]:hover::part(base),
wa-button[variant="neutral"][disabled]:active::part(base),
wa-button[disabled]:hover::part(base),
wa-button[disabled]:active::part(base) {
  background-color: var(--color-text-secondary);
}

/* ========================================
   css/components/homepage.css
   ======================================== */
/* ==========================================
   homepage.css — Homepage section styles
   Part of the AUSTIN_SPACE build — May 2026

   v0 baseline only. No v2 styling flourishes.
   Colour tokens from variables.css throughout.
   No hardcoded colour values except gradient
   overlays (rgba black) which are computed
   overlay values, not brand colours.

   NOTE — hero background image path:
   Resolved relative to this CSS file for local
   staging. For Bandzoogle deployment, replace
   with the absolute hosted URL, e.g.:
   url('https://gypsypistoleros.com/files/1413423/gp-arches-promo.jpeg')
   ========================================== */


/* ==========================================
   SECTION 1 — HERO
   ========================================== */

/* Hero full-bleed + behind-chrome treatment.
   Hero pulls UP via negative top margin so it extends behind
   Bandzoogle's auto-injected header (band name, nav, strap).
   padding-top compensates so hero content sits below the
   chrome. Width: 100vw + left calc creates the horizontal
   edge-to-edge effect.

   The BZ chrome elements are made transparent via the
   section-rhythm.css override rules (see below). */

/* Hero background — Bandzoogle-hosted asset.
   For local preview, swap to url('../../staging/assets/images/Dark-fae.png'). */
/* display: flex !important — beats Bandzoogle's
   #usersite-container section { display: block; } override.
   See bandzoogle-overrides.css header for the pattern. */
.section-hero {
  position: relative;
  z-index: 0;
  min-height: 80vh;
  background-image: url('https://gypsypistoleros.com/files/1413423/gp-arches-promo.jpeg');
  background-size: cover;
  /* Pinned to top so band heads stay in frame on all viewports.
     Bottom of photo extends or crops depending on aspect; the
     fade gradient covers that zone. */
  background-position: top center;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  /* Pull-up: hero extends behind the BZ chrome.
     250px covers typical BZ header height (band name + nav + strap). */
  margin-top: -250px;
  padding-top: calc(250px + var(--space-8));

  /* Full-bleed: edge-to-edge breakout from Bandzoogle's content container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ::before gradient stripped in Pass 6f — section-rhythm.css's
   higher-specificity rule sets z-index: -1 on this pseudo-element,
   putting any background BEHIND the photo (invisible). Gradient
   moved to ::after which sits at z:1. Layout props (width, left)
   are provided by section-rhythm.css and not set here. */
.section-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Pass 6f: fade gradient moved from ::before (z:-1, behind the
   photo, invisible) to ::after (z:1, between photo and text).
   Combined with the flat 35% dimmer via multi-layer background-image.
   Layer 1 (top): flat dimmer over whole hero.
   Layer 2 (bottom): pixel-anchored fade-to-black at the base.
   Bottom 80px solid black, 240px fade up to transparent. */
.section-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    linear-gradient(to top, #000000 0px, #000000 80px, rgba(0, 0, 0, 0) 320px);
  background-color: transparent;
}

.section-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--space-16) var(--space-6);
  max-width: var(--max-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* #usersite-container prefix required to beat the BZ theme's
   `#usersite-container h1 { font-size: 25px }` rule (specificity 1,0,1).
   Without the prefix our class selector (0,1,0) loses the cascade.
   See docs/css-quirks.md and transcript Pass 6d. */
/* Pass 6f: user iterated to 57px fixed (from clamp). Casing controlled
   in HTML (no text-transform applied). padding-bottom: 0 overrides BZ's
   5px h1 default. !important required because BZ's theme also uses
   !important on #usersite-container h1. */
#usersite-container .section-hero__title {
  font-size: clamp(2.5rem, 9vw, 4rem) !important;
  text-transform: none !important;
  padding-bottom: 0;
  margin-bottom: 0;
}

.section-hero__tagline {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}


/* ==========================================
   SECTION 2 — ALBUM
   ========================================== */

/* display: grid !important — beats Bandzoogle's
   #usersite-container section { display: block; } override.
   See bandzoogle-overrides.css header for the pattern. */
.section-album {
  padding: var(--space-16) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-12);
  align-items: start;
}

.section-album__cover {
  width: 100%;
}

.section-album__cover img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  object-fit: cover;
}

.section-album__copy h2 {
  margin-bottom: var(--space-6);
}

.section-album__buttons {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

@media (max-width: 700px) {
  .section-album {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .section-album__cover {
    text-align: center;
  }

  .section-album__cover img {
    margin: 0 auto;
    max-width: 260px;
  }
}


/* ==========================================
   SECTION 3 — PRESS
   ========================================== */

.section-press {
  padding: var(--space-16) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-press h2 {
  margin-bottom: var(--space-2);
}

.section-press__subhead {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-8);
}

.section-press__more {
  display: inline-block;
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.section-press__more:hover {
  color: var(--color-text-primary);
}


/* ==========================================
   SECTION 4 — TOUR
   ========================================== */

.section-tour {
  padding: var(--space-16) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
}


.section-tour__see-all {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.section-tour__see-all:hover {
  color: var(--color-text-primary);
}


/* ==========================================
   SECTION 5 — WATCH
   ========================================== */

.section-watch {
  padding: var(--space-16) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-watch__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

/* Responsive 16:9 iframe wrapper */
.section-watch__embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: var(--color-bg-secondary);
}

.section-watch__embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.section-watch__caption {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
}

@media (max-width: 700px) {
  .section-watch__grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================
   SECTION 6 — ABOUT
   ========================================== */

.section-about {
  padding: var(--space-16) var(--space-6);
  max-width: var(--content-width);
  margin: 0 auto;
}

.section-about p {
  font-size: var(--text-base);
  line-height: 1.8;
}

.section-about__heading-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.section-about__heading-row h2 {
  margin-bottom: 0;
  flex-shrink: 0;
}

.section-about__sigil {
  width: 60px;
  height: auto;
  opacity: 0.7;
  flex-shrink: 0;
}

.section-about__sigil--left {}

.section-about__sigil--right {}

@media (max-width: 600px) {
  .section-about__sigil {
    display: none;
  }
  .section-about__heading-row {
    margin-bottom: var(--space-4);
  }
}


/* ==========================================
   SECTION 7 — JOIN THE CULT
   ========================================== */

.section-join {
  padding: var(--space-16) var(--space-6);
  text-align: center;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.section-join h2 {
  margin-bottom: var(--space-6);
}

/* margin auto !important — beats Bandzoogle's
   #usersite-container p { margin: 1em 0; } override.
   See bandzoogle-overrides.css header. */
.section-join__copy {
  max-width: var(--content-width);
  margin: 0 auto var(--space-8) !important;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.section-join__more {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.section-join__more:hover {
  color: var(--color-text-primary);
}


/* ==========================================
   SECTION 8 — PRESS & CONTACTS
   ========================================== */

.section-contacts {
  padding: var(--space-16) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-contacts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.section-contacts__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.section-contacts__role {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.section-contacts__name {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: 500;
  margin-bottom: var(--space-1);
}

.section-contacts a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  word-break: break-word;
}

.section-contacts a:hover {
  color: var(--color-text-primary);
}

@media (max-width: 700px) {
  .section-contacts__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 400px) {
  .section-contacts__grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   css/components/press-kit.css
   ======================================== */
/* ==========================================
   press-kit.css — Electronic Press Kit section styles
   Part of the AUSTIN_SPACE build — May 2026

   v0 baseline only. No v2 styling flourishes.
   Colour tokens from variables.css throughout.
   No hardcoded colour values.
   ========================================== */


/* ==========================================
   SECTION 1 — EPK HERO
   ========================================== */

.section-epk-hero {
  padding: var(--space-16) var(--space-6) var(--space-12);
  text-align: center;
  border-bottom: 1px solid var(--color-border-subtle);
}

.section-epk-hero__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* Sigil mark at top of EPK header — max ~120px, centred */
.section-epk-hero__sigil {
  max-width: 120px;
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: var(--space-4);
}

.section-epk-hero__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* #usersite-container prefix required to beat BZ's
   `#usersite-container h1 { font-size: 25px !important }` rule.
   See docs/css-quirks.md and homepage Pass 6d. */
#usersite-container .section-epk-hero__title {
  font-size: clamp(2rem, 6vw, var(--text-6xl));
  margin-bottom: 0;
}

.section-epk-hero__tagline {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
  margin-bottom: 0;
}


/* ==========================================
   SECTION 2 — AT A GLANCE
   ========================================== */

.section-at-a-glance {
  padding: var(--space-16) var(--space-6);
  max-width: var(--content-width);
  margin: 0 auto;
}

/* Two-column definition list: label left, value right */
.section-at-a-glance__facts {
  margin-bottom: var(--space-8);
}

.section-at-a-glance__fact-row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  align-items: baseline;
}

.section-at-a-glance__fact-row:first-child {
  border-top: 1px solid var(--color-border-subtle);
}

.section-at-a-glance__facts dt {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.section-at-a-glance__facts dd {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  margin: 0;
}

/* Pull-quote: left border treatment — font/italic inherits from typography.css blockquote */
/* margin !important — beats Bandzoogle's
   #usersite-container blockquote { margin: 1em 0; } override.
   See bandzoogle-overrides.css header. */
.section-at-a-glance__pull-quote {
  border-left: 3px solid rgba(192, 192, 192, 0.3);
  padding-left: var(--space-6);
  margin: var(--space-6) 0 !important;
  font-style: italic;
}

@media (max-width: 500px) {
  .section-at-a-glance__fact-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}


/* ==========================================
   SECTION 3 — BIOGRAPHY
   ========================================== */

.section-bio {
  padding: var(--space-16) var(--space-6);
  max-width: var(--content-width);
  margin: 0 auto;
  border-top: 1px solid var(--color-border-subtle);
}

.section-bio p {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-primary);
}


/* ==========================================
   SECTION 4 — LATEST RELEASE
   ========================================== */

.section-latest-release {
  padding: var(--space-16) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
  border-top: 1px solid var(--color-border-subtle);
}

/* Two-column on desktop: cover left, detail right */
.section-latest-release__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-12);
  align-items: start;
  margin-top: var(--space-8);
}

.section-latest-release__cover img {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
}

/* Release metadata definition list */
.section-latest-release__metadata {
  margin-bottom: var(--space-8);
}

.section-latest-release__meta-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  align-items: baseline;
}

.section-latest-release__meta-row:first-child {
  border-top: 1px solid var(--color-border-subtle);
}

.section-latest-release__metadata dt {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.section-latest-release__metadata dd {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  margin: 0;
}

/* Tracklist with side labels */
.section-latest-release__tracklist {
  margin-bottom: var(--space-8);
}

/* h4 inherits Cinzel uppercase from typography.css — override colour and margin */
.section-latest-release__side-label {
  color: var(--color-text-secondary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.section-latest-release__tracklist > .section-latest-release__side-label:first-child {
  margin-top: 0;
}

.section-latest-release__side {
  list-style: decimal;
  padding-left: var(--space-8);
  margin-bottom: 0;
}

.section-latest-release__side li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  padding: var(--space-1) 0;
  line-height: 1.5;
}

.section-latest-release__buy {
  margin-top: var(--space-6);
}

@media (max-width: 700px) {
  .section-latest-release__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .section-latest-release__cover {
    text-align: center;
  }

  .section-latest-release__cover img {
    margin: 0 auto;
    max-width: 260px;
  }
}

@media (max-width: 400px) {
  .section-latest-release__meta-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}


/* ==========================================
   SECTION 5 — PRESS (DARK FAERIE TALES)
   ========================================== */

.section-press-current {
  padding: var(--space-16) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
  border-top: 1px solid var(--color-border-subtle);
}

.section-press-current h2 {
  margin-bottom: var(--space-2);
}

.section-press-current__subhead {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-8);
}


/* ==========================================
   SECTION 6 — PRESS (CHURCH OF THE PISTOLEROS)
   ========================================== */

.section-press-historical {
  padding: var(--space-16) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
  border-top: 1px solid var(--color-border-subtle);
}

.section-press-historical h2 {
  margin-bottom: var(--space-2);
}

.section-press-historical__subhead {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-8);
}


/* ==========================================
   SECTION 7 — PAST CHARTING
   ========================================== */

.section-charting {
  padding: var(--space-16) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
  border-top: 1px solid var(--color-border-subtle);
}

.section-charting__subhead {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-8);
}

.section-charting__table {
  width: 100%;
  max-width: var(--content-width);
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.section-charting__table thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
}

.section-charting__table tbody td {
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  vertical-align: middle;
}

.section-charting__table tbody tr:last-child td {
  border-bottom: none;
}

.section-charting__position {
  font-weight: 600;
  white-space: nowrap;
}


/* ==========================================
   SECTION 8 — FOR FANS OF
   ========================================== */

.section-fans-of {
  padding: var(--space-16) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
  border-top: 1px solid var(--color-border-subtle);
}

/* Middle-dot separator list — chosen over pills for EPK document clarity.
   Semantically honest: influences are a list, not tags. */
.section-fans-of__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  row-gap: var(--space-2);
}

.section-fans-of__list li + li::before {
  content: '·';
  margin: 0 var(--space-3);
  color: var(--color-text-secondary);
}


/* ==========================================
   SECTION 9 — LIVE
   ========================================== */

/* Note: .section-live is used by BOTH press-kit and shows pages.
   If shows.css ever needs to be extracted standalone, copy these
   rules over. Confirmed in Pass 8a audit. */
.section-live {
  padding: var(--space-16) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
  border-top: 1px solid var(--color-border-subtle);
}

.section-live__inner {
  max-width: var(--content-width);
}

.section-live p {
  font-size: var(--text-base);
  line-height: 1.8;
}

.section-live__link {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.section-live__link:hover {
  color: var(--color-text-primary);
}


/* ==========================================
   SECTION 10 — DOWNLOADS
   ========================================== */

.section-downloads {
  padding: var(--space-16) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
  border-top: 1px solid var(--color-border-subtle);
}

.section-downloads__subhead {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

/* 2x2 grid on desktop, single column on mobile */
.section-downloads__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.section-downloads__card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.section-downloads__card-header i {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}

.section-downloads__card-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
}

.section-downloads__card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

.section-downloads__note {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

@media (max-width: 500px) {
  .section-downloads__grid {
    grid-template-columns: 1fr;
  }
}

/* Pass 7e: wa-card has NO [part="base"] element in its shadow
   DOM — parts exist only for media, header, body, footer.
   Surface/background/border styling goes on the host element
   directly, NOT via ::part(base). The internal shadow CSS uses
   WA design tokens (--wa-color-surface-default,
   --wa-color-neutral-fill-quiet, --wa-color-text-normal) which
   we override here to inherit our dark theme into the shadow
   DOM. See docs/css-quirks.md for the wa-card shadow DOM
   anatomy note. */

.section-downloads__grid wa-card {
  /* Override WA design tokens that drive shadow DOM internals */
  --wa-color-surface-default: var(--color-bg-primary);
  --wa-color-neutral-fill-quiet: var(--color-bg-primary);
  --wa-color-text-normal: var(--color-text-primary);

  /* Host-level styling */
  background-color: var(--color-bg-primary);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  box-shadow: none;
  color: var(--color-text-primary);
  display: block;
}

.section-downloads__grid wa-card::part(header) {
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-6);
}

.section-downloads__grid wa-card::part(body) {
  background-color: transparent;
  color: var(--color-text-secondary);
  padding: var(--space-6);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
}

.section-downloads__grid wa-card::part(footer) {
  background-color: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-4) var(--space-6);
  display: flex;
  justify-content: center;
}

.section-downloads__grid wa-card[disabled] {
  opacity: 0.5;
}


/* ==========================================
   SECTION 11 — CONTACTS (press-kit additions)
   Base grid/block/role/name/link styles in homepage.css.
   Only the description sentence is new here.
   ========================================== */

.section-contacts__desc {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

/* ========================================
   css/components/shows.css
   ======================================== */
/* ==========================================
   shows.css — Tour date card and grid styles
   Part of the AUSTIN_SPACE build — May 2026

   v0 baseline only. No v2 styling flourishes.
   Colour tokens from variables.css throughout.
   No hardcoded colour values.

   Pairs with js/shows.js (renderer) and
   data/shows.json (dataset).

   Cross-file dependencies:
   - .section-live styles live in press-kit.css
   ========================================== */


/* ==========================================
   GRID
   ========================================== */

.shows-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}


/* ==========================================
   SHOWS TABLE — proper <table> element,
   rendered when data-shows-layout="table".
   ========================================== */

.shows-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  margin-top: var(--space-6);
  font-family: var(--font-body);
  color: var(--color-text-primary);
}

.shows-table thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-silver);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-silver);
  white-space: nowrap;
}

.shows-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.15s ease;
}

.shows-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.shows-table tbody td {
  padding: var(--space-4);
  vertical-align: middle;
  font-size: var(--text-base);
  line-height: 1.5;
}

.shows-table__date {
  white-space: nowrap;
  color: var(--color-text-primary);
  font-weight: 400;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
}

.shows-table__venue {
  color: var(--color-text-primary);
  font-weight: 500;
}

.shows-table__location {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.shows-table__type {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(160, 160, 144, 0.1);
  color: var(--color-text-secondary);
  border: 1px solid rgba(160, 160, 144, 0.3);
}

.shows-table__type--festival {
  background: rgba(57, 255, 20, 0.15);
  color: var(--color-accent-green);
  border-color: rgba(57, 255, 20, 0.4);
}

.shows-table__type--club {
  background: rgba(160, 160, 144, 0.1);
  color: var(--color-text-secondary);
  border-color: rgba(160, 160, 144, 0.3);
}

.shows-table__status {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.shows-table__status--past {
  color: var(--color-text-secondary);
}

.shows-table__status--upcoming {
  color: var(--color-text-primary);
}

.shows-table__tickets {
  text-align: right;
}

/* Past rows dimmed at same 0.6 opacity as .show-card--past */
.shows-table__row--past {
  opacity: 0.6;
}

@media (max-width: 768px) {
  .shows-table thead {
    display: none;
  }

  .shows-table tbody tr {
    display: block;
    padding: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .shows-table tbody td {
    display: block;
    padding: var(--space-1) 0;
    border: none;
  }

  .shows-table tbody td::before {
    content: attr(data-label) ': ';
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-right: var(--space-2);
  }

  .shows-table__tickets {
    text-align: left;
  }
}


/* ==========================================
   SECTION WRAPPERS — shows page sections
   ========================================== */

.section-shows-hero {
  padding: var(--space-16) var(--space-6) var(--space-12);
  text-align: center;
  border-bottom: 1px solid var(--color-border-subtle);
}

.section-shows-hero__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.section-shows-hero__sigil {
  max-width: 120px;
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: var(--space-4);
}

/* #usersite-container prefix required to beat BZ's
   `#usersite-container h1 { font-size: 25px }`.
   See docs/css-quirks.md and homepage Pass 6d. clamp range
   40px–64px — slightly larger than EPK hero (32–60px) since
   this title is descriptive prose, not a bare name. */
#usersite-container .section-shows-hero__title {
  font-size: clamp(2.5rem, 8vw, 4rem);
  margin-bottom: 0;
}

.section-shows-hero__tagline {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
  margin-bottom: 0;
}

.section-upcoming {
  padding: var(--space-16) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-upcoming h2 {
  margin-bottom: var(--space-2);
}

.section-upcoming__subhead {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-8);
}

.section-tba {
  padding: var(--space-12) var(--space-6);
  max-width: var(--content-width);
  margin: 0 auto;
  border-top: 1px solid var(--color-border-subtle);
}

.section-tba__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.section-tba__links a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.section-tba__links a:hover {
  color: var(--color-text-primary);
}

.section-past {
  padding: var(--space-16) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
  border-top: 1px solid var(--color-border-subtle);
}

.section-past__tagline {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-top: 0;
  margin-bottom: var(--space-6);
}

.section-live-reviews {
  padding: var(--space-16) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
  border-top: 1px solid var(--color-border-subtle);
}

/* .section-live-reviews__heading inherits h2 from typography.css */

.section-live-reviews__tagline {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-top: 0;
  margin-bottom: var(--space-6);
}

.section-booking {
  padding: var(--space-16) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
  border-top: 1px solid var(--color-border-subtle);
}

.section-booking__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

@media (max-width: 500px) {
  .section-booking__grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================
   BOOKING SECTION — email link treatment
   ========================================== */

/* Booking emails inherit the same link treatment as contacts
   blocks. Standalone selector needed because booking emails are
   in .section-booking__grid, not .section-contacts. */
.section-booking__grid a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  word-break: break-word;
}

.section-booking__grid a:hover {
  color: var(--color-text-primary);
}

/* ========================================
   css/components/videos.css
   ======================================== */
/* ==========================================
   videos.css — Video gallery styles
   Part of the AUSTIN_SPACE build — May 2026

   v0 baseline only. No v2 styling flourishes.
   Colour tokens from variables.css throughout.

   Pairs with js/videos.js (renderer) and
   data/videos.json (dataset).

   Also contains .section-videos-* page layout
   helpers used only on the videos page.
   ========================================== */


/* ==========================================
   VIDEOS PAGE LAYOUT — section-level wrappers
   Named following the .section-{page}-* convention
   used across all other v0 pages.
   ========================================== */

/* Hero — text-only, no full-bleed photo.
   Section-rhythm exclusion lives in section-rhythm.css
   alongside the other hero exclusions. */
.section-videos-hero {
  text-align: center;
  border-bottom: 1px solid var(--color-border-subtle);
}

.section-videos-hero__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* #usersite-container prefix required to beat BZ's
   `#usersite-container h1 { font-size: 25px !important }` rule.
   Locked hero scale: clamp(2.5rem, 9vw, 5rem) = 40px–80px. */
#usersite-container .section-videos-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 9vw, 5rem);
  text-transform: none;
  margin-bottom: 0;
}

.section-videos-hero__tagline {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  margin-bottom: 0;
}

/* Content section inner wrapper — max-width container */
.section-videos__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-16) var(--space-6);
}


/* ==========================================
   VIDEO ALBUM — album-level section wrapper
   ========================================== */

.video-album {
  padding: var(--space-16) 0;
}

.video-album__header {
  text-align: left;
  margin-bottom: 2.5rem;
}

/* #usersite-container prefix required to beat BZ h2 overrides */
#usersite-container .video-album__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.video-album__meta {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.video-album__year {
  font-weight: 400;
}

.video-album__sep {
  color: var(--color-text-secondary);
  opacity: 0.5;
}

.video-album__blurb {
  font-family: var(--font-body);
  font-style: normal;
}


/* ==========================================
   VIDEO ALBUM GRID
   ========================================== */

.video-album__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* Single releases — one column, left-aligned, constrained width */
.video-album--single .video-album__grid {
  grid-template-columns: 1fr;
  max-width: 600px;
  margin: 0;
}

@media (max-width: 720px) {
  .video-album__grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================
   VIDEO CARD
   ========================================== */

.video-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}


/* ==========================================
   FACADE — thumbnail + play button overlay
   ========================================== */

.video-card__facade {
  background: #0a0a0a;
  border-radius: var(--radius-md);
  padding: 0;
  cursor: pointer;
  /* Layout */
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  display: block;
  /* Interaction */
  transition: transform 200ms ease;
}

.video-card__facade:hover,
.video-card__facade:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.video-card__facade:focus-visible {
  outline: 2px solid var(--color-accent-pink);
  outline-offset: 2px;
}

.video-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ==========================================
   PLAY BUTTON OVERLAY
   ========================================== */

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-silver);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  pointer-events: none;
  transition: transform 200ms ease;
}

.video-card__facade:hover .video-card__play,
.video-card__facade:focus-visible .video-card__play {
  transform: translate(-50%, -50%) scale(1.05);
}

@media (max-width: 720px) {
  .video-card__play {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }
}


/* ==========================================
   IFRAME — replaces facade after play click
   ========================================== */

.video-card__iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
  border-radius: var(--radius-md);
}


/* ==========================================
   CARD TITLE
   ========================================== */

/* #usersite-container prefix required to beat BZ p/heading resets */
#usersite-container .video-card__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  margin: 0;
  text-align: left;
}


/* ==========================================
   STATE MESSAGES
   ========================================== */

.video-loading,
.video-error {
  text-align: left;
  padding: 3rem 1rem;
  color: var(--color-text-secondary);
}

.video-loading {
  font-family: var(--font-body);
  font-style: normal;
}

.video-error {
  font-family: var(--font-body);
  font-style: normal;
}


/* ==========================================
   CTA ROW SECTION
   ========================================== */

.section-videos--cta-row {
  border-top: 1px solid var(--color-border-subtle);
}

.section-videos__inner--cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 3rem var(--space-6);
}



/* ========================================
   css/components/section-rhythm.css
   ======================================== */
/* ============================================================
   section-rhythm.css — full-width inter-section visual rhythm

   Each content section paints a full-viewport-width colour band
   via an absolutely-positioned ::before pseudo-element, plus a
   hairline border-top on the same pseudo-element so the divider
   also extends edge-to-edge.

   Layout breakout: 100vw width + calc(50% - 50vw) left offset
   extends the band beyond Bandzoogle's content container so the
   colour goes edge-to-edge.

   All selectors prefixed with #usersite-container to win against
   Bandzoogle's ID-specificity theme rules. See css-quirks.md.

   ## Alternation pattern (after hero)

   Section 2 (first content)  primary (#000000) — bg-primary
   Section 3                  secondary (#080808) — explicit value
   Section 4                  primary
   Section 5                  secondary
   ... and so on

   The secondary colour is intentionally very close to primary
   (#080808 vs #000000 — 8 hex points apart) so the alternation
   is subtle to the point of subliminal. The hairline divider
   does the actual work of section separation.

   Hero sections (.section-hero, .section-epk-hero, .section-shows-hero) are excluded.
   The first content section after the hero gets the colour but
   not the hairline at its top edge.

   ## History — gradient experiment abandoned

   Passes 5p through 5u explored gradient transitions between
   sections. Two-colour alternation cannot create seamless
   gradients at section boundaries (geometrically impossible —
   the boundary can't be both colours at once). Three-colour
   cycles work geometrically but the implementation overhead
   outweighed the visual gain. Reverted to flat colour + hairline.
   ============================================================ */

#usersite-container .page-content > section {
  position: relative;
}

#usersite-container .page-content > section::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 100%;
  z-index: -1;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

#usersite-container .page-content > section:nth-child(2n)::before {
  background-color: var(--color-bg-primary);
}

#usersite-container .page-content > section:nth-child(2n+1)::before {
  background-color: #080808;
}

#usersite-container .page-content > section:not(.section-hero):not(.section-epk-hero):not(.section-shows-hero) > * {
  position: relative;
  z-index: 0;
}

/* Hero sections (across all pages) are excluded from the alternating
   section rhythm. They handle their own backgrounds.
   Added .section-shows-hero in Pass 8d after audit flagged the gap.
   Added .section-videos-hero in Pass 9b. */
#usersite-container .page-content > section.section-hero::before,
#usersite-container .page-content > section.section-epk-hero::before,
#usersite-container .page-content > section.section-shows-hero::before,
#usersite-container .page-content > section.section-videos-hero::before {
  display: none;
}

#usersite-container .page-content > section.section-hero + section::before,
#usersite-container .page-content > section.section-epk-hero + section::before,
#usersite-container .page-content > section.section-shows-hero + section::before,
#usersite-container .page-content > section.section-videos-hero + section::before {
  border-top: none;
}

/* Override the global typography.css h1-h6 { text-transform:
   uppercase } rule for headings inside our content. Scoped to
   .page-content so Bandzoogle's own nav/header chrome (which
   sits outside .page-content) keeps its uppercase treatment. */
#usersite-container .page-content h1,
#usersite-container .page-content h2,
#usersite-container .page-content h3,
#usersite-container .page-content h4,
#usersite-container .page-content h5,
#usersite-container .page-content h6 {
  text-transform: none;
}

/* ============================================================
   BZ chrome transparency — hero behind-nav treatment
   (Pass 6a, fixed Pass 6b)

   Makes the Bandzoogle-injected header chrome (band name,
   nav bar, "NEW ALBUM REVIEWS" strap) transparent so the
   hero photo shows through behind it. The chrome stacks
   above the hero via z-index.

   Confirmed DOM structure (DevTools, Pass 6b diagnostic):
     <header>                     ← bare element, bg: rgb(0,0,0)
       <div class="title-wrap">
         <h1><span class="inner">GYPSY PISTOLEROS</span></h1>
       </div>
       <nav id="main-nav">...</nav>
     </header>
   Header: top:40, height:179. Hero pull-up of 250px covers this.

   Confirmed selectors:
     header         — the bare element carrying the black background
     #main-nav      — the nav element (DevTools, 2026-05-21)
     .title-wrap    — band name wrapper div
   ============================================================ */

/* #main-nav was reported as position:fixed, height:0, width:0
   in a Pass 6a diagnostic. This may be a desktop/mobile-nav
   conflict. Not addressed in this pass — confirm in DevTools
   once header transparency is working. */

#usersite-container header,
#usersite-container .site-header,
#usersite-container header.site-header,
#usersite-container header[role="banner"],
#usersite-container .header-wrap {
  background-color: transparent !important;
  background-image: none !important;
  position: relative;
  z-index: 10;
}

#usersite-container .site-title,
#usersite-container .site-tagline,
#usersite-container .title-wrap,
#usersite-container .title-wrap h1,
#usersite-container .title-wrap .inner,
#usersite-container nav,
#usersite-container .nav-menu,
#usersite-container .main-nav,
#usersite-container .nav-link,
#usersite-container #main-nav {
  background-color: transparent !important;
}