/* ═══════════════════════════════════════════════════════
   VILNIUS AMBER — Design System
   Inspired by candlelit evenings in the Old Town of Vilnius:
   cobblestone dark, warm amber, aged parchment, cathedral silence.
   ═══════════════════════════════════════════════════════ */

:root {
  --bg-deep:        #0d0b08;   /* wet cobblestone, darkest */
  --bg-warm:        #141009;   /* warm content background  */
  --bg-panel:       #1b150d;   /* panel / card surface     */
  --amber:          #c4882a;   /* main warm amber gold     */
  --amber-glow:     #e5b445;   /* bright candlelight accent*/
  --amber-dim:      #7a5118;   /* muted amber border       */
  --parchment:      #efe2c0;   /* warm cream text          */
  --parchment-dim:  #9e8a68;   /* secondary / body text    */
  --fog:            #5a4e3e;   /* subtle muted elements    */
  --divider:        #271e12;   /* panel border             */
  --sepia:          #5c4830;   /* mid sepia for frames     */
  /* RGB channels for rgba() with variable opacity */
  --bg-deep-rgb:    13, 11, 8;
  --bg-warm-rgb:    20, 16, 9;
  --amber-rgb:      196, 136, 42;
  --panel-glass:    rgba(18, 14, 10, 0.34);
  --panel-line:     rgba(196, 136, 42, 0.28);
  --panel-shadow:   0 18px 55px rgba(0, 0, 0, 0.36);
  /* Font stack — overridable per design style */
  --font-display:   "Cinzel Decorative", serif;
  --font-heading:   "Cormorant Garamond", serif;
  --font-body:      "Lora", Georgia, serif;
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── Film grain overlay ────────────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.045;
  mix-blend-mode: overlay;
}

/* ── Base ──────────────────────────────────────────── */
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--parchment);
  -webkit-font-smoothing: antialiased;
}

/* ── Hero ──────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  contain: layout paint;
  isolation: isolate;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Warm amber-tinted cinematic overlay — fades to content bg at bottom */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 140%, rgba(var(--amber-rgb), 0.1) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(var(--bg-deep-rgb), 0.74) 0%,
      rgba(var(--bg-deep-rgb), 0.26) 42%,
      var(--bg-warm) 100%
    );
}

/* Lateral vignette — like looking through a doorway */
.hero-vignette {
  position: absolute;
  inset: 0;
  box-shadow:
    inset 110px 0 130px rgba(var(--bg-deep-rgb), 0.6),
    inset -110px 0 130px rgba(var(--bg-deep-rgb), 0.6);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 28px clamp(120px, 18vh, 210px);
  color: var(--parchment);
}

/* ── Navigation ────────────────────────────────────── */
.nav-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 38px;
  animation: fadeDown 0.9s ease both;
}

.menu {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.menu-link {
  color: var(--parchment);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.87rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.72;
  position: relative;
  padding-bottom: 4px;
  transition: opacity 0.22s;
}

/* Amber underline slide-in on hover */
.menu-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 1px;
  background: var(--amber);
  transition: left 0.26s ease, right 0.26s ease;
}

.menu-link:hover,
.menu-link:focus-visible {
  opacity: 1;
}

.menu-link:hover::after,
.menu-link:focus-visible::after {
  left: 0;
  right: 0;
}

/* ── Language switcher ─────────────────────────────── */
.lang-switcher {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--lang-bg, rgba(0,0,0,0.28));
  border: 1px solid var(--lang-border, rgba(210,148,55,0.45));
  border-radius: 20px;
  padding: 3px 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.lang-sep {
  color: rgba(210,148,55,0.45);
  font-size: 0.72rem;
  user-select: none;
  pointer-events: none;
  margin: 0 1px;
}

.lang-btn {
  background: none;
  border: none;
  color: var(--lang-text, var(--amber));
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  opacity: 0.68;
  padding: 2px 5px;
  transition: opacity 0.2s, color 0.2s, text-shadow 0.2s;
}

.lang-btn.active {
  opacity: 1;
  color: var(--lang-text-active, var(--amber));
  text-shadow: var(--lang-text-shadow, 0 0 8px rgba(210,148,55,0.6));
}

.lang-btn:hover {
  opacity: 0.9;
}

/* Light palettes: stronger contrast for RU/EN switcher over bright hero/video */
[data-theme="medium"],
[data-theme="light"],
[data-theme="rose"],
[data-theme="sage"],
[data-theme="lavender"],
[data-theme="eco"],
[data-theme="lav-choco"],
[data-theme="sky-bubble"],
[data-theme="yellow-char"],
[data-theme="navy-cream"],
[data-theme="pastel-duo"],
[data-theme="powder-gray"],
[data-theme="mustard"],
[data-theme="terracotta"],
[data-theme="blueberry"],
[data-theme="turquoise"] {
  --lang-bg: rgba(255, 248, 235, 0.88);
  --lang-border: rgba(101, 68, 18, 0.38);
  --lang-text: #53360c;
  --lang-text-active: #2e1c03;
  --lang-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  --kicker-color: #3c2508;
  --kicker-shadow: 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 8px rgba(0, 0, 0, 0.22);
  --panel-glass: rgba(255, 250, 240, 0.40);
  --panel-line: rgba(101, 68, 18, 0.26);
  --panel-shadow: 0 18px 46px rgba(45, 29, 9, 0.18);
}

/* ── Hero copy ─────────────────────────────────────── */
.hero-copy {
  text-align: center;
  animation: fadeUp 1.1s ease 0.18s both;
}

.kicker {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 0.76rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--kicker-color, var(--amber-glow));
  text-shadow: var(--kicker-shadow, 0 1px 10px rgba(0, 0, 0, 0.45));
}

.ornament {
  display: flex;
  justify-content: center;
  margin: 4px 0 12px;
}

.hero-copy h1 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 4vw, 2.9rem);
  font-weight: 400;
  letter-spacing: 0.07em;
  color: var(--parchment);
  line-height: 1.25;
  /* Signature candlelight glow — the unforgettable moment */
  text-shadow:
    0 2px 28px rgba(var(--amber-rgb), 0.5),
    0 0  80px rgba(var(--amber-rgb), 0.18);
}

.hero-subtitle {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.87rem;
  letter-spacing: 0.14em;
  color: var(--hero-subtitle-color, var(--parchment-dim));
  text-shadow: var(--hero-subtitle-shadow, 0 1px 7px rgba(0, 0, 0, 0.18));
}

/* ── Content section ───────────────────────────────── */
.content {
  background: transparent;
  width: 100%;
  margin-top: clamp(-650px, -60vh, -495px);
  padding-top: 0;
  box-shadow: none;
  position: relative;
  z-index: 3;
}

.section-ornament {
  text-align: center;
  font-size: 0.95rem;
  color: var(--amber);
  padding: 30px 0 18px;
  letter-spacing: 0.5em;
  opacity: 0.6;
}

.layout-grid {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px 52px;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 22px;
  align-items: start;
  background: transparent;
  position: relative;
  z-index: 3;
}

/* ── Panels ────────────────────────────────────────── */
.panel {
  background: var(--panel-glass);
  border: 1px solid var(--panel-line);
  border-radius: 22px;
  padding: 22px;
  position: relative;
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(9px) saturate(112%);
  -webkit-backdrop-filter: blur(9px) saturate(112%);
}

/* Keep video clearly visible behind panels */
.hero,
.hero-inner,
.content,
.layout-grid {
  isolation: isolate;
}



/* Label tag above each panel */
.panel-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid rgba(var(--amber-rgb), 0.32);
  padding: 2px 10px;
  border-radius: 1px;
  margin-bottom: 14px;
}

[data-theme="pastel-duo"] .panel-tag {
  color: #355d85;
  border-color: rgba(53, 93, 133, 0.58);
  background: rgba(255, 255, 255, 0.22);
  font-weight: 600;
}

/* ── Left panel — Author portrait ──────────────────── */
.author-frame-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}

/* Portrait frame — gently rounded corners, double amber ring */
.author-frame {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--sepia);
  box-shadow:
    0 0 0 3px var(--bg-panel),
    0 0 0 4px rgba(var(--amber-rgb), 0.22),
    0 24px 52px rgba(0, 0, 0, 0.7);
}

.author-image {
  width: 100%;
  display: block;
  object-fit: cover;
  filter: sepia(18%) contrast(1.04) brightness(0.94);
  transition: filter 0.55s ease;
}

.author-frame:hover .author-image {
  filter: sepia(0%) contrast(1.06) brightness(1.0);
}

/* Name plate beneath portrait */
.author-name-plate {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0.07em;
  color: var(--parchment-dim);
  text-align: center;
  padding: 5px 0;
  border-top: 1px solid var(--divider);
  width: 100%;
}

/* ── Center panel — Text ───────────────────────────── */
.panel-center h2 {
  margin: 4px 0 0;
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 600;
  font-style: italic;
  color: var(--parchment);
  line-height: 1.22;
}

/* Amber gradient divider */
.divider-ornament {
  width: 52px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  margin: 14px 0 16px;
}

.panel-center p {
  margin: 0 0 14px;
  font-size: 0.93rem;
  line-height: 1.8;
  color: var(--parchment-dim);
}

/* Pull-quote in amber italic */
.pull-quote {
  font-family: var(--font-heading) !important;
  font-style: italic !important;
  font-size: 1.16rem !important;
  color: var(--amber-glow) !important;
  border-left: 2px solid rgba(var(--amber-rgb), 0.38);
  padding-left: 14px !important;
  margin: 18px 0 18px !important;
  line-height: 1.5 !important;
}

/* Slide-fill CTA button */
.button-link {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 26px;
  border: 1px solid rgba(var(--amber-rgb), 0.48);
  color: var(--amber);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color 0.32s;
}

.button-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: translateX(-103%);
  transition: transform 0.32s ease;
  z-index: -1;
}

.button-link:hover,
.button-link:focus-visible {
  color: var(--bg-deep);
}

.button-link:hover::before,
.button-link:focus-visible::before {
  transform: translateX(0);
}

/* ── Right panel — Books ───────────────────────────── */
.books-grid {
  display: grid;
  margin-top: 8px;
  position: relative;
}

/* Book covers with 3D perspective tilt and cast shadow */
.book-wrap {
  grid-area: 1 / 1;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  box-shadow:
    -5px 5px 18px rgba(0, 0, 0, 0.7),
    0 8px 26px rgba(0, 0, 0, 0.45);
  transition: opacity 2.6s ease-in-out, transform 2.6s ease-in-out, box-shadow 0.45s ease;
  transform: perspective(900px) rotateY(-1.8deg) scale(0.992);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.book-wrap.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: perspective(900px) rotateY(-1.8deg) scale(1);
}

.book-wrap:hover {
  transform: perspective(900px) rotateY(0deg) translateY(-5px);
  box-shadow:
    0 0 0 1px rgba(var(--amber-rgb), 0.22),
    -2px 8px 20px rgba(0, 0, 0, 0.55),
    0 18px 40px rgba(var(--amber-rgb), 0.1);
}

.book-image {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Candlelight highlight on book spine edge */
.book-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgba(255, 238, 190, 0.08) 0%, transparent 52%);
  pointer-events: none;
}

/* ── Book dots navigation ───────────────────────────── */
.book-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.book-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--amber);
  background: transparent;
  cursor: pointer;
  padding: 0;
  opacity: 0.45;
  transition: opacity 0.3s, background 0.3s, transform 0.3s;
}
.book-dot:hover {
  opacity: 0.75;
  transform: scale(1.2);
}
.book-dot.is-active {
  background: var(--amber);
  opacity: 1;
  transform: scale(1.25);
  box-shadow: 0 0 6px rgba(210,148,55,0.55);
}

/* ── Footer / Social ───────────────────────────────── */
.social {
  background: var(--bg-deep);
  text-align: center;
  padding: 44px 20px 56px;
  border-top: 1px solid var(--divider);
}

.social-ornament {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

.social h3 {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  color: var(--parchment-dim);
  text-transform: uppercase;
}

.social-list {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 30px;
}

.social-item {
  width: 64px;
  height: 64px;
  display: block;
  border-radius: 16px;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.03);
  background-repeat: no-repeat;
  background-size: 76% 76%;
  background-position: center;
  border: 1px solid rgba(var(--amber-rgb), 0.25);
  transition: transform 0.26s ease, box-shadow 0.26s ease, filter 0.26s ease;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
}

.social-item:hover,
.social-item:focus-visible {
  transform: translateY(-5px) scale(1.1);
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.5)) brightness(1.08);
}

.social-facebook {
  background-image: url('logo/Facebook_icon.svg');
}

.social-instagram {
  background-image: url('logo/instagram-1-svgrepo-com.svg');
}

/* Copyright */
.footer-note {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.73rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fog);
  opacity: 0.5;
}

/* ── Animations ────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0);     }
}

@keyframes bookFade {
  from { opacity: 0.2; transform: perspective(900px) rotateY(-1.8deg) scale(0.98); }
  to   { opacity: 1; transform: perspective(900px) rotateY(-1.8deg) scale(1); }
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 900px) {
  .content {
    margin-top: -620px;
  }

  .layout-grid {
    grid-template-columns: 1fr;
    padding: 0 20px 40px;
  }

  .lang-switcher {
    position: static;
  }

  .nav-row {
    flex-direction: column;
    gap: 10px;
  }
}

@media (min-width: 901px) {
  .hero {
    min-height: min(100vh, 860px);
  }

  .hero-inner {
    padding-bottom: clamp(92px, 12vh, 150px);
  }

  .content {
    margin-top: clamp(-560px, -52vh, -430px);
  }
}

@media (max-width: 600px) {
  /* ── Fixed video background on mobile ─────────────────
     Video stays glued to viewport; sections scroll over it */
  .hero {
    overflow: visible;
    background: transparent;
    min-height: 100vh;
  }

  .hero-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
  }

  .hero-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  .hero-vignette {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  .hero-inner {
    position: relative;
    z-index: 2;
    padding: 18px 18px 64px;
  }

  .content {
    position: relative;
    z-index: 2;
    margin-top: -580px;
    background: transparent;
  }

  .social {
    position: relative;
    z-index: 2;
  }

  .menu {
    gap: 16px;
  }

  .hero-copy h1 {
    font-size: 1.35rem;
  }

  .layout-grid {
    padding: 0 16px 32px;
  }
}

/* ═══════════════════════════════════════════════════════
   THEME OVERRIDES
   ═══════════════════════════════════════════════════════ */

/* — Medium: Vilnius Dusk — warm amber-rose sandstone afternoon — */
[data-theme="medium"] {
  --bg-deep:        #d8c9af;
  --bg-warm:        #e8d9c0;
  --bg-panel:       #f0e4cc;
  --amber:          #8b5e1a;
  --amber-glow:     #b07820;
  --amber-dim:      #c09a60;
  --parchment:      #2e1e08;
  --parchment-dim:  #5a3f20;
  --fog:            #8a7060;
  --divider:        #c8b898;
  --sepia:          #7a5a40;
  --bg-deep-rgb:    216, 201, 175;
  --bg-warm-rgb:    232, 217, 192;
  --amber-rgb:      139, 94, 26;
}

/* — Light: Vilnius Morning — warm parchment, aged paper — */
[data-theme="light"] {
  --bg-deep:        #ede5d0;
  --bg-warm:        #f7f1e2;
  --bg-panel:       #ede4cc;
  --amber:          #8b5e1a;
  --amber-glow:     #a67520;
  --amber-dim:      #c8a870;
  --parchment:      #2a1f10;
  --parchment-dim:  #5a4830;
  --fog:            #9a8a70;
  --divider:        #d8cdb0;
  --sepia:          #8a6a50;
  --bg-deep-rgb:    237, 229, 208;
  --bg-warm-rgb:    247, 241, 226;
  --amber-rgb:      139, 94, 26;
}

/* Light theme: warm cream wash over video for readability */
[data-theme="medium"] .hero-overlay,
[data-theme="light"] .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(var(--amber-rgb), 0.06) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(var(--bg-deep-rgb), 0.62) 0%,
      rgba(var(--bg-deep-rgb), 0.18) 42%,
      var(--bg-warm) 100%
    );
}

/* — Great Vibes for author name on light & medium themes — */
[data-theme="medium"] h1,
[data-theme="pastel-duo"] h1,
[data-theme="light"] h1 {
  font-family: "Great Vibes", cursive;
  font-size: clamp(2.8rem, 8vw, 5.8rem);
  font-weight: 400;
  letter-spacing: 0.01em;
}

[data-theme="medium"] .author-name-plate,
[data-theme="pastel-duo"] .author-name-plate,
[data-theme="light"] .author-name-plate {
  font-family: "Great Vibes", cursive;
  font-style: normal;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}

/* ── Theme Switcher ─────────────────────────────────── */
.theme-switcher {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding-right: 4px;
}

.theme-switcher::-webkit-scrollbar {
  width: 6px;
}

.theme-switcher::-webkit-scrollbar-thumb {
  background: rgba(var(--amber-rgb), 0.32);
  border-radius: 8px;
}

.theme-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: var(--swatch-bg);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.theme-swatch::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--swatch-dot);
  opacity: 0.72;
  transition: opacity 0.22s;
}

.theme-swatch:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.theme-swatch.active {
  border-color: var(--swatch-dot);
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 4px 12px rgba(0, 0, 0, 0.5);
}

.theme-swatch.active::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════
   DESIGN STYLE OVERRIDES
   Each overrides CSS variables + font stack for a completely
   distinct aesthetic — no class changes needed on content els.
   ═══════════════════════════════════════════════════════ */

/* — Baltic Frost — cold navy, icy silver-blue, Playfair + Raleway — */
[data-style="baltic"] {
  --bg-deep:        #070c17;
  --bg-warm:        #0b1020;
  --bg-panel:       #101828;
  --amber:          #6ab0d8;
  --amber-glow:     #a4cfe8;
  --amber-dim:      #3a6088;
  --parchment:      #dde8f4;
  --parchment-dim:  #8aaac4;
  --fog:            #3a5068;
  --divider:        #1a2c40;
  --sepia:          #2a4060;
  --bg-deep-rgb:    7, 12, 23;
  --bg-warm-rgb:    11, 16, 32;
  --amber-rgb:      106, 176, 216;
  --font-display:   "Playfair Display", serif;
  --font-heading:   "Raleway", sans-serif;
  --font-body:      "Raleway", sans-serif;
}

[data-style="baltic"] .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(106, 176, 216, 0.08) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(7, 12, 23, 0.78) 0%,
      rgba(7, 12, 23, 0.28) 42%,
      var(--bg-warm) 100%
    );
}

/* — Crimson Velvet — deep wine, rose-gold, Marcellus SC — */
[data-style="crimson"] {
  --bg-deep:        #100810;
  --bg-warm:        #180d16;
  --bg-panel:       #22111f;
  --amber:          #c45870;
  --amber-glow:     #e07c90;
  --amber-dim:      #6a2838;
  --parchment:      #f0dde4;
  --parchment-dim:  #a87888;
  --fog:            #604858;
  --divider:        #2e1428;
  --sepia:          #5a3046;
  --bg-deep-rgb:    16, 8, 16;
  --bg-warm-rgb:    24, 13, 22;
  --amber-rgb:      196, 88, 112;
  --font-display:   "Marcellus SC", serif;
  --font-heading:   "Cormorant Garamond", serif;
  --font-body:      "Lora", Georgia, serif;
}

[data-style="crimson"] .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(196, 88, 112, 0.10) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(16, 8, 16, 0.78) 0%,
      rgba(16, 8, 16, 0.28) 42%,
      var(--bg-warm) 100%
    );
}

/* — Forest Chapel — deep moss, copper oak, IM Fell English SC + Libre Baskerville — */
[data-style="forest"] {
  --bg-deep:        #080e09;
  --bg-warm:        #0d1610;
  --bg-panel:       #131e14;
  --amber:          #b87340;
  --amber-glow:     #d89060;
  --amber-dim:      #624018;
  --parchment:      #e8f0d8;
  --parchment-dim:  #88a870;
  --fog:            #3a5038;
  --divider:        #1a2c1c;
  --sepia:          #3a5030;
  --bg-deep-rgb:    8, 14, 9;
  --bg-warm-rgb:    13, 22, 16;
  --amber-rgb:      184, 115, 64;
  --font-display:   "IM Fell English SC", serif;
  --font-heading:   "Libre Baskerville", serif;
  --font-body:      "Libre Baskerville", serif;
}

[data-style="forest"] .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(184, 115, 64, 0.10) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(8, 14, 9, 0.78) 0%,
      rgba(8, 14, 9, 0.28) 42%,
      var(--bg-warm) 100%
    );
}

/* — Baroque Fraktur — German 18th c. manuscript, verdigris, UnifrakturMaguntia + EB Garamond — */
[data-style="fraktur"] {
  --bg-deep:        #0c0a06;
  --bg-warm:        #131009;
  --bg-panel:       #1a160c;
  --amber:          #6a9648;
  --amber-glow:     #90c060;
  --amber-dim:      #3a5a28;
  --parchment:      #ede0c0;
  --parchment-dim:  #9a8a68;
  --fog:            #4a4030;
  --divider:        #231e12;
  --sepia:          #4a4030;
  --bg-deep-rgb:    12, 10, 6;
  --bg-warm-rgb:    19, 16, 9;
  --amber-rgb:      106, 150, 72;
  --font-display:   "UnifrakturMaguntia", serif;
  --font-heading:   "EB Garamond", serif;
  --font-body:      "EB Garamond", serif;
}

[data-style="fraktur"] .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(106, 150, 72, 0.10) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(12, 10, 6, 0.78) 0%,
      rgba(12, 10, 6, 0.28) 42%,
      var(--bg-warm) 100%
    );
}

/* — Caslon & Crown — English royal printing house, vermilion seal, Playfair SC + Spectral — */
[data-style="caslon"] {
  --bg-deep:        #100a0a;
  --bg-warm:        #191010;
  --bg-panel:       #221414;
  --amber:          #9c2a2a;
  --amber-glow:     #c84040;
  --amber-dim:      #5a1818;
  --parchment:      #f2ece0;
  --parchment-dim:  #a09080;
  --fog:            #604848;
  --divider:        #2c1818;
  --sepia:          #5a3838;
  --bg-deep-rgb:    16, 10, 10;
  --bg-warm-rgb:    25, 16, 16;
  --amber-rgb:      156, 42, 42;
  --font-display:   "Playfair Display SC", serif;
  --font-heading:   "Spectral SC", serif;
  --font-body:      "Spectral", serif;
}

[data-style="caslon"] .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(156, 42, 42, 0.12) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(16, 10, 10, 0.80) 0%,
      rgba(16, 10, 10, 0.30) 42%,
      var(--bg-warm) 100%
    );
}

/* — Paris Gazette — French 18th c. broadsheet, printer's red, Abril Fatface + Spectral — */
[data-style="gazette"] {
  --bg-deep:        #0c0c0c;
  --bg-warm:        #141414;
  --bg-panel:       #1c1c1c;
  --amber:          #cc3020;
  --amber-glow:     #f04030;
  --amber-dim:      #741a10;
  --parchment:      #f4f0e8;
  --parchment-dim:  #a8a098;
  --fog:            #585858;
  --divider:        #282828;
  --sepia:          #505050;
  --bg-deep-rgb:    12, 12, 12;
  --bg-warm-rgb:    20, 20, 20;
  --amber-rgb:      204, 48, 32;
  --font-display:   "Abril Fatface", serif;
  --font-heading:   "Spectral", serif;
  --font-body:      "Spectral", serif;
}

[data-style="gazette"] .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(204, 48, 32, 0.10) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(12, 12, 12, 0.82) 0%,
      rgba(12, 12, 12, 0.32) 42%,
      var(--bg-warm) 100%
    );
}

/* — Venetian Indigo — Prussian blue night, burnished gold, Cardo + EB Garamond — */
[data-style="venetian"] {
  --bg-deep:        #070c1a;
  --bg-warm:        #0d1228;
  --bg-panel:       #131a30;
  --amber:          #c09820;
  --amber-glow:     #e0b828;
  --amber-dim:      #705810;
  --parchment:      #e8e0d0;
  --parchment-dim:  #8a8268;
  --fog:            #3a4060;
  --divider:        #1a2045;
  --sepia:          #304080;
  --bg-deep-rgb:    7, 12, 26;
  --bg-warm-rgb:    13, 18, 40;
  --amber-rgb:      192, 152, 32;
  --font-display:   "Cardo", serif;
  --font-heading:   "EB Garamond", serif;
  --font-body:      "EB Garamond", serif;
}

[data-style="venetian"] .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(192, 152, 32, 0.10) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(7, 12, 26, 0.80) 0%,
      rgba(7, 12, 26, 0.30) 42%,
      var(--bg-warm) 100%
    );
}

/* ═══════════════════════════════════════════════════════
   LIGHT PALETTE THEMES
   ═══════════════════════════════════════════════════════ */

/* — Rose Dawn — blush parchment, rose-gold ink — */
[data-theme="rose"] {
  --bg-deep:        #fdf0f2;
  --bg-warm:        #fff5f7;
  --bg-panel:       #fce8ec;
  --amber:          #b5607a;
  --amber-glow:     #d4708a;
  --amber-dim:      #d4a0b0;
  --parchment:      #2a1018;
  --parchment-dim:  #7a4050;
  --fog:            #c090a0;
  --divider:        #f0ccd4;
  --sepia:          #c090a0;
  --bg-deep-rgb:    253, 240, 242;
  --bg-warm-rgb:    255, 245, 247;
  --amber-rgb:      181, 96, 122;
}

[data-theme="rose"] .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(181, 96, 122, 0.08) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(253, 240, 242, 0.62) 0%,
      rgba(253, 240, 242, 0.18) 42%,
      var(--bg-warm) 100%
    );
}

/* — Sage Morning — pale linen, forest moss — */
[data-theme="sage"] {
  --bg-deep:        #f0f5f0;
  --bg-warm:        #f6faf6;
  --bg-panel:       #e8f0e8;
  --amber:          #4a7a4a;
  --amber-glow:     #5c9460;
  --amber-dim:      #90b890;
  --parchment:      #182018;
  --parchment-dim:  #486048;
  --fog:            #88a888;
  --divider:        #ccdccc;
  --sepia:          #7a9a7a;
  --bg-deep-rgb:    240, 245, 240;
  --bg-warm-rgb:    246, 250, 246;
  --amber-rgb:      74, 122, 74;
}

[data-theme="sage"] .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(74, 122, 74, 0.08) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(240, 245, 240, 0.62) 0%,
      rgba(240, 245, 240, 0.18) 42%,
      var(--bg-warm) 100%
    );
}

/* — Lavender Field — pale violet mist, amethyst — */
[data-theme="lavender"] {
  --bg-deep:        #f5f0fa;
  --bg-warm:        #faf6ff;
  --bg-panel:       #ede5f8;
  --amber:          #7a5a9a;
  --amber-glow:     #9470b8;
  --amber-dim:      #c0a8d8;
  --parchment:      #20102e;
  --parchment-dim:  #604880;
  --fog:            #b098c8;
  --divider:        #ddd0f0;
  --sepia:          #a890c0;
  --bg-deep-rgb:    245, 240, 250;
  --bg-warm-rgb:    250, 246, 255;
  --amber-rgb:      122, 90, 154;
}

[data-theme="lavender"] .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(122, 90, 154, 0.08) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(245, 240, 250, 0.62) 0%,
      rgba(245, 240, 250, 0.18) 42%,
      var(--bg-warm) 100%
    );
}

/* — Eco Aesthetic — sage, olive, beige, sand, warm gray — */
[data-theme="eco"] {
  --bg-deep:        #e6dfd2;
  --bg-warm:        #f2eadb;
  --bg-panel:       #ebe2d1;
  --amber:          #6f7f4f;
  --amber-glow:     #7f9360;
  --amber-dim:      #a39a86;
  --parchment:      #2f2a20;
  --parchment-dim:  #605748;
  --fog:            #9b927f;
  --divider:        #d7cbb6;
  --sepia:          #96886f;
  --bg-deep-rgb:    230, 223, 210;
  --bg-warm-rgb:    242, 234, 219;
  --amber-rgb:      111, 127, 79;
}

/* — Deep Noble — chocolate, deep brown, cappuccino, bordo — */
[data-theme="noble"] {
  --bg-deep:        #1a110f;
  --bg-warm:        #231614;
  --bg-panel:       #2b1b19;
  --amber:          #b48b66;
  --amber-glow:     #cfa27a;
  --amber-dim:      #6e4f3b;
  --parchment:      #f3e4d1;
  --parchment-dim:  #c7ac93;
  --fog:            #7b6256;
  --divider:        #3a2722;
  --sepia:          #5f443a;
  --bg-deep-rgb:    26, 17, 15;
  --bg-warm-rgb:    35, 22, 20;
  --amber-rgb:      180, 139, 102;
}

/* — Accent Bright: lavender + chocolate — */
[data-theme="lav-choco"] {
  --bg-deep:        #e3d2eb;
  --bg-warm:        #ede0f2;
  --bg-panel:       #e2d0ea;
  --amber:          #5a3b2f;
  --amber-glow:     #70493a;
  --amber-dim:      #b497a9;
  --parchment:      #241a1b;
  --parchment-dim:  #5f4a4d;
  --fog:            #9b8591;
  --divider:        #d4bfdc;
  --sepia:          #8f7480;
  --bg-deep-rgb:    227, 210, 235;
  --bg-warm-rgb:    237, 224, 242;
  --amber-rgb:      90, 59, 47;
}

/* — Accent Bright: sky-blue + bubble-gum pink — */
[data-theme="sky-bubble"] {
  --bg-deep:        #d9ebff;
  --bg-warm:        #e8f3ff;
  --bg-panel:       #ddebfb;
  --amber:          #ff63ad;
  --amber-glow:     #ff82be;
  --amber-dim:      #7ba9cd;
  --parchment:      #1d314f;
  --parchment-dim:  #4f6f93;
  --fog:            #8da8c5;
  --divider:        #c4d9f0;
  --sepia:          #89aac9;
  --bg-deep-rgb:    217, 235, 255;
  --bg-warm-rgb:    232, 243, 255;
  --amber-rgb:      255, 99, 173;
}

/* — Accent Bright: bright yellow + charcoal — */
[data-theme="yellow-char"] {
  --bg-deep:        #f2dc5f;
  --bg-warm:        #ffe35f;
  --bg-panel:       #f6d954;
  --amber:          #262626;
  --amber-glow:     #101010;
  --amber-dim:      #8d7f3a;
  --parchment:      #161616;
  --parchment-dim:  #3b3830;
  --fog:            #8f7d35;
  --divider:        #d9c14a;
  --sepia:          #9c8a42;
  --bg-deep-rgb:    242, 220, 95;
  --bg-warm-rgb:    255, 227, 95;
  --amber-rgb:      38, 38, 38;
}

/* — Classic Contrast: black + white — */
[data-theme="bw"] {
  --bg-deep:        #050505;
  --bg-warm:        #121212;
  --bg-panel:       #191919;
  --amber:          #f5f5f5;
  --amber-glow:     #ffffff;
  --amber-dim:      #8a8a8a;
  --parchment:      #f7f7f7;
  --parchment-dim:  #b9b9b9;
  --fog:            #7a7a7a;
  --divider:        #2d2d2d;
  --sepia:          #616161;
  --bg-deep-rgb:    5, 5, 5;
  --bg-warm-rgb:    18, 18, 18;
  --amber-rgb:      245, 245, 245;
}

/* — Classic Contrast: navy + cream — */
[data-theme="navy-cream"] {
  --bg-deep:        #e9e4d7;
  --bg-warm:        #f5f1e6;
  --bg-panel:       #ece6d7;
  --amber:          #1b2e56;
  --amber-glow:     #28457f;
  --amber-dim:      #9e9a8f;
  --parchment:      #1d2640;
  --parchment-dim:  #4b5a7f;
  --fog:            #98948c;
  --divider:        #d9d2c1;
  --sepia:          #8f8a7d;
  --bg-deep-rgb:    233, 228, 215;
  --bg-warm-rgb:    245, 241, 230;
  --amber-rgb:      27, 46, 86;
}

/* — Soft: pastel pink + blue — */
[data-theme="pastel-duo"] {
  --bg-deep:        #f6e9f0;
  --bg-warm:        #faeff4;
  --bg-panel:       #f4e5ef;
  --amber:          #4f7ea9;
  --amber-glow:     #7ea6ca;
  --amber-dim:      #d3b7c6;
  --parchment:      #3f3351;
  --parchment-dim:  #6f5f82;
  --fog:            #b7a0b2;
  --divider:        #e8d6e1;
  --sepia:          #b59eb1;
  --bg-deep-rgb:    246, 233, 240;
  --bg-warm-rgb:    250, 239, 244;
  --amber-rgb:      79, 126, 169;
  --hero-subtitle-color: #4f3f67;
  --font-display:   "Cinzel Decorative", serif;
  --font-heading:   "Cormorant Garamond", serif;
  --font-body:      "Lora", Georgia, serif;
}

/* — Soft: gray + powder — */
[data-theme="powder-gray"] {
  --bg-deep:        #e2e1e7;
  --bg-warm:        #ecebf0;
  --bg-panel:       #e2e0e8;
  --amber:          #b993ab;
  --amber-glow:     #caa7be;
  --amber-dim:      #a7a6af;
  --parchment:      #2f2d36;
  --parchment-dim:  #5e5b68;
  --fog:            #9e9cab;
  --divider:        #d3d1db;
  --sepia:          #9c99a8;
  --bg-deep-rgb:    226, 225, 231;
  --bg-warm-rgb:    236, 235, 240;
  --amber-rgb:      185, 147, 171;
}

/* — Yellow range: mustard / lemon / pastel yellow — */
[data-theme="mustard"] {
  --bg-deep:        #e8d397;
  --bg-warm:        #f4e0a9;
  --bg-panel:       #ecd595;
  --amber:          #9c6a16;
  --amber-glow:     #b77c1a;
  --amber-dim:      #c8aa64;
  --parchment:      #3b2b12;
  --parchment-dim:  #6f5728;
  --fog:            #ad9053;
  --divider:        #d8bf7f;
  --sepia:          #a88a4d;
  --bg-deep-rgb:    232, 211, 151;
  --bg-warm-rgb:    244, 224, 169;
  --amber-rgb:      156, 106, 22;
}

/* — Red range: terracotta / bordo / coral / wine — */
[data-theme="terracotta"] {
  --bg-deep:        #f3dbcf;
  --bg-warm:        #f8e4da;
  --bg-panel:       #f0d6cb;
  --amber:          #b9553c;
  --amber-glow:     #d46d52;
  --amber-dim:      #cf9a8c;
  --parchment:      #3c221c;
  --parchment-dim:  #6f4338;
  --fog:            #b78478;
  --divider:        #e3bfb3;
  --sepia:          #b07a6e;
  --bg-deep-rgb:    243, 219, 207;
  --bg-warm-rgb:    248, 228, 218;
  --amber-rgb:      185, 85, 60;
}

/* — Purple range: lavender / blueberry / eggplant / blackberry — */
[data-theme="blueberry"] {
  --bg-deep:        #e6def2;
  --bg-warm:        #efe8f7;
  --bg-panel:       #e2d7f0;
  --amber:          #4e3b87;
  --amber-glow:     #664fa4;
  --amber-dim:      #b0a2cf;
  --parchment:      #221c36;
  --parchment-dim:  #50456c;
  --fog:            #978ab8;
  --divider:        #d1c4e9;
  --sepia:          #8f82af;
  --bg-deep-rgb:    230, 222, 242;
  --bg-warm-rgb:    239, 232, 247;
  --amber-rgb:      78, 59, 135;
}

/* — Blue range: dusty turquoise / azure / blue-green / natural blue — */
[data-theme="turquoise"] {
  --bg-deep:        #ddeceb;
  --bg-warm:        #e8f4f3;
  --bg-panel:       #dcebea;
  --amber:          #2f8f97;
  --amber-glow:     #44a8b0;
  --amber-dim:      #91bfc2;
  --parchment:      #17343a;
  --parchment-dim:  #3d6770;
  --fog:            #86aeb1;
  --divider:        #c4dcda;
  --sepia:          #7ca7ab;
  --bg-deep-rgb:    221, 236, 235;
  --bg-warm-rgb:    232, 244, 243;
  --amber-rgb:      47, 143, 151;
}

/* Light/bright palettes: warm cream wash over video for readability */
[data-theme="eco"] .hero-overlay,
[data-theme="lav-choco"] .hero-overlay,
[data-theme="sky-bubble"] .hero-overlay,
[data-theme="yellow-char"] .hero-overlay,
[data-theme="navy-cream"] .hero-overlay,
[data-theme="pastel-duo"] .hero-overlay,
[data-theme="powder-gray"] .hero-overlay,
[data-theme="mustard"] .hero-overlay,
[data-theme="terracotta"] .hero-overlay,
[data-theme="blueberry"] .hero-overlay,
[data-theme="turquoise"] .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(var(--amber-rgb), 0.08) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(var(--bg-deep-rgb), 0.62) 0%,
      rgba(var(--bg-deep-rgb), 0.18) 42%,
      var(--bg-warm) 100%
    );
}

/* ═══════════════════════════════════════════════════════
   CURSIVE / SCRIPT STYLE OVERRIDES
   ═══════════════════════════════════════════════════════ */

/* — Dancing Script — warm midnight rose, romantic flowing cursive — */
[data-style="dancing"] {
  --bg-deep:        #1a0c12;
  --bg-warm:        #231018;
  --bg-panel:       #2e1520;
  --amber:          #c86090;
  --amber-glow:     #e880a8;
  --amber-dim:      #7a3050;
  --parchment:      #fde8f0;
  --parchment-dim:  #c090a8;
  --fog:            #7a5060;
  --divider:        #3e1e2c;
  --sepia:          #6a4050;
  --bg-deep-rgb:    26, 12, 18;
  --bg-warm-rgb:    35, 16, 24;
  --amber-rgb:      200, 96, 144;
  --font-display:   "Dancing Script", cursive;
  --font-heading:   "Dancing Script", cursive;
  --font-body:      "Lora", Georgia, serif;
}

[data-style="dancing"] .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(200, 96, 144, 0.12) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(26, 12, 18, 0.80) 0%,
      rgba(26, 12, 18, 0.30) 42%,
      var(--bg-warm) 100%
    );
}

/* — Great Vibes — deep midnight indigo, burnished gold calligraphy — */
[data-style="vibes"] {
  --bg-deep:        #08101a;
  --bg-warm:        #0e1828;
  --bg-panel:       #152030;
  --amber:          #c0a030;
  --amber-glow:     #e0c050;
  --amber-dim:      #7a6018;
  --parchment:      #f2e8d0;
  --parchment-dim:  #9a8870;
  --fog:            #405070;
  --divider:        #1e3048;
  --sepia:          #3a5878;
  --bg-deep-rgb:    8, 16, 26;
  --bg-warm-rgb:    14, 24, 40;
  --amber-rgb:      192, 160, 48;
  --font-display:   "Great Vibes", cursive;
  --font-heading:   "Cormorant Garamond", serif;
  --font-body:      "Lora", Georgia, serif;
}

[data-style="vibes"] .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(192, 160, 48, 0.10) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(8, 16, 26, 0.80) 0%,
      rgba(8, 16, 26, 0.30) 42%,
      var(--bg-warm) 100%
    );
}

/* — Pinyon Script — antique parchment sepia, 19th c. copperplate — */
[data-style="pinyon"] {
  --bg-deep:        #140e08;
  --bg-warm:        #1e160c;
  --bg-panel:       #281e12;
  --amber:          #907050;
  --amber-glow:     #b09068;
  --amber-dim:      #5a4030;
  --parchment:      #f8eed8;
  --parchment-dim:  #b8a080;
  --fog:            #6a5840;
  --divider:        #342618;
  --sepia:          #6a5040;
  --bg-deep-rgb:    20, 14, 8;
  --bg-warm-rgb:    30, 22, 12;
  --amber-rgb:      144, 112, 80;
  --font-display:   "Pinyon Script", cursive;
  --font-heading:   "EB Garamond", serif;
  --font-body:      "Spectral", serif;
}

[data-style="pinyon"] .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(144, 112, 80, 0.10) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(20, 14, 8, 0.80) 0%,
      rgba(20, 14, 8, 0.30) 42%,
      var(--bg-warm) 100%
    );
}

/* — Parisienne — dusty French mauve, Art Nouveau Paris — */
[data-style="parisienne"] {
  --bg-deep:        #180e18;
  --bg-warm:        #221428;
  --bg-panel:       #2e1c36;
  --amber:          #a070b0;
  --amber-glow:     #c090d0;
  --amber-dim:      #6a4878;
  --parchment:      #fde8ff;
  --parchment-dim:  #c0a0c8;
  --fog:            #7a5888;
  --divider:        #3c2448;
  --sepia:          #7a5890;
  --bg-deep-rgb:    24, 14, 24;
  --bg-warm-rgb:    34, 20, 40;
  --amber-rgb:      160, 112, 176;
  --font-display:   "Parisienne", cursive;
  --font-heading:   "Cormorant Garamond", serif;
  --font-body:      "Lora", Georgia, serif;
}

[data-style="parisienne"] .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(160, 112, 176, 0.12) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(24, 14, 24, 0.80) 0%,
      rgba(24, 14, 24, 0.30) 42%,
      var(--bg-warm) 100%
    );
}