/* ============================================================
   VJ THRIFT FINDS — Brand Theme v2
   Antique gold on bronze-copper damask. Candlelit vignette.
   Matches the customer-approved wordmark + rules-card + seal.
   ============================================================
   This file loads AFTER each page's inline <style>, so the
   palette + typography here override the base theme.
   ============================================================ */

/* -------- Typography: add Cinzel (display caps) + Great Vibes (script) ---- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Cinzel+Decorative:wght@700;900&family=Great+Vibes&display=swap');

/* -------- BRAND PALETTE ---------------------------------------------------
   Base : warm near-black chocolate (not cold grey/black)
   Gold : antique / bronze / burnished copper — NOT modern yellow gold
   Cream: aged parchment for inset panels
   Rose : oxidized burgundy for small accents (matches the dried roses)
   ------------------------------------------------------------------------ */
:root {
  /* warm dark base — bronze undertones so the gold reads correctly */
  --bg-deep:        #0a0706;
  --bg-dark:        #15100c;
  --bg-card:        #1d1712;
  --bg-card-hover:  #261e17;
  --bg-surface:     #2e241a;

  /* antique golds — matches the wordmark gilt */
  --gold:           #c69a3e;
  --gold-light:     #d8b368;
  --gold-bright:    #ecc97a;
  --gold-dim:       #8c6e2e;
  --gold-muted:     #6b5320;

  /* bronze / copper — for highlights and the vignette lighting */
  --bronze:         #b8874a;
  --copper:         #a6702f;
  --copper-deep:    #7a4f1f;

  /* aged parchment — for the cream rule-card style panels */
  --cream:          #ede0bf;
  --cream-dim:      #d9c38c;
  --parchment:      #e8d5a3;

  /* burgundy rose accent (from her dried-rose motifs) */
  --burgundy:       #4a1f1f;
  --rose-dark:      #6b2a2a;

  /* text */
  --text-primary:   #ebdcc0;
  --text-secondary: #b09a74;
  --text-muted:     #6b5f4a;

  /* borders + shadows */
  --border:         #2a2218;
  --border-gold:    rgba(198, 154, 62, 0.35);
  --border-faint:   rgba(198, 154, 62, 0.15);
  --shadow-gold:    rgba(198, 154, 62, 0.2);
  --shadow-deep:    rgba(0, 0, 0, 0.7);

  /* fonts — add Cinzel for the Roman-capital wordmark feel */
  --font-display:   'Cinzel', 'Playfair Display', Georgia, serif;
  --font-decorative:'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --font-script:    'Great Vibes', 'Allura', cursive;
  --font-body:      'Cormorant Garamond', Georgia, serif;
  --font-sans:      'Inter', -apple-system, sans-serif;
}

/* ============================================================
   BODY — bronze-copper damask texture + candle vignette
   Three stacked layers:
     1. deep warm solid base
     2. radial gradient "candle glow" from top-center
     3. damask pattern overlay (very subtle) via ::before
     4. film grain overlay (very subtle) via ::after
   ============================================================ */
body {
  background-color: var(--bg-deep);
  background-image:
    /* candle-glow vignette — warm bronze halo from top center */
    radial-gradient(ellipse 80% 60% at 50% 0%,
      rgba(198, 154, 62, 0.18) 0%,
      rgba(166, 112, 47, 0.08) 25%,
      transparent 60%),
    /* second warmer glow lower */
    radial-gradient(ellipse 60% 80% at 50% 100%,
      rgba(74, 31, 31, 0.25) 0%,
      transparent 60%),
    /* base warm gradient — lifts center, darkens edges */
    radial-gradient(ellipse at center,
      #1c1510 0%,
      #0f0b08 70%,
      #060403 100%);
  background-attachment: fixed;
  position: relative;
  color: var(--text-primary);
}

/* Damask ornamental pattern — subtle gold filigree repeating motif.
   SVG embedded so there are no extra requests. ~6% opacity blended. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23c69a3e' stroke-width='0.6' opacity='0.9'><path d='M60 10 C 70 20, 80 30, 60 40 C 40 30, 50 20, 60 10 Z'/><path d='M60 40 L60 80'/><path d='M60 80 C 70 90, 80 100, 60 110 C 40 100, 50 90, 60 80 Z'/><circle cx='60' cy='60' r='3'/><path d='M30 60 C 40 50, 50 55, 60 60 C 70 65, 80 70, 90 60'/><path d='M30 60 C 40 70, 50 65, 60 60 C 70 55, 80 50, 90 60'/><circle cx='10' cy='10' r='2'/><circle cx='110' cy='10' r='2'/><circle cx='10' cy='110' r='2'/><circle cx='110' cy='110' r='2'/><path d='M10 10 Q 30 5, 50 10 M70 10 Q 90 15, 110 10'/><path d='M10 110 Q 30 105, 50 110 M70 110 Q 90 115, 110 110'/></g></svg>");
  background-repeat: repeat;
  background-size: 180px 180px;
}

/* Film grain — organic texture so the gold doesn't feel flat digital */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* Bring real page content above the texture layers */
nav, .nav, main, section, footer, .hero, .featured, .container,
.product-grid, .product-card, .cta-section, .trust-section {
  position: relative;
  z-index: 1;
}

/* ============================================================
   NAVIGATION — Illuminated Brass Plate
   Modern warm glass. Thin gold hairline. Bright brass typography.
   Keeps the antique theme, fixes the "dark + unreadable" complaint.
   ============================================================ */
.nav {
  /* Deep warm-black rail with a stronger opaque floor so the seal +
     wordmark have a consistent dark backdrop to pop against (was 0.82
     alpha which let copper bleed through and killed logo contrast). */
  background: rgba(8, 6, 4, 0.94) !important;
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
  border-bottom: 1px solid rgba(236, 201, 122, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(236, 201, 122, 0.14),
    0 1px 0 rgba(236, 201, 122, 0.22),
    0 6px 22px rgba(0, 0, 0, 0.55) !important;
  overflow: visible !important;
}
.nav.scrolled {
  background: rgba(8, 6, 5, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(236, 201, 122, 0.12),
    0 1px 0 rgba(198, 154, 62, 0.20),
    0 10px 36px rgba(0, 0, 0, 0.65) !important;
}

/* Nav links — the readability fix.
   Was #b09a74 (bronze-ish, ~3.1:1 contrast — below AA). Now bright gold
   at ~8.4:1. Tighter tracking (0.5px vs 1.5px) reads as modern rather
   than vintage signage, without losing the Cinzel-era character. */
.nav-links,
.nav ul,
.nav nav {
  gap: 2px;
}
.nav a,
.nav-links a,
.nav-link {
  color: var(--gold-bright) !important;       /* #ecc97a */
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase;
  font-size: 0.82rem !important;
  padding: 10px 14px !important;
  position: relative;
  transition: color 0.25s ease, text-shadow 0.25s ease;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
/* Exempt the brand/logo anchor from the link color cascade */
.nav-brand,
.nav-brand:hover,
.logo,
.logo:hover {
  color: inherit !important;
  text-shadow: none;
}

/* Shimmer underline — slides in on hover like a polished brass rail */
.nav a:not(.nav-brand):not(.logo)::after,
.nav-links a::after,
.nav-link::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(236, 201, 122, 0.9) 50%,
    transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.nav a:not(.nav-brand):not(.logo):hover,
.nav-links a:hover,
.nav-link:hover {
  color: var(--cream) !important;              /* #ede0bf — brighter on hover */
  text-shadow: 0 0 18px rgba(236, 201, 122, 0.35);
}
.nav a:not(.nav-brand):not(.logo):hover::after,
.nav-links a:hover::after,
.nav-link:hover::after {
  transform: scaleX(1);
}

/* Active / current page indicator */
.nav a.active,
.nav-link.active {
  color: var(--cream) !important;
}
.nav a.active::after,
.nav-link.active::after {
  transform: scaleX(1);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(236, 201, 122, 1) 50%,
    transparent 100%);
}

.nav-brand {
  font-family: var(--font-decorative) !important;
  font-weight: 700;
  letter-spacing: 1.2px !important;
  text-transform: uppercase;
  color: var(--gold-bright) !important;
}
.nav-brand span {
  font-family: var(--font-body) !important;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 3px !important;
  color: var(--bronze) !important;
}

/* ============================================================
   HERO — HAMMERED COPPER PLATE
   Aged copper base + metallic gradient sheen + scattered peen marks
   (hammer dimples) + fractal-noise grain for organic surface texture.
   The wordmark image is composited via mix-blend-mode: screen so its
   near-black vignette drops to transparent, leaving ONLY the gilt
   letters + lanterns + books + tagline floating on the copper.
   ============================================================ */
.hero {
  /* REAL COPPER PHOTO — VJ's preferred reference image used directly
     as the hero texture. CSS-generated copper stack (16 layers)
     replaced with the real photograph + a soft edge vignette for
     framing. The existing .hero::before also contributes edge
     darkening for content contrast. */
  background-color: #3d2208 !important;
  background-image:
    /* EDGE VIGNETTE — soft dark frame so the copper plate reads as
       a lit centerpiece instead of flat-filled edge-to-edge. */
    radial-gradient(ellipse 115% 105% at 50% 45%,
      transparent 0%,
      transparent 55%,
      rgba(22, 11, 4, 0.30) 82%,
      rgba(12, 6, 2, 0.58) 100%),
    /* REAL COPPER TEXTURE — VJ's reference photo, scaled to cover. */
    url("../img/brand/copper-texture.png") !important;
  background-size:
    100% 100%,
    cover !important;
  background-repeat:
    no-repeat,
    no-repeat !important;
  background-position:
    center,
    center !important;
  background-blend-mode:
    normal,
    normal !important;
  position: relative !important;
  overflow: hidden !important;
  /* Open the plate up vertically — taller min-height + heavier top/
     bottom padding so the lanterns + wordmark + CTA have real room
     to breathe instead of stacking in a cramped column. */
  min-height: 104vh !important;
  padding: 140px 20px 120px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

/* Edge vignette — copper patina darkening toward the corners so the
   plate reads as a lit centerpiece rather than flat-filled. */
.hero::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 110% 100% at 50% 45%,
      transparent 0%,
      transparent 52%,
      rgba(30, 16, 6, 0.18) 80%,
      rgba(12, 6, 2, 0.38) 96%,
      rgba(0, 0, 0, 0.52) 100%) !important;
  z-index: 0 !important;
}

/* Bottom fade into "New Finds" */
.hero::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  height: 120px !important;
  pointer-events: none !important;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(4, 3, 3, 0.50) 65%,
    rgba(4, 3, 3, 0.90) 100%) !important;
  z-index: 1 !important;
}

.hero-content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 960px !important;
}
.hero-content .hero-desc {
  color: var(--cream) !important;
  font-size: 1.1rem !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  margin-bottom: 22px !important;
}
.hero-content .hero-cta {
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.55)) !important;
}
.hero-content .hero-location {
  margin-top: 18px !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85) !important;
}

/* Mobile tuning */
@media (max-width: 768px) {
  .hero {
    min-height: 92vh !important;
    padding: 120px 16px 80px !important;
  }
  .hero-wordmark {
    max-width: 96% !important;
    margin-bottom: 22px !important;
  }
}

/* ============================================================
   NEW FINDS SECTION — damask field (moved here from the hero).
   Gold-filigree damask pattern edge-to-edge on warm chocolate,
   with subtle edge vignette to frame the product grid.
   ============================================================ */
.featured {
  background-color: #0d0906 !important;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='none' stroke='%23c69a3e' stroke-width='1' opacity='0.28'><path d='M100 18 C 118 36, 134 54, 100 72 C 66 54, 82 36, 100 18 Z'/><path d='M100 72 L100 132'/><path d='M100 132 C 118 150, 134 168, 100 186 C 66 168, 82 150, 100 132 Z'/><circle cx='100' cy='100' r='4'/><path d='M52 100 C 68 84, 84 92, 100 100 C 116 108, 132 116, 148 100'/><path d='M52 100 C 68 116, 84 108, 100 100 C 116 92, 132 84, 148 100'/><circle cx='18' cy='18' r='3'/><circle cx='182' cy='18' r='3'/><circle cx='18' cy='182' r='3'/><circle cx='182' cy='182' r='3'/><path d='M18 18 Q 50 10, 100 18 M100 18 Q 150 10, 182 18'/><path d='M18 182 Q 50 190, 100 182 M100 182 Q 150 190, 182 182'/></g></svg>") !important;
  background-repeat: repeat !important;
  background-size: 200px 200px !important;
  position: relative !important;
}
.featured::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 100% 85% at 50% 50%,
      transparent 0%,
      transparent 45%,
      rgba(4, 3, 2, 0.35) 80%,
      rgba(2, 2, 2, 0.70) 100%) !important;
  z-index: 0 !important;
}
.featured .container {
  position: relative !important;
  z-index: 1 !important;
}
@media (max-width: 768px) {
  .featured {
    background-size: 160px 160px !important;
  }
}

/* Subtle bottom-edge deepening where the hero meets "New Finds" so the
   cut into the warm chocolate featured section reads intentional. */
.hero::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  height: 140px !important;
  pointer-events: none !important;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(4, 3, 3, 0.45) 60%,
    rgba(4, 3, 3, 0.85) 100%) !important;
  z-index: 0 !important;
}

/* Welcome + CTA + location sit ABOVE the bg, in the lower portion of
   the hero so they don't collide with the gilt wordmark in the image.
   Wrapper is WIDE so the lantern wordmark can claim the full plate;
   the text elements below are capped individually to stay as a
   narrow readable column centered on the plate. */
.hero-content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 1600px !important;
}
/* Keep the text column narrow + centered so only the wordmark uses
   the full width. */
.hero-content .hero-flourish,
.hero-content .hero-desc,
.hero-content .hero-cta,
.hero-content .hero-location {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* CONTENT SPOTLIGHT — soft dark radial halo BEHIND the hero content so
   the gold wordmark + cream copy read bright against the busy copper
   texture. Sized to the content column, feathered hard so copper
   still shows at the edges of the hero (the plate doesn't get
   swallowed). */
.hero-content::before {
  content: '' !important;
  position: absolute !important;
  top: -8% !important;
  left: -12% !important;
  right: -12% !important;
  bottom: -8% !important;
  background:
    radial-gradient(ellipse 70% 65% at 50% 50%,
      rgba(8, 4, 2, 0.72) 0%,
      rgba(10, 5, 2, 0.55) 28%,
      rgba(14, 7, 3, 0.32) 52%,
      rgba(18, 9, 4, 0.14) 74%,
      transparent 92%) !important;
  filter: blur(14px) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
.hero-content .hero-desc {
  color: var(--cream) !important;
  font-size: 1.15rem !important;
  text-shadow:
    0 0 24px rgba(0, 0, 0, 0.95),
    0 2px 6px rgba(0, 0, 0, 0.98),
    0 1px 2px rgba(0, 0, 0, 1) !important;
  margin-bottom: 26px !important;
}
.hero-content .hero-cta {
  filter:
    drop-shadow(0 8px 28px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 22px rgba(228, 185, 100, 0.45)) !important;
}
.hero-content .hero-location {
  margin-top: 22px !important;
  text-shadow:
    0 0 18px rgba(0, 0, 0, 0.95),
    0 2px 6px rgba(0, 0, 0, 0.98) !important;
}
/* Lift the wordmark off the copper with a warm gold glow + deep
   shadow so the lanterns, "V.J.", and script read cleanly against
   the photographic texture. */
.hero-content .vj-wordmark {
  filter:
    drop-shadow(0 0 28px rgba(236, 201, 122, 0.35))
    drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55)) !important;
}

/* Mobile — keep heights tall enough that the wordmark, lanterns, and
   CTA all breathe without stacking on top of each other. Background
   stays anchored so the copper shows through. */
@media (max-width: 768px) {
  .hero {
    min-height: 92vh !important;
    padding: 120px 16px 80px !important;
    background-position: center 30% !important;
  }
}

.hero-vj {
  font-family: var(--font-decorative) !important;
  font-weight: 900 !important;
  background: linear-gradient(180deg, #ecc97a 0%, #c69a3e 45%, #8c6e2e 75%, #b8874a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.4),
    0 4px 20px rgba(198, 154, 62, 0.3);
  letter-spacing: 0.1em !important;
}

.hero-brand {
  font-family: var(--font-script) !important;
  font-weight: 400 !important;
  color: var(--gold-bright) !important;
  font-style: normal !important;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.4),
    0 4px 24px rgba(198, 154, 62, 0.4);
  letter-spacing: 0.02em !important;
}

.hero-tagline {
  font-family: var(--font-display) !important;
  letter-spacing: 0.45em !important;
  text-transform: uppercase;
  color: var(--cream-dim) !important;
  font-weight: 500 !important;
}

.hero-flourish {
  background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
  position: relative;
}
.hero-flourish::before,
.hero-flourish::after {
  content: '❦';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 1rem;
  background: var(--bg-deep);
  padding: 0 8px;
}
.hero-flourish::before { left: calc(50% - 50px); }
.hero-flourish::after  { left: calc(50% + 50px - 16px); }

.hero-desc {
  font-family: var(--font-body) !important;
  font-style: italic;
  color: var(--text-primary) !important;
  font-size: 1.15rem !important;
  line-height: 1.7 !important;
}

.hero-cta {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dim) 100%) !important;
  color: var(--bg-deep) !important;
  font-family: var(--font-display) !important;
  font-weight: 600;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  border: 1px solid var(--gold-bright) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 4px 20px rgba(198, 154, 62, 0.25),
    0 2px 0 rgba(0, 0, 0, 0.4) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.hero-cta:hover {
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold-light) 50%, var(--gold) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 30px rgba(198, 154, 62, 0.4),
    0 3px 0 rgba(0, 0, 0, 0.4) !important;
}

.hero-location {
  color: var(--bronze) !important;
  font-family: var(--font-body) !important;
  font-style: italic;
  letter-spacing: 0.1em;
}

/* ============================================================
   SECTION HEADERS — gilded label + ornate divider
   ============================================================ */
.section-label {
  font-family: var(--font-display) !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase;
  color: var(--bronze) !important;
  font-weight: 500;
}
.section-title {
  font-family: var(--font-decorative) !important;
  color: var(--gold-light) !important;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.section-divider {
  background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
  height: 1px;
  position: relative;
}
.section-divider::after {
  content: '❦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--gold);
  background: var(--bg-deep);
  padding: 0 10px;
  font-size: 0.9rem;
}
.section-desc {
  font-family: var(--font-body) !important;
  font-style: italic;
  color: var(--text-secondary) !important;
  font-size: 1.1rem !important;
}

/* ============================================================
   PRODUCT CARDS — aged-frame feel with gold hairlines
   ============================================================ */
.product-card {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-dark) 100%) !important;
  border: 1px solid var(--border-gold) !important;
  box-shadow:
    inset 0 1px 0 rgba(198, 154, 62, 0.08),
    0 4px 24px rgba(0, 0, 0, 0.45);
  transition: all 0.4s ease;
}
.product-card:hover {
  border-color: var(--gold) !important;
  box-shadow:
    inset 0 1px 0 rgba(198, 154, 62, 0.15),
    0 8px 40px rgba(198, 154, 62, 0.2),
    0 4px 24px rgba(0, 0, 0, 0.55);
  transform: translateY(-4px);
}
.product-title {
  font-family: var(--font-display) !important;
  color: var(--cream) !important;
}
.product-price {
  font-family: var(--font-decorative) !important;
  color: var(--gold-light) !important;
  font-weight: 700;
}

/* ============================================================
   FOOTER — match hero gilding
   ============================================================ */
.footer {
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%) !important;
  border-top: 1px solid var(--border-gold) !important;
}
.footer-brand h3 {
  font-family: var(--font-decorative) !important;
  color: var(--gold-light) !important;
}
.footer-brand .tagline {
  font-family: var(--font-body) !important;
  font-style: italic;
  color: var(--bronze) !important;
  letter-spacing: 0.2em;
}

/* ============================================================
   PARCHMENT PANEL UTILITY — for FAQ/About/Reviews-style panels
   Matches the aged-cream rule-cards from her brand reference.
   Any element with .parchment gets the aged paper treatment.
   ============================================================ */
.parchment {
  background:
    radial-gradient(ellipse at center, rgba(232, 213, 163, 0.08), rgba(169, 141, 85, 0.02)),
    linear-gradient(135deg, #e8d5a3 0%, #d9c38c 50%, #c9b58a 100%);
  color: #3a2817;
  border: 1px solid rgba(140, 110, 46, 0.4);
  box-shadow:
    inset 0 0 40px rgba(140, 110, 46, 0.15),
    0 4px 24px rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  position: relative;
}
.parchment h1, .parchment h2, .parchment h3, .parchment h4 {
  font-family: var(--font-decorative);
  color: #3a2817;
}
.parchment .label,
.parchment .accent {
  font-family: var(--font-body);
  font-style: italic;
  color: #5a3a17;
}

/* ============================================================
   GOLD-FOIL HEADING UTILITY
   Apply .gold-foil to any h1-h6 to get the gilded-metal text.
   ============================================================ */
.gold-foil {
  background: linear-gradient(180deg, #ecc97a 0%, #c69a3e 45%, #8c6e2e 75%, #b8874a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 12px rgba(198, 154, 62, 0.25);
}

/* ============================================================
   LINKS + BUTTONS — brighter gold hover
   ============================================================ */
a { color: var(--gold-light) !important; }
a:hover { color: var(--gold-bright) !important; }

/* ============================================================
   NAV BRAND IMAGE — circular seal as logo mark
   ============================================================ */
.nav-brand,
.logo {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.nav-brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
  /* Heavy gold ring + warm halo so the dark seal image pops off the
     dark nav rail. Was 0.55 alpha 1px ring + 0.22 glow — now a solid
     2px gold ring, amber outer glow, and an inner cream highlight. */
  box-shadow:
    0 0 0 2px rgba(236, 201, 122, 1),
    0 0 0 4px rgba(198, 154, 62, 0.45),
    0 0 18px rgba(236, 201, 122, 0.55),
    0 0 38px rgba(236, 201, 122, 0.30),
    inset 0 1px 0 rgba(255, 240, 200, 0.35),
    0 3px 12px rgba(0, 0, 0, 0.75);
  transition: all 0.3s ease;
}
.nav-brand:hover .nav-brand-mark,
.logo:hover .nav-brand-mark {
  box-shadow:
    0 0 0 2px rgba(255, 230, 170, 1),
    0 0 0 4px rgba(236, 201, 122, 0.55),
    0 0 28px rgba(236, 201, 122, 0.75),
    0 0 52px rgba(236, 201, 122, 0.45),
    inset 0 1px 0 rgba(255, 240, 200, 0.5),
    0 3px 12px rgba(0, 0, 0, 0.75);
  transform: rotate(-6deg) scale(1.04);
}
.nav-brand-wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  font-family: var(--font-decorative);
  color: var(--gold-bright);
  font-size: 1.02rem !important;
  letter-spacing: 1.4px !important;
  font-weight: 700 !important;
  text-shadow:
    0 0 14px rgba(236, 201, 122, 0.55),
    0 1px 0 rgba(0, 0, 0, 0.85),
    0 2px 6px rgba(0, 0, 0, 0.9) !important;
}
.nav-brand-wordmark > span {
  font-family: var(--font-body) !important;
  font-style: italic;
  font-weight: 500 !important;
  color: var(--cream-dim) !important;
  font-size: 0.62em !important;
  letter-spacing: 3px !important;
  text-transform: uppercase;
  margin-top: 3px !important;
  display: block !important;
  text-shadow:
    0 0 10px rgba(217, 195, 140, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.95) !important;
}

/* ============================================================
   HERO WORDMARK — custom CSS/SVG recreation of the VJ plate.
   Antique lanterns flank "V.J." (Cinzel Decorative, gilt foil) above
   "Thrift Finds" (Great Vibes script). A hairline gilt rule carries
   the tagline underneath. Fully live DOM — no image cropping, clean
   typography at any viewport, recolor-able via tokens.
   ============================================================ */
.vj-wordmark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Push the lanterns hard to the outer edges of the plate so the
     wordmark sits in a generous open middle. Wide gap + wide max so
     the pair reads as bookends, not shoulder-to-shoulder with the
     letters. */
  gap: clamp(56px, 12vw, 240px);
  width: 100%;
  max-width: 1480px;
  margin: 0 auto 32px;
  padding: 0 clamp(16px, 4vw, 64px);
  position: relative;
  z-index: 2;
  animation: wordmarkEntrance 1.2s ease-out;
}
.vj-lantern {
  flex-shrink: 0;
  /* Real photograph — sized big enough to carry the copper plate as
     confident bookends. Scales up on wider viewports so the hero
     doesn't collapse into a small cluster in the middle. */
  width: clamp(128px, 16vw, 216px);
  height: auto;
  display: block;
  /* Real-object lighting — the brass body casts a soft warm halo
     on the copper like a lantern sitting in ambient light, and a
     heavy grounded cast shadow below so it reads as placed on the
     plate rather than floating. */
  filter:
    drop-shadow(0 0 32px rgba(255, 196, 112, 0.28))
    drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  animation: lanternFlicker 5.2s ease-in-out infinite;
}
/* Mirror the right lantern so the two lanterns face each other
   (hinge side in, flame key toggle on the outer edge) — gives the
   composition natural symmetry instead of two identical photos. */
.vj-lantern-right {
  transform: scaleX(-1);
  animation-delay: -2.6s;
}
.vj-wordmark-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  /* Claim the full middle space so the wordmark + tagline have room
     to breathe and the gold tagline rules don't collide with the
     lantern art. */
  flex: 1 1 auto;
  padding: 0 clamp(12px, 3vw, 40px);
}
.vj-vj {
  font-family: var(--font-decorative);
  font-weight: 900;
  font-size: clamp(3.4rem, 9vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg,
    #fbe2a1 0%,
    #ecc97a 22%,
    #c69a3e 55%,
    #8c6e2e 80%,
    #d8b368 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6));
  margin: 0 0 6px;
}
.vj-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 4.8rem);
  line-height: 1;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg,
    #fbe2a1 0%,
    #ecc97a 40%,
    #c69a3e 75%,
    #8c6e2e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.55));
  margin: 0 0 12px;
}
.vj-tagrule {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  margin-top: 4px;
}
.vj-tagrule::before,
.vj-tagrule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(236, 201, 122, 0.6) 50%,
    transparent 100%);
}
.vj-tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.66rem, 1.25vw, 0.82rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
.vj-diamond {
  color: var(--gold-bright);
  font-size: 0.7em;
  margin: 0 0.35em;
  opacity: 0.9;
  vertical-align: 0.05em;
}
@keyframes wordmarkEntrance {
  from { opacity: 0; transform: translateY(-16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lanternFlicker {
  0%, 100% {
    filter:
      drop-shadow(0 0 32px rgba(255, 196, 112, 0.28))
      drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55))
      drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  }
  50% {
    filter:
      drop-shadow(0 0 42px rgba(255, 196, 112, 0.42))
      drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55))
      drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  }
}
@media (max-width: 720px) {
  .vj-wordmark { gap: 10px; }
  .vj-lantern { width: 88px; }
  .vj-tagline { letter-spacing: 0.28em; }
}
@media (max-width: 480px) {
  .vj-wordmark { gap: 4px; }
  .vj-lantern { width: 68px; }
  .vj-tagline { letter-spacing: 0.2em; font-size: 0.58rem; }
  .vj-tagrule { gap: 8px; }
}

/* ============================================================
   RULES POSTER — inline hero-size image for FAQ / policies
   Apply class="rules-poster" to any <img>
   ============================================================ */
.rules-poster {
  display: block;
  max-width: 640px;
  width: 100%;
  height: auto;
  margin: 40px auto;
  border: 2px solid var(--gold-dim);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(198, 154, 62, 0.25),
    0 12px 48px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(198, 154, 62, 0.12);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.rules-poster:hover {
  transform: scale(1.01);
  box-shadow:
    0 0 0 1px rgba(236, 201, 122, 0.45),
    0 16px 60px rgba(0, 0, 0, 0.7),
    0 0 80px rgba(198, 154, 62, 0.2);
}

/* ============================================================
   MOBILE — less heavy texture + smaller seal
   ============================================================ */
@media (max-width: 768px) {
  body::before { opacity: 0.05; background-size: 140px 140px; }
  body::after  { opacity: 0.04; }
  .nav-brand-mark { width: 38px; height: 38px; }
  .hero { padding: 110px 16px 60px !important; }
  .hero-wordmark { max-width: 100%; margin-bottom: 16px; }
  .nav-brand-wordmark { font-size: 0.95rem; }
  .rules-poster { margin: 28px auto; }
}
@media (max-width: 480px) {
  .nav-brand-wordmark > span { display: none !important; }
}